QiuShou-kiosk/src/views/collect-detail.vue

<template>
  <div class="main">
    <div class="content">
      <sub-header />
      <div class="left">
        <hero-sub-title :type="3" />
        <div class="detail">
          <div class="detail-wrapper">
            <div class="back" @click="$router.go(-1)"></div>
            <!-- {{ files }}
            {{ entity }} -->
            <div class="info">
              <!-- <div class="show-case"></div> -->
              <show-case
                :video="video"
                :gallery="gallery"
                :audio="audio"
                :model="model"
              />
              <h3 class="title">{{ entity.name }}</h3>
              <div class="label-list">
                <span>时代：{{ entity.dictAge }}</span>
                <span>来源：{{ entity.dictSource }}</span>
                <span>质地：{{ entity.dictTexture }}</span>
                <span>级别：{{ entity.dictLevel }}</span>
              </div>
              <div class="text">
                {{ entity.description }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <side-menu />
    </div>
  </div>
</template>

<script setup>
import { computed, unref, onMounted } from "vue";
import subHeader from "../components/subHeader";
import sideMenu from "../components/sideMenu";
import heroSubTitle from "../components/heroSubTitle";
import showCase from "../components/showCase";
import { useCollectStore } from "../store/collect";
const collectStore = useCollectStore();
const entity = computed(() => collectStore.entity);
const files = computed(() => collectStore.files);
const video = computed(() => collectStore.video);
const gallery = computed(() => collectStore.gallery);
const audio = computed(() => collectStore.audio);
const model = computed(() => collectStore.model);
const props = defineProps({
  id: {
    type: [String, Number],
    default: () => null,
    required: true,
  },
});

onMounted(() => {
  if (props.id) {
    collectStore.getDetail(props.id);
  }
});
watchEffect(() => {
  if (unref(entity).name) {
    document.title = unref(entity).name;
  }
});
;
</script>

<style lang="scss" scoped>
.detail {
  --main-show-case-background: #ddd5d5;
  --main-detail-margin: 1.875rem;
  --main-detail-padding: 1.875rem;
  // box-shadow: var(--main-box-shadow);
  margin: var(--main-detail-margin);
  margin-bottom: 0;
  flex: 1;
  border-radius: 0.8125rem;
  background-color: transparent;
  // padding: 2rem 3rem 4rem 3rem;
  background-image: var(--main-detail-background-img);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  overflow: hidden;

  .detail-wrapper {
    display: block;
    width: 100%;
    flex: 1;
    height: calc(100% - var(--main-detail-margin) - 10px);
    margin-top: var(--main-detail-margin);
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .back {
    background-image: url("/img/back_arrow.png");
    width: 7.5rem;
    height: 1.875rem;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 0.75rem;
    margin-left: 3rem;
  }
  .info {
    max-width: 66.8125rem;
    margin: 0 auto;
    font-size: 20px;
    padding-bottom: 5rem;
    .title {
      font-size: 1.875rem;
      line-height: 3.75rem;
      margin: 1.2rem 0;
    }
    .label-list {
      margin-bottom: 1.5rem;
      display: inline-flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 0 1.875rem;
      span {
        padding-left: 1.5625rem;
        background-image: url("/img/dot.png");
        background-repeat: no-repeat;
        background-size: 1.25rem 1.25rem;
        background-position: left center;
      }
    }
    .text {
      font-weight: 400;
      color: #6e6e6e;
      line-height: 2.125rem;
      font-size: 1.25rem;
    }
  }
  .show-case {
    max-width: 66.8125rem;
    height: 34.1875rem;
    background: var(--main-show-case-background);
  }
}
</style>