1.提交

loulijun2021

2023-02-12 adb74c51618faf025fe1d46bf6b22db895c2608f

 src/views/xtsy/index.vue

@@ -1,6 +1,6 @@
<template>
  <!--  <div>-->
  <div class="body" style="  padding: 30px 10px 0 20px;background-color: #eee;" :style="{height:mainHeight+'px'}">
  <div class="body" style="  padding: 30px 10px 0 20px;background-color: #eaecef;" :style="{height:mainHeight+'px'}">
    <div style="">
      <div class="title"><i class="el-icon-s-fold" style="margin-right: 5px" />实时数据</div>
      <div class="top">
@@ -11,12 +11,16 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日登录</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor01[0]})`}">1/409</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor01[0]})`}">1/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop01" class="barTop" style="width: 100%;" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日登录</div>
                <div class="content_end1">0/409</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop02" class="barTop" />
            </div>
@@ -29,12 +33,16 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日活跃</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor02[0]})`}">0/409</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor02[0]})`}">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop03" class="barTop" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">0/409</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop04" class="barTop" />
            </div>
@@ -47,12 +55,16 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日活跃</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor03[0]})`}">0/409</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor03[0]})`}">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop05" class="barTop" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">0/409</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop06" class="barTop" />
            </div>
@@ -65,12 +77,16 @@
            <div class="top_card_content_flex">
              <div class="content" style="width: 84%">
                <div class="content_title1">今日活跃</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor04[0]})`}">0/409</div>
                <div class="content_end1" :style="{color:`rgb(${barTopColor04[0]})`}">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop07" class="barTop" />
              <div class="content" style="width: 84%">
                <div class="content_title1">昨日活跃</div>
                <div class="content_end1">0/409</div>
                <div class="content_end1">0/
                  <countTo :start-val="0" :end-val="999" :duration="3000" />
                </div>
              </div>
              <div id="barTop08" class="barTop" />
            </div>
@@ -107,9 +123,11 @@

<script>
import { bar01, barTop, line01, loadEcharts } from '@/utils/myEcharts'
import countTo from 'vue-count-to'

export default {
  name: 'Index',
  components: { countTo },
  data() {
    return {
      isIpad: false,
@@ -259,6 +277,10 @@
      }
    }
  }

  .top_card:hover{
    transform: scale(1.02);
  }
}

.center {
@@ -281,6 +303,10 @@
        margin: 20px;
      }
    }

    .content:hover{
      transform: scale(1.01);
    }
  }
}