瀏覽代碼

feat:更新很多修改

aamin 1 年之前
父節點
當前提交
ac48a265d3

+ 1 - 0
.eslintrc.js

@@ -54,5 +54,6 @@ module.exports = {
     defineEmits: true,
     defineEmits: true,
     configText: true,
     configText: true,
     configExcel: true,
     configExcel: true,
+    configZhuPu: true,
   }
   }
 }
 }

+ 39 - 0
public/configExcel.js

@@ -559,3 +559,42 @@ var configExcel = {
     }
     }
   ]
   ]
 }
 }
+
+var configZhuPu = {
+  "杆": [
+    {
+      '显示名称': [
+        'zhi', '直', 'gan', '竿', 'dai', '带', 'qu', '曲'
+      ],
+      '名称': '直竿带曲'
+    },
+    {
+      '显示名称': [
+        'xi', '细', 'gan', '竿'
+      ],
+      '名称': '细竿'
+    },
+  ],
+  "枝": [
+    {
+      '显示名称': [
+        'qi', '起', 'shou', '手', 'lu', '鹿', 'jiao', '角', 'zhi', '枝'
+      ],
+      '名称': '起手鹿角枝'
+    },
+    {
+      '显示名称': [
+        'zuo', '左', 'you', '右', 'sheng', '生', 'pang', '旁', 'zhi', '枝'
+      ],
+      '名称': '左右生旁枝'
+    },
+  ],
+  "叶": [
+    {
+      '显示名称': [
+        'si', '四', 'bi', '笔', 'luo', '落', 'yan', '雁'
+      ],
+      '名称': '四笔落雁'
+    },
+  ]
+}

二進制
public/configMultiMedia/zhupuImages/四笔落雁.png


二進制
public/configMultiMedia/zhupuImages/左右生旁枝.png


二進制
public/configMultiMedia/zhupuImages/直竿带曲.png


二進制
public/configMultiMedia/zhupuImages/细竿.png


二進制
public/configMultiMedia/zhupuImages/起手鹿角枝.png


二進制
src/assets/images/gan.png


二進制
src/assets/images/name-bg.png


二進制
src/assets/images/ye.png


二進制
src/assets/images/zhi.png


+ 8 - 0
src/router/index.js

@@ -9,6 +9,7 @@ import BambooBookView from '../views/BambooBookView.vue'
 import BambooHotView from '../views/BambooHotView.vue'
 import BambooHotView from '../views/BambooHotView.vue'
 import ShuanggouDetail from '../views/ShuangGouSheSeDetail.vue'
 import ShuanggouDetail from '../views/ShuangGouSheSeDetail.vue'
 import ShuanggouPaintingDetail from '../views/ShuanggouPaintingDetail.vue'
 import ShuanggouPaintingDetail from '../views/ShuanggouPaintingDetail.vue'
+import OnlineSceneView from '../views/OnlineSceneView.vue'
 
 
 // import store from '@/store/index.js'
 // import store from '@/store/index.js'
 
 
@@ -72,6 +73,13 @@ const routes = [
     name: 'ShuanggouPaintingDetail',
     name: 'ShuanggouPaintingDetail',
     component: ShuanggouPaintingDetail,
     component: ShuanggouPaintingDetail,
   },
   },
