QiuShou-kiosk/src/views/survey.vue

<template>
  <div class="main">
    <div class="content">
      <sub-header />
      <div class="left">
        <hero-sub-title :type="4" />
        <div class="detail">
          <div class="info">
            <n-grid :y-gap="YGap" :cols="1" class="tab-grid">
              <template v-for="(_, index) in 16">
                <n-gi>
                  <survey-box
                    :id="`${index + 1}`"
                    title="这是一段标题这是一段标题"
                    content="这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段摘要这是一段..."
                    time="2023-01-02"
                  />
                </n-gi>
              </template>
            </n-grid>
          </div>
        </div>
      </div>
      <side-menu />
    </div>
  </div>
</template>

<script setup>
import { watchEffect, ref } from "vue";

import subHeader from "../components/subHeader";
import sideMenu from "../components/sideMenu";
import heroSubTitle from "../components/heroSubTitle";
import surveyBox from "../components/surveyBox";
const title = ref("detail");
const YGap = ref(50);

watchEffect(() => {
  document.title = title.value;
});
</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: #fff;
  padding: 2rem 3rem 4rem 3rem;

  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;
  }
  .info {
    max-width: 66.8125rem;
    margin: 0 auto;
    font-size: 20px;

    .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>