153 lines
3.5 KiB
Vue
153 lines
3.5 KiB
Vue
<template>
|
|
<view style="background-color: #2c66a9; height: 3rem" :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }">
|
|
<!-- 导航栏 -->
|
|
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="van-nav-bar">
|
|
<view class="van-nav-bar__content">
|
|
<view class="page-icon" @click="gotoBack">
|
|
<uni-icons color="#fff" type="back" size="26"></uni-icons>
|
|
<view>返回</view>
|
|
</view>
|
|
<view class="page-navbar">有效期限</view>
|
|
</view>
|
|
</view>
|
|
<!-- 用户详情 -->
|
|
<view class="boxone">
|
|
<view class="user">
|
|
<view class="userbox">
|
|
<view style="font-weight: 700">姓名</view>
|
|
<view style="margin-left: 6rem; color: #6a7372">xx</view>
|
|
</view>
|
|
<view class="userbox">
|
|
<view style="font-weight: 700">证件类型</view>
|
|
<view style="margin-left: 4rem; color: #6a7372">A居民身份证</view>
|
|
</view>
|
|
<view class="userbox">
|
|
<view style="font-weight: 700">证件号码</view>
|
|
<view style="margin-left: 4rem; color: #6a7372">2323***********229</view>
|
|
</view>
|
|
<view class="userboxdata">
|
|
<view style="display: flex">
|
|
<view style="font-weight: 700">证件有效期限</view>
|
|
<view style="margin-left: 2rem; color: #6a7372">请选择日期</view>
|
|
</view>
|
|
<view>
|
|
<uni-icons style="margin-right: 0.5rem" type="right" size="20" color="#b3b3b3"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 案例 -->
|
|
<view class="example">样例</view>
|
|
<!-- 图片 -->
|
|
<view style="background-color: #fff">
|
|
<image style="width: 90%; height: 12rem; margin: 0.8rem 5%" src="../../../../static/shenfen.png"></image>
|
|
</view>
|
|
<!-- 按钮 -->
|
|
<view class="buttom">
|
|
<view class="buttombox">下一步</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
const { safeAreaInsets } = uni.getSystemInfoSync();
|
|
const user = ref([
|
|
{
|
|
text: '',
|
|
content: '',
|
|
id: 1
|
|
},
|
|
{
|
|
text: '',
|
|
content: '',
|
|
id: 2
|
|
},
|
|
{
|
|
text: '',
|
|
content: '',
|
|
id: 3
|
|
},
|
|
{
|
|
text: '',
|
|
content: '',
|
|
id: 4
|
|
}
|
|
]);
|
|
const gotoBack = () => {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.van-nav-bar__content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 3rem;
|
|
background-color: #2c66a9;
|
|
color: #fff;
|
|
letter-spacing: 1.5px;
|
|
position: relative;
|
|
|
|
.page-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
.page-navbar {
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|
|
.boxone {
|
|
background-color: #f2fbfa;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: calc(100vh - 3rem);
|
|
}
|
|
.user {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
margin-top: 0.8rem;
|
|
.userbox {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 1rem 0;
|
|
width: 95%;
|
|
border-bottom: 1rpx solid #ececec;
|
|
margin-left: 5%;
|
|
}
|
|
.userboxdata {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 95%;
|
|
margin-left: 5%;
|
|
padding: 1rem 0;
|
|
}
|
|
}
|
|
.example {
|
|
padding: 0.8rem 0;
|
|
width: 95%;
|
|
margin-left: 5%;
|
|
color: #6a7372;
|
|
font-size: 1rem;
|
|
}
|
|
.buttom {
|
|
flex-grow: 1;
|
|
.buttombox {
|
|
background-color: #d5d5d5;
|
|
width: 90%;
|
|
height: 3.2rem;
|
|
border-radius: 0.2rem;
|
|
text-align: center;
|
|
line-height: 3.2rem;
|
|
color: #a1a1a1;
|
|
margin: 2rem 5%;
|
|
}
|
|
}
|
|
</style>
|