feat:新增竹谱和游戏页面样式与逻辑

src/components/ToastBox.vue

@@ -0,0 +1,96 @@
+<template>
+  <teleport to="body">
+    <div
+      v-if="visible"
+      class="toast"
+      :class="[
+        `toast--${type}`,
+        { 'toast--visible': visible },
+      ]"
+    >
+      <p>{{ props.message }}</p>
+    </div>
+  </teleport>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, defineExpose } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'default',
+  },
+  message: {
+    type: String,
+    required: true,
+  },
+  duration: {
+    type: Number,
+    default: 2000,
+  },
+})
+
+const visible = ref(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    hide()
+  }, props.duration)
+})
+
+onUnmounted(() => {
+  clearTimeout()
+})
+
+function show() {
+  visible.value = true
+  console.log('show被触发')
+}
+
+function hide() {
+  visible.value = false
+}
+
+defineExpose({ show, hide })
+</script>
+
+<style scoped>
+.toast {
+  position: fixed;
+  z-index: 999;
+  padding: 10px 20px;
+  border-radius: 5px;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  pointer-events: none;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.toast--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.toast--success {
+  background-color: #f0fff0;
+  color: #2e7d32;
+}
+
+.toast--error {
+  background-color: #ffebee;
+  color: #c62828;
+}
+
+.toast--warning {
+  background-color: #fff3cd;
+  color: #856404;
+}
+
+.toast--default {
+  background-color: #00000059;
+  color: #fff;
+}
+</style>

src/main.js

@@ -12,6 +12,7 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import 'swiper/css'
+import 'swiper/css/pagination' // 分页器样式
 
 import BtnBack from '@/components/BtnBack.vue'
 import OperationTip from '@/components/OperationTip.vue'

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import MoreContent from '../views/MoreContent.vue'
 import GameView from '../views/GameView.vue'
+import BambooBookView from '../views/BambooBookView.vue'
 
 // import store from '@/store/index.js'
 
@@ -25,6 +26,12 @@ const routes = [
     name: 'Game',
     component: GameView,
   },
+  // 竹谱
+  {
+    path: '/bambooBook',
+    name: 'BambooBook',
+    component: BambooBookView,
+  },
 
 ]
 

src/views/BambooBookScene1.vue

