浏览代码

fix:更新一下样式问题和一些逻辑

aamin 1 年之前
父节点
当前提交
d1f6f6aa7d
共有 50 个文件被更改,包括 439 次插入80 次删除
  1. 1 0
      hot/css/app.6a007eb6.css
  2. 11 0
      hot/css/chunk-vendors.ae03c740.css
  3. 二进制
      hot/img/IMGerror.f7bd5886.png
  4. 二进制
      hot/img/iframe-icon.2797cd24.png
  5. 二进制
      hot/img/img-icon.f320665e.png
  6. 二进制
      hot/img/loading.236fa088.gif
  7. 二进制
      hot/img/model-icon.a439e688.png
  8. 二进制
      hot/img/video-icon.6b8f2767.png
  9. 1 0
      hot/index.html
  10. 2 0
      hot/js/about.efbc423d.js
  11. 1 0
      hot/js/about.efbc423d.js.map
  12. 2 0
      hot/js/app.c97bed3a.js
  13. 1 0
      hot/js/app.c97bed3a.js.map
  14. 55 0
      hot/js/chunk-vendors.38400121.js
  15. 1 0
      hot/js/chunk-vendors.38400121.js.map
  16. 1 1
      scene/public/static/css/main.css
  17. 1 1
      scene/public/static/js/Hot.js
  18. 二进制
      scene/src/assets/images/code.png
  19. 1 1
      scene/src/views/gui/menu.vue
  20. 1 1
      scene2/public/static/css/main.css
  21. 0 9
      zdkkc/components.d.ts
  22. 1 1
      zdkkc/public/scenePage/css/app.c4976821.css
  23. 二进制
      zdkkc/public/scenePage/img/code.c01b1416.png
  24. 1 1
      zdkkc/public/scenePage/index.html
  25. 0 1
      zdkkc/public/scenePage/js/app.da8066a5.js
  26. 1 0
      zdkkc/public/scenePage/js/app.ee4d026b.js
  27. 5 5
      zdkkc/public/staticData/data.js
  28. 15 0
      zdkkc/src/base.css
  29. 5 5
      zdkkc/src/main.ts
  30. 3 1
      zdkkc/src/utils/https.ts
  31. 44 20
      zdkkc/src/views/Detail/detailPage.vue
  32. 1 1
      zdkkc/src/views/Scene/scenePage.vue
  33. 0 9
      zdkkc2/components.d.ts
  34. 12 12
      zdkkc2/public/staticData/data.js
  35. 二进制
      zdkkc2/public/staticData/plane/5.png
  36. 二进制
      zdkkc2/public/staticData/plane/6.png
  37. 二进制
      zdkkc2/public/staticData/plane/7.png
  38. 二进制
      zdkkc2/public/staticData/plane/8.png
  39. 二进制
      zdkkc2/public/staticData/plane/9.png
  40. 二进制
      zdkkc2/public/staticData/stereoscopic/1.png
  41. 二进制
      zdkkc2/src/assets/images/bottom.png
  42. 二进制
      zdkkc2/src/assets/images/hot.png
  43. 二进制
      zdkkc2/src/assets/images/left.png
  44. 二进制
      zdkkc2/src/assets/images/list-bg.png
  45. 二进制
      zdkkc2/src/assets/images/map.png
  46. 二进制
      zdkkc2/src/assets/images/right.png
  47. 3 1
      zdkkc2/src/utils/https.ts
  48. 266 6
      zdkkc2/src/views/Detail/detailPage.vue
  49. 2 2
      zdkkc2/src/views/Home/homePage.vue
  50. 1 2
      zdkkc2/src/views/Scene/scenePage.vue

文件差异内容过多而无法显示
+ 1 - 0
hot/css/app.6a007eb6.css


文件差异内容过多而无法显示
+ 11 - 0
hot/css/chunk-vendors.ae03c740.css


二进制
hot/img/IMGerror.f7bd5886.png


二进制
hot/img/iframe-icon.2797cd24.png


二进制
hot/img/img-icon.f320665e.png


二进制
hot/img/loading.236fa088.gif


二进制
hot/img/model-icon.a439e688.png


