Merge branch 'master' of http://192.168.0.115:3000/shaogen1995/kaiPingWeb into master

code/src/assets/styles/base.css

@@ -63,6 +63,7 @@ textarea {
   width: 100%;
   height: 100%;
   position: relative;
+  overflow: hidden;
 }
 #root #App .Appvideo {
   position: absolute;
@@ -300,3 +301,18 @@ textarea {
     transform: translateY(6px);
   }
 }
+
+@keyframes scrollAnimation {
+  0% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-50%);
+  }
+  80% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

code/src/components/KrpanoCom/index.module.scss

@@ -12,17 +12,41 @@
     }
 
     .hotspotLabel {
-      position: absolute;
-      top: -60px;
-      left: 50%;
-      transform: translateX(-50%);
-      opacity: 0;
       text-align: center;
-      line-height: 68px;
-      font-size: 32px;
-      color: #fff;
-      pointer-events: none;
-      text-shadow: 2px 2px black;
+      background-image: url('../../assets/img/btn_normal.png');
+      background-size: 100% 100%;
+      width: 34px;
+      height: 158px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      letter-spacing: 2px;
+      color: var(--themeColor2);
+      font-weight: 700;
+      writing-mode: vertical-rl;
+      overflow: hidden;
+      transition: all .3s;
+
+      &.scroll p {
+        position: relative;
+        overflow: hidden;
+        height: calc(100% - 30px);
+        
+        span {
+          display: block;
+          position: relative;
+          height: max-content;
+          animation: scrollAnimation 4s linear infinite;
+        }
+      }
+    }
+    .A1locBoxLoc {
+      margin: 15px auto 0;
+      width: 64px;
+      height: 61px;
+      background-image: url('../../assets/img/image36.png');
+      background-size: 100% 100%;
+      transition: all .3s;
     }
 
     .hotspotPointer {
@@ -34,8 +58,8 @@
     }
 
     .hotspotActive .hotspotLabel {
-      opacity: 0.8;
-      color: #fce9ac;
+      color: var(--themeColor);
+      background-image: url('../../assets/img/btn_active.png');
       // background-image: url("../../assets/img/btn_active@2x.png");
     }
 

code/src/components/KrpanoCom/index.tsx

@@ -52,8 +52,11 @@ function KrpanoCom({ curScene, curVillage, infoInd, setInfoInd }: Props) {
                 "hotspot"
               )}
             >
-              <span className="hotspotLabel">{item.label}</span>
-              <div className="hotspotPointer" />
+              <div className={classNames("hotspotLabel", item.label.length > 6 && 'scroll')}>
+                <p><span>{item.label}</span></p>
+              </div>
+              {/* 标点 */}
+              <div className="A1locBoxLoc"></div>
             </div>
           </HotSpot>
         );

code/src/pages/A1Home/index.module.scss

@@ -4,7 +4,6 @@
 
   :global {
 
-
     .A1locBox {
       position: absolute;
       z-index: 3;
@@ -12,25 +11,43 @@
       height: 129px;
 
       .A1locBoxName {
+        position: relative;
+        left: 50%;
+        margin-left: -17px;
         text-align: center;
         background-image: url('../../assets/img/btn_normal.png');
         background-size: 100% 100%;
-        width: 158px;
-        height: 34px;
+        width: 34px;
+        height: 158px;
         display: flex;
         justify-content: center;
         align-items: center;
         letter-spacing: 2px;
         color: var(--themeColor2);
         font-weight: 700;
+        writing-mode: vertical-rl;
+        overflow: hidden;
         transition: all .3s;
+
+        &.scroll p {
+          position: relative;
+          overflow: hidden;
+          height: calc(100% - 30px);
+          
+          span {
+            display: block;
+            position: relative;
+            height: max-content;
+            animation: scrollAnimation 4s linear infinite;
+          }
+        }
       }
 
       .A1locBoxLoc {
         margin: 15px auto 0;
-        width: 60px;
-        height: 60px;
-        background-image: url('../../assets/img/homeB.png');
+        width: 64px;
+        height: 61px;
+        background-image: url('../../assets/img/image36.png');
         background-size: 100% 100%;
         transition: all .3s;
       }
@@ -63,16 +80,17 @@
       background-size: 100% 100%;
       opacity: 0;
       transition: all .3s;
+      writing-mode: vertical-rl;
       cursor: pointer;
 
       &>div {
         position: absolute;
-        top: -50px;
+        top: -188px;
         left: 50%;
         transform: translateX(-50%);
 
-        width: 188px;
-        height: 50px;
+        width: 34px;
+        height: 188px;
         padding-bottom: 16px;
 
         &>div {
@@ -249,4 +267,4 @@
     }
 
   }
-}
+}

code/src/pages/A1Home/index.tsx

@@ -37,7 +37,9 @@ function A1Home() {
           style={{ top: v.top, left: v.left, right: v.right, bottom: v.bottom }}
         >
           {/* 名字 */}
-          <div className="A1locBoxName">{v.name}</div>
+          <div className={classNames("A1locBoxName", v.name.length > 6 && 'scroll')}>
+            <p><span>{v.name}</span></p>
+          </div>
           {/* 标点 */}
           <div className="A1locBoxLoc"></div>
           {/* 光点 */}