order-ui-pc/src/views/bigScreen/bigScreenNew/index.vue

<template>
  <div class="datavScr box">
    <div
      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
    >
      <div class="dataBox">
        <div class="top">
          <div style="width: 35%">
            <topLeft></topLeft>
          </div>
          <div style="width: 20%">
            <topCenter></topCenter>
          </div>
          <div
            style="width: 35%; "
          >
            <div style="width: 100%">
              <topRight1></topRight1>
            </div>
            <div style="width: 100%">
              <topRight2></topRight2>
            </div>
          </div>
        </div>

        <div class="center">
          <div style="width: 30%">
            <centerLeft></centerLeft>
          </div>
          <div style="width: 30%">
            <centerCon></centerCon>
          </div>
          <div style="width: 30%">
            <centerRight></centerRight>
          </div>
        </div>

        <div class="bottom">
          <div style="width: 35%">
            <bottomLeft></bottomLeft>
          </div>
          <div style="width: 20%">
            <bottomCenter></bottomCenter>
          </div>
          <div style="width: 35%">
            <bottomRight></bottomRight>
          </div>
        </div>
      </div>
    </div>

    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>

<script>
// import drawMixin from "../drawMixin";
import { mapGetters } from "vuex";
import resToken from "@/mixins/resToken";
import topLeft from "./components/topLeft";
import topCenter from "./components/topCenter";
import topRight1 from "./components/topRight1";
import topRight2 from "./components/topRight2";
import centerLeft from "./components/centerLeft";
import centerCon from "./components/centerCon";
import centerRight from "./components/centerRight";
import bottomLeft from "./components/bottomLeft";
import bottomCenter from "./components/bottomCenter";
import bottomRight from "./components/bottomRight";

export default {
  mixins: [resToken],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "bigScreenNew"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      loading: true,
    };
  },
  components: {
    topLeft,
    topCenter,
    topRight1,
    topRight2,
    centerLeft,
    centerCon,
    centerRight,
    bottomLeft,
    bottomCenter,
    bottomRight
  },
  mounted() {},
  beforeDestroy() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.datavScr.box {
  width: 100%;
//   height: 100vh;
    // background: #000;
    // background: url("./img/pageBg.png");
    background: url("./img/1.jpeg");
    background-size: 100% 100%;
  margin: 0;
  padding: 20px 20px 70px;
  // color: #fff;
}
.dataBox {
  width: 100%;
  height: 100%;
  min-width: 1300px;

}

.top {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.center{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.bottom{
width: 100%;
  display: flex;
  justify-content: space-between;
//   margin-top: 30px;
  max-height: 400px;
}
</style>