新增下拉菜单页面

src/view/drop-down-menu/drop-down-menu.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="drop-down-menu-wrapper">
+        <div class="content-top">
+            <!-- 功能容器 -->
+            <div
+                class="func-wrapper"
+                v-for="i in funcList"
+                :key="i"
+            >
+                <img :src="i.img" class="func-img" width="100%">
+                <span class="func-text">{{ i.text }}</span>
+            </div>
+        </div>
+        <div class="content-btm" @click="pullUp()">
+            <img src="@/assets/imgs/drop-down-menu/retract@2x.png" width="100%">
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, onMounted} from 'vue';
+
+const funcList = ref<any[]>([]);
+const emit = defineEmits(['pullUp'])
+
+onMounted(() => {
+    funcList.value = [
+        {
+            img: '/src/assets/imgs/drop-down-menu/func-xiping@2x.png',
+            text: '息屏'
+        }, {
+            img: '/src/assets/imgs/drop-down-menu/func-tongsuo@2x.png',
+            text: '童锁'
+        }, {
+            img: '/src/assets/imgs/drop-down-menu/func-jiankang@2x.png',
+            text: '健康'
+        }, {
+            img: '/src/assets/imgs/drop-down-menu/func-ziqingjie@2x.png',
+            text: '自清洁'
+        }, {
+            img: '/src/assets/imgs/drop-down-menu/func-gaowenshajun@2x.png',
+            text: '高温除菌'
+        }, {
+            img: '/src/assets/imgs/drop-down-menu/func-shuju@2x.png',
+            text: '数据中心'
+        }, {
+            img: '/src/assets/imgs/drop-down-menu/func-jieneng@2x.png',
+            text: '节能'
+        }, {
+            img: '/src/assets/imgs/drop-down-menu/func-set@2x.png',
+            text: '设置'
+        }, {
+            img: '/src/assets/imgs/drop-down-menu/func-zhenduan@2x.png',
+            text: '智慧健康诊断'
+        },
+    ];
+})
+
+/** 窗口上弹事件 */
+const pullUp = () => {
+    emit('pullUp');
+}
+</script>
+
+<style lang="scss" scoped>
+.drop-down-menu-wrapper {
+    width: 100vw;
+    height: 100vh;
+    background-color: #0A101A;
+    overflow: hidden;
+
+    .content-top {
+        padding: 19px 24px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        .func-wrapper {
+            width: 210px;
+            height: 200px;
+            border-radius: 16px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin: 5px 0;
+            background: #20252E;
+
+            .func-img {
+                width: 66px;
+                height: 66px;
+            }
+
+            .func-text {
+                font-size: 28px;
+                color: #FFF;
+                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
+                font-weight: 400;
+                margin-top: 42px;
+            }
+        }
+    }
+
+    .content-btm {
+        width: 100vw;
+        text-align: center;
+        padding-bottom: 6px;
+
+        img {
+            width: 142px;
+        }
+    }
+}
+</style>

src/view/tabs/device-control.vue

@@ -6,8 +6,8 @@
 
 <style lang="scss" scoped>
 #device-control-wrapper {
-    width: 1500px;
+    width: 100vw;
-    height: 1500px;
+    height: 100vh;
     background: rgb(5, 154, 200);
 }
 </style>

src/view/tabs/home-screen.vue

@@ -1,12 +1,63 @@
 <template>
-    <div id="home-screen-wrapper"></div>
+    <div id="home-screen-wrapper">
+        <div class="ceshi">
+            <img id="imgs" src="" width="100%">
+        </div>
+    </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { time } from 'console';
+import { ref, onMounted } from 'vue';
+
+const aniImgs: any = ref([]);
+const timer: any = ref();
+const imgs: any = ref();
+const index = ref(0)
+
+onMounted(() => {
+    imgs.value = document.getElementById('imgs');
+    // for (let i = 0; i <= 79; i++) {
+    //     aniImgs.value.push(`/src/assets/imgs/home-screen/切图-关机时循环_000${i < 10? '0' + i: i}`);
+    // }
+    run();
+    console.log(aniImgs.value);
+})
+
+const run = () => {
+    // 清除定时器
+    if (timer.value) {
+        clearInterval(timer.value);
+        timer.value = null;
+    }
+    change();
+    timer.value = setInterval(() => {
+        index.value++;
+        if (index.value > 79) {
+            index.value = 0;
+        }
+        change();
+    }, 1000 / 24);
+}
+
+const change = () => {
+    if (imgs.value) {
+        imgs.value.src = `/src/assets/imgs/home-screen/切图-关机时循环_000${index.value < 10? '0' + index.value: index.value}.png`;
+    }
+}
+</script>
 
 <style lang="scss" scoped>
 #home-screen-wrapper {
-    width: 1500px;
+    width: 100vh;
-    height: 1500px;
+    height: 100vh;
     background: rgb(15, 188, 102);
