Startsida Utforska Hjälp
Registrera dig Logga in
chenzimin2
/
ZDKKC
1
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

feat:复古版横屏样式适配

aamin 1 år sedan
förälder
87fa81fe44
incheckning
63aca5b17b
52 ändrade filer med 639 tillägg och 115 borttagningar
Delad Vy Visa Diff Statistik
  1. 23 0
      scene/public/static/css/main.css
  2. 2 2
      scene/src/App.vue
  3. 2 2
      scene/src/assets/style/myBase.css
  4. 2 2
      scene/src/components/info/index.vue
  5. 27 7
      scene/src/views/gui/menu.vue
  6. 2 0
      zdkkc/index.html
  7. 21 15
      zdkkc/package-lock.json
  8. 1 1
      zdkkc/package.json
  9. 1 1
      zdkkc/public/scenePage/css/app.5848d421.css
  10. 1 1
      zdkkc/public/scenePage/index.html
  11. 1 0
      zdkkc/public/scenePage/js/app.cc2c6d5c.js
  12. 0 1
      zdkkc/public/scenePage/js/app.ee4d026b.js
  13. 23 1
      zdkkc/public/scenePage/static/css/main.css
  14. 1 1
      zdkkc/public/scenePage/static/js/Hot.js
  15. 32 14
      zdkkc/public/staticData/data.js
  16. BIN
      zdkkc/public/staticData/plane/pic1.png
  17. BIN
      zdkkc/public/staticData/plane/pic2.png
  18. BIN
      zdkkc/public/staticData/plane/pic3.png
  19. BIN
      zdkkc/public/staticData/plane/pic4.png
  20. BIN
      zdkkc/public/staticData/plane/pic5.png
  21. BIN
      zdkkc/public/staticData/plane/pic6.png
  22. BIN
      zdkkc/public/staticData/plane/pic7.png
  23. BIN
      zdkkc/public/staticData/plane/pic8.png
  24. BIN
      zdkkc/public/staticData/plane/pic9.png
  25. 95 28
      zdkkc/src/App.vue
  26. BIN
      zdkkc/src/assets/images/bgMo.png
  27. BIN
      zdkkc/src/assets/images/close.png
  28. BIN
      zdkkc/src/assets/images/detail-box-bg.png
  29. BIN
      zdkkc/src/assets/images/down-icon.png
  30. BIN
      zdkkc/src/assets/images/enter-btn.png
  31. BIN
      zdkkc/src/assets/images/landtip.png
  32. BIN
      zdkkc/src/assets/images/menu-left-mo.png
  33. BIN
      zdkkc/src/assets/images/menu-right-bg.png
  34. BIN
      zdkkc/src/assets/images/menu-right-mo.png
  35. BIN
      zdkkc/src/assets/images/orientation-tip-bg.png
  36. BIN
      zdkkc/src/assets/images/redBg.png
  37. 321 6
      zdkkc/src/views/Detail/detailPage.vue
  38. 37 3
      zdkkc/src/views/Home/homePage.vue
  39. 19 7
      zdkkc/src/views/Scene/scenePage.vue
  40. 9 9
      zdkkc/yarn.lock
  41. 10 10
      zdkkc2/public/staticData/data.js
  42. BIN
      zdkkc2/public/staticData/plane/pic1.png
  43. BIN
      zdkkc2/public/staticData/plane/pic2.png
  44. BIN
      zdkkc2/public/staticData/plane/pic3.png
  45. BIN
      zdkkc2/public/staticData/plane/pic4.png
  46. BIN
      zdkkc2/public/staticData/plane/pic5.png
  47. BIN
      zdkkc2/public/staticData/plane/pic6.png
  48. BIN
      zdkkc2/public/staticData/plane/pic7.png
  49. BIN
      zdkkc2/public/staticData/plane/pic8.png
  50. BIN
      zdkkc2/public/staticData/plane/pic9.png
  51. 5 2
      zdkkc2/src/views/Detail/detailPage.vue
  52. 4 2
      zdkkc2/src/views/Scene/scenePage.vue

+ 23 - 0
scene/public/static/css/main.css
Visa fil 

@@ -7051,6 +7051,29 @@ a.hasHover.tag-link:hover {
 
     }
 
 }
 
 
+@media screen and (orientation: landscape) and (max-width: 1000px) {
 
+    .viewContainer{
 
+        padding: 0 30px;
 
+        /* display: flex !important;
 
+        align-items: center;
 
+        border-radius: 0 20px 20px 0; */
 
+    }
 
+    .pinBottom.left{
 
+        bottom: 15px;
 
+    }
 
+    .pinBottom.right{
 
+        bottom: 15px;
 
+        /* padding-right: 1.875rem; */
 
+    }
 
+    #gui-modes-map>div[rel]{
 
+        width: 45px;
 
+    }
 
+    #play, #pause{
 
+        width: 45px;
 
+    }
 
+
 
+}
 
