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

<template>
  <transition name="fade">
    <div v-show="value" class="img-preview">
      <i class="el-icon-close close" @click="$emit('input',false)"></i>
      <div class="mask" @click.prevent.stop="$emit('input',false)"></div>
      <div class="img-container">
        <div style="background: #0d2067;height: 100%;width: 100%;display: flex;justify-content: space-evenly;align-items: center;flex-direction: column;">
          <div class="label">{{ label }}</div>

          <carousel-3d :key="key" :autoplay="true" :autoplay-timeout="5000" :display="3" :perspective="40" :width="660" :height="460" :controlsVisible="true">
            <slide v-for="(img, i) in data.files ? data.files.map(i => i.url) : myFiles" :index="i">
              <img style="width: 100%;height: 100%;object-fit: cover;" :src="img" alt="">
            </slide>
          </carousel-3d>

          <div class="label">
            <template v-if="data.customer">
              <span>被护理人：{{ data.customer.name }}</span>
            </template>
            <template v-if="data.nurse">
              <span>护理人：{{ data.nurse.name }}</span>
            </template>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { scheduleLog } from "@/api/schedule"
import { Carousel3d, Slide } from 'vue-carousel-3d';
export default {
  components: {
    Carousel3d,
    Slide,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
      required: true
    },
    data: {
      type: Object,
      default: () => ({})
    },
    label: String
  },
  data() {
    return {
      key: 0,
      myFiles: []
    }
  },
  methods: {},
  computed: {},
  watch: {
    data(newv) {
      if(!newv.hasOwnProperty('files')) {
        scheduleLog({
          id: newv.id
        },false).then(res => {
          this.myFiles = res?.map(i => i.upload_list)?.flat()?.map(i => i.upload?.url) || []
          ++this.key
        })
      }
      //每次都重新渲染 处理样式问题
      ++this.key
    }
  }
}
</script>

<style scoped lang="scss">
.img-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 999;
  inset: 0 0 0 0;

  .close {
    padding: 10px;
    font-size: 45px;
    width: 65px;
    height: 65px;
    color: #fff;
    position: absolute;
    right: 120px;
    top: 120px;
    border-radius: 100%;
    background-color: #5ec9ea;
  }
  .mask {
    background: #00000033;
    position: fixed;
    z-index: 999;
    inset: 0 0 0 0;
    transform: scale(2, 2);
  }
  .img-container {
    width: 1517px;
    height: 839px;
    border-radius: 10px;
    box-sizing: border-box;
    background: conic-gradient(
        #de8d51,
        #90b0b0,
        #b9723d,
        #7ac5e3
    );
    position: relative;
    z-index: 1000;
    padding: 5px;

    .label {
      font-size: 32px;
      color: #aaddff;
      font-weight: 500;
    }
  }
}

::v-deep .carousel-3d-container {
  //margin: auto;
}
::v-deep .carousel-3d-controls .next,::v-deep .carousel-3d-controls .prev {
  color: #fff;
  font-size: 120px;
}
::v-deep .carousel-3d-controls .next {
  right: 180px;
}
::v-deep .carousel-3d-controls .prev {
  left: 180px;
}
</style>