feat: --

.vscode/settings.json

@@ -1,4 +1,5 @@
-{
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
-}
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "typescript.tsdk": "node_modules\\typescript\\lib"
+}

package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@ahooksjs/use-url-state": "^3.5.1",
     "@better-scroll/core": "^2.5.1",
-    "@dage/krpano": "^2.2.2",
+    "@dage/krpano": "^2.3.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

pnpm-lock.yaml

@@ -12,8 +12,8 @@ dependencies:
     specifier: ^2.5.1
     version: 2.5.1
   '@dage/krpano':
-    specifier: ^2.2.2
-    version: 2.2.2(react-dom@18.3.1)(react@18.3.1)
+    specifier: ^2.3.0
+    version: 2.3.0(react-dom@18.3.1)(react@18.3.1)
   '@testing-library/jest-dom':
     specifier: ^5.17.0
     version: 5.17.0
@@ -22,7 +22,7 @@ dependencies:
     version: 13.4.0(react-dom@18.3.1)(react@18.3.1)
   '@testing-library/user-event':
     specifier: ^13.5.0
-    version: 13.5.0(@testing-library/dom@10.1.0)
+    version: 13.5.0(@testing-library/dom@10.2.0)
   '@types/jest':
     specifier: ^27.5.2
     version: 27.5.2
@@ -1983,8 +1983,8 @@ packages:
       postcss-selector-parser: 6.1.0
     dev: false
 
-  /@dage/krpano@2.2.2(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-TO+cYOirCgGt/5VQLozWbMkxltrWJs9BWMn11TyQnbM8qXUObgrVfRDQeEQNXAdubtpTEpotSOG6NZiDWeCx1Q==}
+  /@dage/krpano@2.3.0(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-MAscTzMoYrHSs2jCDiR9iqWOUPBFExaNqTLXcJxvp3yhHh8tL/RRheStTU0gTSqPxGoEJ7yFA6PEW7Xzj4GR9A==}
     peerDependencies:
       react: '>=18'
       react-dom: '>=18'
@@ -2034,6 +2034,7 @@ packages:
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
+    deprecated: Use @eslint/config-array instead
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
       debug: 4.3.5
@@ -2049,6 +2050,7 @@ packages:
 
   /@humanwhocodes/object-schema@2.0.3:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
+    deprecated: Use @eslint/object-schema instead
     dev: false
 
   /@isaacs/cliui@8.0.2:
@@ -2621,8 +2623,8 @@ packages:
       - supports-color
     dev: false
 
-  /@testing-library/dom@10.1.0:
-    resolution: {integrity: sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==}
+  /@testing-library/dom@10.2.0:
+    resolution: {integrity: sha512-CytIvb6tVOADRngTHGWNxH8LPgO/3hi/BdCEHOf7Qd2GvZVClhVP0Wo/QHzWhpki49Bk0b4VT6xpt3fx8HTSIw==}
     engines: {node: '>=18'}
     dependencies:
       '@babel/code-frame': 7.24.7
@@ -2678,14 +2680,14 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@testing-library/user-event@13.5.0(@testing-library/dom@10.1.0):
+  /@testing-library/user-event@13.5.0(@testing-library/dom@10.2.0):
     resolution: {integrity: sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==}
     engines: {node: '>=10', npm: '>=6'}
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
     dependencies:
       '@babel/runtime': 7.24.6
-      '@testing-library/dom': 10.1.0
+      '@testing-library/dom': 10.2.0
     dev: false
 
   /@tootallnate/once@1.1.2:
@@ -3265,12 +3267,12 @@ packages:
       acorn: 8.11.3
     dev: false
 
-  /acorn-jsx@5.3.2(acorn@8.11.3):
+  /acorn-jsx@5.3.2(acorn@8.12.0):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      acorn: 8.11.3
+      acorn: 8.12.0
     dev: false
 
   /acorn-walk@7.2.0:
@@ -3290,6 +3292,12 @@ packages:
     hasBin: true
     dev: false
 
