Головна сторінка Огляд Довідка
Реєстрація Увійти
chenzimin2
/
ZDKKC
1
0
Відгалуження 0
Файли Проблеми 0 Запити на злиття 0 Wiki
Переглянути джерело

feat:复古版横屏样式适配

aamin 1 рік тому
батько
87fa81fe44
коміт
63aca5b17b
52 змінених файлів з 639 додано та 115 видалено
Розділений вигляд Показати статистику Diff
  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
Переглянути файл 

@@ -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
Переглянути файл 

@@ -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
Переглянути файл 

@@ -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
Переглянути файл 

@@ -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
Переглянути файл 

@@ -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
Переглянути файл 

@@ -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
Переглянути файл 

@@ -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
Переглянути файл 

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

Різницю між файлами не показано, бо вона завелика
+ 1 - 1
zdkkc/public/scenePage/css/app.5848d421.css


Різницю між файлами не показано, бо вона завелика
+ 1 - 1
zdkkc/public/scenePage/index.html


Різницю між файлами не показано, бо вона завелика
+ 1 - 0
zdkkc/public/scenePage/js/app.cc2c6d5c.js


Різницю між файлами не показано, бо вона завелика
+ 0 - 1
zdkkc/public/scenePage/js/app.ee4d026b.js


+ 23 - 1
zdkkc/public/scenePage/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 {
 
@@ -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
Переглянути файл 

@@ -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
Переглянути файл 

@@ -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
Переглянути файл


BIN
zdkkc/public/staticData/plane/pic2.png
Переглянути файл


BIN
zdkkc/public/staticData/plane/pic3.png
Переглянути файл


BIN
zdkkc/public/staticData/plane/pic4.png
Переглянути файл


BIN
zdkkc/public/staticData/plane/pic5.png
Переглянути файл


BIN
zdkkc/public/staticData/plane/pic6.png
Переглянути файл


BIN
zdkkc/public/staticData/plane/pic7.png
Переглянути файл


BIN
zdkkc/public/staticData/plane/pic8.png
Переглянути файл


BIN
zdkkc/public/staticData/plane/pic9.png
Переглянути файл


+ 95 - 28
zdkkc/src/App.vue
Переглянути файл 

@@ -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
Переглянути файл


BIN
zdkkc/src/assets/images/close.png
Переглянути файл


BIN
zdkkc/src/assets/images/detail-box-bg.png
Переглянути файл


BIN
zdkkc/src/assets/images/down-icon.png
Переглянути файл


BIN
zdkkc/src/assets/images/enter-btn.png
Переглянути файл


BIN
zdkkc/src/assets/images/landtip.png
Переглянути файл


BIN
zdkkc/src/assets/images/menu-left-mo.png
Переглянути файл


BIN
zdkkc/src/assets/images/menu-right-bg.png
Переглянути файл


BIN
zdkkc/src/assets/images/menu-right-mo.png
Переглянути файл


BIN
zdkkc/src/assets/images/orientation-tip-bg.png
Переглянути файл


BIN
zdkkc/src/assets/images/redBg.png
Переглянути файл


+ 321 - 6
zdkkc/src/views/Detail/detailPage.vue
Переглянути файл 

@@ -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
Переглянути файл 

@@ -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
Переглянути файл 

@@ -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
Переглянути файл 

@@ -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
Переглянути файл 

@@ -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
Переглянути файл


BIN
zdkkc2/public/staticData/plane/pic2.png
Переглянути файл


BIN
zdkkc2/public/staticData/plane/pic3.png
Переглянути файл


BIN
zdkkc2/public/staticData/plane/pic4.png
Переглянути файл


BIN
zdkkc2/public/staticData/plane/pic5.png
Переглянути файл


BIN
zdkkc2/public/staticData/plane/pic6.png
Переглянути файл


BIN
zdkkc2/public/staticData/plane/pic7.png
Переглянути файл


BIN
zdkkc2/public/staticData/plane/pic8.png
Переглянути файл


BIN
zdkkc2/public/staticData/plane/pic9.png
Переглянути файл


+ 5 - 2
zdkkc2/src/views/Detail/detailPage.vue
Переглянути файл 

@@ -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
Переглянути файл 

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