feat: 大屏

src/router/index.js

@@ -88,8 +88,13 @@ export const constantRoutes = [
       }
     ]
   },
-  
+  {
- 
+    path: '/inspector',
+    component: () => import('@/views/inspector/index'),
+    hidden: true
+  },
+
+
 ]
 
 // 动态路由，基于用户权限动态去加载

src/views/inspector/components/Card.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="card">
+    <div class="title">
+      标题
+    </div>
+    <div class="body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Card'
+}
+</script>
+
+<style scoped>
+.card {
+  position: relative;
+  border: 1px solid rgba(14, 253, 255, 0.5);
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  border-radius: 15px;
+}
+.title{
+  font-size: 20px;
+  font-weight: bolder;
+  color: #fff1cc;
+  margin-bottom: 10px;
+}
+.body{
+  position: relative;
+  z-index: 20;
+}
+</style>

src/views/inspector/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="bg">
+    <div class="title">
+      同步录音录像软件
+    </div>
+    <div class="inspector-container">
+      <div style="display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 20px">
+        <Card>
+          <div class="shu">
+            <span>6090.99</span>
+          </div>
+        </Card>
+        <Card/>
+        <Card/>
+        <Card/>
+      </div>
+      <div style="flex:1;display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 20px">
+        <Card/>
+        <Card/>
+        <Card/>
+        <Card/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import Card from "@/views/inspector/components/Card.vue";
+
+export default {
+  name: 'inspector',
+  components: {Card},
+}
+</script>
+
+<style scoped>
+:root {
+  font-size: 16px;
+}
+
+.bg {
+  margin: 0 auto;
+  width: 100%;
+  min-height: 100vh;
+  background: url(https://demo.eiun.net/web/003%20%E9%85%B7%E7%82%AB%E6%99%BA%E8%83%BD%E5%A4%A7%E5%B1%8F%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%BF%83/images/bg2.jpg) no-repeat;
+  background-size: cover;
+  padding: 0rem 3rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 27px;
+  font-weight: bolder;
+  color: rgba(14, 253, 255, 1);
+  height: 75px;
+  margin-bottom: 20px;
+}
+
+.inspector-container {
+  display: flex;
+  flex-flow: column;
+  //display: grid;
+  //grid-template-columns: repeat(4,minmax(0,1fr));
+  gap: 16px;
+  flex: 1;
+  margin-bottom: 40px;
+}
+
+.inspector-statistics {
+  display: grid;
+  grid-template-columns:repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.shu{
+  position: relative;
+  color: rgba(14, 253, 255, 1);
+  font-size: 20px;
+  font-weight: bolder;
+  margin-bottom: 10px;
+  font-family: dig;
+}
+</style>

vue.config.js

@@ -38,11 +38,11 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.0.3:18098`,
+        // target: `http://192.168.0.3:18098`,
         // target: `http://192.168.0.151:8099`,     //服务器
         // target: `http://192.168.3.10:8099`,        //耗子
         // target: `http://106.15.139.36:18090`,
-        
+
         // target: `http://120.79.202.7:443`,
         // target: `http://100.100.10.216:8099`,
         // target: 'http://106.15.139.36:18090',