update

public/myData/myData.js

@@ -788,7 +788,7 @@ const myDataTemp = {
           txt: '炳灵寺169窟“建弘元年”的题记，是中国现存最早的有明确纪年的佛教石窟实物。主尊肉髻呈馒头状、着通肩大衣，体态雄健、双臂与身体空间分离，注重表现躯体的结构。'
         },
         {
-          title: '北魏 云冈石窟第20窟佛像',
+          title: '北魏 云冈石窟第20窟佛像',
           src: './myData/img/sin_2.png',
           txt: '图上标注：主佛：着袒右式僧衣，僧衣厚重，中亚犍陀罗造像风格   旁边：印度秣菟罗造像风格，衣纹贴体'
         },

src/pages/A6ybwx/A6_2_zxzgh/index.module.scss

@@ -275,107 +275,110 @@
         .detailShow,
         .detailHide {
           height: 100%;
-          background: url('../../../assets/img/A6_sinicize_bg2.png') no-repeat center center;
-          background-size: 100% 100%;
+          background: url('../../../assets/img/A6_sinicize_bg2.png') repeat-x center bottom;
+          background-size: auto 99%;
           overflow: hidden;
           transition: all 0.7s ease-in-out;
           display: flex;
           align-items: center;
-
           .left {
-            width: 38%;
+            width: 800px;
             height: 100%;
-            padding: 44px 22px;
             display: flex;
-            flex-direction: column;
             align-items: center;
-            gap: 20px;
-
-            .desc {
-              color: rgba(93, 96, 96, 1);
-              font-size: 12px;
+            flex-direction: column;
+            .lTop {
+              padding: 20px;
+              padding-bottom: 0;
               width: 100%;
-              max-height: 60%;
-              height: fit-content;
+              height: 100px;
+              font-size: 13px;
+              font-weight: 500;
+              color: rgba(124, 75, 54, 1);
             }
-
-            .txtItem {
+            .lContent {
               width: 100%;
-              height: fit-content;
-              max-height: 60%;
+              height: calc(100% - 100px);
               display: flex;
-              flex-direction: column;
               gap: 5px;
-
-              .title {
-                font-size: 12px;
-                font-weight: 500;
-                color: rgba(124, 75, 54, 1);
+              position: relative;
+              .lImgBox {
+                width: 550px;
+                height: 100%;
+                & > img {
+                  height: 100%;
+                  object-fit: contain;
+                }
               }
-
-              .txt {
-                color: rgba(93, 96, 96, 1);
-                font-size: 12px;
+              .lInfo {
+                padding-right: 20px;
+                width: 250px;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                gap: 20px;
+                .item {
+                  width: 100%;
+                  height: fit-content;
+                  font-size: 13px;
+                  font-weight: 500;
+                  color: rgba(124, 75, 54, 1);
+
+                  .lTitle {
+                    width: 100%;
+                    height: fit-content;
+                    font-size: 13px;
+                    font-weight: 500;
+                    color: rgba(124, 75, 54, 1);
+                    position: relative;
+                    z-index: 1;
+                    &::after {
+                      content: '';
+                      width: 32px;
+                      height: 4px;
+                      position: absolute;
+                      z-index: -1;
+                      top: 50%;
+                      left: 50%;
+                      transform: translate(-341%, 65%);
+                      background-color: rgb(197, 185, 144);
+                      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
+                    }
+                  }
+                  .lText {
+                    height: fit-content;
+                    margin-top: 5px;
+                    max-height: 90px;
+                    overflow: auto;
+                    &::-webkit-scrollbar {
+                      width: 0px;
+                      height: 0px;
+                    }
+                  }
+                }
               }
             }
           }
-
           .right {
-            width: 60%;
+            width: fit-content;
             height: 100%;
-            padding: 30px 25px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            position: relative;
-
-            .title {
-              width: 100%;
-              height: 20px;
-              font-size: 12px;
-              font-weight: 500;
-              color: rgba(124, 75, 54, 1);
-              text-align: center;
-            }
-
-            .pic {
-              width: 100%;
-              height: 65%;
-
-              & > img {
-                width: 100%;
-                height: 100%;
-                object-fit: contain;
-              }
-            }
-
-            .txt {
-              width: 90%;
-              height: 20%;
-              font-size: 11px;
-              color: rgba(93, 96, 96, 1);
-            }
-
-            .iconContainner {
-              align-self: flex-end;
-              width: 100%;
-              height: 30px;
+            .RItems {
+              width: fit-content;
               display: flex;
               align-items: center;
-              justify-content: center;
               gap: 10px;
-
-              .icon {
-                cursor: pointer;
-                width: 14px;
-                height: 14px;
-
-                & > img {
+              .item {
+                width: 500px;
+                height: 100%;
+                .pic {
                   width: 100%;
                   height: 100%;
-                  object-fit: contain;
+                  & > img {
+                    width: 80%;
+                    height: 100%;
+                    object-fit: contain;
+                  }
                 }
               }
             }
@@ -383,7 +386,7 @@
         }
 
         .detailShow {
-          width: 700px;
+          width: fit-content;
 
           .left,
           .right {

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -1,6 +1,13 @@
 import React, { useState, useRef } from 'react'
 import styles from './index.module.scss'
 import { myData } from '@/utils/http'
+
+type InfoCardProps = {
+  time: string
+  location: string
+  text?: string
+  from: string
+}
 function Sinicize() {
   const [currentTab, setCurrentTab] = useState(0)
   const [selectedTime, setSelectedTime] = useState(0)
@@ -58,18 +65,33 @@ function Sinicize() {
   }
 
   // 处理触摸移动事件
-  const handleOriTouchMove = (e: any) => {
-    e.preventDefault()
-    const deltaX = e.touches[0].clientY - ori_touchStartX.current
-    if (originRef.current) {
-      originRef.current.scrollLeft -= deltaX
-    }
-    ori_touchStartX.current = e.touches[0].clientY
-  }
+  // const handleOriTouchMove = (e: any) => {
+  //   e.preventDefault()
+  //   const deltaX = e.touches[0].clientY - ori_touchStartX.current
+  //   if (originRef.current) {
+  //     originRef.current.scrollLeft -= deltaX
+  //   }
+  //   ori_touchStartX.current = e.touches[0].clientY
+  // }
+
+  // // 处理触摸开始事件
+  // const handleTouchStart = (e: any) => {
+  //   ori_touchStartX.current = e.touches[0].clientY
+  // }
 
-  // 处理触摸开始事件
-  const handleTouchStart = (e: any) => {
-    ori_touchStartX.current = e.touches[0].clientY
+  const InfoCard = ({ time, location, text, from }: InfoCardProps) => {
+    return (
+      <div className={styles.InfoCard}>
+        <div className="dotLeft"></div>
+        <div className="main">
+          <div className="time"></div>
+          <div className="location"></div>
+          <div className="text"></div>
+          <div className="from"></div>
+        </div>
+        <div className="dotRight"></div>
+      </div>
+    )
   }
 
   return (
@@ -78,8 +100,8 @@ function Sinicize() {
         ref={originRef}
         className={styles.Sinicize}
         onWheel={handleWheel}
-        onTouchMove={handleOriTouchMove}
-        onTouchStart={handleTouchStart}
+      // onTouchMove={handleOriTouchMove}
+      // onTouchStart={handleTouchStart}
       >
         <div className='SinicizeScroll'>
           <div ref={sinicize1Ref} className={styles.Sinicize1}>
@@ -166,31 +188,39 @@ function Sinicize() {
                     <div className='txt'>{sItem.time}</div>
                   </div>
                   <div className={`${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
-                    <div className='left'>
-                      <div className='desc'>
-                        {sItem.desc}
-                      </div>
-                      {sItem.items.map((item, index) => (
-                        <div className='txtItem' key={index}>
-                          <div className='title'>{item.title}</div>
-                          <div className='txt'>{item.txt}</div>
+                    <div className="left">
+                      <div className="lTop">{sItem.desc}</div>
+                      <div className="lContent">
+                        <div className="lImgBox">
+                          <InfoCard
+                            time={sItem.imgItems[0].title}
+                            location={sItem.imgItems[0].title}
+                            text={sItem.imgItems[0].txt}
+                            from={sItem.imgItems[0].title}
+                          />
+                          <img src={sItem.imgItems[0].src} alt="" />
                         </div>
-                      ))}
-                    </div>
-                    <div className='right'>
-                      <div className='title'>{sItem.imgItems[currentImgIndex]?.title || ''}</div>
-                      <div className='pic'><img src={sItem.imgItems[currentImgIndex]?.src || ''} alt="" /></div>
-                      <div className="txt">{sItem.imgItems[currentImgIndex]?.txt || ''}</div>
-                      <div className="iconContainner">
-                        {sItem.imgItems.map((i, index) => {
-                          return (
-                            <div className='icon' key={index} onClick={() => { setCurrentImgIndex(index) }}>
-                              <img src={require(`@/assets/img/A6_sincize_detailIcon${currentImgIndex === index ? '_ac' : ''}.png`)} draggable='false' alt='' />
+                        <div className="lInfo">
+                          {sItem.items.map((i, index) => (
+                            <div className="item" key={index}>
+                              <div className="lTitle">{i.title}</div>
+                              <div className="lText">{i.txt}</div>
                             </div>
-                          )
-                        })}
+                          ))}
+                        </div>
                       </div>
+                    </div>
+                    <div className="right">
+                      <div className="RItems">
+                        {
+                          sItem.imgItems.map((i, index) => (
+                            <div className="item" key={index}>
+                              <div className="pic"><img src={i.src} alt="" /></div>
+                            </div>
+                          ))
+                        }
 
+                      </div>
                     </div>
                   </div>
                 </div>