设备信息

liuqimichale
1 parent 0ac0991c
Showing 2 changed files with 33 additions and 20 deletions
src/components/VEquipment.vue
src/style/reset.css
 <template>
     <div class="theme-wrap">
         <card-title> <span>设备监控消息</span></card-title>
-        <!--<div>{{equipment.PDA}}/{{equipment.PDATotal}}</div>-->
+
         <ul class="theme-body" style="padding: 10px 20px 20px 0;">
             <li class="equipment-section">
                 <div class="normal-status front">
-                    <div class="text-blue">{{equipment.pdaper}}%</div>
+                    <p class="text-blue">{{equipment.pdaper}}%</p>
                     <p>PDA在线率</p>
                 </div>
                 <div class="rotate-status back">
-                    <div class="text-blue">{{equipment.PDA}}/{{equipment.PDATotal}}</div>
+                    <p class="text-blue">{{equipment.PDA}}/{{equipment.PDATotal}}</p>
                     <p>PDA/PDA在线</p>
                 </div>
             </li>
-            <li class="equipment-section">
+            <li class="equipment-section" >
                 <div class="normal-status front">
-                    <div class="text-blue">{{equipment.berthper}}%</div>
+                    <p class="text-blue">{{equipment.berthper}}%</p>
                     <p>地磁在线率</p>
                 </div>
                 <div class="rotate-status back">
@@ -23,19 +23,19 @@
                     <p>地磁/地磁</p>
                 </div>
             </li>
-            <li class="equipment-section">
+            <li class="equipment-section" >
                 <div class="normal-status front">
-                    <div class="text-orange">23.4%</div>
+                    <p class="text-orange">{{equipment.daozhaper}}%</p>
                     <p>道闸在线率</p>
                 </div>
                 <div class="rotate-status back">
-                    <div class="text-orange">{{equipment.daozha}}/{{equipment.daozhaTotal}}</div>
+                    <p class="text-orange">{{equipment.daozha}}/{{equipment.daozhaTotal}}</p>
                     <p>道闸/道闸在线</p>
                 </div>
             </li>
-            <li class="equipment-section">
+            <li class="equipment-section" >
                 <div class="normal-status front">
-                    <p class="text-orange">23.4%</p>
+                    <p class="text-orange">{{equipment.ydpper}}%</p>
                     <p>诱导屏在线率</p>
                 </div>
                 <div class="rotate-status back">
@@ -101,7 +101,7 @@ export default {
         transform-style:preserve-3d;
         /*transition:1s;*/
         animation:myfirst  6s  linear  infinite;
-        >div{
+        div{
             width: 95%;
             height: 95%;
             position: absolute;
@@ -110,21 +110,16 @@ export default {
             padding: 15px 0 10px 0;
             text-align: center;
-            p,div{
+            p{
                 height: 50%;
                 display: flex;
                 align-items: center;
                 justify-content: center;
             }
-            .text-blue{
-                @include fontStyle(24px);
-                background-image: $fontBlue;
-            }
-            .text-orange{
-                @include fontStyle(24px);
-                background-image: $fontOrange;
-            }
+
+
         }
+
         .normal-status{
         }
@@ -216,4 +216,22 @@ table {
     text-overflow: ellipsis;
 }
+.text-blue{
+/*//@include fontStyle(24px);*/
+/*//background-image: $fontBlue;*/
+    font-size: 24px;
+    font-weight:bold;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0,202,254, 1)), to(rgba(39,114,244, 1)));
+
+}
+.text-orange{
+    font-size: 24px;
+    font-weight:bold;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255,186,0, 1)), to(rgba(255,129,0, 1)));
+}
+