头部栏

src/views/privateOrder/Screen.vue

@@ -135,13 +135,14 @@ export default {
   created() {
     this.menus = [
       { id: 1, name: "网络安全", path: "/screen/security" },
-      { id: 2, name: "网络舆情", path: "/screen/sentiment" },
+      // { id: 2, name: "网络舆情", path: "/screen/sentiment" },
+      { id: 2, name: "网络舆情", path: "/" },
       { id: 3, name: "网络管理", path: "/screen/ecosphere" },
-      { id: 4, name: "网络生态", path: "/screen/positiveEnergy" },
+      // { id: 4, name: "网络生态", path: "/screen/positiveEnergy" },
     ];
 
     setInterval(() => {
-      this.now.date = this.$moment().format("YYYY-MM-DD");
+      this.now.date = this.$moment().format("YYYY年 M月 D日");
       this.now.hour = this.$moment().format("HH");
       this.now.minute = this.$moment().format("mm");
       this.now.second = this.$moment().format("ss");
@@ -284,8 +285,8 @@ export default {
     display: flex;
     padding-right: 15%;
     padding-left: 20%;
-    padding-bottom: 20px;
     align-items: center;
+    margin-top: 20px;
     justify-content: center;
   }
 
@@ -304,10 +305,11 @@ export default {
     width: 50%;
     height: 100%;
     display: flex;
-    padding-top: 25px;
+    padding-top: 15px;
     padding-left: 230px;
     padding-right: 20%;
     padding-left: 15%;
+    margin-top: 20px;
     align-items: center;
     justify-content: center;
   }
@@ -442,29 +444,34 @@ export default {
   top: 50px;
   width: 1211px;
   height: 154px;
+  padding: 26px 0 22px 0;
   justify-content: space-between;
   z-index: 11;
   background: url("~@/assets/sentimeent/时间背景图.png");
   background-size: 100% 100%;
 
   .line-style {
-    width: 2px;
-    height: 24px;
-    background: #b7dfff;
+    width: 3px;
+    height: 106px;
+    background: #0393B7;
     opacity: 0.5;
-    margin: 0 30px;
+    border-radius: 100px;
   }
 
   .time-date-box {
+    width: 343px;
+    height: 100%;
     display: flex;
     flex-direction: column;
+    justify-content: center;
+    align-items: center;
     border-radius: 4px;
-    padding-left: 55px;
   }
 
   .time {
+    width: 235px;
     font-family: Impact;
-    font-size: 36px;
+    font-size: 40px;
     color: #ffffff;
     text-align: left;
     font-style: normal;
@@ -473,39 +480,44 @@ export default {
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
+    letter-spacing: 4px;
   }
 
   .date {
     font-family: Impact;
-    font-size: 28px;
+    font-size: 31px;
     color: #ffffff;
     text-align: left;
     font-style: normal;
+    font-weight: bold;
     text-transform: none;
     background: radial-gradient(circle at center, #ffffff 0%, #0ab7ff 100%);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
+    letter-spacing: 1px;
+    margin-top: 5px;
   }
 
   .info-section {
     display: flex;
     align-items: center;
-
     border-radius: 4px;
-    height: 60px;
+    height: 100%;
     flex-grow: 1;
 
     .tab-active {
-      width: 90px;
-      height: 75px;
+      width: 111px;
+      height: 112px;
       background: url("~@/assets/sentimeent/临近日期底色.png");
       background-size: 100% 100%;
       color: #ffffff;
-      padding: 5px 15px;
       border-radius: 4px;
-      margin-right: 20px;
-      align-content: center;
+      margin-right: 40px;
+      margin-left: 40px;
+      font-size: 31px;
+      display: flex;
+      align-items: center;
       justify-content: center;
 
       span {
@@ -523,13 +535,15 @@ export default {
       display: flex;
       flex-direction: column;
       align-items: center;
-      justify-content: space-between;
+      justify-content: center;
       color: #ffffff;
       font-size: 20px;
-
+      height: 100%;
+      gap: 15px;
       span {
         font-family: AlibabaPuHuiTiH;
-        font-size: 28px;
+        font-weight: bold;
+        font-size: 31px;
         color: #ffffff;
         line-height: 40px;
         text-align: left;
@@ -546,9 +560,13 @@ export default {
       .tab {
         background: url("~@/assets/sentimeent/标题背景.png");
         background-size: 100% 100%;
-        padding: 5px 15px;
-        border-radius: 4px;
-        margin-right: 10px;
+        margin-right: 15px;
+        width: 77px;
+        height: 37px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 25px;
       }
     }
   }