NanjingMuseumWuJinZang/src/views/PaintingStyleDesc.vue

<template>
  <div class="painting-style-desc">
    <div class="bg-left" />
    <img
      class="title"
      src="@/assets/images/painting-style-title.png"
      alt=""
      draggable="false"
    >
    <div class="text">
      {{ specialDesc }}
    </div>
    <BtnBack
      class="button-back"
      @click="emit('close')"
    />
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, inject } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import useSizeAdapt from "@/useFunctions/useSizeAdapt"

const route = useRoute()
const router = useRouter()
const store = useStore()

const $env = inject('$env')

const emit = defineEmits('close')

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const specialDesc = configExcel['其他'][4]['修篁树石图'][1]['作品简介']
</script>

<style lang="less" scoped>
.painting-style-desc{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  >.bg-left{
    background: linear-gradient(90deg, #7b916b 0%, #94a586 100%);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: calc(57 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    background: -1;
  }
  >img.title{
    position: absolute;
    top: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    left: calc(1 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: calc(133 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(133 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }
  >.text{
    position: absolute;
    top: 24%;
    right: 9.5%;
    width: 67%;
    height: 66%;
    font-family: KaiTi, KaiTi;
    font-weight: 400;
    font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    color: #474747;
    line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    white-space: pre-line;
    overflow: auto;
    padding-right: 0.5em;
  }
}
</style>