gx

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

@@ -360,24 +360,35 @@
             transform: translate(-50%, -50%);
             width: 225px;
             height: 60px;
-            background: url('../../../assets/img/A6_pointBg.png') no-repeat center center;
-            background-size: 100% 100%;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            .pointTime,
-            .pointTitle {
-              padding-left: 10px;
-              width: 60%;
-              height: 60%;
-              font-size: 13px;
-              font-weight: 500;
-              color: rgba(124, 75, 54, 1);
-              text-align: center;
+            & > img {
+              position: absolute;
+              z-index: -1;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              width: auto;
+              height: 100%;
+              object-fit: contain;
             }
-            .pointTime {
-              height: 30%;
+            .pPoint {
+              padding: 6px 0;
+              width: 100%;
+              height: 100%;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+
+              .pointTime,
+              .pointTitle {
+                padding-left: 10px;
+                width: fit-content;
+                height: 50%;
+                font-size: 20px;
+                font-weight: 500;
+                color: rgba(124, 75, 54, 1);
+                text-align: center;
+              }
             }
           }
           .left {
@@ -385,6 +396,7 @@
             height: 100%;
             display: inline-block;
             vertical-align: top;
+            position: relative;
             white-space: normal;
             .lTop {
               text-align: justify;
@@ -397,6 +409,9 @@
               letter-spacing: 2px;
               font-weight: 400;
               color: rgba(93, 96, 96, 1);
+              position: absolute;
+              top: 0;
+              left: 0;
             }
             .lContent {
               width: 100%;
@@ -404,6 +419,7 @@
               display: flex;
               gap: 5px;
               position: relative;
+              margin-top: 100px;
               .lImgBox {
                 width: 550px;
                 height: 100%;
@@ -421,7 +437,8 @@
                 }
               }
               .lInfo {
-                padding-right: 20px;
+                padding-left: 20px;
+                padding-top: 30px;
                 width: 250px;
                 height: 100%;
                 display: flex;

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -147,6 +147,29 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
     )
   }
 
+  const InfoPoint = ({ time, title, width = 150, direction = 'right', dx = 50, dy = 50 }: { time: string; title: string; width?: number; direction?: string; dx?: number; dy?: number }) => {
+    return (<div
+      className={`point point${direction}`}
+      style={{ transform: `translate(${dx}%, ${dy}%)` }}
+      onClick={() =>
+        setIsShowLine(
+          isShowLine.map(item => ({
+            ...item,
+            isShow: item.index === 0 ? false : item.isShow
+          }))
+        )
+      }
+    >
+      <img src={require('@/assets/img/A6_pointBg.png')} alt="" />
+      <div className="pPoint" style={{ width: width + 'px' }}>
+
+        <div className='pointTime songFont'>{time}</div>
+        <div className='pointTitle songFont'>{title}</div>
+      </div>
+
+    </div>)
+  }
+
   return (
     <>
       <div
@@ -249,6 +272,12 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                       <div className='left'>
                         <div className='lTop'>{sItem.desc}</div>
                         <div className='lContent'>
+                          <div className='lInfo'>
+                            <div className='item' key={index}>
+                              <div className='lTitle songFont'>{sItem.items[0].title}</div>
+                              <div className='lText'>{sItem.items[0].txt}</div>
+                            </div>
+                          </div>
                           <div className='lImgBox'>
                             {/* <img
                             src={isShowLine ? sItem.imgItems[0].srcLine : sItem.imgItems[0].src}
@@ -272,30 +301,13 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                                 index={0}
                               />
                             ) : (
-                              <div
-                                className='point'
-                                onClick={() =>
-                                  setIsShowLine(
-                                    isShowLine.map(item => ({
-                                      ...item,
-                                      isShow: item.index === 0 ? false : item.isShow
-                                    }))
-                                  )
-                                }
-                              >
-                                <div className='pointTime songFont'>{sItem.imgItems[0].time}</div>
-                                <div className='pointTitle songFont'>{sItem.imgItems[0].title}</div>
-                              </div>
+                              InfoPoint({
+                                time: sItem.imgItems[0].time,
+                                title: sItem.imgItems[0].title
+                              })
                             )}
                           </div>
-                          <div className='lInfo'>
-                            {sItem.items.map((i, index) => (
-                              <div className='item' key={index}>
-                                <div className='lTitle songFont'>{i.title}</div>
-                                <div className='lText'>{i.txt}</div>
-                              </div>
-                            ))}
-                          </div>
+
                         </div>
                       </div>
                       <div className='right'>
@@ -324,20 +336,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                                     index={index2}
                                   />
                                 ) : (
-                                  <div
-                                    className='point'
-                                    onClick={() =>
-                                      setIsShowLine(
-                                        isShowLine.map(item => ({
-                                          ...item,
-                                          isShow: item.index === index2 + 1 ? false : item.isShow
-                                        }))
-                                      )
-                                    }
-                                  >
-                                    <div className='pointTime'>{i.time}</div>
-                                    <div className='pointTitle'>{i.title}</div>
-                                  </div>
+                                  < InfoPoint time={i.time} title={i.title} />
                                 )}
                               </div>
                             ))}