wip:家属等候大屏

src/App.vue

@@ -1,16 +1,10 @@
 <template>
-  <section id="app">
-    <div class="wrapper">
-      <comHeader></comHeader>
-      <main class="mt-[4.8vh]" @click="enterFullscreen">
+  <section id="app" @click="enterFullscreen">
     <router-view></router-view>
-      </main>
-    </div>
   </section>
 </template>
 
 <script>
-import comHeader from '@/components/comHeader/comHeader.vue';
 export default {
   data: () => {
     return {
@@ -37,9 +31,6 @@ export default {
       }
     },
   },
-  components: {
-    comHeader,
-  },
 };
 </script>
 
@@ -67,19 +58,8 @@ export default {
 }
 
 #app {
-  padding-top: 56.26%;
+  width: 100vw;
+  height: 100vh;
   position: relative;
 }
-
-.wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: url('@/assets/img/bg.png');
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-}
 </style>

src/assets/svg/Wait/footText.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="162" height="40" viewBox="0 0 162 40"><g><rect x="0" y="0" width="162" height="40" rx="0" fill="#FFFFFF" fill-opacity="1"/></g></svg>

src/router/index.js

@@ -7,8 +7,13 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    redirect: '/monitor',
+    redirect: '/waitList',
   },
+  {
+    path: '/pageBox',
+    component: () => import('@/views/pageBox/index.vue'),
+    redirect: '/monitor',
+    children: [
       {
         path: '/monitor',
         name: 'monitor',
@@ -33,6 +38,14 @@ const routes = [
         meta: { title: '手术间利用率数据可视化' },
         component: () => import('@/views/pageRoom/index.vue'),
       },
+    ],
+  },
+  {
+    path: '/waitList',
+    name: 'waitList',
+    meta: { title: '家属等候大屏' },
+    component: () => import('@/views/waitList/index.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/pageBox/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <section id="pageBox">
+    <div class="wrapper">
+      <comHeader></comHeader>
+      <main class="mt-[4.8vh]">
+        <router-view></router-view>
+      </main>
+    </div>
+  </section>
+</template>
+
+<script>
+import comHeader from '@/components/comHeader/comHeader.vue';
+export default {
+  components: {
+    comHeader,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#pageBox {
+  padding-top: 56.26%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/img/bg.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+</style>

src/views/waitList/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <section class="waitBox bg-[#F3F2FA]">
+    <nav class="h-[11.11vh] pl-[3.7vh] pr-[2.22vh] flex justify-between items-center bg-[#5D49AF]">
+      <div class="logBox w-[11.57vh] h-[7.4vh]">
+        <img class="h-full" src="@/assets/svg/Wait/logo.svg" />
+      </div>
+      <div class="titleBox flex items-center">
+        <p class="text-[5.55vh] font-bold mr-[1.48vh]">家属等候大屏</p>
+        <span class="text-[2.96vh] text-[#ccc] tracking-widest">(9s)</span>
+      </div>
+      <div class="timeBox text-right">
+        <p class="text-[3.14vh] font-medium leading-tight">15:31</p>
+        <p class="text-[1.66vh]">2024-07-09 星期二</p>
+      </div>
+    </nav>
+    <main class="h-[calc(100vh-18.51vh)] p-[2.22vh] pb-0"></main>
+    <footer class="h-[7.4vh] flex items-center justify-around bg-[#5D49AF]">
+      <div class="flex items-center">
+        <div class="logBox w-[15vh] h-[3.7vh] mr-[1.48vh]">
+          <img class="h-full" src="@/assets/svg/Wait/footText.svg" />
+        </div>
+        <p class="text-[2.59vh]">请勿吸烟，请照顾好自己随身携带的物品，请耐心等待，我们将竭诚为您服务</p>
+      </div>
+    </footer>
+  </section>
+</template>
+
+<script></script>
+
+<style lang="scss" scoped></style>