fix: 优化

src/pages/A0base/component/Panoramic.tsx

@@ -89,16 +89,17 @@ const Panoramic = ({
             <HotSpot
               name='xingtonghotspot'
               type='text'
-              atv={26.09}
-              ath={-12.06}
+              atv={27.62}
+              ath={-11.49}
               scale={0.5}
               edge='top'
               bg={false}
               distorted={true}
+              // onDown='draggable_hotspot()'
               onClick={() => setIsFloor(true)}
             >
               <div className='A0hotspot A0hotspot-xingtong'>
-                <div className='A0hotspot-text'>前海院区</div>
+                <div className='A0hotspot-text A0hotspot-text-xingtong '>前海院区</div>
                 <div className='A0hotspot-bg-xingtong'></div>
               </div>
             </HotSpot>
@@ -115,16 +116,17 @@ const Panoramic = ({
             <HotSpot
               name='taohuayuanhotspot'
               type='text'
-              atv={9.21}
-              ath={-3.02}
+              atv={10.61}
+              ath={-2.77}
               scale={0.5}
               edge='top'
               bg={false}
               distorted={true}
+              // onDown='draggable_hotspot()'
               onClick={() => setIsPreview([true, 'baoan'])}
             >
               <div className='A0hotspot'>
-                <div className='A0hotspot-text'>宝安院区</div>
+                <div className='A0hotspot-text A0hotspot-text-taohuayuan'>宝安院区</div>
                 <div className='A0hotspot-bg-taohuayuan'></div>
               </div>
             </HotSpot>
@@ -152,7 +154,7 @@ const Panoramic = ({
               onClick={() => setIsPreview([true, 'nanshang'])}
             >
               <div className='A0hotspot'>
-                <div className='A0hotspot-text'>南山院区</div>
+                <div className='A0hotspot-text A0hotspot-text-xuni'>南山院区</div>
                 <div className='A0hotspot-bg-xuni'></div>
               </div>
             </HotSpot>
@@ -210,6 +212,33 @@ const Panoramic = ({
                 <div className='A0hotspot-distance-line3'></div>
               </div>
             </HotSpot>
+
+            <HotSpot
+              name='rcgongyu'
+              url={require('../image/hotPot.png')}
+              atv={29.04}
+              ath={-0.61}
+              scale={0.3}
+              edge='top'
+              // onDown='draggable_hotspot()'
+              distorted={true}
+            />
+            <HotSpot
+              name='rcgongyuhotspot'
+              type='text'
+              ath={6.66}
+              atv={20.21}
+              scale={0.5}
+              edge='top'
+              bg={false}
+              distorted={true}
+              onClick={() => setIsPreview([true, 'rcgongyu'])}
+            >
+              <div className='A0hotspot A0hotspot-rcgongyu'>
+                <div className='A0hotspot-text A0hotspot-text-rcgongyu'>专家公寓</div>
+                <div className='A0hotspot-bg-rcgongyu'></div>
+              </div>
+            </HotSpot>
           </>
         )
       }

src/pages/A0base/component/Preview.tsx

@@ -39,14 +39,31 @@ const TextContainer = ({ type }: { type: string }) => {
     {
       label: '空间分布：',
       content:
-        '共有2个公共办公区、3 个专家工作室、2 个会议室、1个大教室和1个贵宾，满足师生进行学术研究及办公。'
+        '有2个共享工作区、3个共享工作室、1个大教室了，1个会议室和1个贵宾室，满足师生学术及办公。'
     },
     {
       label: '承载人数：',
-      content: '可同时满足 20人以上人员办公和 100 人以上学员上课和培训。'
+      content: '可同时满足20人以上人员办公和100人以上学员上课和培训。'
     }
   ]
-  const textList = type === 'baoan' ? textListBao : textListNan
+  const textListRc = [
+    {
+      label: '基本概况',
+      content:
+        '桃花源科技创新生态园-专家公寓位于宝安区西乡街道铁岗水库路拓展区 A10栋，为解决研究院特聘教授和驻深教师的短期住房问题,研究院秉持关心专家、服务人才的原则，统一承租了周转公寓。'
+    },
+    {
+      label: '公寓配套设施',
+      content:
+        '公寓配套设施齐全，有套间、单间、标间等不同房型，全套家私、阳台、卫生间、空调、洗衣机、热水器、微波炉(需要可提供)、冰箱、吹风机、床、书桌、衣柜。'
+    },
+    {
+      label: '公寓周边配套',
+      content:
+        '公寓周边配套齐全、生活便利。周围有超市、便利店、银行、医院、学校以及各种餐厅美食。距离地铁站仅需5分钟，20 分钟到达深圳宝安国际机场、30 分钟可到达深圳北站。'
+    }
+  ]
+  const textList = type === 'baoan' ? textListBao : type === 'nanshang' ? textListNan : textListRc
   return (
     <div className='preview-base-text-container'>
       {textList.map((item, index) => (
@@ -70,13 +87,31 @@ export function Preview({
 }) {
   // 滚轮让x轴滚动
   const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
-    event.preventDefault()
     const container = document.querySelector('#A0PreviewScroll')
     if (container) {
       container.scrollLeft += event.deltaY
     }
   }
 
+  // 移动端触摸滚动
+  let startX: number
+
+  const touchStart = (event: React.TouchEvent<HTMLDivElement>) => {
+    const container = document.querySelector('#A0PreviewScroll')
+    if (container) {
+      startX = event.touches[0].clientX // 记录触摸开始的X坐标
+    }
+  }
+
+  const touchMove = (event: React.TouchEvent<HTMLDivElement>) => {
+    const container = document.querySelector('#A0PreviewScroll')
+    if (container) {
+      const moveX = event.touches[0].clientX - startX // 计算移动的距离
+      container.scrollLeft -= moveX // 更新scrollLeft
+      startX = event.touches[0].clientX // 更新起始X坐标
+    }
+  }
+
   const [currentIndex, setCurrentIndex] = useState(0)
   const handleArrowLeftClick = () => {
     if (currentIndex > 0) {
@@ -137,7 +172,13 @@ export function Preview({
         {/* index为0，特殊处理 */}
         {currentIndex === 0 && <TextContainer type={type} />}
         {currentIndex !== 0 && (
-          <div id='A0PreviewScroll' className={styles.sliderScroll} onWheel={handleWheel}>
+          <div
+            id='A0PreviewScroll'
+            className={styles.sliderScroll}
+            onWheel={handleWheel}
+            onTouchStart={touchStart}
+            onTouchMove={touchMove}
+          >
             <SliderList
               type={type}
               imgArr={imgArr}

src/pages/A0base/component/index.module.scss

@@ -158,6 +158,8 @@
 }
 
 .mapIntroMobile {
+  width: 100%;
+  height: 50%;
   :global {
     .mapIntro-content {
       width: 85%;
@@ -264,7 +266,7 @@
         gap: 24px;
         .preview-base-text-label {
           align-self: flex-start;
-          width: 110px;
+          width: 120px;
           font-size: 17px;
           color: #fff;
           font-weight: 600;
@@ -316,6 +318,7 @@
       }
     }
     .preview-base-text-container {
+      margin-bottom: 55px;
       gap: 6px;
       width: 100%;
       padding: 0;
@@ -409,6 +412,13 @@
   width: 150px;
   height: 100px;
   margin: 0;
+  :global {
+    .slider-img {
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
 }
 
 .demo {
@@ -434,10 +444,15 @@
         background: url('../image/xuni.png') no-repeat center / contain;
       }
       &-bg-taohuayuan {
-        width: 350px;
+        width: 250px;
         height: 350px;
         background: url('../image/taohuayuan.png') no-repeat center / contain;
       }
+      &-bg-rcgongyu {
+        width: 200px;
+        height: 200px;
+        background: url('../image/rcgongyu.png') no-repeat center / contain;
+      }
       &-text {
         width: 200px;
         text-align: center;
@@ -446,6 +461,34 @@
         color: #fff;
         font-weight: bold;
       }
+      &-text-taohuayuan {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, 62%);
+      }
+      &-text-xingtong {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -9%);
+      }
+      &-text-xuni {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, 71%);
+      }
+      &-text-rcgongyu {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-36%, 33%);
+        width: 200px;
+        text-align: center;
+        line-height: 34px;
+        font-size: 22px;
+      }
     }
     .A0hotspot-xingtong {
       animation: scaleAni 2s linear infinite;

src/pages/A0base/index.tsx

@@ -38,6 +38,17 @@ const imgArrTemp2 = [
   { src: 'nan-6.jpg', title: '会议室' }
 ]
 
+const imgArrTemp3 = [
+  { src: 'rcgongyu-0.jpg', title: '基本情况' },
+  { src: 'rcgongyu-1.jpg', title: '公寓房间' },
+  { src: 'rcgongyu-2.jpg', title: '公寓房间' },
+  { src: 'rcgongyu-3.png', title: '商务会客咖啡吧' },
+  { src: 'rcgongyu-4.png', title: '铁岗水库悠闲观光' },
+  { src: 'rcgongyu-5.png', title: 'COFFEE BUS' },
+  { src: 'rcgongyu-6.png', title: '冷餐沙龙' },
+  { src: 'rcgongyu-7.png', title: '露天茶室' }
+]
+
 function Layout({ setIsFloor }: { setIsFloor: (isFloor: boolean) => void }) {
   const history = useHistory()
   return (
@@ -164,7 +175,13 @@ function A0Base() {
 
           {isPreview[0] && (
             <Preview
-              imgArr={isPreview[1] === 'baoan' ? imgArrTemp : imgArrTemp2}
+              imgArr={
+                isPreview[1] === 'baoan'
+                  ? imgArrTemp
+                  : isPreview[1] === 'nanshang'
+                  ? imgArrTemp2
+                  : imgArrTemp3
+              }
               setIsPreview={setIsPreview}
               type={isPreview[1]}
             />
@@ -174,58 +191,62 @@ function A0Base() {
           <div
             className='A0_logo'
             style={{
-              display: isPreview[0] || (isMobile() && showIntro) || isFloor ? 'none' : 'block'
+              display: isPreview[0] || isFloor ? 'none' : 'block'
             }}
           >
             <img src={require('./image/logo.png')} alt='' />
           </div>
 
           {/* 克劳德 */}
-          <div className='A0_cloud1'>
-            <img
-              className={classNames(isMouseMove && 'a0_cloud1move')}
-              src={require('./image/cloud1.png')}
-              alt=''
-            />
-            <img
-              className={classNames(isMouseMove && 'a0_cloud1move2')}
-              src={require('./image/cloud1.png')}
-              alt=''
-            />
-            <img
-              className={classNames(isMouseMove && 'a0_cloud1move3')}
-              src={require('./image/cloud1.png')}
-              alt=''
-            />
-          </div>
-          <div className={classNames('A0_cloud2', isMouseMove && 'a0_cloud2move')}>
-            <img
-              style={{}}
-              className={classNames(isMouseMove && 'a0_cloud1move4')}
-              src={require('./image/cloud2.png')}
-              alt=''
-            />
-            <img
-              className={classNames(isMouseMove && 'a0_cloud1move5')}
-              style={{
-                position: 'absolute',
-                right: '0',
-                bottom: '-37%'
-              }}
-              src={require('./image/cloud2.png')}
-              alt=''
-            />
-            <img
-              className={classNames(isMouseMove && 'a0_cloud1move5')}
-              style={{
-                position: 'absolute',
-                right: '0px',
-                bottom: '84px'
-              }}
-              src={require('./image/cloud1.png')}
-              alt=''
-            />
-          </div>
+          {!isFloor && !isPreview[0] && (
+            <>
+              <div className='A0_cloud1'>
+                <img
+                  className={classNames(isMouseMove && 'a0_cloud1move')}
+                  src={require('./image/cloud1.png')}
+                  alt=''
+                />
+                <img
+                  className={classNames(isMouseMove && 'a0_cloud1move2')}
+                  src={require('./image/cloud1.png')}
+                  alt=''
+                />
+                <img
+                  className={classNames(isMouseMove && 'a0_cloud1move3')}
+                  src={require('./image/cloud1.png')}
+                  alt=''
+                />
+              </div>
+              <div className={classNames('A0_cloud2', isMouseMove && 'a0_cloud2move')}>
+                <img
+                  style={{}}
+                  className={classNames(isMouseMove && 'a0_cloud1move4')}
+                  src={require('./image/cloud2.png')}
+                  alt=''
+                />
+                <img
+                  className={classNames(isMouseMove && 'a0_cloud1move5')}
+                  style={{
+                    position: 'absolute',
+                    right: '0',
+                    bottom: '-37%'
+                  }}
+                  src={require('./image/cloud2.png')}
+                  alt=''
+                />
+                <img
+                  className={classNames(isMouseMove && 'a0_cloud1move5')}
+                  style={{
+                    position: 'absolute',
+                    right: '0px',
+                    bottom: '84px'
+                  }}
+                  src={require('./image/cloud1.png')}
+                  alt=''
+                />
+              </div>
+            </>
+          )}
 
           {/* 图标栏 */}
           <div