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.
 
 
 
 
 

201 lines
4.5 KiB

<template>
<view class="distribution">
<mNavbar title="分销代理" :leftClick="leftClick" />
<view class="box">
<view class="box1" />
<view class="content">
<view class="content-box">
<view class="content-box1">
<view>可用余额</view>
<view>累计提现</view>
<view>累积收益</view>
</view>
<view class="content-box2">
<view>1200.00</view>
<view>1200.00</view>
<view>1200.00</view>
</view>
<view class="content-box3">
<view @click="toNodes">
<text>粉丝</text>
</view>
<view @click="toWallet">
<text>提现</text>
</view>
<view>
<text>二维码</text>
</view>
</view>
</view>
</view>
</view>
<van-tabs>
<van-tab title="费用明细">
<view class="tab-box">
<view class="tab-box1">
<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
<van-cell center border title="头部按摩放松" value="-199.00" label="2024-01-23 11:30:22" />
</view>
</view>
</van-tab>
<van-tab title="提现记录"></van-tab>
<van-tab title="收益记录"></van-tab>
</van-tabs>
</view>
</template>
<script>
import mNavbar from '@/components/base/m-navbar.vue'
export default {
components: {
mNavbar,
},
data() {
return {
}
},
methods: {
leftClick() { //返回个人中心
uni.switchTab({
url: '/pages/index/center'
})
},
toNodes() {
uni.navigateTo({
url: '/pages/mine/nodes'
})
},
toWallet(){
uni.navigateTo({
url: '/pages/mine/wallet'
})
}
}
}
</script>
<style scoped lang="scss">
.distribution {
background-color: #f3f3f3;
min-height: 100vh;
.box {
position: relative;
width: 100%;
height: 175px;
background-color: #fff;
.box1 {
height: 100px;
background: linear-gradient(to right, #4899a6, #6fc6ad);
}
.content {
position: absolute;
display: flex;
justify-content: space-around;
width: 94%;
height: 140px;
background-color: #F5FDFB;
top: 20px;
left: 3%;
z-index: 9;
border-radius: 10px;
box-shadow: 0px 1px 7px 1px #4899a6;
.content-box {
display: flex;
width: 94%;
height: 94%;
flex-direction: column;
align-items: self-end;
.content-box1 {
display: flex;
width: 100%;
height: 60px;
justify-content: center;
align-items: center;
font-size: 13px;
view {
width: 200rpx;
display: flex;
justify-content: space-around;
}
}
.content-box2 {
display: flex;
width: 100%;
height: 60px;
justify-content: center;
align-items: center;
view {
width: 200rpx;
display: flex;
justify-content: space-around;
color: #4C9FA6;
font-size: 18px;
}
}
.content-box3 {
display: flex;
width: 100%;
height: 60px;
justify-content: center;
align-items: center;
view {
width: 200rpx;
display: flex;
justify-content: space-around;
align-items: center;
}
text {
display: inline-block;
padding: 5px 20px;
text-align: center;
border: 1px solid #96C8CB;
color: #76B7BA;
border-radius: 5px;
}
}
}
}
}
.tab-box {
width: 96%;
margin-top: 10px;
margin-left: 2%;
background-color: #fff;
border-radius: 10px;
overflow: hidden;
.tab-box1 {
margin-top: 10px;
}
}
}
</style>