eep_page/src/views/book/courseware/preview/components/picture/PicturePreview.vue

<template>
  <div class="picture_area" :style="getAreaStyle()">
    <SerialNumberPosition :property="data.property" />

    <div class="main">
      <div class="view_area">
        <el-carousel
          v-if="'list' === data.property.view_method"
          ref="picture_carousel"
          class="view_independent"
          indicator-position="none"
          :autoplay="false"
        >
          <el-carousel-item v-for="(file, i) in data.file_list" :key="i">
            <el-image :id="file.file_id" :src="file.file_url" fit="contain" />
          </el-carousel-item>
        </el-carousel>
        <ul class="view_list">
          <li v-for="(file, i) in data.file_list" :key="i" @click="handleIndicatorClick(i)">
            <el-image :id="file.file_id" :src="file.file_url" fit="contain" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getPictureData } from '@/views/book/courseware/data/picture';
import PreviewMixin from '../common/PreviewMixin';

export default {
  name: 'PicturePreview',
  mixins: [PreviewMixin],
  data() {
    return {
      data: getPictureData(),
      curImgIndex: 0,
    };
  },
  methods: {
    handleIndicatorClick(index) {
      // 获取 Carousel 实例
      const carousel = this.$refs.picture_carousel;
      // 切换到对应索引的图片
      carousel.setActiveItem(index);
    },
  },
};
</script>

<style lang="scss" scoped>
.picture_area {
  display: grid;
  gap: 6px;
  padding: 8px;

  > .main {
    display: flex;
    margin: 4px auto;

    > span {
      display: flex;
    }
  }

  .main {
    grid-area: main;
    width: 100%;

    .view_area {
      width: 100%;

      :deep .el-carousel {
        margin-bottom: 16px;
        background-color: #d9d9d9;

        &__container::before {
          display: inline-block;
          padding-bottom: 55%;
          content: '';
        }

        &__container {
          height: 100%;
        }

        &__item {
          display: flex;
          justify-content: center;
          text-align: center;
        }
      }

      .view_list {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: auto;
        gap: 21px 32px;

        li {
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #d9d9d9;
        }

        .el-image {
          cursor: pointer;
        }
      }
    }
  }
}
</style>