增加首页、路由地址

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">

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)" />

src/router.ts

@@ -33,7 +33,15 @@ 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: '智慧屏首頁'
+    }
   }, 
   // 非哈希路由暂不启用
   {

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>

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>

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>

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>

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>