小程序 步骤条组件

html

<!--components/Step/step.wxml-->

<view class="ct-wx-step">

    <view class='ct-wx-cell-list' wx:key="{{item}}" wx:for="{{stepList}}">

        <view class='ct-wx-cell-point'>

            <view class="ct-wx-cell-point-time">

                <image wx:if="{{item.status === '0'}}" src="../../images/status0.png" />

                <image wx:if="{{item.status === '1'}}" src="../../images/status1.png" />

                <image wx:if="{{item.status === '2'}}" src="../../images/status2.png" />

                <image wx:if="{{item.status === '3'}}" src="../../images/status3.png" />

                <image wx:if="{{item.status === '4'}}" src="../../images/status4.png" />

                <image wx:if="{{item.status === '5'}}" src="../../images/status5.png" />

                <view>{{item.time}}</view>

            </view>

            <view>{{item.day}}</view>

        </view>

        <view class='ct-wx-cell-line'>

            <text></text>

            <view class="{{item.status === '0'? 'or':(item.status === '1'? 'bls':(item.status === '2'? 'ga':(item.status === '3'? 'bl':(item.status === '4'? 'ges':(item.status === '5'? 'ge':''))))) }}">

                {{item.content}}</view>

        </view>

    </view>

</view>

js

// components/Step/step.js

Component({

    /**

     * 组件的属性列表

     */

    properties: {

      //步骤条数据

      stepList:{

        type:Array,

        value:[

          {

            name:"名称",

            event:"步骤内容",

            time:"2021-07-19：12:30:01",

            status:"0"

          }

        ]

      }

    },

  

    /**

     * 组件的初始数据

     */

    data: {

  

    },

  

    /**

     * 组件的方法列表

     */

    methods: {

  

    }

  })

css

/* components/Step/step.wxss */

.ct-wx-step {

    /* 

    width: 96%;

    margin-left: 2%;

    box-shadow: 0px 2px 10px rgba(102, 102, 102, 0.09);

    border-radius: 6px; */

    background: #FFFFFF;

    padding: 30rpx 0px;

}

.ct-wx-cell-list {

    padding: 0 12px;

}

.ct-wx-cell-line {

    display: flex;

    margin: 5px 0;

    overflow: hidden;

    align-items: end;

}

.ct-wx-cell-line text {

    display: inline-block;

    height: 100rpx;

    width: 4rpx;

    background-color: #F1F1F1;

    margin: 0 28rpx;

}

.ct-wx-cell-line view {

    width: 100%;

    padding: 20rpx 36rpx 16rpx 36rpx;

    font-size: 28rpx;

    font-family: SourceHanSansCN-Medium, SourceHanSansCN;

    font-weight: 500;

}

.or {

    color: #DB9712;

    background: #FEFAF2;

    border-left: 4rpx solid #DB9712;

}

.bl {

    color: #4590E5;

    background: #F2F9FE;

    border-left: 4rpx solid #4590E5;

}

.ge {

    color: #26D396;

    background: #EDFFF9;

    border-left: 4rpx solid #26D396;

}

.ga {

    color: #999999;

    background: #FAFAFA;

    border-left: 2px solid #DDDDDD;

}

.bls {

    color: #2EB7E9;

    background: #F2FCFF;

    border-left: 2px solid #2EB7E9;

}

.ges {

    color: #1FAF99;

    background: #F9FFFE;

    border-left: 2px solid #1FAF99;

}

.last {

    color: #333333;

    border-left: 1px solid #FFB93F;

}

.default {

    background: #E4E4E4;

}

.piont-last {

    background: #FFB93F;

}

.ct-wx-cell-point {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 12px;

    font-family: SourceHanSansCN-Regular, SourceHanSansCN;

    font-weight: 400;

    color: #999999;

}

.ct-wx-cell-point-time {

    display: flex;

    align-items: center;

}

.ct-wx-cell-point image {

    width: 32px;

    height: 32px;

    margin-right: 15px;

}