11.7代码更新

src/App.vue

@@ -1,37 +1,18 @@
 <script setup>
-
+import NAV from '@/components/nav.vue'
-
 </script>
 
 <template>
+  <div id="app">
+    <NAV />
+    <router-view></router-view>
+  </div>
   <!-- <div id="three3D">
     <Three />
   </div> -->
   <!--  头部-->
-  <div class="header">
-    <div class="header-font">xxx部队厂房一张图</div>
-  </div>
-  <router-view></router-view>
-
 </template>
 
 <style scoped lang="scss">
-@import "./assets/font/font.css";
+
-.header {
-  width: 100%;
-  height: vh(108);
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 99;
-  font-family: pangmen;
-  text-shadow: 0px 0px 10px #34D1FF, 0px 3px 0px #24649A;
-  background-size: 100% 100%;
-  text-align: center;
-  background-image: url('@/assets/images/header.png');
-  &-font{
-    font-size: 2.75rem;
-    margin-top: 1rem;
-  }
-}
 </style>

src/assets/scss/common.scss

@@ -17,10 +17,10 @@ $designHeight: 1080;
 
 //px转为vw的函数
 @function vw($px) {
-  @return math.div($px , $designWidth) * 100%;
+  @return math.div($px , $designWidth) * 100vw;
 }
 
 //px转为vh的函数
 @function vh($px) {
-  @return math.div($px , $designHeight) * 100%;
+  @return math.div($px , $designHeight) * 100vh;
 }

src/components/dialog.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="el-overlay">
+    <div class="box">
+      <div class="box-header">
+        <div class="box-title">库存消息</div>
+        <div class="box-btn" @click="close"></div>
+      </div>
+      <div class="box-content">
+        <el-table :data="list" style="width: 100%">
+          <el-table-column prop="batchNum" label="批次号" width="180" />
+          <el-table-column prop="itemDesc" label="品牌" width="180" />
+          <el-table-column prop="inTime" label="入库时间" />
+          <el-table-column prop="weight" label="重量(kg)" />
+          <el-table-column prop="boxCount" label="箱数" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { onMounted, ref } from "vue";
+import getPath from "@/utils/getPath";
+const emit = defineEmits(["close"]);
+const list = ref([
+  {
+    batchNum: "YXZZP2303001",
+    itemDesc: "利群(新版)烟丝",
+    inTime: "2023-04-08",
+    weight: "2767.52",
+    boxCount: "66",
+  },
+]);
+function close() {
+  emit("close", false);
+}
+onMounted(() => {
+ 
+});
+</script>
+<style scoped lang="scss">
+.box {
+  width: vw(1088);
+  height: vh(636);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  margin: auto;
+  background-image: url("@/assets/images/dialog-bg.png");
+  background-size: 100% 100%;
+  &-header {
+    width: 100%;
+    height: vh(60);
+    font-family: "pangmen";
+    display: flex;
+    font-size: 1.875rem;
+    justify-content: center;
+  }
+  &-title {
+    line-height: vh(60);
+  }
+  &-content {
+    padding: vh(20) vw(20);
+    height: vh(636 - 60);
+    box-sizing: border-box;
+  }
+  &-btn {
+    background-image: url("@/assets/images/close.png");
+    width: vw(34);
+    height: vh(34);
+    position: absolute;
+    right: vw(20);
+    top: vh(12);
+    cursor: pointer;
+  }
+}
+:deep(.el-table__row--striped) {
+  background-image: none !important;
+}
+
+// :deep(tr.el-table__row td.el-table__cell) {
+//   background-color: rgba(174, 211, 255, 0.20) !important;
+
+// }
+
+:deep(.el-table__inner-wrapper::before) {
+  background-color: transparent !important;
+}
+:deep(.el-table .el-table__cell) {
+  padding: 0;
+}
+:deep(.el-table .cell) {
+  height: 100%;
+  line-height: vh(48);
+}
+:deep(.el-table tr),
+:deep(.el-table),
+:deep(.el-table th),
+:deep(.el-table td) {
+  background-color: transparent;
+}
+:deep(.el-table__row) {
+  height: vh(48);
+}
+:deep(.el-table) {
+  color: rgba(233, 244, 255, 1);
+  font-size: 0.8rem;
+  height: 100%;
+  --el-table-row-hover-bg-color: rgba(174, 211, 255, 0.2) !important;
+}
+:deep(.el-table thead) {
+  color: rgba(255, 255, 255, 1);
+  font-size: 0.8rem;
+  background-image: url("@/assets/images/dialog/table-thead.png");
+  line-height: vh(48);
+  font-weight: normal;
+}
+:deep(.el-table th.el-table__cell.is-leaf),
+:deep(.el-table td.el-table__cell) {
+  border-color: transparent;
+}
+</style>

