HuiZhouGuJianZhu/src/components/CastView.vue

<template>
  <div class="cast-view">
    <h1>编 委 会</h1>
    <div class="group-1">
      <div>主&emsp;&emsp;&emsp;任：雷修佛</div>
      <div>副&emsp;主&emsp;任：徐大珍&emsp;郑道春&emsp;卞&emsp;坚&emsp;季&emsp;永</div>
      <div>编委会成员：徐&emsp;康&emsp;王&emsp;毅&emsp;陈&emsp;雯&emsp;徐士景&emsp;丁&emsp;薇</div>
    </div>
    <div class="splitter" />
    <div class="group-1">
      <div>
        <span style="letter-spacing: 0.5em;">出品</span>人：田&emsp;龙
      </div>
      <div>指导专家：黄&emsp;成</div>
      <div>策划编辑：吴&emsp;雷</div>
      <div>执行策划：倪钦霞</div>
      <div>责任编辑：王&emsp;玮&emsp;江露晨&emsp;鲁祎晨</div>
      <div>技术编辑：张骏驰&emsp;刘璐璐</div>
      <div>平面设计：黄&emsp;成&emsp;符文卓&emsp;陈&emsp;娟&emsp;苏晓宇&emsp;梁&emsp;磊&emsp;戴辰阳</div>
      <div>封面设计：李新元</div>
    </div>
    <div class="group-bottom">
      <div>ISBN 978-7-900878-38-0</div>
      <div>时代新媒体出版社有限责任公司</div>
    </div>
    <button
      v-click-audio
      class="back"
      @click="$emit('close')"
    >
      <img
        class=""
        src="@/assets/images/btn-back.png"
        alt=""
        draggable="false"
      >
    </button>
  </div>
</template>

<script>
import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'

export default {
  emits: ['close'],
  setup() {
    const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()

    return {
      windowSizeWhenDesign,
      unit,
    }
  },
}
</script>

<style lang="less" scoped>
.cast-view{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10;
  border-radius: calc(50 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
  color: #3c737b;
  font-weight: bold;
  font-family: serif-bold;
  >h1{
    margin-top: 1.5em;
    font-size: calc(40 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    margin-bottom: 1.5em;
  }
  >.group-1{
    width: 50%;
    margin-bottom: calc(50 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    >div{
      font-size: calc(28 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
      margin-bottom: 0.7em;
    }
  }
  >.splitter{
    width: 50%;
    border-top: 1px dashed #3c737b;
    margin-bottom: calc(50 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
  }
  >.group-bottom{
    >div{
      font-size: calc(28 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
      margin-bottom: 0.7em;
      text-align: center;
    }
  }
  >button.back {
    position: absolute;
    width: calc(70 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    height: calc(72 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    right: calc(30 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    bottom: calc(30 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
    &:hover {
      transform: scale(1.1);
    }
    >img{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>