+
 
 @media only screen and (max-width: 370px) {
 
     #gui-name {
 
         font-size: 12px;

+ 2 - 2
scene/src/App.vue
Visa fil 

@@ -56,14 +56,14 @@ export default {
 
 /*竖屏*/
 
 @media screen and (orientation: portrait) {
 
   .orientation-tip {
 
-    display: none;
 
+    display: block;
 
   }
 
 }
 
 
 /*横屏*/
 
 @media screen and (orientation: landscape) {
 
   .orientation-tip {
 
-    display: block;
 
+    display: none;
 
   }
 
 }
 
 </style>

+ 2 - 2
scene/src/assets/style/myBase.css
Visa fil 

@@ -1,7 +1,7 @@
 
 #gui .pinBottom.right {
 
-  height: 60px;
 
+  /* height: 60px; */
 
   display: flex;
 
-  align-items: center;
 
+  align-items: end;
 
 }
 
 .pinBottom-container.drawerOpen {
 
   bottom: 0;

+ 2 - 2
scene/src/components/info/index.vue
Visa fil 

@@ -236,8 +236,8 @@ export default {
 
     height: 58px;
 
     width: 300px;
 
     min-width: 0px;
 
-    transform: scale(0.7);
 
-    left: -10%;
 
+    transform: scale(0.6);
 
+    left: -6%;
 
 
     .title-box {
 
       font-size: 18px;

+ 27 - 7
scene/src/views/gui/menu.vue
Visa fil 

@@ -482,6 +482,8 @@ export default {
 
     top: -25%;
 
     transform: translateX(-95%);
 
 
+
 
+
 
     img {
 
       height: auto !important;
 
     }
 
@@ -494,8 +496,8 @@ export default {
 
   .viewContainer {
 
     &>div {
 
       img {
 
-        width: 33px !important;
 
-        height: 33px !important;
 
+        width: 38px !important;
 
+        height: 38px !important;
 
       }
 
     }
 
   }
 
@@ -512,14 +514,14 @@ export default {
 
       right: 10px;
 
 
       .rightViewContainer {
 
-        flex-direction: column;
 
+        // flex-direction: column;
 
 
         &>div,
 
         #volume {
 
-          width: 50px !important;
 
+          width: 45px !important;
 
           text-align: right;
 
           margin-right: 0;
 
-          margin-bottom: 10px;
 
+          // margin-bottom: 10px;
 
 
           &>div {
 
             display: flex;
 
@@ -527,8 +529,13 @@ export default {
 
           }
 
 
           img {
 
-            width: 33px;
 
-            height: 33px;
 
+            width: 38px;
 
+            height: 38px;
 
+
 
+            @media screen and (orientation: landscape) {
 
+              // width: 40px;
 
+              // height: 40px;
 
+            }
 
           }
 
         }
 
       }
 
@@ -539,4 +546,17 @@ export default {
 
     display: none;
 
   }
 
 }
 
+
 
+// 移动端横屏
 
+@media screen and (orientation: landscape) and (max-width: 1000px) {
 
+  .sharing-box {
 
+    left: 50%;
 
+    top: 50%;
 
+    transform: translate(-50%, -50%);
 
+    position: fixed;
 
+    width: 240px;
 
+    padding: 40px;
 
+    border-radius: 0;
 
+  }
 
+}
 
 </style>

+ 2 - 0
zdkkc/index.html
Visa fil 

@@ -8,6 +8,7 @@
 
   <meta name="apple-mobile-web-app-capable" content="yes">
 
   <meta name="viewport"
 
     content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
+  <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" condition="if(!wx)" defer></script> -->
 
 
   <!-- 本地开发 -->
 
   <script src="/staticData/data.js"></script>
 
@@ -20,6 +21,7 @@
 
 <body>
 
   <div id="app"></div>
 
   <script type="module" src="/src/main.ts"></script>
 
+
 
 </body>
 
 
 </html>

+ 21 - 15
zdkkc/package-lock.json
Visa fil 

@@ -9,7 +9,7 @@
 
       "version": "0.0.0",
 
       "dependencies": {
 
         "@types/node": "^20.5.0",
 
-        "axios": "^1.6.2",
 
+        "axios": "^1.6.8",
 
         "easyscroller": "^1.0.1",
 
         "element-plus": "^2.5.5",
 
         "js-base64": "^3.7.5",
 
@@ -1608,11 +1608,11 @@
 
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
 
     },
 
     "node_modules/axios": {
 
-      "version": "1.6.2",
 
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.2.tgz",
 
-      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
 
+      "version": "1.6.8",
 
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
 
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
 
       "dependencies": {
 
-        "follow-redirects": "^1.15.0",
 
+        "follow-redirects": "^1.15.6",
 
         "form-data": "^4.0.0",
 
         "proxy-from-env": "^1.1.0"
 
       }
 
@@ -2368,9 +2368,15 @@
 
       "dev": true
 
     },
 
     "node_modules/follow-redirects": {
 
-      "version": "1.15.3",
 
-      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz",
 
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
 
+      "version": "1.15.6",
 
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
 
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
 
+      "funding": [
 
+        {
 
+          "type": "individual",
 
+          "url": "https://github.com/sponsors/RubenVerborgh"
 
+        }
 
+      ],
 
       "engines": {
 
         "node": ">=4.0"
 
       },
 
@@ -5592,11 +5598,11 @@
 
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
 
     },
 
     "axios": {
 
-      "version": "1.6.2",
 
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.2.tgz",
 
-      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
 
+      "version": "1.6.8",
 
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
 
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
 
       "requires": {
 
-        "follow-redirects": "^1.15.0",
 
+        "follow-redirects": "^1.15.6",
 
         "form-data": "^4.0.0",
 
         "proxy-from-env": "^1.1.0"
 
       }
 
@@ -6195,9 +6201,9 @@
 
       "dev": true
 
     },
 
     "follow-redirects": {
 
-      "version": "1.15.3",
 
-      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz",
 
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q=="
 
+      "version": "1.15.6",
 
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
 
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA=="
 
     },
 
     "form-data": {
 
       "version": "4.0.0",

+ 1 - 1
zdkkc/package.json
Visa fil 

@@ -14,7 +14,7 @@
 
   },
 
   "dependencies": {
 
     "@types/node": "^20.5.0",
 
-    "axios": "^1.6.2",
 
+    "axios": "^1.6.8",
 
     "easyscroller": "^1.0.1",
 
     "element-plus": "^2.5.5",
 
     "js-base64": "^3.7.5",

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 1 - 1
zdkkc/public/scenePage/css/app.5848d421.css


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 1 - 1
zdkkc/public/scenePage/index.html


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 1 - 0
zdkkc/public/scenePage/js/app.cc2c6d5c.js


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 0 - 1
zdkkc/public/scenePage/js/app.ee4d026b.js


+ 23 - 1
zdkkc/public/scenePage/static/css/main.css
Visa fil 

@@ -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 {
 
@@ -7051,6 +7051,28 @@ a.hasHover.tag-link:hover {
 
     }
 
 }
 
 
+@media screen and (orientation: landscape) and (max-width: 1000px) {
 
+    .viewContainer{
 
+        padding: 0;
 
+        /* display: flex !important;
 
+        align-items: center;
 
+        border-radius: 0 20px 20px 0; */
 
+    }
 
+    .pinBottom.left{
 
+        bottom: 15px;
 
+    }
 
+    .pinBottom.right{
 
+        bottom: 15px;
 
+    }
 
+    #gui-modes-map>div[rel]{
 
+        width: 45px;
 
+    }
 
+    #play, #pause{
 
+        width: 45px;
 
+    }
 
+
 
+}
 
+
 
 @media only screen and (max-width: 370px) {
 
     #gui-name {
 
         font-size: 12px;

+ 1 - 1
zdkkc/public/scenePage/static/js/Hot.js
Visa fil 

@@ -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",

+ 32 - 14
zdkkc/public/staticData/data.js
Visa fil 

@@ -27,14 +27,16 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '1.png',
 
           sceneCode:'KJ-SjCkVMr1qvf',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '主桅顶部布置了船舶航行雷达、天气雷达和自动气象站，用于周围船舶扫描和气象要素观测。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
           },
 
           hotP: {
 
             top: '20px',
 
-            left: '-83px'
 
+            left: '-83px',
 
+            topMo:'-32px',
 
+            leftMo:'-68px',
 
           },
 
           lineP: {
 
             width: '33vw',
 
@@ -49,7 +51,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '2.png',
 
           sceneCode:'KJ-KHsnJLZm3cn',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层包含观察室和多种天线集群，保障船舶在海上的通讯和安全航行。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
@@ -57,6 +59,8 @@ const dataAll = {
 
           hotP: {
 
             top: '5vh',
 
             left: '-36px',
 
+            topMo:'-4vh',
 
+            leftMo:'-36px',
 
           },
 
           lineP: {
 
             width: '20vw',
 
@@ -71,7 +75,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '3.png',
 
           sceneCode:'KJ-DTMF9dkffbn',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层是船舶驾驶台，用于船舶航行操控。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
@@ -79,6 +83,8 @@ const dataAll = {
 
           hotP: {
 
             top: '9vh',
 
             left: '-1vw',
 
+            topMo:'-1vh',
 
+            leftMo:'-6vw',
 
           },
 
           lineP: {
 
             width: '20vw',
 
@@ -93,7 +99,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '4.png',
 
           sceneCode:'KJ-4fYUsjIDNBL',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层包含直升机平台和无人机库等，用于直升机应急救援、科考无人机的存放和起落。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
@@ -101,6 +107,8 @@ const dataAll = {
 
           hotP: {
 
             top: '141px',
 
             left: '-7px',
 
+            topMo:'48px',
 
+            leftMo:'-7px',
 
           },
 
           lineP: {
 
             width: '20vw',
 
@@ -115,7 +123,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '5.png',
 
           sceneCode:'KJ-3902aPaHp8O',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层主要是船员住舱区域，同时配套了小型会议室；艏楼甲板主要用于伙食等生活物资吊运，其前部的科学桅上布置了部分气象观测设备。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
@@ -123,6 +131,8 @@ const dataAll = {
 
           hotP: {
 
             top: '19vh',
 
             left: '0px',
 
+            topMo:'19vh',
 
+            leftMo:'0px',
 
           },
 
           lineP: {
 
             width: '20vw',
 
@@ -137,7 +147,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '6.png',
 
           sceneCode:'KJ-wZetq7LLSnK',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层主要是科考人员的住舱区域，同时配套了图书阅览室；登艇甲板主要用于紧急逃生集合及救生艇、工作艇布放。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
@@ -145,6 +155,8 @@ const dataAll = {
 
           hotP: {
 
             top: '24vh',
 
             left: '-1vh',
 
+            topMo:'24vh',
 
+            leftMo:'-1vh',
 
           },
 
           lineP: {
 
             width: '20vw',
 
@@ -159,7 +171,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '7.png',
 
           sceneCode:'KJ-5NGVgP2oO5G',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层是参航队员饮食休闲的生活区域，包含厨房餐厅、影音娱乐、健身区、多功能厅、科教展示区以及登船大堂等。',
 
           guideP: {
 
             top: '20%',
 
             height: '20vh',
 
@@ -167,7 +179,9 @@ const dataAll = {
 
           },
 
           hotP: {
 
             top: '28vh',
 
-            left: '0px'
 
+            left: '0px',
 
+            topMo:'28vh',
 
+            leftMo:'0px',
 
           },
 
           lineP: {
 
             width: '20vw',
 
@@ -182,14 +196,16 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '8.png',
 
           sceneCode:'KJ-1G9iEXB7ohx',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层是科考作业和室内实验的主要工作区域，包含CTD采水间、通用湿实验室、通用干实验室、仪器运维室等多个实验室及610㎡的大型甲板作业区；同时也是全船科考设备集中操控和显示的区域。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
           },
 
           hotP: {
 
             top: '33vh',
 
-            left: '0px'
 
+            left: '0px',
 
+            topMo:'33vh',
 
+            leftMo:'0px',
 
           },
 
           lineP: {
 
             width: '20vw',
 
@@ -204,14 +220,16 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '9.png',
 
           sceneCode:'KJ-4XeLjELZjSh_02',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层包含多个科考人员的住舱、科考操控支撑设备，同时也是船舶动力系统的集中控制区。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
           },
 
           hotP: {
 
             top: '37vh',
 
-            left: '0px'
 
+            left: '0px',
 
+            topMo:'37vh',
 
+            leftMo:'0px',
 
           },
 
           lineP: {
 
             width: '20vw',
 
@@ -223,7 +241,7 @@ const dataAll = {
 
           id: 10,
 
           name: '救生艇',
 
           number: '-:',
 
-          sceneCode:'TEST',
 
+          sceneCode:'KJ-VfABdXXAzvy',
 
           mainBody: 'detail.png',
 
         },
 
       ]

BIN
zdkkc/public/staticData/plane/pic1.png
Visa fil


BIN
zdkkc/public/staticData/plane/pic2.png
Visa fil


BIN
zdkkc/public/staticData/plane/pic3.png
Visa fil


BIN
zdkkc/public/staticData/plane/pic4.png
Visa fil


BIN
zdkkc/public/staticData/plane/pic5.png
Visa fil


BIN
zdkkc/public/staticData/plane/pic6.png
Visa fil


BIN
zdkkc/public/staticData/plane/pic7.png
Visa fil


BIN
zdkkc/public/staticData/plane/pic8.png
Visa fil


BIN
zdkkc/public/staticData/plane/pic9.png
Visa fil


+ 95 - 28
zdkkc/src/App.vue
Visa fil 

@@ -1,9 +1,35 @@
 
 <script setup lang="ts">
 
 import { useStore } from "./stores/index";
 
+import axios from "axios";
 
 const store = useStore();
 
 
 const time = ref();
 
 
+const isMobile = ref(false)
 
+
 
+const isMobileDevice = () => {
 
+  const mobileRegex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
 
+  return mobileRegex.test(navigator.userAgent);
 
+}
 
+
 
+// 加上浏览量统计
 
+const getVisit = () => {
 
+  axios
 
+    .get("https://sit-likecount.4dage.com/api/show/share/detail/zdkkcRetro")
 
+    .then(() => {
 
+    });
 
+}
 
+
 
+const onVisit = () => {
 
+  axios
 
+    .post("https://sit-likecount.4dage.com/api/show/addVisit", {
 
+      sceneCode: "zdkkcRetro",
 
+      type: "visit"
 
+    })
 
+    .then(() => {
 
+      getVisit()
 
+    });
 
+}
 
 
 onMounted(() => {
 
   // @ts-ignore
 
@@ -18,44 +44,47 @@ onMounted(() => {
 
       time.current = window.setTimeout(() => {
 
         // 根元素
 
         const dom: HTMLDivElement | null = document.querySelector("#app");
 
-        if (dom && document.documentElement.clientWidth < 480) {
 
+        if (dom && document.documentElement.clientWidth < 1000) {
 
           dom.style.height = document.documentElement.clientHeight + "px";
 
+          dom.style.width = document.documentElement.clientWidth + "px";
 
+
 
         }
 
       }, 100);
 
     },
 
     true
 
   );
 
 
-  // const baseAPIUrl = ref('')
 
-  // // const baseAPIUrl = ref('http://192.168.20.61:8063')
 
-  // // const baseAPIUrl = ref('https://sit-cnzhengquan.4dage.com')
 
-
 
-  // // 统计访问量
 
-  // if (localStorage.getItem('refreshTime')) {
 
-  //   var nowDate = Math.floor(Date.now() / 1000);
 
-  //   // @ts-ignore
 
-  //   var storedTimestamp = parseInt(localStorage.getItem('refreshTime'), 10);
 
-  //   console.log('时间差',Math.floor((nowDate - storedTimestamp)))
 
-  //   if (Math.floor((nowDate - storedTimestamp) / 60) > 60) {
 
-  //     // 发送请求并且更新本地缓存
 
-
 
-  //     axios.get(`${baseAPIUrl.value}/api/show/addVisit?id=10&type=visit`).then(() => {
 
-  //       // @ts-ignore
 
-  //       localStorage.setItem('refreshTime', nowDate);
 
-  //     })
 
-  //   }
 
-  // } else {
 
-  //   axios.get(`${baseAPIUrl.value}/api/show/addVisit?id=10&type=visit`).then(() => {
 
-  //     // @ts-ignore
 
-  //     localStorage.setItem('refreshTime', Math.floor(Date.now() / 1000));
 
-  //   })
 
-
 
-  // }
 
+  window.addEventListener('orientationchange',
 
+    () => {
 
+      //@ts-ignore
 
+      clearTimeout(time.current);
 
+      //@ts-ignore
 
+      time.current = window.setTimeout(() => {
 
+        // 根元素
 
+        const dom: HTMLDivElement | null = document.querySelector("#app");
 
+        if (dom && document.documentElement.clientWidth < 480) {
 
+          dom.style.height = document.documentElement.clientHeight + "px";
 
+        }
 
+      }, 100);
 
+    }
 
+
 
+  );
 
+  isMobile.value = isMobileDevice()
 
+
 
+  // 浏览量统计
 
+  onVisit()
 
 })
 
 </script>
 
 
 <template>
 
   <router-view />
 
+  <div class="orientation-tip">
 
+    <div>
 
+      <img src="@/assets/images/landtip.png" alt="" />
 
+      <p>请打开屏幕自动旋转，进行横屏浏览</p>
 
+    </div>
 
+  </div>
 
+
 
 </template>
 
 
 <style scoped>
 
@@ -82,13 +111,51 @@ onMounted(() => {
 
 
 
 #app {
 
-  width: 100%;
 
-  height: 100%;
 
+  width: 100vw;
 
+  height: 100vh;
 
 }
 
 
+
 
 * {
 
   margin: 0;
 
   padding: 0;
 
   box-sizing: border-box;
 
 }
 
+
 
+.orientation-tip {
 
+  width: 100%;
 
+  height: 100%;
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  background: url(@/assets/images/orientation-tip-bg.png);
 
+  background-size: 100% 100%;
 
+  color: #E7C395;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+  align-items: center;
 
+  text-align: center;
 
+  z-index: 2;
 
+
 
+  img {
 
+    width: 50%;
 
+    margin-bottom: 10px;
 
+  }
 
+}
 
+
 
+@media screen and (orientation:portrait) {
 
+  .orientation-tip {
 
+    display: flex;
 
+  }
 
+
 
+}
 
+
 
+@media screen and (orientation: landscape) {
 
+
 
+  /* 在这里定义横屏模式下的CSS */
 
+  .orientation-tip {
 
+    display: none;
 
+  }
 
+}
 
 </style>

BIN
zdkkc/src/assets/images/bgMo.png
Visa fil


BIN
zdkkc/src/assets/images/close.png
Visa fil


BIN
zdkkc/src/assets/images/detail-box-bg.png
Visa fil


BIN
zdkkc/src/assets/images/down-icon.png
Visa fil


BIN
zdkkc/src/assets/images/enter-btn.png
Visa fil


BIN
zdkkc/src/assets/images/landtip.png
Visa fil


BIN
zdkkc/src/assets/images/menu-left-mo.png
Visa fil


BIN
zdkkc/src/assets/images/menu-right-bg.png
Visa fil


BIN
zdkkc/src/assets/images/menu-right-mo.png
Visa fil


BIN
zdkkc/src/assets/images/orientation-tip-bg.png
Visa fil


BIN
zdkkc/src/assets/images/redBg.png
Visa fil


+ 321 - 6
zdkkc/src/views/Detail/detailPage.vue
Visa fil 

@@ -23,12 +23,27 @@ const goScenefu = () => {
 
   })
 
 }
 
 
+const isDetailBoxOpen = ref(false)
 
+const openDetailBox = () => {
 
+  isDetailBoxOpen.value = true
 
+}
 
+
 
+const isMobile = ref(false)
 
+
 
+const isMobileDevice = () => {
 
+  const mobileRegex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
 
+  return mobileRegex.test(navigator.userAgent);
 
+}
 
+
 
 const onSelectfu = (item: any) => {
 
   mode.value = store.dataAll.modeList[1]
 
   curInfoPart.value = item
 
   item.name === '救生艇' ? goScenefu() : ''
 
 }
 
 
+// const time = ref();
 
+
 
+
 
 onMounted(() => {
 
   if (Object.keys(store.mode).length != 0) {
 
     mode.value = store.mode
 
@@ -36,6 +51,19 @@ onMounted(() => {
 
   if (Object.keys(store.currentInfoPart).length != 0) {
 
     curInfoPart.value = store.currentInfoPart
 
   }
 
+
 
+  isMobile.value = isMobileDevice()
 
+  // @ts-ignore
 
+  // time.current = window.setTimeout(() => {
 
+  //   // 根元素
 
+  //   const dom: HTMLDivElement | null = document.querySelector("#app");
 
+  //   if (dom && document.documentElement.clientWidth < 1000) {
 
+  //     dom.style.height = document.documentElement.clientHeight + "px";
 
+  //     dom.style.width = document.documentElement.clientWidth + "px";
 
+
 
+  //   }
 
+  // }, 100);
 
+
 
 })
 
 
 </script>
 
@@ -43,6 +71,7 @@ onMounted(() => {
 
 <template>
 
   <div class='detail'>
 
     <img class="logo-icon" src="@/assets/images/logoS.png" alt="">
 
+    <!-- pc端按钮 -->
 
     <div class="menu-box">
 
       <img src="@/assets/images/menu.png" alt="">
 
       <div class="title" v-for="item in store.dataAll.modeList" :key="item.name"
 
@@ -62,8 +91,34 @@ onMounted(() => {
 
         </div>
 
       </div>
 
     </div>
 
+    <!-- 移动端按钮 -->
 
+    <div class="menu-box-mo">
 
+      <div class="menu-left" @click="() => { mode = store.dataAll.modeList[0], curInfoPart = {} as any }">
 
+        <div class="title" :class="{ 'active': mode.name == 'stereoscopic' }">
 
+          立面体
 
+        </div>
 
+      </div>
 
+      <div class="menu-right">
 
+        <div class="title" :class="{ 'active': mode.name == 'plane' }"
 
+          @click="() => { mode = store.dataAll.modeList[1], curInfoPart = {} as any }">
 
+          平面图
 
+        </div>
 
+        <div class="menu-right-content" v-show="mode.name == 'plane'">
 
+          <div class="content-box">
 
+            <div class="content-item" v-for="(item, index) in mode.content" :key="index" @click="onSelectfu(item)">
 
+              <div class="number" :class="{ 'active': item.name == curInfoPart.name }">{{
 
+                item.number.replace(':',
 
+                  '') }}</div>
 
+              <div :class="{ 'active': item.name == curInfoPart.name }">{{ item.name }}</div>
 
+            </div>
 
+          </div>
 
+          <div class="bottom-icon">
 
+            <img src="@/assets/images/down-icon.png" alt="">
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
     <div class="main">
 
-
 
       <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"
 
@@ -89,22 +144,39 @@ onMounted(() => {
 
       <!-- 指引 -->
 
       <div class="guide" :style="{ top: curInfoPart.guideP.top, left: curInfoPart.guideP.left }"
 
         v-if="Object.keys(curInfoPart).length > 0 && curInfoPart.name != '救生艇'">
 
-        <img class="hot" :style="{ top: curInfoPart.hotP.top, left: curInfoPart.hotP.left }" @click="goScenefu()"
 
-          src="@/assets/images/hot.png" alt="">
 
+        <img class="hot"
 
+          :style="{ top: isMobile ? curInfoPart.hotP.topMo : curInfoPart.hotP.top, left: isMobile ? curInfoPart.hotP.leftMo : curInfoPart.hotP.left }"
 
+          @click="isMobile ? openDetailBox() : 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}/${mode.name}/line${curInfoPart.id}.png`" alt="">
 
       </div>
 
     </div>
 
+
 
+    <!-- 移动端介绍弹框 -->
 
+    <div class="detail-box" v-show="isDetailBoxOpen">
 
+      <img class="close-box" @click="isDetailBoxOpen = false" src="@/assets/images/close.png" alt="">
 
+      <div class="content-box">
 
+        <img @click="goScenefu()" :src="`${baseURl}/${mode.name}/pic${curInfoPart.id}.png`" alt="">
 
+        <div class="info-box">
 
+          <div class="title">{{ curInfoPart.number + curInfoPart.name }}</div>
 
+          <div class="disc">{{ curInfoPart.info }}</div>
 
+        </div>
 
+      </div>
 
+      <div class="enter-btn" @click="goScenefu()">
 
+        进入场景
 
+      </div>
 
+    </div>
 
   </div>
 
 </template>
 
 
 <style lang='less' scoped>
 
 .detail {
 
-  width: 100vw;
 
-  height: 100vh;
 
+  width: 100%;
 
+  height: 100%;
 
   background: url(@/assets/images/bg.png);
 
   background-size: 100% 100%;
 
+  overflow: hidden;
 
 
   .logo-icon {
 
     position: absolute;
 
@@ -113,6 +185,10 @@ onMounted(() => {
 
     width: 22vw;
 
   }
 
 
+  .menu-box-mo {
 
+    display: none;
 
+  }
 
+
 
   .menu-box {
 
     position: fixed;
 
     right: 2vw;
 
@@ -135,7 +211,7 @@ onMounted(() => {
 
     }
 
 
     .activeTitle {
 
-      color: #FFEFDA !important;
 
+      color: #FFEFDA;
 
       text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
 
 
       div {
 
@@ -334,4 +410,243 @@ onMounted(() => {
 
     }
 
   }
 
 }
 
+
 
+
 
+@media screen and (max-width: 1000px) {
 
+
 
+  ::-webkit-scrollbar {
 
+    width: 2px !important;
 
+    /* 定义滚动条的宽度 */
 
+  }
 
+
 
+  ::-webkit-scrollbar-thumb {
 
+    background: rgb(255, 255, 255);
 
+    /* 滑块的背景颜色 */
 
+    border-radius: 0px;
 
+    /* 滑块的圆角 */
 
+  }
 
+
 
+
 
+  .detail {
 
+    background: url(@/assets/images/bgMo.png);
 
+    background-size: 100% 100%;
 
+
 
+    .logo-icon {
 
+      left: 3%;
 
+      top: 6%;
 
+      width: 24vw;
 
+    }
 
+
 
+    .menu-box {
 
+      display: none;
 
+    }
 
+
 
+    .menu-box-mo {
 
+      display: block;
 
+
 
+      .title {
 
+        width: 100%;
 
+        text-align: center;
 
+        padding-left: 20%;
 
+        color: #351301;
 
+        font-family: 'REEJI-DuoguanGB-free-Flash';
 
+        font-size: 1.1em;
 
+        position: absolute;
 
+        white-space: nowrap;
 
+        // left: 50%;
 
+        // transform: translateX(120%);
 
+        top: 30px;
 
+        cursor: pointer;
 
+      }
 
+
 
+      .active {
 
+        color: #FFEFDA !important;
 
+        text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
 
+      }
 
+
 
+      .menu-left {
 
+        width: 125px;
 
+        height: 65px;
 
+        background: url(@/assets/images/menu-left-mo.png);
 
+        background-size: contain;
 
+        position: absolute;
 
+        top: 0;
 
+        right: 45vh;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+
 
+        @media screen and (max-height: 400px) {
 
+          width: 17vw;
 
+        }
 
+
 
+      }
 
+
 
+      .menu-right {
 
+        width: 125px;
 
+        height: 65px;
 
+        background: url(@/assets/images/menu-right-mo.png);
 
+        background-size: contain;
 
+        position: absolute;
 
+        top: 0;
 
+        right: 1vw;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+
 
+        .menu-right-content {
 
+          width: 90%;
 
+          max-height: 80vh;
 
+          // overflow: auto;
 
+          background: url(@/assets/images/menu-right-bg.png);
 
+          background-size: cover;
 
+          position: absolute;
 
+          top: 60px;
 
+          // left: px;
 
+          margin-left: 10px;
 
+          padding: 10px 5px 30px 10px;
 
+          box-sizing: border-box;
 
+
 
+          .content-box {
 
+            max-height: calc(80vh - 40px);
 
+            overflow: auto;
 
+
 
+            div {
 
+              text-align: center;
 
+              font-size: 0.9em;
 
+              color: #CECECE;
 
+            }
 
+
 
+            .content-item {
 
+              margin-bottom: 10px;
 
+
 
+              .active {
 
+                color: #FFFFFF !important;
 
+                // text-shadow: none;
 
+              }
 
+
 
+              .number {
 
+                font-size: 0.8em;
 
+              }
 
+            }
 
+
 
+            .active {
 
+              color: #FFFFFF;
 
+            }
 
+
 
+
 
+          }
 
+
 
+          .bottom-icon {
 
+            width: 100%;
 
+            height: 20px;
 
+            display: flex;
 
+            justify-content: center;
 
+            align-items: center;
 
+            margin-top: 8px;
 
+
 
+            img {
 
+              width: 18px;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+
 
+    .main {
 
+      .img3d {
 
+        width: 70%;
 
+        margin-left: -15%;
 
+      }
 
+
 
+      .main-box {
 
+        top: 25px;
 
+        .info-box {
 
+          display: none;
 
+        }
 
+      }
 
+
 
+      .guide {
 
+        .line {
 
+          display: none;
 
+        }
 
+
 
+        .hot {
 
+          width: 80px;
 
+        }
 
+      }
 
+    }
 
+
 
+    .detail-box {
 
+      width: 100%;
 
+      height: 100%;
 
+      position: fixed;
 
+      top: 0;
 
+      left: 0;
 
+      display: flex;
 
+      flex-direction: column;
 
+      align-items: center;
 
+      justify-content: center;
 
+      background: url(@/assets/images/detail-box-bg.png);
 
+      background-size: cover;
 
+      z-index: 2;
 
+
 
+      .close-box {
 
+        position: absolute;
 
+        top: 30px;
 
+        right: 30px;
 
+        width: 35px;
 
+        height: 35px;
 
+      }
 
+
 
+      .content-box {
 
+        display: flex;
 
+        width: 80%;
 
+        height: 70%;
 
+        justify-content: center;
 
+        align-items: center;
 
+
 
+        img {
 
+          width: 45%;
 
+          height: 100%;
 
+          object-fit: contain;
 
+        }
 
+
 
+        .info-box {
 
+          margin-left: 20px;
 
+
 
+          .title {
 
+            color: #E8B478;
 
+            font-size: 1.2em;
 
+            font-weight: bold;
 
+            letter-spacing: 2px;
 
+          }
 
+
 
+          .disc {
 
+            color: #FFFFFF;
 
+            font-size: 1em;
 
+            margin-top: 10px
 
+          }
 
+        }
 
+
 
+      }
 
+
 
+      .enter-btn {
 
+        // margin-top: 20px;
 
+        width: 20vw;
 
+        height: 40px;
 
+        background: url(@/assets/images/enter-btn.png);
 
+        background-size: 100% 100%;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+        color: #FFFFFF;
 
+        letter-spacing: 2px;
 
+        font-size: 1.1em;
 
+      }
 
+    }
 
+
 
+  }
 
+
 
+}
 
 </style>

+ 37 - 3
zdkkc/src/views/Home/homePage.vue
Visa fil 

@@ -6,14 +6,15 @@ const router = useRouter();
 
   <div class='home'>
 
     <img class="logo-icon" src="@/assets/images/logo.png" alt="">
 
     <img class="logo-boat" src="@/assets/images/welcomeboat.png" alt="">
 
-    <img class="logo-welcome" @click="() => {router.push('/detail')}" src="@/assets/images/welcomeBtn.png" alt="">
 
+    <img class="logo-welcome" @click="() => { router.replace('/detail') }" src="@/assets/images/welcomeBtn.png" alt="">
 
   </div>
 
+
 
 </template>
 
 
 <style lang='less' scoped>
 
 .home {
 
-  width: 100vw;
 
-  height: 100vh;
 
+  width: 100%;
 
+  height: 100%;
 
   background: url(@/assets/images/bg.png);
 
   background-size: 100% 100%;
 
 
@@ -31,6 +32,7 @@ const router = useRouter();
 
     right: 8%;
 
     top: 4%;
 
   }
 
+
 
   .logo-welcome {
 
     position: absolute;
 
     left: 50%;
 
@@ -40,4 +42,36 @@ const router = useRouter();
 
     width: 13%;
 
   }
 
 }
 
+
 
+@media screen and (max-width: 1000px) {
 
+  .home {
 
+    background: url(@/assets/images/bgMo.png);
 
+    background-size: 100% 100%;
 
+
 
+    .logo-icon {
 
+      width: 34vw;
 
+      position: absolute;
 
+      right: 4vw;
 
+      top: 24vh;
 
+    }
 
+
 
+    .logo-boat {
 
+      width: 63vw;
 
+      /* height: 90%; */
 
+      position: absolute;
 
+      right: 0;
 
+      left: 0%;
 
+      top: 3vh;
 
+    }
 
+
 
+    .logo-welcome {
 
+      right: 8vw;
 
+      left: auto;
 
+      bottom: 5vh;
 
+      transform: translateX(0);
 
+      cursor: pointer;
 
+      width: 26vw;
 
+    }
 
+  }
 
+}
 
 </style>

+ 19 - 7
zdkkc/src/views/Scene/scenePage.vue
Visa fil 

@@ -16,20 +16,33 @@ declare global {
 
 }
 
 
 const curCode = ref(route.query.code)
 
+const time = ref();
 
 
-onMounted(() => {
 
 
+onMounted(() => {
 
   window.toHome = () => {
 
-    router.back()
 
+    router.replace({
 
+      path: '/detail'
 
+    })
 
   }
 
   window.transformScene = (code: string) => {
 
-    store.lastCode = curCode.value
 
     curCode.value = code
 
-    console.log('需要跳转', code)
 
+    store.lastCode = curCode.value
 
   }
 
   window.backFu = () => {
 
     curCode.value = store.lastCode != '' ? store.lastCode : window.history.back();
 
   }
 
+
 
+  // 重新获取高度
 
+  // @ts-ignore
 
+  time.current = window.setTimeout(() => {
 
+    // 根元素
 
+    const dom: HTMLDivElement | null = document.querySelector("#app");
 
+    if (dom && document.documentElement.clientWidth < 1000) {
 
+      dom.style.height = document.documentElement.clientHeight + "px";
 
+      dom.style.width = document.documentElement.clientWidth + "px";
 
+    }
 
+  }, 100);
 
 })
 
 </script>
 
 
@@ -42,14 +55,13 @@ onMounted(() => {
 
 
 <style lang='less' scoped>
 
 .scene-box {
 
-  width: 100vw;
 
-  height: 100vh;
 
+  width: 100%;
 
+  height: 100%;
 
   overflow: hidden;
 
 
   iframe {
 
     width: 100%;
 
     height: 100%;
 
-
 
   }
 
 }
 
 </style>

+ 9 - 9
zdkkc/yarn.lock
Visa fil 

@@ -589,12 +589,12 @@
 
   "resolved" "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz"
 
   "version" "0.4.0"
 
 
-"axios@^1.6.2":
 
-  "integrity" "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A=="
 
-  "resolved" "https://registry.npmmirror.com/axios/-/axios-1.6.2.tgz"
 
-  "version" "1.6.2"
 
+"axios@^1.6.8":
 
+  "integrity" "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ=="
 
+  "resolved" "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz"
 
+  "version" "1.6.8"
 
   dependencies:
 
-    "follow-redirects" "^1.15.0"
 
+    "follow-redirects" "^1.15.6"
 
     "form-data" "^4.0.0"
 
     "proxy-from-env" "^1.1.0"
 
 
@@ -1142,10 +1142,10 @@
 
   "resolved" "https://registry.npmmirror.com/flatted/-/flatted-3.2.9.tgz"
 
   "version" "3.2.9"
 
 
-"follow-redirects@^1.15.0":
 
-  "integrity" "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q=="
 
-  "resolved" "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz"
 
-  "version" "1.15.3"
 
+"follow-redirects@^1.15.6":
 
+  "integrity" "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA=="
 
+  "resolved" "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz"
 
+  "version" "1.15.6"
 
 
 "form-data@^4.0.0":
 
   "integrity" "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww=="

+ 10 - 10
zdkkc2/public/staticData/data.js
Visa fil 

@@ -27,7 +27,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '1.png',
 
           sceneCode: 'KJ-SjCkVMr1qvf',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '主桅顶部布置了船舶航行雷达、天气雷达和自动气象站，用于周围船舶扫描和气象要素观测。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
@@ -49,7 +49,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '2.png',
 
           sceneCode: 'KJ-KHsnJLZm3cn',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层包含观察室和多种天线集群，保障船舶在海上的通讯和安全航行。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
@@ -71,7 +71,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '3.png',
 
           sceneCode: 'KJ-DTMF9dkffbn',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层是船舶驾驶台，用于船舶航行操控。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
@@ -93,7 +93,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '4.png',
 
           sceneCode: 'KJ-4fYUsjIDNBL',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层包含直升机平台和无人机库等，用于直升机应急救援、科考无人机的存放和起落。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
@@ -115,7 +115,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '5.png',
 
           sceneCode: 'KJ-3902aPaHp8O',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层主要是船员住舱区域，同时配套了小型会议室；艏楼甲板主要用于伙食等生活物资吊运，其前部的科学桅上布置了部分气象观测设备。',
 
           guideP: {
 
             top: '23%',
 
             left: '36%'
 
@@ -137,7 +137,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '6.png',
 
           sceneCode: 'KJ-wZetq7LLSnK',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层主要是科考人员的住舱区域，同时配套了图书阅览室；登艇甲板主要用于紧急逃生集合及救生艇、工作艇布放。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
@@ -159,7 +159,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '7.png',
 
           sceneCode: 'KJ-5NGVgP2oO5G',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层是参航队员饮食休闲的生活区域，包含厨房餐厅、影音娱乐、健身区、多功能厅、科教展示区以及登船大堂等。',
 
           guideP: {
 
             top: '20%',
 
             height: '20vh',
 
@@ -182,7 +182,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '8.png',
 
           sceneCode: 'KJ-1G9iEXB7ohx',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层是科考作业和室内实验的主要工作区域，包含CTD采水间、通用湿实验室、通用干实验室、仪器运维室等多个实验室及610㎡的大型甲板作业区；同时也是全船科考设备集中操控和显示的区域。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
@@ -204,7 +204,7 @@ const dataAll = {
 
           mainBody: 'detail.png',
 
           heilight: '9.png',
 
           sceneCode: 'KJ-4XeLjELZjSh_02',
 
-          info: '这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍这是一段介绍一段介绍',
 
+          info: '本层包含多个科考人员的住舱、科考操控支撑设备，同时也是船舶动力系统的集中控制区。',
 
           guideP: {
 
             top: '20%',
 
             left: '40%'
 
@@ -223,7 +223,7 @@ const dataAll = {
 
           id: 10,
 
           name: '救生艇',
 
           number: '-:',
 
-          sceneCode: 'TEST',
 
+          sceneCode: 'KJ-VfABdXXAzvy',
 
           mainBody: 'detail.png',
 
         },
 
       ]

BIN
zdkkc2/public/staticData/plane/pic1.png
Visa fil


BIN
zdkkc2/public/staticData/plane/pic2.png
Visa fil


BIN
zdkkc2/public/staticData/plane/pic3.png
Visa fil


BIN
zdkkc2/public/staticData/plane/pic4.png
Visa fil


BIN
zdkkc2/public/staticData/plane/pic5.png
Visa fil


BIN
zdkkc2/public/staticData/plane/pic6.png
Visa fil


BIN
zdkkc2/public/staticData/plane/pic7.png
Visa fil


BIN
zdkkc2/public/staticData/plane/pic8.png
Visa fil


BIN
zdkkc2/public/staticData/plane/pic9.png
Visa fil


+ 5 - 2
zdkkc2/src/views/Detail/detailPage.vue
Visa fil 

@@ -29,6 +29,9 @@ onMounted(() => {
 
   if (Object.keys(store.currentInfoPart).length != 0) {
 
     curInfoPart.value = store.currentInfoPart
 
   }
 
+  curMoudle.value = 'construction'
 
+  curMode.value = store.dataAll.modeList[0]
 
+
 
 })
 
 
 </script>
 
@@ -37,7 +40,7 @@ onMounted(() => {
 
   <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="logo-welcome" v-if="false">
 
       <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="">
 
@@ -369,7 +372,7 @@ onMounted(() => {
 
 
         img {
 
           width: 40%;
 
-          object-fit: contain;
 
+          object-fit: cover;
 
           margin-left: 10px;
 
           cursor: pointer;
 
         }

+ 4 - 2
zdkkc2/src/views/Scene/scenePage.vue
Visa fil 

@@ -12,14 +12,16 @@ declare global {
 
 
 onMounted(() => {
 
   window.toHome = () => {
 
-    router.back()
 
+    router.replace({
 
+      path: '/detail'
 
+    })
 
   }
 
 })
 
 </script>
 
 
 <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 : 'KJ-VfABdXXAzvy'}`"></iframe>
 
   </div>
 
 </template>