update

public/myData/myData.js

@@ -805,31 +805,31 @@ const myDataTemp = {
           name: '主尊',
           classNameCard: 'zzq1',
           classNamePoint: 'point1'
+        },
+        {
+          time: '北魏',
+          title: '云冈石窟第20窟佛像',
+          src: './myData/img/30.png',
+          srcLine: './myData/img/20.png',
+          txt: '图上标注主佛：着袒右式僧衣，僧衣厚重，中亚犍陀罗造像风格 旁边：印度秣菟罗造像风格，衣纹贴体',
+          picfrom: '图片来源：《云冈石窟全集》卷17 第20窟主佛',
+          direction: 'left',
+          name: '主佛',
+          classNameCard: 'zzq2',
+          classNamePoint: 'point2'
+        },
+        {
+          time: '北魏',
+          title: '云冈石窟第19窟右壁胁侍菩萨',
+          src: './myData/img/28.png',
+          srcLine: './myData/img/29.png',
+          txt: '',
+          picfrom: '图片来源：《云冈石窟全集》卷17 第19窟右壁胁侍菩萨',
+          direction: 'left',
+          name: '菩萨',
+          classNameCard: 'zzq3',
+          classNamePoint: 'point3'
         }
-        // {
-        //   time: '北魏',
-        //   title: '云冈石窟第20窟佛像',
-        //   src: './myData/img/30.png',
-        //   srcLine: './myData/img/20.png',
-        //   txt: '图上标注主佛：着袒右式僧衣，僧衣厚重，中亚犍陀罗造像风格 旁边：印度秣菟罗造像风格，衣纹贴体',
-        //   picfrom: '图片来源：《云冈石窟全集》卷17 第20窟主佛',
-        //   direction: 'left',
-        //   name: '主尊',
-        //   classNameCard: 'zzq2',
-        //   classNamePoint: 'point2'
-        // },
-        // {
-        //   time: '北魏',
-        //   title: '云冈石窟第19窟右壁胁侍菩萨',
-        //   src: './myData/img/28.png',
-        //   srcLine: './myData/img/29.png',
-        //   txt: '',
-        //   picfrom: '图片来源：《云冈石窟全集》卷17 第19窟右壁胁侍菩萨',
-        //   direction: 'right',
-        //   name: '主尊',
-        //   classNameCard: 'zzq3',
-        //   classNamePoint: 'point3'
-        // }
       ]
     },
     {
@@ -859,31 +859,31 @@ const myDataTemp = {
           classNameCard: 'zwq1',
           classNamePoint: 'point4'
         }
-        // {
-        //   time: '龙门石窟',
-        //   title: '宾阳中洞',
-        //   src: './myData/img/4.png',
-        //   srcLine: './myData/img/9.png',
-        //   txt: '',
-        //   picfrom: '图片来源：微信公众号 龙门石窟官微',
-        //   direction: 'right',
-        //   name: '主尊',
-        //   classNameCard: 'zwq2',
-        //   classNamePoint: 'point5'
-        // },
+        {
+          time: '龙门石窟',
+          title: '宾阳中洞',
+          src: './myData/img/4.png',
+          srcLine: './myData/img/9.png',
+          txt: '',
+          picfrom: '图片来源：微信公众号 龙门石窟官微',
+          direction: 'left',
+          name: '主尊',
+          classNameCard: 'zwq2',
+          classNamePoint: 'point5'
+        },
 
-        // {
-        //   time: '北魏',
-        //   title: '云冈石窟第6窟中心塔柱胁侍菩萨',
-        //   src: './myData/img/27.png',
-        //   srcLine: './myData/img/18.png',
-        //   txt: '',
-        //   picfrom: '图片来源《云冈石窟全集》卷3第6窟P231',
-        //   direction: 'right',
-        //   name: '主尊',
-        //   classNameCard: 'zwq3',
-        //   classNamePoint: 'point6'
-        // }
+        {
+          time: '北魏',
+          title: '云冈石窟第6窟中心塔柱胁侍菩萨',
+          src: './myData/img/27.png',
+          srcLine: './myData/img/18.png',
+          txt: '',
+          picfrom: '图片来源《云冈石窟全集》卷3第6窟P231',
+          direction: 'left',
+          name: '主尊',
+          classNameCard: 'zwq3',
+          classNamePoint: 'point6'
+        }
       ]
     },
     {

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

@@ -46,7 +46,7 @@ function Bwzwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTy
                     <InfoPoint
                       time={i.time}
                       title={i.title}
-                      className={i?.classNamePoint}
+                      classNamePoint={i?.classNamePoint}
                     />
                   )}
                 </div>

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

@@ -188,6 +188,7 @@
       height: 100%;
       display: inline-block;
       vertical-align: top;
