feat(数据大屏): 改名字

src/views/datav/index.vue

@@ -1,11 +1,18 @@
 <template>
   <div class="app-container-datav">
-    <div ref="datavFullscreen" class="office-efficiency-index" @dblclick="screen">
+    <div
+      ref="datavFullscreen"
+      class="office-efficiency-index"
+      @dblclick="screen"
+    >
       <div v-if="!mobile" class="office-header">
         <div class="title-info">数据大屏</div>
         <div class="analysis-info">实时数据预览</div>
       </div>
-      <el-row v-if="buttonPermissions.includes('datav:query')" class="office-content">
+      <el-row
+        v-if="buttonPermissions.includes('datav:query')"
+        class="office-content"
+      >
         <el-col :xs="24" :sm="6">
           <el-row>
             <el-col>
@@ -27,18 +34,21 @@
         </el-col>
         <el-col :xs="24" :sm="18">
           <el-row>
-            <el-col v-if="buttonPermissions.includes('datav:paid:preview')" :span="24">
+            <el-col
+              v-if="buttonPermissions.includes('datav:paid:preview')"
+              :span="24"
+            >
               <div id="online-info" class="col-info">
                 <div class="title">今日付费预览</div>
                 <div class="content">
-                  <purchase-count />  
+                  <purchase-count />
                 </div>
               </div>
             </el-col>
 
-            <el-col  :span="24">
+            <el-col :span="24">
               <div id="online-info-tim-chat" class="col-info">
-                <div class="title">LotFun在线</div>
+                <div class="title">Likei在线</div>
                 <div class="content">
                   <online-user-count-origin origin="LOTFUN" />
                 </div>
@@ -52,9 +62,7 @@
                 </div>
               </div>
             </el-col> -->
-
           </el-row>
-
         </el-col>
       </el-row>
     </div>
@@ -63,60 +71,59 @@
 
 <script>
 // import OnlineUserMap from './online-user-map'
-import LatestPurchase from './latest-purchase'
+import LatestPurchase from "./latest-purchase";
 // import LatestPurchaseTimChat from './latest-purchase-timchat'
-import OnlineUserCountOrigin from './online-user-count-origin'
+import OnlineUserCountOrigin from "./online-user-count-origin";
-import PurchaseCount from './purchase-count'
+import PurchaseCount from "./purchase-count";
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
-import { mobile } from '@/utils/device'
+import { mobile } from "@/utils/device";
 export default {
-  name: 'DatavContent',
+  name: "DatavContent",
   components: { LatestPurchase, OnlineUserCountOrigin, PurchaseCount },
   data() {
     return {
       mobile: mobile()
-    }
+    };
   },
   computed: {
-    ...mapGetters(['permissionsSysOriginPlatforms', 'buttonPermissions']),
+    ...mapGetters(["permissionsSysOriginPlatforms", "buttonPermissions"]),
     permissionsSysOriginCode() {
       if (!this.permissionsSysOriginPlatforms) {
-        return []
+        return [];
       }
-      return this.permissionsSysOriginPlatforms.map(item => item.value)
+      return this.permissionsSysOriginPlatforms.map(item => item.value);
     }
   },
-  mounted() {
+  mounted() {},
-  },
   methods: {
     screen() {
-      const element = this.$refs.datavFullscreen
+      const element = this.$refs.datavFullscreen;
       if (this.fullscreen) {
         if (document.exitFullscreen) {
-          document.exitFullscreen()
+          document.exitFullscreen();
         } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen()
+          document.webkitCancelFullScreen();
         } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen()
+          document.mozCancelFullScreen();
         } else if (document.msExitFullscreen) {
-          document.msExitFullscreen()
+          document.msExitFullscreen();
         }
       } else {
         if (element.requestFullscreen) {
-          element.requestFullscreen()
+          element.requestFullscreen();
         } else if (element.webkitRequestFullScreen) {
-          element.webkitRequestFullScreen()
+          element.webkitRequestFullScreen();
         } else if (element.mozRequestFullScreen) {
-          element.mozRequestFullScreen()
+          element.mozRequestFullScreen();
         } else if (element.msRequestFullscreen) {
           // IE11
-          element.msRequestFullscreen()
+          element.msRequestFullscreen();
         }
       }
