screenFront/src/views/intelligentShelves/index.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
})
</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>