+  // 线上展厅
+  {
+    path: '/onlone-scene',
+    name: 'OnlineScene',
+    component: OnlineSceneView
+
+  }
 ]
 ]
 
 
 const router = createRouter({
 const router = createRouter({

+ 6 - 3
src/views/BambooBookScene2.vue

@@ -57,7 +57,7 @@ const {
         </div>
         </div>
         <div
         <div
           class="index3-income"
           class="index3-income"
-          @click="emit('next')"
+          @click="emit('next',curPart)"
         >
         >
           查看画法
           查看画法
         </div>
         </div>
@@ -103,9 +103,12 @@ const {
     }
     }
 
 
     .detail-img {
     .detail-img {
-      width: 100%;
+      width: calc(428 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(506 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      object-fit: cover;
+      object-position: left;
       @media screen and (max-width: 350px) {
       @media screen and (max-width: 350px) {
-        width: 80%;
+        width: 100%;
       }
       }
     }
     }
 
 

+ 51 - 18
src/views/BambooBookScene3.vue

@@ -1,5 +1,5 @@
 <script setup>
 <script setup>
-// import { ref } from 'vue'
+import { onMounted, inject } from 'vue'
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Pagination } from 'swiper/modules'
 import { Pagination } from 'swiper/modules'
@@ -7,30 +7,27 @@ import { Pagination } from 'swiper/modules'
 // import 'swiper/css'
 // import 'swiper/css'
 // import 'swiper/css/pagination'
 // import 'swiper/css/pagination'
 
 
+
+const $env = inject('$env')
+
 const {
 const {
   windowSizeInCssForRef,
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 } = useSizeAdapt()
 
 
 const emit = defineEmits(['close'])
 const emit = defineEmits(['close'])
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {return []},
+  },
+})
 
 
 const modules = [Pagination]
 const modules = [Pagination]
 const paginationOptions = { clickable: true }
 const paginationOptions = { clickable: true }
-
-const stepList = [
-  {
-    id: 0,
-    title: "直杆带曲"
-  },
-  {
-    id: 1,
-    title: "直杆带曲2"
-  },
-  {
-    id: 2,
-    title: "直杆带曲3"
-  },
-]
+onMounted(() => {
+  console.log(props.list)
+})
 
 
 
 
 </script>
 </script>
@@ -44,11 +41,23 @@ const stepList = [
         :pagination="paginationOptions"
         :pagination="paginationOptions"
       >
       >
         <SwiperSlide
         <SwiperSlide
-          v-for="(item,index) in stepList"
+          v-for="(item,index) in list"
           :key="index"
           :key="index"
           class="step-item"
           class="step-item"
         >
         >
-          {{ item.title }}
+          <!-- <div>{{ item['名称'] }}</div> -->
+          <div class="name-box">
+            <div
+              v-for="(item1,index1) in item['显示名称']"
+              :key="index1"
+            >
+              {{ item1 }}
+            </div>
+          </div>
+          <img
+            :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${item['名称']}.png`"
+            alt=""
+          >
         </SwiperSlide>
         </SwiperSlide>
       </Swiper>
       </Swiper>
       <div class="system-btns">
       <div class="system-btns">
@@ -97,6 +106,30 @@ const stepList = [
         display: flex;
         display: flex;
         justify-content: center;
         justify-content: center;
         align-items: center;
         align-items: center;
+        position: relative;
+        >.name-box{
+          position: absolute;
+          left: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          top: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          writing-mode: horizontal-tb;
+          background: url(@/assets/images/name-bg.png);
+          background-size: 100% 100%;
+          padding: 15px ;
+          color: #476446;
+          font-family: 'KingHwa_OldSong';
+          font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          >:nth-child(odd){
+            color:#7B916B;
+            font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            line-height: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            transform: translateX(-40%)
+          }
+        }
+        >img{
+          // width: 40%;
+          margin-left: calc(50 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))
+        }
       }
       }
 
 
     }
     }

+ 29 - 2
src/views/BambooBookView.vue

@@ -1,5 +1,5 @@
 <script setup>
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
 
 import BambooBookScene1 from '@/views/BambooBookScene1.vue'
 import BambooBookScene1 from '@/views/BambooBookScene1.vue'
 import BambooBookScene2 from '@/views/BambooBookScene2.vue'
 import BambooBookScene2 from '@/views/BambooBookScene2.vue'
@@ -7,12 +7,38 @@ import BambooBookScene3 from '@/views/BambooBookScene3.vue'
 
 
 
 
 
 
+
 // 当前滑动到第几屏
 // 当前滑动到第几屏
 const curIndex = ref(0)
 const curIndex = ref(0)
 
 
 const toBack = () => {
 const toBack = () => {
   window.history.back()
   window.history.back()
 }
 }
+
+// 第三屏
+const curPart = ref(0)
+
+const data1 = configZhuPu['杆']
+const data2 = configZhuPu['枝']
+const data3 = configZhuPu['叶']
+
+const curList = ref([])
+
+const NextPage = (curPart) => {
+  curIndex.value = 2
+  switch (curPart) {
+  case 1:
+    curList.value = data1
+    return
+  case 2:
+    curList.value = data2
+    return
+  case 3:
+    curList.value = data3
+    return
+  }
+}
+
 </script>
 </script>
 
 
 <template>
 <template>
@@ -29,7 +55,7 @@ const toBack = () => {
     <Transition name="fade-in-out">
     <Transition name="fade-in-out">
       <BambooBookScene2
       <BambooBookScene2
         v-if="curIndex === 1"
         v-if="curIndex === 1"
-        @next="() => {curIndex = 2}"
+        @next="NextPage"
         @close="() => {curIndex = 0}"
         @close="() => {curIndex = 0}"
       />
       />
     </Transition>
     </Transition>
@@ -37,6 +63,7 @@ const toBack = () => {
     <Transition name="fade-in-out">
     <Transition name="fade-in-out">
       <BambooBookScene3
       <BambooBookScene3
         v-if="curIndex === 2"
         v-if="curIndex === 2"
+        :list="curList"
         @close="() => {curIndex = 1}"
         @close="() => {curIndex = 1}"
       />
       />
     </Transition>
     </Transition>

+ 4 - 2
src/views/GameView.vue

@@ -32,6 +32,8 @@ const showToast = () => {
   }, 2000)
   }, 2000)
 }
 }
 
 
+
+
 const {
 const {
   windowSizeInCssForRef,
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
   windowSizeWhenDesignForRef,
@@ -61,7 +63,7 @@ onMounted(() => {
       <div
       <div
         v-if="mode !='reset'"
         v-if="mode !='reset'"
         class="line-scene"
         class="line-scene"
-        @click="showToast()"
+        @click="() => {router.push('/onlone-scene')}"
       >
       >
         <div class="down-triangle" />
         <div class="down-triangle" />
         <div class="line-title">
         <div class="line-title">
@@ -119,7 +121,7 @@ onMounted(() => {
     <iframe
     <iframe
       v-if="mode === 'unity'"
       v-if="mode === 'unity'"
       class="game-box"
       class="game-box"
-      src="./game/index.html"
+      :src="`./game/index.html`"
     />
     />
   </div>
   </div>
 </template>
 </template>

+ 23 - 0
src/views/OnlineSceneView.vue

@@ -0,0 +1,23 @@
+<script setup lang='ts'>
+</script>
+
+<template>
+  <div class="home">
+    <iframe
+      src="https://www.4dkankan.com/spg.html?m=KJ-et2X3su4ofm"
+      frameborder="0"
+    />
+  </div>
+</template>
+
+<style lang='less' scoped>
+.home{
+  width: 100%;
+  height: 100%;
+  iframe{
+    width: 100%;
+    height: 100%;
+  }
+
+}
+</style>

+ 2 - 1
src/views/ShuangGouSheSeDetail.vue

@@ -137,7 +137,8 @@ const text = [
     display: flex;
     display: flex;
     position: absolute;
     position: absolute;
     right: 30%;
     right: 30%;
-    top: 40%;
+    top: 45vh;
+    // top: calc(50 /v-bind('windowSizeWhenDesignForRef')/v-bind('windowSizeInCssForRef'));
     color: #707F48;
     color: #707F48;
     font-size: calc(16 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     font-size: calc(16 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     line-height: calc(30 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     line-height: calc(30 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

+ 1 - 0
src/views/ShuanggouPaintingDetail.vue

@@ -65,6 +65,7 @@ const {
 
 
 const paintingList = configExcel['画作']
 const paintingList = configExcel['画作']
 
 
+
 /**
 /**
  * swiper
  * swiper
  */
  */