src/css/common.scss

@@ -5,7 +5,7 @@ body,
     padding: 0;
     width: 100%;
     height: 100%;
-    font-size: 16px;
+    font-size: 14px;
     overflow: hidden !important;
     font-family: Microsoft YaHei, Hiragino Sans GB;
 }

src/views/screen/RealTimeUsed.vue

@@ -20,7 +20,7 @@ export default {
     this.getRealTimeUesdView()
     this.timer = setInterval(() => {
       this.getRealTimeData()
-    }, 10000)
+    }, 1000)
   },
   unmounted() {
     clearInterval(this.timer)

src/views/screen/components/FullScreenContainer.vue

@@ -31,13 +31,10 @@ export default {
       scale: null
     })
     const style = computed(() => {
-      // 标品: 始终保持1920*1080的宽高比
-      // 改动后: 始终保持占满屏幕, 最宽1920
-      const innerWidth = window.innerWidth > 1920 ? 1920 : window.innerWidth
       return {
         width: `${props.width}px`,
         height: `${props.height}px`,
-        transform: `scale(${innerWidth / 1920},${state.scale})`
+        transform: `scale(${state.scale})`
       }
     })
     function getScale() {

src/views/screen/components/ScrollTable/index.vue

@@ -48,11 +48,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .scroll-table {
-  height: calc(100% - 20px);
+  height: 100%;
   color: #fff;
   font-size: 14px;
   padding: 0 10px;
-  margin: 10px 0 10 0;
   padding-left: 0px;
   text-align: center;
   list-style: none;

src/views/screen/index.vue

@@ -53,16 +53,17 @@
                   中科院高性能数值模拟实验平台是低碳智能燃煤发电与超净排放全国重点实验室的核心实验平台之-，以设计标准化、部署模块化，管理可视化，运维智能化为依托，打造满足中国机房设计标准、美国机房设计标准和Uptime
                   Institue的创新性平台，致力于拓展科研手段、深化生产服务，为火力发电、新能源等领域的关键技术、核心装备、系统集成等相关科技研发提供有力支撑。
                 </div>
+                <br />
                 <div>平台建筑面积200余平方米，硬件设施智能完善、软件系统高效便捷，主要开展火力发电固体燃料热解与燃烧、气体燃料燃烧、污染物生成与脱除、物质流能量流、全过程控制优化的数值模拟，以及综合能源系统仿真研究等八大研究方向。</div>
               </div>
-              <el-row>
+              <el-row :gutter="32">
                 <el-col :span="6" v-for="(item, index) in introItems" :key="index">
-                  <div class="intro-item m-r" :style="{ 'background-image': `url(${item.img})` }">
-                    <div class="p-l-lg">
+                  <div class="intro-item text-right m-r" :style="{ 'background-image': `url(${item.img})` }">
+                    <div>
                       <span class="intro-item-value" :style="{ color: introColorMap[index] }">{{ item.value }}</span>
                       <span>{{ item.unit }}</span>
                     </div>
-                    <div class="p-l-lg">{{ item.text }}</div>
+                    <div>{{ item.text }}</div>
                   </div>
                 </el-col>
               </el-row>
@@ -146,7 +147,7 @@ export default {
   setup() {
     const state = reactive({
       colorMap: ['red', '#ffc107', 'rgb(6,141,255)'],
-      introColorMap: ['rgb(23,230,255)', '#489ef1', '#6ce2bb', '#d09154'],
+      introColorMap: ['#6be6f5', '#489ef1', '#6ce2bb', '#d09154'],
       loading: false,
       departTrend: [],
       appTrend: [],
@@ -215,7 +216,7 @@ export default {
     const getPlateformSumList = async () => {
       const res = await getPlateformSum()
 
-      res.data.map(item => {
+      res.data.map((item) => {
         if (item.keyName === 'userNum') {
           state.introItems[0].value = item.numValue
         }
@@ -253,7 +254,7 @@ export default {
   width: 100%;
   height: 100%;
   background: url('./images/bg.png') no-repeat;
-  padding: 73px 20px 0 20px;
+  padding: 90px 20px 20px 20px;
   box-sizing: border-box;
   color: #fff;
 }
@@ -270,37 +271,37 @@ export default {
   height: 100%;
 }
 .mini-card {
-  height: 285px !important;
+  height: 280px !important;
 }
 .card-border1 {
   background: url('./images/item-border1.png');
   background-size: 100% 85%;
   background-repeat: no-repeat;
-  background-position-y: 40px;
+  background-position-y: 43px;
 }
 .card-border2 {
   background: url('./images/item-border2.png');
-  background-size: 100% 89%;
+  background-size: 100% 85%;
   background-repeat: no-repeat;
-  background-position-y: 40px;
+  background-position-y: 43px;
 }
 .card-border3 {
   background: url('./images/item-border3.png');
   background-size: 100% 85%;
   background-repeat: no-repeat;
-  background-position-y: 40px;
+  background-position-y: 43px;
 }
 .card-border4 {
   background: url('./images/item-border4.png');
-  background-size: 100% 94%;
+  background-size: 100% 92%;
   background-repeat: no-repeat;
-  background-position-y: 40px;
+  background-position-y: 43px;
 }
 .card-border5 {
   background: url('./images/item-border5.png');
-  background-size: 100% 86%;
+  background-size: 100% 85%;
   background-repeat: no-repeat;
-  background-position-y: 40px;
+  background-position-y: 43px;
 }
 .card-title-border1 {
   background: url('./images/item-header1.png');
@@ -309,18 +310,14 @@ export default {
   background: url('./images/item-header1.png');
   background-position-x: -33px !important;
 }
-.p-l-lg {
-  padding-left: 55px;
-}
 .card {
-  height: 385px;
+  height: 350px;
   padding: 15px;
   padding-top: 0;
-  padding-bottom: 0;
   box-sizing: border-box;
 
   &:not(:last-child) {
-    margin-bottom: 13px;
+    margin-bottom: 20px;
   }
   .card-title {
     font-size: 18px;
@@ -337,9 +334,8 @@ export default {
   }
 }
 .intro-card {
-  height: 680px;
+  height: 650px;
   .intro-img {
-    display: block;
     width: 100%;
     height: 280px;
     border-radius: 10px;
@@ -354,19 +350,18 @@ export default {
     width: 100%;
     height: 120px;
     background-position: center;
-    background-position-x: -10px;
     background-repeat: no-repeat;
     background-size: contain;
     padding-top: 15px;
+    & > div {
+      padding-right: 20%;
+    }
     .intro-item-value {
-      margin-right: 5px;
-      font-size: 36px;
-      font-weight: bold;
-      text-shadow: 0px 0px 1px #fff;
-      text-stroke: 1px #ffffff;
-      line-height: 38px;
-      text-transform: none;
+      margin-right: 10px;
+      font-size: 32px;
       -webkit-text-stroke: 1px #fff;
+      text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
+      font-weight: bold;
     }
   }
 }