baise-pc-vue/src/components/PicturePreview.vue

<template>
  <el-dialog
    v-model="dialogVisible"
    width="60%"
    class="picture-preview-wrap v-dialog"
    :show-close="false"
    top="10vh"
    append-to-body
  >
    <div class="dialog-body">
      <div ref="imageRef" v-if="isArray">
        <el-carousel
          ref="carouselRef"
          height="80vh"
          :initial-index="curIndex"
          :autoplay="false"
          indicator-position="none"
        >
        <template v-for="item in imageUrl" :key="item">
          <template v-for="ele in ['07','08','09','10','11','12','13']" :key="ele">
             <el-carousel-item >
            <!-- <img
              class="image no-events"
              :src="item.imgPath"
              alt=""
              fit="cover"
            /> -->
              <img
                class="image no-events"
                :src="require(`@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-${ele}.jpg`)"
                alt=""
                fit="cover"
              />
            <div class="watermark-style">
              <div class="left">
                <div class="region">2区</div>
                <div class="date">{{ item.uploadDate }}</div>
                <div class="whq">
                  {{ item.bigPeriodName
                  }}<span v-show="item.bigPeriodName && item.smallPeriodName"
                    >-</span
                  >{{ item.smallPeriodName }}
                </div>
                <div class="code">
                  <div class="code-txt">生长正常</div>
                </div>
                <div class="weather">
                  <div class="temperature">
                    <img src="@/assets/img/sun_icon.png" alt="" />
                    <div class="num">
                      <div>26-32℃</div>
                    </div>
                  </div>
                  <div class="temperature">
                    <img src="@/assets/img/rain_icon.png" alt="" />
                    <div class="num">
                      <div>60% 0.34ｍl</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
              </el-carousel-item>
          </template>
        </template>
        </el-carousel>
      </div>

      <div style="height: 100%" v-else>
        <img
          class="image no-events"
          :src="imageUrl.filename + '?x-oss-process=image/resize,w_2000'"
          alt=""
          fit="cover"
          ref="imageRef"
        />
        <div class="watermark-style">
          <div class="left">
            <div class="region">2区</div>
            <div class="date">{{ imageUrl.uploadDate }}</div>
            <div class="whq">
              {{ imageUrl.bigPeriodName
              }}<span
                v-show="imageUrl.bigPeriodName && imageUrl.smallPeriodName"
                >-</span
              >{{ imageUrl.smallPeriodName }}
            </div>
            <div class="code">
              <div class="code-txt">生长正常</div>
            </div>
            <div class="weather">
              <div class="temperature">
                <img src="@/assets/img/sun_icon.png" alt="" />
                <div class="num">
                  <div>26-32℃</div>
                </div>
              </div>
              <div class="temperature">
                <img src="@/assets/img/rain_icon.png" alt="" />
                <div class="num">
                  <div>60% 0.34ｍl</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 自定义水印内容 -->
      <!-- <slot v-else></slot> -->
    </div>
  </el-dialog>
</template>

<script setup>
import eventBus from "@/api/eventBus";
import { ref, watch, computed } from "vue";
const props = defineProps({
  imageUrl: {
    type: [Object, Array],
    default: () => {},
  },
  switchValue: {
    type: Boolean,
    default: false,
  },
  customWatermark: {
    type: Boolean,
    default: false,
  },
  curIndex: {
    type: Number,
    default: 0,
  },
});

const curDate = new Date();
const curYear = curDate.getFullYear();
const curMonth = curDate.getMonth() + 1;
const curDay = curDate.getDate();

const isArray = computed(() => Array.isArray(props.imageUrl));

const dialogVisible = ref(false);

eventBus.on('dialog:show',(e)=>{
  dialogVisible.value = e
})

const carouselRef = ref(null);
const imageRef = ref(null);

const caruuselItem = ref(null);
</script>

<style lang="scss">
.picture-preview-wrap {
  padding: 0;
  .el-dialog__header{
    padding-bottom: 0 !important;
  }
  .dialog-body {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .image {
      width: 100%;
      height: 100%;
    }
  }
}
::v-deep {
  .el-carousel__arrow {
    background: rgba(0, 0, 0, 0.4);
    width: 50px;
    height: 50px;
    font-size: 28px;
  }
}
</style>

<style lang="scss">
.picture-preview {
  height: 89%;
  box-sizing: border-box;
  .el-dialog__body {
    height: 100%;
    box-sizing: border-box;
  }
}
</style>