+      position: relative;
       .RItems {
         width: fit-content;
         height: 100%;
@@ -195,7 +196,7 @@
         align-items: center;
         gap: 10px;
         .item {
-          width: 500px;
+          width: 570px;
           height: 100%;
           position: relative;
           .pic {
@@ -203,9 +204,126 @@
             height: 100%;
             transition: all 0.3s ease-in-out;
             background-repeat: no-repeat;
-            background-position: center center;
+            background-position: left;
             background-size: contain;
           }
+          .zzq2 {
+            transform: translate(-29%, -35%);
+            width: 450px;
+            .main {
+              width: 260px;
+              white-space: normal;
+            }
+            .dotLeft {
+              width: 150px;
+              top: 7%;
+              .name {
+                text-align: left;
+              }
+            }
+          }
+          .point2 {
+            transform: translate(-26%, -50%);
+            .pPoint {
+              width: 252px;
+            }
+          }
+          .zzq3 {
+            transform: translate(-26%, 37%);
+            width: 450px;
+            .main {
+              width: 260px;
+              white-space: normal;
+            }
+            .dotLeft {
+              width: 148px;
+              top: 7%;
+              .card_arrowR,
+              .card_arrowL {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+              .name {
+                text-align: left;
+              }
+            }
+          }
+          .point3 {
+            .pPoint {
+              width: 332px;
+            }
+          }
+        }
+        .item:nth-child(2) {
+          width: 650px;
+        }
+      }
+
+      .lInfo {
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        right: 5%;
+        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/Bwzzq/index.tsx

@@ -85,7 +85,7 @@ function Bwzzq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTy
                       setIsShowLine(
                         isShowLine.map(item => ({
                           ...item,
-                          isShow: item.index === index + 1 ? !item.isShow : item.isShow
+                          isShow: item.index === index2 + 1 ? !item.isShow : item.isShow
                         }))
                       )
                     }
@@ -95,13 +95,22 @@ function Bwzzq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTy
                     <InfoCard {...i} />
                   ) : (
                     <InfoPoint
+                      direction={i.direction}
                       time={i.time}
                       title={i.title}
+                      classNamePoint={i.classNamePoint}
                     />
                   )}
                 </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>
       </>
       {/* )} */}

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

@@ -21,7 +21,8 @@
         width: 100%;
         color: rgba(255, 233, 182, 1);
       }
-      .card_arrowR {
+      .card_arrowR,
+      .card_arrowL {
         width: 100%;
         height: 20px;
         display: flex;

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

@@ -1,5 +1,5 @@
-import React from "react";
-import styles from "./index.module.scss";
+import React from 'react'
+import styles from './index.module.scss'
 
 type InfoCardProps = {
   time: string
@@ -10,31 +10,45 @@ type InfoCardProps = {
   direction?: string
   classNameCard?: string
 }
-function InfoCard({ time, title, txt, picfrom, name = '主尊', direction = 'left', classNameCard = '' }: InfoCardProps) {
+function InfoCard({
+  time,
+  title,
+  txt,
+  picfrom,
+  name = '主尊',
+  direction = 'left',
+  classNameCard = ''
+}: InfoCardProps) {
   return (
     <div className={`${styles.InfoCard} ${classNameCard}`}>
-      {direction === 'left' && <div className='dotLeft'>
-        <div className="name">{name}</div>
-        <img src={require('@/assets/img/A6_arrow.png')} alt='' />
-      </div>}
+      {direction === 'left' && (
+        <div className='dotLeft'>
+          <div className='name'>{name}</div>
+          <div className='card_arrowL'>
+            <img src={require('@/assets/img/icon_dot2.png')} alt='' />
+            <div className='line'></div>
+          </div>
+        </div>
+      )}
       <div className='main'>
         <div className='time'>{time}</div>
         <div className='location'>{title}</div>
         <div className='Cardtext'>{txt}</div>
         <div className='from'>{picfrom}</div>
       </div>
-      {direction === 'right' && <div className='dotRight'>
-        <div className="name">{name}</div>
-        <div className="card_arrowR">
-          <div className="line"></div>
-          <img src={require('@/assets/img/icon_dot2.png')} alt='' />
+      {direction === 'right' && (
+        <div className='dotRight'>
+          <div className='name'>{name}</div>
+          <div className='card_arrowR'>
+            <div className='line'></div>
+            <img src={require('@/assets/img/icon_dot2.png')} alt='' />
+          </div>
         </div>
-
-      </div>}
+      )}
     </div>
   )
 }
 
-const MemoInfoCard = React.memo(InfoCard);
+const MemoInfoCard = React.memo(InfoCard)
 
-export default MemoInfoCard;
+export default MemoInfoCard

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

@@ -4,19 +4,17 @@ import styles from './index.module.scss'
 type InfoPointProps = {
   time: string
   title: string
-  width?: number
   direction?: string
-  className?: string
+  classNamePoint?: string
 }
-function InfoPoint({ time, title, width = 185, direction = 'right', className = '' }: InfoPointProps) {
+function InfoPoint({ time, title, direction = 'right', classNamePoint = '' }: InfoPointProps) {
 
   return (
     <div
-      className={`${styles.point} point${direction} ${className}`}
+      className={`${styles.point} point${direction} ${classNamePoint}`}
     >
       <img className="pointBg" src={require('@/assets/img/A6_pointBg.png')} alt="" />
-      <div className="pPoint" style={{ width: width + 'px' }}>
-
+      <div className="pPoint">
         <div className='pointTime songFont'>{time}</div>
         <div className='pointTitle songFont'>{title}</div>
       </div>

src/utils/http.ts

@@ -1,17 +1,14 @@
-
 export const isLoc = true
 
 export const baseURL = isLoc ? baseUrlLoc : baseUrlAtl
 
-
 // 是不是pc端
 export const isPc = isPcTemp
 
 // 全景视频/全景图/unity场景资源地址
 export const otherUrl = otherUrlTemp
 
-
 // 发送请求基地址
 export const apiUrl: string = apiUrlTemp
 
-export const envFlag = process.env.NODE_ENV === 'development'
+export const envFlag = process.env.NODE_ENV === 'development'