11.7代码更新
This commit is contained in:
parent
0d4dafddc3
commit
cc19658b97
31
src/App.vue
31
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>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
padding: 0;
|
||||
overflow: hidden;
|
||||
color: rgba(221, 255, 253, 1);
|
||||
user-select: none;
|
||||
}
|
||||
*{
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -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},
|
||||
{default:getPath.record,select:getPath.recordSelect},
|
||||
{default:getPath.guns,select:getPath.gunsSelect},
|
||||
{default:getPath.monitor,select:getPath.monitorSelect},
|
||||
{default:getPath.operation,select:getPath.operationSelect}
|
||||
{title:'首页',default:getPath.home,select:getPath.homeSelect},
|
||||
{title:'温湿度记录',default:getPath.record,select:getPath.recordSelect},
|
||||
{title:'枪支离位报警',default:getPath.guns,select:getPath.gunsSelect},
|
||||
{title:'视频监控',default:getPath.monitor,select:getPath.monitorSelect},
|
||||
{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") {
|
||||
// return "state1";
|
||||
// } else if (row.state === "4" || row.state === "3") {
|
||||
// return "state2";
|
||||
// } else if (row.state === "0") {
|
||||
// return "state3";
|
||||
// }
|
||||
// 弹窗的显影
|
||||
const dialogShow = ref(false)
|
||||
function closeHandle(e){
|
||||
dialogShow.value = false
|
||||
}
|
||||
const deviceIndex = ref(0)
|
||||
// 侧边栏点击事件控制three中设备显隐
|
||||
|
|
@ -502,8 +504,8 @@ function toggleDevice(index){
|
|||
//height: vh(380);
|
||||
width: vw(44);
|
||||
position: fixed;
|
||||
bottom: 81px;
|
||||
left:vh(270);
|
||||
bottom: vh(81);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue