项目实训六，整体页面改进

一，我们首先对整体界面进行了改进

对图案颜色，整体css做了改进

<view class="container">
  <swiper class="index-banner" indicator-dots="{{true}}"
    autoplay="{{true}}" interval="{{4000}}" duration="{{1000}}">
    <block wx:for="{{imgUrls}}" wx:key="*this">
      <swiper-item>
        <image src="{{item}}" mode="aspectFill" class="slide-image"/>
      </swiper-item>
    </block>
  </swiper>
	<view class="index-menu">
		<navigator class="index-menu-item" wx:for="{{indexmenu}}" wx:key="{{item.url}}" url="../{{item.url}}/{{item.url}}">
			<image src="{{item.icon}}"></image>
			<text>{{item.text}}</text>
		</navigator>
	</view>
</view>

.index-banner{
	width: 100%;
	height: 474rpx;
}
.index-banner .slide-image{
	width: 100%;
}
.wx-swiper-dot text{
	background: #f00;
}
.index-menu{
	width: 100%;
	display: -webkit-flex;
	display: -webkit-box;
	display: flex;
	-webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
	background: #fff;
}
.index-menu-item{
	-webkit-flex: 0 0 25%;
	-webkit-box-flex: 0;
	        flex: 0 0 25%;
	max-width: 25%;
	text-align: center;
	margin-top: 10rpx;
/* 	border-top: 1rpx solid #ddd;
	border-bottom: 1rpx solid #ddd;
	border-right: 1rpx solid #ddd; */
	padding: 20rpx 20rpx;
	box-sizing: border-box;
	margin-bottom: -1rpx;
}
.index-menu-item image{
	width: 110rpx;
	height: 110rpx;
}
.index-menu-item text{
	display: block;
	font-size: 30rpx;
	line-height: 1.4;
	white-space: nowrap;
}

二，在详情列表

引入了iview及colorui，对界面的完善程度进行了改进

1.节点栏横

	<scroll-view class="content-bar" scroll-x="true">
  <view class="bar-view" style="width:{{barWidth}}px">
    <progress percent="{{100/(trackNode.length-1)*Steps}}" class="progress" style="width:{{barWidth-stepWidth}}px" stroke-width="3" color="#A10606" backgroundColor="#E6EEFE" />
    <view class="steps_all" style="width:{{barWidth}}px">
      <view class="steps_one_box" style="width:{{stepWidth}}px" wx:for="{{trackNode}}" wx:key="cstomerNodeNo">
        <view wx:if="{{Steps>index}}" class="steps-success">
          <i-icon type="right" color="#fff" />
        </view>
        <view wx:if="{{Steps==index}}" class="steps_img">
          <i-icon type="more" color="#fff" size="28" />
        </view>
        <view wx:if="{{Steps<index}}" class="steps-no">
          <i-icon type="right" color="#fff" />
        </view>
        <view class="{{Steps>=index?'steps_wenzi':'steps_wenzi2'}}">{{item.stepName}}</view>
      </view>
    </view>
  </view>
</scroll-view>

2.节点栏竖（重写）

	<view class="space-block-content">
			 <i-steps current="{{verticalCurrent}}"  direction="vertical">
    <i-step wx:for="{{servicelist}}" wx:key="id" icon="{{item.tu}}">
        <view slot="title">
              审批人{{item.name}}
							<i-icon type="mine" />{{item.dengji}}
        </view>
        <view slot="content">
            批语：{{item.msg}}
					
        </view>
				<view slot="content">
						<i-icon type="activity" />
						日期：{{item.date}}时间：{{item.time}}
        </view>
    </i-step>
 
</i-steps>
	


	  	  </view>