sishitongtang-crm/src/views/bigSreen/component/CenterBottom.vue

<template>
  <div class="bottom">
    <div class="bs-card d-flex flex-column">
      <div class="bs-card__title jc-between">
        <p class="bs-card__title--text">医疗陪护</p>

        <div class="color-white">
          <span class="color-word">1</span>
          <span>/</span>
          <span>{{ yiliaopeihu.length }}</span>
        </div>
      </div>

      <div class="bs-card__body flex-1" @click="imgLabel = '医疗陪护',previewImgs = yiliaopeihu.map(i => i.file),isShowPreview = true">
        <el-image fit="cover" class="el-img" :src="yiliaopeihu[0] ? yiliaopeihu[0].file : ''" alt="" />
        <div class="img-title">{{ yiliaopeihu[0] ? yiliaopeihu[0].label : '' }}</div>
      </div>
    </div>
    <div class="bs-card d-flex flex-column">
      <div class="bs-card__title jc-between">
        <p class="bs-card__title--text">物业项目</p>

        <div class="color-white">
          <span class="color-word">1</span>
          <span>/</span>
          <span>{{ xiangmu.length }}</span>
        </div>
      </div>

      <div class="bs-card__body flex-1" @click="imgLabel = '物业项目',previewImgs = xiangmu.map(i => i.file),isShowPreview = true">
        <el-image fit="cover" class="el-img" :src="xiangmu[0] ? xiangmu[0].file : ''" alt="" />
        <div class="img-title">{{ xiangmu[0] ? xiangmu[0].label : '' }}</div>
      </div>
    </div>
    <div class="bs-card d-flex flex-column">
      <div class="bs-card__title jc-between">
        <p class="bs-card__title--text">分公司/站点</p>

        <div class="color-white">
          <span class="color-word">1</span>
          <span>/</span>
          <span>{{ fengongsi.length }}</span>
        </div>
      </div>

      <div class="bs-card__body flex-1" @click="imgLabel = '分公司/站点',previewImgs = fengongsi.map(i => i.file),isShowPreview = true">
        <el-image fit="cover" class="el-img" :src="fengongsi[0] ? fengongsi[0].file : ''" alt="" />
        <div class="img-title">{{ fengongsi[0] ? fengongsi[0].label : '' }}</div>
      </div>
    </div>
    <div class="bs-card d-flex flex-column">
      <div class="bs-card__title jc-between">
        <p class="bs-card__title--text">活动集锦</p>

        <div class="color-white">
          <span class="color-word">1</span>
          <span>/</span>
          <span>{{ huodongjijin.length }}</span>
        </div>
      </div>

      <div class="bs-card__body flex-1" @click="imgLabel = '活动集锦',previewImgs = huodongjijin.map(i => i.file),isShowPreview = true">
        <el-image fit="cover" class="el-img" :src="huodongjijin[0] ? huodongjijin[0].file : ''" alt="" />
        <div class="img-title">{{ huodongjijin[0] ? huodongjijin[0].label : '' }}</div>
      </div>
    </div>

    <ImgPreview v-model="isShowPreview" :label="imgLabel" :imgs="previewImgs"></ImgPreview>
  </div>
</template>

<script>
import { getList } from "@/api/bigScreen"
import ImgPreview from "@/views/bigSreen/component/ImgPreview.vue";
export default {
  components: {
    ImgPreview
  },
  data() {
    return {
      pics: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],

      yiliaopeihu: [],
      xiangmu: [],
      fengongsi: [],
      huodongjijin: [],

      previewImgs: [],
      isShowPreview: false,
      imgLabel: "",
    }
  },
  methods: {
    async getData () {
      try {
        const res = await Promise.all([
          getList({
            type: 'yiliaopeihu'
          },false),
          getList({
            type: 'xiangmu'
          },false),
          getList({
            type: 'fengongsi'
          },false),
          getList({
            type: 'huodongjijin'
          },false)
        ])
        const [yiliaopeihu,xiangmu,fengongsi,huodongjijin] = res;
        this.yiliaopeihu = JSON.parse(yiliaopeihu?.data[0]?.value);
        this.xiangmu = JSON.parse(xiangmu?.data[0]?.value);
        this.fengongsi = JSON.parse(fengongsi?.data[0]?.value);
        this.huodongjijin = JSON.parse(huodongjijin?.data[0]?.value);
      } catch (err) {
        console.warn(err)
      }
    }
  },
  computed: {},
  created() {
    this.getData()
  }
}
</script>

<style scoped lang="scss">
.bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
  .bs-card {
    width: 332px;
    height: 203px;
    padding: 10px 25px;

    &__body {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      position: relative;

      & > img,& > .el-img {
        object-fit: cover;
        height: 128px;
        width: 372px;
      }

      .img-title {
        width: 100%;
        line-height: 29px;
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        background-color: rgba(1, 16, 57, 0.8);
      }
    }
  }
}
::v-deep .el-image-viewer__mask {
  transform: scale(2);
}
</style>