Vue实现快递配送UI笔记

记录一下 

示例：

 

 //-邮寄运输详情
        .w-full.rounded-20.px-25.mt-25.bg-white(
          v-if='daijichu===1'
        )
          scroll-view.w-full.h-full.bottom-10(scroll-y)
            .w-702.rounded-20.mx-auto.pb-33
              .flex.flex-col.ml-23.pt-35.pb-25.border-b-1.border-cee
                .text-30.text-c33.font-bold.w-full.h-44 顺丰快递
                .text-30.text-c33.mt-18.w-full.h-44 运单号：87747858897846746
              //- //- 还未发货
              //- .w-full.h-full.mx-auto(v-if='!isSend')
              //-   image.pt-135(
              //-     style='width: 147rpx; height: 238rpx; margin-left: 272rpx',
              //-     src='https://oss.ljnhs.cn/frontend/images/null.png'
              //-   )
              //-   .text-30.text-c99.text-center.mt-41 您的订单还未发货，请耐心等待
              //- 快递配送
              .h-full.w-665.mt-53.mx-auto
                .h-full.w-full.flex(
                  v-for='(item, ide) in listItem1',
                  :key='ide',
                  @click='selectLogistic'
                )
                  .w-13.h-full
                    .w-13.h-13.rounded-1_2(
                      :style='ide === 0 ? "background: #1ee58f" : "background: #696969"'
                    )
                  .w-5.-ml-8.mt-20.mb-15(
                    :class='ide === listItem1.length - 1 ? "border-none":"border-l-1 border-dashed border-cd2"'
                  )
                  .flex-1.ml-26.h-full
                    .text-24.mb-13.-mt-13(
                      :style='ide === 0 ? "color: #1ee58f" : "color: #333333"'
                    ) {{ item.time }}
                    .w-630.rounded-20.mr-36(
                      :style='ide === 0 ? "color: #1ee58f" : "color: #333333"'
                    )
                      .pt-26.leading-42.text-24 {{ item.name }}
                      .pb-31.leading-42.text-24
                        text 投递员:{{ item.aa }},电话:{{ item.phone }}

<script>
import { mapGetters, mapState } from 'vuex'
export default {
  data() {
    return {
         listItem1: [
                {
                  id: 1,
                  name: '邮件投递到昆明呈贡七彩第壹城三期17幢店菜鸟驿站',
                  aa: '陈平凹',
                  phone: '17858784962',
                  icon: 'https://oss.ljnhs.cn/frontend/images/zhidaojia01.png',
                  time: '2021年5月14日 上午11:13:27'
                },
                {
                  id: 2,
                  name: '邮件投递到昆明呈贡七彩第壹城三期17幢店菜鸟驿站',
                  aa: '陈平凹',
                  phone: '17858784962',
                  icon: 'https://oss.ljnhs.cn/frontend/images/zhidaojia01.png',
                  time: '2021年5月14日 上午11:13:27'
                },
                {
                  id: 3,
                  name: '邮件投递到昆明呈贡七彩第壹城三期17幢店菜鸟驿站',
                  aa: '陈平凹',
                  phone: '17858784962',
                  icon: 'https://oss.ljnhs.cn/frontend/images/zhidaojia01.png',
                  time: '2021年5月14日 上午11:13:27'
                },
                {
                  id: 4,
                  name: '邮件投递到昆明呈贡七彩第壹城三期17幢店菜鸟驿站',
                  aa: '陈平凹',
                  phone: '17858784962',
                  icon: 'https://oss.ljnhs.cn/frontend/images/zhidaojia01.png',
                  time: '2021年5月14日 上午11:13:27'
                }
              ]

</script>

<style lang="stylus" scoped>
.placeholder
  color rgba(178, 178, 178, 1)
  font-size 30rpx
.myStyle
  border none
</style>