dykj-outsource-12123/pages/my/components/effectiveDate/index.vue
2024-06-28 11:30:43 +08:00

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>