6 changed files with 503 additions and 302 deletions
@ -1,94 +1,214 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ i18n.MyTeam }}</navigation> |
|||
<view class="body"> |
|||
<view class="userItem" v-for="(item, index) in 4" :key="index"> |
|||
<u-icon class="icon" :name="'../../static/me/Ellipse 85.png'" size="92rpx" width="92rpx"></u-icon> |
|||
<view> |
|||
<view class="email">krichjmadif0985@gmail.com</view> |
|||
<view class="date">2022/08/06</view> |
|||
<u-button class="button" color="#F2FE8D" throttleTime="500">{{ i18n.Fresh }}</u-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="main"> |
|||
<!-- nav --> |
|||
<navigation>{{ i18n.MyTeam }}</navigation> |
|||
<view class="body"> |
|||
<view class="top flex"> |
|||
<view class="item"> |
|||
<view class="t1"> |
|||
394 |
|||
</view> |
|||
<view class="t2"> |
|||
Number of clionts |
|||
</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> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "myTeam", |
|||
data() { |
|||
return { |
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("me"); |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
}, |
|||
onShow() { }, |
|||
methods: { |
|||
|
|||
}, |
|||
} |
|||
export default { |
|||
name: "myTeam", |
|||
data() { |
|||
return { |
|||
list: ['My client', 'Income record'], |
|||
// 或者如下，也可以配置keyName参数修改对象键名 |
|||
// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}], |
|||
curNow: 0, |
|||
|
|||
}; |
|||
}, |
|||
computed: { |
|||
i18n() { |
|||
return this.$t("me"); |
|||
}, |
|||
}, |
|||
onLoad() {}, |
|||
onShow() {}, |
|||
methods: { |
|||
sectionChange(index) { |
|||
this.curNow = index; |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.main { |
|||
|
|||
.body { |
|||
overflow: hidden; |
|||
margin-top: 200rpx; |
|||
padding: 0 32rpx; |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
.table{ |
|||
width: 100%; |
|||
text-align: center; |
|||
border-collapse: collapse; |
|||
.thead{ |
|||
height: 84rpx; |
|||
line-height: 84rpx; |
|||
tr{ |
|||
td{ |
|||
color: #A1A0A8; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
.tbody{ |
|||
tr{ |
|||
height: 84rpx; |
|||
line-height: 84rpx; |
|||
border-top: 2rpx solid #323045 !important; |
|||
td{ |
|||
color: #fff; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.container { |
|||
padding: 0 32rpx; |
|||
} |
|||
|
|||
/deep/ .u-subsection--button { |
|||
height: 80rpx; |
|||
} |
|||
|
|||
/deep/ .u-subsection--button__bar { |
|||
background: #323045; |
|||
height: 80rpx; |
|||
} |
|||
|
|||
.flex { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.top { |
|||
padding: 68rpx 32rpx; |
|||
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> |
|||
|
|||
|
After Width: | Height: | Size: 1.3 MiB |
Loading…
Reference in new issue