Sfoglia il codice sorgente

fix:天气模块的bug修改

chenzhen2 1 anno fa
parent
commit
85986c9eef
3 ha cambiato i file con 68 aggiunte e 53 eliminazioni
  1. 65 51
      src/styles/weather.scss
  2. 1 1
      src/views/weather/index.vue
  3. 2 1
      src/views/weather/snow.vue

+ 65 - 51
src/styles/weather.scss

@@ -2,129 +2,143 @@
   position: absolute;
   width: 12px;
   height: 12px;
+  // height: 100vh;
+  // width: 100vw;
   background-image: url("/skImage/snow3.png");
   background-size: cover;
 }
 
-@keyframes move1{
-  0%{
-      // top: 0;
-      // left: var(--left-ini);
-      transform: translate(var(--left-ini),-5vh) scale(var(--size));
-      // var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
+@keyframes move1 {
+  0% {
+    // top: 0;
+    // left: var(--left-ini);
+    transform: translate(var(--left-ini), -5vh) scale(var(--size));
+    // var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
   }
 
-  100%{
-      // top: 100vh;
-      // left: var(--left-end);
-      transform: translate(var(--left-end),100vh);
+  100% {
+    // top: 100vh;
+    // left: var(--left-end);
+    transform: translate(var(--left-end), 100vh);
   }
 }
 
 @for $i from 1 through 200 {
   .snow:nth-child(#{$i}) {
-      --left-ini: #{random(20) - 10}vw;//--是变量声明的前缀
-      --left-end: #{random(20) - 10}vw;
-      --size: #{random(3)};
-      // top: -5vh; // 不用top的原因,就是为了不使初始状态时,空间的某块行区域是空白的,不好看,直接用y位移就可以根据时间的随机性,让空间的同时刻每一行都能含有雪花
-      left: #{-30+random(160)}vw; // 从原来的位置左右移动一点点距离,如果直接使用left当位移点,移动的跨幅太大了,不好看
-      animation: move1 #{6 + random(20)}s linear -#{random(10)}s infinite; // 用了延时,就是为了能有一运行代码就能提前有雪花出现在页面上
+    --left-ini: #{random(20) - 10}vw; //--是变量声明的前缀
+    --left-end: #{random(20) - 10}vw;
+    --size: #{random(3)};
+    // top: -5vh; // 不用top的原因,就是为了不使初始状态时,空间的某块行区域是空白的,不好看,直接用y位移就可以根据时间的随机性,让空间的同时刻每一行都能含有雪花
+    left: #{-30+random(160)}vw; // 从原来的位置左右移动一点点距离,如果直接使用left当位移点,移动的跨幅太大了,不好看
+    animation: move1 #{6 + random(20)}s linear -#{random(10)}s infinite; // 用了延时,就是为了能有一运行代码就能提前有雪花出现在页面上
   }
 }
-.snow-wrapper{
+
+.snow-wrapper {
+  box-sizing: border-box;
   position: absolute;
   width: 100vw;
   height: 100vh;
   opacity: 0.3;
   z-index: 0;
-  .snow{
+  overflow: hidden;
+
+  .snow {
     z-index: 0;
   }
 }
-.snow-content{
+
+.snow-content {
   position: absolute;
   top: 0px;
   z-index: 1000;
   width: 100vw;
   text-align: center;
-  img{
+
+  img {
     height: 100vh;
   }
 }
 
 // rain
-.rain-wrapper{
+.rain-wrapper {
   position: relative;
   z-index: 0;
   width: 10px;
   height: 150px;
-  perspective:20px;
-	-webkit-perspective:20px; /* Safari and Chrome */
+  perspective: 20px;
+  -webkit-perspective: 20px;
+  /* Safari and Chrome */
   opacity: 0.7;
 }
-.rain{
+
+.rain {
   position: absolute;
   height: 40px;
   width: 5px;
   border-radius: 5px;
-  transform: rotateX(5deg) ;
-  -webkit-transform: rotateX(5deg); /* Safari and Chrome */
+  transform: rotateX(5deg);
+  -webkit-transform: rotateX(5deg);
+  /* Safari and Chrome */
   background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
   // opacity: 0.5;
 }
 
-@keyframes move2{
-  0%{
-      width: var(--size);
-      top: 0;
-      left: var(--left2);
-      transform: translate( var(--left2),0);
-      opacity: var(--opa);
-      // var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
+@keyframes move2 {
+  0% {
+    width: var(--size);
+    top: 0;
+    left: var(--left2);
+    transform: translate(var(--left2), 0);
+    opacity: var(--opa);
+    // var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
   }
 
-  100%{
-      width:var(--size);
-      top: 100vh;
-      // left: var(--left-end);
-      transform: translate( var(--left2),1000px) scale(1.5);
-      opacity: var(--opa);
+  100% {
+    width: var(--size);
+    top: 100vh;
+    // left: var(--left-end);
+    transform: translate(var(--left2), 1000px) scale(1.5);
+    opacity: var(--opa);
 
   }
 }
 
 @for $i from 1 through 200 {
   .rain:nth-child(#{$i}) {
-      --size: #{1+ random(3)}px;
-      --opa: #{random(10)/10};
-      // top: -5vh; // 不用top的原因,就是为了不使初始状态时,空间的某块行区域是空白的,不好看,直接用y位移就可以根据时间的随机性,让空间的同时刻每一行都能含有雪花
-      --left2: #{-30+random(160)}vw; 
-      animation: move2 #{0.7 + random(100)/120}s linear -1s infinite; // 用了延时,就是为了能有一运行代码就能提前有雪花出现在页面上
+    --size: #{1+ random(3)}px;
+    --opa: #{random(10)/10};
+    // top: -5vh; // 不用top的原因,就是为了不使初始状态时,空间的某块行区域是空白的,不好看,直接用y位移就可以根据时间的随机性,让空间的同时刻每一行都能含有雪花
+    --left2: #{-30+random(160)}vw;
+    animation: move2 #{0.7 + random(100)/120}s linear -1s infinite; // 用了延时,就是为了能有一运行代码就能提前有雪花出现在页面上
   }
 }
 
-.rain-content{
+.rain-content {
   position: absolute;
   z-index: 1000;
   width: 100vw;
   text-align: center;
-  img{
+
+  img {
 
     height: 100vh;
   }
 }
-.rain-cloud{
+
+.rain-cloud {
   position: absolute;
   width: 100vw;
-  
-  .cloud1{
+
+  .cloud1 {
     position: absolute;
     top: -20vh;
     left: 30%;
     opacity: 0.6;
     height: 70vh;
   }
-  .cloud2{
+
+  .cloud2 {
     position: absolute;
     top: -10vh;
     left: -5%;

+ 1 - 1
src/views/weather/index.vue

@@ -3,7 +3,7 @@
     <template v-if="weatherKey == 'sunny'">
       <sunny></sunny>
     </template>
-    <template v-if="weatherKey == 'ran'">
+    <template v-if="weatherKey == 'rain'">
       <ran></ran>
     </template>
     <template v-if="weatherKey == 'snow'">

+ 2 - 1
src/views/weather/snow.vue

@@ -221,9 +221,10 @@ export default defineComponent({
 </script>
   
   <style lang="scss" scoped>
+@import "../../styles/weather.scss";
 .snow-box {
+  box-sizing: border-box;
   background: #4a8fac;
-
   background-size: cover;
   height: 100vh;
   width: 100vw;