Merge branch 'master' of http://192.168.0.115:3000/lanxin/Chengzhebei into master

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

@@ -0,0 +1,222 @@
+.Bq {
+  width: auto;
+  height: 100%;
+  background: url('../../../../../assets/img/A6_sinicize_bg2.png') repeat-x center bottom;
+  background-size: cover;
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+  display: inline-block;
+  vertical-align: top;
+  &:global(.detailShow) {
+    :global {
+      .left,
+      .right {
+        opacity: 1;
+        transition: all 1s ease-in-out, opacity 0.3s ease-in-out;
+      }
+    }
+  }
+  &:global(.detailHide) {
+    :global {
+      .left,
+      .right {
+        width: 0;
+        opacity: 0;
+        transition: all 0.6s ease-in-out;
+      }
+    }
+  }
+
+  :global {
+    .point {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 225px;
+      height: 60px;
+      & > img {
+        position: absolute;
+        z-index: -1;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: auto;
+        height: 100%;
+        object-fit: contain;
+      }
+      .pPoint {
+        padding: 6px 0;
+        padding-left: 55px;
+        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 {
+      width: 255px;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      white-space: normal;
+      .lTop {
+        text-align: justify;
+        padding: 40px;
+        padding-right: 0;
+        padding-bottom: 0;
+        width: 100%;
+        height: 160px;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 2px;
+        font-weight: 400;
+        color: rgba(93, 96, 96, 1);
+      }
+      .lContent {
+        width: 100%;
+        height: calc(100% - 100px);
+        display: flex;
+        gap: 5px;
+        position: relative;
+        .lImgBox {
+          width: 550px;
+          height: 100%;
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.3s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: top right;
+            background-size: contain;
+          }
+          & > img {
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+        .lInfo {
+          padding-left: 40px;
+          padding-top: 30px;
+          width: 90%;
+          height: 48%;
+          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: 40px;
+                height: 4px;
+                position: absolute;
+                z-index: -1;
+                top: 50%;
+                left: 50%;
+                transform: translate(-480%, 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: fit-content;
+              margin-top: 5px;
+              max-height: 90px;
+              overflow: auto;
+              &::-webkit-scrollbar {
+                width: 0px;
+                height: 0px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .right {
+      width: fit-content;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      .RItems {
+        width: fit-content;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        .item {
+          width: 400px;
+          height: 100%;
+          position: relative;
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.3s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: contain;
+          }
+          .bq1 {
+            transform: translate(-113%, -8%);
+            .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);
+                }
+              }
+            }
+          }
+        }
+        .item:nth-child(1) {
+          width: 330px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+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';
+
+function Bq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType) {
+  return (
+    <div id='sinicizeDetail' className={`${styles.Bq} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
+      {/* {selectedTime === index && ( */}
+      <>
+        <div className='left'>
+          <div className='lTop'>{sItem.desc}</div>
+        </div>
+        <div className='right'>
+          <div className='RItems'>
+            {sItem.imgItems
+              .map((i, index2) => (
+                <div className='item' key={index2}>
+                  <div
+                    style={{
+                      backgroundImage: `url(${isShowLine[index2]?.isShow ? i.srcLine : i.src})`
+                    }}
+                    onClick={() =>
+                      setIsShowLine(
+                        isShowLine.map(item => ({
+                          ...item,
+                          isShow: item.index === index2 ? !item.isShow : item.isShow
+                        }))
+                      )
+                    }
+                    className={`pic ${isShowLine[index2]?.isShow ? 'picLine' : ''}`}
+                  />
+                  {!isShowLine[index2]?.isShow ? (
+                    <InfoCard {...i} />
+                  ) : (
+                    <InfoPoint
+                      time={i.time}
+                      title={i.title}
+                    />
+                  )}
+                </div>
+              ))}
+          </div>
+        </div>
+      </>
+      {/* )} */}
+    </div>
+  )
+}
+
+const MemoBq = React.memo(Bq)
+
+export default MemoBq

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

@@ -0,0 +1,256 @@
+.Bwwq {
+  width: auto;
+  height: 100%;
+  background: url('../../../../../assets/img/A6_sinicize_bg2.png') repeat-x center bottom;
+  background-size: cover;
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+  display: inline-block;
+  vertical-align: top;
+  &:global(.detailShow) {
+    :global {
+      .left,
+      .right {
+        opacity: 1;
+        transition: all 1s ease-in-out, opacity 0.3s ease-in-out;
+      }
+    }
+  }
+  &:global(.detailHide) {
+    :global {
+      .left,
+      .right {
+        width: 0;
+        opacity: 0;
+        transition: all 0.6s ease-in-out;
+      }
+    }
+  }
+
+  :global {
+    .point {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 225px;
+      height: 60px;
+      & > img {
+        position: absolute;
+        z-index: -1;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: auto;
+        height: 100%;
+        object-fit: contain;
+      }
+      .pPoint {
+        padding: 6px 0;
+        padding-left: 55px;
+        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 {
+      width: 255px;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      white-space: normal;
+      .lTop {
+        text-align: justify;
+        padding: 40px;
+        padding-right: 0;
+        padding-bottom: 0;
+        width: 100%;
+        height: 160px;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 2px;
+        font-weight: 400;
+        color: rgba(93, 96, 96, 1);
+      }
+      .lContent {
+        width: 100%;
+        height: calc(100% - 100px);
+        display: flex;
+        gap: 5px;
+        position: relative;
+        .lImgBox {
+          width: 550px;
+          height: 100%;
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.3s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: top right;
+            background-size: contain;
+          }
+          & > img {
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+        .lInfo {
+          padding-left: 40px;
+          padding-top: 30px;
+          width: 90%;
+          height: 48%;
+          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: 40px;
+                height: 4px;
+                position: absolute;
+                z-index: -1;
+                top: 50%;
+                left: 50%;
+                transform: translate(-480%, 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: fit-content;
+              margin-top: 5px;
+              max-height: 90px;
+              overflow: auto;
+              &::-webkit-scrollbar {
+                width: 0px;
+                height: 0px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .right {
+      width: fit-content;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      .RItems {
+        width: fit-content;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        .item {
+          width: 400px;
+          height: 100%;
+          position: relative;
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.3s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: contain;
+          }
+          .wq1 {
+            transform: translate(-113%, 24%);
+            width: 360px;
+            .main {
+              width: 230px;
+              text-align: right;
+              white-space: normal;
+            }
+            .dotRight {
+              width: 160px;
+              top: 7%;
+              .card_arrowR {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+        }
+        .itemHot {
+          width: 800px;
+          padding: 0 40px;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          .itemHot_title {
+            width: 100%;
+            height: 30px;
+            font-size: 26px;
+            color: rgba(124, 75, 54, 1);
+            text-align: center;
+          }
+          .itemHot_line {
+            width: 100%;
+            height: 30px;
+            margin: 14px 0;
+            & > img {
+              width: 100%;
+              height: 20px;
+              object-fit: contain;
+            }
+          }
+          .itemHot_content {
+            width: 100%;
+            height: 50%;
+            font-size: 16px;
+            line-height: 24px;
+            color: rgba(93, 96, 96, 1);
+            white-space: normal;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+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';
+
+function Bwwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType) {
+  return (
+    <div id='sinicizeDetail' className={`${styles.Bwwq} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
+      {/* {selectedTime === index && ( */}
+      <>
+        <div className='left'>
+          <div className='lTop'>{sItem.desc}</div>
+        </div>
+        <div className='right'>
+          <div className='RItems'>
+            {sItem.imgItems
+              .map((i, index2) => (
+                <div className='item' key={index2}>
+                  <div
+                    style={{
+                      backgroundImage: `url(${isShowLine[index2]?.isShow ? i.srcLine : i.src})`
+                    }}
+                    onClick={() =>
+                      setIsShowLine(
+                        isShowLine.map(item => ({
+                          ...item,
+                          isShow: item.index === index2 ? !item.isShow : item.isShow
+                        }))
+                      )
+                    }
+                    className={`pic ${isShowLine[index2]?.isShow ? 'picLine' : ''}`}
+                  />
+                  {!isShowLine[index2]?.isShow ? (
+                    <InfoCard {...i} />
+                  ) : (
+                    <InfoPoint
+                      time={i.time}
+                      title={i.title}
+                    />
+                  )}
+                </div>
+              ))}
+
+            <div className='itemHot '>
+              <div className="itemHot_title songFont">{sItem.items[0].title}</div>
+              <div className="itemHot_line"><img src={require('@/assets/img/A6_sinicize_bwwq_line.png')} alt="" /></div>
+              <div className="itemHot_content" dangerouslySetInnerHTML={{ __html: sItem.items[0].txt }}></div>
+            </div>
+          </div>
+        </div>
+      </>
+      {/* )} */}
+    </div>
+  )
+}
+
+const MemoBwwq = React.memo(Bwwq)
+
+export default MemoBwwq

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

@@ -0,0 +1,225 @@
+.Bwzwq {
+  width: auto;
+  height: 100%;
+  background: url('../../../../../assets/img/A6_sinicize_bg2.png') repeat-x center bottom;
+  background-size: cover;
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+  display: inline-block;
+  vertical-align: top;
+  &:global(.detailShow) {
+    :global {
+      .left,
+      .right {
+        opacity: 1;
+        transition: all 1s ease-in-out, opacity 0.3s ease-in-out;
+      }
+    }
+  }
+  &:global(.detailHide) {
+    :global {
+      .left,
+      .right {
+        width: 0;
+        opacity: 0;
+        transition: all 0.6s ease-in-out;
+      }
+    }
+  }
+
+  :global {
+    .point {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 225px;
+      height: 60px;
+      & > img {
+        position: absolute;
+        z-index: -1;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: auto;
+        height: 100%;
+        object-fit: contain;
+      }
+      .pPoint {
+        padding: 6px 0;
+        padding-left: 55px;
+        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 {
+      width: 500px;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      white-space: normal;
+      .lTop {
+        text-align: justify;
+        padding: 40px;
+        padding-right: 0;
+        padding-bottom: 0;
+        width: 100%;
+        height: 160px;
+        font-size: 16px;
+        line-height: 22px;
+        letter-spacing: 2px;
+        font-weight: 400;
+        color: rgba(93, 96, 96, 1);
+      }
+      .lContent {
+        width: 100%;
+        height: calc(100% - 100px);
+        display: flex;
+        gap: 5px;
+        position: relative;
+        .lImgBox {
+          width: 550px;
+          height: 100%;
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.3s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: top right;
+            background-size: contain;
+          }
+          & > img {
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+        .lInfo {
+          padding-left: 40px;
+          padding-top: 10px;
+          width: 90%;
+          height: 48%;
+          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: 22px;
+              letter-spacing: 2px;
+              font-weight: bold;
+              color: rgba(124, 75, 54, 1);
+              position: relative;
+              z-index: 1;
+              &::after {
+                content: '';
+                width: 40px;
+                height: 4px;
+                position: absolute;
+                z-index: -1;
+                top: 50%;
+                left: 50%;
+                transform: translate(-480%, 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: fit-content;
+              margin-top: 5px;
+              max-height: 90px;
+              overflow: auto;
+              &::-webkit-scrollbar {
+                width: 0px;
+                height: 0px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .right {
+      width: fit-content;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      .RItems {
+        width: fit-content;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .item {
+          width: 500px;
+          height: 100%;
+          position: relative;
+
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.3s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: contain;
+          }
+          .zwq1 {
+            transform: translate(-114%, 39%);
+            width: 420px;
+            .main {
+              text-align: right;
+              white-space: normal;
+            }
+            .dotRight {
+              width: 160px;
+              top: 5%;
+              .card_arrowR {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+        }
+        .item:nth-child(1) {
+          width: 310px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,64 @@
+import React from 'react'
+import styles from './index.module.scss'
+import InfoCard from '../InfoCard'
+import InfoPoint from '../InfoPoint'
+
+import { yearType } from '../Bwzzq';
+
+function Bwzwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType) {
+  return (
+    <div id='sinicizeDetail' className={`${styles.Bwzwq} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
+      {/* {selectedTime === index && ( */}
+      <>
+        <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>
+        </div>
+        <div className='right'>
+          <div className='RItems'>
+            {sItem.imgItems
+              .map((i, index2) => (
+                <div className='item' key={index2}>
+                  <div
+                    style={{
+                      backgroundImage: `url(${isShowLine[index2]?.isShow ? i.srcLine : i.src})`
+                    }}
+                    onClick={() =>
+                      setIsShowLine(
+                        isShowLine.map(item => ({
+                          ...item,
+                          isShow: item.index === index2 ? !item.isShow : item.isShow
+                        }))
+                      )
+                    }
+                    className={`pic ${isShowLine[index2]?.isShow ? 'picLine' : ''}`}
+                  />
+                  {!isShowLine[index2]?.isShow ? (
+                    <InfoCard {...i} />
+                  ) : (
+                    <InfoPoint
+                      time={i.time}
+                      title={i.title}
+                      className={i?.classNamePoint}
+                    />
+                  )}
+                </div>
+              ))}
+          </div>
+        </div>
+      </>
+      {/* )} */}
+    </div>
+  )
+}
+
+const MemoBwzwq = React.memo(Bwzwq)
+
+export default MemoBwzwq

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

@@ -0,0 +1,213 @@
+.Bwzzq {
+  width: auto;
+  height: 100%;
+  background: url('../../../../../assets/img/A6_sinicize_bg2.png') repeat-x center bottom;
+  background-size: cover;
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+  display: inline-block;
+  vertical-align: top;
+  &:global(.detailShow) {
+    :global {
+      .left,
+      .right {
+        opacity: 1;
+        transition: all 1s ease-in-out, opacity 0.3s ease-in-out;
+      }
+    }
+  }
+  &:global(.detailHide) {
+    :global {
+      .left,
+      .right {
+        width: 0;
+        opacity: 0;
+        transition: all 0.6s ease-in-out;
+      }
+    }
+  }
+
+  :global {
+    .point {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 225px;
+      height: 60px;
+      & > img {
+        position: absolute;
+        z-index: -1;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: auto;
+        height: 100%;
+        object-fit: contain;
+      }
+      .pPoint {
+        padding: 6px 0;
+        padding-left: 55px;
+        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 {
+      width: 745px;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      white-space: normal;
+      .lTop {
+        text-align: justify;
+        padding: 20px;
+        padding-bottom: 0;
+        width: 100%;
+        height: 130px;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 2px;
+        font-weight: 400;
+        color: rgba(93, 96, 96, 1);
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      .lContent {
+        width: 100%;
+        height: calc(100% - 100px);
+        display: flex;
+        gap: 5px;
+        position: relative;
+        margin-top: 100px;
+        .lImgBox {
+          width: 550px;
+          height: 100%;
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.3s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: contain;
+          }
+          & > img {
+            height: 100%;
+            object-fit: contain;
+          }
+
+          .zzq1 {
+            transform: translate(-83%, -2%);
+            width: 420px;
+            .dotRight {
+              width: 180px;
+            }
+          }
+        }
+        .lInfo {
+          padding-left: 20px;
+          padding-top: 30px;
+          width: 250px;
+          height: 48%;
+          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: 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 {
+              font-size: 16px;
+              line-height: 24px;
+              letter-spacing: 2px;
+              font-weight: 400;
+              color: #504e40;
+              height: fit-content;
+              margin-top: 5px;
+              max-height: 90px;
+              overflow: auto;
+              &::-webkit-scrollbar {
+                width: 0px;
+                height: 0px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .right {
+      width: fit-content;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      .RItems {
+        width: fit-content;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        .item {
+          width: 500px;
+          height: 100%;
+          position: relative;
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.3s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: contain;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,114 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { showLineType } from "../..";
+import InfoCard from '../InfoCard'
+import InfoPoint from '../InfoPoint'
+
+export type yearItemType = {
+  time: string
+  bgPath: string
+  desc: string
+  items: { title: string; txt: string; inset: string }[]
+  imgItems: {
+    time: string
+    title: string
+    src: string
+    srcLine: string
+    txt: string
+    picfrom: string
+    direction?: string
+    classNameCard?: string
+    classNamePoint?: string
+  }[]
+}
+
+export type yearType = {
+  sItem: yearItemType
+  isShowLine: showLineType
+  setIsShowLine: (isShowLine: showLineType) => void
+  selectedTime: number
+  index: number
+}
+function Bwzzq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType) {
+  return (
+    <div id='sinicizeDetail' className={`${styles.Bwzzq} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
+      {/* {selectedTime === index && ( */}
+      <>
+        <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'>
+              <div
+                style={{
+                  backgroundImage: `url(${isShowLine[0]?.isShow ? sItem.imgItems[0].srcLine : sItem.imgItems[0].src
+                    })`
+                }}
+                className={`pic ${isShowLine[0]?.isShow ? 'picLine' : ''}`}
+                onClick={() =>
+                  setIsShowLine(
+                    isShowLine.map(item => ({
+                      ...item,
+                      isShow: item.index === index ? !item.isShow : item.isShow
+                    }))
+                  )
+                }
+              />
+              {!isShowLine[0]?.isShow ? (
+                <InfoCard {...sItem.imgItems[0]} />
+              ) : (
+                <InfoPoint
+                  direction={sItem.imgItems[0].direction}
+                  time={sItem.imgItems[0].time}
+                  title={sItem.imgItems[0].title}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+        <div className='right'>
+          <div className='RItems'>
+            {sItem.imgItems
+              .filter((i, index) => index !== 0)
+              .map((i, index2) => (
+                <div className='item' key={index2}>
+                  <div
+                    style={{
+                      backgroundImage: `url(${isShowLine[index2 + 1]?.isShow ? i.srcLine : i.src})`
+                    }}
+                    onClick={() =>
+                      setIsShowLine(
+                        isShowLine.map(item => ({
+                          ...item,
+                          isShow: item.index === index + 1 ? !item.isShow : item.isShow
+                        }))
+                      )
+                    }
+                    className={`pic ${isShowLine[index2 + 1]?.isShow ? 'picLine' : ''}`}
+                  />
+                  {!isShowLine[index2 + 1]?.isShow ? (
+                    <InfoCard {...i} />
+                  ) : (
+                    <InfoPoint
+                      time={i.time}
+                      title={i.title}
+                    />
+                  )}
+                </div>
+              ))}
+          </div>
+        </div>
+      </>
+      {/* )} */}
+    </div>
+  )
+}
+
+const MemoBwzzq = React.memo(Bwzzq)
+
+export default MemoBwzzq

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

@@ -0,0 +1,227 @@
+.Bz {
+  width: auto;
+  height: 100%;
+  background: url('../../../../../assets/img/A6_sinicize_bg2.png') repeat-x center bottom;
+  background-size: cover;
+  overflow: hidden;
+  transition: all 0.3s ease-in-out;
+  display: inline-block;
+  vertical-align: top;
+  &:global(.detailShow) {
+    :global {
+      .left,
+      .right {
+        opacity: 1;
+        transition: all 1s ease-in-out, opacity 0.3s ease-in-out;
+      }
+    }
+  }
+  &:global(.detailHide) {
+    :global {
+      .left,
+      .right {
+        width: 0;
+        opacity: 0;
+        transition: all 0.6s ease-in-out;
+      }
+    }
+  }
+
+  :global {
+    .point {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 225px;
+      height: 60px;
+      & > img {
+        position: absolute;
+        z-index: -1;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: auto;
+        height: 100%;
+        object-fit: contain;
+      }
+      .pPoint {
+        padding: 6px 0;
+        padding-left: 55px;
+        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 {
+      width: 300px;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      white-space: normal;
+      .lTop {
+        text-align: justify;
+        padding: 40px;
+        padding-right: 0;
+        padding-bottom: 0;
+        width: 100%;
+        height: 100px;
+        font-size: 16px;
+        line-height: 22px;
+        letter-spacing: 2px;
+        font-weight: 400;
+        color: rgba(93, 96, 96, 1);
+      }
+      .lContent {
+        width: 100%;
+        height: calc(100% - 100px);
+        display: flex;
+        gap: 5px;
+        position: relative;
+        .lImgBox {
+          width: 550px;
+          height: 100%;
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.3s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: top right;
+            background-size: contain;
+          }
+          & > img {
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+        .lInfo {
+          padding-left: 40px;
+          padding-top: 10px;
+          width: 90%;
+          height: 48%;
+          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: 22px;
+              letter-spacing: 2px;
+              font-weight: bold;
+              color: rgba(124, 75, 54, 1);
+              position: relative;
+              z-index: 1;
+              &::after {
+                content: '';
+                width: 40px;
+                height: 4px;
+                position: absolute;
+                z-index: -1;
+                top: 50%;
+                left: 50%;
+                transform: translate(-480%, 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: fit-content;
+              margin-top: 5px;
+              max-height: 90px;
+              overflow: auto;
+              &::-webkit-scrollbar {
+                width: 0px;
+                height: 0px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .right {
+      width: fit-content;
+      height: 100%;
+      display: inline-block;
+      vertical-align: top;
+      .RItems {
+        width: fit-content;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .item {
+          width: 500px;
+          height: 100%;
+          position: relative;
+
+          .pic {
+            width: 100%;
+            height: 100%;
+            transition: all 0.3s ease-in-out;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: contain;
+          }
+          .bz1 {
+            transform: translate(-112%, 34%);
+            width: 320px;
+            height: 170px;
+            .main {
+              width: 165px;
+              text-align: right;
+              white-space: normal;
+            }
+            .dotRight {
+              width: 120px;
+              top: 5%;
+              .card_arrowR {
+                .line {
+                  border-top: 1px dashed rgba(93, 96, 96, 1);
+                  border-bottom: 1px dashed rgba(93, 96, 96, 1);
+                }
+              }
+            }
+          }
+        }
+        .item:nth-child(1) {
+          width: 310px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+import React from 'react'
+import styles from './index.module.scss'
+import InfoCard from '../InfoCard'
+import InfoPoint from '../InfoPoint'
+
+import { yearType } from '../Bwzzq';
+
+function Bz({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType) {
+  return (
+    <div id='sinicizeDetail' className={`${styles.Bz} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
+      {/* {selectedTime === index && ( */}
+      <>
+        <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>
+        </div>
+        <div className='right'>
+          <div className='RItems'>
+            {sItem.imgItems
+              .map((i, index2) => (
+                <div className='item' key={index2}>
+                  <div
+                    style={{
+                      backgroundImage: `url(${isShowLine[index2]?.isShow ? i.srcLine : i.src})`
+                    }}
+                    onClick={() =>
+                      setIsShowLine(
+                        isShowLine.map(item => ({
+                          ...item,
+                          isShow: item.index === index2 ? !item.isShow : item.isShow
+                        }))
+                      )
+                    }
+                    className={`pic ${isShowLine[index2]?.isShow ? 'picLine' : ''}`}
+                  />
+                  {!isShowLine[index2]?.isShow ? (
+                    <InfoCard {...i} />
+                  ) : (
+                    <InfoPoint
+                      time={i.time}
+                      title={i.title}
+                    />
+                  )}
+                </div>
+              ))}
+          </div>
+        </div>
+      </>
+      {/* )} */}
+    </div>
+  )
+}
+
+const MemoBz = React.memo(Bz)
+
+export default MemoBz

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

@@ -0,0 +1,71 @@
+.InfoCard {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 350px;
+  height: 200px;
+  display: flex;
+  pointer-events: none;
+  :global {
+    .dotLeft,
+    .dotRight {
+      width: 120px;
+      height: 20px;
+      position: relative;
+      top: 20%;
+      .name {
+        text-align: right;
+        height: 10px;
+        width: 100%;
+        color: rgba(255, 233, 182, 1);
+      }
+      .card_arrowR {
+        width: 100%;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        .line {
+          width: 100%;
+          height: 0px;
+          border-top: 1px dashed rgba(255, 233, 182, 1);
+          border-bottom: 1px dashed rgba(255, 233, 182, 1);
+        }
+        & > img {
+          width: 12px;
+          height: 12px;
+          object-fit: contain;
+        }
+      }
+    }
+
+    .main {
+      padding: 4px;
+      width: 260px;
+      height: 100%;
+      font-size: 15px;
+      line-height: 20px;
+      .time {
+        color: rgba(124, 75, 54, 1);
+      }
+      .location {
+        color: rgba(175, 135, 100, 1);
+        font-weight: 500;
+      }
+      .Cardtext {
+        max-height: 80px;
+        margin-top: 10px;
+        color: rgba(93, 96, 96, 1);
+        overflow: auto;
+        &::-webkit-scrollbar {
+          width: 0px;
+          height: 0px;
+        }
+      }
+      .from {
+        color: rgba(151, 151, 151, 1);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+import React from "react";
+import styles from "./index.module.scss";
+
+type InfoCardProps = {
+  time: string
+  title: string
+  txt?: string
+  picfrom: string
+  name?: string
+  direction?: string
+  classNameCard?: string
+}
+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>}
+      <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='' />
+        </div>
+
+      </div>}
+    </div>
+  )
+}
+
+const MemoInfoCard = React.memo(InfoCard);
+
+export default MemoInfoCard;

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

@@ -0,0 +1,53 @@
+.point {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 225px;
+  height: 60px;
+  pointer-events: none;
+  &:global(.pointright) {
+    :global {
+      .pointBg {
+        transform: translate(-50%, -50%) rotate(180deg);
+      }
+      .pPoint {
+        padding-left: 0;
+        padding-right: 55px;
+      }
+    }
+  }
+  :global {
+    .pointBg {
+      position: absolute;
+      z-index: -1;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: auto;
+      height: 100%;
+      object-fit: contain;
+    }
+    .pPoint {
+      padding: 6px 0;
+      padding-left: 55px;
+      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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+import React from "react";
+import styles from './index.module.scss'
+
+type InfoPointProps = {
+  time: string
+  title: string
+  width?: number
+  direction?: string
+  className?: string
+}
+function InfoPoint({ time, title, width = 185, direction = 'right', className = '' }: InfoPointProps) {
+
+  return (
+    <div
+      className={`${styles.point} point${direction} ${className}`}
+    >
+      <img className="pointBg" 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>)
+}
+
+
+const MemoInfoPoint = React.memo(InfoPoint);
+
+export default MemoInfoPoint;

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

@@ -341,253 +341,6 @@
             }
           }
         }
-
-        .detailShow,
-        .detailHide {
-          width: auto;
-          height: 100%;
-          background: url('../../../assets/img/A6_sinicize_bg2.png') repeat-x center bottom;
-          background-size: auto 99%;
-          overflow: hidden;
-          transition: all 0.3s ease-in-out;
-          display: inline-block;
-          vertical-align: top;
-
-          .point {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 225px;
-            height: 60px;
-            & > img {
-              position: absolute;
-              z-index: -1;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
-              width: auto;
-              height: 100%;
-              object-fit: contain;
-            }
-            .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 {
-            width: 800px;
-            height: 100%;
-            display: inline-block;
-            vertical-align: top;
-            position: relative;
-            white-space: normal;
-            .lTop {
-              text-align: justify;
-              padding: 20px;
-              padding-bottom: 0;
-              width: 100%;
-              height: 130px;
-              font-size: 16px;
-              line-height: 24px;
-              letter-spacing: 2px;
-              font-weight: 400;
-              color: rgba(93, 96, 96, 1);
-              position: absolute;
-              top: 0;
-              left: 0;
-            }
-            .lContent {
-              width: 100%;
-              height: calc(100% - 100px);
-              display: flex;
-              gap: 5px;
-              position: relative;
-              margin-top: 100px;
-              .lImgBox {
-                width: 550px;
-                height: 100%;
-                .pic {
-                  width: 100%;
-                  height: 100%;
-                  transition: all 0.3s ease-in-out;
-                  background-repeat: no-repeat;
-                  background-position: top right;
-                  background-size: contain;
-                }
-                & > img {
-                  height: 100%;
-                  object-fit: contain;
-                }
-              }
-              .lInfo {
-                padding-left: 20px;
-                padding-top: 30px;
-                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: 17px;
-                    line-height: 24px;
-                    letter-spacing: 2px;
-                    font-weight: bold;
-                    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 {
-                    font-size: 16px;
-                    line-height: 24px;
-                    letter-spacing: 2px;
-                    font-weight: 400;
-                    color: #504e40;
-                    height: fit-content;
-                    margin-top: 5px;
-                    max-height: 90px;
-                    overflow: auto;
-                    &::-webkit-scrollbar {
-                      width: 0px;
-                      height: 0px;
-                    }
-                  }
-                }
-              }
-            }
-          }
-          .right {
-            width: fit-content;
-            height: 100%;
-            display: inline-block;
-            vertical-align: top;
-            .RItems {
-              width: fit-content;
-              height: 100%;
-              display: flex;
-              align-items: center;
-              gap: 10px;
-              .item {
-                width: 500px;
-                height: 100%;
-                position: relative;
-                .pic {
-                  width: 100%;
-                  height: 100%;
-                  transition: all 0.3s ease-in-out;
-                  background-repeat: no-repeat;
-                  background-size: contain;
-                }
-              }
-            }
-          }
-        }
-
-        .detailShow {
-          .left,
-          .right {
-            opacity: 1;
-            transition: all 0.6s ease-in-out, opacity 0.3s ease-in-out;
-          }
-        }
-
-        .detailHide {
-          .left,
-          .right {
-            width: 0;
-            opacity: 0;
-            transition: all 0.6s ease-in-out;
-          }
-        }
-      }
-    }
-  }
-}
-
-.InfoCard {
-  position: absolute;
-  z-index: 2;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 350px;
-  height: 250px;
-  display: flex;
-  align-items: center;
-  :global {
-    .cardClose {
-      position: absolute;
-      z-index: 2;
-      top: 3%;
-      right: 3%;
-      width: 20px;
-      height: 20px;
-      font-weight: bold;
-      cursor: pointer;
-      & > img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-    }
-    .main {
-      padding: 10px;
-      width: 230px;
-      height: 100%;
-      border-radius: 10px;
-      background-color: rgba(255, 255, 255, 0.6);
-      backdrop-filter: blur(5px);
-      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-      font-size: 13px;
-      .time {
-        color: rgba(124, 75, 54, 1);
-      }
-      .location {
-        color: rgba(175, 135, 100, 1);
-      }
-      .Cardtext {
-        color: rgba(93, 96, 96, 1);
-      }
-      .from {
-        color: rgba(151, 151, 151, 1);
       }
     }
   }

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -3,16 +3,14 @@ import styles from './index.module.scss'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
 import iosTouch from '@/utils/iosTouch'
+import Bwzzq from './components/Bwzzq'
+import Bwzwq from './components/Bwzwq'
+import Bwwq from './components/Bwwq'
+import Bq from './components/Bq'
+import Bz from './components/Bz'
 
-type InfoCardProps = {
-  time: string
-  location: string
-  text?: string
-  from: string
-  inset?: string
-  index: number
-}
-type showLineType = {
+
+export type showLineType = {
   index: number
   isShow: boolean
 }[]
@@ -74,6 +72,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
       return
     }
     setSelectedTime(index)
+    console.log(selectedTime, 'selectedTime')
     setIsShowLine(
       myData.sinicizeData[index].imgItems.map((item, index) => ({
         index,
@@ -113,66 +112,14 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
   //   ori_touchStartX.current = e.touches[0].clientY
   // }
 
-  const InfoCard = ({ time, location, text, from, inset, index }: InfoCardProps) => {
-    return (
-      <div className={styles.InfoCard} style={{ inset: inset }}>
-        <div
-          className='cardClose'
-          onClick={() =>
-            setIsShowLine(
-              isShowLine.map(item => ({
-                ...item,
-                isShow: item.index === index + 1 ? true : item.isShow
-              }))
-            )
-          }
-        >
-          ×
-        </div>
-        <div className='dotLeft'>
-          <img src={require('@/assets/img/A6_arrow.png')} alt='' />
-        </div>
-        <div className='main'>
-          <div className='time'>{time}</div>
-          <div className='location'>{location}</div>
-          <div className='Cardtext'>{text}</div>
-          <div className='from'>{from}</div>
-        </div>
-      </div>
-    )
-  }
-
-  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
         id='A7Sinicize'
         className={styles.Sinicize}
         onWheel={handleWheel}
-        // onTouchMove={handleOriTouchMove}
-        // onTouchStart={handleTouchStart}
+      // onTouchMove={handleOriTouchMove}
+      // onTouchStart={handleTouchStart}
       >
         <div className='SinicizeScroll' ref={originRef}>
           <div ref={sinicize1Ref} className={styles.Sinicize1}>
@@ -246,106 +193,112 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
 
           <div className={styles.Sinicize2}>
             <div className='scroll'>
-              {myData.sinicizeData.map((sItem, index) => (
-                <div className='yearItem' key={index}>
-                  <div
-                    className='year'
-                    style={{ backgroundImage: `url(${sItem.bgPath})` }}
-                    onClick={() => handleYearItemClick(index)}
-                  >
-                    <div className='yearContainner'>
-                      <div className='txt songFont'>{sItem.time}</div>
-                      {/* <div className='front'>{sItem.desc}</div> */}
-                    </div>
+              {/* 北魏早中期 */}
+              <div className='yearItem' key={0}>
+                <div
+                  className='year'
+                  style={{ backgroundImage: `url(${myData.sinicizeData[0].bgPath})` }}
+                  onClick={() => handleYearItemClick(0)}
+                >
+                  <div className='yearContainner'>
+                    <div className='txt songFont'>{myData.sinicizeData[0].time}</div>
+                    {/* <div className='front'>{sItem.desc}</div> */}
                   </div>
+                </div>
+                <Bwzzq
+                  sItem={myData.sinicizeData[0]}
+                  index={0}
+                  selectedTime={selectedTime}
+                  isShowLine={isShowLine}
+                  setIsShowLine={setIsShowLine}
+                />
+              </div>
 
-                  <div
-                    id='sinicizeDetail'
-                    className={`${selectedTime === index ? 'detailShow' : 'detailHide'}`}
-                  >
-                    {/* {selectedTime === index && ( */}
-                    <>
-                      <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}
-                            alt=''
-                          /> */}
-                            <div
-                              style={{
-                                backgroundImage: `url(${
-                                  isShowLine[0]?.isShow
-                                    ? sItem.imgItems[0].srcLine
-                                    : sItem.imgItems[0].src
-                                })`
-                              }}
-                              className={`pic ${isShowLine[0]?.isShow ? 'picLine' : ''}`}
-                            />
-                            {!isShowLine[0]?.isShow ? (
-                              <InfoCard
-                                time={sItem.imgItems[0].time}
-                                location={sItem.imgItems[0].title}
-                                text={sItem.imgItems[0].txt}
-                                from={sItem.imgItems[0].title}
-                                index={0}
-                              />
-                            ) : (
-                              InfoPoint({
-                                time: sItem.imgItems[0].time,
-                                title: sItem.imgItems[0].title
-                              })
-                            )}
-                          </div>
+              {/* 北魏早晚期 */}
+              <div className='yearItem' key={1}>
+                <div
+                  className='year'
+                  style={{ backgroundImage: `url(${myData.sinicizeData[1].bgPath})` }}
+                  onClick={() => handleYearItemClick(1)}
+                >
+                  <div className='yearContainner'>
+                    <div className='txt songFont'>{myData.sinicizeData[1].time}</div>
+                    {/* <div className='front'>{sItem.desc}</div> */}
+                  </div>
+                </div>
+                <Bwzwq
+                  sItem={myData.sinicizeData[1]}
+                  index={1}
+                  selectedTime={selectedTime}
+                  isShowLine={isShowLine}
+                  setIsShowLine={setIsShowLine}
+                />
+              </div>
 
-                        </div>
-                      </div>
-                      <div className='right'>
-                        <div className='RItems'>
-                          {sItem.imgItems
-                            .filter((i, index) => index !== 0)
-                            .map((i, index2) => (
-                              <div className='item' key={index2}>
-                                {/* <div className='pic'>
-                              <img src={i.src} alt='' />
-                            </div> */}
-                                <div
-                                  style={{
-                                    backgroundImage: `url(${
-                                      isShowLine[index2 + 1]?.isShow ? i.srcLine : i.src
-                                    })`
-                                  }}
-                                  className={`pic ${
-                                    isShowLine[index2 + 1]?.isShow ? 'picLine' : ''
-                                  }`}
-                                />
-                                {!isShowLine[index2 + 1]?.isShow ? (
-                                  <InfoCard
-                                    time={i.time}
-                                    location={i.title}
-                                    text={i.txt}
-                                    from={i.title}
-                                    index={index2}
-                                  />
-                                ) : (
-                                  < InfoPoint time={i.time} title={i.title} />
-                                )}
-                              </div>
-                            ))}
-                        </div>
-                      </div>
-                    </>
-                    {/* )} */}
+              {/* 北魏晚期 */}
+              <div className='yearItem' key={2}>
+                <div
+                  className='year'
+                  style={{ backgroundImage: `url(${myData.sinicizeData[2].bgPath})` }}
+                  onClick={() => handleYearItemClick(2)}
+                >
+                  <div className='yearContainner'>
+                    <div className='txt songFont'>{myData.sinicizeData[2].time}</div>
+                    {/* <div className='front'>{sItem.desc}</div> */}
                   </div>
                 </div>
-              ))}
+                <Bwwq
+                  sItem={myData.sinicizeData[2]}
+                  index={2}
+                  selectedTime={selectedTime}
+                  isShowLine={isShowLine}
+                  setIsShowLine={setIsShowLine}
+                />
+              </div>
+
+              {/* 北齐 */}
+              <div className='yearItem' key={3}>
+                <div
+                  className='year'
+                  style={{ backgroundImage: `url(${myData.sinicizeData[3].bgPath})` }}
+                  onClick={() => handleYearItemClick(3)}
+                >
+                  <div className='yearContainner'>
+                    <div className='txt songFont'>{myData.sinicizeData[3].time}</div>
+                    {/* <div className='front'>{sItem.desc}</div> */}
+                  </div>
+                </div>
+                <Bq
+                  sItem={myData.sinicizeData[3]}
+                  index={3}
+                  selectedTime={selectedTime}
+                  isShowLine={isShowLine}
+                  setIsShowLine={setIsShowLine}
+                />
+              </div>
+
+              {/* 北周 */}
+              <div className='yearItem' key={4}>
+                <div
+                  className='year'
+                  style={{ backgroundImage: `url(${myData.sinicizeData[4].bgPath})` }}
+                  onClick={() => handleYearItemClick(4)}
+                >
+                  <div className='yearContainner'>
+                    <div className='txt songFont'>{myData.sinicizeData[4].time}</div>
+                    {/* <div className='front'>{sItem.desc}</div> */}
+                  </div>
+                </div>
+                <Bz
+                  sItem={myData.sinicizeData[4]}
+                  index={4}
+                  selectedTime={selectedTime}
+                  isShowLine={isShowLine}
+                  setIsShowLine={setIsShowLine}
+                />
+              </div>
+
+              {/* 结语 */}
               <div className='yearItem'>
                 <div className='year year-zongjie'>
                   <div className='yearContainner'>

src/types/declaration.d.ts

@@ -58,7 +58,17 @@ type MyDataType = {
     bgPath: string
     desc: string
     items: { title: string; txt: string; inset: string }[]
-    imgItems: { time: string; title: string; src: string; srcLine: string; txt: string }[]
+    imgItems: {
+      time: string
+      title: string
+      src: string
+      srcLine: string
+      txt: string
+      picfrom: string
+      direction?: string
+      classNameCard?: string
+      classNamePoint?: string
+    }[]
   }[]
   zaoxiangDataDetail: {
     type: string
@@ -120,8 +130,8 @@ type MyDataType = {
     txt: string
   }[]
   policy: {
-      title: string
-      bottomPic: string
+    title: string
+    bottomPic: string
     part1: {
       txt: string
       from: string
@@ -138,4 +148,4 @@ type MyDataType = {
       name_ac: string
     }[]
   }[]
-  }
+}