添加电梯大屏相关页面文件

src/assets/css/Elevator/iconfont.css

@@ -0,0 +1,43 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4379144 */
+  src: url('iconfont.woff2?t=1702949068701') format('woff2'),
+       url('iconfont.woff?t=1702949068701') format('woff'),
+       url('iconfont.ttf?t=1702949068701') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-zhengque:before {
+  content: "\e65c";
+}
+
+.icon-xiajiangzhong:before {
+  content: "\e601";
+}
+
+.icon-shangshengzhong:before {
+  content: "\e602";
+}
+
+.icon-xiajiang:before {
+  content: "\e661";
+}
+
+.icon-shangsheng:before {
+  content: "\e662";
+}
+
+.icon-jiting:before {
+  content: "\e7bf";
+}
+
+.icon-tingzhi:before {
+  content: "\e67d";
+}
+

src/router/index.ts

@@ -289,6 +289,11 @@ const routes: Array<RouteRecordRaw> = [
         name: "SewingBift",
         component: () => import("../views/SewingBift/index.vue"),
       },
+      {
+        path: "/Elevator",
+        name: "Elevator",
+        component: () => import("../views/Elevator/index.vue"),
+      },
 
 
 

src/views/Elevator/components/Border.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="newboder">
+        <!-- <img class="borderpng" src="" alt=""> -->
+        <div class="title">
+            <text class="title-text">{{ title }}</text>
+        </div>
+         
+        <div class="newboder-content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+  
+<script setup lang='ts'>
+import { computed } from 'vue'
+let prop = defineProps({
+    title: {
+        type: String,
+        default: ''
+    }
+})
+
+// let newTitle = computed(() => {
+//     return prop.title.split('').join(' ')
+// })
+
+</script>
+  
+<style scoped>
+.newboder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    background: url(./../images/border.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.borderpng {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.title {
+    position: relative;
+    width: 100%;
+    height: 16%;
+    text-align: left;
+    font-family: "华文新魏", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 28px;
+    color: rgba(0, 255, 255, 0.996078431372549);
+    display: flex;
+    align-items: center;
+    
+}
+
+
+.title-text {
+    margin-left: 16px;
+    font-weight: bold;
+}
+
+.newboder-content {
+    width: 100%;
+    height: 84%;
+    flex: 1;
+}
+</style>
+  

src/views/Elevator/index.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="container">
+        <div class="left">
+            <div class="header">
+                <div class="date">
+                    <p class="date-time">{{ timeHtml }}</p>
+                </div>
+                <div class="title">智能货梯监控平台</div>
+            </div>
+            <div class="l-content">
+                <div class="l-content-box">
+                    <Border title="实时状态">
+                    </Border>
+                </div>
+
+            </div>
+        </div>
+        <div class="center"></div>
+        <div class="right">
+            <div class="r-box">
+                <Border title="二层按钮">
+                </Border>
+            </div>
+            <div class="r-box">
+                <Border title="一层按钮">
+                </Border>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { onMounted, onUnmounted } from 'vue'
+import Border from './components/Border.vue'
+import useNowTime from "@/hook/nowTime";
+
+
+
+let { timeHtml } = useNowTime();
+onMounted(() => {
+    document.getElementById('app').style.backgroundColor = '#000928'
+})
+
+onUnmounted(() => {
+    document.getElementById('app').style.backgroundColor = '#100c2a'
+})
+</script>
+
+<style scoped>
+@import url("@/assets/css/Elevator/iconfont.css");
+
+.container {
+    position: relative;
+    width: 1920px;
+    height: 1080px;
+    background-image: url(./images/bg.png);
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    z-index: -2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 9, 40, 0.8196078431372549);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+
+.left,
+.right {
+    width: 650px;
+    height: 100%;
+}
+
+.center {
+    width: 600px;
+    height: 100%;
+    box-sizing: border-box;
+    border: 1px solid rgba(0, 255, 255, 1);
+    border-radius: 20px;
+}
+
+
+.left .header {
+    width: 100%;
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+}
+
+.left .header .date {
+    color: #fff;
+    font-size: 25px;
+    width: 100%;
+    height: 35%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+}
+
+.date-time {
+    margin-right: 20px;
+}
+
+.left .header .title {
+    width: 100%;
+    height: 65%;
+    font-family: "华文新魏", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 72px;
+    color: #00FFFF;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.left .l-content {
+    width: 100%;
+    height: calc(100% - 200px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.left .l-content .l-content-box {
+    width: 505px;
+    height: 540px;
+}
+
+.right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+.right .r-box {
+    width: 482px;
+    height: 328px;
+}
+</style>