169 lines
3.8 KiB
Vue
169 lines
3.8 KiB
Vue
<template>
|
|
<view class="capacity">
|
|
<view class="capacity-title">共力分总产率/小时<text>0.04GLF/h</text></view>
|
|
<view class="capacity-sbutitle">总产率=角色产率+团队产率+共建产率+共力值产率</view>
|
|
<view class="capacity-block">
|
|
<view class="capacity-block-title">我的角色</view>
|
|
<view class="capacity-block-glf">普通用户:0.04GLF/h</view>
|
|
</view>
|
|
<view class="capacity-block">
|
|
<view class="capacity-block-title">
|
|
<view class="title">成员产率<text>0GLF/h</text></view>
|
|
<view class="more" @click="onInvitation">邀请更多好友</view>
|
|
</view>
|
|
<view class="capacity-block-table">
|
|
<view class="header">
|
|
<view class="flex-item">家族成员产率</view>
|
|
</view>
|
|
<view class="flex">
|
|
<view class="flex-item">0人在线(会员)</view>
|
|
<view class="flex-item">-</view>
|
|
</view>
|
|
<view class="flex">
|
|
<view class="flex-item">0人在线(会员)</view>
|
|
<view class="flex-item">-</view>
|
|
</view>
|
|
</view>
|
|
<view class="capacity-block-table">
|
|
<view class="header">
|
|
<view class="flex-item">伙伴成员</view>
|
|
</view>
|
|
<view class="flex">
|
|
<view class="flex-item">0人在线(会员)</view>
|
|
<view class="flex-item">-</view>
|
|
</view>
|
|
<view class="flex">
|
|
<view class="flex-item">0人在线(会员)</view>
|
|
<view class="flex-item">-</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="capacity-block">
|
|
<view class="capacity-block-title">
|
|
<view class="title">共建产率<text>0GLF/h</text></view>
|
|
<view class="subtitle">0/1200</view>
|
|
</view>
|
|
<view class="capacity-block-text">产品当日设置的</view>
|
|
</view>
|
|
<view class="capacity-block">
|
|
<view class="capacity-block-title">
|
|
<view class="title">共力值产率<text>0GLF/h</text></view>
|
|
<view class="subtitle">0/1200</view>
|
|
</view>
|
|
<view class="capacity-block-text">产品当日设置的</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
methods: {
|
|
onInvitation(){
|
|
this.$Router.push({name: 'Invitation'})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.capacity{
|
|
background: $window-color;
|
|
min-height: 100vh;
|
|
padding: $padding;
|
|
box-sizing: border-box;
|
|
&-title{
|
|
font-size: 38rpx;
|
|
font-weight: bold;
|
|
line-height: 60rpx;
|
|
text{
|
|
margin-left: 10rpx;
|
|
color: $main-color;
|
|
}
|
|
}
|
|
&-sbutitle{
|
|
font-size: 26rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
&-block{
|
|
background: white;
|
|
margin-top: $margin;
|
|
border-radius: $radius;
|
|
padding: $padding;
|
|
&-glf{
|
|
color: $main-color;
|
|
font-size: 30rpx;
|
|
}
|
|
&-title{
|
|
font-weight: bold;
|
|
font-size: 34rpx;
|
|
padding-bottom: 30rpx;
|
|
line-height: 60rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.title{
|
|
text{
|
|
color: $main-color;
|
|
font-weight: normal;
|
|
padding-left: 10rpx;
|
|
}
|
|
}
|
|
.more{
|
|
background: $main-color;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
border-radius: 25rpx;
|
|
line-height: 60rpx;
|
|
width: 230rpx;
|
|
text-align: center;
|
|
}
|
|
.subtitle{
|
|
font-weight: normal;
|
|
font-size: 24rpx;
|
|
color: $main-color;
|
|
}
|
|
}
|
|
&-text{
|
|
font-size: 28rpx;
|
|
color: gray;
|
|
line-height: 40rpx;
|
|
}
|
|
&-table{
|
|
border:solid 1px $border-color;
|
|
margin-bottom: 20rpx;
|
|
&:last-child{
|
|
margin-top: 0;
|
|
}
|
|
.header{
|
|
background: $border-color;
|
|
line-height: 50rpx;
|
|
padding: 0 15rpx;
|
|
font-size: 26rpx;
|
|
color: gray;
|
|
}
|
|
.flex{
|
|
display: flex;
|
|
border-top: solid 1rpx $border-color;
|
|
color: gray;
|
|
.flex-item{
|
|
width: 50%;
|
|
box-sizing: border-box;
|
|
line-height: 50rpx;
|
|
padding: 0 15rpx;
|
|
font-size: 24rpx;
|
|
&:first-child{
|
|
border-right: solid 1rpx $border-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|