Browse Source

feat: pac的入口屏

珍珍 3 weeks ago
parent
commit
04fc7674ba

+ 5 - 0
public/images/pac/HCHO.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.75C6.54822 3.75 3.75 6.54822 3.75 10C3.75 13.4518 6.54822 16.25 10 16.25C13.4518 16.25 16.25 13.4518 16.25 10C16.25 6.54822 13.4518 3.75 10 3.75ZM1.25 10C1.25 5.16751 5.16751 1.25 10 1.25C14.8325 1.25 18.75 5.16751 18.75 10C18.75 14.8325 14.8325 18.75 10 18.75C5.16751 18.75 1.25 14.8325 1.25 10Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5 18.75C20.4289 18.75 18.75 20.4289 18.75 22.5C18.75 24.5711 20.4289 26.25 22.5 26.25C24.5711 26.25 26.25 24.5711 26.25 22.5C26.25 20.4289 24.5711 18.75 22.5 18.75ZM16.25 22.5C16.25 19.0482 19.0482 16.25 22.5 16.25C25.9518 16.25 28.75 19.0482 28.75 22.5C28.75 25.9518 25.9518 28.75 22.5 28.75C19.0482 28.75 16.25 25.9518 16.25 22.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25 7.5C24.3096 7.5 23.75 8.05964 23.75 8.75C23.75 9.44036 24.3096 10 25 10C25.6904 10 26.25 9.44036 26.25 8.75C26.25 8.05964 25.6904 7.5 25 7.5ZM21.25 8.75C21.25 6.67893 22.9289 5 25 5C27.0711 5 28.75 6.67893 28.75 8.75C28.75 10.8211 27.0711 12.5 25 12.5C22.9289 12.5 21.25 10.8211 21.25 8.75Z" fill="white"/>
+</svg>

File diff suppressed because it is too large
+ 4 - 0
public/images/pac/RH.svg


File diff suppressed because it is too large
+ 3 - 0
public/images/pac/Tdb.svg


File diff suppressed because it is too large
+ 6 - 0
public/images/pac/logo.svg


File diff suppressed because it is too large
+ 4 - 0
public/images/pac/pm2.5.svg


BIN
public/images/pac/weather/sunny.png


BIN
src/assets/font/Montserrat/Montserrat-Bold.ttf


+ 11 - 0
src/router/index.ts

@@ -13,6 +13,9 @@ const Record: any = () => import('@/views/portrait/record.vue')
 const MySpace: any = () => import('@/views/envmonitor/mySpace/index.vue')
 const SetMainSpace: any = () => import('@/views/choiceSpace/setMainSpace.vue')
 
+// 吉宝静安中心入口屏幕
+const EntranceScreen: any = () => import('@/views/pac/entranceScreen.vue')
+
 export const constantRoutes: Array<RouteRecordRaw> = [
   {
     path: '/',
@@ -224,6 +227,14 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       hideHeader: true
     }
   },
