feat: 太古ui定制

public/images/taiguv1/envmonitor/active/air-con.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.9233 15.8654V12.4039C21.9233 11.9448 21.7409 11.5046 21.4164 11.18C21.0918 10.8554 20.6515 10.6731 20.1925 10.6731H9.80792C9.34888 10.6731 8.90866 10.8554 8.58407 11.18C8.2595 11.5046 8.07715 11.9448 8.07715 12.4039V15.8654" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.5192 3.75H5.48077C4.52489 3.75 3.75 4.52489 3.75 5.48077V14.1346C3.75 15.0905 4.52489 15.8654 5.48077 15.8654H24.5192C25.4751 15.8654 26.25 15.0905 26.25 14.1346V5.48077C26.25 4.52489 25.4751 3.75 24.5192 3.75Z" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.21094 24.5192H7.38401C8.72225 24.5192 9.80709 23.4343 9.80709 22.0961V20.1923" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.7885 24.5192H22.6155C21.2772 24.5192 20.1924 23.4343 20.1924 22.0961V20.1923" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 26.25V20.1923" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/taiguv1/envmonitor/active/filter.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.33333 15H17.5M2.5 15H5M5 15V16.6667M5 15V13.3334M16.25 10H17.5M2.5 10H13.3333M13.3333 10V11.6667M13.3333 10V8.33337M11.6667 5.00004H17.5M2.5 5.00004H8.33333M8.33333 5.00004V6.66671M8.33333 5.00004V3.33337" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/taiguv1/envmonitor/active/lamp.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2372 23.2625C19.2372 25.6028 17.3405 27.5 15.0002 27.5C12.6599 27.5 10.7632 25.6028 10.7632 23.2625" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.1188 9.85943C17.1188 11.4958 18.0625 12.9867 19.5404 13.6891C23.119 15.3889 25.5933 19.0369 25.5933 23.2625H4.40723C4.40723 19.0369 6.88152 15.3889 10.4601 13.6891C11.9375 12.9873 12.8818 11.4947 12.8818 9.85943V8.85605C12.8818 7.68615 13.8304 6.73755 15.0003 6.73755C16.1701 6.73755 17.1188 7.68615 17.1188 8.85605V9.85943Z" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 2.5V6.73754" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.7632 2.5H19.2372" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/taiguv1/envmonitor/active/screen_cast.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 d="M2.93945 10.625V6.58104C2.93945 5.70742 3.64687 5 4.5205 5H26.3584C27.232 5 27.9395 5.70742 27.9395 6.58104V21.6882C27.9395 22.5618 27.232 23.2692 26.3584 23.2692H16.8747" stroke="#001428" stroke-linecap="round" stroke-linejoin="round" />
+	<path d="M4.26869 17.4202C5.0329 17.3801 5.79721 17.4971 6.51447 17.7638C7.23173 18.0306 7.8862 18.4412 8.43853 18.9709C8.99086 19.5006 9.42869 20.1378 9.72524 20.8432C10.0218 21.5487 10.1709 22.3075 10.1629 23.0727M4.87077 13.2577C6.0935 13.1936 7.3164 13.3807 8.46401 13.8075C9.61163 14.2343 10.6602 14.8924 11.5439 15.7399C12.4277 16.5874 13.1279 17.6066 13.6024 18.7353C14.0768 19.8641 14.3153 21.077 14.3025 22.3013" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round" />
+	<path d="M4.22673 21.3507C3.69934 21.8968 3.71453 22.7671 4.26065 23.2945C4.80678 23.8219 5.67703 23.8067 6.20441 23.2606C6.7318 22.7144 6.71661 21.8442 6.17048 21.3168C5.62436 20.7894 4.75411 20.8046 4.22673 21.3507Z" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

public/images/taiguv1/envmonitor/air-con.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.9233 15.8654V12.4039C21.9233 11.9448 21.7409 11.5046 21.4164 11.18C21.0918 10.8554 20.6515 10.6731 20.1925 10.6731H9.80792C9.34888 10.6731 8.90866 10.8554 8.58407 11.18C8.2595 11.5046 8.07715 11.9448 8.07715 12.4039V15.8654" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.5192 3.75H5.48077C4.52489 3.75 3.75 4.52489 3.75 5.48077V14.1346C3.75 15.0905 4.52489 15.8654 5.48077 15.8654H24.5192C25.4751 15.8654 26.25 15.0905 26.25 14.1346V5.48077C26.25 4.52489 25.4751 3.75 24.5192 3.75Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.21094 24.5192H7.38401C8.72225 24.5192 9.80709 23.4343 9.80709 22.0961V20.1922" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.7885 24.5192H22.6155C21.2772 24.5192 20.1924 23.4343 20.1924 22.0961V20.1922" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 26.2499V20.1922" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/taiguv1/envmonitor/filter.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.33333 15H17.5M2.5 15H5M5 15V16.6667M5 15V13.3333M16.25 10H17.5M2.5 10H13.3333M13.3333 10V11.6667M13.3333 10V8.33334M11.6667 5.00001H17.5M2.5 5.00001H8.33333M8.33333 5.00001V6.66668M8.33333 5.00001V3.33334" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/taiguv1/envmonitor/lamp.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2367 21.2625C16.2367 23.6028 14.34 25.5 11.9997 25.5C9.65936 25.5 7.7627 23.6028 7.7627 21.2625" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.1183 7.8594C14.1183 9.49573 15.062 10.9867 16.5399 11.6891C20.1185 13.3889 22.5928 17.0368 22.5928 21.2624H1.40674C1.40674 17.0368 3.88103 13.3889 7.45959 11.6891C8.937 10.9872 9.88127 9.49465 9.88127 7.8594V6.85602C9.88127 5.68612 10.8299 4.73752 11.9998 4.73752C13.1697 4.73752 14.1183 5.68612 14.1183 6.85602V7.8594Z" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 0.5V4.73754" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.7627 0.5H16.2367" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/taiguv1/envmonitor/meeting.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9375 5C15.9375 4.44772 15.4898 4 14.9375 4H3.9375C3.38522 4 2.9375 4.44772 2.9375 5V16.0003L6.27051 13.2308C6.45005 13.0817 6.67674 13 6.91016 13H14.9375C15.4898 13 15.9375 12.5523 15.9375 12V8V5Z" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.0625 8H20.0625C20.6148 8 21.0625 8.44772 21.0625 9V20L17.7295 17.231C17.55 17.0818 17.3233 17 17.0898 17H9.0625C8.51021 17 8.0625 16.5523 8.0625 16V15" stroke="#8E0003" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/taiguv1/envmonitor/minus.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33301 10.5H16.6663" stroke="#001428" stroke-linecap="round"/>
+</svg>

public/images/taiguv1/envmonitor/plus.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99967 3.83337V17.1667M3.33301 10.5H16.6663" stroke="#001428" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/taiguv1/envmonitor/projector.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 9.96902H2.87575C2.39247 9.96902 2 10.3605 2 10.8448V16.8731C2 17.3564 2.39146 17.7489 2.87575 17.7489H21.1243C21.6075 17.7489 22 17.3574 22 16.8731V10.8448C22 10.3615 21.6085 9.96902 21.1243 9.96902H14.5" stroke="white" stroke-opacity="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.7165 11.9778H15.6758" stroke="white" stroke-opacity="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.02002 6.68094L5.16919 7.83011" stroke="white" stroke-opacity="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.0212 6.74138L13.873 7.88954" stroke="white" stroke-opacity="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.53369 4.43298V6.05736" stroke="white" stroke-opacity="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5208 16.0115C11.5769 16.0115 13.2437 14.3447 13.2437 12.2885C13.2437 10.2324 11.5769 8.5656 9.5208 8.5656C7.46467 8.5656 5.79785 10.2324 5.79785 12.2885C5.79785 14.3447 7.46467 16.0115 9.5208 16.0115Z" stroke="white" stroke-opacity="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.56335 18.5035V18.7668C5.56335 19.2087 5.20518 19.5669 4.76326 19.5669H3.70389C3.26198 19.5669 2.90381 19.2087 2.90381 18.7668V18.5035" stroke="white" stroke-opacity="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.0951 18.5035V18.7668C21.0951 19.2087 20.7369 19.5669 20.295 19.5669H19.2356C18.7937 19.5669 18.4355 19.2087 18.4355 18.7668V18.5035" stroke="white" stroke-opacity="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/taiguv1/envmonitor/screen_cast.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 d="M2.93945 10.625V6.58104C2.93945 5.70742 3.64687 5 4.5205 5H26.3584C27.232 5 27.9395 5.70742 27.9395 6.58104V21.6882C27.9395 22.5618 27.232 23.2692 26.3584 23.2692H16.8747" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.26869 17.4201C5.0329 17.3801 5.79721 17.4971 6.51447 17.7638C7.23173 18.0305 7.8862 18.4412 8.43853 18.9709C8.99086 19.5005 9.42869 20.1377 9.72524 20.8432C10.0218 21.5487 10.1709 22.3075 10.1629 23.0727M4.87077 13.2576C6.0935 13.1936 7.3164 13.3807 8.46401 13.8075C9.61163 14.2343 10.6602 14.8924 11.5439 15.7399C12.4277 16.5873 13.1279 17.6066 13.6024 18.7353C14.0768 19.864 14.3153 21.0769 14.3025 22.3013" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.22673 21.3507C3.69934 21.8968 3.71453 22.7671 4.26065 23.2945C4.80678 23.8219 5.67703 23.8067 6.20441 23.2606C6.7318 22.7144 6.71661 21.8442 6.17048 21.3168C5.62436 20.7894 4.75411 20.8046 4.22673 21.3507Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/taiguv1/envmonitor/stop.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.3846 8H8.61538C8.27552 8 8 8.27552 8 8.61538V15.3846C8 15.7245 8.27552 16 8.61538 16H15.3846C15.7245 16 16 15.7245 16 15.3846V8.61538C16 8.27552 15.7245 8 15.3846 8Z" stroke="white" stroke-opacity="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="12" cy="12" r="9" stroke="white" stroke-opacity="0.6"/>
+</svg>

