Browse Source

fix:新增天气测试页面

chenzhen2 1 năm trước cách đây
mục cha
commit
a71b48727c

+ 10 - 0
src/router/index.ts

@@ -3,6 +3,7 @@ import { createRouter, Router, createWebHashHistory, createWebHistory, RouteReco
 const Home: any = () => import('@/views/home/index.vue')
 const Tiantan: any = () => import('@/views/home/tiantan.vue')
 const Weather: any = () => import('@/views/weather/index.vue')
+const weatherTest: any = () => import('@/views/weatherTest/index.vue')
 export const constantRoutes: Array<RouteRecordRaw> = [
   {
     path: '/',
@@ -38,6 +39,15 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       title: '天气',
       hideHeader: true
     }
+  },
+  {
+    path: '/weather-test',
+    component: weatherTest,
+    name: 'weatherTest',
+    meta: {
+      title: '天气',
+      hideHeader: true
+    }
   }
 ]
 

+ 139 - 0
src/views/weatherTest/cloud.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="cloud-box">
+    <div class="wrapper">
+      <div class="wrapper2">
+        <div class="cloud-inf">
+          <div class="cloud3"><img src="/sk/skImage/云1.png" alt="" /></div>
+          <div class="cloud4"><img src="/sk/skImage/云2.png" alt="" /></div>
+        </div>
+        <div class="cloud">
+          <div class="cloud1"><img src="/sk/skImage/云1.png" alt="" /></div>
+          <div class="cloud2"><img src="/sk/skImage/云2.png" alt="" /></div>
+        </div>
+
+        <div class="cloud-2">
+          <div class="cloud1"><img src="/sk/skImage/云1.png" alt="" /></div>
+          <div class="cloud2"><img src="/sk/skImage/云2.png" alt="" /></div>
+        </div>
+      </div>
+
+      <div class="content">
+        <!-- <img src="/sk/skImage/内容2.png" alt="" /> -->
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import $ from "jquery";
+import { nextTick } from "vue";
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
+export default defineComponent({
+  components: {},
+  setup(props) {
+    const proxyData = reactive({});
+    onBeforeUnmount(() => {});
+    onMounted(() => {
+      nextTick(() => {});
+    });
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+  
+  <style lang="scss" scoped>
+.wrapper {
+  overflow: hidden;
+  text-align: center;
+  width: 100vw;
+  height: 100vh;
+  background: url(/sk/skImage/背景.jpg) no-repeat;
+  background-size: cover;
+}
+
+.content img {
+  height: 100vh;
+}
+.wrapper2 {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+.cloud-inf {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  animation: move 200s linear forwards;
+}
+.cloud {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  animation: move 200s linear infinite;
+}
+
+.cloud-2 {
+  position: absolute;
+  left: -1000px;
+  width: 100vw;
+  height: 100vh;
+  animation: move 200s linear 95s infinite;
+}
+
+.cloud1 {
+  /* border:1px solid #b62626; */
+  position: absolute;
+  top: 30%;
+  left: -1200px;
+}
+
+.cloud2 {
+  position: absolute;
+  left: -1800px;
+  /* border:1px solid #000; */
+}
+.cloud3 {
+  /* border:1px solid #b62626; */
+  position: absolute;
+  top: 30%;
+  left: 600px;
+}
+
+.cloud4 {
+  position: absolute;
+  left: 0px;
+  /* border:1px solid #000; */
+}
+
+.cloud img {
+  height: 70vh;
+}
+
+@-webkit-keyframes move {
+  0% {
+    transform: translate(-1200px, 0px);
+  }
+  100% {
+    transform: translate(4000px, 0px);
+  }
+}
+
+@keyframes move {
+  0% {
+    transform: translate(-1200, 0px);
+  }
+  100% {
+    transform: translate(4000px, 0px);
+  }
+}
+</style>
+  

+ 517 - 0
src/views/weatherTest/index.vue

@@ -0,0 +1,517 @@
+<template>
+  <div class="weather-box">
+    <template v-if="weatherKey == 'sunny'">
+      <sunny></sunny>
+    </template>
+    <template v-if="weatherKey == 'rain'">
+      <ran></ran>
+    </template>
+    <template v-if="weatherKey == 'snow'">
+      <snow></snow>
+    </template>
+    <template v-if="weatherKey == 'clound'">
+      <clound></clound>
+    </template>
+
+    <div class="weather">
+      <div class="weather-top">
+        <div class="logo">
+          <img src="/sk/skImage/weather/logo.png" alt="" />
+        </div>
+        <div class="weather-left">
+          <div class="b-time">
+            <span>北京时间</span>
+            <span>{{ nowTime }}<i></i></span>
+          </div>
+          <div class="b-line">
+            <span></span>
+            <span></span>
+          </div>
+          <div class="b-time">
+            <span>首尔时间</span>
+            <span>{{ sTime }}<i></i></span>
+          </div>
+          <div class="weather-detail">
+            <div class="d-top">
+              <img :src="'/sk/skImage/weather/' + logonIcon" alt="" />
+              <span>{{ temperature }} ℃</span>
+            </div>
+            <div class="d-bottom">
+              <span>{{ nowDate }}</span>
+              <span>{{ week }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="env-box">
+        <div class="env-item env-box-bg">
+          <div class="env-icon">
+            <img
+              :src="
+                weatherKey == 'sunny'
+                  ? '/sk/skImage/weather/温度.png'
+                  : '/sk/skImage/weather/温度.png'
+              "
+              alt=""
+            />
+            <span>温度</span>
+          </div>
+          <div class="env-text">{{ envObj.Tdb }}</div>
+          <div class="env-rate">℃</div>
+        </div>
+        <div class="env-item env-box-bg">
+          <div class="env-icon">
+            <img
+              :src="
+                weatherKey == 'sunny'
+                  ? '/sk/skImage/weather/湿度.png'
+                  : '/sk/skImage/weather/湿度.png'
+              "
+              alt=""
+            />
+            <span>湿度</span>
+          </div>
+          <div class="env-text">{{ envObj.RH }}</div>
+          <div class="env-rate">%</div>
+        </div>
+        <div class="env-item env-box-bg">
+          <div class="env-icon">
+            <img
+              :src="
+                weatherKey == 'sunny'
+                  ? '/sk/skImage/weather/甲醛.png'
+                  : '/sk/skImage/weather/甲醛.png'
+              "
+              alt=""
+            />
+            <span>甲醛</span>
+          </div>
+          <div class="env-text">{{ envObj.HCHO }}</div>
+          <div class="env-rate">mg/m³</div>
+        </div>
+        <div class="env-item env-box-bg">
+          <div class="env-icon">
+            <img
+              :src="
+                weatherKey == 'sunny'
+                  ? '/sk/skImage/weather/pm.png'
+                  : '/sk/skImage/weather/pm.png'
+              "
+              alt=""
+            />
+            <span>PM2.5</span>
+          </div>
+          <div class="env-text">{{ envObj.PM2d5 }}</div>
+          <div class="env-rate">ug/m³</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script lang="ts">
+import $ from "jquery";
+import { nextTick } from "vue";
+// import { getWeather } from "@/apis/envmonitor.ts";
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
+import ran from "./rain.vue"; // 雨
+import clound from "./cloud.vue"; //  云
+import snow from "./snow.vue"; //  雪
+import sunny from "./sunny.vue"; //  晴
+import { getWeather, queryEnvCurrent } from "@/apis/envmonitor";
+import { formatEnergyDate, getWeek } from "@/utils";
+import { useRouter } from "vue-router";
+export default defineComponent({
+  components: {
+    ran,
+    clound,
+    snow,
+    sunny,
+  },
+  beforeRouteEnter(to, from, next) {
+    console.log("to===");
+    console.log(from);
+    if (from.name == "tiantan") {
+      next();
+    } else {
+      next((e: any) => {
+        e.pathUrl = "/sk/index";
+      });
+    }
+  },
+  setup(props) {
+    const router = useRouter();
+    let weatherData: any = [
+      {
+        text: "云",
+        type: "clound",
+        logonIcon: "阴.png",
+      },
+      {
+        text: "雨",
+        type: "rain",
+        logonIcon: "雨.png",
+      },
+      {
+        text: "雪",
+        type: "snow",
+        logonIcon: "雪.png",
+      },
+      {
+        text: "晴",
+        type: "sunny",
+        logonIcon: "晴.png",
+      },
+    ];
+    let times: any = null;
+    let currentData: any = [];
+    let envObj: any = {
+      Tdb: "0", // 温度
+      RH: "0", //湿度
+      HCHO: "0", //甲醛
+      PM2d5: "0",
+    };
+    let intevell: any = null;
+    let timer: any = null;
+    const proxyData = reactive({
+      weatherData: weatherData,
+      envObj: envObj,
+      temperature: "",
+      weatherKey: "",
+      pathUrl: "/sk/home",
+      logonIcon: "阴.png",
+      currentData: currentData,
+      nowTime: formatEnergyDate()[2],
+      sTime: formatEnergyDate(2)[2],
+      nowDate: formatEnergyDate()[0],
+      intevell: intevell,
+      week: getWeek(),
+      // 设置现在时间
+      setNowDate() {
+        proxyData.intevell = setInterval(() => {
+          let timeArr: any = formatEnergyDate();
+          proxyData.nowTime = timeArr[2];
+          proxyData.nowDate = timeArr[0];
+          let timeArr1: any = formatEnergyDate(2);
+          proxyData.sTime = timeArr1[2];
+          proxyData.week = getWeek();
+        }, 1000);
+      },
+      // 设置天气key的值
+      setWeatherKey(content: any) {
+        if (content == "sunny") {
+          proxyData.weatherKey = "sunny";
+          proxyData.logonIcon = "晴.png";
+        } else if (content == "rain") {
+          proxyData.weatherKey = "rain";
+          proxyData.logonIcon = "雨.png";
+        } else if (content == "snow") {
+          proxyData.weatherKey = "snow";
+          proxyData.logonIcon = "雪.png";
+        } else if (content == "clound") {
+          proxyData.weatherKey = "clound";
+          proxyData.logonIcon = "阴.png";
+        }
+      },
+      // 获取天气数据
+      getWeatherData() {
+        getWeather().then((res) => {
+          let resResult: any = res;
+          let content: any = resResult.content;
+          proxyData.temperature = content.temperature;
+          proxyData.setWeatherKey(content);
+        });
+      },
+      timer: timer,
+      setTimer(timeLen: any = 600000) {
+        proxyData.timer = setInterval(() => {
+          proxyData.setEnvData();
+          proxyData.queryEnvCurrent();
+        }, timeLen);
+      },
+      // 设置环境数据
+      setEnvData() {
+        proxyData.envObj = {
+          Tdb: "0", // 温度
+          RH: "0", //湿度
+          HCHO: "0", //甲醛
+          PM2d5: "0",
+        };
+        proxyData.currentData.map((item: any) => {
+          if (item.code == "Tdb") {
+            item.data = item.data ? item.data.toFixed(1) : "--";
+          } else if (item.code == "RH") {
+            item.data = item.data ? item.data.toFixed(0) : "--";
+          } else if (item.code == "PM2d5") {
+            item.data = item.data ? item.data.toFixed(0) : "--";
+          } else {
+            item.data = item.data ? item.data.toFixed(2) : "--";
+          }
+
+          proxyData.envObj[item.code] = item.data;
+        });
+      },
+      // 获取环境数据
+      queryEnvCurrent() {
+        queryEnvCurrent()
+          .then((res) => {
+            let resResult: any = res;
+            if (resResult.result == "success") {
+              proxyData.currentData = resResult.data || [];
+            } else {
+              proxyData.currentData = [];
+            }
+            proxyData.setEnvData();
+          })
+          .catch((error: any) => {
+            proxyData.currentData = [];
+          });
+      },
+      times: times,
+      changePage() {
+        proxyData.times = setTimeout(() => {
+          clearTimeout(proxyData.times);
+          // router.push({ path: "/home" });
+          window.location.href = proxyData.pathUrl;
+        }, 300000);
+        // 300000
+      },
+    });
+    onBeforeUnmount(() => {
+      clearInterval(proxyData.intevell);
+      clearInterval(proxyData.timer);
+      clearTimeout(proxyData.times);
+    });
+    onMounted(() => {
+      proxyData.setNowDate();
+      // 获取天气数据
+      // proxyData.getWeatherData();
+      let type: any = router.currentRoute.value.query.type;
+      console.log(type);
+      if (type) {
+        proxyData.setWeatherKey(type);
+      } else {
+        type = "clound";
+      }
+
+      // 获取环境数据
+      proxyData.queryEnvCurrent();
+      // proxyData.changePage();
+      // proxyData.setTimer();
+    });
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+  1840
+<style lang="scss" scoped>
+.weather-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .weather {
+    position: absolute;
+    box-sizing: border-box;
+    padding: 0 40px;
+    padding-top: 7.4vh;
+    padding-bottom: 0;
+    width: 100%;
+    left: 0;
+    top: 0;
+  }
+  .env-box {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 7.4vh;
+    .env-item {
+      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);
+      .env-icon {
+        text-align: center;
+        padding-bottom: 50px;
+        img {
+          width: 100px;
+          display: inline-block;
+          vertical-align: middle;
+        }
+        span {
+          display: inline-block;
+          margin-left: 20px;
+          vertical-align: middle;
+          font-size: 60px;
+          font-weight: 500;
+          letter-spacing: 0px;
+          line-height: 60px;
+          color: rgba(255, 255, 255, 1);
+        }
+      }
+      .env-text {
+        text-align: center;
+        font-family: "HarmonyOS Sans TC";
+        font-size: 130px;
+        line-height: 160px;
+        font-weight: 700;
+        letter-spacing: 0px;
+        color: rgba(255, 255, 255, 1);
+      }
+      .env-rate {
+        font-family: "HarmonyOS_Sans_TC_Regular";
+        padding-top: 80px;
+        font-size: 60px;
+        font-weight: 400;
+        letter-spacing: 0px;
+        line-height: 0px;
+        color: rgba(255, 255, 255, 1);
+        text-align: center;
+      }
+      &:nth-child(2) {
+        img {
+          width: 72px;
+        }
+      }
+      &:nth-child(3) {
+        img {
+          width: 102px;
+        }
+      }
+      &:nth-child(4) {
+        img {
+          width: 62px;
+        }
+      }
+    }
+    .env-box-bg {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+  .weather-top {
+    box-sizing: border-box;
+    padding-left: 95px;
+    display: flex;
+    overflow: hidden;
+    justify-content: space-between;
+    .logo {
+      width: 150px;
+      img {
+        width: 150px;
+      }
+    }
+    .weather-left {
+      position: relative;
+      // text-align: right;
+      width: 74%;
+      white-space: nowrap;
+      overflow: hidden;
+      .b-time {
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 90px;
+        width: 270px;
+        // border-bottom: 2px solid rgba(255, 255, 255, 1);
+        i {
+          display: block;
+          width: 90%;
+          height: 2px;
+          background: rgba(255, 255, 255, 1);
+          // border-bottom: 2px solid rgba(255, 255, 255, 1);
+          margin: 0 auto;
+        }
+        span {
+          display: block;
+          text-align: center;
+          &:nth-child(1) {
+            opacity: 1;
+            padding-bottom: 20px;
+            /** 文本1 */
+            font-size: 32px;
+            font-weight: 500;
+            letter-spacing: 0px;
+            color: rgba(255, 255, 255, 1);
+          }
+          &:nth-child(2) {
+            font-size: 64px;
+            font-weight: 700;
+            letter-spacing: 0px;
+            letter-spacing: 0px;
+            color: rgba(255, 255, 255, 1);
+          }
+        }
+        &:nth-child(3) {
+          margin-left: 90px;
+          margin-right: 10px;
+        }
+      }
+      .b-line {
+        position: absolute;
+        bottom: 0;
+        left: 19vw;
+        // left: 13.6vw;
+        display: inline-block;
+        vertical-align: baseline;
+        width: 1px;
+        // height: 4.27vh;
+        // padding-top: 5vh;
+        span {
+          display: block;
+          height: 1.67vh;
+          // width: 1px;
+          border: 1px solid rgba(240, 240, 240, 1);
+          // background: rgba(240, 240, 240, 1);
+          &:nth-child(2) {
+            margin-top: 0.925vh;
+          }
+        }
+      }
+    }
+    .weather-detail {
+      // position: relative;
+      // box-sizing: border-box;
+      float: right;
+      // right: 0;
+      // padding-right: 73px;
+      .d-top {
+        text-align: right;
+        padding-bottom: 12px;
+        img {
+          width: 73px;
+          display: inline-block;
+          vertical-align: middle;
+        }
+        span {
+          display: inline-block;
+          padding-left: 10px;
+          font-size: 58px;
+          font-weight: 400;
+          color: rgba(242, 244, 246, 1);
+          vertical-align: middle;
+        }
+      }
+      .d-bottom {
+        font-size: 38px;
+        font-weight: 400;
+        color: rgba(242, 244, 246, 1);
+        span {
+          &:nth-child(2) {
+            padding-left: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+  

+ 248 - 0
src/views/weatherTest/rain.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="rain-box">
+    <div class="rain-content">
+      <!-- <img src="/sk/skImage/内容2.png" alt="" /> -->
+    </div>
+    <div class="rain-cloud">
+      <!-- <img class="cloud1" src="/sk/skImage/云1.png" alt="" /> -->
+      <!-- <img class="cloud2" src="/sk/skImage/云2.png" alt="" /> -->
+    </div>
+    <div class="rain-wrapper">
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+      <div class="rain"></div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import $ from "jquery";
+import { nextTick } from "vue";
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
+export default defineComponent({
+  components: {},
+  setup(props) {
+    const proxyData = reactive({});
+    onBeforeUnmount(() => {});
+    onMounted(() => {
+      nextTick(() => {});
+    });
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+  
+  <style lang="scss" scoped>
+@import "../../styles/weather.scss";
+.rain-box {
+  background: #63738a;
+  height: 100vh;
+  overflow: hidden;
+}
+</style>
+  

+ 250 - 0
src/views/weatherTest/snow.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="snow-box">
+    <!-- <div class="snow-content">
+      <img src="/sk/skImage/内容2.png" alt="" />
+    </div> -->
+    <div class="snow-wrapper">
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+      <div class="snow"></div>
+    </div>
+    <div class="snow-cloud1"><img src="/sk/skImage/云1.png" alt="" /></div>
+    <div class="snow-cloud2"><img src="/sk/skImage/云2.png" alt="" /></div>
+  </div>
+</template>
+  
+  <script>
+import $ from "jquery";
+import { nextTick } from "vue";
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
+export default defineComponent({
+  components: {},
+  setup(props) {
+    const proxyData = reactive({});
+    onBeforeUnmount(() => {});
+    onMounted(() => {
+      nextTick(() => {});
+    });
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+  
+  <style lang="scss" scoped>
+@import "../../styles/weather.scss";
+.snow-box {
+  box-sizing: border-box;
+  background: #4a8fac;
+  background-size: cover;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+.snow-cloud1 {
+  position: absolute;
+  top: -100px;
+  left: 0px;
+}
+.snow-cloud1 img {
+  height: 70vh;
+}
+.snow-cloud2 {
+  position: absolute;
+  top: -150px;
+  right: 0px;
+}
+.snow-cloud2 img {
+  height: 70vh;
+}
+</style>
+  

+ 315 - 0
src/views/weatherTest/sunny.vue

@@ -0,0 +1,315 @@
+<template>
+  <div class="sunny-box">
+    <div class="wrapper">
+      <div class="con">
+        <div class="rec"></div>
+        <div class="rec"></div>
+        <div class="rec"></div>
+        <div class="rec"></div>
+        <div class="rec"></div>
+        <div class="rec"></div>
+        <div class="rec"></div>
+        <div class="rec"></div>
+
+        <!-- <div class="rec"></div>
+      <div class="rec"></div>
+      <div class="rec"></div>
+      <div class="rec"></div> -->
+      </div>
+      <div class="color-div">
+        <div></div>
+      </div>
+      <div class="cloud-inf">
+        <img class="cloud3" src="/sk/skImage/云1.png" alt="" />
+        <img class="cloud4" src="/sk/skImage/云2.png" alt="" />
+      </div>
+      <div class="cloud">
+        <img class="cloud1" src="/sk/skImage/云1.png" alt="" />
+        <img class="cloud2" src="/sk/skImage/云2.png" alt="" />
+      </div>
+      <div class="cloud-2">
+        <img class="cloud1" src="/sk/skImage/云1.png" alt="" />
+        <img class="cloud2" src="/sk/skImage/云2.png" alt="" />
+      </div>
+      <!-- <div class="cloud-2 cloud-3">
+      <img class="cloud1" src="/sk/skImage/云1.png" alt="">
+      <img class="cloud2" src="/sk/skImage/云2.png" alt="">
+    </div> -->
+
+      <div class="sun"><img src="/sk/skImage/sun.png" alt="" /></div>
+      <div class="content">
+        <!-- <img src="/sk/skImage/内容2.png" alt="" /> -->
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import $ from "jquery";
+import { nextTick } from "vue";
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
+export default defineComponent({
+  components: {},
+  setup(props) {
+    const proxyData = reactive({});
+    onBeforeUnmount(() => {});
+    onMounted(() => {
+      nextTick(() => {});
+    });
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+  
+  <style lang="scss" scoped>
+.sunny-box {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  background: #5889c3;
+  .con {
+    position: fixed;
+    top: 0px;
+    right: 100px;
+    height: 1000px;
+    width: 50px;
+    margin: 50px;
+    padding: 10px;
+    /* border: 1px solid black; */
+    perspective: 200px;
+    -webkit-perspective: 200px; /* Safari and Chrome */
+    -webkit-transform-origin: 50% 0;
+    -ms-transform-origin: 50% 0;
+    transform-origin: 50% 0;
+    animation: blink 40s infinite;
+  }
+
+  .con .rec {
+    position: absolute;
+    top: -100px;
+    left: 0px;
+    width: 20px;
+    height: 1000px;
+    background-image: linear-gradient(
+      rgba(255, 255, 255, 1),
+      rgba(255, 255, 255, 0.2)
+    );
+    opacity: 0.15;
+    filter: blur(3px);
+    -webkit-transform-origin: 50% 0;
+    -ms-transform-origin: 50% 0;
+    transform-origin: 50% 0;
+  }
+
+  .con .rec:nth-child(1) {
+    -webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg);
+    transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg);
+    -webkit-animation-delay: 200ms;
+    animation-delay: 200ms;
+  }
+
+  .con .rec:nth-child(2) {
+    -webkit-transform: rotateX(15deg) rotateY(10deg) rotateZ(3deg);
+    transform: rotateX(15deg) rotateY(10deg) rotateZ(3deg);
+    -webkit-animation-delay: 600ms;
+    animation-delay: 600ms;
+  }
+
+  .con .rec:nth-child(3) {
+    -webkit-transform: rotateX(15deg) rotateY(15deg) rotateZ(6deg);
+    transform: rotateX(15deg) rotateY(15deg) rotateZ(6deg);
+    -webkit-animation-delay: 1000ms;
+    animation-delay: 1000ms;
+  }
+
+  .con .rec:nth-child(4) {
+    -webkit-transform: rotateX(15deg) rotateY(16deg) rotateZ(9deg);
+    transform: rotateX(15deg) rotateY(16deg) rotateZ(9deg);
+    -webkit-animation-delay: 1400ms;
+    animation-delay: 1400ms;
+  }
+  .con .rec:nth-child(9) {
+    -webkit-transform: rotateX(15deg) rotateY(16deg) rotateZ(10deg);
+    transform: rotateX(15deg) rotateY(16deg) rotateZ(10deg);
+    -webkit-animation-delay: 1400ms;
+    animation-delay: 1400ms;
+  }
+
+  .con .rec:nth-child(5) {
+    -webkit-transform: rotateX(15deg) rotateY(15deg) rotateZ(-3deg);
+    transform: rotateX(15deg) rotateY(15deg) rotateZ(-3deg);
+    -webkit-animation-delay: 1800ms;
+    animation-delay: 1800ms;
+  }
+
+  .con .rec:nth-child(6) {
+    -webkit-transform: rotateX(15deg) rotateY(5deg) rotateZ(-6deg);
+    transform: rotateX(15deg) rotateY(5deg) rotateZ(-6deg);
+    -webkit-animation-delay: 2200ms;
+    animation-delay: 2200ms;
+  }
+
+  .con .rec:nth-child(8) {
+    -webkit-transform: rotateX(15deg) rotateY(-5deg) rotateZ(-9deg);
+    transform: rotateX(15deg) rotateY(-5deg) rotateZ(-9deg);
+    -webkit-animation-delay: 2600ms;
+    animation-delay: 2600ms;
+  }
+
+  @-webkit-keyframes blink {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(20deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+  @keyframes blink {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(20deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+  .wrapper {
+    padding: 0px;
+    margin: 0px;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    position: relative;
+    overflow: hidden;
+  }
+  .content {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    text-align: center;
+    top: 0px;
+    left: 0px;
+  }
+  .content img {
+    height: 100vh;
+  }
+  .color-div {
+    height: 800px;
+    width: 900px;
+    border-radius: 50%;
+    background-image: radial-gradient(
+      rgba(255, 0, 0, 0) 50%,
+      rgba(255, 0, 0, 0.1),
+      rgba(255, 96, 0, 0.1),
+      rgba(252, 255, 0, 0.1),
+      rgba(53, 247, 5, 0.2),
+      rgba(2, 221, 250, 0.2),
+      rgba(24, 8, 247, 0.2),
+      rgba(196, 7, 243, 0.2) 90%
+    );
+
+    filter: blur(30px);
+    position: absolute;
+    top: -350px;
+    right: -200px;
+    animation: circle 20s infinite;
+  }
+  @keyframes circle {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.1);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  .sun {
+    position: fixed;
+    top: -475px;
+    right: 150px;
+    width: 500px;
+  }
+
+  .cloud {
+    position: absolute;
+    left: -700px;
+    width: 100vw;
+    height: 100vh;
+    animation: cloudMove 190s linear infinite;
+  }
+  .cloud-2 {
+    position: absolute;
+    left: -700px;
+    width: 100vw;
+    height: 100vh;
+    animation: cloudMove 190s linear 90s infinite;
+  }
+  /* .cloud-3{
+      position: absolute;
+      left: -600px;
+      width: 100vw;
+      height: 100vh;
+      animation: cloudMove 200s linear 120s infinite;
+    } */
+  .cloud1 {
+    /* border:1px solid #333; */
+    position: absolute;
+    top: 60px;
+    left: 0px;
+    height: 350px;
+  }
+  .cloud2 {
+    /* border:1px solid #962929; */
+
+    position: absolute;
+    top: 10px;
+    left: -300px;
+    height: 250px;
+  }
+
+  .cloud-inf {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    animation: cloudMove 200s linear forwards;
+  }
+  .cloud3 {
+    /* border:1px solid #b62626; */
+    position: absolute;
+    top: 60px;
+    left: 800px;
+    height: 350px;
+  }
+
+  .cloud4 {
+    position: absolute;
+    top: 10px;
+    left: 500px;
+    height: 250px;
+  }
+  @keyframes cloudMove {
+    0% {
+      transform: translate(-800px, 0px);
+    }
+    100% {
+      transform: translate(2000px, 0px);
+    }
+  }
+}
+</style>
+