From 5004b69741b8996fa57eb824f1058a7552c57b70 Mon Sep 17 00:00:00 2001
From: zhangzhiyi <zhangzhiyi@birantech.com>
Date: Wed, 17 May 2023 18:32:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=A6=96=E9=A1=B5=E3=80=81?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E5=9C=B0=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../framework/common/x-tabbar-framework.vue   |  2 +-
 src/components/framework/common/x-tabbar.vue  |  2 +-
 src/router.ts                                 | 10 ++-
 src/view/tabs/device-control.vue              | 13 ++++
 src/view/tabs/fixed-time.vue                  | 14 ++++
 src/view/tabs/home-screen.vue                 | 12 ++++
 src/view/tabs/scene.vue                       | 13 ++++
 src/view/tabs/tabs.vue                        | 68 +++++++++++++++++++
 8 files changed, 131 insertions(+), 3 deletions(-)
 create mode 100644 src/view/tabs/device-control.vue
 create mode 100644 src/view/tabs/fixed-time.vue
 create mode 100644 src/view/tabs/home-screen.vue
 create mode 100644 src/view/tabs/scene.vue
 create mode 100644 src/view/tabs/tabs.vue

diff --git a/src/components/framework/common/x-tabbar-framework.vue b/src/components/framework/common/x-tabbar-framework.vue
index 434fc41..57a559f 100644
--- a/src/components/framework/common/x-tabbar-framework.vue
+++ b/src/components/framework/common/x-tabbar-framework.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!hidden">
+  <div v-if="false">
     <van-sticky class="safe-area-inset-top">
       <van-tabbar v-model="active" class="safe-area-inset-bottom">
         <van-tabbar-item badge="100" to="/demo/home">
diff --git a/src/components/framework/common/x-tabbar.vue b/src/components/framework/common/x-tabbar.vue
index 5652c20..1d701d9 100644
--- a/src/components/framework/common/x-tabbar.vue
+++ b/src/components/framework/common/x-tabbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!hidden">
+  <div v-if="false">
     <div class="display-none">
       <img :src="getImgSrc(icon.homeActive)" />
       <img :src="getImgSrc(icon.sceneActive)" />
diff --git a/src/router.ts b/src/router.ts
index e7f140b..05ec943 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -33,8 +33,16 @@ const projectRoutes = [
     name: "index",
     // component: BasicLayout,
     meta: { title: "Bluebird前端框架" },
-    redirect: "/demo/home",
+    redirect: "/tabs",
   },
+  {
+    name: "tabs",
+    path: "/tabs",
+    component: () => import("@/view/tabs/tabs.vue"),
+    meta: {
+      title: '智慧屏首頁'
+    }
+  }, 
   // 非哈希路由暂不启用
   {
     name: "notFound",
diff --git a/src/view/tabs/device-control.vue b/src/view/tabs/device-control.vue
new file mode 100644
index 0000000..5152089
--- /dev/null
+++ b/src/view/tabs/device-control.vue
@@ -0,0 +1,13 @@
+<template>
+    <div id="device-control-wrapper"></div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+#device-control-wrapper {
+    width: 1500px;
+    height: 1500px;
+    background: rgb(5, 154, 200);
+}
+</style>
\ No newline at end of file
diff --git a/src/view/tabs/fixed-time.vue b/src/view/tabs/fixed-time.vue
new file mode 100644
index 0000000..95c35af
--- /dev/null
+++ b/src/view/tabs/fixed-time.vue
@@ -0,0 +1,14 @@
+<template>
+    <div id="fixed-time-wrapper"></div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="scss" scoped>
+#fixed-time-wrapper {
+    width: 1500px;
+    height: 1500px;
+    background: rgb(206, 19, 19);
+}
+</style>
\ No newline at end of file
diff --git a/src/view/tabs/home-screen.vue b/src/view/tabs/home-screen.vue
new file mode 100644
index 0000000..30c9b89
--- /dev/null
+++ b/src/view/tabs/home-screen.vue
@@ -0,0 +1,12 @@
+<template>
+    <div id="home-screen-wrapper"></div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+#home-screen-wrapper {
+    width: 1500px;
+    height: 1500px;
+    background: rgb(15, 188, 102);
+}</style>
\ No newline at end of file
diff --git a/src/view/tabs/scene.vue b/src/view/tabs/scene.vue
new file mode 100644
index 0000000..e28b516
--- /dev/null
+++ b/src/view/tabs/scene.vue
@@ -0,0 +1,13 @@
+<template>
+    <div id="scene-wrapper"></div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+#scene-wrapper {
+    width: 1500px;
+    height: 1500px;
+    background: rgb(131, 10, 196);
+}
+</style>
\ No newline at end of file
diff --git a/src/view/tabs/tabs.vue b/src/view/tabs/tabs.vue
new file mode 100644
index 0000000..e7708e2
--- /dev/null
+++ b/src/view/tabs/tabs.vue
@@ -0,0 +1,68 @@
+<template>
+    <div id="tabs-wrapper">
+        <div class="swiper">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                     <div class="swiper-item">
+                    <FixedTime class="swiper-slide"></FixedTime>
+                </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>
+
+<script lang="ts" setup>
+import {
+    ref,
+    onBeforeMount,
+    onMounted,
+    nextTick,
+} from 'vue';
+import { Swiper, Navigation, Pagination } from "swiper";
+import FixedTime from './fixed-time.vue';
+import HomeScreen from './home-screen.vue';
+import DeviceControl from './device-control.vue';
+import Scene from './scene.vue';
+
+import "swiper/swiper-bundle.css";
+
+let mySwiper: Swiper; // 声明swiper
+
+onMounted(() => {
+    initSwiper();
+})
+
+/** 初始化swiper */
+const initSwiper = () => {
+  mySwiper = new Swiper(".swiper", {
+    modules: [Navigation, Pagination],
+    // observer: true, // 修改swiper自己或子元素时，自动初始化swiper
+    // observeParents: true, // 修改swiper的父元素时，自动初始化swiper
+    pagination: {
+      el: ".swiper-pagination",
+    }, //分页样式
+    effect: "fade", //轮播图切换效果的类型
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+#tabs-wrapper {
+}
+</style>
\ No newline at end of file