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.
171 lines
3.4 KiB
171 lines
3.4 KiB
<template>
|
|
<view class="content">
|
|
|
|
<view class="banner"></view>
|
|
|
|
<view class="center-data b-relative data-font1">
|
|
<view class="flex flex-sb data-font2">
|
|
<view class="sb-w3">可用余额</view>
|
|
<view class="sb-w3">累计提现</view>
|
|
<view class="sb-w3">累积收益</view>
|
|
</view>
|
|
<view class="flex flex-sb mt40">
|
|
<view class="sb-w3">￥1240.00</view>
|
|
<view class="sb-w3">￥190.00</view>
|
|
<view class="sb-w3">￥870.00</view>
|
|
</view>
|
|
<view class="flex flex-sb mt20">
|
|
<view class="sb-w3">
|
|
<view class="data-button">粉丝</view>
|
|
</view>
|
|
<view class="sb-w3">
|
|
<view class="data-button">提现</view>
|
|
</view>
|
|
<view class="sb-w3">
|
|
<view class="data-button">二维码</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="h88 flex flex-sb tab">
|
|
<view>费用明细</view>
|
|
<view>提现记录</view>
|
|
<view class="tab-active">收益记录</view>
|
|
</view>
|
|
|
|
<view style="background: #f5f5f5; min-height: calc(100vh - 570rpx); padding: 20rpx 0 40rpx;">
|
|
<view class="item-card">
|
|
<view class="item-line bottom-line flex flex-sb" v-for="i in 10">
|
|
<view>
|
|
<view style="">头部按摩放松</view>
|
|
<view style="color: #909090; font-size: 24rpx">2024-01-23 11:30:22</view>
|
|
</view>
|
|
<view>
|
|
<view v-if="i%2 === 0" style="line-height: 80rpx;color: #fc5341;">+￥1240.00</view>
|
|
<view v-else style="line-height: 80rpx;color: #333333;">-￥1240.00</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
onShow() {
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
body{
|
|
background-color: #fff;
|
|
}
|
|
|
|
.banner {
|
|
width: 100vw;
|
|
height: calc(392rpx - 160rpx);
|
|
background: linear-gradient(38deg,#4899a6 44%, #60bda2 100%);
|
|
}
|
|
|
|
.center-data{
|
|
width: 606rpx;
|
|
height: 208rpx;
|
|
background: #f5fdfb;
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 6rpx 12rpx 0 rgba(85,172,163,0.29);
|
|
|
|
margin: -144rpx auto 0;
|
|
padding: 32rpx 40rpx;
|
|
}
|
|
|
|
.data-font1{
|
|
font-size: 36rpx;
|
|
font-family: PingFang SC, PingFang SC-Heavy;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
color: #4c9fa6;
|
|
}
|
|
.data-font2{
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC-Bold;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
color: #333333;
|
|
}
|
|
.data-button{
|
|
width: 152rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
border: 2rpx solid #4c9fa6;
|
|
border-radius: 8rpx;
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC-Bold;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
color: #4c9fa6;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab{
|
|
width: calc(100vw - 72rpx);
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC-Regular;
|
|
font-weight: 400;
|
|
color: #4f4f4f;
|
|
text-align: center;
|
|
background: #fff;
|
|
margin: 30rpx auto 0;
|
|
padding: 0 36rpx;
|
|
}
|
|
.tab view {
|
|
width: calc((750rpx / 3) - 42rpx);
|
|
margin: 0 50rpx;
|
|
}
|
|
.tab-active{
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC-Bold;
|
|
font-weight: 700;
|
|
color: #60bda2;
|
|
|
|
border-bottom: 8rpx solid #60bda2;
|
|
}
|
|
|
|
|
|
|
|
.item-card{
|
|
width: calc(708rpx - 80rpx);
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
|
|
margin: 0 auto;
|
|
padding: 0 40rpx;
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC-Bold;
|
|
font-weight: 700;
|
|
text-align: left;
|
|
color: #333333;
|
|
}
|
|
.item-line{
|
|
line-height: 40rpx;
|
|
width: calc(100%);
|
|
height: 98rpx;
|
|
padding: 40rpx 0 0;
|
|
}
|
|
</style>
|