+
+    .ceshi {
+        width: 100vw;
+    }
+
+    #imgs {
+        width: 100%;
+    }
 }</style>

src/view/tabs/tabs.vue

@@ -1,29 +1,37 @@
 <template>
     <div id="tabs-wrapper">
-        <div class="swiper">
+      <!-- 下拉 -->
-            <div class="swiper-wrapper">
+      <div
-                <div class="swiper-slide">
+        class="drop-down-menu"
-                     <div class="swiper-item">
+        @touchstart="dropDownMenuStart($event)"
-                    <FixedTime class="swiper-slide"></FixedTime>
+        @touchmove="dropDownMenuMove($event)"
-                </div>
+        @touchend="dropDownMenuEnd($event)">
-                </div>
+      </div>
-                 <div class="swiper-slide">
+      <DropDownMenu id="menu" v-show="showMenu" ref="menu" @pull-up="pullUp()"></DropDownMenu>
-                <div class="swiper-item">
+      <div class="swiper">
-                    <HomeScreen class="swiper-slide"></HomeScreen>
+        <div class="swiper-wrapper">
-                </div>
+          <div class="swiper-slide">
-                </div>
+            <div class="swiper-item">
-                  <div class="swiper-slide">
+              <FixedTime class="swiper-slide"></FixedTime>
-                <div class="swiper-item">
-                    <DeviceControl class="swiper-slide"></DeviceControl>
-                </div>
-                </div>
-                  <div class="swiper-slide">
-                <div class="swiper-item">
-                    <Scene class="swiper-slide"></Scene>
-                </div>
-                </div>
             </div>
+          </div>
+          <div class="swiper-slide">
+            <div class="swiper-item">
+                <HomeScreen class="swiper-slide"></HomeScreen>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <div class="swiper-item">
+                <DeviceControl class="swiper-slide"></DeviceControl>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <div class="swiper-item">
+                <Scene class="swiper-slide"></Scene>
+            </div>
+          </div>
         </div>
+      </div>
     </div>
 </template>
 
@@ -39,13 +47,19 @@ import FixedTime from './fixed-time.vue';
 import HomeScreen from './home-screen.vue';
 import DeviceControl from './device-control.vue';
 import Scene from './scene.vue';
-
+import DropDownMenu from '../drop-down-menu/drop-down-menu.vue';
 import "swiper/swiper-bundle.css";
 
 let mySwiper: Swiper; // 声明swiper
+const touchStart = ref(0);
+const touchDis = ref(0);
+/** 是否展示菜单 */
+const showMenu = ref(false);
+const menuDom: any = ref();
 
 onMounted(() => {
     initSwiper();
+    menuDom.value = document.getElementById('menu') as HTMLElement | null;
 })
 
 /** 初始化swiper */
@@ -60,9 +74,73 @@ const initSwiper = () => {
     effect: "fade", //轮播图切换效果的类型
   });
 }
+
+/** 下拉菜单开始 */
+const dropDownMenuStart = (event: any) => {
+  touchStart.value = 0;
+  touchDis.value = 0;
+  touchStart.value = event.targetTouches[0].pageY;
+}
+
+/** 下拉菜单移动 */
+const dropDownMenuMove = (event: any) => {
+  // 顶部上下拖拽
+  let touchPos = event.targetTouches[0].pageY;
+  touchDis.value = touchPos - touchStart.value;
+  if (document.documentElement.scrollTop === 0 && touchDis.value > 0) {
+    showMenu.value = true;
+    if (menuDom.value) {
+      const top = (-(window.innerHeight) + touchDis.value) > 0? 0: (-(window.innerHeight) + touchDis.value);
+      menuDom.value.style.top = `${top}px`;
+    }
+  } else {
+    showMenu.value = false;
+  }
+}
+
+/** 下拉菜单结束 */
+const dropDownMenuEnd = (event: any) => {
+  if (touchDis.value > 0) {
+    if (menuDom.value) {
+      menuDom.value.style.transition = `${(window.innerHeight - touchDis.value) / (window.innerHeight)}s`;
+      menuDom.value.style.top = '0';
+    }
+  }
+}
+
+/** 点击收起菜单 */
+const pullUp = () => {
+  if (menuDom.value && (menuDom.value.style.top === '0px' || menuDom.value.style.top === '0')) {
+    menuDom.value.style.top = '-100vh';
+    menuDom.value.style.transition = '0.5s';
+    // 0.5s动画时间。等时间过去隐藏
+    setTimeout(() => {
+      showMenu.value = false;
+      menuDom.value.style.transition = '0s';
+    }, 500);
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 #tabs-wrapper {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+
+  .drop-down-menu {
+    width: 100vw;
+    height: 40px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+  }
+
+  #menu {
+    position: absolute;
+    top: -100vh;
+    z-index: 999;
+  }
 }
 </style>