src/components/nav.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="nav">
+      <div class="nav-font">xxx部队厂房一张图</div>
+    </div>
+</template>
+<script setup>
+
+</script>
+<style scoped lang="scss">
+@import "@/assets/font/font.css";
+.nav {
+  width: 100%;
+  height: vh(108);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  font-family: pangmen;
+  text-shadow: 0px 0px 10px #34d1ff, 0px 3px 0px #24649a;
+  background-size: 100% 100%;
+  text-align: center;
+  background-image: url("@/assets/images/header.png");
+  &-font {
+    font-size: 2.75rem;
+    margin-top: 1rem;
+  }
+}
+</style>

src/style.scss

@@ -5,6 +5,7 @@
     padding: 0;
     overflow: hidden;
     color: rgba(221, 255, 253, 1);
+    user-select: none;
 }
 *{
     margin: 0;

src/views/home/index.vue

@@ -1,9 +1,10 @@
 <template>
+<NAV />
 <!--  侧边栏显隐-->
   <div class="aside">
     <ul class="aside-ul">
 
-      <li class="aside-li" v-for="(item,index) in asideList" @click="toggleDevice(index)">
+      <li class="aside-li" :key="index" v-for="(item,index) in asideList" @click="toggleDevice(index)">
         <img :src="deviceIndex===index?item.select:item.default" alt="" srcset="">
         <img class="aside-li-msg" v-if="deviceIndex===index" :src="item.rightImg" alt="" srcset="">
       </li>
@@ -211,17 +212,22 @@
   <!--  底部-->
   <div class="footer">
       <ul class="footer-ul">
-        <li class="footer-ul-li" v-for="(item,index) in footerList">
+        <li class="footer-ul-li" v-for="(item,index) in footerList" @click="dialogShow=true">
           <img :src="item.default" alt="">
         </li>
       </ul>
   </div>
+
+  <!-- 底部点击弹框 -->
+  <Dialog @close="closeHandle" v-if="dialogShow"/>
 </template>
 <script setup>
 import getPath from "@/utils/getPath.js";
 import Three from '@/components/Three.vue'
 import {ref} from 'vue'
 import cameraUrl from '@/assets/images/camera.png'
+import NAV from '@/components/nav.vue'
+import Dialog from '@/components/dialog.vue'
 // 侧边栏
 const asideList = ref([
   {
@@ -262,11 +268,11 @@ const asideList = ref([
 ])
 // 底部栏
 const footerList = ref([
-  {default:getPath.home,select:getPath.homeSelect},
+  {title:'首页',default:getPath.home,select:getPath.homeSelect},
-  {default:getPath.record,select:getPath.recordSelect},
+  {title:'温湿度记录',default:getPath.record,select:getPath.recordSelect},
-  {default:getPath.guns,select:getPath.gunsSelect},
+  {title:'枪支离位报警',default:getPath.guns,select:getPath.gunsSelect},
-  {default:getPath.monitor,select:getPath.monitorSelect},
+  {title:'视频监控',default:getPath.monitor,select:getPath.monitorSelect},
-  {default:getPath.operation,select:getPath.operationSelect}
+  {title:'运维状况',default:getPath.operation,select:getPath.operationSelect}
 ])
 // 报警列表
 const alarmList = ref({
@@ -482,14 +488,10 @@ function  getColor(state) {
     return "#52e76f";
   }
 }
-function getRowColor({ row }) {
+// 弹窗的显影
-  // if (row.state === "1" || row.state === "2") {
+const dialogShow = ref(false)
-  //   return "state1";
+function closeHandle(e){
-  // } else if (row.state === "4" || row.state === "3") {
+  dialogShow.value = false
-  //   return "state2";
-  // } else if (row.state === "0") {
-  //   return "state3";
-  // }
 }
 const deviceIndex = ref(0)
 // 侧边栏点击事件控制three中设备显隐
@@ -502,8 +504,8 @@ function toggleDevice(index){
   //height: vh(380);
   width: vw(44);
   position: fixed;
-  bottom: 81px;
+  bottom: vh(81);
-  left:vh(270);
+  left:vw(456);
   z-index:99;
   &-li{
     width: 100%;
@@ -512,7 +514,7 @@ function toggleDevice(index){
     &-msg{
       position: absolute;
       left: 107%;
-      top: 7%;
+      top: 0;
     }
   }
 }