添加cast展示功能

src/App.vue

@@ -107,6 +107,11 @@ export default {
   font-family: 'pinyin';
   src: url('@/assets/style/ReemKufi.ttf');
 }
+// 字体
+@font-face {
+  font-family: 'serif-bold';
+  src: url('@/assets/style/SourceHanSerifCN-Bold.otf');
+}
 // i {
 //   font-style: italic;
 // }
@@ -130,6 +135,19 @@ export default {
   opacity: 0;
 }
 
+.fade-in-out-quick-enter-active {
+  transition: opacity 0.5s;
+}
+.fade-in-out-quick-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-in-out-quick-enter-from {
+  opacity: 0;
+}
+.fade-in-out-quick-leave-to {
+  opacity: 0;
+}
+
 .fade-out-leave-active {
   transition: opacity 1s;
 }

src/components/CastView.vue

@@ -0,0 +1,111 @@
+<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;
+    }
+  }
+  >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>

src/views/Home.vue

@@ -117,6 +117,37 @@
         {{ item.name.split('').join('\n') }}
       </div>
     </button>
+
+    <button
+      v-show="!isShowCast"
+      v-click-audio
+      class="watch-cast"
+      :style="{
+        right: castBtnPos.value.x + 'px',
+        bottom: castBtnPos.value.y + 'px',
+      }"
+      @click="isShowCast = true"
+    >
+      <img
+        class=""
+        src="@/assets/images/btn-back.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
+
+    <transition name="fade-in-out-quick">
+      <CastView
+        v-if="isShowCast"
+        :style="{
+          left: castPos.value.x + 'px',
+          right: castPos.value.x + 'px',
+          top: castPos.value.y + 'px',
+          bottom: castPos.value.y + 'px',
+        }"
+        @close="isShowCast = false"
+      />
+    </transition>
   </div>
 </template>
 
@@ -124,11 +155,13 @@
 import { onMounted, onUnmounted, watch, ref, reactive, computed } from "vue"
 import StartUp from "@/components/StartUp.vue"
 import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
+import CastView from "@/components/CastView.vue"
 
 export default {
   name: 'HomeView',
   components: {
     StartUp,
+    CastView,
   },
   setup() {
     const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
@@ -175,6 +208,41 @@ export default {
       window.removeEventListener('resize', computeLionsPos)
     })
 
+    /**
+     * cast列表相关
+     */
+    const isShowCast = ref(false)
+
+    const castBtnPos = reactive({ value: [] })
+    function computeCastBtnPos() {
+      castBtnPos.value = utils.mapPosFromDraftToWindow({
+        x: 50,
+        y: 50,
+      }, 'contain')
+    }
+    onMounted(() => {
+      computeCastBtnPos()
+      window.addEventListener('resize', computeCastBtnPos)
+    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', computeCastBtnPos)
+    })
+
+    const castPos = reactive({ value: [] })
+    function computeCastPos() {
+      castPos.value = utils.mapPosFromDraftToWindow({
+        x: 50,
+        y: 50,
+      }, 'contain')
+    }
+    onMounted(() => {
+      computeCastPos()
+      window.addEventListener('resize', computeCastPos)
+    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', computeCastPos)
+    })
+
     return {
       labelPosList,
       isHideMenu,
@@ -183,6 +251,9 @@ export default {
       unit,
       lionMalePos,
       lionFemalePos,
+      castBtnPos,
+      isShowCast,
+      castPos,
     }
   },
   data() {
@@ -365,5 +436,21 @@ export default {
       transform: scale(1.1);
     }
   }
+  >button.watch-cast{
+    position: absolute;
+    width: calc(70 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    height: calc(72 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    z-index: 4;
+    &:hover {
+      transform: scale(1.1);
+    }
+    >img{
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 </style>