#

whycq

2023-10-10 b1d3dd8f30ae073974fc4574cc533f69db492962

#

 pages/index/index.vue

@@ -1,8 +1,29 @@
<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
    <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>
@@ -11,42 +32,140 @@
    export default {
        data() {
            return {
                title: 'Hello'
                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>
<style scoped>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    .box {
        margin: 8px;
        border-radius: 10rpx;
    }

    .text-area {
    .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;
        justify-content: center;
        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+ */

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
    .single-line {
        display: flex;
        /* text-align: center; */
        align-items: center;
        padding: 10px;
        font-size: 30rpx;
    }
    .top-border {
        background-color: #29EAC4;
        padding: 2px 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>