二进制
hot/img/video-icon.6b8f2767.png


文件差异内容过多而无法显示
+ 1 - 0
hot/index.html


+ 2 - 0
hot/js/about.efbc423d.js

@@ -0,0 +1,2 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["about"],{f820:function(t,e,n){"use strict";n.r(e);var a=function(){var t=this,e=t.$createElement;t._self._c;return t._m(0)},s=[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"about"},[n("h1",[t._v("This is an about page")])])}],u=n("2877"),c={},i=Object(u["a"])(c,a,s,!1,null,null,null);e["default"]=i.exports}}]);
+//# sourceMappingURL=about.efbc423d.js.map

文件差异内容过多而无法显示
+ 1 - 0
hot/js/about.efbc423d.js.map


文件差异内容过多而无法显示
+ 2 - 0
hot/js/app.c97bed3a.js


文件差异内容过多而无法显示
+ 1 - 0
hot/js/app.c97bed3a.js.map


文件差异内容过多而无法显示
+ 55 - 0
hot/js/chunk-vendors.38400121.js


文件差异内容过多而无法显示
+ 1 - 0
hot/js/chunk-vendors.38400121.js.map


+ 1 - 1
scene/public/static/css/main.css

@@ -4114,7 +4114,7 @@ a.hasHover:hover, a:active {
 
 .frame .slidee li.thumbImg.active>img, .frame .slidee li.thumbImg.hasHover.active>img:hover {
     opacity: 1;
-    border: 2px solid #FFF6D2;
+    border: 2px solid #911212;
 }
 
 .frame .slidee li.thumbImg.active>.overlay, .frame .slidee li.thumbImg.hasHover.active>.overlay:hover {

+ 1 - 1
scene/public/static/js/Hot.js

@@ -1279,7 +1279,7 @@ window.initHot = function(model){
             var popup = document.getElementById("popup");
             
             if (openHot) {
-                alert('openHot')
+                // alert('openHot')
 
                 g_currentHot = this,
                 popup.style.display = "block",

二进制
scene/src/assets/images/code.png


+ 1 - 1
scene/src/views/gui/menu.vue

@@ -137,7 +137,7 @@
           <!-- <div class="hoverTit">分享</div> -->
           <div class="sharing-box" v-show="isShowSharing" @mouseover="() => { isShowSharing = true }"
             @mouseout="() => { isShowSharing = false }">
-            <img src="/code.png" />
+            <img src="@/assets/images/code.png" />
             <div>扫一扫,分享VR时空</div>
           </div>
           <img src="../../assets/img/share.png" />

+ 1 - 1
scene2/public/static/css/main.css

@@ -4114,7 +4114,7 @@ a.hasHover:hover, a:active {
 
 .frame .slidee li.thumbImg.active>img, .frame .slidee li.thumbImg.hasHover.active>img:hover {
     opacity: 1;
-    border: 2px solid #FFF6D2;
+    border: 2px solid #911212;
 }
 
 .frame .slidee li.thumbImg.active>.overlay, .frame .slidee li.thumbImg.hasHover.active>.overlay:hover {

+ 0 - 9
zdkkc/components.d.ts

@@ -7,16 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
-    IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
-    IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
-    IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
-    IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
-    IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
-    ProjectDetail: typeof import('./src/components/projectDetail.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
-    WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }
 }

文件差异内容过多而无法显示
+ 1 - 1
zdkkc/public/scenePage/css/app.c4976821.css


二进制
zdkkc/public/scenePage/img/code.c01b1416.png


文件差异内容过多而无法显示
+ 1 - 1
zdkkc/public/scenePage/index.html


文件差异内容过多而无法显示
+ 0 - 1
zdkkc/public/scenePage/js/app.da8066a5.js


文件差异内容过多而无法显示
+ 1 - 0
zdkkc/public/scenePage/js/app.ee4d026b.js


+ 5 - 5
zdkkc/public/staticData/data.js

@@ -33,13 +33,13 @@ const dataAll = {
             left: '40%'
           },
           hotP: {
-            top: '0px',
-            left: '0px'
+            top: '20px',
+            left: '-83px'
           },
           lineP: {
-            width: '20vw',
+            width: '33vw',
             height: 'auto',
-            left: '30px'
+            left: '-21px'
           }
         },
         {
@@ -99,7 +99,7 @@ const dataAll = {
             left: '40%'
           },
           hotP: {
-            top: '180px',
+            top: '141px',
             left: '-7px',
           },
           lineP: {

+ 15 - 0
zdkkc/src/base.css

@@ -0,0 +1,15 @@
+#app {
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  /* overflow: hidden; */
+}
+body {
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+* {
+  margin: 0;
+  padding: 0;
+}

+ 5 - 5
zdkkc/src/main.ts

@@ -1,4 +1,4 @@
-import './assets/main.css'
+import './base.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
@@ -6,14 +6,14 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import { Toast } from 'vant';
-import "viewerjs/dist/viewer.css";
-import Viewer from "v-viewer";
+// import "viewerjs/dist/viewer.css";
+// import Viewer from "v-viewer";
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
 app.use(Toast)
-app.use(Viewer)
+// app.use(Viewer)
 
-app.mount('#app')
+app.mount('#app')

+ 3 - 1
zdkkc/src/utils/https.ts

@@ -1,8 +1,10 @@
 // const baseURl = ''
 // 本地
-export const baseURl = 'http://127.0.0.1:5173/staticData'
+// export const baseURl = 'http://127.0.0.1:5174/staticData'
+export const baseURl = './staticData'
 
 // 线上开发
 const baseResourceUrl = './staticData'
 
 export default baseResourceUrl
+ 

+ 44 - 20
zdkkc/src/views/Detail/detailPage.vue

@@ -36,28 +36,29 @@ onMounted(() => {
     <img class="logo-icon" src="@/assets/images/logoS.png" alt="">
     <div class="menu-box">
       <img src="@/assets/images/menu.png" alt="">
-      <div class="title" v-for="item in  store.dataAll.modeList" :key="item.name"
+      <div class="title" v-for="item in store.dataAll.modeList" :key="item.name"
         :class="{ 'stereoscopic': item.name == 'stereoscopic', 'activeTitle': mode.name == item.name }"
         @click="() => { mode = item, curInfoPart = {} as any }">{{ item.title }}</div>
       <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 }">{{
-        item.number }}</div>
+              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 }">{{
-        item.name }}</div>
+              item.name }}</div>
         </div>
       </div>
     </div>
     <div class="main">
 
