#

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>