Browse Source

fix:sk的天气数据

chenzhen2 1 year ago
parent
commit
84df5dfc53

BIN
public/skImage/weather/logo.png


BIN
public/skImage/weather/pm-晴.png


BIN
public/skImage/weather/pm.png


BIN
public/skImage/weather/snow.png


BIN
public/skImage/weather/晴.png


BIN
public/skImage/weather/温度-晴.png


BIN
public/skImage/weather/温度.png


BIN
public/skImage/weather/湿度-晴.png


BIN
public/skImage/weather/湿度.png


BIN
public/skImage/weather/甲醛-晴.png


BIN
public/skImage/weather/甲醛.png


BIN
public/skImage/weather/阴.png


BIN
public/skImage/weather/雨.png


BIN
public/skImage/weather/雪.png


+ 2 - 2
src/apis/envmonitor.ts

@@ -12,8 +12,8 @@ import { customService, duoduoenvService, objectService, setupService, testApi,
 export const getCompanyInfo = (companyInfo: RequestParams) => {
   return https().request<RootObject<CompanyModel>>(`/api/company/config/${companyInfo.companyId}`, Method.GET, undefined, ContentType.json)
 }
-export const getWeather = (params: string) => {
-  return https().request<RootWeatherObject<OutherWeather>>(`${objectService}weather/getCurrent?${params}`, Method.GET, undefined, ContentType.json)
+export const getWeather = () => {
+  return https().request<RootWeatherObject<OutherWeather>>(`${objectService}weather/getCurrent`, Method.GET, undefined, ContentType.json)
 }
 export const getSpaceInfo = (data: any) => {
   return https().request<RootWeatherObject<SpaceModel>>(`${duoduoenvService}space/property`, Method.POST, data, ContentType.json)

+ 10 - 0
src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, Router, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 const Home: any = () => import('@/views/home/index.vue')
+const Weather: any = () => import('@/views/weather/index.vue')
 export const constantRoutes: Array<RouteRecordRaw> = [
   {
     path: '/',
@@ -18,6 +19,15 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       title: '首页',
       hideHeader: true
     }
+  },
+  {
+    path: '/weather',
+    component: Weather,
+    name: 'weather',
+    meta: {
+      title: '天气',
+      hideHeader: true
+    }
   }
 ]
 

+ 134 - 0
src/styles/weather.scss

@@ -0,0 +1,134 @@
+.snow {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  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() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
+  }
+
+  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; // 用了延时,就是为了能有一运行代码就能提前有雪花出现在页面上
+  }
+}
+.snow-wrapper{
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  opacity: 0.3;
+  z-index: 0;
+  .snow{
+    z-index: 0;
+  }
+}
+.snow-content{
+  position: absolute;
+  top: 0px;
+  z-index: 1000;
+  width: 100vw;
+  text-align: center;
+  img{
+    height: 100vh;
+  }
+}
+
+// rain
+.rain-wrapper{
+  position: relative;
+  z-index: 0;
+  width: 10px;
+  height: 150px;
+  perspective:20px;
+	-webkit-perspective:20px; /* Safari and Chrome */
+  opacity: 0.7;
+}
+.rain{
+  position: absolute;
+  height: 40px;
+  width: 5px;
+  border-radius: 5px;
+  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() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
+  }
+
+  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; // 用了延时,就是为了能有一运行代码就能提前有雪花出现在页面上
+  }
+}
+
+.rain-content{
+  position: absolute;
+  z-index: 1000;
+  width: 100vw;
+  text-align: center;
+  img{
+
+    height: 100vh;
+  }
+}
+.rain-cloud{
+  position: absolute;
+  width: 100vw;
+  
+  .cloud1{
+    position: absolute;
+    top: -20vh;
+    left: 30%;
+    opacity: 0.6;
+    height: 70vh;
+  }
+  .cloud2{
+    position: absolute;
+    top: -10vh;
+    left: -5%;
+    opacity: 0.6;
+    height: 70vh;
+  }
+}

