qiushou-kiosk/src/views/survey-detail.vue

<template>
  <div class="main">
    <div class="content">
      <sub-header />
      <div class="left">
        <hero-sub-title />
        <div class="detail">
          <div class="back" @click="$router.go(-1)"></div>
          <div class="info"></div>
        </div>
      </div>
      <side-menu />
    </div>
  </div>
</template>

<script setup>
import { watchEffect, ref } 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");

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;
  margin: var(--main-detail-margin);
  margin-bottom: 0;
  flex: 1;
  border-radius: 0.8125rem;
  padding: 2rem 3rem 4rem 3rem;
  overflow-y: scroll;
  background-image: var(--main-detail-background-img);
  background-size: cover;
  background-position: top 100%;
  background-repeat: no-repeat;

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