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

163 lines
3.8 KiB
Vue
Raw Normal View History

2024-06-25 18:39:10 +08:00
<template>
2024-06-26 09:12:03 +08:00
<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">
2024-06-26 14:46:13 +08:00
<view>
<uni-icons type="gear" color="#fff" size="30"></uni-icons>
</view>
2024-06-26 09:12:03 +08:00
<view style="margin-top: 0.2rem; font-size: 0.9rem">设置</view>
</view>
</view>
2024-06-28 11:30:43 +08:00
<view v-for="item in serve" :key="item.id" class="userlist" @click="date(item.id)">
2024-06-26 09:12:03 +08:00
<view class="userlist-box">
<view class="userlist-box-text">
2024-06-27 15:17:31 +08:00
<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>
2024-06-26 09:12:03 +08:00
<view style="margin-left: 1rem">{{ item.text }}</view>
</view>
2024-06-27 15:17:31 +08:00
<view>
<uni-icons style="margin-right: 0.8rem" fontFamily="CustomFont" color="#bfbfbf" size="16">{{ item.queenicon }}</uni-icons>
</view>
2024-06-26 09:12:03 +08:00
</view>
2024-06-27 15:17:31 +08:00
<view style="width: 92%; border-bottom: 1rpx solid #e2e2e2; margin-left: 8%"></view>
2024-06-26 09:12:03 +08:00
</view>
2024-06-28 11:30:43 +08:00
<TabBar :val="4" />
2024-06-25 19:11:33 +08:00
</view>
2024-06-25 18:39:10 +08:00
</template>
2024-06-25 19:11:33 +08:00
<script setup>
2024-06-26 09:12:03 +08:00
import { ref } from 'vue';
2024-06-27 19:11:25 +08:00
import TabBar from '@/components/tabBar/index.vue';
2024-06-26 09:12:03 +08:00
const serve = ref([
{
text: '实人认证',
2024-06-27 16:42:05 +08:00
icon: '../../static/wode/1.png',
2024-06-27 15:17:31 +08:00
queenicon: '',
2024-06-26 09:12:03 +08:00
user: '',
id: 0
},
{
text: '我的证件',
2024-06-27 16:42:05 +08:00
icon: '../../static/wode/2.png',
2024-06-27 15:17:31 +08:00
queenicon: '',
2024-06-26 09:12:03 +08:00
user: '',
id: 1
},
{
text: '证件号码',
2024-06-27 16:42:05 +08:00
icon: '../../static/wode/3.png',
2024-06-27 15:17:31 +08:00
queenicon: '',
user: '',
2024-06-26 09:12:03 +08:00
id: 2
},
{
text: '有效期限',
2024-06-27 16:42:05 +08:00
icon: '../../static/wode/4.png',
2024-06-27 15:17:31 +08:00
queenicon: '\ue612',
2024-06-26 09:12:03 +08:00
user: '',
id: 3
},
{
text: '手机号码',
2024-06-27 16:42:05 +08:00
icon: '../../static/wode/5.png',
2024-06-27 15:17:31 +08:00
queenicon: '\ue612',
2024-06-26 09:12:03 +08:00
user: '',
id: 4
},
{
text: '邮寄地址',
2024-06-27 16:42:05 +08:00
icon: '../../static/wode/6.png',
2024-06-27 15:17:31 +08:00
queenicon: '\ue612',
2024-06-26 09:12:03 +08:00
id: 5
},
{
text: '电子文书',
2024-06-27 16:42:05 +08:00
icon: '../../static/wode/7.png',
2024-06-27 15:17:31 +08:00
queenicon: '\ue612',
2024-06-26 09:12:03 +08:00
id: 6
},
{
text: '信息申诉',
2024-06-27 16:42:05 +08:00
icon: '../../static/wode/8.png',
2024-06-27 15:17:31 +08:00
queenicon: '\ue612',
2024-06-26 09:12:03 +08:00
id: 7
},
{
text: '交管小安',
2024-06-28 11:30:43 +08:00
icon: '../../static/wode/9.png',
2024-06-27 15:17:31 +08:00
queenicon: '\ue612',
2024-06-26 09:12:03 +08:00
id: 8
},
{
text: '咨询反馈',
2024-06-27 16:42:05 +08:00
icon: '../../static/wode/10.png',
2024-06-27 15:17:31 +08:00
queenicon: '\ue612',
2024-06-26 09:12:03 +08:00
id: 9
2024-06-25 19:11:33 +08:00
}
2024-06-26 09:12:03 +08:00
]);
2024-06-26 14:46:13 +08:00
// 跳转设置页面
const set = () => {
uni.navigateTo({
url: '/pages/my/components/install/index'
});
};
2024-06-28 11:30:43 +08:00
// 跳转有效日期
const date = (id) => {
if (id == 3) {
uni.navigateTo({
url: '/pages/my/components/effectiveDate/index'
});
}
};
2024-06-25 18:39:10 +08:00
</script>
2024-06-27 15:17:31 +08:00
<style lang="scss">
@font-face {
font-family: CustomFont;
2024-06-27 16:42:05 +08:00
src: url('../../static/wode/iconfont.ttf');
2024-06-27 15:17:31 +08:00
}
2024-06-26 09:12:03 +08:00
.user {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0.8rem 1rem 1rem;
2024-06-27 17:50:43 +08:00
background-image: url(@/static/wode/f9.png);
2024-06-28 11:30:43 +08:00
background-size: contain;
background-repeat: no-repeat;
2024-06-26 09:12:03 +08:00
color: #fff;
letter-spacing: 1.5px; /* 设置字符间距为2像素 */
.user-icon {
2024-06-26 14:46:13 +08:00
// border-left: 1rpx solid #3670b1;
2024-06-26 09:12:03 +08:00
}
}
.userlist {
background-color: #fff;
letter-spacing: 1.5px;
.userlist-box {
width: 96%;
margin-left: 4%;
display: flex;
align-items: center;
justify-content: space-between;
2024-06-27 15:17:31 +08:00
padding: 0.8rem 0;
2024-06-26 09:12:03 +08:00
.userlist-box-text {
display: flex;
align-items: center;
}
}
}
</style>