Merge branch 'master' of http://face3d.4dage.com:7005/renyicun/NanjingMuseumWuJinZang

src/router/index.js

@@ -7,6 +7,7 @@ import PaintingDetailList from '../views/PaintingDetailList.vue'
 import GameView from '../views/GameView.vue'
 import BambooBookView from '../views/BambooBookView.vue'
 import BambooHotView from '../views/BambooHotView.vue'
+import ShuanggouDetail from '../views/ShuangGouSheSeDetail.vue'
 
 // import store from '@/store/index.js'
 
@@ -58,6 +59,12 @@ const routes = [
     name: 'BambooHot',
     component: BambooHotView,
   },
+  // 双钩设色
+  {
+    path: '/shuanggouDetail',
+    name: 'ShuanggouDetail',
+    component: ShuanggouDetail
+  }
 ]
 
 const router = createRouter({

src/views/BambooHotView.vue

@@ -139,12 +139,16 @@ onMounted(() => {
   window.addEventListener('touchstart', () => {
     //  手势按钮消失
     let operationH = document.getElementById('operationH')
-    operationH.style.opacity = 0
+    if (operationH) {
+      operationH.style.opacity = 0
+    }
 
     window.removeEventListener('touchstart', () => {
       //  手势按钮消失
       let operationH = document.getElementById('operationH')
-      operationH.style.opacity = 0
+      if (operationH) {
+        operationH.style.opacity = 0
+      }
     })
   })
 

src/views/GameView.vue

@@ -14,8 +14,12 @@ const goBack = () => {
 }
 
 const goHome = () => {
+  // router.replace('/')
+  mode.value = 'reset'
+}
+
+const resetHome = () => {
   router.replace('/')
-  // mode.value = 'reset'
 }
 
 const toast = ref(null)
@@ -71,29 +75,33 @@ onMounted(() => {
         <div class="down-triangle" />
         <div>《修篁树石图》画作创作</div>
       </div>
-
       <!-- reset部分 -->
       <div
         v-if="mode == 'reset'"
         class="title"
       >
-        是否重新开始？
+        是否重新开始<div>？</div>
       </div>
       <div
         v-if="mode == 'reset'"
         class="cancel"
+        @click="() => {
+          mode = 'home'
+        }"
       >
         取消
       </div>
       <div
         v-if="mode == 'reset'"
         class="reset"
+        @click="resetHome()"
       >
         <img
           src="@/assets/images/reset-icon.png"
           alt=""
         >
         重新开始
+        <div class="cicle" />
       </div>
       <div class="btns">
         <!-- 加载中... -->
@@ -109,7 +117,7 @@ onMounted(() => {
     <iframe
       v-if="mode === 'unity'"
       class="game-box"
-      src="/game/index.html"
+      src="./game/index.html"
     />
   </div>
 </template>
@@ -242,8 +250,72 @@ onMounted(() => {
       top:20%;
       writing-mode: vertical-rl;
       color: #476446;
-      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-      line-height: calc(29 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      font-family: 'KingHwa_OldSong';
+      font-size: calc(26 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      line-height: calc(35 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      display: flex;
+      letter-spacing: 6px;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      >div{
+        transform: translateX(-25%);
+      }
+
+    }
+
+    .cancel{
+      width: calc(92 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(36 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      background-image: url(@/assets/images/cancel-bg.png);
+      background-size: 100% 100%;
+      position: absolute;
+      left: 50%;
+      bottom: 40%;
+      transform: translateX(-20%);
+      display: flex;
+      justify-content: center;
+      align-items: end;
+      // padding-bottom: 10px;
+      color: #474747;
+      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: 'KaiTi';
+    }
+    .reset{
+      display: flex;
+      color: #474747;
+      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: 'KaiTi';
+      position: absolute;
+      left: 50%;
+      bottom: 30%;
+      transform: translateX(-35%);
+      >img{
+        margin-right: 10px;
+        animation: fade-in-out 1.5s infinite;
+
+        @keyframes fade-in-out {
+          0%{
+            opacity: 0.1;
+          }
+          50%{
+            opacity: 1;
+          }
+          100%{
+            opacity: 0.1;
+          }
+
+        }
+      }
+      >.cicle{
+        width: 15px;
+        height: 15px;
+        border-radius: 50px;
+        border: 1px solid #7B916B;
+        position: absolute;
+        right: -5px;
+        bottom: 0px;
+      }
     }
 
     .btns {

src/views/ShuangGouSheSeDetail copy.vue

@@ -0,0 +1,88 @@
+<script setup lang='ts'>
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+
+const goBack = () => {
+  window.history.back()
+}
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+</script>
+
+<template>
+  <div class="home">
+    <div class="title">
+      双钩设色
+    </div>
+
+    <img
+      class="shuanggou-yezi"
+      src="@/assets/imagse/shuanggou-top-left.png"
+      alt=""
+    >
+
+    <img
+      class="text"
+      src="@/assets/images/shuanggou-text.png"
+      alt=""
+    >
+
+    <img
+      class="right-bottom"
+      src="@/assets/images/right-bottom.png"
+      alt=""
+    >
+
+    <div class="system-btns">
+      <BtnBack @click="goBack" />
+
+      <OperationTip
+        class="operation-h"
+        text=""
+        direction="h"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+.home{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #ffffff;
+
+  .title{
+    color: #474747;
+    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';
+    position: absolute;
+    right: 10%;
+    top: 40%;
+  }
+
+  // .text{
+
+  // }
+  .system-btns {
+    width: 100%;
+    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));
+    z-index: 2;
+
+    .operation-h {
+      width: calc(36 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      transition: opacity 0.5s ease-in-out;
+    }
+  }
+}
+
+</style>

src/views/ShuangGouSheSeDetail.vue

@@ -0,0 +1,144 @@
+<script setup>
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+
+const goBack = () => {
+  window.history.back()
+}
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+</script>
+
+<template>
+  <div class="home">
+    <div class="title">
+      双钩设色
+    </div>
+
+    <div class="shuanggou-yezi">
+      <img
+        src="@/assets/images/shuanggou-top-left.png"
+        alt=""
+      >
+      <div class="cicle" />
+    </div>
+
+    <img
+      class="text"
+      src="@/assets/images/shuanggou-text.png"
+      alt=""
+    >
+
+    <img
+      class="right-bottom"
+      src="@/assets/images/right-bottom.png"
+      alt=""
+    >
+
+    <div class="system-btns">
+      <BtnBack
+        color="green"
+        @click="goBack"
+      />
+
+      <!-- <OperationTip
+        class="operation-h"
+        color="green"
+        text=""
+        direction="h"
+      /> -->
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+.home{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #ffffff;
+
+  .title{
+    color: #474747;
+    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';
+    position: absolute;
+    right: 10%;
+    top: 30%;
+    letter-spacing: 10px;
+  }
+  .shuanggou-yezi{
+    width: 100%;
+    animation: fade-in 5s forwards;
+    position: relative;
+
+    @keyframes fade-in {
+      0%{
+        opacity: 0;
+      }
+      100%{
+        opacity: 1;
+      }
+    }
+
+    >img{
+      width: 100%;
+    }
+    >.cicle{
+      width: 20px;
+      height: 20px;
+      border-radius: 50px;
+      border: 3px solid #E2DBC1;
+      animation: fade-in-out 3s infinite;
+      position: absolute;
+      bottom: 32%;
+      right: 31%;
+
+      @keyframes fade-in-out {
+        0%{
+          opacity: 0.2;
+        }
+        50%{
+          opacity: 1;
+        }
+        100%{
+          opacity: 0.2;
+        }
+
+      }
+    }
+  }
+
+  .text{
+    position: absolute;
+    right: 30%;
+    top: 40%;
+  }
+
+  .right-bottom{
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+  .system-btns {
+    width: 100%;
+    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));
+    z-index: 2;
+
+    .operation-h {
+      width: calc(36 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      transition: opacity 0.5s ease-in-out;
+    }
+  }
+}
+</style>