珠宝小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

170 lines
3.5 KiB

<template>
<view class="purse">
<navbar title="提现" leftClick @leftClick="$utils.navigateBack" />
<view class="top-box">
<view class="top-one">
输入提现金额
</view>
<view class="top-two">
<view>168.88</view>
<view>全部提现</view>
</view>
<view class="top-three">
<view>可提现金额</view>
<view>168.88</view>
</view>
</view>
<view class="middle">
<view class="middle-one">提现说明</view>
<view style="padding-bottom: 20rpx;">
<view class="middle-two">
<view style="color: #A7D458;">1.</view>
<view>说明文本说明文本说明文本说明文本说明文本说明文本说明文本说明文本说明文本说明文本</view>
</view>
<view class="middle-two">
<view style="color: #A7D458;">2.</view>
<view>说明文本说明文本说明文本说明文本说明文本说明文本说明文本说明文本说明文本说明文本</view>
</view>
</view>
</view>
<view class="cell">
<view class="middle-one">提现记录</view>
<uv-cell-group>
<uv-cell :center="true" :border="false" v-for="(item,index) in 10" :key="index">
<template v-slot:title>
<text style="font-size: 28rpx;">提现</text>
</template>
<template v-slot:label>
<text style="font-size: 24rpx;color: #999; margin-top: 10rpx;">2024-11-12 12:56:48</text>
</template>
<template v-slot:value>
<view>
<view style="font-size: 28rpx;">+56.6</view>
<view style="font-size: 24rpx;color: #999; margin-top: 10rpx;">提现成功</view>
</view>
</template>
</uv-cell>
</uv-cell-group>
</view>
<view class="b-fiexd">
<view class="button-submit">确定提现</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
notice: ''
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.purse {
min-height: 100vh;
background-color: #F3F3F3;
.top-box {
height: 370rpx;
width: 100%;
background-image: url(../static/home/2.png);
background-size: 100% 100%;
.top-one {
font-size: 28rpx;
color: #FFF;
padding: 40rpx 20rpx 10rpx 20rpx;
}
.top-two {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10rpx;
padding: 10rpx;
background-color: #FFF;
border-radius: 16rpx;
view:nth-child(1) {
font-size: 80rpx;
color: #474747;
}
view:nth-child(2) {
font-size: 28rpx;
color: #92D823;
}
}
.top-three {
display: flex;
padding: 10rpx 20rpx;
color: #474747;
font-size: 28rpx;
view:nth-child(2) {
color: #F53546;
}
}
}
.middle {
margin: 0 20rpx;
background-color: #fff;
border-radius: 16rpx;
margin-top: -70rpx;
.middle-one {
font-size: 34rpx;
color: #474747;
font-weight: 600;
padding: 40rpx 20rpx 10rpx;
}
.middle-two {
display: flex;
margin: 20rpx;
font-size: 26rpx;
color: #A2A2A2;
}
}
.cell {
margin: 20rpx;
background-color: #fff;
border-radius: 16rpx;
.middle-one {
font-size: 34rpx;
color: #474747;
font-weight: 600;
padding: 40rpx 20rpx 10rpx;
}
}
.button-submit {
width: 596rpx;
height: 90rpx;
line-height: 90rpx;
background: $uni-color;
border-radius: 46rpx;
margin: 20rpx auto;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
text-align: center;
color: #ffffff;
}
}
</style>