-      this.fullscreen = !this.fullscreen
+      this.fullscreen = !this.fullscreen;
     }
   }
-}
+};
 </script>
 <style scoped lang="scss">
 .app-container-datav {
@@ -124,45 +131,72 @@ export default {
   min-height: calc(100vh - 50px);
   background-color: #22284a;
   .office-efficiency-index {
-      font-family:PingFangSC-Semibold,PingFang SC;background-color:#22284A;background-size:cover;
+    font-family: PingFangSC-Semibold, PingFang SC;
-      /*头部样式*/
+    background-color: #22284a;
-      .office-header{
+    background-size: cover;
-          background: url("./../../assets/datav/office_efficiency_header_bg.png")no-repeat center center;background-size: 100% 100%;
+    /*头部样式*/
-          .title-info{color:#03C2EC;text-align: center;font-size: 0.26rem;font-family:'cuhei';font-weight: 600;line-height: 0.6rem;vertical-align: middle;}
+    .office-header {
+      background: url("./../../assets/datav/office_efficiency_header_bg.png")
+        no-repeat center center;
+      background-size: 100% 100%;
+      .title-info {
+        color: #03c2ec;
+        text-align: center;
+        font-size: 0.26rem;
+        font-family: "cuhei";
+        font-weight: 600;
+        line-height: 0.6rem;
+        vertical-align: middle;
       }
-      .analysis-info{line-height:0.6rem;vertical-align:middle;padding: 0px 0.2rem; font-size: 0.24rem;font-weight: 600;background-image: linear-gradient(#D8AE22, #DC9546);-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: hue 60s infinite linear;}
+    }
-      /*数据模块样式*/
+    .analysis-info {
-      .office-content {
+      line-height: 0.6rem;
-          margin-top: 20px;
+      vertical-align: middle;
-          .col-info{
+      padding: 0px 0.2rem;
-              margin:0px 10px 20px 10px;
+      font-size: 0.24rem;
-              border-radius:.1rem;
+      font-weight: 600;
-              background-color:#181C41;
+      background-image: linear-gradient(#d8ae22, #dc9546);
-              .title{
+      -webkit-background-clip: text;
-                line-height:0.5rem;
+      -webkit-text-fill-color: transparent;
-                vertical-align:middle;
+      -webkit-animation: hue 60s infinite linear;
-                padding: .2rem .3rem;
+    }
-                font-size: 0.4rem;
+    /*数据模块样式*/
-                font-weight: 600;
+    .office-content {
-                color:#03C2EC;
+      margin-top: 20px;
-                text-align: left;
+      .col-info {
-              }
+        margin: 0px 10px 20px 10px;
-              .content{vertical-align:middle;padding:0px 10px;font-size:0.14rem;color:#fff;}
+        border-radius: 0.1rem;
-          }
+        background-color: #181c41;
-          #today-pay {
+        .title {
-              height: 100%;
+          line-height: 0.5rem;
-              overflow: hidden;
+          vertical-align: middle;
-          }
+          padding: 0.2rem 0.3rem;
-          #real-time-charts {
+          font-size: 0.4rem;
-              height: 5.6rem;
+          font-weight: 600;
-          }
+          color: #03c2ec;
-          #online-map {
+          text-align: left;
-              height: 7.3rem;
+        }
-              .content {
+        .content {
-                  padding-top: 0.6rem;
+          vertical-align: middle;
-              }
+          padding: 0px 10px;
-          }
+          font-size: 0.14rem;
+          color: #fff;
+        }
       }
+      #today-pay {
+        height: 100%;
+        overflow: hidden;
+      }
+      #real-time-charts {
+        height: 5.6rem;
+      }
+      #online-map {
+        height: 7.3rem;
+        .content {
+          padding-top: 0.6rem;
+        }
+      }
+    }
   }
 }
 </style>