全屋设定页面完成

src/router.ts

@@ -126,6 +126,24 @@ const projectRoutes = [
     path: "/freshAir",
     component: () => import("@/view/device-detail/fresh-air.vue")
   },
+  {
+    //全屋设定
+    name: "wholeSetting",
+    path: "/wholeSetting",
+    component: () => import("@/view/device-detail/whole-setting.vue")
+  },
+  {
+    //全屋设定介绍
+    name: "wholeSettingWhat",
+    path: "/wholeSettingWhat",
+    component: () => import("@/view/device-detail/whole-setting-what.vue")
+  },
+  {
+    //全屋全感范围设定
+    name: "wholeSettingRange",
+    path: "/wholeSettingRange",
+    component: () => import("@/view/device-detail/whole-setting-range.vue")
+  },
   // 非哈希路由暂不启用
   {
     name: "notFound",

src/styles/framework/base/flexbox.scss

@@ -290,6 +290,13 @@ Flex, Grow, & Shrink 待确定
     left: 24px;
   }
 
+  .zhp-horizontal-cetter {
+    left: 50%;
+    transform: translateX(-50%);
+    position: absolute;
+    align-items: center;
+  }
+
   .bottom-s-c {
     left: 24px;
     right: 24px;
@@ -448,7 +455,9 @@ Flex, Grow, & Shrink 待确定
   .margin-left-20 {
     margin-left: 20px;
   }
-
+  .margin-left-24 {
+    margin-left: 24px;
+  }
   .margin-left-30 {
     margin-left: 30px;
   }
@@ -456,7 +465,9 @@ Flex, Grow, & Shrink 待确定
   .margin-left-42 {
     margin-left: 42px;
   }
-
+  .margin-top-24 {
+    margin-top: 24px;
+  }
   .margin-top-30 {
     margin-top: 30px;
   }

src/view/device-detail/fresh-air.vue

@@ -1,15 +1,22 @@
 <template>
   <div class="fresh-air-bg">
     <div class="zhp-title">
-      <img class="leftImg" src="@/assets/imgs/show/back.png" @click="router.back()">
+      <img
+        class="leftImg"
+        src="@/assets/imgs/show/back.png"
+        @click="router.back()"
+      />
+      <img class="freshImg1" src="@/assets/imgs/show/fresh_air_1.png" />
+      <img class="freshImg2" src="@/assets/imgs/show/fresh_air_2.png" />
+      <img class="freshImg3" src="@/assets/imgs/show/fresh_air_3.png" />
+      <img class="freshImg4" src="@/assets/imgs/show/fresh_air_4.png" />
       <div class="zhp-title-text">新风换气机</div>
     </div>
-    <img class="show-img" src="@/assets/imgs/show/icon_xfhqj.png">
+    <img class="show-img" src="@/assets/imgs/show/icon_xfhqj.png" />
   </div>
 </template>
 
 <script lang="ts" setup>
-
 import router from "@/router";
 </script>
 
@@ -30,6 +37,30 @@ import router from "@/router";
     position: absolute;
     left: 24px;
   }
+  .freshImg1 {
+    position: absolute;
+    left: 72px;
+    width: 32px;
+    height: 32px;
+  }
+  .freshImg2 {
+    position: absolute;
+    left: 112px;
+    width: 32px;
+    height: 32px;
+  }
+  .freshImg3 {
+    position: absolute;
+    left: 152px;
+    width: 78px;
+    height: 32px;
+  }
+  .freshImg4 {
+    position: absolute;
+    right: 24px;
+    width: 186px;
+    height: 38px;
+  }
   .show-img {
     width: 100vw;
   }

