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

<template>
  <div class="main">
    <div class="content">
      <sub-header />
      <div class="left">
        <hero-sub-title />
        <div class="detail">
          <div class="detail-wrapper">
            <!-- {{ detail }} -->
            <div class="back" @click="$router.go(-1)"></div>
            <div class="info">
              <div class="show-case" v-if="detail.video">
                <video
                  :src="domain + detail.video"
                  playsinline
                  controls
                ></video>
              </div>
              <h3 class="title">{{ detail.name }}</h3>

              <!-- <div class="label-list">
                <span>时代：土地革命时期</span>
                <span>来源：澄潭三星</span>
                <span>质地：纸质</span>
                <span>级别：二级</span>
              </div> -->
              <div class="time-container">
                <div class="time">
                  <span>{{ detail.publishDate }}</span>
                  <span>{{ typeLabel(detail.type) }} </span>
                </div>
              </div>

              <div class="text" v-html="detail.richText"></div>

              <div class="show-case" v-if="detail.thumb">
                <img :src="domain + detail.thumb" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <side-menu />
    </div>
  </div>
</template>

<script setup>
import { watchEffect, ref, onMounted, computed } from "vue";
import subHeader from "../components/subHeader";
import sideMenu from "../components/sideMenu";
import heroSubTitle from "../components/heroSubTitle";
import { useInfoStore } from "../store/info";

const infoStore = useInfoStore();
const detail = computed(() => infoStore.detail);
const domain = ref(import.meta.env.VITE_DOMAIN_URL);

const typeLabel = computed(() => (type) => {
  switch (type) {
    case "exhibition":
      return "展览";
    case "news":
      return "新闻";
    case "activity":
      return "活动";
    case "notice":
      return "通知";
  }
});
const props = defineProps({
  id: {
    type: [String, Number],
    default: () => null,
    required: true,
  },
});
onMounted(() => {
  if (props.id) {
    infoStore.getDetail(props.id);
  }
});
watchEffect(() => {
  if (unref(detail)) {
    document.title = unref(detail).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: transparent;
  // padding: 2rem 3rem 4rem 3rem;
  background-image: var(--main-detail-background-img);
  background-size: cover;
  background-position: top 100%;
  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: 1.25rem;
    padding-bottom: 5rem;
    .title {
      font-size: 1.875rem;
      line-height: 3.75rem;
      margin: 1.2rem 0;
      text-align: center;
    }
    .time-container {
      display: inline-flex;
      width: 100%;
      justify-content: center;
      align-items: center;
    }
    .time {
      display: inline-flex;
      font-size: var(--base-font-size);
      width: 250px;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
    }
    .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);
    border-radius: 1.3125rem;
    video,
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 1.3125rem;
    }
  }
}
</style>