update

public/myData/myData.js

@@ -838,7 +838,7 @@ const myDataTemp = {
       desc: '北魏孝文帝时期推行汉化改革，迁都洛阳，并随着南朝文化的影响，佛教造像风格发生显著转变，既反映了鲜卑贵族阶层对中原文化的认同，也标志着佛教艺术从外来移植走向本土建构的关键一步，为隋唐佛教美术的成熟奠定了坚实基础。',
       items: [
         {
-          title: '佛教',
+          title: '佛像',
           txt: '面容方圆适中，秀丽温柔而不失庄严，衣饰变化反映了太和服饰改制的社会背景，袈裟式样由厚重的通肩式演变为轻盈的“褒衣博带”式，衣褶层叠流畅，富有节奏感，体现出汉地士人崇尚的飘逸风度。'
         },
         {
@@ -858,7 +858,7 @@ const myDataTemp = {
           direction: 'right',
           classNameCard: 'zwq1',
           classNamePoint: 'point4'
-        }
+        },
         {
           time: '龙门石窟',
           title: '宾阳中洞',
@@ -867,7 +867,7 @@ const myDataTemp = {
           txt: '',
           picfrom: '图片来源：微信公众号 龙门石窟官微',
           direction: 'left',
-          name: '主尊',
+          name: '主佛',
           classNameCard: 'zwq2',
           classNamePoint: 'point5'
         },
@@ -880,7 +880,7 @@ const myDataTemp = {
           txt: '',
           picfrom: '图片来源《云冈石窟全集》卷3第6窟P231',
           direction: 'left',
-          name: '主尊',
+          name: '菩萨',
           classNameCard: 'zwq3',
           classNamePoint: 'point6'
         }

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

@@ -212,6 +212,14 @@
               }
             }
           }
+          .point8 {
+            transform: translate(-113%, 50%);
+            .pPoint {
+              width: 500px;
+              position: relative;
+              left: -76%;
+            }
+          }
         }
         .item:nth-child(1) {
           width: 330px;

src/pages/A6ybwx/A6_2_zxzgh/components/Bq/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import styles from './index.module.scss'
-import { showLineType } from "../..";
 import InfoCard from '../InfoCard'
 import InfoPoint from '../InfoPoint'
 import { yearType } from '../Bwzzq';
@@ -38,6 +37,8 @@ function Bq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType)
                     <InfoPoint
                       time={i.time}
                       title={i.title}
+                      classNamePoint={i?.classNamePoint}
+                      direction={i?.direction}
                     />
                   )}
                 </div>

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

@@ -214,6 +214,14 @@
               }
             }
           }
+          .point7 {
+            transform: translate(-113%, 121%);
+            .pPoint {
+              width: 417px;
+              position: relative;
+              left: -51%;
+            }
+          }
         }
         .itemHot {
           width: 800px;

src/pages/A6ybwx/A6_2_zxzgh/components/Bwwq/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import styles from './index.module.scss'
-import { showLineType } from "../..";
 import InfoCard from '../InfoCard'
 import InfoPoint from '../InfoPoint'
 import { yearType } from '../Bwzzq';
@@ -38,6 +37,7 @@ function Bwwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTyp
                     <InfoPoint
                       time={i.time}
                       title={i.title}
+                      classNamePoint={i.classNamePoint}
                     />
                   )}
                 </div>

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

@@ -177,6 +177,7 @@
       height: 100%;
       display: inline-block;
       vertical-align: top;
+      position: relative;
       .RItems {
         width: fit-content;
         height: 100%;
@@ -185,7 +186,7 @@
         gap: 10px;
 
         .item {
-          width: 500px;
+          width: 595px;
           height: 100%;
           position: relative;
 
@@ -194,7 +195,7 @@
             height: 100%;
             transition: all 0.3s ease-in-out;
             background-repeat: no-repeat;
-            background-position: center center;
+            background-position: left;
             background-size: contain;
           }
           .zwq1 {
@@ -206,7 +207,7 @@
             }
             .dotRight {
               width: 160px;
-              top: 5%;
+              top: -5%;
               .card_arrowR {
                 .line {
                   border-top: 1px dashed rgba(93, 96, 96, 1);
@@ -215,9 +216,137 @@
               }
             }
           }
+          .zwq2 {
+            transform: translate(21%, 46%);
+            width: 420px;
+            .main {
+              width: 178px;
+              white-space: normal;
+            }
+            .dotLeft {
+              width: 120px;
+              top: -3%;
+              .name {
+                text-align: left;
+                padding-left: 20px;
+              }
+              .card_arrowL {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .zwq3 {
+            transform: translate(-8%, -12%);
+            width: 420px;
+            .main {
+              width: 178px;
+              white-space: normal;
+            }
+            .dotLeft {
+              width: 120px;
+              top: -3%;
+              .name {
+                text-align: left;
+                padding-left: 20px;
+              }
+              .card_arrowL {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .point4 {
+            transform: translate(-103%, 121%);
+            .pPoint {
+              width: 350px;
+              position: relative;
+              left: -51%;
+            }
+          }
+          .point5 {
+            transform: translate(17%, 130%);
+            .pPoint {
+              width: 158px;
+            }
+          }
+          .point6 {
+            .pPoint {
+              width: 364px;
+            }
+          }
         }
         .item:nth-child(1) {
-          width: 310px;
+          width: 290px;
+        }
+      }
+      .lInfo {
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        right: 1%;
+        white-space: normal;
+        padding-left: 20px;
+        padding-top: 30px;
+        width: 250px;
+        height: 60%;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: 20px;
+        overflow: auto;
+        &::-webkit-scrollbar {
+          width: 0px;
+          height: 0px;
+        }
+        .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: 17px;
+            line-height: 24px;
+            letter-spacing: 2px;
+            font-weight: bold;
+            color: rgba(124, 75, 54, 1);
+            position: relative;
+            z-index: 1;
+            &::after {
+              content: '';
+              width: 46px;
+              height: 4px;
+              position: absolute;
+              z-index: -1;
+              top: 50%;
+              left: 50%;
+              transform: translate(-223%, 65%);
+              background-color: rgb(197, 185, 144);
+              box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
+            }
+          }
+          .lText {
+            font-size: 16px;
+            line-height: 24px;
+            letter-spacing: 2px;
+            font-weight: 400;
+            color: #504e40;
+            height: 80%;
+            margin-top: 5px;
+            overflow: auto;
+            &::-webkit-scrollbar {
+              width: 0px;
+              height: 0px;
+            }
+          }
         }
       }
     }

src/pages/A6ybwx/A6_2_zxzgh/components/Bwzwq/index.tsx

@@ -47,11 +47,19 @@ function Bwzwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTy
                       time={i.time}
                       title={i.title}
                       classNamePoint={i?.classNamePoint}
+                      direction={i?.direction}
                     />
                   )}
                 </div>
               ))}
           </div>
+
+          <div className='lInfo'>
+            <div className='item' key={index}>
+              <div className='lTitle songFont'>{sItem.items[1].title}</div>
+              <div className='lText'>{sItem.items[1].txt}</div>
+            </div>
+          </div>
         </div>
       </>
       {/* )} */}