274 lines
4.5 KiB
Vue
274 lines
4.5 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="moduleWrap">
|
||
<view class="moduleBox">
|
||
<view class="monthBox">
|
||
<view class="text1">身份证信息</view>
|
||
<text class="text2">上传本人身份证照片，保持图片清晰完整</text>
|
||
</view>
|
||
<view class="flex-between" style="margin-top: 20rpx;">
|
||
<view>
|
||
<u-upload
|
||
:fileList="fileList1"
|
||
@afterRead="afterRead"
|
||
@delete="deletePic"
|
||
name="1"
|
||
multiple
|
||
:maxCount="10"
|
||
>
|
||
<image
|
||
:src="path+'/assets/img/icon/IDbgz.png'"
|
||
mode="widthFix"
|
||
style="width: 300rpx;height: 190rpx;"
|
||
></image>
|
||
</u-upload>
|
||
</view>
|
||
<view>
|
||
<u-upload
|
||
:fileList="fileList1"
|
||
@afterRead="afterRead"
|
||
@delete="deletePic"
|
||
name="1"
|
||
multiple
|
||
:maxCount="10"
|
||
>
|
||
<image
|
||
:src="path+'/assets/img/icon/IDbgz.png'"
|
||
mode="widthFix"
|
||
style="width: 300rpx;height: 190rpx;"
|
||
></image>
|
||
</u-upload>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="moduleBox">
|
||
<view class="text4">订单号：202504121349001</view>
|
||
<view class="flex-between">
|
||
<view class="centerBox">
|
||
<view class="text5">余额充值</view>
|
||
<view class="text6">2025年04月12日 13:49</view>
|
||
</view>
|
||
<view class="bottomBox">
|
||
<view class="text7">+60.00</view>
|
||
<view class="text8">完成订单</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
}
|
||
},
|
||
components:{
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods: {
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
height: 100%;
|
||
}
|
||
.content{
|
||
padding: 20rpx 35rpx;
|
||
background: #F5F5FA;
|
||
height: 100%;
|
||
}
|
||
.monthBox{
|
||
display: flex;
|
||
flex-direction: column;
|
||
// justify-content: flex-start;
|
||
// align-items: center;
|
||
.text1{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.text2{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
.moduleBox{
|
||
background: #fff;
|
||
padding: 32rpx 30rpx 40rpx;
|
||
border-bottom: 1rpx solid #DEDEDE;
|
||
.text4{
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
}
|
||
.centerBox{
|
||
margin-top: 25rpx;
|
||
.text5{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.text6{
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
.bottomBox{
|
||
margin-top: 10rpx;
|
||
text-align: center;
|
||
.text7{
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
}
|
||
.text8{
|
||
font-weight: bold;
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
margin-top: 8rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
.moduleBox:last-child{
|
||
border-bottom: none;
|
||
}
|
||
.moduleWrap{
|
||
|
||
margin-bottom: 20rpx;
|
||
border-radius: 30rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.hs-row{
|
||
width: 100%;
|
||
margin-left: 0;
|
||
padding: 40rpx 45rpx 40rpx 69rpx;
|
||
border-radius: 30rpx;
|
||
}
|
||
.hs-row-ft button{
|
||
height: 144rpx;
|
||
width: 144rpx;
|
||
padding: 0;
|
||
border-radius: 50%;background-color: #fff;line-height: 108px;
|
||
|
||
}
|
||
.hs-row-ft button::after{
|
||
border: none;
|
||
}
|
||
|
||
.user-head {
|
||
height: 140rpx;
|
||
}
|
||
|
||
.user-head-img {
|
||
height: 90upx;
|
||
width: 90upx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
|
||
.hs-row-na {
|
||
color: #666;
|
||
font-size: 26upx; text-align: right; padding-right: 15px;
|
||
width: 100%;
|
||
}
|
||
|
||
.hs-hd {
|
||
width: 160rpx;
|
||
}
|
||
|
||
.down {
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.infoBox{
|
||
background: #fff;
|
||
border-radius: 30rpx;
|
||
overflow: hidden;
|
||
padding: 10rpx 0 10rpx;
|
||
}
|
||
.hs-list{
|
||
// padding: 33rpx 45rpx;
|
||
margin: 33rpx 45rpx 0;
|
||
padding-bottom: 33rpx;
|
||
border-bottom: 1px solid #DEDEDE;
|
||
overflow: hidden;
|
||
}
|
||
.hs-list:last-child{
|
||
border-bottom: none;
|
||
}
|
||
.escLogin{
|
||
padding: 40rpx 0;
|
||
border-radius: 30rpx;
|
||
background: #fff;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #282F38;
|
||
margin-top: 20rpx;
|
||
}
|
||
.rightText{
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #282F38;
|
||
}
|
||
.colorText{
|
||
color:#FB8F0C;
|
||
}
|
||
.modelLabel{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #282F38;
|
||
padding: 42rpx 42rpx 20rpx;
|
||
}
|
||
.rightText2{
|
||
width: 115rpx;
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
text-align: center;
|
||
background: rgba(251,143,12,0.1);
|
||
border-radius: 10rpx;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #FB8F0C;
|
||
}
|
||
</style> |