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">
          <!-- {{ detail }} -->
          <div class="detail-wrapper">
            <div class="back" @click="$router.go(-1)"></div>
            <div class="info">
              <div class="show-case"></div>
              <h3 class="title">湘鄂赣省工农银行洋银叁角纸币</h3>
              <div class="label-list">
                <span>时代：土地革命时期</span>
                <span>来源：澄潭三星</span>
                <span>质地：纸质</span>
                <span>级别：二级</span>
              </div>
              <div class="text">
                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
              </div>
            </div>
          </div>
        </div>
      </div>
      <side-menu />
    </div>
  </div>
</template>

<script setup>
import { watchEffect, ref, onMounted, computed } from "vue";
import { useFullscreen } from "@vueuse/core";
import subHeader from "../components/subHeader";
import sideMenu from "../components/sideMenu";
import heroSubTitle from "../components/heroSubTitle";
import { useInfoStore } from "../store/info";
const title = ref("detail");
const infoStore = useInfoStore();
const detail = computed(() => infoStore.detail);

const props = defineProps({
  id: {
    type: [String, Number],
    default: () => null,
    required: true,
  },
});
watchEffect(() => {
  document.title = title.value;
  if (props.id) {
    infoStore.getDetail(props.id);
  }
});
</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;
    }
    .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>