shandong-2025-exhibition/packages/pc/src/views/Collection/detail.vue

<template>
  <div class="step2-detail">
    <div class="step2-detail__back" @click="$router.back()" />

    <div class="step2-detail-sidebar">
      <div
        class="step2-detail-sidebar-title animate__animated animate__duration-200 animate__fadeInLeft"
      >
        <p>{{ detail.realName }}</p>
        <p>{{ detail.era }}</p>
      </div>

      <img
        draggable="false"
        class="step2-detail-sidebar-img"
        :src="baseUrl + detail.img"
      />

      <swiper
        :modules="[FreeMode, Mousewheel]"
        :slides-per-view="'auto'"
        :space-between="7"
        :free-mode="true"
        :mousewheel="{
          enabled: true,
          forceToAxis: false,
        }"
        class="step2-detail-swiper"
      >
        <swiper-slide v-for="(item, index) in detail.imgs" :key="item.thumb">
          <el-image
            :src="baseUrl + item.thumb"
            fit="cover"
            preview-teleported
            :preview-src-list="detail.imgs.map((item) => baseUrl + item.img)"
            :initial-index="index"
          />
        </swiper-slide>
      </swiper>
    </div>

    <div class="step2-detail-content">
      <div v-if="detail.epigraph" class="step2-detail-epigraph">
        <p class="step2-detail-label">铭文详情</p>
        <div class="step2-detail-epigraph-content">
          <div class="step2-detail-epigraph-content-img">
            <el-image
              preview-teleported
              fit="contain"
              :src="baseUrl + detail.epigraph.thumb"
              :preview-src-list="[baseUrl + detail.epigraph.img]"
            />
          </div>
          <el-scrollbar class="step2-detail-epigraph-content-text">
            <p>{{ detail.epigraph.text }}</p>
          </el-scrollbar>
        </div>
      </div>

      <div class="step2-detail-desc">
        <p class="step2-detail-label">文字介绍</p>

        <el-scrollbar class="step2-detail-desc-text">
          <div v-html="detail.content" />
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { IRON_BULL_LIST, MONSTER_LIST, BUILDING_LIST } from "@canal/base";
import { Swiper, SwiperSlide } from "swiper/vue";
import { FreeMode, Mousewheel } from "swiper/modules";
import "swiper/css";

const route = useRoute();
const baseUrl = import.meta.env.VITE_PUBLIC_URL;
const LIST = [IRON_BULL_LIST, MONSTER_LIST, BUILDING_LIST];
const detail = LIST[route.params.id - 1][route.params.sid - 1];
</script>

<style scoped lang="scss">
@use "./detail.scss";
</style>