-      <img v-show="Object.keys(curInfoPart).length == 0" :src="`${baseURl}/${mode.name}/${mode.mainBody}`" alt="">
+      <img class="img3d" v-show="Object.keys(curInfoPart).length == 0" :src="`${baseURl}/${mode.name}/${mode.mainBody}`"
+        alt="">
       <div class="main-box" v-show="Object.keys(curInfoPart).length > 0"
         :style="{ backgroundImage: `url(${baseURl}/${mode.name}/${curInfoPart.mainBody})`, backgroundSize: '100% 100%' }">
-        <img :style="{ position: 'absolute' }" v-show="Object.keys(curInfoPart).length > 0"
+        <img :style="{ position: 'absolute' }" v-show="Object.keys(curInfoPart).length > 0 && curInfoPart.name != '救生艇'"
           :src="`${baseURl}/${mode.name}/${curInfoPart.heilight}`" alt="">
 
         <!-- 介绍框 -->
@@ -99,19 +100,28 @@ onMounted(() => {
     position: absolute;
     left: 4%;
     top: 12%;
+    width: 22vw;
   }
 
   .menu-box {
     position: fixed;
-    right: 15vw;
+    right: 2vw;
     z-index: 2;
+    width: 15vw;
+    height: 70vh;
+
+    @media screen and (max-width: 1560px) {
+      width: 20vw;
+    }
 
     img {
       position: absolute;
+      width: 100%;
+      height: 100%;
     }
 
     .stereoscopic {
-      top: 7.5vh !important;
+      top: 8.5vh !important;
     }
 
     .activeTitle {
@@ -124,27 +134,32 @@ onMounted(() => {
     }
 
     .title {
+      width: 100%;
+      text-align: center;
+      padding-left: 8%;
       color: #351301;
       font-family: 'REEJI-DuoguanGB-free-Flash';
-      font-size: 2em;
+      font-size: 1.6em;
       position: absolute;
       white-space: nowrap;
-      left: 50%;
-      transform: translateX(116%);
-      top: 17.5vh;
+      // left: 50%;
+      // transform: translateX(120%);
+      top: 20vh;
       cursor: pointer;
     }
 
     .plane-list {
+      width: 100%;
       position: absolute;
-      top: 23vh;
+      top: 26vh;
       color: #CECECE;
-      font-size: 1.2em;
+      font-size: 1em;
       letter-spacing: 2px;
-      transform: translateX(20%);
+      transform: translateX(7%);
       white-space: nowrap;
       line-height: 40px;
       display: flex;
+      justify-content: center;
 
       .plane-left {
         text-align: right;
@@ -187,11 +202,20 @@ onMounted(() => {
     justify-content: center;
     align-items: center;
 
+    .img3d {
+      margin-left: -10%;
+      width: 80%;
+      @media screen and (max-width: 1560px) {
+        width: 75%;
+      }
+    }
+
     .main-box {
-      width: 75%;
-      height: 80%;
+      width: 70%;
+      height: 75%;
       position: relative;
       top: 50px;
+      margin-left: -10%;
 
       img {
         width: 100%;
@@ -227,7 +251,7 @@ onMounted(() => {
         align-items: center;
         color: #E8B478;
         font-family: 'SourceHanSansCN-Bold';
-        font-size: 1.2em;
+        font-size: 1em;
         margin-bottom: 10px;
 
       }
@@ -247,7 +271,7 @@ onMounted(() => {
         .disc {
           color: rgba(255, 255, 255, 0.842);
           letter-spacing: 2px;
-          font-size: 1.1em;
+          font-size: 0.9em;
           // line-height: 28px;
           max-height: 90%;
           overflow: auto;
@@ -256,9 +280,9 @@ onMounted(() => {
         }
 
         ::-webkit-scrollbar {
-          width: 10px;
+          width: 5px;
           /* 设置滚动条宽度 */
-          height: 10px;
+          height: 5px;
           /* 对于垂直滚动条的高度,也可以使用此属性 */
           background-color: #f5f5f531;
           /* 背景颜色 */

+ 1 - 1
zdkkc/src/views/Scene/scenePage.vue

@@ -35,7 +35,7 @@ onMounted(() => {
 
 <template>
   <div class="scene-box">
-    <iframe :src="`/scenePage/index.html?m=${curCode}`"></iframe>
+    <iframe :src="`./scenePage/index.html?m=${curCode}`"></iframe>
   </div>
 
 </template>

+ 0 - 9
zdkkc2/components.d.ts

@@ -7,16 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
-    IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
-    IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
-    IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
-    IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
-    IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
-    ProjectDetail: typeof import('./src/components/projectDetail.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
-    WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }
 }

+ 12 - 12
zdkkc2/public/staticData/data.js

@@ -117,16 +117,16 @@ const dataAll = {
           sceneCode: '',
           info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
           guideP: {
-            top: '20%',
-            left: '40%'
+            top: '23%',
+            left: '36%'
           },
           hotP: {
-            top: '19vh',
+            top: '25vh',
             left: '0px',
           },
           lineP: {
             width: '20vw',
-            height: '25vh',
+            height: '30vh',
             left: '30px'
           }
         },
@@ -143,12 +143,12 @@ const dataAll = {
             left: '40%'
           },
           hotP: {
-            top: '24vh',
+            top: '33vh',
             left: '-1vh',
           },
           lineP: {
             width: '20vw',
-            height: '28vh',
+            height: '37vh',
             left: '30px'
           }
         },
@@ -166,12 +166,12 @@ const dataAll = {
             left: '40%'
           },
           hotP: {
-            top: '28vh',
+            top: '37vh',
             left: '0px'
           },
           lineP: {
             width: '20vw',
-            height: '35vh',
+            height: '42vh',
             left: '30px'
           }
         },
@@ -188,12 +188,12 @@ const dataAll = {
             left: '40%'
           },
           hotP: {
-            top: '33vh',
+            top: '42vh',
             left: '0px'
           },
           lineP: {
             width: '20vw',
-            height: '40vh',
+            height: '47vh',
             left: '30px'
           }
         },
@@ -210,12 +210,12 @@ const dataAll = {
             left: '40%'
           },
           hotP: {
-            top: '37vh',
+            top: '48vh',
             left: '0px'
           },
           lineP: {
             width: '20vw',
-            height: '44vh',
+            height: '53vh',
             left: '30px'
           }
         },

二进制
zdkkc2/public/staticData/plane/5.png


二进制
zdkkc2/public/staticData/plane/6.png


二进制
zdkkc2/public/staticData/plane/7.png


二进制
zdkkc2/public/staticData/plane/8.png


二进制
zdkkc2/public/staticData/plane/9.png


二进制
zdkkc2/public/staticData/stereoscopic/1.png


二进制
zdkkc2/src/assets/images/bottom.png


二进制
zdkkc2/src/assets/images/hot.png


二进制
zdkkc2/src/assets/images/left.png


二进制
zdkkc2/src/assets/images/list-bg.png


二进制
zdkkc2/src/assets/images/map.png


二进制
zdkkc2/src/assets/images/right.png


+ 3 - 1
zdkkc2/src/utils/https.ts

@@ -1,6 +1,8 @@
 // const baseURl = ''
 // 本地
-export const baseURl = 'http://127.0.0.1:5173/staticData'
+// export const baseURl = 'http://127.0.0.1:5173/staticData'
+export const baseURl = './staticData'
+
 
 // 线上开发
 const baseResourceUrl = './staticData'

+ 266 - 6
zdkkc2/src/views/Detail/detailPage.vue

@@ -1,23 +1,48 @@
 <script setup lang='ts'>
 import { useStore } from '@/stores';
+import { baseURl } from '@/utils/https';
 
 const router = useRouter()
 const store = useStore()
 
 // info-简介  construction-结构  scene-场景
 const curMoudle = ref('')
+const curInfoPart = ref({} as any)
+
+const curSelect = ref({} as any)
+const curMode = ref({} as any)
+
+const isShowGuide = ref(false)
+
+const goScenefu = () => {
+  store.mode = curMode.value;
+  store.currentInfoPart = curInfoPart.value;
+  router.push({
+    path: '/scene',
+    query: {
+      code: curInfoPart.value.sceneCode
+    }
+  })
+}
+
+onMounted(() => {
+  if (Object.keys(store.currentInfoPart).length != 0) {
+    curInfoPart.value = store.currentInfoPart
+  }
+})
 
 </script>
 
 <template>
-  <div class='detail-page'>
+  <div class='detail-page'
+    :style="{ backgroundImage: Object.keys(curMode).length === 0 ? '' : `url(${baseURl}/${curMode.name}/${Object.keys(curSelect).length > 0 ? curSelect.id + '.png' : curMode.mainBody})` }">
     <!-- 功能区 -->
     <div class="logo-welcome">
       <div class="item" @click="curMoudle = 'info'">
         <div>{{ store.dataAll.info.name }}</div>
         <img :style="{ opacity: curMoudle == 'info' ? '1' : '' }" src="@/assets/images/begin-select.png" alt="">
       </div>
-      <div class="item" @click="curMoudle = 'construction'">
+      <div class="item" @click="() => { curMoudle = 'construction', curMode = store.dataAll.modeList[0] }">
         <div>结构</div>
         <img :style="{ opacity: curMoudle == 'construction' ? '1' : '' }" src="@/assets/images/begin-select.png" alt="">
       </div>
@@ -36,6 +61,54 @@ const curMoudle = ref('')
       <div class="disc">{{ store.dataAll.info.content.disc }}</div>
     </div>
 
+    <!-- 结构相关样式 -->
+    <div v-show="curMoudle == 'construction'" class="construction-box">
+      <!-- 地图 -->
+      <img class="img-map" src="@/assets/images/map.png" alt="">
+      <!-- 左侧刻度 -->
+      <img class="img-left" src="@/assets/images/left.png" alt="">
+      <!-- 右侧刻度 -->
+      <img class="img-right" src="@/assets/images/right.png" alt="">
+      <!-- 底部渐变 -->
+      <img class="img-bottom" src="@/assets/images/bottom.png" alt="">
+
+      <!-- 船体列表 -->
+      <div class="list-box">
+        <div class="stereoscopic-box"
+          @click="() => { curSelect = {}, curMode = store.dataAll.modeList[0], curInfoPart = {}, isShowGuide = false }">
+          {{ store.dataAll.modeList[0].title }}
+        </div>
+        <div class="list-bottom">
+          <div class="list-item" :class="{ 'active': item.name == curSelect.name }"
+            @click="() => { 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' : '' }">
+            {{ item.number + item.name }}
+          </div>
+        </div>
+      </div>
+      <!-- 信息框 -->
+      <div class="info-box-detail" v-show="Object.keys(curSelect).length > 0 && isShowGuide">
+        <img class="close-icon" @click="isShowGuide = false" src="@/assets/images/close.png" alt="">
+        <div class="title">{{ curSelect.number + curSelect.name }}</div>
+        <div class="line"></div>
+        <div class="bottom-content">
+          <div>{{ curSelect.info }}</div>
+          <img :src="`${baseURl}/plane/pic${curSelect.id}.png`" alt="">
+        </div>
+      </div>
+
+      <!-- 指引 -->
+      <div class="guide-box" v-if="Object.keys(curSelect).length > 0 && isShowGuide"
+        :style="{ top: curInfoPart.guideP.top, left: curInfoPart.guideP.left }">
+        <img class="hot-icon" :style="{ top: curInfoPart.hotP.top, left: curInfoPart.hotP.left }" @click="goScenefu()"
+          src="@/assets/images/hot.png" alt="">
+        <img class="line"
+          :style="{ width: curInfoPart.lineP.width, height: curInfoPart.lineP.height, left: curInfoPart.lineP.left }"
+          :src="`${baseURl}/plane/line${curSelect.id}.png`" alt="">
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -50,6 +123,7 @@ const curMoudle = ref('')
     width: 40vw;
     height: 15vh;
     position: absolute;
+    z-index: 2;
     left: 50%;
     bottom: 0vh;
     transform: translateX(-50%);
@@ -73,6 +147,7 @@ const curMoudle = ref('')
       align-items: center;
       width: 18%;
       margin-top: 24px;
+      font-size: 0.9em;
 
 
       img {
@@ -95,7 +170,7 @@ const curMoudle = ref('')
     right: 0;
 
     img {
-      width: 45px;
+      width: 35px;
       position: absolute;
       right: 10px;
       top: 10px;
@@ -106,19 +181,19 @@ const curMoudle = ref('')
       text-align: center;
       margin-bottom: 20px;
       font-weight: bold;
-      font-size: 1.5em;
+      font-size: 1.2em;
     }
 
     .disc {
       letter-spacing: 2px;
-      font-size: 1.2em;
+      font-size: 1em;
       text-indent: 2em;
       max-height: 100%;
       overflow: auto;
     }
 
     ::-webkit-scrollbar {
-      width: 10px;
+      width: 2px;
       /* 设置滚动条宽度 */
       height: 10px;
       /* 对于垂直滚动条的高度,也可以使用此属性 */
@@ -138,5 +213,190 @@ const curMoudle = ref('')
       /* 可选,给滑块添加阴影效果 */
     }
   }
+
+  .construction-box {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    .img-map {
+      position: absolute;
+      left: 5%;
+      top: 5%;
+    }
+
+    .img-left {
+      position: absolute;
+      left: 26px;
+      top: 50%;
+      transform: translateY(-50%)
+    }
+
+    .img-right {
+      position: absolute;
+      right: 26px;
+      top: 50%;
+      transform: translateY(-50%)
+    }
+
+    .img-bottom {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+    }
+
+    .list-box {
+      width: 15vw;
+      height: 62vh;
+      background: url(@/assets/images/list-bg.png);
+      background-size: 100% 100%;
+      position: absolute;
+      right: 8%;
+      top: 20px;
+      z-index: 10px;
+      color: white;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding-bottom: 2%;
+      box-sizing: border-box;
+
+      .stereoscopic-box {
+        width: 100%;
+        height: 10%;
+        // background: rgba(0, 128, 0, 0.384);
+        margin-top: 7%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: bold;
+        font-size: 1.4em;
+        letter-spacing: 2px;
+        cursor: pointer;
+      }
+
+      .list-bottom {
+        width: 100%;
+        margin-top: 8%;
+        height: calc(81% - 20px);
+        // background: rgba(0, 128, 0, 0.384);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        font-size: 1.4em;
+        letter-spacing: 2px;
+
+        .list-item {
+          width: 70%;
+          padding: 10px 0 10px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-bottom: 1px solid rgba(0, 0, 0, 0.219);
+          cursor: pointer;
+          flex-basis: 20%;
+          font-size: 0.7em;
+        }
+
+        .active {
+          background: #1286AB;
+          border-bottom: none;
+          width: 90%;
+          font-weight: bold;
+        }
+
+      }
+    }
+
+    .info-box-detail {
+      width: 20vw;
+      // height: 20vh;
+      background: rgba(27, 27, 28, 0.6);
+      box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.3);
+      border-radius: 4px 4px 4px 4px;
+      position: absolute;
+      top: 10%;
+      right: 25%;
+      padding: 20px 20px;
+      z-index: 2;
+
+      .close-icon {
+        width: 35px;
+        height: 35px;
+        cursor: pointer;
+        position: absolute;
+        top: 10px;
+        right: 10px;
+      }
+
+      .title {
+        color: #FFFFFF;
+        font-weight: bold;
+        font-size: 1.2em;
+      }
+
+      .line {
+        width: 100%;
+        height: 2px;
+        background: linear-gradient(to right, rgba(63, 151, 188, 1), rgba(63, 151, 188, 0));
+        margin: 10px 0;
+      }
+
+      .bottom-content {
+        display: flex;
+        color: white;
+
+        img {
+          width: 40%;
+          object-fit: contain;
+          margin-left: 10px;
+        }
+
+        div {
+          max-height: 10vh;
+          overflow: auto;
+          font-size: 0.9em;
+        }
+
+        ::-webkit-scrollbar {
+          width: 2px;
+          /* 设置滚动条宽度 */
+          height: 2px;
+          /* 对于垂直滚动条的高度,也可以使用此属性 */
+          background-color: #f5f5f531;
+          /* 背景颜色 */
+          border-radius: 5px;
+          /* 边角圆角 */
+        }
+
+        /* 定义滚动条拖动柄(滑块)样式 */
+        ::-webkit-scrollbar-thumb {
+          background-color: #ffffff81;
+          /* 滑块的颜色 */
+          border-radius: 5px;
+          /* 可选,给滑块添加边框 */
+          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+          /* 可选,给滑块添加阴影效果 */
+        }
+      }
+    }
+
+    .guide-box {
+      position: absolute;
+
+      .hot-icon {
+        position: absolute;
+        z-index: 2;
+        cursor: pointer;
+      }
+
+      .line {
+        position: absolute;
+      }
+    }
+  }
 }
 </style>

+ 2 - 2
zdkkc2/src/views/Home/homePage.vue

@@ -22,7 +22,7 @@ const router = useRouter();
 
   .logo-icon {
     width: 23%;
-    height: 12vh;
+    // height: 12vh;
     position: absolute;
     right: 16%;
     top: 10%;
@@ -77,7 +77,7 @@ const router = useRouter();
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 2em;
+    font-size: 1.5em;
     padding-bottom: 15px;
     cursor: pointer;
     opacity: 0.7;

+ 1 - 2
zdkkc2/src/views/Scene/scenePage.vue

@@ -19,9 +19,8 @@ onMounted(() => {
 
 <template>
   <div class="scene-box">
-    <iframe :src="`/scenePage/index.html?m=${route.query.code ? route.query.code : 'TEST'}`"></iframe>
+    <iframe :src="`./scenePage/index.html?m=${route.query.code ? route.query.code : 'TEST'}`"></iframe>
   </div>
-
 </template>
 
 <style lang='less' scoped>