Pārlūkot izejas kodu

fix:sk大屏幕效果

chenzhen2 1 gadu atpakaļ
vecāks
revīzija
6aa71b7d44

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 1
dist/sk/index.html


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
dist/sk/static/css/app.5e876e53.css


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 1
dist/sk/static/css/app.8864b05e.css


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 1
dist/sk/static/css/chunk-062cf788.9081ae7f.css


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 1
dist/sk/static/css/chunk-1f99c6b8.dd85c8d7.css


BIN
dist/sk/static/css/chunk-1f99c6b8.dd85c8d7.css.gz


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
dist/sk/static/css/chunk-2d916699.a0f37cba.css


BIN
dist/sk/static/css/chunk-2d916699.a0f37cba.css.gz


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
dist/sk/static/css/chunk-4b25f758.ae53b52b.css


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 2 - 0
dist/sk/static/js/app.3af79ebc.js


BIN
dist/sk/static/js/app.3af79ebc.js.gz


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 1
dist/sk/static/js/app.5e17c844.js.map


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 2
dist/sk/static/js/app.5e17c844.js


BIN
dist/sk/static/js/app.5e17c844.js.gz


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 2
dist/sk/static/js/chunk-062cf788.a0f4b8d5.js


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 1
dist/sk/static/js/chunk-062cf788.a0f4b8d5.js.map


BIN
dist/sk/static/js/chunk-1f99c6b8.905d9470.js.gz


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 1
dist/sk/static/js/chunk-1f99c6b8.905d9470.js.map


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 2 - 2
dist/sk/static/js/chunk-1f99c6b8.905d9470.js


BIN
dist/sk/static/js/chunk-2d916699.02a25a57.js.gz


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
dist/sk/static/js/chunk-2d916699.02a25a57.js.map


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 2 - 0
dist/sk/static/js/chunk-4b25f758.c16ca091.js


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
dist/sk/static/js/chunk-4b25f758.c16ca091.js.map


+ 100 - 59
src/styles/index.scss

@@ -1,80 +1,91 @@
-#app{
+#app {
   width: 100%;
   height: 100%;
 }
+
 .home {
   width: 100%;
   height: 100%;
 }
+
 .main {
   width: 100%;
   height: 100%;
 }
