<template>
|
<view>
|
|
<!-- <view class="box" :class="it.bg" v-for="it in mainItem">
|
<view class="box-title">{{it.title}}</view>
|
<view class="box-item">
|
<view class="item-title">{{it.subTitle}}</view>
|
<view class="item-content">
|
<view style="width: 50%;" v-for="item in it.items">
|
<view style="font-size: 32rpx;">{{item.name}}</view>
|
<view class="content-data">
|
<text class="c-data">{{item.content}}</text>
|
<text class="c-val">{{item.unit}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="top-box">
|
<view class="box-title">销售业绩排行榜</view>
|
<view class="box-item">
|
<view class="single-line" v-for="(item,i) in topList" :key="i">
|
<view style="flex: 1;"><text class="top-border">{{i+1}}</text></view>
|
<view style="flex: 3;"><text>{{item.name}}</text></view>
|
<view style="flex: 3;text-align: end;"><text>{{item.performance}}</text></view>
|
</view>
|
</view>
|
</view> -->
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
title: 'Hello',
|
mainItem: [
|
{
|
title: '团队活动实时交易情况',
|
subTitle: '团队数据',
|
items: [
|
{name: '年度销售目标',content: 60000,unit: '万元'},
|
{name: '已完成销售任务',content: 1112,unit: '万元'},
|
{name: '未完成销售任务',content: 58888,unit: '万元'},
|
{name: '完成率',content: 1.85,unit: '%'}
|
]
|
},
|
{
|
title: '实时销售情况',
|
subTitle: '个人数据',
|
items: [
|
{name: '年度销售目标',content: 0,unit: '万元'},
|
{name: '已完成销售任务',content: 0,unit: '万元'},
|
{name: '未完成销售任务',content: 0,unit: '万元'},
|
{name: '完成率',content: '0.00',unit: '%'},
|
{name: '跟踪项目数量',content: 0,unit: '万元'},
|
{name: '跟踪项目金额',content: 0,unit: '万元'},
|
{name: '成交项目数量',content: 0,unit: '万元'},
|
{name: '成交项目金额',content: '0.00',unit: '%'}
|
]
|
}
|
],
|
topList: [
|
{name: '张双龙',performance:'800万元'},
|
{name: '李世豪3级',performance:'200万元'},
|
{name: '李世豪1级',performance:'112万元'}
|
],
|
bgs: ['bg-blue','bg-red']
|
|
}
|
},
|
onLoad() {
|
this.backGroundRepeat()
|
},
|
methods: {
|
backGroundRepeat() {
|
let len = this.bgs.length
|
let i = 0
|
for (let k in this.mainItem) {
|
if (i == len) {
|
i = 0
|
}
|
this.mainItem[k]['bg'] = this.bgs[i]
|
i++
|
}
|
console.log(this.mainItem);
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
.box {
|
margin: 8px;
|
border-radius: 10rpx;
|
}
|
.box-title {
|
margin: 8px;
|
height: 60rpx;
|
line-height: 80rpx;
|
font-size: 28rpx;
|
font-weight: 700;
|
}
|
.box-item {
|
margin: 8px;
|
font-size: 26rpx;
|
font-weight: 700;
|
min-height: 240rpx;
|
background-color: rgba(255,255,255,.3);
|
border-radius: 10rpx;
|
}
|
.item-title {
|
height: 50rpx;
|
line-height: 50rpx;
|
}
|
.item-content {
|
display: flex;
|
flex-wrap: wrap;
|
text-align: center;
|
margin-top: 10rpx;
|
}
|
.c-data {
|
font-size: 48rpx;
|
}
|
.c-val {
|
font-size: 24rpx;
|
font-weight: normal;
|
vertical-align: text-bottom;
|
}
|
.top-box {
|
margin: 8px;
|
border-radius: 10rpx;
|
/* height: 100rpx; */
|
color: #FFF;
|
background: #D38312; /* fallback for old browsers */
|
background: -webkit-linear-gradient(to right, #A83279, #D38312); /* Chrome 10-25, Safari 5.1-6 */
|
background: linear-gradient(to right, #A83279, #D38312); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
}
|
.single-line {
|
display: flex;
|
/* text-align: center; */
|
align-items: center;
|
padding: 10px;
|
font-size: 30rpx;
|
}
|
.top-border {
|
background-color: #3f624d;
|
font-weight: 900;
|
padding: 0 5px;
|
border-radius: 2px;
|
}
|
|
.bg-red {
|
background: #7b4397;
|
background: -webkit-linear-gradient(to left, #dc2430, #7b4397);
|
background: linear-gradient(to left, #dc2430, #7b4397);
|
color: #FFF;
|
}
|
.bg-blue {
|
color: #FFF;
|
background: #4284DB;
|
background: -webkit-linear-gradient(to left, #29EAC4, #4284DB);
|
background: linear-gradient(to left, #29EAC4, #4284DB);
|
}
|
|
</style>
|