@@ -0,0 +1,123 @@
+<script setup>
+import { ref } from 'vue'
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const lastX = ref(0)
+
+// 开始滑动
+const handletouchstart = (event) => {
+  lastX.value = event.changedTouches[0].pageX
+}
+
+// 监听活动
+const touchMove = (event) => {
+  let currentX = event.changedTouches[0].pageX
+  let tx = currentX - lastX.value
+  if (tx < 0) {
+    emit('slide')
+  }
+}
+
+const emit = defineEmits(['slide', 'close'])
+</script>
+
+<template>
+  <div
+    class="screen-box"
+    @touchstart="handletouchstart($event)"
+    @touchmove="touchMove($event)"
+  >
+    <div class="screen-box1">
+      <div class="title-box">
+        芥子园画谱
+      </div>
+      <div class="zhupu-box">
+        竹谱
+      </div>
+      <img
+        class="operation-h"
+        src="@/assets/images/icon_operation_h_white.png"
+        alt=""
+      >
+      <img
+        class="disc-img"
+        src="@/assets/images/zhupu-disc.png"
+        alt=""
+      >
+      <div class="system-btns">
+        <BtnBack
+          :color="`green`"
+          @click="emit('close')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+.screen-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .screen-box1 {
+    width: 100%;
+    height: 100%;
+    background-image: url(@/assets/images/bg_zhupu.png);
+    background-size: 100% 100%;
+    writing-mode: vertical-rl;
+    /* 垂直排列，从右向左 */
+    direction: rtl;
+
+    .title-box {
+      color: #ffffff;
+      font-size: calc(48 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      line-height: calc(56 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      position: absolute;
+      font-family: 'KingHwa_OldSong';
+      letter-spacing: .3em;
+      top: calc(95 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+
+    .zhupu-box {
+      color: #ffffff;
+      font-size: calc(24 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      line-height: calc(28 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      position: absolute;
+      font-family: 'KingHwa_OldSong';
+      letter-spacing: .3em;
+      top: 50%;
+      right: calc(75 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+
+    >.operation-h {
+      position: absolute;
+      right: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      bottom: 30%;
+    }
+
+    >.disc-img {
+      margin-right: calc(170 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      margin-bottom: calc(230 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+
+    >.system-btns {
+      width: 100%;
+      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      position: absolute;
+      bottom: calc(20 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      z-index: 2;
+    }
+  }
+
+}
+</style>

src/views/BambooBookScene2.vue

@@ -0,0 +1,154 @@
+<script setup>
+import { ref } from 'vue'
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+
+
+// 竹子的三个部分图片
+import ganImg from '@/assets/images/gan.png'
+import zhiImg from '@/assets/images/zhi.png'
+import yeImg from '@/assets/images/ye.png'
+
+
+// 第二屏
+// 杆-1 枝-2 叶-3
+const curPart = ref(1)
+
+const emit = defineEmits(['next', 'close'])
+
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+</script>
+
+<template>
+  <div class="screen-box">
+    <transition name="fade-in-out">
+      <div class="screen-box2">
+        <div class="title-disc">
+          当前展示内容
+        </div>
+        <img
+          class="detail-img"
+          :src="curPart == 1 ? ganImg : curPart == 2 ? zhiImg : yeImg"
+          alt=""
+        >
+        <!-- 竹子部分选择 -->
+        <div class="options-box">
+          <div
+            :class="{ 'active': curPart == 1 }"
+            @click="() => { curPart = 1 }"
+          >
+            杆
+          </div>
+          <div
+            :class="{ 'active': curPart == 2 }"
+            @click="() => { curPart = 2 }"
+          >
+            枝
+          </div>
+          <div
+            :class="{ 'active': curPart == 3 }"
+            @click="() => { curPart = 3 }"
+          >
+            叶
+          </div>
+        </div>
+        <div
+          class="index3-income"
+          @click="emit('next')"
+        >
+          查看画法
+        </div>
+        <div class="system-btns">
+          <BtnBack
+            :color="`green`"
+            @click="emit('close')"
+          />
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style lang='less' scoped>
+.screen-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .screen-box2 {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    // background-image: url(@/assets/images/screen-box2.png);
+    // background-size: 100% 100%;
+    background: linear-gradient(180deg, #233E16 -100%, rgba(156, 171, 148, 0.5) 100%);
+    backdrop-filter: blur(15px);
+    padding-top: calc(71 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
+
+    .title-disc {
+      width: 100%;
+      color: white;
+      text-align: center;
+      // position: absolute;
+      font-size: calc(20 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
+      line-height: calc(23 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
+      font-family: 'KaiTi';
+      // top: calc(50 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
+    }
+
+    .detail-img {
+      width: 100%;
+    }
+
+    .options-box {
+      width: 100%;
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      color: #474747;
+      font-size: calc(28 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
+      line-height: calc(32 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
+      font-family: 'KingHwa_OldSong';
+      margin: calc(58 / v-bind(windowSizeWhenDesignForRef)*v-bind(windowSizeInCssForRef)) auto;
+
+      >.active {
+        background-image: url(@/assets/images/btn_active.png);
+        padding: calc(8 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+        background-size: 100% 100%;
+        transform: scale(1.2);
+        color: #7B916B;
+        font-size: calc(36 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeWhenDesignForRef));
+        font-family: calc(42 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeWhenDesignForRef));
+      }
+    }
+
+    .index3-income {
+      width: calc(132 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      height: calc(48 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: calc(20 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
+      line-height: calc(23 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
+      color: #476446;
+      background-image: url(@/assets/images/btn_more.png);
+      font-family: 'KaiTi';
+    }
+
+    .system-btns {
+      width: 100%;
+      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      display: flex;
+      justify-content: space-between;
+      position: absolute;
+      bottom: calc(20 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      z-index: 2;
+    }
+  }
+}
+</style>

src/views/BambooBookScene3.vue

@@ -0,0 +1,115 @@
+<script setup>
+// import { ref } from 'vue'
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Pagination } from 'swiper/modules'
+// import { Pagination } from 'swiper'
+// import 'swiper/css'
+// import 'swiper/css/pagination'
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const emit = defineEmits(['close'])
+
+const modules = [Pagination]
+const paginationOptions = { clickable: true }
+
+const stepList = [
+  {
+    id: 0,
+    title: "直杆带曲"
+  },
+  {
+    id: 1,
+    title: "直杆带曲2"
+  },
+  {
+    id: 2,
+    title: "直杆带曲3"
+  },
+]
+
+
+</script>
+
+<template>
+  <div class="screen-box">
+    <div class="screen-box3">
+      <Swiper
+        class="step-list"
+        :modules="modules"
+        :pagination="paginationOptions"
+      >
+        <SwiperSlide
+          v-for="(item,index) in stepList"
+          :key="index"
+          class="step-item"
+        >
+          {{ item.title }}
+        </SwiperSlide>
+      </Swiper>
+      <div class="system-btns">
+        <BtnBack
+          @click="emit('close')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+::v-deep{
+  .swiper-pagination-bullet {
+    border: 1px solid white;
+    background: none;
+    width: 10px;
+    height: 10px;
+    opacity: 1;
+  }
+  .swiper-pagination-bullet-active{
+    background: white;
+  }
+  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
+        margin: 0 calc(10 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+
+      }
+}
+.screen-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .screen-box3 {
+    width: 100%;
+    height: 100%;
+    background: url(@/assets/images/screen-box3.png);
+
+    .step-list{
+      width: 100%;
+      height: calc(100% - 15px);
+      .step-item{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+    }
+
+    .system-btns {
+      width: 100%;
+      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      display: flex;
+      justify-content: space-between;
+      position: absolute;
+      bottom: calc(20 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      z-index: 2;
+    }
+  }
+
+}
+</style>

src/views/BambooBookView.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { ref } from 'vue'
+
+import BambooBookScene1 from '@/views/BambooBookScene1.vue'
+import BambooBookScene2 from '@/views/BambooBookScene2.vue'
+import BambooBookScene3 from '@/views/BambooBookScene3.vue'
+
+
+
+// 当前滑动到第几屏
+const curIndex = ref(0)
+
+const toBack = () => {
+  window.history.back()
+}
+</script>
+
+<template>
+  <div class="home">
+    <!-- 第一屏 -->
+    <Transition name="fade-in-out">
+      <BambooBookScene1
+        v-if="curIndex === 0"
+        @slide="() => {curIndex = 1}"
+        @close="toBack"
+      />
+    </Transition>
+    <!-- 第二屏 -->
+    <Transition name="fade-in-out">
+      <BambooBookScene2
+        v-if="curIndex === 1"
+        @next="() => {curIndex = 2}"
+        @close="() => {curIndex = 0}"
+      />
+    </Transition>
+    <!-- 第三屏 -->
+    <Transition name="fade-in-out">
+      <BambooBookScene3
+        v-if="curIndex === 2"
+        @close="() => {curIndex = 1}"
+      />
+    </Transition>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.home {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/GameView.vue

@@ -1,7 +1,10 @@
 <script setup>
 import { ref } from 'vue'
+import { useRouter } from "vue-router"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
+import Toast from '@/components/ToastBox.vue'
+const router = useRouter()
 
 // home-封面  unity-游戏 scene-线上展
 const mode = ref('home')
@@ -10,6 +13,20 @@ const goBack = () => {
   window.history.back()
 }
 
+const goHome = () => {
+  router.replace('/')
+}
+
+const toast = ref(null)
+
+const showToast = () => {
+  console.log('showToast被触发')
+  toast.value.show()
+  setTimeout(() => {
+    toast.value.hide()
+  }, 2000)
+}
+
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -17,10 +34,18 @@ const {
 </script>
 
 <template>
+  <Toast
+    ref="toast"
+    :message="`暂未开发`"
+    :duration="`3000`"
+  />
   <div class="game-page">
     <!--默认首页 -->
     <div class="home">
-      <div class="line-scene">
+      <div
+        class="line-scene"
+        @click="showToast()"
+      >
         <div class="line-title">
           《无尽藏》
         </div>
@@ -38,13 +63,9 @@ const {
         <img
           src="@/assets/images/icon-loading.png"
           alt="loading"
+          @click="goHome()"
         >
-        <!-- 返回... -->
-        <img
-          src="@/assets/images/icon_back_white.png"
-          alt="loading"
-          @click="goBack()"
-        >
+        <BtnBack @click="goBack()" />
       </div>
     </div>
     <!-- 游戏页面 -->
@@ -60,6 +81,7 @@ const {
 .game-page {
   width: 100%;
   height: 100%;
+  position: relative;
 
   .home {
     width: 100%;
@@ -67,7 +89,7 @@ const {
     background: url(@/assets/images/bg-game.png);
     background-size: 100% 100%;
 
-    // transition: all .3s;
+    transition: all .3s;
 
 
     >.line-scene {