hsq-pro/src/views/vent/monitorManager/hsqHome/components/CustomGalleryNew.vue

<template>
  <div class="custom-gallery-new">
    <div class="custom-top">
      <div class="gallery-new-box">
        <div class="gallery-content" v-for="(item, index) in option" :key="index">
          <div :class="index % 2 == 0 ? 'gallery-content-text' : 'gallery-content-text-r'">{{ item.label }}</div>
          <div :class="index % 2 == 0 ? 'gallery-content-value' : 'gallery-content-value-r'">{{ galleryData ?
            galleryData[item.value] : 0 }}</div>
        </div>
        <div class="gallery-content">
          <SvgIcon class="icon-style2" size="30" name="device-status" />
        </div>
      </div>
    </div>
    <div class="custom-bottom">
      <CommonTable :columns="deviceColumns" :table-data="tableData"></CommonTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { SvgIcon } from '/@/components/Icon';
import CommonTable from './CommonTable.vue';
import { deviceColumns } from '../hsqHome.data.js';

let props = defineProps({
  option: {
    type: Array as any
  },
  galleryData: {
    type: Object
  },
  tableData: {
    type: Array as any
  },
})
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

.custom-gallery-new {
  --image-gallery-bg: url('@/assets/images/home-container/configurable/dusthome/gallery-bg.png');
  --image-gallery-bg-b: url('@/assets/images/home-container/configurable/dusthome/gallery-bg-b.png');
  --image-content-label: url('/@/assets/images/home-container/configurable/hsq/1-5.png');
  --image-content-text: url('/@/assets/images/company/content-text.png');
  --image-list-head: url('/@/assets/images/home-container/configurable/firehome/list-head.png');
  --image-content-label-d: url(/@/assets/images/home-container/configurable/minehome/content-label.png);
  --image-content-body-d: url('/@/assets/images/home-container/configurable/minehome/content-body.png');
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;

  .custom-top {
    width: 100%;
    height: 40%;
  }

  .custom-bottom {
    width: 100%;
    height: 60%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .gallery-new-box {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--image-gallery-bg) no-repeat;
    background-size: 100% 100%;
  }

  .gallery-content {
    position: absolute;

    &:nth-child(1) {
      left: 22px;
      top: 4px;
    }

    &:nth-child(2) {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      right: 24px;
      top: 4px;
    }

    &:nth-child(3) {
      left: 22px;
      top: 72px;
    }

    &:nth-child(4) {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      right: 24px;
      top: 72px;
    }

    &:nth-child(5) {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .gallery-content-text {
      margin-bottom: 2px;
    }

    .gallery-content-text-r {
      margin-bottom: 2px;
    }

    .gallery-content-text1 {
      font-size: 24px;
      font-family: 'douyuFont';
    }

    .gallery-content-value,
    .gallery-content-value-r {
      font-family: 'douyuFont';
      color: #fff;
    }

  }

}
</style>