dykj-outsource-12123/pages/my/index.vue
2024-06-26 14:46:13 +08:00

125 lines
2.5 KiB
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">
<view class="userlist-box">
<view class="userlist-box-text">
<view><uni-icons color="#1f579a" :type="item.icon" size="26"></uni-icons></view>
<view style="margin-left: 1rem">{{ item.text }}</view>
</view>
<view><uni-icons type="forward" color="#bfbfbf" size="24"></uni-icons></view>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
const serve = ref([
{
text: '实人认证',
icon: 'location-filled',
user: '',
id: 0
},
{
text: '我的证件',
icon: 'location-filled',
user: '',
id: 1
},
{
text: '证件号码',
icon: 'spinner-cycle',
id: 2
},
{
text: '有效期限',
icon: 'star-filled',
user: '',
id: 3
},
{
text: '手机号码',
icon: 'star-filled',
user: '',
id: 4
},
{
text: '邮寄地址',
icon: 'refresh-filled',
id: 5
},
{
text: '电子文书',
icon: 'refresh-filled',
id: 6
},
{
text: '信息申诉',
icon: 'refresh-filled',
id: 7
},
{
text: '交管小安',
icon: 'refresh-filled',
id: 8
},
{
text: '咨询反馈',
icon: 'refresh-filled',
id: 9
}
]);
// 跳转设置页面
const set = () => {
uni.navigateTo({
url: '/pages/my/components/install/index'
});
};
</script>
<style lang="scss" scoped>
.user {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0.8rem 1rem 1rem;
background-color: #2c66a9;
color: #fff;
letter-spacing: 1.5px; /* 设置字符间距为2像素 */
.user-icon {
// border-left: 1rpx solid #3670b1;
}
}
.userlist {
background-color: #fff;
letter-spacing: 1.5px;
font-weight: 700;
.userlist-box {
width: 96%;
margin-left: 4%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1rpx solid #eee;
.userlist-box-text {
display: flex;
align-items: center;
}
}
}
</style>