细节调整

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,15 +10,19 @@
     <div class="top"><span class="title">平台概览</span></div>
     <div class="bottom">
       <div class="left">
+        <div class="box">
           <div class="item">
             <div class="name">平台访问量</div>
             <div claSS="num">{{ num1 }}</div>
           </div>
+        </div>
+        <div class="box">
           <div class="item">
             <div class="name">用户量</div>
             <div claSS="num">{{ num2 }}</div>
           </div>
         </div>
+      </div>
       <div class="right" :key="showKey">
         <div class="title">浏览趋势</div>
         <div class="echarts-box" id="echarts-box"></div>
@@ -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,15 +212,20 @@
         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%;
+          animation: turn 10s linear infinite;
+          .item {
+            width: 1.94rem;
+            height: 1.94rem;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
+            animation: turn2 10s linear infinite;
             .name {
               font-size: 16px;
               color: #fff;
@@ -216,6 +236,7 @@
             }
           }
         }
+      }
       .right {
         width: 6.53rem;
         height: 3.54rem;
@@ -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>