src/view/device-detail/whole-setting-range.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="base-bg">
+    <div class="zhp-title">
+      <img
+        class="leftImg"
+        src="@/assets/imgs/show/back.png"
+        @click="router.back()"
+      />
+      <div class="zhp-title-text">全屋全感范围设定</div>
+    </div>
+    <div class="zhp-text-28-white margin-left-24">所选范围至少包含一台室内机和一台新风</div>
+    <div class="zhp-item-bg">
+      <vid v-for="(item, i) in settingList" :key="i">
+        <div class="whole-setting-item-bg">
+          <div class="zhp-text-32-white margin-left-24">{{ item.title }}</div>
+          <img v-show="item.state" class="whole-select-img" src="@/assets/imgs/show/icon_select.png"
+               @click="select(item)" />
+          <img v-show="!item.state" class="whole-select-img" src="@/assets/imgs/show/icon_nomor.png"
+               @click="select(item)" />
+        </div>
+      </vid>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import router from "@/router";
+import { ref } from "vue";
+
+const select = (item: any) => {
+  item.state = !item.state;
+};
+const settingList = ref([
+  {
+    id: 1,
+    title: "客厅空调",
+    state: true
+  },
+  {
+    id: 2,
+    title: "卧室空调",
+    state: false
+  },
+  {
+    id: 3,
+    title: "儿童房空调",
+    state: true
+  },
+  {
+    id: 4,
+    title: "新风除湿机",
+    state: false
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+.whole-setting-item-bg {
+  position: relative;
+  background-color: #20252e;
+  background-origin: border-box;
+  border-radius: 16px;
+  display: flex;
+  width: 326px;
+  height: 108px;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.whole-select-img {
+  width: 60px;
+  height: 60px;
+  position: absolute;
+  right: 24px;
+}
+</style>

src/view/device-detail/whole-setting-what.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="base-bg">
+    <div class="zhp-title">
+      <img class="leftImg" src="@/assets/imgs/show/back.png" @click="router.back()">
+      <div class="zhp-title-text">全屋设定</div>
+    </div>
+    <div class="zhp-vertical zhp-horizontal-cetter">
+      <img class="w-h-200" src="@/assets/imgs/show/whole_setting_logo.png">
+      <div class="setting-detail-text zhp-text-28-white">{{ detailText }}</div>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import router from "@/router";
+
+const detailText = "温度设定、湿度设定是全屋空调系统运行的目标值。推荐数据来源于云平台大数据计算，" +
+  "您可以根据个人的偏好进行“+、-”调节。智慧屏会结合您的偏好完成智能调整。";
+</script>
+
+<style lang="scss" scoped>
+
+.w-h-200 {
+  position: relative;
+  top: 73px;
+  width: 200px;
+  height: 200px;
+}
+.setting-detail-text{
+  position: relative;
+  width: 624px;
+  top: 148px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+</style>

src/view/device-detail/whole-setting.vue

@@ -0,0 +1,366 @@
+<template>
+  <div class="base-bg">
+    <div class="zhp-title">
+      <img
+        class="leftImg"
+        src="@/assets/imgs/show/back.png"
+        @click="router.back()"
+      />
+      <div class="zhp-title-text">全屋设定</div>
+      <div class="whole-fwsd" @click="router.push('/wholeSettingRange')">
+        范围设定
+      </div>
+      <img
+        class="whole-setting-what"
+        src="@/assets/imgs/show/whole_setting_what.png"
+        @click="router.push('/wholeSettingWhat')"
+      />
+      <img class="whole-rightImg" src="@/assets/imgs/show/right.png" />
+    </div>
+    <div class="whole-setting-bg">
+      <div class="whole-zd-white">自动</div>
+      <img
+        v-show="isAuto"
+        class="whole-setting-close"
+        src="@/assets/imgs/show/icon_open.png"
+        @click="openAuto"
+      />
+      <img
+        v-show="!isAuto"
+        class="whole-setting-close"
+        src="@/assets/imgs/show/icon_close.png"
+        @click="openAuto"
+      />
+      <div class="whole-line"></div>
+      <div class="whole-setting-reduce1" @click="temSetting('leftR')">
+        <img
+          v-show="isAuto"
+          class="whole-36"
+          src="@/assets/imgs/show/whole_setting_-gray.png"
+        />
+        <img
+          v-show="!isAuto"
+          class="whole-36"
+          src="@/assets/imgs/show/whole_setting_-white.png"
+        />
+      </div>
+      <div class="whole-setting-reduce2" @click="temSetting('leftR2')">
+        <img
+          v-show="isAuto"
+          class="whole-36"
+          src="@/assets/imgs/show/whole_setting_-gray.png"
+        />
+        <img
+          v-show="!isAuto"
+          class="whole-36"
+          src="@/assets/imgs/show/whole_setting_-white.png"
+        />
+      </div>
+      <div class="whole-setting-add1" @click="temSetting('rightA')">
+        <img
+          v-show="isAuto"
+          class="whole-36"
+          src="@/assets/imgs/show/whole_setting_+gray.png"
+        />
+        <img
+          v-show="!isAuto"
+          class="whole-36"
+          src="@/assets/imgs/show/whole_setting_+white.png"
+        />
+      </div>
+      <div class="whole-setting-add2" @click="temSetting('rightA2')">
+        <img
+          v-show="isAuto"
+          class="whole-36"
+          src="@/assets/imgs/show/whole_setting_+gray.png"
+        />
+        <img
+          v-show="!isAuto"
+          class="whole-36"
+          src="@/assets/imgs/show/whole_setting_+white.png"
+        />
+      </div>
+      <div class="zhp-vertical margin-top-115">
+        <div class="tem-top">{{ tem >= 0 && tem < 10 ? "0" + tem : tem }}</div>
+        <div class="tem-seting1">温度设定</div>
+        <div class="tem-top">{{ hum }}</div>
+        <div class="tem-seting1">湿度设定</div>
+      </div>
+      <div class="zhp-vertical margin-top-129">
+        <div class="tem-seting2">℃</div>
+        <div class="tem-seting2 margin-top-140">%</div>
+      </div>
+    </div>
+    <div class="whole-bottom-btn" @click="wholeSetting">设定</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getCurrentInstance, onActivated, onBeforeMount, ref } from "vue";
+import router from "@/router";
+
+const isAuto = ref(true);
+const tem = ref(16);
+const hum = ref(30);
+const { proxy } = getCurrentInstance() as any;
+const queryType = ref(1);
+
+onActivated(() => {
+  const query: any = router.currentRoute.value.query;
+  if (query) {
+    queryType.value = query.type;
+    setData();
+  }
+});
+
+const setData = () => {
+  switch (queryType.value) {
+    case 1: //春季
+      tem.value = 24;
+      hum.value = 50;
+      break;
+    case 2: //夏季
+      tem.value = 26;
+      hum.value = 60;
+      break;
+    case 3: //梅雨
+      tem.value = 24;
+      hum.value = 60;
+      break;
+    case 4: //冬季
+      tem.value = 22;
+      hum.value = 50;
+      break;
+  }
+};
+/**
+ * 全屋设定，Event通知值变化
+ */
+const wholeSetting = () => {
+  proxy.$eventBusService.emit("selectNumEvent", tem);
+  router.back();
+};
+const temSetting = (type: String) => {
+  if (!isAuto.value) {
+    switch (type) {
+      case "leftR":
+        if (tem.value > -20) {
+          tem.value--;
+        }
+        break;
+      case "rightA":
+        if (tem.value < 100) {
+          tem.value++;
+        }
+        break;
+      case "leftR2":
+        if (hum.value > 1) {
+          hum.value--;
+        }
+        break;
+      case "rightA2":
+        if (hum.value < 100) {
+          hum.value++;
+        }
+        break;
+    }
+  }
+};
+/**
+ * 自动开启关闭
+ */
+const openAuto = () => {
+  isAuto.value = !isAuto.value;
+  if (isAuto.value) {
+    //自动
+    setData();
+  }
+};
+</script>
+<style lang="scss" scoped>
+.whole-setting-bg {
+  width: 672px;
+  height: 440px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-image: url("@/assets/imgs/show/whole_setting_bg.png");
+}
+
+.whole-line {
+  height: 1px;
+  position: absolute;
+  top: 88px;
+  right: 24px;
+  left: 24px;
+  background-color: rgba($color: #fff, $alpha: 0.2);
+}
+
+.whole-rightImg {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  right: 24px;
+}
+
+.whole-setting-what {
+  width: 44px;
+  height: 44px;
+  position: absolute;
+  right: 230px;
+}
+
+.whole-fwsd {
+  position: absolute;
+  right: 72px;
+  font-size: 28px;
+  color: white;
+  font-weight: 400;
+}
+
+.whole-zd-gray {
+  right: 128px;
+  font-size: 28px;
+  color: rgba($color: #fff, $alpha: 0.1);
+  font-weight: 400;
+}
+
+.whole-zd-white {
+  position: absolute;
+  top: 30px;
+  right: 128px;
+  font-size: 28px;
+  color: white;
+  font-weight: 400;
+}
+
+.whole-setting-close {
+  width: 92px;
+  height: 48px;
+  position: absolute;
+  right: 24px;
+  top: 20px;
+}
+
+.whole-setting-reduce1 {
+  top: 124px;
+  width: 110px;
+  height: 110px;
+  position: absolute;
+  left: 84px;
+  background-image: url("@/assets/imgs/show/whole_setting_+-bg.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.whole-setting-reduce2 {
+  width: 110px;
+  height: 110px;
+  position: absolute;
+  left: 84px;
+  bottom: 36px;
+  background-image: url("@/assets/imgs/show/whole_setting_+-bg.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.whole-setting-add1 {
+  width: 110px;
+  height: 110px;
+  position: absolute;
+  right: 84px;
+  top: 124px;
+  background-image: url("@/assets/imgs/show/whole_setting_+-bg.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.whole-setting-add2 {
+  width: 110px;
+  height: 110px;
+  position: absolute;
+  right: 84px;
+  bottom: 36px;
+  background-image: url("@/assets/imgs/show/whole_setting_+-bg.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.tem-bg {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.tem-top {
+  font-weight: 500;
+  font-size: 76px;
+  margin-bottom: 2px;
+  margin-right: 6px;
+  color: white;
+}
+
+.tem-seting1 {
+  font-weight: 500;
+  font-size: 24px;
+  margin-bottom: 50px;
+  color: white;
+}
+
+.tem-seting2 {
+  font-weight: 500;
+  font-size: 24px;
+  color: white;
+}
+
+.whole-bottom-btn {
+  bottom: 30px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 672px;
+  height: 110px;
+  background-image: url("@/assets/imgs/show/bg_btn.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  color: #ffffff;
+  font-size: 40px;
+  font-weight: 400;
+}
+
+.whole-36 {
+  width: 36px;
+  height: 36px;
+}
+
+.margin-top-115 {
+  margin-top: 115px;
+}
+
+.margin-top-129 {
+  margin-top: 129px;
+}
+
+.margin-top-140 {
+  margin-top: 140px;
+}
+</style>

src/view/tabs/home-screen.vue

@@ -1,37 +1,37 @@
 <template>
-    <div id="home-screen-wrapper">
+  <div id="home-screen-wrapper">
-        <div class="nav-top">
+    <div class="nav-top">
-            <div class="wifi-icon">
+      <div class="wifi-icon">
-                <img src="@/assets/imgs/home-screen/WIFI@2x.png" alt="">
+        <img src="@/assets/imgs/home-screen/WIFI@2x.png" alt="">
-            </div>
+      </div>
-            <div class="weather">雪天</div>
+      <div class="weather">雪天</div>
-            <div class="temp">-26℃</div>
+      <div class="temp">-26℃</div>
+    </div>
+    <div class="content">
+      <div class="content-left">
+        <div class="time" @click="envSelect">
+          {{ hour }}<span>:</span>{{ minutes }}
         </div>
-        <div class="content">
+      </div>
-            <div class="content-left">
+      <div class="content-right">
-                <div class="time" @click="envSelect">
+        <div class="message">
-                    {{ hour }}<span>:</span>{{ minutes }}
+          <img src="@/assets/imgs/home-screen/message@2x.png" class="message-img" @click="goMessagePage()">
-                </div>
+          <!-- 消息数量提醒 -->
-            </div>
+          <div class="message-confim" v-show="messageNum > 0">{{ messageNum }}</div>
-            <div class="content-right">
-                <div class="message">
-                    <img src="@/assets/imgs/home-screen/message@2x.png" class="message-img" @click="goMessagePage()">
-                    <!-- 消息数量提醒 -->
-                    <div class="message-confim" v-show="messageNum > 0">{{ messageNum }}</div>
-                </div>
-                <div class="backups">
-                    <img src="@/assets/imgs/home-screen/backups@2x.png" class="backups-img">
-                </div>
-            </div>
         </div>
-        <div class="ceshi">
+        <div class="backups">
-            <img id="imgs" src="" width="100%">
+          <img src="@/assets/imgs/home-screen/backups@2x.png" class="backups-img" @click="wholeSetting">
         </div>
+      </div>
+    </div>
+    <div class="ceshi">
+      <img id="imgs" src="" width="100%">
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted } from "vue";
 import router from "@/router";
 
 const aniImgs: any = ref([]);
@@ -39,53 +39,67 @@ const timer: any = ref();
 const imgs: any = ref();
 const index = ref(0);
 /** 小时 */
-const hour = ref('--');
+const hour = ref("--");
 /** 分钟 */
-const minutes = ref('--');
+const minutes = ref("--");
 /** 获取时间的定时器 */
 const getTimeTimer = ref();
 /** 信息的数量 */
 const messageNum = ref(1);
+/**
+ * 当前环境，默认春天1
+ */
+const currentType = ref(1);
 
 onMounted(() => {
-    imgs.value = document.getElementById('imgs');
+  imgs.value = document.getElementById("imgs");
-    // for (let i = 0; i <= 79; i++) {
+  // for (let i = 0; i <= 79; i++) {
-    //     aniImgs.value.push(`/src/assets/imgs/home-screen/切图-关机时循环_000${i < 10? '0' + i: i}`);
+  //     aniImgs.value.push(`/src/assets/imgs/home-screen/切图-关机时循环_000${i < 10? '0' + i: i}`);
-    // }
+  // }
-    // run();
+  // run();
-    getTimeTimer.value = setInterval(() => {
+  getTimeTimer.value = setInterval(() => {
-        const date = new Date();
+    const date = new Date();
-        hour.value = date.getHours() < 10? ('0' + date.getHours()): ('' + date.getHours());
+    hour.value = date.getHours() < 10 ? ("0" + date.getHours()) : ("" + date.getHours());
-        minutes.value = date.getMinutes() < 10? ('0' + date.getMinutes()): ('' + date.getMinutes());
+    minutes.value = date.getMinutes() < 10 ? ("0" + date.getMinutes()) : ("" + date.getMinutes());
-    }, 1000);
+  }, 1000);
-})
+});
 
 onUnmounted(() => {
-    // 清除定时器
+  // 清除定时器
-    clearInterval(getTimeTimer.value);
+  clearInterval(getTimeTimer.value);
-})
+});
 
 const run = () => {
-    // 清除定时器
+  // 清除定时器
-    if (timer.value) {
+  if (timer.value) {
-        clearInterval(timer.value);
+    clearInterval(timer.value);
-        timer.value = null;
+    timer.value = null;
+  }
+  change();
+  timer.value = setInterval(() => {
+    index.value++;
+    if (index.value > 79) {
+      index.value = 0;
     }
     change();
-    timer.value = setInterval(() => {
+  }, 1000 / 24);
-        index.value++;
+};
-        if (index.value > 79) {
-            index.value = 0;
-        }
-        change();
-    }, 1000 / 24);
-}
 
 const change = () => {
-    if (imgs.value) {
+  if (imgs.value) {
-        imgs.value.src = `/src/assets/imgs/home-screen/切图-关机时循环_000${index.value < 10? '0' + index.value: index.value}.png`;
+    imgs.value.src = `/src/assets/imgs/home-screen/切图-关机时循环_000${index.value < 10 ? "0" + index.value : index.value}.png`;
+  }
+};
+/**
+ * 全屋设定
+ */
+const wholeSetting = () => {
+  router.push({
+    path: "/wholeSetting", query: {
+      type: currentType.value,
     }
-}
+  });
+};
 /**
  * 环境模拟选择
  */
@@ -94,101 +108,103 @@ const envSelect = () => {
 };
 /** 跳转消息页面 */
 const goMessagePage = () => {
-    router.push("/message");
+  router.push("/message");
-}
+};
 </script>
 
 <style lang="scss" scoped>
 #home-screen-wrapper {
-    width: 100vw;
+  width: 100vw;
-    height: 100vh;
+  height: 100vh;
-    background: url('@/assets/imgs/home-screen/snow@2x.png') no-repeat;
+  background: url('@/assets/imgs/home-screen/snow@2x.png') no-repeat;
-    background-size: 100% 100%;
+  background-size: 100% 100%;
-    overflow: hidden;
+  overflow: hidden;
-
+
-    .nav-top {
+  .nav-top {
-        display: flex;
+    display: flex;
-        align-items: center;
+    align-items: center;
-        color: #FFF;
+    color: #FFF;
-        margin-top: 12px;
+    margin-top: 12px;
-        .wifi-icon {
+
-            margin-left: 24px;
+    .wifi-icon {
-            display: flex;
+      margin-left: 24px;
-          justify-content: center;
+      display: flex;
-          align-items: center;
+      justify-content: center;
-            img {
+      align-items: center;
-                width: 28px;
+
-                height: 28px;
+      img {
-            }
+        width: 28px;
-        }
+        height: 28px;
+      }
+    }
 
-        .weather {
+    .weather {
-            font-size: 24px;
+      font-size: 24px;
-            margin-left: 16px;
+      margin-left: 16px;
-        }
+    }
 
-        .temp {
+    .temp {
-            font-size: 26px;
+      font-size: 26px;
-            margin-left: 16px;
+      margin-left: 16px;
-        }
     }
+  }
 
-    .content {
+  .content {
-        display: flex;
+    display: flex;
-        justify-content: space-between;
+    justify-content: space-between;
-        align-items: center;
+    align-items: center;
 
-        .content-left {
+    .content-left {
-            margin-left: 24px;
+      margin-left: 24px;
 
-            .time {
+      .time {
-                color: #FFF;
+        color: #FFF;
-                font-size: 57px;
+        font-size: 57px;
-                font-family: Roboto-Light, Roboto;
+        font-family: Roboto-Light, Roboto;
 
-                span {
+        span {
-                    font-size: 48px;
+          font-size: 48px;
-                }
-            }
         }
+      }
+    }
 
-        .content-right {
+    .content-right {
-            margin-right: 25px;
+      margin-right: 25px;
-            display: flex;
+      display: flex;
-            align-items: center;
+      align-items: center;
-
+
-            img {
+      img {
-                width: 72px;
+        width: 72px;
-                height: 72px;
+        height: 72px;
-            }
+      }
-
+
-            .message {
+      .message {
-                margin-right: 34px;
+        margin-right: 34px;
-                position: relative;
+        position: relative;
-
+
-                .message-confim {
+        .message-confim {
-                    position: absolute;
+          position: absolute;
-                    top: -5px;
+          top: -5px;
-                    right: -5px;
+          right: -5px;
-                    width: 30px;
+          width: 30px;
-                    height: 30px;
+          height: 30px;
-                    border-radius: 50%;
+          border-radius: 50%;
-                    background-color: #D65659;
+          background-color: #D65659;
-                    display: flex;
+          display: flex;
-                    align-items: center;
+          align-items: center;
-                    justify-content: center;
+          justify-content: center;
-                    color: #FFF;
+          color: #FFF;
-                    font-size: 20px;
+          font-size: 20px;
-                }
-            }
         }
+      }
     }
+  }
 
-    .ceshi {
+  .ceshi {
-        width: 100vw;
+    width: 100vw;
-    }
+  }
 
-    #imgs {
+  #imgs {
-        width: 100%;
+    width: 100%;
-    }
+  }
 }</style>

src/view/timing/timing-add.vue

@@ -199,7 +199,6 @@ const onSaveClick = () => {
   bottom: 30px;
   position: absolute;
   left: 50%;
-  -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   display: flex;
   align-items: center;

src/view/timing/timing-select-time.vue

@@ -1,6 +1,16 @@
 <template>
   <div class="base-bg" style="align-items: center; display: flex">
-    <div class="timeBg margin-top-30"></div>
+    <div class="timeBg margin-top-30">
+      <van-picker
+        title=" "
+        :columns="columns"
+        confirm-button-text=" "
+        cancel-button-text=" "
+        @confirm="onConfirm"
+        @cancel="onCancel"
+        @change="onChange"
+      />
+    </div>
     <div class="bottom-s-c">
       <div class="bottom-c" @click="onSelectClick(false)">取消</div>
       <div class="bottom-s" @click="onSelectClick(true)">确定</div>
@@ -11,6 +21,7 @@
 <script lang="ts" setup>
 import { useRouter } from "vue-router";
 import { getCurrentInstance } from "vue";
+import { Toast } from "vant";
 
 const router = useRouter();
 
@@ -22,6 +33,21 @@ const onSelectClick = (sure: boolean) => {
     proxy.$eventBusService.emit("selectTimeEvent", time);
   }
 };
+
+const columns = [
+  { text: "杭州", value: "Hangzhou" },
+  { text: "宁波", value: "Ningbo" },
+  { text: "温州", value: "Wenzhou" },
+  { text: "绍兴", value: "Shaoxing" },
+  { text: "湖州", value: "Huzhou" },
+];
+const onConfirm = ({ selectedValues }: { selectedValues: any }) => {
+  Toast(`当前值: ${selectedValues.selectedValues}`);
+};
+const onChange = ({ selectedValues }: { selectedValues: any }) => {
+  Toast(`当前值: ${selectedValues.selectedValues}`);
+};
+const onCancel = () => Toast("取消");
 </script>
 
 <style lang="scss" scoped>