定时场景

src/dto/scene-dto.ts

@@ -0,0 +1,21 @@
+/**
+ * 定时
+ */
+export type SceneDto = {
+  /**
+   * id
+   */
+  id: number;
+  /**
+   * 名称
+   */
+  name: string;
+  /**
+   * 图标
+   */
+  img: string;
+  /**
+   * 进度
+   */
+  progress: number;
+};

src/dto/timing-dto.ts

@@ -0,0 +1,25 @@
+/**
+ * 定时
+ */
+export type TimingDto = {
+  /**
+   * id
+   */
+  id: number;
+  /**
+   * 定时时间
+   */
+  time: string;
+  /**
+   * 开关机状态
+   */
+  state: boolean;
+  /**
+   * 设备名称
+   */
+  name: string;
+  /**
+   * 选中状态
+   */
+  selectState: boolean;
+};

src/router-demo.ts

@@ -36,6 +36,15 @@ export const demoRoutes = [
           requireAuth: false,
         },
       },
+      {
+        name: "timing",
+        path: "base-components-demo/timing",
+        component: () => import("@/view/show/timing.vue"),
+        meta: {
+          title: "定时",
+          requireAuth: false,
+        },
+      },
       {
         name: "animation-demo",
         path: "base-components-demo/animation-demo",

src/view/demo/base-components-demo.vue

@@ -45,7 +45,7 @@ const navList = [
     name: "animation",
     icon: "iconfont icon-chongzhima",
     click: () => {
-      router.push("/demo/base-components-demo/animation-demo");
+      router.push("/demo/base-components-demo/timing");
     },
     color: "bg-red",
   },
@@ -280,16 +280,16 @@ const navList = [
 
 <style lang="scss" scoped>
 .base-components-card {
-  color: white !important;
+  color: black !important;
   .base-components-card-container {
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     flex-wrap: wrap;
   }
 
   .base-components-card-content {
     position: relative;
-    flex: 0 0 50%;
+    flex: 0 0 25%;
     > div {
       position: relative;
     }

src/view/tabs/fixed-time.vue

@@ -1,14 +1,183 @@
 <template>
-    <div id="fixed-time-wrapper"></div>
+  <div class="base-timing-card safe-area-inset-bottom">
+    <div class="layout-box-vertical layout-items-center">
+      <div class="base-timing-card-title">
+        <div class="layout-box-horizontal">
+          <div class="base-timing-card-title-t">定时</div>
+          <div class="layout-items-center">
+            <img
+              class="base-timing-card-title-add"
+              src="@/assets/imgs/show/btn_item_timing_add.png"
+            />
+          </div>
+        </div>
+      </div>
+      <div v-for="(item, i) in navList" :key="i" @click="onItemClick(item)">
+        <div
+          class="base-timing-card-content-unSelectBg"
+          :class="
+            item.selectState
+              ? 'base-timing-card-content-selectBg'
+              : 'base-timing-card-content-unSelectBg'
+          "
+        >
+          <div class="base-timing-card-content-bg">
+            <div class="layout-box-horizontal layout-items-center">
+              <div class="time">
+                {{ item.time }}
+              </div>
+              <div class="description">小时后</div>
+              <div class="stateBg">
+                <div class="state">
+                  {{ item.state ? "开机" : "关机" }}
+                </div>
+              </div>
+              <div class="description">
+                {{ item.name }}
+              </div>
+              <img
+                src="@/assets/imgs/show/btn_item_timing_delete.png"
+                class="delete"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+import { TimingDto } from "@/dto/timing-dto";
+import timing from "@/view/show/timing.vue";
+import type from "async-validator/dist-types/rule/type";
+
+const router = useRouter();
+
+/**
+ * 切换选中状态
+ */
+const onItemClick = (timing: TimingDto) => {
+  navList.value.forEach((t) => {
+    if (t.id === timing.id) {
+      t.selectState = true;
+    } else {
+      t.selectState = false;
+    }
+  });
+};
+
+const navList = ref([
+  {
+    id: 0,
+    time: "2.5",
+    name: "主卧空调",
+    state: false,
+    selectState: false,
+  },
+  {
+    id: 1,
+    time: "3.0",
+    name: "次卧空调",
+    state: true,
+    selectState: false,
+  },
+  {
+    id: 2,
+    time: "4.0",
+    name: "餐厅空调",
+    state: false,
+    selectState: false,
+  },
+]);
 </script>
 
 <style lang="scss" scoped>
-#fixed-time-wrapper {
-    width: 1500px;
-    height: 1500px;
-    background: rgb(206, 19, 19);
+.base-timing-card {
+  background-image: url("@/assets/imgs/show/bg_timing.png");
+  height: 720px;
+  width: 720px;
+
+  .base-timing-card-title {
+    margin-top: 35px;
+    margin-bottom: 35px;
+    width: 100vw;
+
+    .base-timing-card-title-t {
+      font-weight: 400;
+      font-size: 40px;
+      margin-left: 46px;
+      color: #ffffff;
+      width: 100vw;
+      text-align: center;
+    }
+  }
+
+  .base-timing-card-title-add {
+    width: 48px;
+    height: 48px;
+    margin-right: 48px;
+  }
+
+  .base-timing-card-content-bg {
+    width: 100vw;
+  }
+
+  .base-timing-card-content-unSelectBg {
+    margin-left: 45px;
+    margin-bottom: 12px;
+    height: 126px;
+    background-image: url(@/assets/imgs/show/bg_item_timing_unselect.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .base-timing-card-content-selectBg {
+    margin-left: 45px;
+    margin-bottom: 12px;
+    height: 126px;
+    background-image: url(@/assets/imgs/show/bg_item_timing_select.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .time {
+    margin-left: 36px;
+    font-weight: 400;
+    font-size: 60px;
+    color: #ffffff;
+    line-height: 126px;
+  }
+
+  .description {
+    margin-left: 57px;
+    font-weight: 400;
+    font-size: 28px;
+    color: #ffffff;
+  }
+
+  .stateBg {
+    margin-left: 14px;
+    background-image: url(@/assets/imgs/show/btn_item_timing_open.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 56px;
+    height: 32px;
+  }
+
+  .state {
+    line-height: 32px;
+    font-weight: 400;
+    font-size: 18px;
+    color: #ffffff;
+  }
+
+  .delete {
+    margin-left: 77px;
+    width: 60px;
+    height: 60px;
+  }
 }
 </style>

src/view/tabs/scene.vue

@@ -1,13 +1,155 @@
 <template>
-    <div id="scene-wrapper"></div>
+  <div class="base-scene-card safe-area-inset-bottom">
+    <div class="layout-box-vertical layout-items-center">
+      <div class="base-scene-card-title">
+        <div class="layout-items-center">
+          <div class="base-scene-card-title-t">场景</div>
+        </div>
+      </div>
+      <div class="base-scene-card-content">
+        <div v-for="(item, i) in navList" :key="i">
+          <div class="base-scene-card-content-bg" @click="onItemClick(item)">
+            <div class="layout-box-horizontal layout-items-center">
+              <img class="stateBg" :src="item.img" />
+              <div class="function">
+                {{ item.name }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+import { SceneDto } from "@/dto/scene-dto";
+import { Toast } from "vant";
+
+const router = useRouter();
+
+/**
+ * 切换选中状态
+ */
+const onItemClick = (scene: SceneDto) => {
+  navList.value.forEach((t) => {
+    if (t.id === scene.id) {
+      Toast(t.name);
+    }
+  });
+};
+
+const navList = ref([
+  {
+    id: 0,
+    img: "/src/assets/imgs/show/icon_tyzl.png",
+    name: "统一制冷",
+    progress: 0.5
+  },
+  {
+    id: 1,
+    img: "/src/assets/imgs/show/icon_tyzr.png",
+    name: "统一制热",
+    progress: 0.8
+  },
+  {
+    id: 2,
+    img: "/src/assets/imgs/show/icon_kszl.png",
+    name: "快速制冷",
+    progress: 0.3
+  },
+  {
+    id: 3,
+    img: "/src/assets/imgs/show/icon_kszr.png",
+    name: "快速制热",
+    progress: 0.5
+  },
+  {
+    id: 4,
+    img: "/src/assets/imgs/show/icon_hwxf.png",
+    name: "恒温新风",
+    progress: 0.8
+  },
+  {
+    id: 5,
+    img: "/src/assets/imgs/show/icon_zhqg.png",
+    name: "智慧全感",
+    progress: 0.3
+  },
+  {
+    id: 6,
+    img: "/src/assets/imgs/show/icon_ty.png",
+    name: "通用",
+    progress: 0.3
+  }
+]);
+</script>
 
 <style lang="scss" scoped>
-#scene-wrapper {
-    width: 1500px;
-    height: 1500px;
-    background: rgb(131, 10, 196);
+.base-scene-card {
+  background-image: url("@/assets/imgs/show/bg_timing.png");
+  height: 720px;
+  width: 720px;
+
+  .base-scene-card-title {
+    margin-top: 35px;
+    margin-bottom: 35px;
+    width: 100%;
+
+    .base-scene-card-title-t {
+      font-weight: 400;
+      font-size: 40px;
+      color: #ffffff;
+      width: 100%;
+      text-align: center;
+    }
+  }
+
+  .base-scene-card-content {
+    display: flex;
+    justify-content: space-between;
+    padding: 24px;
+    flex-wrap: wrap;
+
+    .base-scene-card-content-bg {
+      position: relative;
+      flex: 0 0 50%;
+
+      > div {
+        position: relative;
+      }
+
+      margin-bottom: 20px;
+      height: 146px;
+      background-image: url(@/assets/imgs/show/bg_item_scene.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      width: 326px;
+    }
+
+    .function {
+      margin-left: 30px;
+      line-height: 146px;
+      font-weight: 400;
+      font-size: 32px;
+      color: #ffffff;
+    }
+
+    .stateBg {
+      margin-left: 52px;
+      line-height: 146px;
+      background-size: contain;
+      background-repeat: no-repeat;
+      width: 60px;
+      height: 60px;
+    }
+  }
+}
+
+.bottom-line {
+  position: relative;
+  padding-top: 3px;
 }
 </style>