细节调整

front/src/views/capabilityCloud/components/ApplicationResources.vue

@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-19 10:16:10
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-19 17:02:39
+ * @LastEditTime: 2022-06-19 17:25:32
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -280,6 +280,7 @@
     .top {
       font-size: 24px;
       background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
+      background-size: 100% 100%;
       text-align: center;
     }
     .bottom {

front/src/views/capabilityCloud/components/PlatformOverview.vue

@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-19 10:15:33
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-19 16:50:27
+ * @LastEditTime: 2022-06-19 17:25:14
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -10,13 +10,17 @@
     <div class="top"><span class="title">平台概览</span></div>
     <div class="bottom">
       <div class="left">
-        <div class="item">
+        <div class="box">
-          <div class="name">平台访问量</div>
+          <div class="item">
-          <div claSS="num">{{ num1 }}</div>
+            <div class="name">平台访问量</div>
+            <div claSS="num">{{ num1 }}</div>
+          </div>
         </div>
-        <div class="item">
+        <div class="box">
-          <div class="name">用户量</div>
+          <div class="item">
-          <div claSS="num">{{ num2 }}</div>
+            <div class="name">用户量</div>
+            <div claSS="num">{{ num2 }}</div>
+          </div>
         </div>
       </div>
       <div class="right" :key="showKey">
@@ -108,7 +112,17 @@
   }
   var option = {
     tooltip: {
+      backgroundColor: 'rgba(17,61,116,0.8)',
+      borderWidth: 0,
       trigger: 'axis',
+      formatter: function (val) {
+        console.log(val)
+        let res = `<div style="background:rgba(17,61,116,0.8);border:1px soild rgba(28,119,205,0.8);color:#fff;padding:0">
+                      <span>日期 : ${val[0].name}</span>
+                      <div style="margin-left: 18px">浏览次数 : ${val[0].value}</div>
+                  </div>`
+        return res
+      },
     },
     legend: {
       data: charts.names,
@@ -186,6 +200,7 @@
     .top {
       font-size: 24px;
       background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
+      background-size: 100% 100%;
       text-align: center;
     }
     .bottom {
@@ -197,22 +212,28 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        .item {
+        .box {
           width: 1.94rem;
           height: 1.94rem;
           background: url('~@/assets/capabilityCloud/pt_bg.png') no-repeat;
           background-size: 100% 100%;
-          display: flex;
+          animation: turn 10s linear infinite;
-          flex-direction: column;
+          .item {
-          justify-content: center;
+            width: 1.94rem;
-          align-items: center;
+            height: 1.94rem;
-          .name {
+            display: flex;
-            font-size: 16px;
+            flex-direction: column;
-            color: #fff;
+            justify-content: center;
-          }
+            align-items: center;
-          .num {
+            animation: turn2 10s linear infinite;
-            font-size: 32px;
+            .name {
-            color: #fdc623;
+              font-size: 16px;
+              color: #fff;
+            }
+            .num {
+              font-size: 32px;
+              color: #fdc623;
+            }
           }
         }
       }
@@ -233,4 +254,39 @@
       }
     }
   }
+
+  @keyframes turn {
+    0% {
+      -webkit-transform: rotate(0deg);
+    }
+    25% {
+      -webkit-transform: rotate(90deg);
+    }
+    50% {
+      -webkit-transform: rotate(180deg);
+    }
+    75% {
+      -webkit-transform: rotate(270deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+  @keyframes turn2 {
+    0% {
+      -webkit-transform: rotate(0deg);
+    }
+    25% {
+      -webkit-transform: rotate(-90deg);
+    }
+    50% {
+      -webkit-transform: rotate(-180deg);
+    }
+    75% {
+      -webkit-transform: rotate(-270deg);
+    }
+    100% {
+      -webkit-transform: rotate(-360deg);
+    }
+  }
 </style>