返修标记

懒羊羊

2024-01-23 f5e927bb15ed1d67891758d822f8a673b3fb0466

 jcdm-ui/src/views/dashboard/PanelGroup.vue

@@ -1,58 +1,93 @@
<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="top2">单日累计产量</span>
      </div>
      <el-row :gutter="40" class="panel-group">
    <el-col  :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            访客
            合箱上线
          </div>
          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
          <count-to :start-val="0" :end-val="10200" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
    <el-col  :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('messages')">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="message" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            消息
            合箱下线
          </div>
          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
    <el-col  :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('purchases')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="money" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            金额
            总装上线
          </div>
          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
    <el-col :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            订单
            总装下线
          </div>
          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
  </el-row>

    <el-col  :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            CVT上线
          </div>
          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col  :lg="4" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            CVT下线
          </div>
          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
      </el-row>
    </el-card>


</template>

<script>
@@ -71,9 +106,25 @@
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;
//.bottom-card{
//  padding: 15px 20px 20px 20px;
//  height: auto;
//  width: 1272px;
//  margin-left: 20px;
//  justify-content: center;
//  column-width: max-content;
//}

.top2{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0px;
}

.panel-group {

  width: 1272px;
  margin-left: 20px;
  .card-panel-col {
    margin-bottom: 32px;
  }
@@ -145,16 +196,17 @@
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;
      padding: 20px 20px;

      .card-panel-text {
        line-height: 18px;
        line-height: 14px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
        font-size: 12px;
        margin-bottom: 9px;
      }

      .card-panel-num {
        font-size: 20px;
        font-size: 18px;
      }
    }
  }