更新背景图和场景码

zdkkc/public/staticData/data.js

@@ -26,7 +26,7 @@ const dataAll = {
           number: 'DECK8:',
           mainBody: 'detail.png',
           heilight: '1.png',
-          sceneCode:'KJ-d4y5kwj5mvW',
+          sceneCode:'KJ-SjCkVMr1qvf',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -48,7 +48,7 @@ const dataAll = {
           number: 'DECK7:',
           mainBody: 'detail.png',
           heilight: '2.png',
-          sceneCode:'1446',
+          sceneCode:'KJ-KHsnJLZm3cn',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -70,7 +70,7 @@ const dataAll = {
           number: 'DECK6:',
           mainBody: 'detail.png',
           heilight: '3.png',
-          sceneCode:'1446',
+          sceneCode:'KJ-DTMF9dkffbn',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -92,7 +92,7 @@ const dataAll = {
           number: 'DECK5:',
           mainBody: 'detail.png',
           heilight: '4.png',
-          sceneCode:'TEST',
+          sceneCode:'KJ-4fYUsjIDNBL',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -114,7 +114,7 @@ const dataAll = {
           number: 'DECK4:',
           mainBody: 'detail.png',
           heilight: '5.png',
-          sceneCode:'',
+          sceneCode:'KJ-3902aPaHp8O',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -132,11 +132,11 @@ const dataAll = {
         },
         {
           id: 6,
-          name: '登艇甲板-2',
+          name: '登艇甲板',
           number: 'DECK3:',
           mainBody: 'detail.png',
           heilight: '6.png',
-          sceneCode:'',
+          sceneCode:'KJ-wZetq7LLSnK',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -154,11 +154,11 @@ const dataAll = {
         },
         {
           id: 7,
-          name: '登艇甲板-3',
+          name: '登船甲板',
           number: 'DECK2:',
           mainBody: 'detail.png',
           heilight: '7.png',
-          sceneCode:'',
+          sceneCode:'KJ-5NGVgP2oO5G',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -181,7 +181,7 @@ const dataAll = {
           number: 'DECK1:',
           mainBody: 'detail.png',
           heilight: '8.png',
-          sceneCode:'',
+          sceneCode:'KJ-1G9iEXB7ohx',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -203,7 +203,7 @@ const dataAll = {
           number: 'DECKB1:',
           mainBody: 'detail.png',
           heilight: '9.png',
-          sceneCode:'',
+          sceneCode:'KJ-4XeLjELZjSh_02',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -223,7 +223,7 @@ const dataAll = {
           id: 10,
           name: '救生艇',
           number: '-:',
-          sceneCode:'',
+          sceneCode:'TEST',
           mainBody: 'detail.png',
         },
       ]

zdkkc/src/views/Detail/detailPage.vue

@@ -10,8 +10,11 @@ const curInfoPart = ref({} as any)
 const router = useRouter()
 
 const goScenefu = () => {
-  store.mode = mode.value;
-  store.currentInfoPart = curInfoPart.value;
+  if (curInfoPart.value.name != '救生艇') {
+    store.mode = mode.value;
+    store.currentInfoPart = curInfoPart.value;
+  }
+
   router.push({
     path: '/scene',
     query: {
@@ -20,6 +23,12 @@ const goScenefu = () => {
   })
 }
 
+const onSelectfu = (item: any) => {
+  mode.value = store.dataAll.modeList[1]
+  curInfoPart.value = item
+  item.name === '救生艇' ? goScenefu() : ''
+}
+
 onMounted(() => {
   if (Object.keys(store.mode).length != 0) {
     mode.value = store.mode
@@ -42,12 +51,13 @@ onMounted(() => {
       <div class="plane-list" :class="{ 'activePlane': mode.name == 'plane' }">
         <div class="plane-left">
           <div :class="{ 'active': curInfoPart.name == item.name }" v-for="item in store.dataAll.modeList[1].content"
-            :key="item.name" @click="() => { mode = store.dataAll.modeList[1], curInfoPart = item }">{{
+            :key="item.name" @click="onSelectfu(item)">{{
               item.number }}</div>
         </div>
         <div class="plane-right">
           <div :class="{ 'active': curInfoPart.name == item.name }" v-for="item in store.dataAll.modeList[1].content"
-            :key="item.name" @click="() => { mode = store.dataAll.modeList[1], curInfoPart = item }">{{
+            :key="item.name" @click="onSelectfu(item)">
+            {{
               item.name }}</div>
         </div>
       </div>
@@ -205,6 +215,7 @@ onMounted(() => {
     .img3d {
       margin-left: -10%;
       width: 80%;
+
       @media screen and (max-width: 1560px) {
         width: 75%;
       }

zdkkc2/public/staticData/data.js

@@ -26,7 +26,7 @@ const dataAll = {
           number: 'DECK8:',
           mainBody: 'detail.png',
           heilight: '1.png',
-          sceneCode: 'KJ-d4y5kwj5mvW',
+          sceneCode: 'KJ-SjCkVMr1qvf',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -48,20 +48,20 @@ const dataAll = {
           number: 'DECK7:',
           mainBody: 'detail.png',
           heilight: '2.png',
-          sceneCode: '1446',
+          sceneCode: 'KJ-KHsnJLZm3cn',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
             left: '40%'
           },
           hotP: {
-            top: '5vh',
+            top: '8vh',
             left: '-36px',
           },
           lineP: {
             width: '20vw',
-            height: '8vh',
-            left: '30px'
+            height: '13vh',
+            left: '16px'
           }
         },
         {
@@ -70,19 +70,19 @@ const dataAll = {
           number: 'DECK6:',
           mainBody: 'detail.png',
           heilight: '3.png',
-          sceneCode: '1446',
+          sceneCode: 'KJ-DTMF9dkffbn',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
             left: '40%'
           },
           hotP: {
-            top: '9vh',
+            top: '14vh',
             left: '-1vw',
           },
           lineP: {
             width: '20vw',
-            height: '14vh',
+            height: '18vh',
             left: '30px'
           }
         },
@@ -92,7 +92,7 @@ const dataAll = {
           number: 'DECK5:',
           mainBody: 'detail.png',
           heilight: '4.png',
-          sceneCode: '',
+          sceneCode: 'KJ-4fYUsjIDNBL',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -104,7 +104,7 @@ const dataAll = {
           },
           lineP: {
             width: '20vw',
-            height: '20vh',
+            height: '23vh',
             left: '30px'
           }
         },
@@ -114,7 +114,7 @@ const dataAll = {
           number: 'DECK4:',
           mainBody: 'detail.png',
           heilight: '5.png',
-          sceneCode: '',
+          sceneCode: 'KJ-3902aPaHp8O',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '23%',
@@ -132,11 +132,11 @@ const dataAll = {
         },
         {
           id: 6,
-          name: '登艇甲板-2',
+          name: '登艇甲板',
           number: 'DECK3:',
           mainBody: 'detail.png',
           heilight: '6.png',
-          sceneCode: '',
+          sceneCode: 'KJ-wZetq7LLSnK',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -154,11 +154,11 @@ const dataAll = {
         },
         {
           id: 7,
-          name: '登艇甲板-3',
+          name: '登船甲板',
           number: 'DECK2:',
           mainBody: 'detail.png',
           heilight: '7.png',
-          sceneCode: '',
+          sceneCode: 'KJ-5NGVgP2oO5G',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -181,7 +181,7 @@ const dataAll = {
           number: 'DECK1:',
           mainBody: 'detail.png',
           heilight: '8.png',
-          sceneCode: '',
+          sceneCode: 'KJ-1G9iEXB7ohx',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -203,7 +203,7 @@ const dataAll = {
           number: 'DECKB1:',
           mainBody: 'detail.png',
           heilight: '9.png',
-          sceneCode: '',
+          sceneCode: 'KJ-4XeLjELZjSh_02',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
             top: '20%',
@@ -223,7 +223,7 @@ const dataAll = {
           id: 10,
           name: '救生艇',
           number: '-:',
-          sceneCode: '',
+          sceneCode: 'TEST',
           mainBody: 'detail.png',
         },
       ]

zdkkc2/src/views/Detail/detailPage.vue

@@ -73,16 +73,20 @@ onMounted(() => {
       <img class="img-bottom" src="@/assets/images/bottom.png" alt="">
 
       <!-- 船体列表 -->
-      <div class="list-box">
+      <div class="list-box"
+        :style="{ backgroundImage: curSelect.name == '顶甲板' ? `url(${baseURl}/selectEnd.png)` : curSelect.name == '救生艇' ? `url(${baseURl}/selectLast.png)` : '' }">
         <div class="stereoscopic-box"
           @click="() => { curSelect = {}, curMode = store.dataAll.modeList[0], curInfoPart = {}, isShowGuide = false }">
           {{ store.dataAll.modeList[0].title }}
         </div>
         <div class="list-bottom">
+          <!-- <img class="topAc" src="@/assets/images/topAc.png" alt="">
+          <img class="bottomAc" src="@/assets/images/bottomAc.png" alt=""> -->
+
           <div class="list-item" :class="{ 'active': item.name == curSelect.name }"
-            @click="() => { curSelect = item, curMode = store.dataAll.modeList[1], curInfoPart = item, isShowGuide = true }"
+            @click="() => { index === store.dataAll.modeList[1].content.length - 1 ? goScenefu() : (curSelect = item, curMode = store.dataAll.modeList[1], curInfoPart = item, isShowGuide = true) }"
             v-for="(item, index) in store.dataAll.modeList[1].content" :key="item.id"
-            :style="{ borderBottom: index == store.dataAll.modeList[1].content.length - 1 ? 'none' : '' }">
+            :style="{ borderBottom: index == store.dataAll.modeList[1].content.length - 1 ? 'none' : '', background: index == store.dataAll.modeList[1].content.length - 1 || index == 0 ? 'none' : '' }">
             {{ item.number + item.name }}
           </div>
         </div>
@@ -94,7 +98,7 @@ onMounted(() => {
         <div class="line"></div>
         <div class="bottom-content">
           <div>{{ curSelect.info }}</div>
-          <img  @click="goScenefu()" :src="`${baseURl}/plane/pic${curSelect.id}.png`" alt="">
+          <img @click="goScenefu()" :src="`${baseURl}/plane/pic${curSelect.id}.png`" alt="">
         </div>
       </div>
 
@@ -260,7 +264,7 @@ onMounted(() => {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      padding-bottom: 2%;
+      padding-bottom: 1%;
       box-sizing: border-box;
 
       .stereoscopic-box {
@@ -280,7 +284,7 @@ onMounted(() => {
       .list-bottom {
         width: 100%;
         margin-top: 8%;
-        height: calc(81% - 20px);
+        height: 100%;
         // background: rgba(0, 128, 0, 0.384);
         display: flex;
         flex-direction: column;
@@ -288,6 +292,18 @@ onMounted(() => {
         justify-content: space-around;
         font-size: 1.4em;
         letter-spacing: 2px;
+        position: relative;
+
+        .topAc {
+          width: 100%;
+          position: absolute;
+        }
+
+        .bottomAc {
+          width: 93%;
+          position: absolute;
+          bottom: -4%;
+        }
 
         .list-item {
           width: 70%;
@@ -299,12 +315,14 @@ onMounted(() => {
           cursor: pointer;
           flex-basis: 20%;
           font-size: 0.7em;
+          position: relative;
+          z-index: 2;
         }
 
         .active {
           background: #1286AB;
           border-bottom: none;
-          width: 90%;
+          width: 96%;
           font-weight: bold;
         }