+  /acorn@8.12.0:
+    resolution: {integrity: sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: false
+
   /address@1.2.2:
     resolution: {integrity: sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==}
     engines: {node: '>= 10.0.0'}
@@ -3912,8 +3920,8 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001632
-      electron-to-chromium: 1.4.798
+      caniuse-lite: 1.0.30001638
+      electron-to-chromium: 1.4.814
       node-releases: 2.0.14
       update-browserslist-db: 1.0.16(browserslist@4.23.1)
     dev: false
@@ -3994,8 +4002,8 @@ packages:
     resolution: {integrity: sha512-4zgNiB8nTyV/tHhwZrFs88ryjls/lHiqFhrxCW4qSTeuRByBVnPYpDInchOIySWknznucaf31Z4KYqjfbrecVw==}
     dev: false
 
-  /caniuse-lite@1.0.30001632:
-    resolution: {integrity: sha512-udx3o7yHJfUxMLkGohMlVHCvFvWmirKh9JAH/d7WOLPetlH+LTL5cocMZ0t7oZx/mdlOWXti97xLZWc8uURRHg==}
+  /caniuse-lite@1.0.30001638:
+    resolution: {integrity: sha512-5SuJUJ7cZnhPpeLHaH0c/HPAnAHZvS6ElWyHK9GSIbVOQABLzowiI2pjmpvZ1WEbkyz46iFd4UXlOHR5SqgfMQ==}
     dev: false
 
   /case-sensitive-paths-webpack-plugin@2.4.0:
@@ -4874,8 +4882,8 @@ packages:
     resolution: {integrity: sha512-0VbyiaXoT++Fi2vHGo2ThOeS6X3vgRCWrjPeO2FeIAWL6ItiSJ9BqlH8LfCXe3X1IdcG+S0iLoNaxQWhfZoGzQ==}
     dev: false
 
-  /electron-to-chromium@1.4.798:
-    resolution: {integrity: sha512-by9J2CiM9KPGj9qfp5U4FcPSbXJG7FNzqnYaY4WLzX+v2PHieVGmnsA4dxfpGE3QEC7JofpPZmn7Vn1B9NR2+Q==}
+  /electron-to-chromium@1.4.814:
+    resolution: {integrity: sha512-GVulpHjFu1Y9ZvikvbArHmAhZXtm3wHlpjTMcXNGKl4IQ4jMQjlnz8yMQYYqdLHKi/jEL2+CBC2akWVCoIGUdw==}
     dev: false
 
   /emittery@0.10.2:
@@ -5429,8 +5437,8 @@ packages:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.11.3
-      acorn-jsx: 5.3.2(acorn@8.11.3)
+      acorn: 8.12.0
+      acorn-jsx: 5.3.2(acorn@8.12.0)
       eslint-visitor-keys: 3.4.3
     dev: false
 

src/App.scss

@@ -1,229 +1,326 @@
-.container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.hotspot-item {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 111.5px;
-  height: 567px;
-  background: url("./assets/images/hotspot.png") no-repeat center / contain;
-
-  p {
-    padding-top: 12px;
-    text-align: center;
-    height: 270px;
-    color: #213572;
-    font-weight: bold;
-    font-size: 18px;
-    letter-spacing: 5px;
-    overflow: hidden;
-    white-space: nowrap;
-    writing-mode: vertical-lr;
-    text-orientation: upright;
-
-    span {
-      text-orientation: initial;
-    }
-  }
-}
-
-.show-toolbar {
-  position: fixed;
-  left: 50%;
-  bottom: -50px;
-  width: 118px;
-  height: 50px;
-  background: url("./assets/images/show-toolbar.png") no-repeat center / contain;
-  transform: translateX(-50%);
-  transition: bottom linear 0.2s;
-  cursor: pointer;
-  z-index: 998;
-
-  &.active {
-    bottom: -9px;
-  }
-}
-
-.toolbar {
-  position: relative;
-  position: fixed;
-  left: 50%;
-  bottom: -130px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 30px;
-  max-width: 1046px;
-  width: 100%;
-  min-height: 43px;
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(36, 52, 114, 0.5) 28%,
-    rgba(36, 52, 114, 0.5),
-    rgba(255, 255, 255, 0) 100%
-  );
-  transform: translateX(-50%);
-  transition: bottom linear 0.2s;
-  user-select: none;
-  z-index: 998;
-
-  &.active {
-    bottom: 23px;
-  }
-  &__btn {
-    cursor: pointer;
-  }
-  &__main,
-  &__group,
-  &__right {
-    display: flex;
-    align-items: center;
-  }
-  &__main {
-    gap: 10px;
-  }
-  &__group {
-    position: relative;
-    width: 92px;
-    height: 30px;
-    overflow: hidden;
-    border-radius: 7px;
-    border: 1px solid rgba(255, 255, 255, 0.5);
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.6);
-
-    .toolbar__btn {
-      position: absolute;
-      top: 1px;
-      width: 51px;
-      height: 34px;
-
-      &.left {
-        left: -3px;
-        background: url("./assets/images/left.png") no-repeat center / contain;
-
-        &:hover {
-          background-image: url("./assets/images/left-act.png");
-        }
-      }
-      &.right {
-        right: -3px;
-        background: url("./assets/images/right.png") no-repeat center / contain;
-
-        &:hover {
-          background-image: url("./assets/images/right-act.png");
-        }
-      }
-      &.top {
-        left: -3px;
-        background: url("./assets/images/top.png") no-repeat center / contain;
-
-        &:hover {
-          background-image: url("./assets/images/top-act.png");
-        }
-      }
-      &.bottom {
-        right: -3px;
-        background: url("./assets/images/bottom.png") no-repeat center / contain;
-
-        &:hover {
-          background-image: url("./assets/images/bottom-act.png");
-        }
-      }
-      &.plus {
-        left: -3px;
-        background: url("./assets/images/plus.png") no-repeat center / contain;
-
-        &:hover {
-          background-image: url("./assets/images/plus-act.png");
-        }
-      }
-      &.minus {
-        right: -3px;
-        background: url("./assets/images/minus.png") no-repeat center / contain;
-
-        &:hover {
-          background-image: url("./assets/images/minus-act.png");
-        }
-      }
-    }
-  }
-  .menu,
-  .fullscreen,
-  .hide {
-    position: relative;
-    top: 3px;
-    width: 40px;
-    height: 40px;
-  }
-  .menu {
-    background: url("./assets/images/menu.png") no-repeat center / contain;
-
-    &:hover {
-      background-image: url("./assets/images/menu-act.png");
-    }
-  }
-  .fullscreen {
-    background: url("./assets/images/fullscreen.png") no-repeat center / contain;
-
-    &.exit {
-      background-image: url("./assets/images/exit-fullscreen.png");
-    }
-  }
-  .hide {
-    background: url("./assets/images/hide-toolbar.png") no-repeat center /
-      contain;
-  }
-}
-
-.toolbar2 {
-  position: fixed;
-  right: 50px;
-  bottom: 22px;
-  display: flex;
-  gap: 10px;
-  z-index: 998;
-
-  > div {
-    cursor: pointer;
-    flex-shrink: 0;
-    width: 40px;
-    height: 40px;
-  }
-  .home {
-    background: url("./assets/images/home.png") no-repeat center / contain;
-  }
-  .music {
-    background: url("./assets/images/music.png") no-repeat center / contain;
-  }
-}
-
-.back {
-  position: fixed;
-  top: 20px;
-  left: 30px;
-  width: 40px;
-  height: 40px;
-  cursor: pointer;
-  background: url("./assets/images/back.png") no-repeat center / contain;
-  z-index: 998;
-}
-
-@media all and (orientation: portrait) {
-  .toolbar {
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .back {
-    left: 20px;
-  }
-}
+.container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.hotspot-item {
+  position: relative;
+  padding: 11px 0 0 35px;
+  width: 206.5px;
+  height: 91px;
+  background: url("./assets/images/biaoqian2@2x-min.png") no-repeat center /
+    contain;
+
+  p {
+    color: #ead2a8;
+    font-size: 14px;
+    text-align: center;
+    font-weight: bold;
+  }
+  &.small {
+    width: 148px;
+    background-image: url("./assets/images/biaoqian1@2x-min.png");
+  }
+  &.large {
+    width: 254px;
+    background-image: url("./assets/images/biaoqian3@2x-min.png");
+  }
+  &.primary {
+    background-image: url("./assets/images/biaoqian2-1@2x-min.png");
+
+    p {
+      color: #243472;
+    }
+    &.small {
+      background-image: url("./assets/images/biaoqian1-1@2x-min.png");
+    }
+    &.large {
+      background-image: url("./assets/images/biaoqian3-1@2x-min.png");
+    }
+
+    &.active {
+      background-image: url("./assets/images/biaoqian5-a@2x-min.png");
+
+      &.small {
+        background-image: url("./assets/images/biaoqian4-a@2x-min.png");
+      }
+      &.large {
+        background-image: url("./assets/images/biaoqian6-a@2x-min.png");
+      }
+    }
+  }
+  &.active {
+    background-image: url("./assets/images/biaoqian2-a@2x-min.png");
+
+    &.small {
+      background-image: url("./assets/images/biaoqian1-a@2x-min.png");
+    }
+    &.large {
+      background-image: url("./assets/images/biaoqian3-a@2x-min.png");
+    }
+  }
+}
+
+.hotspot-content {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  z-index: 999;
+
+  &-inner {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 15px 35px 45px;
+    width: 370px;
+    height: 390px;
+    color: #243472;
+    white-space: wrap;
+    box-sizing: border-box;
+    background: url("./assets/images/hot-bg@2x-min.png") no-repeat center /
+      contain;
+
+    &.small {
+      height: 303px;
+      background-image: url("./assets/images/hot-bg2@2x-min.png");
+    }
+    &__c {
+      flex: 1;
+      height: 0;
+      font-size: 14px;
+      line-height: 28px;
+      overflow-y: auto;
+    }
+  }
+  h3 {
+    padding: 10px 0 15px;
+    font-size: 16px;
+    text-align: center;
+    font-weight: bold;
+  }
+  &__btn {
+    margin: 10px auto 0;
+    width: 180px;
+    height: 36px;
+    line-height: 36px;
+    border: 0;
+    color: #ead2a8;
+    font-size: 16px;
+    font-weight: bold;
+    border-radius: 5px;
+    background: linear-gradient(#243472, #364c91);
+    cursor: pointer;
+  }
+  &__close {
+    position: absolute;
+    top: 28px;
+    right: 26px;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    z-index: 999;
+  }
+}
+
+.show-toolbar {
+  position: fixed;
+  left: 50%;
+  bottom: -50px;
+  width: 118px;
+  height: 50px;
+  background: url("./assets/images/show-toolbar.png") no-repeat center / contain;
+  transform: translateX(-50%);
+  transition: bottom linear 0.2s;
+  cursor: pointer;
+  z-index: 998;
+
+  &.active {
+    bottom: -9px;
+  }
+}
+
+.toolbar {
+  position: relative;
+  position: fixed;
+  left: 50%;
+  bottom: -130px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 30px;
+  max-width: 1046px;
+  width: 100%;
+  min-height: 43px;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(36, 52, 114, 0.5) 28%,
+    rgba(36, 52, 114, 0.5),
+    rgba(255, 255, 255, 0) 100%
+  );
+  transform: translateX(-50%);
+  transition: bottom linear 0.2s;
+  user-select: none;
+  z-index: 998;
+
+  &.active {
+    bottom: 23px;
+  }
+  &__btn {
+    cursor: pointer;
+  }
+  &__main,
+  &__group,
+  &__right {
+    display: flex;
+    align-items: center;
+  }
+  &__main {
+    gap: 10px;
+  }
+  &__group {
+    position: relative;
+    width: 92px;
+    height: 30px;
+    overflow: hidden;
+    border-radius: 7px;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.6);
+
+    .toolbar__btn {
+      position: absolute;
+      top: 1px;
+      width: 51px;
+      height: 34px;
+
+      &.left {
+        left: -3px;
+        background: url("./assets/images/left.png") no-repeat center / contain;
+
+        &:hover {
+          background-image: url("./assets/images/left-act.png");
+        }
+      }
+      &.right {
+        right: -3px;
+        background: url("./assets/images/right.png") no-repeat center / contain;
+
+        &:hover {
+          background-image: url("./assets/images/right-act.png");
+        }
+      }
+      &.top {
+        left: -3px;
+        background: url("./assets/images/top.png") no-repeat center / contain;
+
+        &:hover {
+          background-image: url("./assets/images/top-act.png");
+        }
+      }
+      &.bottom {
+        right: -3px;
+        background: url("./assets/images/bottom.png") no-repeat center / contain;
+
+        &:hover {
+          background-image: url("./assets/images/bottom-act.png");
+        }
+      }
+      &.plus {
+        left: -3px;
+        background: url("./assets/images/plus.png") no-repeat center / contain;
+
+        &:hover {
+          background-image: url("./assets/images/plus-act.png");
+        }
+      }
+      &.minus {
+        right: -3px;
+        background: url("./assets/images/minus.png") no-repeat center / contain;
+
+        &:hover {
+          background-image: url("./assets/images/minus-act.png");
+        }
+      }
+    }
+  }
+  .menu,
+  .fullscreen,
+  .hide {
+    position: relative;
+    top: 3px;
+    width: 40px;
+    height: 40px;
+  }
+  .menu {
+    background: url("./assets/images/menu.png") no-repeat center / contain;
+
+    &:hover {
+      background-image: url("./assets/images/menu-act.png");
+    }
+  }
+  .fullscreen {
+    background: url("./assets/images/fullscreen.png") no-repeat center / contain;
+
+    &.exit {
+      background-image: url("./assets/images/exit-fullscreen.png");
+    }
+  }
+  .hide {
+    background: url("./assets/images/hide-toolbar.png") no-repeat center /
+      contain;
+  }
+}
+
+.toolbar2 {
+  position: fixed;
+  right: 50px;
+  bottom: 22px;
+  display: flex;
+  gap: 10px;
+  z-index: 998;
+
+  > div {
+    cursor: pointer;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+  }
+  .home {
+    background: url("./assets/images/home.png") no-repeat center / contain;
+  }
+  .music {
+    background: url("./assets/images/music.png") no-repeat center / contain;
+  }
+}
+
+.back {
+  position: fixed;
+  top: 20px;
+  left: 30px;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  background: url("./assets/images/back.png") no-repeat center / contain;
+  z-index: 998;
+}
+
+@media all and (orientation: portrait) {
+  .toolbar {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .back {
+    left: 20px;
+  }
+}

src/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import HomePage from "./pages/home";
 import { createHashRouter, RouterProvider } from "react-router-dom";
 // import reportWebVitals from './reportWebVitals';
 import "./index.css";
@@ -8,6 +9,10 @@ import "./index.css";
 const router = createHashRouter([
   {
     path: "/",
+    element: <HomePage />,
+  },
+  {
+    path: "/scene",
     element: <App />,
   },
 ]);

src/pages/home/index.scss

@@ -0,0 +1,24 @@
+.home {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  background: url("./images/map-min.jpg") no-repeat top left / 1920px 1080px;
+
+  &__hover {
+    position: absolute;
+    top: 268px;
+    left: 374px;
+    width: 586px;
+    height: 466px;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity linear 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}

src/pages/home/index.tsx

@@ -0,0 +1,22 @@
+import { FC } from "react";
+import { useNavigate } from "react-router";
+import HoverImg from "./images/map-hover-min.png";
+import "./index.scss";
+
+const HomePage: FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="home">
+      <img
+        draggable={false}
+        className="home__hover"
+        src={HoverImg}
+        alt=""
+        onClick={() => navigate("/scene")}
+      />
+    </div>
+  );
+};
+
+export default HomePage;