+  {
+    path: '/entrance-screen',
+    component: EntranceScreen,
+    meta: {
+      title: '入口',
+      hideHeader: true
+    }
+  }
 ]
 
 export const asyncRoutes: Array<RouteRecordRaw> = [

+ 20 - 0
src/styles/font.scss

@@ -1,4 +1,24 @@
 @font-face {
   font-family: "Persagy";
   src: url('../assets/font/Persagy/Persagy-Regular.ttf'); // 找到你自己的字体文件地址
+}
+
+
+@font-face {
+  font-family: "Montserrat";
+  font-weight: 400;
+  src: url('../assets/font/Montserrat/Montserrat-Regular.ttf'); // 找到你自己的字体文件地址
+}
+
+@font-face {
+  font-family: "Montserrat";
+  font-weight: 500;
+  src: url('../assets/font/Montserrat/Montserrat-Medium.ttf'); // 找到你自己的字体文件地址
+}
+
+
+@font-face {
+  font-family: "Montserrat";
+  font-weight: 600;
+  src: url('../assets/font/Montserrat/Montserrat-Bold.ttf'); // 找到你自己的字体文件地址
 }

+ 7 - 2
src/utils/flexible.js

@@ -67,9 +67,14 @@
 
     function refreshRem(){
         var width = docEl.getBoundingClientRect().width;
-        if (width / dpr > 1366) {
-            width = 1366 * dpr;
+        // if (width / dpr > 1366) {
+        //     width = 1366 * dpr;
+        // }
+
+         if (width / dpr > 2160) {
+            width = 2160* dpr;
         }
+        
         var rem = width / 10;
         docEl.style.fontSize = rem + 'px';
         flexible.rem = win.rem = rem;

+ 283 - 0
src/views/pac/entranceScreen.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="enter-main">
+    <div class="top-box">
+      <div class="left">
+        <img class="logo" :src="parseImgUrl('pac', 'logo.svg')" />
+        <img class="weather-icon" :src="parseImgUrl('pac', 'weather/sunny.png')" />
+        <div class="wether-info">
+          <div class="temp">-3 ℃</div>
+          <div class="text">中雨</div>
+        </div>
+        <div class="line"></div>
+        <div class="wether-pm">
+          <div class="value-box">
+            <span>PM 2.5</span>
+            <span>16</span>
+          </div>
+          <div class="value-des">
+            <span>室外空气质量</span>
+            <span>优</span>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="env-box" v-for="item in titleList">
+          <div class="title-box">
+            <img class="icon" :src="item.img" />
+            <div class="title">{{ item.name }}</div>
+          </div>
+          <div class="index-box">
+            <div class="num">{{ item.value }}</div>
+            <div class="text">{{ item.level }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  onBeforeMount,
+  onMounted,
+  ref,
+  onBeforeUnmount,
+} from "vue";
+import { parseImgUrl } from "@/utils";
+export default defineComponent({
+  components: {},
+  setup(props) {
+    const titleList = [
+      {
+        id: 1,
+        name: "PM 2.5",
+        unit: "ug/m³",
+        funcid: "PM2d5",
+        level: "优",
+        value: 10,
+        img: parseImgUrl("pac", "pm2.5.svg"),
+        showNowData: 0, // 0:loading 1:暂无数据 2:暂无服务定制时间
+      },
+      {
+        id: 2,
+        value: 10,
+        name: "甲醛",
+        unit: "mg/㎡",
+        level: "",
+        img: parseImgUrl("pac", "pm2.5.svg"),
+      },
+      {
+        id: 3,
+        value: 10,
+        name: "温度",
+        unit: "%",
+        level: "",
+        funcid: "Tdb,RH",
+        img: parseImgUrl("pac", "pm2.5.svg"),
+      },
+      {
+        id: 3,
+        value: 10,
+        name: "湿度",
+        level: "",
+        unit: "%",
+        funcid: "Tdb,RH",
+        img: parseImgUrl("pac", "pm2.5.svg"),
+      },
+    ];
+    const proxyData = reactive({
+      titleList: titleList,
+      parseImgUrl: parseImgUrl,
+    });
+    onBeforeUnmount(() => {});
+    onMounted(() => {});
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+// 因为像素转换的单位是96, 大屏的设计图是2160px,
+// 所以px大小除/2.25就可自定计算出rem了
+.enter-main {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: rgba(160, 146, 137, 1);
+  .top-box {
+    box-sizing: border-box;
+    // padding: 14.58vh 28vw;
+    padding: 0 2.78vw;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left {
+      display: flex;
+      align-items: center;
+      .logo {
+        width: 34.23px;
+        // height: 46px;
+        margin-right: 26.6px;
+      }
+      .weather-icon {
+        width: 53.4px;
+        // height: 58.6px;
+        margin-right: 23px;
+      }
+      .wether-info {
+        color: #fff;
+        .temp {
+          font-family: Montserrat;
+          font-size: 25.8px;
+          font-weight: 600;
+          line-height: 22px;
+          text-align: left;
+          margin-bottom: 9.8px;
+        }
+        .text {
+          font-family: PingFang SC;
+          font-size: 16.88px;
+          font-weight: 600;
+          line-height: 16.4px;
+          text-align: left;
+        }
+      }
+      .line {
+        height: 46px;
+        width: 1px;
+        background: rgba(216, 185, 164, 1);
+        margin-left: 17.77px;
+        margin-right: 17.77px;
+      }
+      .wether-pm {
+        color: #fff;
+        .value-box {
+          display: flex;
+          align-items: center;
+          font-size: 25.77px;
+          line-height: 22.22px;
+          text-align: left;
+          margin-bottom: 8.88px;
+          span {
+            display: inline-block;
+            &:nth-child(1) {
+              width: 94px;
+              margin-right: 7px;
+              font-family: Montserrat;
+              font-weight: 400;
+            }
+            &:nth-child(2) {
+              font-family: Montserrat;
+              font-weight: 600;
+            }
+          }
+        }
+        .value-des {
+          display: flex;
+          align-items: center;
+          span {
+            display: inline-block;
+            font-family: PingFang SC;
+            font-size: 13.33px;
+            font-weight: 400;
+            line-height: 16.6px;
+            text-align: left;
+            &:nth-child(1){
+              width: 94px;
+              margin-right: 7px;
+            }
+            &:nth-child(2) {
+              font-family: PingFang SC;
+              font-size: 16.88px;
+              font-weight: 600;
+              text-align: left;
+            }
+          }
+        }
+      }
+    }
+    .right {
+      width: 52.7vw;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  .env-box {
+    width: 11.7vw;
+    // height: 70.8vh;
+    color: #fff;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8.88px;
+    background: radial-gradient(
+      103.15% 78.07% at -3.15% 51.76%,
+      #a09289 0%,
+      #9c8c82 100%
+    );
+    .title-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 8px;
+      border-radius: 8.4px 8.4px 0 0;
+      text-align: center;
+      background: radial-gradient(
+        100% 100% at 0% 0%,
+        rgba(255, 255, 255, 0.4) 0%,
+        #a09289 100%
+      );
+      backdrop-filter: blur(18px);
+      -webkit-backdrop-filter: blur(18px);
+      box-shadow: -3px -3px 111px 0px rgba(255, 255, 255, 0.02) inset;
+      border-bottom: 2px solid rgba(255, 255, 255, 0.2);
+      border-image-source: linear-gradient(
+        169.15deg,
+        rgba(255, 255, 255, 0.4) 0%,
+        rgba(238, 237, 237, 0.2) 96.79%
+      );
+      .icon {
+        width: 13.3px;
+        height: 13.3px;
+        margin-right: 4px;
+      }
+      .title {
+        font-family: Montserrat;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 17.78px;
+        text-align: left;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+      }
+    }
+
+    .index-box {
+      padding: 7.55px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .num {
+        font-family: Montserrat;
+        color: #fff;
+        font-size: 20.4px;
+        font-weight: 600;
+        line-height: 26.66px;
+        margin-right: 4px;
+      }
+      .text {
+        font-family: PingFang SC;
+        color: #fff;
+        font-size: 20.4px;
+        font-weight: 600;
+        line-height: 26.66px;
+      }
+    }
+  }
+}
+</style>