public/images/taiguv1/envmonitor/volumn.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.0669 11.9906C25.7644 12.834 26.1222 13.9073 26.0702 15.0006C26.1222 16.0939 25.7644 17.1672 25.0669 18.0106" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.0167 10.9873H7.00669C5.91371 10.9873 5 11.901 5 12.994V17.0073C5 18.1003 5.91371 19.014 7.00669 19.014H10.0167L17.8629 24.6528C19.1578 25.5487 21.0184 24.6054 21.0535 23.0273V6.97386C21.0911 5.39492 19.342 4.44999 18.0435 5.34844L10.0167 10.9873Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/screen cast.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 d="M2.93945 10.625V6.58104C2.93945 5.70742 3.64687 5 4.5205 5H26.3584C27.232 5 27.9395 5.70742 27.9395 6.58104V21.6882C27.9395 22.5618 27.232 23.2692 26.3584 23.2692H16.8747" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.26869 17.4201C5.0329 17.3801 5.79721 17.4971 6.51447 17.7638C7.23173 18.0305 7.8862 18.4412 8.43853 18.9709C8.99086 19.5005 9.42869 20.1377 9.72524 20.8432C10.0218 21.5487 10.1709 22.3075 10.1629 23.0727M4.87077 13.2576C6.0935 13.1936 7.3164 13.3807 8.46401 13.8075C9.61163 14.2343 10.6602 14.8924 11.5439 15.7399C12.4277 16.5873 13.1279 17.6066 13.6024 18.7353C14.0768 19.864 14.3153 21.0769 14.3025 22.3013" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.22673 21.3507C3.69934 21.8968 3.71453 22.7671 4.26065 23.2945C4.80678 23.8219 5.67703 23.8067 6.20441 23.2606C6.7318 22.7144 6.71661 21.8442 6.17048 21.3168C5.62436 20.7894 4.75411 20.8046 4.22673 21.3507Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/router/index.ts

@@ -1,176 +1,194 @@
-import { createRouter, Router, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router'
+import {
+  createRouter,
+  Router,
+  createWebHashHistory,
+  createWebHistory,
+  RouteRecordRaw
+} from "vue-router";
 
-const Home: any = () => import('@/views/home/index.vue')
-const Envmonitor: any = () => import('@/views/envmonitor/index.vue')
-const EnvmonitorDetail: any = () => import('@/views/envmonitor/detail.vue')
-const UserPortrait: any = () => import('@/views/portrait/index.vue')
-const EnergySavig: any = () => import('@/views/portrait/energySavig.vue')
-const EnergyDetail: any = () => import('@/views/portrait/energyDetail.vue')
-const TodayEnergyDetail: any = () => import('@/views/portrait/todayEnergyDetail.vue')
-const EnergyRank: any = () => import('@/views/portrait/energyRank.vue')
-const IntegralDesc: any = () => import('@/views/portrait/integralDesc.vue')
-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 Home: any = () => import("@/views/home/index.vue");
+const Envmonitor: any = () => import("@/views/envmonitor/index.vue");
+const EnvmonitorDetail: any = () => import("@/views/envmonitor/detail.vue");
+const UserPortrait: any = () => import("@/views/portrait/index.vue");
+const EnergySavig: any = () => import("@/views/portrait/energySavig.vue");
+const EnergyDetail: any = () => import("@/views/portrait/energyDetail.vue");
+const TodayEnergyDetail: any = () =>
+  import("@/views/portrait/todayEnergyDetail.vue");
+const EnergyRank: any = () => import("@/views/portrait/energyRank.vue");
+const IntegralDesc: any = () => import("@/views/portrait/integralDesc.vue");
+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 TaiguIndex: any = () => import("@/views/envmonitor/taiguv1/index.vue");
 
 export const constantRoutes: Array<RouteRecordRaw> = [
   {
-    path: '/',
-    redirect: '/home',
+    path: "/",
+    redirect: "/home",
     meta: {
-      title: '首页',
+      title: "首页",
       hideHeader: true
     }
   },
   {
-    path: '/home',
+    path: "/home",
     component: Home,
-    name: 'home',
+    name: "home",
     meta: {
-      title: '首页',
+      title: "首页",
       hideHeader: true
     }
   },
   {
-    path: '/envmonitor',
+    path: "/taigu/index",
+    component: TaiguIndex,
+    name: "taiguHome",
+    meta: {
+      title: "会议室控制",
+      color: "#F5F5F5",
+      hideHeader: true
+    }
+  },
+  {
+    path: "/envmonitor",
     component: Envmonitor,
     // component: resolve => require(['@/views/envmonitor/index.vue'], resolve),
-    name: 'envmonitor',
+    name: "envmonitor",
     meta: {
-      title: '环境控制',
+      title: "环境控制",
       hideHeader: true
     }
   },
   {
-    path: '/envmonitor-detail',
+    path: "/envmonitor-detail",
     // component: () => import('@/views/envmonitor/detail.vue'),
     component: EnvmonitorDetail,
-    name: 'envmonitorDetail',
+    name: "envmonitorDetail",
     meta: {
-      title: '环境详情',
-      color: '#fff',
+      title: "环境详情",
+      color: "#fff",
       hideHeader: true
     }
   },
   {
-    path: '/user-portrait',
+    path: "/user-portrait",
     // component: () => import('@/views/portrait/index.vue'),
     component: UserPortrait,
-    name: 'userPortrait',
+    name: "userPortrait",
     meta: {
-      title: '节能评分',
-      color: '#FFE823',
+      title: "节能评分",
+      color: "#FFE823",
       hideHeader: true
     }
   },
   {
-    path: '/energy-savig',
+    path: "/energy-savig",
     // component: () => import('@/views/portrait/energySavig.vue'),
     component: EnergySavig,
-    name: 'energySavig',
+    name: "energySavig",
     meta: {
-      title: '我的节能',
-      color: '#ECEFF4',
+      title: "我的节能",
+      color: "#ECEFF4",
       hideHeader: true
     }
   },
   {
-    path: '/energy-detail',
+    path: "/energy-detail",
     // component: () => import('@/views/portrait/energyDetail.vue'),
     component: EnergyDetail,
-    name: 'energyDetail',
+    name: "energyDetail",
     meta: {
-      title: '我的节能详情 ',
-      color: '#E5E5E5',
+      title: "我的节能详情 ",
+      color: "#E5E5E5",
       hideHeader: true
     }
   },
   {
-    path: '/today-energy-detail',
+    path: "/today-energy-detail",
     // component: () => import('@/views/portrait/todayEnergyDetail.vue'),
     component: TodayEnergyDetail,
-    name: 'todayEnergyDetail',
+    name: "todayEnergyDetail",
     meta: {
-      title: '今天新增 ',
-      color: '#E5E5E5',
+      title: "今天新增 ",
+      color: "#E5E5E5",
       hideHeader: true
     }
   },
   {
-    path: '/energy-rank',
+    path: "/energy-rank",
     // component: () => import('@/views/portrait/energyRank.vue'),
     component: EnergyRank,
-    name: 'energyRank',
+    name: "energyRank",
     meta: {
-      title: '节能排名 ',
-      color: '#E5E5E5',
+      title: "节能排名 ",
+      color: "#E5E5E5",
       hideHeader: true
     }
   },
   {
-    path: '/integral-desc',
+    path: "/integral-desc",
     // component: () => import('@/views/portrait/integralDesc.vue'),
     component: IntegralDesc,
-    name: 'integralDesc',
+    name: "integralDesc",
     meta: {
-      title: '积分说明 ',
-      color: '#E5E5E5',
+      title: "积分说明 ",
+      color: "#E5E5E5",
       hideHeader: true
     }
   },
   {
-    path: '/record',
+    path: "/record",
     // component: () => import('@/views/portrait/record.vue'),
     component: Record,
-    name: 'Record',
+    name: "Record",
     meta: {
-      title: '调节记录 ',
-      color: '#E5E5E5',
+      title: "调节记录 ",
+      color: "#E5E5E5",
       hideHeader: true
     }
   },
   {
-    path: '/mySpace',
+    path: "/mySpace",
     // component: () => import('@/views/envmonitor/mySpace/index.vue'),
     component: MySpace,
-    name: 'mySpace',
+    name: "mySpace",
     meta: {
-      title: '切换空间',
-      color: '#f7f8fa',
+      title: "切换空间",
+      color: "#f7f8fa",
       hideHeader: true
     }
   },
   {
-    path: '/choice-project',
-    component: () => import('@/views/choiceSpace/choiceProject.vue'),
-    name: 'choiceProject',
+    path: "/choice-project",
+    component: () => import("@/views/choiceSpace/choiceProject.vue"),
+    name: "choiceProject",
     meta: {
-      title: '选择所属公司名称',
+      title: "选择所属公司名称",
       toName: "home",
-      color: '#fff',
+      color: "#fff",
       hideHeader: false,
       showLogoOut: true
     }
   },
   {
-    path: '/choice-space',
-    component: () => import('@/views/choiceSpace/choiceSpace.vue'),
-    name: 'choiceSpace',
+    path: "/choice-space",
+    component: () => import("@/views/choiceSpace/choiceSpace.vue"),
+    name: "choiceSpace",
     meta: {
-      title: '选择办公空间',
+      title: "选择办公空间",
       // toName: "choiceProject",
-      color: '#F5F5F5',
+      color: "#F5F5F5",
       hideHeader: false
     }
   },
   {
-    path: '/set-main-space',
+    path: "/set-main-space",
     component: SetMainSpace,
-    name: 'setMainSpace',
+    name: "setMainSpace",
     meta: {
-      title: '设置主空间',
-      title1: '左滑动可删除空间',
-      color: '#F5F5F5',
+      title: "设置主空间",
+      title1: "左滑动可删除空间",
+      color: "#F5F5F5",
       hideHeader: false
     }
   },
@@ -185,12 +203,12 @@ export const constantRoutes: Array<RouteRecordRaw> = [
   //   }
   // },
   {
-    path: '/map-data-util',
-    component: () => import('@/views/mapData/indexOld.vue'),
-    name: 'mapDataold',
+    path: "/map-data-util",
+    component: () => import("@/views/mapData/indexOld.vue"),
+    name: "mapDataold",
     meta: {
-      title: '处理地图数据',
-      color: '#F5F5F5',
+      title: "处理地图数据",
+      color: "#F5F5F5",
       hideHeader: false
     }
   },
@@ -215,28 +233,28 @@ export const constantRoutes: Array<RouteRecordRaw> = [
   //   }
   // },
   {
-    path: '/error',
-    component: () => import('@/views/error/index.vue'),
-    name: 'error',
+    path: "/error",
+    component: () => import("@/views/error/index.vue"),
+    name: "error",
     meta: {
-      title: '错误页面',
-      color: '#F5F5F5',
+      title: "错误页面",
+      color: "#F5F5F5",
       hideHeader: true
     }
-  },
-]
+  }
+];
 
 export const asyncRoutes: Array<RouteRecordRaw> = [
   // ...permissionModules
-]
+];
 const router = createRouter({
-  history: createWebHistory('/sgipad/'),
+  history: createWebHistory("/sgipad/"),
   routes: constantRoutes
-})
+});
 
 export function resetRouter() {
   const newRouter = router;
-  (router as any).matcher = (newRouter as any).matcher // reset router
+  (router as any).matcher = (newRouter as any).matcher; // reset router
 }
 
