chenzhen2 2 vuotta sitten
vanhempi
commit
a9196f2bc4
2 muutettua tiedostoa jossa 41 lisäystä ja 19 poistoa
  1. 1 0
      public/skImage/time-icon.svg
  2. 40 19
      src/views/home/index.vue

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 1 - 0
public/skImage/time-icon.svg


+ 40 - 19
src/views/home/index.vue

@@ -45,15 +45,19 @@
        -->
       <div id="ani2" class="ani2">
         <div class="time-top">
-          <div class="left-time">
-            <span>北京时间</span>
-            <span>16:50</span>
-          </div>
-          <div class="top-line"></div>
-          <div class="right-time">
-            <span>首尔时间</span>
-            <span>16:50</span>
-          </div>
+          <span>北京时间</span>
+          <span>首尔时间&nbsp;&nbsp;&nbsp;</span>
+        </div>
+        <div class="time-box">
+          <span>16:50</span>
+          <span></span>
+          <span>17:50</span>
+        </div>
+        <div class="time-line"></div>
+        <div class="time-bottom">
+          <span></span>
+          <span>2023年3月23日</span>
+          <span>星期四</span>
         </div>
       </div>
     </div>
@@ -456,19 +460,36 @@ export default defineComponent({
   left: 10.4vw;
   position: absolute;
   .time-top {
-    .left-time {
+    display: flex;
+    justify-content: space-between;
+    span {
       display: inline-block;
-      span {
-        display: block;
-      }
+      font-size: 30px;
+      color: #6b6b6b;
     }
-    .top-line {
-      display: inline-block;
-      height: 20px;
-      width: 1px;
-    }
-    .right-time {
+  }
+  .time-line {
+    margin: 0 auto;
+    margin-top: 20px;
+    width: 94%;
+    height: 1px;
+    background: #7e7e80;
+  }
+  .time-box {
+    padding-top: 20px;
+    font-size: 60px;
+    display: flex;
+    color: #01b59a;
+    justify-content: space-between;
+    span {
       display: inline-block;
+      vertical-align: middle;
+      &:nth-child(2) {
+        margin-top: 30px;
+        height: 20px;
+        border: 1px solid #6b6b6b;
+        // background: #6b6b6b;
+      }
     }
   }
 }