大屏路由配置,基本框架构建

package.json

@@ -77,6 +77,7 @@
     "fast-glob": "3.3.2",
     "globals": "15.12.0",
     "postcss": "8.4.36",
+    "postcss-px-to-viewport": "^1.1.1",
     "prettier": "3.2.5",
     "sass": "1.72.0",
     "typescript": "5.7.2",

src/router/index.ts

@@ -93,6 +93,11 @@ export const constantRoutes: RouteRecordRaw[] = [
     path: '/test',
     component: () => import('@/views/materials/materials/index.vue'),
     hidden: true
+  },
+  {
+    path: '/gisHome',
+    component: () => import('@/views/gisHome/index.vue'),
+    hidden: true
   }
 ];
 

src/views/gisHome/css/gis.scss

@@ -0,0 +1,13 @@
+$vm_base: 1920;
+$vh_base: 1080;
+// 计算vw
+@function vw($px) {
+  @return calc(($px / $vm_base) * 100vw);
+}
+
+// 计算vh
+@function vh($px) {
+  @return calc(($px / $vh_base) * 100vh);
+}
+
+

src/views/gisHome/index.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="h100vh bg-black w100vw">
+    <div class="header h23.25 flex px-5 items-center justify-between mb-7.5">
+      <div class="productionday h12 flex items-center">
+        <img src="@/assets/images/projectLogo.png" alt="" />
+        <img src="@/assets/images/projectday.png" alt="" />
+        <img src="@/assets/images/day.png" alt="" />
+        <img src="@/assets/images/days.png" alt="" />
+      </div>
+      <div class="calendar flex items-center pt-3.5">
+        <div class="Weather text-white flex items-center mr-7.5">
+          <img src="@/assets/images/Weather.png" alt="" class="w12.5" />
+          <span class="textBlack">多云</span><span class="robotocondensed">9°/18°</span>
+        </div>
+        <div class="weeks">
+          <span class="textBlack">周一(</span> <span class="robotocondensed">2024.3.11 08:35:46</span> <span class="textBlack">)</span>
+        </div>
+        <div class="Segmentation mx-5">
+          <div class="w0.75 h2.5 bg-#43E2CB mb-1"></div>
+          <div class="w0.75 h2.5 bg-#43E2CB"></div>
+        </div>
+        <div class="w28 h5.75"></div>
+      </div>
+    </div>
+    <div class="content px-5">
+      <div class="situation">
+        <div class="main">
+          <div class="title">
+            <div class="flex items-center">
+              <img src="@/assets/images/ligner.png" alt="" />
+              <div class="w100% flex justify-between items-center">
+                <div class="subTitle flex items-center">
+                  <img src="@/assets/images/jigong.png" alt="" />
+                  <span>人员情况</span>
+                </div>
+                <div class="hint">PERSONNEL SITUATION</div>
+              </div>
+              <div class="mark"></div>
+            </div>
+            <div class="ligner"></div>
+          </div>
+          <div class="cardList">
+            <div class="card">
+              <div class="iconImg">
+                <img src="@/assets/images/Attendancerate.png" alt="" />
+              </div>
+              <p>总人数</p>
+              <div class="peopleNum"><span>259</span>人</div>
+            </div>
+            <div class="card">
+              <div class="iconImg">
+                <img src="@/assets/images/attendanceperson.png" alt="" />
+              </div>
+              <p>出勤人</p>
+              <div class="peopleNum"><span>259</span>人</div>
+            </div>
+            <div class="card">
+              <div class="iconImg">
+                <img src="@/assets/images/Attendancerate.png" alt="" />
+              </div>
+              <p>出勤率</p>
+              <div class="peopleNum"><span>100</span>%</div>
+            </div>
+          </div>
+          <div class="title">
+            <div class="flex items-center">
+              <img src="@/assets/images/ligner.png" alt="" />
+              <div class="flex justify-between w100% items-center">
+                <div class="subTitle flex items-center">
+                  <img src="@/assets/images/Machinery.png" alt="" />
+                  <span>机械情况</span>
+                </div>
+                <div class="hint">MECHANICAL CONDITION</div>
+              </div>
+              <div class="mark"></div>
+            </div>
+            <div class="ligner"></div>
+          </div>
+        </div>
+        <div class="topleft"></div>
+        <div class="bottomright"></div>
+      </div>
+      <div class="management"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+@import './css/gis.scss';
+
+.header {
+  background-image: url('@/assets/images/header.png');
+  //   background-size: 100% 100%;
+}
+
+.title {
+  > img {
+    width: 14px;
+    height: 35px;
+  }
+
+  .subTitle {
+    img {
+      width: 18.8px;
+      height: 20px;
+      margin-right: vw(10);
+    }
+
+    span {
+      text-shadow: 0px 0px 8px rgba(2, 3, 7, 0.35);
+      font-size: vw(20);
+      font-weight: 500;
+      letter-spacing: 0px;
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+
+  .hint {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(204, 204, 204, 0.5);
+    margin-right: vw(20);
+  }
+
+  .mark {
+    width: vw(2);
+    height: vh(14);
+    background: rgba(67, 226, 203);
+    margin-right: vw(10);
+  }
+
+  .ligner {
+    height: 1px;
+    background: linear-gradient(to right, transparent 0%, #43e2cb 90%);
+    margin-left: vw(14);
+  }
+}
+
+.robotocondensed {
+  font-weight: 700;
+  letter-spacing: 0px;
+  line-height: 23.17px;
+  color: rgba(230, 247, 255, 1);
+  text-align: right;
+  vertical-align: top;
+  font-family: 'Roboto Condensed';
+}
+
+.textBlack {
+  letter-spacing: 0px;
+  line-height: vw(23.17);
+  color: rgba(230, 247, 255, 1);
+  font-family: '思源黑体';
+}
+
+.situation {
+  width: vw(449);
+  height: vh(927);
+  background: rgb(1, 26, 33, 0.4);
+  border: 2px solid #000000;
+  position: relative;
+  backdrop-filter: blur(8px);
+
+  .main {
+    padding-top: vh(30);
+
+    .cardList {
+      padding: 0 vw(20);
+      margin-top: vh(20);
+      margin-bottom: vh(30);
+      display: flex;
+      justify-content: space-between;
+
+      .card {
+        border: 1px dashed rgba(67, 226, 203, 0.3);
+        width: vw(112);
+        height: vh(155);
+        padding-top: vh(15);
+        text-align: center;
+        color: rgba(255, 255, 255, 1);
+
+        img {
+          width: vw(44);
+          height: vh(44);
+          margin-bottom: vh(20);
+        }
+
+        > p {
+          font-size: vw(14);
+          margin-top: 0;
+          margin-bottom: vw(10);
+          font-family: '思源黑体';
+        }
+
+        .peopleNum {
+          font-weight: 400;
+          font-size: vw(14);
+
+          text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 1);
+          color: rgba(230, 247, 255, 1);
+
+          span {
+            font-size: vw(24);
+            font-weight: 700;
+          }
+        }
+      }
+    }
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding: 2px;
+    background: linear-gradient(to bottom right, #43e2cb 0%, transparent 50%);
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    opacity: 0.4;
+    z-index: -1;
+  }
+
+  .topleft {
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    background-image: url('@/assets/images/topleft.png');
+  }
+
+  .bottomright {
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background-image: url('@/assets/images/bottomright.png');
+  }
+}
+</style>