111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<template>
|
|
<div :class="$style['container']">
|
|
<div class="header">
|
|
<div class="title">
|
|
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.智能货架物联管理系统')" :titleTip="''"
|
|
:typeFun="['time']" :alarmType="[]">
|
|
</header2>
|
|
</div>
|
|
</div>
|
|
<div class="content" ref="Acontent">
|
|
<div class="left">
|
|
<ShelfPanel :config="panelConfig"></ShelfPanel>
|
|
<ShelfPanel :config="panelConfig"></ShelfPanel>
|
|
<ShelfPanel :config="panelConfig"></ShelfPanel>
|
|
<ShelfPanel :config="panelConfig"></ShelfPanel>
|
|
</div>
|
|
<div class="center">
|
|
<div class="center-t">
|
|
<CenterPanel :config="centerConfig"></CenterPanel>
|
|
</div>
|
|
|
|
<div class="center-b">
|
|
<ShelfPanel :config="panelConfig"></ShelfPanel>
|
|
<ShelfPanel :config="panelConfig"></ShelfPanel>
|
|
</div>
|
|
</div>
|
|
<div class="left">
|
|
<ShelfPanel :config="panelConfig"></ShelfPanel>
|
|
<ShelfPanel :config="panelConfig"></ShelfPanel>
|
|
<ShelfPanel :config="panelConfig"></ShelfPanel>
|
|
<ShelfPanel :config="panelConfig"></ShelfPanel>
|
|
</div>
|
|
</div>
|
|
<TipBox ></TipBox>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
import {ref} from "vue";
|
|
import header2 from "@/components/headerBox/header2.vue";
|
|
import ShelfPanel from "./components/ShelfPanel.vue";
|
|
import CenterPanel from "./components/CenterPanel.vue";
|
|
import TipBox from "./components/TipBox.vue";
|
|
import { useI18n } from 'vue-i18n'
|
|
let { t } = useI18n();
|
|
|
|
let panelConfig = ref({
|
|
width:434,
|
|
height:244,
|
|
})
|
|
let centerConfig = ref({
|
|
width:803,
|
|
height:600
|
|
})
|
|
|
|
function getGoodsShelvesList() {
|
|
setTimeout(()=>{
|
|
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<style module>
|
|
.container {
|
|
height: 1080px;
|
|
width: 1920px;
|
|
color: #20aec5;
|
|
background-color: #100c2a;
|
|
position: relative;
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
.content {
|
|
width: 100%;
|
|
--header: 100px;
|
|
height: calc(1080px - var(--header));
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
.center {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.center-t {
|
|
flex: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: end;
|
|
}
|
|
.center-b {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
align-items: end;
|
|
}
|
|
.center-b div {
|
|
margin: 0 20px;
|
|
}
|
|
</style>
|