-.slogan{
+
+.slogan {
   // width: 900px;
   // height:900px;
   width: 46.8%;
-  height:83%;
+  height: 83%;
   opacity: 0;
   position: absolute;
   // left: 955px;
   // top:180px;
   left: 49.7%;
-  top:18%;
-  img{
+  top: 16.6vh;
+
+  img {
     display: block;
     position: absolute;
     left: 0px;
     top: 0px;
   }
 }
-.sloganActive{
+
+.sloganActive {
   opacity: 1;
 
 
-  .slogan11{
+  .slogan11 {
     width: 165px;
     top: 0px;
     opacity: 0;
     z-index: 1000px;
     animation: slogan11Active 1s ease-in-out 5s forwards;
   }
-  .slogan12{
+
+  .slogan12 {
     width: 165px;
     top: 0px;
     opacity: 0;
     z-index: 1000px;
     animation: slogan12Active 1.1s ease-in-out 5.1s forwards;
   }
-  .slogan21{
+
+  .slogan21 {
     width: 140px;
     top: 297px;
     opacity: 0;
     z-index: 1000px;
     animation: slogan21Active 1s ease-in-out 5.2s forwards;
   }
-  .slogan22{
+
+  .slogan22 {
     width: 140px;
     top: 297px;
     opacity: 0;
     z-index: 1000px;
     animation: slogan22Active 1.1s ease-in-out 5.25s forwards;
   }
-  .slogan23{
+
+  .slogan23 {
     width: 140px;
     top: 297px;
     opacity: 0;
     z-index: 1000px;
     animation: slogan23Active 1.2s ease-in-out 5.3s forwards;
   }
-  .slogan24{
+
+  .slogan24 {
     width: 140px;
     top: 297px;
     opacity: 0;
     z-index: 1000px;
     animation: slogan24Active 1.3s ease-in-out 5.4s forwards;
   }
-  .slogan25{
+
+  .slogan25 {
     width: 140px;
     top: 297px;
     opacity: 0;
@@ -82,42 +93,47 @@
     animation: slogan25Active 1.4s ease-in-out 5.5s forwards;
   }
 
-  .slogan31{
+  .slogan31 {
     width: 140px;
     top: 550px;
     opacity: 0;
     z-index: 1000px;
     animation: slogan31Active 1s ease-in-out 5.6s forwards;
   }
-  .slogan32{
+
+  .slogan32 {
     width: 140px;
     top: 550px;
     opacity: 0;
     z-index: 1000px;
     animation: slogan32Active 1.1s ease-in-out 5.65s forwards;
   }
-  .slogan33{
+
+  .slogan33 {
     width: 140px;
     top: 550px;
     opacity: 0;
     z-index: 1000px;
     animation: slogan33Active 1.2s ease-in-out 5.7s forwards;
   }
-  .slogan34{
+
+  .slogan34 {
     width: 140px;
     top: 550px;
     opacity: 0;
     z-index: 1000px;
     animation: slogan34Active 1.3s ease-in-out 5.75s forwards;
   }
-  .slogan35{
+
+  .slogan35 {
     width: 140px;
     top: 550px;
     opacity: 0;
     z-index: 1000px;
     animation: slogan35Active 1.4s ease-in-out 5.85s forwards;
   }
-  .slogan36{
+
+  .slogan36 {
     width: 140px;
     top: 550px;
     opacity: 0;
@@ -125,68 +141,82 @@
     animation: slogan36Active 1.5s ease-in-out 6s forwards;
   }
 }
+
 // 1行
 @keyframes slogan11Active {
   0% {
-    transform: translate(100px,0); 
-  }     
+    transform: translate(100px, 0);
+  }
+
   100% {
-    transform: translate(0px,0); 
+    transform: translate(0px, 0);
     opacity: 1;
   }
 }
+
 @keyframes slogan12Active {
   0% {
-    transform: translate(600px,0); 
-  }     
+    transform: translate(600px, 0);
+  }
+
   100% {
-    transform: translate(480px,0); 
+    transform: translate(480px, 0);
     opacity: 1;
   }
 }
+
 // 2行
 @keyframes slogan21Active {
   0% {
-    transform: translate(100px,0); 
-  }     
+    transform: translate(100px, 0);
+  }
+
   100% {
-    transform: translate(0px,0); 
+    transform: translate(0px, 0);
     opacity: 1;
   }
 }
+
 @keyframes slogan22Active {
   0% {
-    transform: translate(300px,0); 
-  }     
+    transform: translate(300px, 0);
+  }
+
   100% {
-    transform: translate(120px,0); 
+    transform: translate(120px, 0);
     opacity: 1;
   }
 }
+
 @keyframes slogan23Active {
   0% {
-    transform: translate(500px,0); 
-  }     
+    transform: translate(500px, 0);
+  }
+
   100% {
-    transform: translate(260px,0); 
+    transform: translate(260px, 0);
     opacity: 1;
   }
 }
+
 @keyframes slogan24Active {
   0% {
-    transform: translate(700px,0); 
-  }     
+    transform: translate(700px, 0);
+  }
+
   100% {
-    transform: translate(378px,0); 
+    transform: translate(378px, 0);
     opacity: 1;
   }
 }
+
 @keyframes slogan25Active {
   0% {
-    transform: translate(900px,0); 
-  }     
+    transform: translate(900px, 0);
+  }
+
   100% {
-    transform: translate(505px,0); 
+    transform: translate(505px, 0);
     opacity: 1;
   }
 }
@@ -194,55 +224,66 @@
 // 第3行
 @keyframes slogan31Active {
   0% {
-    transform: translate(100px,0); 
-  }     
+    transform: translate(100px, 0);
+  }
+
   100% {
-    transform: translate(5px,0); 
+    transform: translate(5px, 0);
     opacity: 1;
   }
 }
+
 @keyframes slogan32Active {
   0% {
-    transform: translate(300px,0); 
-  }     
+    transform: translate(300px, 0);
+  }
+
   100% {
-    transform: translate(118px,0); 
+    transform: translate(118px, 0);
     opacity: 1;
   }
 }
+
 @keyframes slogan33Active {
   0% {
-    transform: translate(500px,0); 
-  }     
+    transform: translate(500px, 0);
+  }
+
   100% {
-    transform: translate(240px,0); 
+    transform: translate(240px, 0);
     opacity: 1;
   }
 }
+
 @keyframes slogan34Active {
   0% {
-    transform: translate(700px,0); 
-  }     
+    transform: translate(700px, 0);
+  }
+
   100% {
-    transform: translate(350px,0); 
+    transform: translate(350px, 0);
     opacity: 1;
   }
 }
+
 @keyframes slogan35Active {
   0% {
-    transform: translate(900px,0); 
-  }     
+    transform: translate(900px, 0);
+  }
+
   100% {
-    transform: translate(465px,0); 
+    transform: translate(465px, 0);
     opacity: 1;
   }
 }
+
 @keyframes slogan36Active {
   0% {
-    transform: translate(900px,0); 
-  }     
+    transform: translate(900px, 0);
+  }
+
   100% {
-    transform: translate(560px,0); 
+    transform: translate(560px, 0);
     opacity: 1;
   }
-}
+}

+ 2 - 2
src/views/home/index.vue

@@ -323,7 +323,7 @@ export default defineComponent({
       updateStyle() {
         let ani1 = document.getElementById("ani1");
         let ani2 = document.getElementById("ani2");
-        ani2.style.top = ani1.offsetHeight - 40 + "px";
+        ani2.style.top = (ani1.offsetHeight) / 10.8 + "vh";
         let line = document.getElementById("line");
         let text = document.getElementById("text");
         line.style.height = logoLeft.offsetHeight + "px";
@@ -607,7 +607,7 @@ export default defineComponent({
   // top: 725px;
   // left: 200px;
   width: 25%;
-  top: 70%;
+  // top: 70%;
   left: 10.4vw;
   position: absolute;
   .time-top {

+ 4 - 0
src/views/weather/index.vue

@@ -301,6 +301,7 @@ export default defineComponent({
     position: absolute;
     box-sizing: border-box;
     padding: 80px 40px;
+    padding-top: 11vh;
     padding-bottom: 0;
     width: 100%;
     left: 0;
@@ -315,6 +316,7 @@ export default defineComponent({
       box-sizing: border-box;
       padding: 9.2vh 4.4vw 14vh 4.4vw;
       width: 24%;
+      // height: 64.2vh;
       // opacity: 0.3;
       border-radius: 32px;
       background: rgba(255, 255, 255, 0.5);
@@ -375,6 +377,8 @@ export default defineComponent({
     }
   }
   .weather-top {
+    box-sizing: border-box;
+    padding-left: 95px;
     display: flex;
     overflow: hidden;
     justify-content: space-between;