更新

public/myData/myData.js

@@ -937,55 +937,55 @@ const myDataTemp = {
           name: '主尊',
           classNameCard: 'bq1',
           classNamePoint: 'point8'
+        },
+        {
+          time: '北齐',
+          title: '南响堂石窟第1窟中心柱正壁龛',
+          src: './myData/img/23.png',
+          srcLine: './myData/img/14.png',
+          txt: '身体健硕、薄衣贴体、衣纹简洁',
+          picfrom: '图片来源：《中国石窟寺》P269',
+          direction: 'right',
+          name: '主尊',
+          classNameCard: 'bq2',
+          classNamePoint: 'point9'
+        },
+        {
+          time: '北齐',
+          title: '北响堂山石窟第三窟右壁',
+          src: './myData/img/0.png',
+          srcLine: './myData/img/5.png',
+          txt: '',
+          picfrom: '图片来源：《中国石窟雕塑精华 河北响堂山石窟》',
+          direction: 'right',
+          name: '主尊',
+          classNameCard: 'bq3',
+          classNamePoint: 'point10'
+        },
+        {
+          time: '北齐',
+          title: '北响堂石窟中心方柱左大龛菩萨像',
+          src: './myData/img/1.png',
+          srcLine: './myData/img/7.png',
+          txt: '',
+          picfrom: '图片来源：《中国石窟雕塑精华 河北响堂山石窟》',
+          direction: 'left',
+          name: '主尊',
+          classNameCard: 'bq4',
+          classNamePoint: 'point11'
+        },
+        {
+          time: '北齐',
+          title: '北响堂石窟第4窟菩萨像',
+          src: './myData/img/2.png',
+          srcLine: './myData/img/6.png',
+          txt: '',
+          picfrom: '图片来源：《中国石窟雕塑精华 河北响堂山石窟》',
+          direction: 'left',
+          name: '主尊',
+          classNameCard: 'bq5',
+          classNamePoint: 'point12'
         }
-        // {
-        //   time: '北齐',
-        //   title: '南响堂石窟第1窟中心柱正壁龛',
-        //   src: './myData/img/23.png',
-        //   srcLine: './myData/img/14.png',
-        //   txt: '身体健硕、薄衣贴体、衣纹简洁',
-        //   picfrom: '图片来源：《中国石窟寺》P269',
-        //   direction: 'right',
-        //   name: '主尊',
-        //   classNameCard: 'bq2',
-        //   classNamePoint: 'point9'
-        // },
-        // {
-        //   time: '北齐',
-        //   title: '北响堂山石窟第三窟右壁',
-        //   src: './myData/img/0.png',
-        //   srcLine: './myData/img/5.png',
-        //   txt: '',
-        //   picfrom: '图片来源：《中国石窟雕塑精华 河北响堂山石窟》',
-        //   direction: 'right',
-        //   name: '主尊',
-        //   classNameCard: 'bq3',
-        //   classNamePoint: 'point10'
-        // },
-        // {
-        //   time: '北齐',
-        //   title: '北响堂石窟中心方柱左大龛菩萨像',
-        //   src: './myData/img/1.png',
-        //   srcLine: './myData/img/7.png',
-        //   txt: '',
-        //   picfrom: '图片来源：《中国石窟雕塑精华 河北响堂山石窟》',
-        //   direction: 'right',
-        //   name: '主尊',
-        //   classNameCard: 'bq4',
-        //   classNamePoint: 'point11'
-        // },
-        // {
-        //   time: '北齐',
-        //   title: '北响堂石窟第4窟菩萨像',
-        //   src: './myData/img/2.png',
-        //   srcLine: './myData/img/6.png',
-        //   txt: '',
-        //   picfrom: '图片来源：《中国石窟雕塑精华 河北响堂山石窟》',
-        //   direction: 'right',
-        //   name: '主尊',
-        //   classNameCard: 'bq5',
-        //   classNamePoint: 'point12'
-        // }
       ]
     },
     {

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

@@ -177,6 +177,7 @@
       height: 100%;
       display: inline-block;
       vertical-align: top;
+      position: relative;
       .RItems {
         width: fit-content;
         height: 100%;
@@ -184,7 +185,7 @@
         align-items: center;
         gap: 10px;
         .item {
-          width: 400px;
+          width: 450px;
           height: 100%;
           position: relative;
           .pic {
@@ -192,7 +193,7 @@
             height: 100%;
             transition: all 0.3s ease-in-out;
             background-repeat: no-repeat;
-            background-position: center center;
+            background-position: right;
             background-size: contain;
           }
           .bq1 {
@@ -220,10 +221,151 @@
               left: -76%;
             }
           }
+          .bq2 {
+            transform: translate(-94%, 40%);
+            .main {
+              text-align: right;
+              white-space: normal;
+            }
+            .dotRight {
+              width: 120px;
+              top: 7%;
+              .card_arrowR {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .point9 {
+            transform: translate(-80%, 153%);
+            .pPoint {
+              width: 500px;
+              position: relative;
+              left: -91%;
+            }
+          }
+          .bq3 {
+            transform: translate(-80%, -26%);
+            .main {
+              width: 174px;
+              text-align: right;
+              white-space: normal;
+            }
+            .dotRight {
+              width: 95px;
+              top: 7%;
+              .card_arrowR {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+          .point10 {
+            transform: translate(-93%, -83%);
+            .pPoint {
+              width: 500px;
+              position: relative;
+              left: -77%;
+            }
+          }
         }
         .item:nth-child(1) {
           width: 330px;
         }
+        .item:nth-child(2) {
+          width: 560px;
+        }
+      }
+
+      .itme2Txt {
+        position: absolute;
+        top: 0;
+        right: 75%;
+        pointer-events: none;
+        padding-top: 30px;
+        padding-left: 20px;
+        width: 250px;
+        height: 50px;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 2px;
+        font-weight: 400;
+        color: #504e40;
+      }
+
+      .lInfo1,
+      .lInfo2 {
+        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;
+            }
+          }
+        }
+      }
+      .lInfo1 {
+        top: 24%;
+        right: 75%;
       }
     }
   }

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

@@ -44,6 +44,25 @@ function Bq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType)
                 </div>
               ))}
           </div>
+
+          <div className="itme2Txt">
+            123
+          </div>
+
+          {/* 佛像 */}
+          <div className='lInfo1'>
+            <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='lInfo2'>
+            <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>
       </>
       {/* )} */}