feat:增加双钩设色详情页首页和修改竹子页面返回报错问题

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/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>