+ 2 - 17
src/utils/https.ts

@@ -12,9 +12,7 @@ export const https = (configobj: any = { timeout: '' }) => {
   let config: HttpClientConfig = {
     baseURL: networkConfig.host,
     headers: {
-      'token': getToken(),
-      'sso-token': getToken(),
-      'X-Forwarded-Token': getToken()
+
     }
   }
   if (configobj.timeout) {
@@ -35,20 +33,7 @@ export const https = (configobj: any = { timeout: '' }) => {
   }, function (error) {
 
   })
-  // https.httpClient.interceptors.response.use(function (response) {
-  //   return response
-  // }, function (error) {
-  //   // console.log('error===')
-  //   // console.log(error.response.status)
-  //   // console.log(error.status)
-  //   // if (error.response.status === 401) {
-  //   //   Toast('登录失效,请退出app重新登录')
-  //   //   sessionStorage.clear()
-  //   //   const tokenOld: any = Cookies.get('accessToken')
-  //   //   window.location.href = `/sgh5/home?accessToken=${tokenOld}`
-  //   // }
-  //   return Promise.reject(error)
-  // })
+
   return https
 }
 

+ 4 - 26
src/utils/index.ts

@@ -109,41 +109,19 @@ export const setQueryConfig = function (queryConfig: any) {
 // 获取用户信息
 export const getUserInfo = function () {
   // debugger
-  let userInfo = store.state.user
   const paramsInfo: any = {
-    openid: userInfo.openid,
-    userId: userInfo.userId,
-    mac: userInfo.mac,
-    pubname: Keys.pubname,
-    projectId: userInfo.projectId
-  }
-  if (userInfo.userName) {
-    paramsInfo.userName = userInfo.userName
-  }
-  if (userInfo.userPhone) {
-    paramsInfo.userPhone = userInfo.userPhone
+    projectId: 'Pj1101080259'
   }
+
   return paramsInfo
 }
 
 
 // 地址通用参赛携带
 export const getComparams = function () {
-  let userInfo = store.state.user
-  let paramsInfo: any = {
-    openid: Keys.openid,
-    userId: userInfo.userId,
-    pubname: Keys.pubname,
-    mac: userInfo.mac,
-    projectId: userInfo.projectId
-  }
-  if (userInfo.userName) {
-    paramsInfo.userName = userInfo.userName
-  }
-  if (userInfo.userPhone) {
-    paramsInfo.userPhone = userInfo.userPhone
+  const paramsInfo: any = {
+    projectId: 'Pj1101080259'
   }
-  return paramsInfo
 }
 
 export const formatDate = function (split: string = 'YYYYMMDD', date: any = new Date()) {

+ 34 - 3
src/views/home/index.vue

@@ -55,9 +55,13 @@
         </div>
         <div class="time-line"></div>
         <div class="time-bottom">
-          <span></span>
-          <span>2023年3月23日</span>
-          <span>星期四</span>
+          <div class="time-left">
+            <img src="/skImage/time-icon.svg" alt="" />
+            <span>2023年3月23日</span>
+          </div>
+          <div class="time-right">
+            <span>星期四</span>
+          </div>
         </div>
       </div>
     </div>
@@ -475,6 +479,33 @@ export default defineComponent({
     height: 1px;
     background: #7e7e80;
   }
+  .time-bottom {
+    width: 98%;
+    margin: 0 auto;
+    padding: 10px;
+    font-size: 20px;
+    color: #7e7e80;
+    display: flex;
+    justify-content: space-around;
+    .time-left {
+      text-align: left;
+      flex: 1;
+      img {
+        width: 25px;
+        height: 25px;
+        vertical-align: middle;
+      }
+      span {
+        display: inline-block;
+        vertical-align: middle;
+        padding-left: 10px;
+      }
+    }
+    .time-right {
+      text-align: right;
+      width: 100px;
+    }
+  }
   .time-box {
     padding-top: 20px;
     font-size: 60px;

+ 139 - 0
src/views/weather/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="/skImage/云1.png" alt="" /></div>
+          <div class="cloud4"><img src="/skImage/云2.png" alt="" /></div>
+        </div>
+        <div class="cloud">
+          <div class="cloud1"><img src="/skImage/云1.png" alt="" /></div>
+          <div class="cloud2"><img src="/skImage/云2.png" alt="" /></div>
+        </div>
+
+        <div class="cloud-2">
+          <div class="cloud1"><img src="/skImage/云1.png" alt="" /></div>
+          <div class="cloud2"><img src="/skImage/云2.png" alt="" /></div>
+        </div>
+      </div>
+
+      <div class="content">
+        <!-- <img src="/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(/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>
+  

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

@@ -0,0 +1,335 @@
+<template>
+  <div class="weather-box">
+    <template v-if="weatherKey == 'sunny'">
+      <sunny></sunny>
+    </template>
+    <template v-if="weatherKey == 'ran'">
+      <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="/skImage/weather/logo.png" alt="" />
+        </div>
+        <div class="weather-left">
+          <div class="b-time">
+            <span>北京时间</span>
+            <span>16:50:49</span>
+          </div>
+          <div class="b-time">
+            <span>首尔时间</span>
+            <span>16:50:49</span>
+          </div>
+          <div class="weather-detail">
+            <div class="d-top">
+              <img src="/skImage/weather/snow.png" alt="" />
+              <span>20℃</span>
+            </div>
+            <div class="d-bottom">
+              <span>2023年3月14日</span>
+              <span>星期二</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="env-box">
+        <div class="env-item env-box-bg">
+          <div class="env-icon">
+            <img src="/skImage/weather/温度.png" alt="" />
+            <span>温度</span>
+          </div>
+          <div class="env-text">26.0</div>
+          <div class="env-rate">℃</div>
+        </div>
+        <div class="env-item env-box-bg">
+          <div class="env-icon">
+            <img src="/skImage/weather/湿度.png" alt="" />
+            <span>湿度</span>
+          </div>
+          <div class="env-text">26.0</div>
+          <div class="env-rate">%</div>
+        </div>
+        <div class="env-item env-box-bg">
+          <div class="env-icon">
+            <img src="/skImage/weather/甲醛.png" alt="" />
+            <span>甲醛</span>
+          </div>
+          <div class="env-text">26.0</div>
+          <div class="env-rate">mg/m</div>
+        </div>
+        <div class="env-item env-box-bg">
+          <div class="env-icon">
+            <img src="/skImage/weather/pm.png" alt="" />
+            <span>PM2.5</span>
+          </div>
+          <div class="env-text">26.0</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 } from "@/apis/envmonitor";
+export default defineComponent({
+  components: {
+    ran,
+    clound,
+    snow,
+    sunny,
+  },
+  setup(props) {
+    let weatherData = [
+      {
+        text: "云",
+        type: "cloud",
+        logonIcon: "阴.png",
+      },
+      {
+        text: "雨",
+        type: "rain",
+        logonIcon: "雨.png",
+      },
+      {
+        text: "雪",
+        type: "snow",
+        logonIcon: "雪.png",
+      },
+      {
+        text: "晴",
+        type: "sunny",
+        logonIcon: "晴.png",
+      },
+    ];
+    const proxyData = reactive({
+      weatherData: weatherData,
+      weatherKey: "sunny",
+      logonIcon: "阴.png",
+      // 设置天气key的值
+      setWeatherKey(content: any) {
+        if (content.code <= 3) {
+          proxyData.weatherKey = "sunny";
+          proxyData.logonIcon = "晴.png";
+        } else if (content.code >= 10 && content.code <= 19) {
+          proxyData.weatherKey = "rain";
+          proxyData.logonIcon = "雨.png";
+        } else if (content.code >= 20 && content.code <= 25) {
+          proxyData.weatherKey = "snow";
+          proxyData.logonIcon = "雪.png";
+        } else {
+          if (content.code == "38") {
+            proxyData.weatherKey = "sunny";
+            proxyData.logonIcon = "晴.png";
+          } else {
+            proxyData.weatherKey = "cloud";
+            proxyData.logonIcon = "阴.png";
+          }
+        }
+      },
+      getWeatherData() {
+        getWeather().then((res) => {
+          let resResult: any = res;
+          let content: any = resResult.content;
+          proxyData.setWeatherKey(content);
+        });
+      },
+    });
+    onBeforeUnmount(() => {});
+    onMounted(() => {
+      proxyData.getWeatherData();
+    });
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+  
+<style lang="scss" scoped>
+.weather-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .weather {
+    position: absolute;
+    box-sizing: border-box;
+    padding: 80px 40px;
+    padding-bottom: 0;
+    width: 100%;
+    left: 0;
+    top: 0;
+  }
+  .env-box {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 7.8vh;
+    .env-item {
+      box-sizing: border-box;
+      padding: 9.2vh 4.4vw 14vh 4.4vw;
+      width: 24%;
+      // 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: 10px;
+          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-size: 130px;
+        line-height: 160px;
+        font-weight: 700;
+        letter-spacing: 0px;
+        color: rgba(255, 255, 255, 1);
+        text-align: left;
+        vertical-align: top;
+      }
+      .env-rate {
+        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 {
+    display: flex;
+    overflow: hidden;
+    justify-content: space-between;
+    .logo {
+      width: 150px;
+      img {
+        width: 150px;
+      }
+    }
+    .weather-left {
+      // text-align: right;
+      width: 72%;
+      overflow: hidden;
+      .b-time {
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 180px;
+        width: 270px;
+        border-bottom: 1px solid rgba(255, 255, 255, 1);
+        span {
+          display: block;
+          text-align: center;
+          &:nth-child(1) {
+            opacity: 1;
+            padding-bottom: 20px;
+            /** 文本1 */
+            font-size: 18px;
+            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(2) {
+          margin-right: 10px;
+        }
+      }
+    }
+    .weather-detail {
+      // position: relative;
+      // box-sizing: border-box;
+      float: right;
+      // 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: 24px;
+          font-weight: 400;
+          color: rgba(242, 244, 246, 1);
+          vertical-align: middle;
+        }
+      }
+      .d-bottom {
+        font-size: 24px;
+        font-weight: 400;
+        color: rgba(242, 244, 246, 1);
+        span {
+          &:nth-child(2) {
+            padding-left: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+  

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

@@ -0,0 +1,248 @@
+<template>
+  <div class="rain-box">
+    <div class="rain-content">
+      <!-- <img src="/skImage/内容2.png" alt="" /> -->
+    </div>
+    <div class="rain-cloud">
+      <!-- <img class="cloud1" src="/skImage/云1.png" alt="" /> -->
+      <!-- <img class="cloud2" src="/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>
+  

+ 249 - 0
src/views/weather/snow.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="snow-box">
+    <!-- <div class="snow-content">
+      <img src="/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="/skImage/云1.png" alt="" /></div>
+    <div class="snow-cloud2"><img src="/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>
+.snow-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/weather/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="/skImage/云1.png" alt="" />
+        <img class="cloud4" src="/skImage/云2.png" alt="" />
+      </div>
+      <div class="cloud">
+        <img class="cloud1" src="/skImage/云1.png" alt="" />
+        <img class="cloud2" src="/skImage/云2.png" alt="" />
+      </div>
+      <div class="cloud-2">
+        <img class="cloud1" src="/skImage/云1.png" alt="" />
+        <img class="cloud2" src="/skImage/云2.png" alt="" />
+      </div>
+      <!-- <div class="cloud-2 cloud-3">
+      <img class="cloud1" src="/skImage/云1.png" alt="">
+      <img class="cloud2" src="/skImage/云2.png" alt="">
+    </div> -->
+
+      <div class="sun"><img src="/skImage/sun.png" alt="" /></div>
+      <div class="content">
+        <!-- <img src="/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>
+