caimei-distribution-www/src/views/mine/index.vue

<template>
  <div class="mine">
    <div class="mine-bg">
      <div class="user_icon">
        <van-image
          lazy-load
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div class="user_name">赵铭</div>
      </div>
    </div>
    <order-type-list :obj-cell="ObjCell">
      <template #content>
        <div class="cell_content">
          <van-badge
            :content="item.content"
            max="99"
            v-for="item,index in orderLinks"
            :key="index"
            @click="$ApiRouter(`${item.link}`)"
          >
            <div class="child">
              <img src="" alt="" />
              <div>{{ item.name }}</div>
            </div>
          </van-badge>
        </div>
      </template>
    </order-type-list>
    <order-type-list :obj-cell="ObjCellLink" />
    <div class="logo-bottom">
      <img src="" alt="">
      <div>由采美365网提供技术支持</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ObjCell: {
        list: [
          {
            isLink: true,
            title: '我的订单',
            value: '全部订单',
            to: '/order-list'
          }
        ],
        isInset: true,
        top: '24.3vw'
      },
      ObjCellLink: {
        list: [
          {
            isLink: true,
            title: '机构意向订单报备',
            value: '',
            to: '/ins-intention-report',
            icon: 'location-o'
          },
          {
            isLink: true,
            title: '我的团队',
            value: '',
            to: '/my-team',
            icon: 'location-o'
          },
          {
            isLink: true,
            title: '订单报备佣金',
            value: '',
            to: '/order-report',
            icon: 'location-o'
          },
          {
            isLink: true,
            title: '订单销售佣金',
            value: '',
            to: '/order-sales',
            icon: 'location-o'
          },
          {
            isLink: true,
            title: '我的名片',
            value: '',
            to: '/mine-card',
            icon: 'location-o'
          },
          {
            isLink: true,
            title: '商品资料',
            value: '',
            to: '/goods-information',
            icon: 'location-o'
          },
          {
            isLink: true,
            title: '账户设置',
            value: '',
            to: '/account-settings',
            icon: 'location-o'
          }
        ],
        isInset: true,
        top: '62.7vw'
      },
      orderLinks: [
        {
          icon: '',
          link: '',
          content: 200,
          name: '待确认'
        },
        {
          icon: '',
          link: '',
          content: 200,
          name: '待付款'
        },
        {
          icon: '',
          link: '',
          content: 200,
          name: '待发货'
        },
        {
          icon: '',
          link: '',
          content: 200,
          name: '已发货'
        },
        {
          icon: '',
          link: '',
          content: 200,
          name: '退货/款'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.mine {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  position: relative;
  .mine-bg {
    height: 29.3vw;
    background: #ff5b00;
    padding: 5.3vw 4.3vw;
    .user_icon {
      height: 15.7vw;
      display: flex;
      align-items: center;
      ::v-deep .van-image__img {
        width: 15.7vw;
        height: 15.7vw;
        margin-right: 5.3vw;
        border-radius: 50%;
      }
      .user_name {
        font-size: 4.3vw;
        color: #fff;
      }
    }
  }
  .cell_content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 23.1vw;
    .child {
      width: 12vw;
      height: 15vw;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      white-space: nowrap;
      img {
        width: 8.5vw;
        height: 8.5vw;
        object-fit: contain;
      }
      div {
        color: #666666;
        font-size: 3.5vw;
      }
    }
  }
  .logo-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 37.7vw;
    margin: 0 auto;
    position: absolute;
    bottom: 15vw;
    left: 50%;
    height: 14vw;
    transform: translateX(-50%);
    white-space: nowrap;
    img {
      width: 9.3vw;
      height: 9.1vw;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        width: 12.8vw;
        transform: translateY(-50%);
        height: 2px;
        background: #666666;
        left: -14.8vw;
      }
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 12.8vw;
        transform: translateY(-50%);
        right: -14.8vw;
        height: 2px;
        background: #666666;
      }
    }
    div {
      color: #999999;
      font-size: 3.2vw;
    }
  }
}
</style>