6 changed files with 503 additions and 302 deletions
@ -1,94 +1,214 @@ |
|||||
<template> |
<template> |
||||
<view class="main"> |
<view class="main"> |
||||
<!-- nav --> |
<!-- nav --> |
||||
<navigation>{{ i18n.MyTeam }}</navigation> |
<navigation>{{ i18n.MyTeam }}</navigation> |
||||
<view class="body"> |
<view class="body"> |
||||
<view class="userItem" v-for="(item, index) in 4" :key="index"> |
<view class="top flex"> |
||||
<u-icon class="icon" :name="'../../static/me/Ellipse 85.png'" size="92rpx" width="92rpx"></u-icon> |
<view class="item"> |
||||
<view> |
<view class="t1"> |
||||
<view class="email">krichjmadif0985@gmail.com</view> |
394 |
||||
<view class="date">2022/08/06</view> |
</view> |
||||
<u-button class="button" color="#F2FE8D" throttleTime="500">{{ i18n.Fresh }}</u-button> |
<view class="t2"> |
||||
</view> |
Number of clionts |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</view> |
<view class="item"> |
||||
|
<view class="t1"> |
||||
|
0 |
||||
|
</view> |
||||
|
<view class="t2"> |
||||
|
Earnlings yesterday |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<view class="t1"> |
||||
|
9343492 |
||||
|
</view> |
||||
|
<view class="t2"> |
||||
|
Total income |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<u-subsection :list="list" activeColor="#00E8A2" inactiveColor="#fff" :current="curNow" |
||||
|
@change="sectionChange" bgColor="#211F32"></u-subsection> |
||||
|
<view class="container"> |
||||
|
<table class="table"> |
||||
|
<thead class="thead"> |
||||
|
<tr> |
||||
|
<td>User</td> |
||||
|
<td>Financial funds</td> |
||||
|
<td>Time</td> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody class="tbody"> |
||||
|
<tr> |
||||
|
<td>98374354705</td> |
||||
|
<td>349849</td> |
||||
|
<td>2021.10.14</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>98374354705</td> |
||||
|
<td>349849</td> |
||||
|
<td>2021.10.14</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>98374354705</td> |
||||
|
<td>349849</td> |
||||
|
<td>2021.10.14</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
name: "myTeam", |
name: "myTeam", |
||||
data() { |
data() { |
||||
return { |
return { |
||||
}; |
list: ['My client', 'Income record'], |
||||
}, |
// 或者如下，也可以配置keyName参数修改对象键名 |
||||
computed: { |
// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}], |
||||
i18n() { |
curNow: 0, |
||||
return this.$t("me"); |
|
||||
}, |
}; |
||||
}, |
}, |
||||
onLoad() { |
computed: { |
||||
}, |
i18n() { |
||||
onShow() { }, |
return this.$t("me"); |
||||
methods: { |
}, |
||||
|
}, |
||||
}, |
onLoad() {}, |
||||
} |
onShow() {}, |
||||
|
methods: { |
||||
|
sectionChange(index) { |
||||
|
this.curNow = index; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.main { |
.table{ |
||||
|
width: 100%; |
||||
.body { |
text-align: center; |
||||
overflow: hidden; |
border-collapse: collapse; |
||||
margin-top: 200rpx; |
.thead{ |
||||
padding: 0 32rpx; |
height: 84rpx; |
||||
|
line-height: 84rpx; |
||||
.userItem { |
tr{ |
||||
position: relative; |
td{ |
||||
background: #211F32; |
color: #A1A0A8; |
||||
border-radius: 32rpx; |
font-size: 24rpx; |
||||
display: flex; |
} |
||||
flex-wrap: wrap; |
} |
||||
margin-top: 32rpx; |
} |
||||
|
.tbody{ |
||||
.icon { |
tr{ |
||||
height: 160rpx; |
height: 84rpx; |
||||
margin-left: 20rpx; |
line-height: 84rpx; |
||||
margin-right: 26rpx; |
border-top: 2rpx solid #323045 !important; |
||||
} |
td{ |
||||
|
color: #fff; |
||||
.email { |
font-size: 24rpx; |
||||
width: 520rpx; |
} |
||||
height: 52rpx; |
} |
||||
line-height: 52rpx; |
} |
||||
margin-top: 28rpx; |
} |
||||
font-size: 32rpx; |
.container { |
||||
} |
padding: 0 32rpx; |
||||
|
} |
||||
.date { |
|
||||
width: 180rpx; |
/deep/ .u-subsection--button { |
||||
height: 52rpx; |
height: 80rpx; |
||||
line-height: 52rpx; |
} |
||||
font-size: 28rpx; |
|
||||
} |
/deep/ .u-subsection--button__bar { |
||||
|
background: #323045; |
||||
.button { |
height: 80rpx; |
||||
position: absolute; |
} |
||||
top: 72rpx; |
|
||||
right: 32rpx; |
.flex { |
||||
width: 120rpx; |
display: flex; |
||||
height: 48rpx; |
align-items: center; |
||||
line-height: 48rpx; |
justify-content: space-between; |
||||
font-size: 28rpx; |
} |
||||
color: #15141F !important; |
|
||||
margin-left: 200rpx; |
.top { |
||||
margin-top: 20rpx; |
padding: 68rpx 32rpx; |
||||
border-radius: 16rpx; |
background: url('@/static/me/myTeambg.png') no-repeat; |
||||
} |
background-size: cover; |
||||
} |
|
||||
|
.item { |
||||
} |
text-align: center; |
||||
|
line-height: 60rpx; |
||||
} |
} |
||||
|
|
||||
|
.t2 { |
||||
|
font-size: 24rpx; |
||||
|
color: #A1A0A8; |
||||
|
} |
||||
|
|
||||
|
.t1 { |
||||
|
color: #00E8A2; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bolder; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.main { |
||||
|
|
||||
|
.body { |
||||
|
overflow: hidden; |
||||
|
margin-top: 200rpx; |
||||
|
|
||||
|
.userItem { |
||||
|
position: relative; |
||||
|
background: #211F32; |
||||
|
border-radius: 32rpx; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
margin-top: 32rpx; |
||||
|
|
||||
|
.icon { |
||||
|
height: 160rpx; |
||||
|
margin-left: 20rpx; |
||||
|
margin-right: 26rpx; |
||||
|
} |
||||
|
|
||||
|
.email { |
||||
|
width: 520rpx; |
||||
|
height: 52rpx; |
||||
|
line-height: 52rpx; |
||||
|
margin-top: 28rpx; |
||||
|
font-size: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.date { |
||||
|
width: 180rpx; |
||||
|
height: 52rpx; |
||||
|
line-height: 52rpx; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.button { |
||||
|
position: absolute; |
||||
|
top: 72rpx; |
||||
|
right: 32rpx; |
||||
|
width: 120rpx; |
||||
|
height: 48rpx; |
||||
|
line-height: 48rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #15141F !important; |
||||
|
margin-left: 200rpx; |
||||
|
margin-top: 20rpx; |
||||
|
border-radius: 16rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
|
After Width: | Height: | Size: 1.3 MiB |
Loading…
Reference in new issue