增加双钩设色音乐

src/views/ShuangGouSheSeDetail.vue

@@ -1,23 +1,24 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { onMounted, ref, computed, inject } from "vue"
+import { useRouter } from "vue-router"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
+import HotspotComp from "@/components/HotspotComp.vue"
+
 const router = useRouter()
 
+const $env = inject("$env")
+
 const goBack = () => {
   router.replace({
-    name: 'MoreContent',
+    name: "MoreContent",
     query: {
       anchorIdx: 0,
-    }
+    },
   })
 }
 
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
 const reverseArray = (array) => {
   return array.slice().reverse()
@@ -30,27 +31,31 @@ const goPaintingDetail = () => {
 const x = window.innerWidth / window.innerHeight
 
 onMounted(() => {
-  console.log('shuchubili', x)
+  console.log("shuchubili", x)
 })
 
 const text = [
-  ['双钩，中国画技法名。用线条钩描',
-    '物象的轮廓,通称“勾勒”，因基本上',
-    '是用左右或上下两笔钩描合拢，故亦',
-    '称“双钩”。大部用于工笔花鸟画。又',
-    '旧时摹搨法书。沿字的笔迹两边用细',
-    '劲的墨线线钩出轮廓，也叫“双钩”；',
-    '双钩后填墨的称为“双钩”'],
-  ['设色，国画中晕染彩色的意思，“廓',
-    '填”。画面中只要出现彩色就可以说',
-    '是设色作品。与设色相反的是“水墨”，',
-    '指画面中不出现彩色，或者极少出现',
-    '彩色的，以墨色为主绘制的作品。', ]
+  [
+    "双钩，中国画技法名。用线条钩描",
+    "物象的轮廓,通称“勾勒”，因基本上",
+    "是用左右或上下两笔钩描合拢，故亦",
+    "称“双钩”。大部用于工笔花鸟画。又",
+    "旧时摹搨法书。沿字的笔迹两边用细",
+    "劲的墨线线钩出轮廓，也叫“双钩”；",
+    "双钩后填墨的称为“双钩”",
+  ],
+  [
+    "设色，国画中晕染彩色的意思，“廓",
+    "填”。画面中只要出现彩色就可以说",
+    "是设色作品。与设色相反的是“水墨”，",
+    "指画面中不出现彩色，或者极少出现",
+    "彩色的，以墨色为主绘制的作品。",
+  ],
 ]
 
 const text2 = [
-  '双钩，中国画技法名。用线条钩描物象的轮廓，通称“勾勒”，因基本上是用左右或上下两笔钩描合拢，故亦称“双钩”。大部用于工笔花鸟画。又旧时摹搨法书。沿字的笔迹两边用细劲的墨线钩出轮廓，也叫“双钩”；双钩后填墨的称为“双钩廓填”。',
-  '设色，国画中晕染彩色的意思，画面中只要出现彩色就可以说是设色作品。与设色相反的是“水墨”，指画面中不出现彩色，或者极少出现彩色的，以墨色为主绘制的作品。'
+  "双钩，中国画技法名。用线条钩描物象的轮廓，通称“勾勒”，因基本上是用左右或上下两笔钩描合拢，故亦称“双钩”。大部用于工笔花鸟画。又旧时摹搨法书。沿字的笔迹两边用细劲的墨线钩出轮廓，也叫“双钩”；双钩后填墨的称为“双钩廓填”。",
+  "设色，国画中晕染彩色的意思，画面中只要出现彩色就可以说是设色作品。与设色相反的是“水墨”，指画面中不出现彩色，或者极少出现彩色的，以墨色为主绘制的作品。",
 ]
 
 const curIndex = ref(0)
@@ -78,15 +83,28 @@ const touchEnd = (event) => {
   }
 }
 
+const isShowVideoBox = ref(false)
+
 const goToSlide = (index) => {
   curIndex.value = index
 }
 
-const curPercentage = computed(() => {
-  return curIndex.value
+const openVideoBox = () => {
+  isShowVideoBox.value = true
+  // 背景音乐打开
+  const audioEl = document.getElementById('bg-music')
+  audioEl.pause()
+}
+const closeVieoBox = () => {
+  isShowVideoBox.value = false
+  // 背景音乐打开
+  const audioEl = document.getElementById('bg-music')
+  audioEl.play()
 }
-)
 
+const curPercentage = computed(() => {
+  return curIndex.value
+})
 </script>
 
 <template>
@@ -98,6 +116,11 @@ const curPercentage = computed(() => {
     <div class="title">
       <span :style="{ color: curIndex == 1 ? 'rgba(71, 71, 71, 0.50)' : '' }">双钩</span>
       <span :style="{ color: curIndex == 0 ? 'rgba(71, 71, 71, 0.50)' : '' }">设色</span>
+      <img
+        src="@/assets/images/icon_video.png"
+        class="icon-video"
+        @click="openVideoBox"
+      >
     </div>
 
     <div class="shuanggou-yezi">
@@ -112,6 +135,40 @@ const curPercentage = computed(() => {
       />
     </div>
 
+    <!-- 视频box -->
+    <div
+      v-if="isShowVideoBox"
+      class="video-box"
+    >
+      <img
+        v-show="curIndex == 1"
+        class="bg-img"
+        src="@/assets/images/img_shese.jpg"
+        alt=""
+      >
+      <img
+        v-show="curIndex == 0"
+        class="bg-img"
+        src="@/assets/images/img_shuanggou.jpg"
+        alt=""
+      >
+      <video
+        playsinline
+        webkit-playsinline="true"
+        x5-video-player-type="h5"
+        :poster="`${$env.BASE_URL}configMultiMedia/video/${curIndex == 0 ? 'shuanggou' : 'shese'}.png`"
+        :src="`${$env.BASE_URL}configMultiMedia/video/${
+          curIndex == 0 ? 'shuanggou' : 'shese'
+        }.mp4`"
+        controls
+      />
+      <div>{{ curIndex == 0 ? "双钩" : "设色" }}</div>
+      <BtnBack
+        class="video-box-close"
+        @click="closeVieoBox"
+      />
+    </div>
+
     <!-- <img
       class="text"
       src="@/assets/images/shuanggou-text.png"
@@ -175,8 +232,8 @@ const curPercentage = computed(() => {
   </div>
 </template>
 
-<style lang='less' scoped>
-*{
+<style lang="less" scoped>
+* {
   transition: all 1s ease;
 }
 .home {
@@ -187,14 +244,31 @@ const curPercentage = computed(() => {
 
   .title {
     color: #474747;
-    font-size: calc(48 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    line-height: calc(48 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-size: calc(
+      48 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    line-height: calc(
+      48 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
     writing-mode: vertical-rl;
-    font-family: 'KingHwa_OldSong';
+    font-family: "KingHwa_OldSong";
     position: absolute;
     right: 13%;
     top: 26%;
     letter-spacing: 10px;
+    z-index: 10;
+    .icon-video {
+      width: calc(
+        48 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      height: calc(
+        48 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+    }
   }
 
   .shuanggou-yezi {
@@ -213,18 +287,63 @@ const curPercentage = computed(() => {
       }
     }
 
-    >img {
+    > img {
       width: 100%;
       margin-top: -3%;
     }
 
-    >.hotspot-1 {
+    > .hotspot-1 {
       position: absolute;
       bottom: 28%;
       left: 17%;
       pointer-events: initial;
       z-index: 3;
+    }
+  }
 
+  .video-box {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    .video-box-close {
+      position: absolute;
+      bottom: calc(
+        15 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef)
+      );
+      left: 25px;
+    }
+    > .bg-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    > video {
+      width: 100%;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    > div {
+      color: #ffffff;
+      position: absolute;
+      bottom: 10%;
+      font-size: calc(
+        24 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      line-height: calc(
+        29 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      font-family: "KingHwa_OldSong";
+      left: 50%;
+      transform: translateX(-50%);
     }
   }
 
@@ -234,15 +353,20 @@ const curPercentage = computed(() => {
     right: 30%;
     top: 40vh;
     // top: calc(50 /v-bind('windowSizeWhenDesignForRef')/v-bind('windowSizeInCssForRef'));
-    color: #707F48;
-    font-size: calc(18 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    line-height: calc(26 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    font-family: 'KaiTi';
+    color: #707f48;
+    font-size: calc(
+      18 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    line-height: calc(
+      26 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    font-family: "KaiTi";
     writing-mode: vertical-rl;
     letter-spacing: 2px;
     text-align: justify;
     height: 40vh;
-
   }
 
   .right-bottom {
@@ -252,7 +376,7 @@ const curPercentage = computed(() => {
     right: 0;
   }
 
-  .progress-bar{
+  .progress-bar {
     position: absolute;
     left: 0;
     bottom: 15px;
@@ -268,18 +392,27 @@ const curPercentage = computed(() => {
 
   .system-btns {
     width: 100%;
-    padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+    padding: 0
+      calc(
+        20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef)
+      );
     display: flex;
     // flex-direction: column;
     justify-content: flex-end;
     position: absolute;
-    bottom: calc(60 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+    bottom: calc(
+      60 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef)
+    );
     z-index: 2;
 
     .operation-h {
-      width: calc(36 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      width: calc(
+        36 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
       transition: opacity 0.5s ease-in-out;
     }
   }
 }
-</style>
+</style>
+import { transform } from 'lodash';import { transform } from 'lodash';

src/views/StartupView.vue

@@ -102,15 +102,15 @@ const isShowSkip = ref(false)
 const videoEl = ref(null)
 function onClickStart() {
   isShowVideo.value = true
-  const audioEl = document.getElementById('bg-music')
+  // const audioEl = document.getElementById('bg-music')
   nextTick(() => {
     videoEl.value.play()
-    if (window.location.href.includes('?m=1')) {
-      audioEl.src = './configMultiMedia/music/music2.mp3'
-      audioEl.play()
-    } else {
-      audioEl.play()
-    }
+    // if (window.location.href.includes('?m=1')) {
+    //   audioEl.src = './configMultiMedia/music/music2.mp3'
+    //   audioEl.play()
+    // } else {
+    //   audioEl.play()
+    // }
   })
   setTimeout(() => {
     isShowSkip.value = true