dykj-outsource-12123/pages/my/index.vue

<template>
  <view>
    <view class="user">
      <view class="user-name">
        <view style="font-size: 1.1rem">姓名</view>
        <view style="font-size: 0.7rem; margin-top: 0.2rem">注册时间</view>
      </view>
      <view @click="set" class="user-icon">
        <view>
          <uni-icons type="gear" color="#fff" size="30"></uni-icons>
        </view>
        <view style="margin-top: 0.2rem; font-size: 0.9rem">设置</view>
      </view>
    </view>
    <view v-for="item in serve" :key="item.id" class="userlist" @click="date(item.id)">
      <view class="userlist-box">
        <view class="userlist-box-text">
          <view>
            <!-- <uni-icons color="#1f579a" :type="item.icon" size="26"></uni-icons> -->
            <image
              :src="item.icon"
              :style="{
                width: item.id === 5 ? '1.5rem' : item.id === 4 ? '1.2rem' : item.id == 2 ? '1.4rem' : ' 1.45rem',
                height: item.id === 5 ? '1.4rem' : item.id == 2 ? '1.2rem' : ' 1.45rem',
                transform: item.id === 4 ? 'translate(0.15rem,0.15rem)' : 'translateY(0.15rem)'
              }"
            ></image>
          </view>
          <view style="margin-left: 1rem">{{ item.text }}</view>
        </view>
        <view>
          <uni-icons style="margin-right: 0.8rem" fontFamily="CustomFont" color="#bfbfbf" size="16">{{ item.queenicon }}</uni-icons>
        </view>
      </view>
      <view style="width: 92%; border-bottom: 1rpx solid #e2e2e2; margin-left: 8%"></view>
    </view>
    <TabBar :val="4" />
  </view>
</template>

<script setup>
import { ref } from 'vue';
import TabBar from '@/components/tabBar/index.vue';
const serve = ref([
  {
    text: '实人认证',
    icon: '../../static/wode/1.png',
    queenicon: '',
    user: '',
    id: 0
  },
  {
    text: '我的证件',
    icon: '../../static/wode/2.png',
    queenicon: '',
    user: '',
    id: 1
  },
  {
    text: '证件号码',
    icon: '../../static/wode/3.png',
    queenicon: '',
    user: '',
    id: 2
  },
  {
    text: '有效期限',
    icon: '../../static/wode/4.png',
    queenicon: '\ue612',
    user: '',
    id: 3
  },
  {
    text: '手机号码',
    icon: '../../static/wode/5.png',
    queenicon: '\ue612',
    user: '',
    id: 4
  },
  {
    text: '邮寄地址',
    icon: '../../static/wode/6.png',
    queenicon: '\ue612',
    id: 5
  },
  {
    text: '电子文书',
    icon: '../../static/wode/7.png',
    queenicon: '\ue612',
    id: 6
  },
  {
    text: '信息申诉',
    icon: '../../static/wode/8.png',
    queenicon: '\ue612',
    id: 7
  },
  {
    text: '交管小安',
    icon: '../../static/wode/9.png',
    queenicon: '\ue612',
    id: 8
  },
  {
    text: '咨询反馈',
    icon: '../../static/wode/10.png',
    queenicon: '\ue612',
    id: 9
  }
]);
// 跳转设置页面
const set = () => {
  uni.navigateTo({
    url: '/pages/my/components/install/index'
  });
};
// 跳转有效日期
const date = (id) => {
  if (id == 3) {
    uni.navigateTo({
      url: '/pages/my/components/effectiveDate/index'
    });
  }
};
</script>

<style lang="scss">
@font-face {
  font-family: CustomFont;
  src: url('../../static/wode/iconfont.ttf');
}
.user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.8rem 1rem 1rem;
  background-image: url(@/static/wode/f9.png);
  background-size: contain;
  background-repeat: no-repeat;
  color: #fff;
  letter-spacing: 1.5px; /* 设置字符间距为2像素 */
  .user-icon {
    // border-left: 1rpx solid #3670b1;
  }
}
.userlist {
  background-color: #fff;
  letter-spacing: 1.5px;
  .userlist-box {
    width: 96%;
    margin-left: 4%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 0;
    .userlist-box-text {
      display: flex;
      align-items: center;
    }
  }
}
</style>