-export default router
+export default router;

src/styles/font.scss

@@ -1,4 +1,15 @@
 @font-face {
   font-family: "Persagy";
-  src: url('../assets/font/Persagy/Persagy-Regular.ttf'); // 找到你自己的字体文件地址
-}
+  src: url("../assets/font/Persagy/Persagy-Regular.ttf"); // 找到你自己的字体文件地址
+}
+
+@font-face {
+  font-family: "Jost";
+  font-weight: 400;
+  src: url("../assets/font/Jost/Jost-Regular.otf"); // 找到你自己的字体文件地址
+}
+@font-face {
+  font-family: "Jost";
+  font-weight: 300;
+  src: url("../assets/font/Jost/Jost-300-Light.otf"); // 找到你自己的字体文件地址
+}

src/views/envmonitor/taiguv1/components/Air/index copy.vue

@@ -0,0 +1,695 @@
+<template>
+  <div class="air">
+    <div class="air-top">
+      <Switch
+        class="switch-btn"
+        :size="23"
+        :loading="loadingAir || firstLoadingAir"
+        :disabled="!userIsControl || loadingAir || firstLoadingAir || disable"
+        inactive-color="rgba(196, 196, 196, 0.4)"
+        @click="airChange"
+        :model-value="airData.isOpen"
+        v-if="hasAir"
+      />
+    </div>
+    <!--温度调节-->
+    <div class="air-control">
+      <div class="control-title">温度调节</div>
+      <div class="btn-box">
+        <div class="control-btn mr20">
+          <img :src="parseImgUrl('envmonitor', 'arrow-top.png')" alt="" />
+        </div>
+        <div class="control-btn">
+          <img :src="parseImgUrl('envmonitor', 'arrow-down.png')" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="air-control">
+      <div class="control-title">风量调节</div>
+      <div class="btn-box">
+        <div class="control-btn mr20">
+          <img class="temp-img" :src="parseImgUrl('envmonitor', 'fengshan.png')" alt="" />
+        </div>
+        <div class="control-btn">
+          <img class="temp-img" :src="parseImgUrl('envmonitor', 'wendu.png')" alt="" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  toRefs,
+  computed,
+  watch,
+  onUnmounted,
+  onBeforeMount,
+  onBeforeUnmount,
+} from "vue";
+import { Switch, Dialog, Loading, Toast } from "vant";
+import {
+  changeTempHttp,
+  getEquipmentListHttp,
+  getFeedbackDocumentsHttp,
+} from "@/apis/envmonitor";
+import { parseImgUrl } from "@/utils";
+import any = jasmine.any;
+
+export default defineComponent({
+  props: {
+    temperature: {
+      // 空调基本信息
+      type: Number,
+      default: () => 0,
+    },
+    hasAir: {
+      // 有无空调
+      type: Boolean,
+      default: () => false,
+    },
+    airVolumes: {
+      // 风量信息
+      type: Array,
+      default: () => [],
+    },
+    projectId: {
+      type: String,
+      default: () => "",
+    },
+    spaceId: {
+      type: String,
+      default: () => "",
+    },
+    userIsControl: {
+      type: Boolean,
+      default: () => false,
+    },
+    forceOverTimeFlag: {
+      type: Boolean,
+      default: () => false,
+    },
+    disable: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  components: {
+    Switch,
+    [Dialog.Component.name]: Dialog.Component,
+    Loading,
+  },
+  setup(props, contx) {
+    const propsVal = props;
+    let airData: any = {
+      avg: "", // 算法调节温度（目标值）
+      icon: 1, // 固定框文案ID 7 为关机，其它都是开机
+      spaceStatus: "", // 固定框文案展示
+      notice: "", // 弹框文案展示
+      mode: 0, //  模式
+      tempSet: 0, // 温度
+      isOpen: false, // 空调开关 true 是开
+    };
+    const feedbackTimer: any = null;
+    const airTimer: any = null;
+    const domAirOpeen: any = false;
+    const proxyData = reactive({
+      loadingAir: false,
+      distroyFlag: false,
+      temperature: props.temperature,
+      userIsControl: props.userIsControl,
+      forceOverTimeFlag: props.forceOverTimeFlag,
+      firstLoadingAir: true,
+      spaceId: props.spaceId,
+      domAirOpeen: domAirOpeen,
+      feedbackTimer: feedbackTimer,
+      parseImgUrl: parseImgUrl,
+      airData: airData,
+      modeName: "",
+      showAirVolumeBtn: false, // 是否展示风量调节按钮
+      showDialog: false,
+      airTimer: airTimer,
+      airSetText: {
+        // 空调反馈文案
+        notice: "",
+        remark: [],
+        nowImg: "",
+        toWhere: "",
+        designTemperature: 0,
+      },
+      // 格式化模式
+      formateModel(model: any) {
+        if (model) {
+          if (model === 1) {
+            proxyData.modeName = "制冷";
+          } else if (model === 2) {
+            proxyData.modeName = "制热";
+          } else if (model === 3) {
+            proxyData.modeName = "通风";
+          } else if (model === 4) {
+            proxyData.modeName = "除湿";
+          } else {
+            proxyData.modeName = "";
+          }
+        } else {
+          proxyData.modeName = "";
+        }
+      },
+      // 获取设备类型(ACATVI)
+      getEquipmentListHttp() {
+        let params = {
+          spaceId: proxyData.spaceId,
+        };
+        proxyData.showAirVolumeBtn = false;
+        let flag: any = true;
+        getEquipmentListHttp(params).then((res) => {
+          let resData: any = res;
+          let data: any = resData ? resData.data : [];
+          if (data && data.length) {
+            for (let i = 0; i < data.length; i++) {
+              let item: any = data[i];
+              if (item.equipmentCategory === "ACATVI") {
+                // 多联机不展示风量调整
+                proxyData.showAirVolumeBtn = false;
+                flag = false;
+                break;
+              }
+            }
+            if (flag) {
+              proxyData.showAirVolumeBtn = true;
+            }
+          }
+        });
+      },
+      // 定时获取空调状态
+      getAirInfoToTimer(timerLong: any = 3000) {
+        if (proxyData.airTimer) {
+          clearTimeout(proxyData.airTimer);
+        }
+        proxyData.airTimer = setTimeout(function () {
+          if (!proxyData.distroyFlag) {
+            proxyData.getAirInfo();
+          }
+        }, timerLong);
+      },
+      // 定时调文案的接口
+      getFeedbackTimer(btnType: any, id: any) {
+        clearTimeout(proxyData.airTimer);
+        proxyData.airTimer = null;
+        proxyData.feedbackTimer = setTimeout(() => {
+          proxyData.getAirInfo("feedback", btnType, id, false); // 调节反馈文案
+        }, 3000);
+      },
+      // 关闭空调的按钮点击的loading状态
+      closeLoading() {
+        let num: any = 0;
+        let interval: any = setInterval(() => {
+          if (num > 15 || proxyData.domAirOpeen === proxyData.airData.isOpen) {
+            proxyData.loadingAir = false;
+            clearInterval(interval);
+          }
+          num++;
+        }, 1000);
+      },
+      getAirInfo(
+        type: string = "",
+        btnType: string = "",
+        feedbackId: any = "",
+        isTimer: boolean = true
+      ) {
+        let paramObj: any = {
+          projectId: propsVal.projectId, // 项目id
+          objectId: proxyData.spaceId, // 空间id
+        };
+
+        if (type === "feedback") {
+          paramObj.id = feedbackId;
+        }
+        console.log("paramObj===");
+        getFeedbackDocumentsHttp(paramObj)
+          .then((res) => {
+            const resData: any = res;
+            if (type !== "feedback") {
+              if (resData) {
+                proxyData.airData = resData;
+                proxyData.formateModel(proxyData.airData.mode);
+                contx.emit("updateAirTemp", proxyData.airData.tempSet);
+                if (proxyData.airData.icon && proxyData.airData.icon === 7) {
+                  proxyData.airData.isOpen = false;
+                  proxyData.airData.airImg = parseImgUrl(
+                    "page-officehome",
+                    "air_close.png"
+                  );
+                } else {
+                  if (proxyData.airData.icon && proxyData.airData.icon !== 6) {
+                    proxyData.airData.isOpen = true;
+                    proxyData.airData.airImg = parseImgUrl(
+                      "page-officehome",
+                      "openair.png"
+                    );
+                  }
+                }
+              }
+            }
+            //   弹窗
+            if (type === "feedback") {
+              if (resData.notice) {
+                proxyData.airSetText.notice = resData.notice;
+                if (resData.remark && resData.remark.length) {
+                  proxyData.airSetText.remark = resData.remark.split("*");
+                }
+                if (proxyData.feedbackTimer) {
+                  clearTimeout(proxyData.feedbackTimer); // 拿到反馈文案清除定时器
+                  proxyData.getAirInfoToTimer();
+                }
+              } else {
+                proxyData.getFeedbackTimer(btnType, feedbackId);
+              }
+            } else {
+              proxyData.getAirInfoToTimer();
+            }
+            proxyData.firstLoadingAir = false;
+          })
+          .catch(() => {
+            proxyData.getAirInfoToTimer();
+            proxyData.firstLoadingAir = false;
+            proxyData.airData.airImg = parseImgUrl("page-officehome", "air_close.png");
+          });
+      },
+      airChange() {
+        if (props.disable) {
+          return;
+        }
+        // 先不更新状态等确认框弹出后再更新状
+        if (proxyData.userIsControl) {
+          if (!proxyData.loadingAir) {
+            proxyData.airComfir();
+          } else {
+            Toast("指令正在下发中，勿重复操作！");
+          }
+        } else {
+          Toast("您没有当前空间的控制权限！");
+        }
+      },
+      // 确认
+      airComfir() {
+        const message = proxyData.airData.isOpen ? "要关闭空调吗？" : "要开启空调吗？";
+        const confirmBtnText = proxyData.airData.isOpen ? "关闭" : "开启";
+        Dialog.confirm({
+          cancelButtonText: "取消",
+          confirmButtonText: confirmBtnText,
+          confirmButtonColor: "$elActiveColor",
+          message: message,
+        })
+          .then(() => {
+            // 操作空调
+            const domAirOpen = !proxyData.airData.isOpen;
+            if (proxyData.forceOverTimeFlag && domAirOpen) {
+              //需要强制加班
+              contx.emit("triggerWork");
+              return;
+            }
+            const itemId = domAirOpen ? 12 : 10; // 12 开启 10关闭
+            proxyData.domAirOpeen = domAirOpen;
+            let btnTypeDetail = "";
+            if (itemId == 12) {
+              btnTypeDetail = "openAir";
+            } else {
+              btnTypeDetail = "closeAir";
+            }
+            proxyData.loadingAir = true;
+            proxyData.closeLoading();
+            proxyData.changeAir(itemId, "sw", btnTypeDetail);
+          })
+          .catch(() => {
+            // on cancel
+          });
+      },
+      // 切换散会的时候手动关闭空调()
+      closeScenarioAir() {
+        proxyData.changeAir(10, "sw", "closeAir");
+      },
+      // 更新空调开关状态
+      updatAirStatus(btnType: string) {
+        // 开启空调后手动调一下状态更新接口
+        if (btnType === "sw") {
+          proxyData.getAirInfo("", "", "", false);
+        }
+      },
+      // 更新
+      updateAirText(btnType: string, val: any) {
+        if (btnType !== "sw") {
+          proxyData.airSetText.designTemperature = val.designTemperature; // 目标温度
+          proxyData.airSetText.toWhere = val.toWhere;
+          if (proxyData.airSetText.toWhere == "toCold") {
+            proxyData.airSetText.nowImg = "dialog_cooling.svg";
+          } else if (proxyData.airSetText.toWhere == "toWarm") {
+            proxyData.airSetText.nowImg = "dialog_warmUp.svg";
+          } else {
+            proxyData.airSetText.nowImg = "icon_wind.svg";
+          }
+        }
+      },
+      // 展示空调反馈弹窗¬
+      showAirConditioning(btnType: string, btnTypeDetail: string) {
+        // 空调温度和风量调整的时候展示弹窗
+        if (btnType !== "sw") {
+          proxyData.showDialog = true;
+          // 调整空调温度接口
+          const defaultAirText: any = {
+            toWhere: btnTypeDetail,
+            designTemperature: 0,
+          };
+          proxyData.updateAirText(btnType, defaultAirText);
+        }
+      },
+      // 关闭弹窗
+      closeDialog() {
+        if (proxyData.feedbackTimer) {
+          clearInterval(proxyData.feedbackTimer); // 拿到反馈文案清除定时器
+          proxyData.feedbackTimer = null;
+        }
+        proxyData.getAirInfoToTimer();
+        proxyData.showDialog = false;
+      },
+      changeAir(itemId: number, btnType: string, btnTypeDetail: string) {
+        /**
+         * 缺少的逻辑：
+         * 1.设备位置判断
+         * 2.空调温度调整的反馈文案
+         */
+        // 温度切换的时候调整文案
+        proxyData.airSetText.notice = "";
+        proxyData.airSetText.remark = [];
+        const paramObj = {
+          projectId: propsVal.projectId, // 项目id
+          objectId: proxyData.spaceId, // 空间id
+          valueType: 1, // 固定为1
+          itemId: itemId, //    12 开启 10关闭  4 调低温  2 调高温 5 调小风量 6 调大风量
+        };
+        // 空调温度和风量调整的时候展示弹窗
+        proxyData.showAirConditioning(btnType, btnTypeDetail);
+        changeTempHttp(paramObj)
+          .then((res) => {
+            let resData: any = res;
+            // 开启和关闭空调之后手动
+            // proxyData.updatAirStatus(btnType)
+            // 调整温度和风量的时候修改文案
+            let airText = {
+              toWhere: btnTypeDetail,
+              designTemperature: resData.designTemperature,
+            };
+            proxyData.updateAirText(btnType, airText);
+            // 改变温度和风量的时候给弹窗设置文案
+            if (btnType !== "sw") {
+              // debugger
+              if (resData.notice) {
+                proxyData.airSetText.notice = resData.notice;
+                if (resData.remark && resData.remark.length) {
+                  proxyData.airSetText.remark = resData.remark.split("*");
+                }
+              } else {
+                proxyData.getFeedbackTimer(btnType, resData.id);
+              }
+            }
+          })
+          .catch(() => {
+            proxyData.loadingAir = false;
+          });
+      },
+    });
+    watch(
+      [() => props, () => props.spaceId],
+      (newProps: any, oldProps: any) => {
+        if (newProps[1] && newProps[1] != oldProps[1]) {
+          // 空间id改变的重新获取值调用接口
+          // 定时调空间信息
+          proxyData.spaceId = newProps[1];
+          proxyData.distroyFlag = false;
+          // proxyData.getAirInfoToTimer(0);
+          proxyData.getAirInfo();
+          // proxyData.getEquipmentListHttp();
+        }
+        if (newProps[0]) {
+          proxyData.temperature = newProps[0].temperature;
+          proxyData.userIsControl = newProps[0].userIsControl;
+          proxyData.forceOverTimeFlag = newProps[0].forceOverTimeFlag;
+        }
+      },
+      {
+        deep: false,
+        immediate: true,
+      }
+    );
+    onBeforeUnmount(() => {
+      proxyData.distroyFlag = true;
+      if (proxyData.airTimer) {
+        clearTimeout(proxyData.airTimer);
+        proxyData.airTimer = null;
+      }
+      if (proxyData.feedbackTimer) {
+        clearTimeout(proxyData.feedbackTimer);
+        proxyData.feedbackTimer = null;
+      }
+    });
+    onMounted(() => {
+      // 获取空调信息
+      proxyData.firstLoadingAir = true;
+      proxyData.distroyFlag = false;
+      proxyData.getAirInfo();
+      proxyData.getEquipmentListHttp();
+    });
+    const airRunImg = computed(() => {
+      let imgStr: string = "";
+      switch (proxyData.airData.icon) {
+        case 1:
+          imgStr = parseImgUrl("page-officehome", "temp-keep.png");
+          break;
+        case 2:
+          imgStr = parseImgUrl("page-officehome", "temp_cold.svg");
+          break;
+        case 3:
+          imgStr = parseImgUrl("page-officehome", "temp_sun.png");
+          break;
+        default:
+          imgStr = "";
+          break;
+      }
+      return imgStr;
+    });
+    return {
+      airRunImg,
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.air {
+  box-sizing: border-box;
+  width: 364px;
+  height: 232px;
+  border-radius: 24px 24px 24px 50px;
+  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(40px);
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.air-top {
+  padding-left: 20px;
+  padding-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.air-control {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  padding-left: 28px;
+  padding-right: 15px;
+  border-top: 1px solid rgba(196, 196, 196, 0.4);
+
+  .control-title {
+    flex: 1;
+    line-height: 42px;
+    font-weight: 500;
+    font-size: 12px;
+    color: #c4c4c4;
+  }
+
+  .btn-box {
+    flex: 1;
+    text-align: right;
+  }
+
+  .control-btn {
+    display: inline-block;
+    vertical-align: middle;
+    width: 42px;
+    height: 42px;
+    text-align: center;
+    border-radius: 50%;
+    background: rgba(196, 196, 196, 0.2);
+
+    img {
+      width: 13px;
+      height: 17px;
+      margin: 0 auto;
+      margin-top: 12.5px;
+    }
+
+    .temp-img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+.dialog-width {
+  width: 280px !important;
+}
+
+.air-dialog-content {
+  position: relative;
+  width: 100%;
+  height: 340px;
+
+  .dialog-top {
+    position: relative;
+    height: 70px;
+    background: #f3f3f3;
+
+    .img-greey {
+      background: #c4c4c4;
+    }
+
+    .img-blue {
+      background: $elActiveColor;
+    }
+
+    .img-red {
+      background: #e5574f;
+    }
+
+    img {
+      box-sizing: border-box;
+      border-radius: 50%;
+      position: absolute;
+      left: 50%;
+      width: 70px;
+      height: 70px;
+      padding: 17px;
+      transform: translateX(-50%);
+      top: 15px;
+    }
+  }
+}
+
+.dialog-text {
+  padding-top: 52px;
+  text-align: center;
+
+  .air-temp-num {
+    font-family: Persagy;
+    display: inline-block;
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 29px;
+    color: rgba(20, 0, 80, 1);
+
+    &.arrow-cooling {
+      color: $elActiveColor;
+      margin: 0 30px;
+      margin-bottom: 70px;
+    }
+
+    &.arrow-warn {
+      color: rgba(229, 87, 79, 1);
+      margin: 0 30px;
+      margin-bottom: 70px;
+    }
+  }
+
+  .air-temp-num-load {
+    display: inline-block;
+  }
+
+  .air-notice {
+    padding-top: 10px;
+    padding-left: 48px;
+    padding-right: 48px;
+    text-align: center;
+    // display: flex;
+    justify-content: center;
+    font-family: PingFang SC;
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 21px;
+    color: rgba(77, 82, 98, 1);
+    span {
+      display: block;
+      padding-bottom: 5px;
+    }
+  }
+
+  .air-temp-load {
+    padding-top: 25px;
+  }
+
+  .air-body-item-num {
+    height: 50px;
+  }
+}
+
+.dialog-btns {
+  position: absolute;
+  left: 50%;
+  bottom: 30px;
+  transform: translateX(-50%);
+  text-align: center;
+  margin: 0 auto;
+  width: 88px;
+  height: 46px;
+  line-height: 1;
+  color: #4d5262;
+  background: #ffffff;
+  border: 1px solid #c4c4c4;
+  border-radius: 30px;
+  cursor: pointer;
+
+  span {
+    height: 46px;
+    line-height: 46px;
+    display: inline-block;
+  }
+}
+</style>
+<style lang="scss">
+.air-dialog-content {
+  .van-button_text {
+    color: $elActiveColor;
+  }
+}
+
+.air {
+  .van-loading__spinner {
+    color: $elActiveColor !important;
+  }
+
+  .van-switch__loading {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    line-height: 1;
+  }
+
+  .van-switch--disabled {
+    opacity: 0.5;
+  }
+}
+</style>

src/views/envmonitor/taiguv1/components/Air/index.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="volumn-box" :class="isOpen ? 'active' : ''">
+    <div class="top">
+      <img
+        :src="
+          parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/air-con.svg' : 'air-con.svg')
+        "
+        alt=""
+      />
+      <div class="top-right">
+        <Switch
+          @change="getAirStatus"
+          class="switch-btn"
+          :size="23"
+          inactive-color="rgba(0, 0, 0, 0.3)"
+          v-model="isOpen"
+        />
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="air-info">
+        <div class="left">
+          <div class="text">空调</div>
+          <div class="status">已关闭</div>
+        </div>
+        <div class="temp" v-if="isOpen">
+          26
+          <sup>℃</sup>
+        </div>
+      </div>
+      <!--温度⏭️-->
+      <div class="temp-box" v-if="isOpen">
+        <div class="bar">
+          <div class="text text-left active-text">12</div>
+          <div class="active-bar">
+            <div class="line"></div>
+          </div>
+          <div class="text text-right">32</div>
+        </div>
+      </div>
+
+      <!--风量调整-->
+      <div class="air-volume" v-if="isOpen">
+        <div class="volume-left">
+          <div class="volume-top">
+            <span>1</span>
+            <span>2</span>
+            <span>3</span>
+            <span class="span-active">4</span>
+          </div>
+          <div class="text">风量调节</div>
+        </div>
+        <div class="volume-right">
+          <div class="control-item">
+            <img class="icon" :src="parseImgUrl('taiguv1/envmonitor', 'minus.svg')" />
+          </div>
+          <div class="control-item">
+            <img class="icon" :src="parseImgUrl('taiguv1/envmonitor', 'plus.svg')" />
+          </div>
+          <div class="control-item">A</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  toRefs,
+  computed,
+  watch,
+  onUnmounted,
+  onBeforeMount,
+  onBeforeUnmount,
+} from "vue";
+import { Switch, Dialog, Loading, Toast } from "vant";
+import { parseImgUrl } from "@/utils";
+import { Item } from "../../../../../model/getRolesModel";
+import any = jasmine.any;
+
+export default defineComponent({
+  components: {
+    Switch,
+    [Dialog.Component.name]: Dialog.Component,
+    Loading,
+  },
+  setup(props, contx) {
+    const proxyData = reactive({
+      parseImgUrl: parseImgUrl,
+      isOpen: false,
+      getAirStatus() {
+        console.log(proxyData.isOpen);
+        contx.emit("getStatus", proxyData.isOpen);
+      },
+    });
+    onBeforeUnmount(() => {});
+    onMounted(() => {});
+
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.volumn-box {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+  border-radius: 24px 24px 44px 24px;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(40px);
+  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+  .top {
+    display: flex;
+    justify-content: space-between;
+    img {
+      width: 30px;
+    }
+  }
+  .bottom {
+    width: 100%;
+    // margin-top: 18vh;
+    // margin-top: 109px;
+    .air-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: end;
+      .temp {
+        //styleName: En/H2;
+        font-family: Jost;
+        font-size: 20px;
+        font-weight: 300;
+        line-height: 28px;
+        color: rgba(0, 20, 40, 1);
+        sup {
+          //styleName: En/Body XS;
+          font-family: Jost;
+          font-size: 11px;
+          font-weight: 400;
+          line-height: 15px;
+          color: rgba(0, 20, 40, 1);
+        }
+      }
+    }
+    .text {
+      //styleName: Chi/Body Large;
+      font-family: PingFang SC;
+      font-size: 16px;
+      font-weight: 300;
+      line-height: 22px;
+      letter-spacing: 0.02em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      color: rgba(255, 255, 255, 1);
+      padding-bottom: 2px;
+    }
+    .status {
+      //styleName: Chi/Body XS;
+      font-family: PingFang SC;
+      font-size: 11px;
+      font-weight: 400;
+      line-height: 15px;
+      letter-spacing: 0.02em;
+      color: rgba(255, 255, 255, 0.4);
+    }
+    .temp-box {
+      position: relative;
+      box-sizing: border-box;
+      width: 100%;
+      padding: 2px;
+      margin-top: 8px;
+      height: 34px;
+      border-radius: 12px;
+      background: rgba(255, 255, 255, 0.6);
+      .text {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        font-family: Jost;
+        font-size: 11px;
+        font-weight: 400;
+        line-height: 15px;
+        color: rgba(116, 128, 141, 1);
+        z-index: 2;
+      }
+      .text-left {
+        left: 8px;
+      }
+      .text-right {
+        right: 8px;
+      }
+      .active-text {
+        color: rgba(255, 255, 255, 0.6);
+      }
+      .active-bar {
+        position: absolute;
+        background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%);
+        left: 2px;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+        width: 73px;
+        height: 30px;
+        border-radius: 10px;
+        .line {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          right: 9px;
+          height: 12px;
+          width: 2px;
+          background: rgba(255, 255, 255, 0.8);
+        }
+      }
+    }
+  }
+  .switch-btn {
+    width: 50px;
+    height: 28px;
+  }
+}
+.active {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(40px);
+  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+
+  .bottom {
+    .text {
+      color: rgba(0, 20, 40, 1);
+    }
+    .status {
+      color: rgba(116, 128, 141, 1);
+    }
+  }
+}
+.air-volume {
+  display: flex;
+  margin-top: 12px;
+  .volume-left {
+    width: 69px;
+    .volume-top {
+      padding-bottom: 2px;
+      height: 3.33vh;
+      line-height: 1;
+      span {
+        //styleName: En/Body Small;
+        display: inline-block;
+        margin-right: 5px;
+        font-family: Jost;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 17px;
+        color: rgba(116, 128, 141, 1);
+      }
+      .span-active {
+        color: rgba(0, 20, 40, 1);
+        font-size: 16px;
+        line-height: 22px;
+      }
+    }
+    .text {
+      //styleName: Chi/Body XS;
+      font-family: PingFang SC;
+      font-size: 11px;
+      font-weight: 400;
+      line-height: 15px;
+      letter-spacing: 0.02em;
+      color: rgba(0, 20, 40, 1);
+    }
+  }
+  .volume-right {
+    width: 120px;
+    display: flex;
+    justify-content: space-between;
+    .control-item {
+      width: 36px;
+      height: 36px;
+      background: rgba(255, 255, 255, 0.4);
+      backdrop-filter: blur(60px);
+      border-radius: 50%;
+      text-align: center;
+      .icon {
+        width: 20px;
+        height: 20px;
+        margin-top: 8px;
+      }
+      &:nth-child(3) {
+        font-family: Jost;
+        font-size: 16px;
+        font-weight: 300;
+        line-height: 36px;
+        text-align: center;
+        color: rgba(0, 20, 40, 1);
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.volumn-box {
+  .van-switch__node {
+    background: rgba(255, 255, 255, 0.6);
+  }
+  .van-switch--on {
+    background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%) !important;
+    .van-switch__node {
+      background: #fff !important;
+    }
+  }
+  .van-loading__spinner {
+    color: $elActiveColor !important;
+  }
+
+  .van-switch__loading {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    line-height: 1;
+  }
+
+  .van-switch--disabled {
+    opacity: 0.5;
+  }
+}
+</style>

src/views/envmonitor/taiguv1/components/Curtain/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="volumn-box" :class="isOpen ? 'active' : ''">
+    <div class="top">
+      <img
+        :src="
+          parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/curtain.svg' : 'curtain.svg')
+        "
+        alt=""
+      />
+      <div class="top-right">
+        <Switch
+          class="switch-btn"
+          :size="23"
+          inactive-color="rgba(0, 0, 0, 0.3)"
+          v-model="isOpen"
+        />
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="text">窗帘</div>
+      <div class="status">已关闭</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  toRefs,
+  computed,
+  watch,
+  onUnmounted,
+  onBeforeMount,
+  onBeforeUnmount,
+} from "vue";
+import { Switch, Dialog, Loading, Toast } from "vant";
+import { parseImgUrl } from "@/utils";
+import any = jasmine.any;
+
+export default defineComponent({
+  components: {
+    Switch,
+    [Dialog.Component.name]: Dialog.Component,
+    Loading,
+  },
+  setup(props, contx) {
+    const proxyData = reactive({
+      parseImgUrl: parseImgUrl,
+      isOpen: false,
+    });
+    onBeforeUnmount(() => {});
+    onMounted(() => {});
+
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.volumn-box {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+  border-radius: 24px 24px 44px 24px;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(40px);
+  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+  .top {
+    display: flex;
+    justify-content: space-between;
+    img {
+      width: 30px;
+    }
+  }
+  .bottom {
+    // margin-top: 18vh;
+    // margin-top: 109px;
+    .text {
+      //styleName: Chi/Body Large;
+      font-family: PingFang SC;
+      font-size: 16px;
+      font-weight: 300;
+      line-height: 22px;
+      letter-spacing: 0.02em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      color: rgba(255, 255, 255, 1);
+      padding-bottom: 2px;
+    }
+    .status {
+      //styleName: Chi/Body XS;
+      font-family: PingFang SC;
+      font-size: 11px;
+      font-weight: 400;
+      line-height: 15px;
+      letter-spacing: 0.02em;
+      color: rgba(255, 255, 255, 0.4);
+    }
+  }
+  .switch-btn {
+    width: 50px;
+    height: 28px;
+  }
+}
+.active {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(40px);
+  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+
+  .bottom {
+    .text {
+      color: rgba(0, 20, 40, 1);
+    }
+    .status {
+      color: rgba(116, 128, 141, 1);
+    }
+  }
+}
+</style>
+<style lang="scss">
+.volumn-box {
+  .van-switch__node {
+    background: rgba(255, 255, 255, 0.6);
+  }
+  .van-switch--on {
+    background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%) !important;
+    .van-switch__node {
+      background: #fff !important;
+    }
+  }
+  .van-loading__spinner {
+    color: $elActiveColor !important;
+  }
+
+  .van-switch__loading {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    line-height: 1;
+  }
+
+  .van-switch--disabled {
+    opacity: 0.5;
+  }
+}
+</style>

src/views/envmonitor/taiguv1/components/Lamp/LightMore.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>查看更多</div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  toRefs,
+  computed,
+  watch,
+  onUnmounted,
+  onBeforeMount,
+  onBeforeUnmount,
+} from "vue";
+import { Switch, Dialog, Loading, Toast } from "vant";
+import { parseImgUrl } from "@/utils";
+import any = jasmine.any;
+
+export default defineComponent({
+  components: {
+    Switch,
+    [Dialog.Component.name]: Dialog.Component,
+    Loading,
+  },
+  setup(props, contx) {
+    const proxyData = reactive({
+      parseImgUrl: parseImgUrl,
+      isOpen: false,
+    });
+    onBeforeUnmount(() => {});
+    onMounted(() => {});
+
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss" scoped></style>
+<style lang="scss"></style>

src/views/envmonitor/taiguv1/components/Lamp/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="volumn-box" :class="isOpen ? 'active' : ''">
+    <div class="top">
+      <img
+        :src="parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/lamp.svg' : 'lamp.svg')"
+        alt=""
+      />
+      <div class="top-right">
+        <Switch
+          class="switch-btn"
+          :size="23"
+          inactive-color="rgba(0, 0, 0, 0.3)"
+          v-model="isOpen"
+        />
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="text">音量</div>
+      <div class="status">已关闭</div>
+      <div class="right" @click="searchMore">
+        <img
+          :src="
+            parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/filter.svg' : 'filter.svg')
+          "
+          alt=""
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  toRefs,
+  computed,
+  watch,
+  onUnmounted,
+  onBeforeMount,
+  onBeforeUnmount,
+} from "vue";
+import { Switch, Dialog, Loading, Toast } from "vant";
+import { parseImgUrl } from "@/utils";
+import any = jasmine.any;
+
+export default defineComponent({
+  components: {
+    Switch,
+    [Dialog.Component.name]: Dialog.Component,
+    Loading,
+  },
+  setup(props, contx) {
+    const proxyData = reactive({
+      parseImgUrl: parseImgUrl,
+      isOpen: false,
+      searchMore() {
+        contx.emit("showMore");
+      },
+    });
+    onBeforeUnmount(() => {});
+    onMounted(() => {});
+
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.volumn-box {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+  border-radius: 24px 24px 44px 24px;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(40px);
+  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+  .top {
+    display: flex;
+    justify-content: space-between;
+    img {
+      width: 30px;
+    }
+  }
+  .bottom {
+    // margin-top: 18vh;
+    position: relative;
+    // margin-top: 109px;
+    .text {
+      //styleName: Chi/Body Large;
+      font-family: PingFang SC;
+      font-size: 16px;
+      font-weight: 300;
+      line-height: 22px;
+      letter-spacing: 0.02em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      color: rgba(255, 255, 255, 1);
+      padding-bottom: 2px;
+    }
+    .status {
+      //styleName: Chi/Body XS;
+      font-family: PingFang SC;
+      font-size: 11px;
+      font-weight: 400;
+      line-height: 15px;
+      letter-spacing: 0.02em;
+      color: rgba(255, 255, 255, 0.4);
+    }
+    .right {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 36px;
+      height: 36px;
+      background: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(60px);
+      border-radius: 50%;
+      text-align: center;
+      img {
+        width: 20px;
+        height: 20px;
+        margin-top: 8px;
+      }
+    }
+  }
+  .switch-btn {
+    width: 50px;
+    height: 28px;
+  }
+}
+.active {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(40px);
+  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+
+  .bottom {
+    .text {
+      color: rgba(0, 20, 40, 1);
+    }
+    .status {
+      color: rgba(116, 128, 141, 1);
+    }
+  }
+  .right {
+    background: rgba(255, 255, 255, 0.4);
+  }
+}
+</style>
+<style lang="scss">
+.volumn-box {
+  .van-switch__node {
+    background: rgba(255, 255, 255, 0.6);
+  }
+  .van-switch--on {
+    background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%) !important;
+    .van-switch__node {
+      background: #fff !important;
+    }
+  }
+  .van-loading__spinner {
+    color: $elActiveColor !important;
+  }
+
+  .van-switch__loading {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    line-height: 1;
+  }
+
+  .van-switch--disabled {
+    opacity: 0.5;
+  }
+}
+</style>

src/views/envmonitor/taiguv1/components/Screen/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="screen-box" :class="modeType == 2 ? 'active' : ''">
+    <div class="top">
+      <img
+        :src="
+          parseImgUrl(
+            'taiguv1/envmonitor',
+            modeType == 2 ? 'active/screen_cast.svg' : 'screen_cast.svg'
+          )
+        "
+        alt=""
+      />
+      <div class="top-right">
+        <div class="title">投屏</div>
+        <div class="status">关闭</div>
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="btn">有线投屏</div>
+      <div class="btn">无线投屏</div>
+      <div class="btn">Team Room</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  toRefs,
+  computed,
+  watch,
+  onUnmounted,
+  onBeforeMount,
+  onBeforeUnmount,
+} from "vue";
+import { Switch, Dialog, Loading, Toast } from "vant";
+import { parseImgUrl } from "@/utils";
+import any = jasmine.any;
+
+export default defineComponent({
+  components: {
+    Switch,
+    [Dialog.Component.name]: Dialog.Component,
+    Loading,
+  },
+  props: {
+    modeType: {
+      type: Number,
+      default: 1,
+    },
+  },
+  setup(props, contx) {
+    const proxyData = reactive({
+      parseImgUrl: parseImgUrl,
+    });
+    onBeforeUnmount(() => {});
+    onMounted(() => {});
+
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.screen-box {
+  box-sizing: border-box;
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+  border-radius: 24px 24px 44px 24px;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(40px);
+  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+  .top {
+    display: flex;
+    img {
+      width: 30px;
+      height: 30px;
+      margin-right: 8px;
+    }
+    .top-right {
+      .title {
+        //styleName: Chi/Body Large;
+        font-family: PingFang SC;
+        font-size: 16px;
+        font-weight: 300;
+        line-height: 22px;
+        letter-spacing: 0.02em;
+        color: rgba(255, 255, 255, 1);
+        margin-bottom: 2px;
+      }
+      .status {
+        //styleName: Chi/Body XS;
+        font-family: PingFang SC;
+        font-size: 11px;
+        font-weight: 400;
+        line-height: 15.4px;
+        letter-spacing: 0.02em;
+        color: rgba(255, 255, 255, 0.4);
+      }
+    }
+  }
+  .bottom {
+    margin-top: 9px;
+    .btn {
+      box-sizing: border-box;
+      margin-bottom: 5px;
+      width: 128px;
+      border-radius: 60px;
+      height: 40px;
+      background: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(20px);
+      text-align: center;
+      //styleName: Chi/Body Small;
+      font-family: PingFang SC;
+      font-size: 12px;
+      line-height: 40px;
+      font-weight: 400;
+      letter-spacing: 0.02em;
+      color: rgba(255, 255, 255, 0.6);
+    }
+  }
+}
+.active {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(40px);
+  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+  .top {
+    .top-right {
+      .title {
+        color: rgba(0, 20, 40, 1);
+      }
+      .status {
+        color: rgba(116, 128, 141, 1);
+      }
+    }
+  }
+  .bottom {
+    .btn {
+      background: rgba(255, 255, 255, 0.8);
+      color: rgba(0, 20, 40, 1);
+    }
+  }
+}
+</style>

src/views/envmonitor/taiguv1/components/Volumn/index.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="volumn-box" :class="isOpen ? 'active' : ''">
+    <div class="top">
+      <img
+        :src="
+          parseImgUrl('taiguv1/envmonitor', isOpen ? 'active/volumn.png' : 'volumn.svg')
+        "
+        alt=""
+      />
+      <div class="top-right">
+        <Switch
+          class="switch-btn"
+          :size="23"
+          inactive-color="rgba(0, 0, 0, 0.3)"
+          v-model="isOpen"
+        />
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="air-info">
+        <div class="left">
+          <div class="text">音量</div>
+          <div class="status">已关闭</div>
+        </div>
+        <div class="temp" v-if="isOpen">26</div>
+      </div>
+      <div class="temp-box" v-if="isOpen">
+        <div class="bar">
+          <div class="text text-left active-text">12</div>
+          <div class="active-bar">
+            <div class="line"></div>
+          </div>
+          <div class="text text-right">100</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  toRefs,
+  computed,
+  watch,
+  onUnmounted,
+  onBeforeMount,
+  onBeforeUnmount,
+} from "vue";
+import { Switch, Dialog, Loading, Toast } from "vant";
+import { parseImgUrl } from "@/utils";
+import any = jasmine.any;
+
+export default defineComponent({
+  components: {
+    Switch,
+    [Dialog.Component.name]: Dialog.Component,
+    Loading,
+  },
+  setup(props, contx) {
+    const proxyData = reactive({
+      parseImgUrl: parseImgUrl,
+      isOpen: false,
+    });
+    onBeforeUnmount(() => {});
+    onMounted(() => {});
+
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.volumn-box {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+  border-radius: 24px 24px 44px 24px;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(40px);
+  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+  .top {
+    display: flex;
+    justify-content: space-between;
+    img {
+      width: 30px;
+    }
+  }
+  .bottom {
+    // margin-top: 18vh;
+    // margin-top: 109px;
+    .air-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: end;
+      .temp {
+        //styleName: En/H2;
+        font-family: Jost;
+        font-size: 20px;
+        font-weight: 300;
+        line-height: 28px;
+        color: rgba(0, 20, 40, 1);
+        sup {
+          //styleName: En/Body XS;
+          font-family: Jost;
+          font-size: 11px;
+          font-weight: 400;
+          line-height: 15px;
+          color: rgba(0, 20, 40, 1);
+        }
+      }
+    }
+    .text {
+      //styleName: Chi/Body Large;
+      font-family: PingFang SC;
+      font-size: 16px;
+      font-weight: 300;
+      line-height: 22px;
+      letter-spacing: 0.02em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      color: rgba(255, 255, 255, 1);
+      padding-bottom: 2px;
+    }
+    .status {
+      //styleName: Chi/Body XS;
+      font-family: PingFang SC;
+      font-size: 11px;
+      font-weight: 400;
+      line-height: 15px;
+      letter-spacing: 0.02em;
+      color: rgba(255, 255, 255, 0.4);
+    }
+    .temp-box {
+      position: relative;
+      box-sizing: border-box;
+      width: 100%;
+      padding: 2px;
+      margin-top: 8px;
+      height: 34px;
+      border-radius: 12px;
+      background: rgba(255, 255, 255, 0.6);
+      .text {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        font-family: Jost;
+        font-size: 11px;
+        font-weight: 400;
+        line-height: 15px;
+        color: rgba(116, 128, 141, 1);
+        z-index: 2;
+      }
+      .text-left {
+        left: 8px;
+      }
+      .text-right {
+        right: 8px;
+      }
+      .active-text {
+        color: rgba(255, 255, 255, 0.6);
+      }
+      .active-bar {
+        position: absolute;
+        background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%);
+        left: 2px;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+        width: 73px;
+        height: 30px;
+        border-radius: 10px;
+        .line {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          right: 9px;
+          height: 12px;
+          width: 2px;
+          background: rgba(255, 255, 255, 0.8);
+        }
+      }
+    }
+  }
+  .switch-btn {
+    width: 50px;
+    height: 28px;
+  }
+}
+.active {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(40px);
+  box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
+
+  .bottom {
+    .text {
+      color: rgba(0, 20, 40, 1);
+    }
+    .status {
+      color: rgba(116, 128, 141, 1);
+    }
+  }
+}
+</style>
+<style lang="scss">
+.volumn-box {
+  .van-switch__node {
+    background: rgba(255, 255, 255, 0.6);
+  }
+  .van-switch--on {
+    background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%) !important;
+    .van-switch__node {
+      background: #fff !important;
+    }
+  }
+  .van-loading__spinner {
+    color: $elActiveColor !important;
+  }
+
+  .van-switch__loading {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    line-height: 1;
+  }
+
+  .van-switch--disabled {
+    opacity: 0.5;
+  }
+}
+</style>

src/views/envmonitor/taiguv1/index copy.vue

@@ -0,0 +1,443 @@
+<template>
+  <div class="main" :style="{ 'background-image': 'url(' + roomInfo.bg + ')' }">
+    <!-- <img :src="roomData[0].bg" class="video-image" /> -->
+    <!-- <img class="video-image" src="roomInfo.bg"></div> -->
+    <div class="video-image"></div>
+    <div class="content">
+      <div class="metting-info">
+        <img class="logo" :src="roomInfo.logo" />
+        <div class="name">{{ roomInfo.name }}</div>
+        <div class="location">{{ roomInfo.location }}</div>
+      </div>
+      <div class="env-box">
+        <img class="box-line" :src="boxLine" />
+        <div class="env-info">
+          <div class="item">
+            <div class="title">温度</div>
+            <div class="num-box">
+              <span>26</span>
+              <span>℃</span>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">CO2</div>
+            <div class="num-box">
+              <span>410</span>
+              <span>优</span>
+            </div>
+          </div>
+        </div>
+        <div class="line"></div>
+        <div class="env-info">
+          <div class="item">
+            <div class="title">湿度</div>
+            <div class="num-box">
+              <span>42</span>
+              <span>%</span>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">TVOC</div>
+            <div class="num-box">
+              <span>0.5</span>
+              <span>健康</span>
+            </div>
+          </div>
+        </div>
+        <div class="line"></div>
+        <div class="env-info">
+          <div class="item">
+            <div class="title">PM 2.5</div>
+            <div class="num-box">
+              <span>17</span>
+              <span>优</span>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">甲醛</div>
+            <div class="num-box">
+              <span>0.04</span>
+              <span>健康</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="fotter">
+      <div class="box">
+        <div class="info-box">
+          <div class="info">
+            <div class="item">
+              <div class="title">CO2</div>
+              <div class="num">410</div>
+              <div class="text">空气清新</div>
+            </div>
+            <div class="item">
+              <div class="title">CO2</div>
+              <div class="num">410</div>
+              <div class="text">空气清新</div>
+            </div>
+          </div>
+          <div class="info">
+            <div class="item">
+              <div class="title">甲醛</div>
+              <div class="num">0.5</div>
+              <div class="text">健康</div>
+            </div>
+            <div class="item">
+              <div class="title">TVOC</div>
+              <div class="num">6</div>
+              <div class="text">健康</div>
+            </div>
+          </div>
+        </div>
+
+        <!--室外天气-->
+        <div class="wether-box">
+          <div class="top">
+            <span>室外</span>
+            <span>-3 ℃</span>
+            <span>/</span>
+          </div>
+          <div class="bottom">
+            <span>PM 2.5</span>
+            <span>216</span>
+            <span>重毒污染</span>
+          </div>
+        </div>
+      </div>
+
+      <!--空调-->
+      <div class="box">
+        <Air></Air>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import Air from "./components/Air/index.vue";
+
+export default defineComponent({
+  components: {
+    Air,
+  },
+
+  setup() {
+    const proxyData = reactive({
+      boxLine: require("@/assets/taiguv1/svg/box_line.png"),
+      roomData: [
+        {
+          id: 1,
+          name: "ROOM EOS",
+          bg:
+            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room1.png",
+        },
+        {
+          id: 2,
+          name: "ROOM METIS",
+          bg:
+            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room2.png",
+        },
+        {
+          id: 3,
+          name: "ROOM NAIAD",
+          bg:
+            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room3.png",
+        },
+        {
+          id: 4,
+          name: "ROOM HELIOS",
+          bg:
+            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room4.png",
+        },
+        {
+          id: 5,
+          name: "ROOM GAIA",
+          bg:
+            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room5.png",
+        },
+        {
+          id: 6,
+          name: "ROOM AURA",
+          bg:
+            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room6.png",
+        },
+      ],
+      roomInfo: {},
+    });
+    onBeforeUnmount(() => {});
+    onMounted(() => {
+      proxyData.roomInfo = proxyData.roomData[0];
+      proxyData.roomInfo.logo = require("@/assets/taiguv1/svg/meting_icon.svg");
+      proxyData.roomInfo.location = "3F";
+    });
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss">
+.main {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  // mask-image: linear-gradient(
+  //   113.73deg,
+  //   rgba(47, 36, 28, 0.4) 17.26%,
+  //   rgba(47, 36, 28, 0.8) 55.71%
+  // );
+  .video-image {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      113.73deg,
+      rgba(47, 36, 28, 0.4) 17.26%,
+      rgba(47, 36, 28, 0.8) 55.71%
+    );
+  }
+  .content {
+    position: relative;
+  }
+  .metting-info {
+    padding-left: 40px;
+    padding-top: 36px;
+    display: flex;
+    align-items: center;
+    .logo {
+      width: 40px;
+      height: 40px;
+      margin-right: 9px;
+    }
+    .name {
+      font-family: Jost;
+      font-size: 40px;
+      font-weight: 300;
+      line-height: 57.8px;
+      letter-spacing: 0.02em;
+      color: #fff;
+      text-align: left;
+      margin-right: 8px;
+    }
+    .location {
+      //styleName: En/H3;
+      font-family: Jost;
+      font-size: 20px;
+      font-weight: 300;
+      line-height: 29px;
+      color: #fff;
+      margin-top: 15px;
+    }
+  }
+  .env-box {
+    position: absolute;
+    box-sizing: border-box;
+    width: 360px;
+    // height: 268px;
+    top: 36px;
+    left: 550px;
+    padding: 8px 56px;
+    border-radius: 24px 160px 24px 24px;
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(20px);
+    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
+    .box-line {
+      position: absolute;
+      top: -10px;
+      left: -8px;
+      width: 360px;
+      height: 100%;
+      // height: 268px;
+    }
+    .line {
+      width: 244px;
+      height: 1px;
+      background: rgba(255, 255, 255, 0.2);
+    }
+    .env-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 14px 0;
+      // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+      .item {
+        width: 120px;
+        .title {
+          //styleName: Chi/Body XS;
+          font-family: PingFang SC;
+          font-size: 11px;
+          font-weight: 400;
+          line-height: 15px;
+          letter-spacing: 0.02em;
+          padding-bottom: 5px;
+          color: rgba(228, 228, 228, 1);
+        }
+        .num-box {
+          span {
+            //styleName: En/H1;
+            display: inline-block;
+            padding-right: 4px;
+            color: #fff;
+            &:nth-child(1) {
+              font-family: Jost;
+              font-size: 36px;
+              font-weight: 300;
+              line-height: 36px;
+            }
+            &:nth-child(2) {
+              font-family: Jost;
+              font-size: 12px;
+              font-weight: 400;
+              // line-height: 17px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .fotter {
+    position: fixed;
+    box-sizing: border-box;
+    padding: 16px;
+    height: 264px;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    overflow-x: scroll;
+    border-radius: 24px;
+    backdrop-filter: blur(20px);
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.2);
+    .info-box {
+      box-sizing: border-box;
+      padding: 7px 24px;
+      width: 180px;
+      height: 174px;
+      backdrop-filter: blur(60px);
+      box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 24px 24px 24px 50px;
+      .info {
+        display: flex;
+        justify-content: space-between;
+        padding: 10px 0;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+        text-align: center;
+        &:nth-child(2) {
+          border-bottom: none;
+        }
+      }
+      .item {
+        color: #fff;
+        width: 60px;
+        .title {
+          font-family: Jost;
+          font-size: 10px;
+          font-weight: 400;
+          line-height: 14px;
+          text-align: center;
+        }
+        .num {
+          //styleName: En/H3;
+          font-family: Jost;
+          font-size: 20px;
+          font-weight: 300;
+          line-height: 24px;
+          text-align: center;
+          margin-bottom: 4px;
+        }
+        .text {
+          display: inline-block;
+          box-sizing: border-box;
+          height: 18px;
+          padding: 2px 8px 2px 8px;
+          border-radius: 50px;
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          font-family: PingFang SC;
+          font-size: 10px;
+          font-weight: 400;
+          line-height: 14px;
+          text-align: center;
+          margin: 0 auto;
+        }
+      }
+    }
+
+    .wether-box {
+      margin-top: 8px;
+      width: 180px;
+      border-radius: 24px;
+      box-sizing: border-box;
+      text-align: center;
+      padding: 7px 10px;
+      background: rgba(255, 255, 255, 0.1);
+      color: rgba(227, 227, 227, 1);
+
+      .top {
+        padding-bottom: 4px;
+        span {
+          display: inline-block;
+          font-family: PingFang SC;
+          font-size: 11px;
+          font-weight: 400;
+          line-height: 15px;
+          letter-spacing: 0.02em;
+          &:nth-child(1) {
+            //styleName: Chi/Body XS;
+            padding-right: 4px;
+          }
+          &:nth-child(2) {
+            //styleName: En/Body XS;
+            font-family: Jost;
+            font-size: 11px;
+            font-weight: 400;
+            line-height: 15px;
+          }
+        }
+      }
+      .bottom {
+        span {
+          display: inline-block;
+          &:nth-child(1) {
+            //styleName: En/Body XS;
+            font-family: Jost;
+            font-size: 11px;
+            font-weight: 400;
+            line-height: 15px;
+            padding-right: 2px;
+          }
+          &:nth-child(2) {
+            //styleName: En/Body XS;
+            font-family: Jost;
+            font-size: 11px;
+            font-weight: 400;
+            line-height: 15px;
+            padding-right: 4px;
+          }
+          &:nth-child(3) {
+            //styleName: Chi/Body XS;
+            font-family: PingFang SC;
+            font-size: 11px;
+            font-weight: 400;
+            line-height: 15px;
+            letter-spacing: 0.02em;
+          }
+        }
+      }
+    }
+    .box {
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 8px;
+    }
+  }
+}
+</style>

src/views/envmonitor/taiguv1/index.vue

@@ -0,0 +1,411 @@
+<template>
+  <div class="main" :style="{ 'background-image': 'url(' + roomInfo.bg + ')' }">
+    <!-- <img :src="roomData[0].bg" class="video-image" /> -->
+    <!-- <img class="video-image" src="roomInfo.bg"></div> -->
+    <div class="video-image"></div>
+    <div class="content">
+      <div class="metting-info">
+        <img class="logo" :src="roomInfo.logo" />
+        <div class="name">{{ roomInfo.name }}</div>
+        <div class="location">{{ roomInfo.location }}</div>
+      </div>
+      <div class="mode-box">
+        <div class="item" :class="modeType == 1 ? 'active' : ''" @click="checkModel(1)">
+          <img :src="parseImgUrl('taiguv1/envmonitor', 'meeting.svg')" alt="" />
+          <span>讨论</span>
+        </div>
+        <div class="item" :class="modeType == 2 ? 'active' : ''" @click="checkModel(2)">
+          <img :src="parseImgUrl('taiguv1/envmonitor', 'projector.svg')" alt="" />
+          <span>投影</span>
+        </div>
+        <div class="item" :class="modeType == 3 ? 'active' : ''" @click="checkModel(3)">
+          <img :src="parseImgUrl('taiguv1/envmonitor', 'stop.svg')" alt="" />
+          <span>散会</span>
+        </div>
+      </div>
+      <div class="env-box">
+        <img class="box-line" :src="boxLine" />
+        <div class="env-info">
+          <div class="item">
+            <div class="title">温度</div>
+            <div class="num-box">
+              <span>26</span>
+              <span>℃</span>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">CO2</div>
+            <div class="num-box">
+              <span>410</span>
+              <span>优</span>
+            </div>
+          </div>
+        </div>
+        <div class="line"></div>
+        <div class="env-info">
+          <div class="item">
+            <div class="title">湿度</div>
+            <div class="num-box">
+              <span>42</span>
+              <span>%</span>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">TVOC</div>
+            <div class="num-box">
+              <span>0.5</span>
+              <span>健康</span>
+            </div>
+          </div>
+        </div>
+        <div class="line"></div>
+        <div class="env-info">
+          <div class="item">
+            <div class="title">PM 2.5</div>
+            <div class="num-box">
+              <span>17</span>
+              <span>优</span>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">甲醛</div>
+            <div class="num-box">
+              <span>0.04</span>
+              <span>健康</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="fotter" :class="airStatus ? 'small' : 'fotter'">
+      <div class="box">
+        <Screen :modeType="modeType"></Screen>
+      </div>
+
+      <!--空调-->
+      <div class="box">
+        <Volumn></Volumn>
+      </div>
+      <div class="box">
+        <Lamp @showMore="showMore"></Lamp>
+      </div>
+      <div class="box air-box">
+        <Air @getStatus="getStatus"></Air>
+      </div>
+      <div class="box">
+        <Curtain></Curtain>
+      </div>
+    </div>
+
+    <van-popup
+      v-model:show="isLightColorFlag"
+      position="right"
+      :close-on-click-overlay="true"
+      class="taigu-popup"
+      teleport="#app"
+    >
+      <div>
+        <LightMore></LightMore>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { defineComponent, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import Air from "./components/Air/index.vue";
+import Screen from "./components/Screen/index.vue";
+import Volumn from "./components/Volumn/index.vue";
+import Lamp from "./components/Lamp/index.vue";
+import Curtain from "./components/Curtain/index.vue";
+import LightMore from "./components/Lamp/LightMore.vue";
+
+import { parseImgUrl } from "@/utils";
+
+export default defineComponent({
+  components: {
+    Screen,
+    Volumn,
+    Lamp,
+    Air,
+    Curtain,
+    LightMore,
+  },
+
+  setup() {
+    const proxyData = reactive({
+      parseImgUrl: parseImgUrl,
+      boxLine: require("@/assets/taiguv1/svg/box_line.png"),
+      roomData: [
+        {
+          id: 1,
+          name: "ROOM EOS",
+          bg:
+            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room1.png",
+        },
+        {
+          id: 2,
+          name: "ROOM METIS",
+          bg:
+            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room2.png",
+        },
+        {
+          id: 3,
+          name: "ROOM NAIAD",
+          bg:
+            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room3.png",
+        },
+        {
+          id: 4,
+          name: "ROOM HELIOS",
+          bg:
+            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room4.png",
+        },
+        {
+          id: 5,
+          name: "ROOM GAIA",
+          bg:
+            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room5.png",
+        },
+        {
+          id: 6,
+          name: "ROOM AURA",
+          bg:
+            "https://reserv-h5.tenants.link/static/WeChat/page-taiguv1/page-pad/pad_room6.png",
+        },
+      ],
+      roomInfo: {},
+      modeType: 1,
+      checkModel(type) {
+        proxyData.modeType = type;
+      },
+      airStatus: false,
+      getStatus(flag) {
+        proxyData.airStatus = flag;
+      },
+      isLightColorFlag: false,
+      lightData: [],
+
+      showMore(lightData) {
+        proxyData.isLightColorFlag = true;
+      },
+    });
+    onBeforeUnmount(() => {});
+    onMounted(() => {
+      proxyData.roomInfo = proxyData.roomData[0];
+      proxyData.roomInfo.logo = require("@/assets/taiguv1/svg/meting_icon.svg");
+      proxyData.roomInfo.location = "3F";
+    });
+    return {
+      ...toRefs(proxyData),
+    };
+  },
+});
+</script>
+<style lang="scss">
+.main {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  // mask-image: linear-gradient(
+  //   113.73deg,
+  //   rgba(47, 36, 28, 0.4) 17.26%,
+  //   rgba(47, 36, 28, 0.8) 55.71%
+  // );
+  .video-image {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      113.73deg,
+      rgba(47, 36, 28, 0.4) 17.26%,
+      rgba(47, 36, 28, 0.8) 55.71%
+    );
+  }
+  .content {
+    position: relative;
+  }
+  .metting-info {
+    padding-left: 40px;
+    padding-top: 6vh;
+    display: flex;
+    align-items: center;
+    .logo {
+      width: 40px;
+      height: 40px;
+      margin-right: 9px;
+    }
+    .name {
+      font-family: Jost;
+      font-size: 40px;
+      font-weight: 300;
+      line-height: 57.8px;
+      letter-spacing: 0.02em;
+      color: #fff;
+      text-align: left;
+      margin-right: 8px;
+    }
+    .location {
+      //styleName: En/H3;
+      font-family: Jost;
+      font-size: 20px;
+      font-weight: 300;
+      line-height: 29px;
+      color: #fff;
+      margin-top: 15px;
+    }
+  }
+  .env-box {
+    position: absolute;
+    box-sizing: border-box;
+    width: 360px;
+    // height: 268px;
+    top: 6vh;
+    // left: 550px;
+    right: 50px;
+    padding: 8px 56px;
+    border-radius: 24px 160px 24px 24px;
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(20px);
+    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
+    .box-line {
+      position: absolute;
+      top: -10px;
+      left: -8px;
+      width: 360px;
+      height: 100%;
+      // height: 268px;
+    }
+    .line {
+      width: 244px;
+      height: 1px;
+      background: rgba(255, 255, 255, 0.2);
+    }
+    .env-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 14px 0;
+      // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+      .item {
+        width: 120px;
+        .title {
+          //styleName: Chi/Body XS;
+          font-family: PingFang SC;
+          font-size: 11px;
+          font-weight: 400;
+          line-height: 15px;
+          letter-spacing: 0.02em;
+          padding-bottom: 5px;
+          color: rgba(228, 228, 228, 1);
+        }
+        .num-box {
+          span {
+            //styleName: En/H1;
+            display: inline-block;
+            padding-right: 4px;
+            color: #fff;
+            &:nth-child(1) {
+              font-family: Jost;
+              font-size: 36px;
+              font-weight: 300;
+              line-height: 36px;
+            }
+            &:nth-child(2) {
+              font-family: Jost;
+              font-size: 12px;
+              font-weight: 400;
+              // line-height: 17px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .mode-box {
+    margin-left: 40px;
+    margin-top: 32vh;
+    display: flex;
+    align-items: center;
+    .item {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      width: 77px;
+      height: 40px;
+      padding: 8px 12px 8px 12px;
+      border-radius: 60px;
+      background: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(20px);
+      margin-right: 4px;
+      img {
+        widows: 24px;
+        height: 24px;
+        margin-right: 4px;
+      }
+      span {
+        //styleName: Chi/Body Small;
+        font-family: PingFang SC;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 16px;
+        letter-spacing: 0.02em;
+        color: rgba(255, 255, 255, 0.6);
+      }
+    }
+    .active {
+      background: rgba(255, 255, 255, 0.8);
+      span {
+        color: rgba(0, 20, 40, 1);
+      }
+    }
+  }
+  .fotter {
+    position: fixed;
+    box-sizing: border-box;
+    padding: 16px;
+    // height: 264px;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    // overflow-x: scroll;
+    border-radius: 24px;
+    backdrop-filter: blur(20px);
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.2);
+    display: flex;
+    justify-content: space-between;
+    .box {
+      display: inline-block;
+      vertical-align: middle;
+      // margin-right: 8px;
+      width: 176px;
+      // height: 232px;
+      height: 38.7vh;
+      max-height: 232px;
+    }
+  }
+  .small {
+    .box {
+      width: 165px;
+    }
+    .air-box {
+      width: 220px;
+    }
+  }
+}
+.taigu-popup {
+  box-sizing: border-box;
+  width: 480px;
+  height: 600px;
+  border-radius: 24px 0px 0px 24px;
+  backdrop-filter: blur(30px);
+  background: rgba(255, 255, 255, 0.8);
+  padding: 40px 90px;
+}
+</style>