更新到最新

public/css/main.css

@@ -3684,7 +3684,6 @@ a {
 a:focus,
 a:hover,
 a:visited {
-  color: #fff;
   text-decoration: none;
 }
 

src/pages/A0base/component/Intro.tsx

@@ -1,12 +1,68 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styles from './index.module.scss'
-import base from '../image/base.png'
-import baseMobile from '../image/M_base.png'
 import close from '../image/close.png'
 import classNames from 'classnames'
 import isMobile from '@/utils/isMobile'
+import { SliderList } from './Slider'
 
 export function Intro({ handleIntroClick }: { handleIntroClick: (isShow: boolean) => void }) {
+  // 滚轮让x轴滚动
+  const container = document.querySelector('#A0PreviewScroll')
+  const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
+    if (container) {
+      container.scrollLeft += event.deltaY
+    }
+  }
+
+  // 移动端触摸滚动
+  let startX: number
+
+  const touchStart = (event: React.TouchEvent<HTMLDivElement>) => {
+    if (container) {
+      startX = event.touches[0].clientX // 记录触摸开始的X坐标
+    }
+  }
+
+  const touchMove = (event: React.TouchEvent<HTMLDivElement>) => {
+    if (container) {
+      const moveX = event.touches[0].clientX - startX // 计算移动的距离
+      container.scrollLeft -= moveX // 更新scrollLeft
+      startX = event.touches[0].clientX // 更新起始X坐标
+    }
+  }
+
+  const qianhaiImgArr = [
+    { src: 'qianhai-0.jpg', title: '前海院区' },
+    { src: 'qianhai-1.png', title: '科研机构简介展览' },
+    { src: 'qianhai-2.png', title: '多功能报告厅' },
+    { src: 'qianhai-3.png', title: '多功能报告厅' },
+    { src: 'qianhai-4.png', title: '硕博办公室' },
+    { src: 'qianhai-5.png', title: '2306会议室' },
+    { src: 'qianhai-6.png', title: '开放式讨论区' },
+    { src: 'qianhai-7.png', title: '陕公书屋' },
+    { src: 'qianhai-8.png', title: '陕公书屋' },
+    { src: 'qianhai-9.png', title: '陕公书屋' }
+  ]
+
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const handleArrowLeftClick = () => {
+    if (currentIndex > 0) {
+      setCurrentIndex(currentIndex - 1)
+      if (container) {
+        const target = document.querySelector('.sliderSelected')
+        target?.scrollIntoView({ behavior: 'smooth', inline: 'end', block: 'nearest' })
+      }
+    }
+  }
+  const handleArrowRightClick = () => {
+    if (currentIndex < qianhaiImgArr.length - 1) {
+      if (container) {
+        const target = document.querySelector('.sliderSelected')
+        target?.scrollIntoView({ behavior: 'smooth', inline: 'start', block: 'nearest' })
+      }
+      setCurrentIndex(currentIndex + 1)
+    }
+  }
   return (
     <div className={classNames(styles.intro, isMobile() && styles.introMobile)}>
       <div className='intro-content'>
@@ -21,37 +77,78 @@ export function Intro({ handleIntroClick }: { handleIntroClick: (isShow: boolean
           </span>
         </div>
         <div className='intro-base'>
-          {!isMobile() ? <img src={base} alt='' /> : <img src={baseMobile} alt='' />}
+          <div
+            className='preview-arrow-left'
+            onClick={handleArrowLeftClick}
+            style={currentIndex === 0 ? { opacity: 0.4, cursor: 'not-allowed' } : {}}
+          ></div>
+          <div
+            className='preview-arrow-right'
+            onClick={handleArrowRightClick}
+            style={
+              currentIndex === qianhaiImgArr.length - 1
+                ? { opacity: 0.4, cursor: 'not-allowed' }
+                : {}
+            }
+          ></div>
+          <img src={require(`../image/qianhai/${qianhaiImgArr[currentIndex].src}`)} alt='' />
         </div>
         <div className='intro-base-text-container'>
-          <div className='intro-base-text'>
-            <span className='intro-base-text-label'>核心功能</span>
-            <span className='intro-base-text-content'>
-              高端会议、学术交流、师生科研、校友活动，旨在
-              打造成为中国人民大学立足于粤港澳大湾区、面向全球的国际交流新高地。
-            </span>
-          </div>
-          <div className='intro-base-text'>
-            <span className='intro-base-text-label'>入驻机构</span>
-            <span className='intro-base-text-content'>
-              深圳研究院〔社会科学高等研究院（深圳）〕、深
-              圳金融高等研究院、涉外法治与发展研究中心、知识产权与创新研究中心等。
-            </span>
-          </div>
-          <div className='intro-base-text'>
-            <span className='intro-base-text-label'>空间分布</span>
-            <span className='intro-base-text-content'>
-              共有 1 间多功能报告厅、1 间贵宾接待室、2 间会 议室、2 间智慧教室、2 间研讨室、2
-              处共享办公区处独立共享办公室、1 处开放办公区，满足师生进行学术研究及办公交流。
-            </span>
-          </div>
-          <div className='intro-base-text'>
-            <span className='intro-base-text-label'>承载人数</span>
-            <span className='intro-base-text-content'>
-              高会议室和教室分别可容纳 20 人、30 人、40 人、 80 人上课。多功能报告厅最大可容纳 200
-              人同时使用。
-            </span>
-          </div>
+          {currentIndex === 0 ? (
+            <>
+              <div className='intro-base-text'>
+                <span className='intro-base-text-label'>核心功能</span>
+                <span className='intro-base-text-content'>
+                  高端会议、学术交流、师生科研、校友活动，旨在
+                  打造成为中国人民大学立足于粤港澳大湾区、面向全球的国际交流新高地。
+                </span>
+              </div>
+              <div className='intro-base-text'>
+                <span className='intro-base-text-label'>入驻机构</span>
+                <span className='intro-base-text-content'>
+                  深圳研究院〔社会科学高等研究院（深圳）〕、深
+                  圳金融高等研究院、涉外法治与发展研究中心、知识产权与创新研究中心等。
+                </span>
+              </div>
+              <div className='intro-base-text'>
+                <span className='intro-base-text-label'>空间分布</span>
+                <span className='intro-base-text-content'>
+                  共有 1 间多功能报告厅、1 间贵宾接待室、2 间会 议室、2 间智慧教室、2 间研讨室、2
+                  处共享办公区处独立共享办公室、1 处开放办公区，满足师生进行学术研究及办公交流。
+                </span>
+              </div>
+              <div className='intro-base-text'>
+                <span className='intro-base-text-label'>承载人数</span>
+                <span className='intro-base-text-content'>
+                  高会议室和教室分别可容纳 20 人、30 人、40 人、 80 人上课。多功能报告厅最大可容纳
+                  200 人同时使用。
+                </span>
+              </div>
+              <div className='intro-base-text'>
+                <span className='intro-base-text-label'>校区地址</span>
+                <span className='intro-base-text-content'>
+                  <a href='https://map.qq.com/?addr=%E5%B9%BF%E4%B8%9C%E7%9C%81%E6%B7%B1%E5%9C%B3%E5%B8%82%E5%AE%9D%E5%AE%89%E5%8C%BA%E5%AE%9D%E5%85%B4%E8%B7%AF88%E5%8F%B7%E6%98%9F%E9%80%9A%E5%A4%A7%E5%8E%A622%2C23%E5%B1%82&isopeninfowin=1&markertype=1&name=%E4%B8%AD%E5%9B%BD%E4%BA%BA%E6%B0%91%E5%A4%A7%E5%AD%A6%E6%B7%B1%E5%9C%B3%E7%A0%94%E7%A9%B6%E9%99%A2%28%E5%89%8D%E6%B5%B7%E9%99%A2%E5%8C%BA%29&pointx=113.881210&pointy=22.551401&ref=WeChat&type=marker'>
+                    点击查看中国人民大学深圳研究院（前海院区）地址
+                  </a>
+                </span>
+              </div>
+            </>
+          ) : (
+            <div
+              id='A0PreviewScroll'
+              className={styles.sliderScroll}
+              onWheel={handleWheel}
+              onTouchStart={touchStart}
+              onTouchMove={touchMove}
+            >
+              <SliderList
+                type={'qianhai'}
+                imgArr={qianhaiImgArr}
+                onSliderClick={setCurrentIndex}
+                selectedIndex={currentIndex}
+              />
+            </div>
+          )}
         </div>
       </div>
     </div>

src/pages/A0base/component/Slider.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import styles from './index.module.scss'
 import isMobile from '@/utils/isMobile'
 import classNames from 'classnames'
@@ -20,9 +20,12 @@ export function Slider({
 }) {
   return (
     <div
-      className={classNames(styles.slider, isMobile() && styles.sliderMobile)}
+      className={classNames(
+        styles.slider,
+        isMobile() && styles.sliderMobile,
+        imgIndex === selectedIndex ? 'sliderSelected' : ''
+      )}
       onClick={() => onSliderClick(imgIndex)}
-      style={{ border: imgIndex === selectedIndex ? '3px solid #0081fa' : 'none' }}
     >
       <div className='img-name'>{title}</div>
       <div className='img-container'>

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

@@ -30,20 +30,44 @@
         height: 450px;
         margin: 0 auto;
         margin-top: 12px;
-
+        position: relative;
+        .preview-arrow-left {
+          cursor: pointer;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          left: -60px;
+          width: 37px;
+          height: 37px;
+          background-image: url('../image/arrow_left.png');
+          background-size: 100% 100%;
+        }
+        .preview-arrow-right {
+          cursor: pointer;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          left: auto;
+          right: -60px;
+          width: 37px;
+          height: 37px;
+          background-image: url('../image/arrow_right.png');
+          background-size: 100% 100%;
+        }
         img {
-          object-fit: none;
+          object-fit: contain;
           width: 100%;
           height: 100%;
         }
       }
       .intro-base-text-container {
-        padding-top: 12px;
+        padding: 12px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        gap: 16px;
+        gap: 10px;
+        width: 100%;
         .intro-base-text {
           width: 70%;
           margin: 0 auto;
@@ -74,6 +98,7 @@
   background-color: rgba(0, 0, 0, 0.8);
   :global {
     .intro-content {
+      width: 100%;
       height: 100%;
       background-color: transparent;
       .intro-title {
@@ -89,15 +114,28 @@
       }
       .intro-base {
         width: 100%;
-        height: 200px;
+        height: 230px;
         margin: 0;
+        .preview-arrow-left {
+          left: 10px;
+        }
+        .preview-arrow-right {
+          right: 10px;
+        }
         img {
-          object-fit: cover;
+          object-fit: contain;
+        }
+      }
+      @media screen and (max-height: 700px) {
+        .intro-base-text-container {
+          gap: 0 !important;
         }
       }
       .intro-base-text-container {
         height: 100%;
         gap: 16px;
+        overflow: auto;
+
         .intro-base-text {
           flex-direction: column;
           width: 85%;
@@ -257,25 +295,29 @@
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      gap: 20px;
+      gap: 10px;
       .preview-base-text {
         width: 100%;
         display: flex;
         align-items: center;
         padding: 0 24px;
-        gap: 24px;
+        gap: 12px;
         .preview-base-text-label {
           align-self: flex-start;
-          width: 120px;
+          width: 115px;
           font-size: 17px;
           color: #fff;
           font-weight: 600;
         }
         .preview-base-text-content {
-          width: 100%;
+          width: 0;
+          flex: 1;
           font-size: 17px;
           line-height: 20px;
           color: rgba(255, 255, 255, 0.8);
+          a {
+            color: #6dafec;
+          }
         }
       }
     }
@@ -292,8 +334,7 @@
     }
     .preview-container {
       width: 100%;
-      height: 100%;
-      max-height: 294px;
+      height: 50%;
       .preview-content {
         .preview-arrow-left {
           left: 2px;
@@ -318,14 +359,14 @@
       }
     }
     .preview-base-text-container {
-      margin-bottom: 55px;
       gap: 6px;
       width: 100%;
       padding: 0;
-      padding-bottom: 6px;
+      height: 400px;
+      overflow: auto;
+      justify-content: flex-start;
       .preview-base-text {
         padding: 0 12px;
-        flex-direction: column;
         gap: 6px;
         .preview-base-text-label {
           font-size: 14px;
@@ -349,6 +390,11 @@
   ::-webkit-scrollbar {
     display: none;
   }
+  :global {
+    .sliderSelected {
+      border: 3px solid #0081fa;
+    }
+  }
 }
 
 .sliderList {
@@ -376,6 +422,9 @@
   margin: 12px;
   &:hover {
     border: 3px solid #0081fa;
+    .img-name {
+      opacity: 0;
+    }
   }
   :global {
     .img-name {
@@ -391,6 +440,7 @@
       background-color: rgba(0, 0, 0, 0.7);
       color: rgba(255, 255, 255, 0.8);
       font-size: 16px;
+      text-align: center;
       &:hover {
         opacity: 0;
       }

src/pages/A0base/index.tsx

@@ -16,26 +16,27 @@ import isMobile from '@/utils/isMobile'
 import Panoramic from './component/Panoramic'
 const imgArrTemp = [
   { src: 'Bao-0.png', title: '基本情况' },
-  { src: 'Bao-1.jpg', title: '休息洽谈区' },
-  { src: 'Bao-2.jpg', title: '汇报展示厅' },
-  { src: 'Bao-3.jpg', title: '会议室' },
-  { src: 'Bao-4.jpg', title: '智慧教室' },
-  { src: 'Bao-5.jpg', title: '共享工作室' },
-  { src: 'Bao-6.jpg', title: '共享办公区' },
-  { src: 'Bao-7.jpg', title: '贵宾接待室' },
-  { src: 'Bao-8.jpg', title: '茶憩文印室' },
-  { src: 'Bao-9.jpg', title: '休闲展览区' },
-  { src: 'Bao-10.jpg', title: '走廊' }
+  { src: 'Bao-1.png', title: '主楼一楼' },
+  { src: 'Bao-2.png', title: '延安十三年与中国式现代化”主题展' },
+  { src: 'Bao-3.png', title: '党员之家' },
+  { src: 'Bao-4.png', title: '共享办公室' },
+  { src: 'Bao-5.png', title: '贵宾厅' },
+  { src: 'Bao-6.png', title: '桃花源书斋' },
+  { src: 'Bao-7.png', title: '智慧教室' },
+  { src: 'Bao-8.png', title: '智慧教室' },
+  { src: 'Bao-9.png', title: '智慧教室' },
+  { src: 'Bao-10.png', title: '一楼广场' }
 ]
 
 const imgArrTemp2 = [
   { src: 'nan-0.png', title: '基本情况' },
-  { src: 'nan-1.jpg', title: '校史走廊' },
-  { src: 'nan-2.jpg', title: '校友之家' },
-  { src: 'nan-3.jpg', title: '专家办公室' },
-  { src: 'nan-4.jpg', title: '智慧教室' },
-  { src: 'nan-5.jpg', title: '共享办公区' },
-  { src: 'nan-6.jpg', title: '会议室' }
+  { src: 'nan-1.png', title: '走廊' },
+  { src: 'nan-2.png', title: '智慧教室' },
+  { src: 'nan-3.png', title: '办公区' },
+  { src: 'nan-4.jpg', title: '校史走廊' },
+  { src: 'nan-5.jpg', title: '校友之家' },
+  { src: 'nan-6.jpg', title: '会议室' },
+  { src: 'nan-7.jpg', title: '共享办公区' }
 ]
 
 const imgArrTemp3 = [