Przeglądaj źródła

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

shaogen1995 1 miesiąc temu
rodzic
commit
00022b7f69

BIN
public/myData/img/A6_sangzang_tab1.png


BIN
public/myData/img/A6_sangzang_tab2.png


Plik diff jest za duży
+ 83 - 0
public/myData/myData.js


BIN
src/assets/img/A6_sangzang_geshi1.png


BIN
src/assets/img/A6_sangzang_geshi2.png


BIN
src/assets/img/A6_sangzang_geshi3.png


BIN
src/assets/img/A6_sangzang_hidContent.png


BIN
src/assets/img/A6_sangzang_hidContent_r.png


BIN
src/assets/img/A6_sangzang_hidding_left.png


BIN
src/assets/img/A6_sangzang_left_tab0.png


src/assets/img/A6_sangzang_tab0.png → src/assets/img/A6_sangzang_left_tab1.png


BIN
src/assets/img/A6_sangzang_left_tab2.png


BIN
src/assets/img/A6_sangzang_left_tab3.png


BIN
src/assets/img/A6_sangzang_left_tab4.png


BIN
src/assets/img/A6_sangzang_tab2.png


BIN
src/assets/img/A6_sangzang_yp.png


BIN
src/assets/img/A6_sangzang_yp2.png


BIN
src/assets/img/A6_sangzang_zoomin.png


+ 3 - 10
src/pages/A5wenwu/index.tsx

@@ -15,20 +15,16 @@ function A5wenwu() {
   const [gestureState1, setGestureState1] = useState('')
 
   useEffect(() => {
+    callIframeFu('showHotspot', -1)
     setTimeout(() => {
       setGestureState1('state1')
       setTimeout(() => {
         setGestureState1('')
-      }, 2000)
+        setIsShowGesture(false)
+      }, 3000)
     }, 500)
   }, [])
 
-  // useEffect(() => {
-  //   setIsShowGesture(true)
-  //   setTimeout(() => {
-  //     setIsShowGesture(false)
-  //   }, 2000)
-  // }, [])
 
   useEffect(() => {
     if (currentTab !== 'tab1') callIframeFu('hideSize', undefined)
@@ -78,9 +74,6 @@ function A5wenwu() {
     }
   }
 
-  window.hideGesture = () => {
-    setIsShowGesture(false)
-  }
   return (
     <div className={classNames(styles.A5wenwu, isPc ? '' : styles.A5wenwuMo)}>
       <div className='back' onClick={gotoBack}>

+ 383 - 47
src/pages/A6ybwx/Sangzang/index.module.scss

@@ -27,18 +27,26 @@
         background: url('../../../assets/img/A6_sangzang_hidContent.png') no-repeat center center;
         background-size: 100% 100%;
         position: absolute;
+        z-index: 1;
         top: 50%;
         left: 0;
         transform: translate(-88%, -50%);
         display: flex;
         align-items: center;
+        justify-content: flex-end;
         transition: all 0.6s ease-in-out;
         .lHidding_left {
-          width: calc(100% - 300px);
+          position: absolute;
+          left: 0;
+          transform: translateX(-239px);
+          width: 525px;
           height: 100%;
           display: flex;
           align-items: center;
-
+          background: url('../../../assets/img/A6_sangzang_hidding_left.png') no-repeat center
+            center;
+          background-size: 100% 100%;
+          transition: all 0.6s ease-in-out;
           .detail_info1 {
             width: 300px;
             height: 100%;
@@ -55,7 +63,7 @@
               .pic {
                 width: 100%;
                 height: 100%;
-                background: url('../../../assets/img/A6_sangzang_tab1.png') no-repeat center center;
+                background: url('../../../assets/img/A6_sangzang_yp.png') no-repeat center center;
                 background-size: contain;
               }
             }
@@ -87,7 +95,7 @@
             }
           }
           .detail_info2 {
-            width: calc(100% - 300px);
+            width: calc(100% - 330px);
             height: 74%;
             display: flex;
             flex-direction: column;
@@ -129,34 +137,16 @@
         .lHidding_right {
           width: 300px;
           height: 100%;
+          padding-right: 20px;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           gap: 10px;
-          transition: all 0.6s ease-in-out;
-          .open {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: -6%;
-            width: 50px;
-            height: 50px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            transition: all 0.3s ease-in-out;
+          transition: all 0.3s ease-in-out;
+          opacity: 0;
+          pointer-events: none;
 
-            .openPic {
-              background: url('../../../assets/img/A6_sangzang_hidRight.png') no-repeat center
-                center;
-              background-size: 100% 100%;
-              height: 100%;
-              width: 100%;
-              object-fit: contain;
-              animation: opacityChange 3s infinite ease-in-out;
-            }
-          }
           .imgBox {
             position: relative;
             width: 75%;
@@ -164,14 +154,12 @@
             .pic {
               width: 100%;
               height: 100%;
-              background: url('../../../assets/img/A6_sangzang_tab1.png') no-repeat center center;
+              background: url('../../../assets/img/A6_sangzang_yp2.png') no-repeat center center;
               background-size: contain;
             }
             .zoomIn {
               width: 30px;
               height: 30px;
-              background-color: rgba(175, 135, 100, 0.6);
-              border-radius: 50%;
               position: absolute;
               bottom: -1%;
               right: 2%;
@@ -213,6 +201,27 @@
             color: rgba(175, 135, 100, 1);
           }
         }
+        .open {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          right: -6%;
+          width: 50px;
+          height: 50px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          transition: all 0.3s ease-in-out;
+
+          .openPic {
+            background: url('../../../assets/img/A6_sangzang_hidRight.png') no-repeat center center;
+            background-size: 100% 100%;
+            height: 100%;
+            width: 100%;
+            object-fit: contain;
+            animation: opacityChange 3s infinite ease-in-out;
+          }
+        }
       }
       .left {
         width: 250px;
@@ -221,11 +230,50 @@
         align-items: center;
         justify-content: flex-end;
         transition: all 0.3s ease-in-out;
+        position: relative;
         .pic {
-          width: 76%;
+          width: 84%;
           height: 90%;
-          background: url('../../../assets/img/A6_sangzang_tab0.png') no-repeat center center;
           background-size: contain;
+          transition: all 0.3s ease-in-out;
+        }
+        .operate {
+          opacity: 0;
+          pointer-events: none;
+          padding-top: 45px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 100%;
+          height: 90%;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          text-align: center;
+          gap: 6px;
+          padding-bottom: 50px;
+          font-size: 22px;
+          color: rgba(255, 233, 182, 1);
+          cursor: pointer;
+          .beiwen1 {
+            width: 25%;
+            height: 100%;
+            line-height: 47px;
+            writing-mode: vertical-rl;
+          }
+          .beiwen2 {
+            width: 18%;
+            height: 100%;
+            line-height: 37px;
+            writing-mode: vertical-rl;
+          }
+          .beiwen3 {
+            width: 37%;
+            height: 100%;
+            line-height: 110px;
+            writing-mode: vertical-rl;
+          }
         }
       }
       .right {
@@ -294,20 +342,28 @@
       justify-content: flex-end;
       gap: 0;
       .lHidding {
-        width: 98%;
-        transform: translate(-2%, -50%);
-        background: url('../../../assets/img/A6_sangzang_hidContent_l.png') no-repeat center center;
-        background-size: 100% 100%;
-        .lHidding_right {
-          .open {
-            right: -2%;
-            .openPic {
-              background: url('../../../assets/img/A6_sangzang_hidLeft.png') no-repeat center center;
-              background-size: 100% 100%;
-            }
+        width: 66%;
+        transform: translate(-3%, -50%);
+        .lHidding_left {
+          transform: translateX(0);
+        }
+        .open {
+          right: -2%;
+          .openPic {
+            background: url('../../../assets/img/A6_sangzang_hidLeft.png') no-repeat center center;
+            background-size: 100% 100%;
           }
         }
       }
+      .showRight {
+        width: 97%;
+
+        .lHidding_right {
+          transition: all 0.3s ease-in-out 0.3s;
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
       .left {
         .pic {
           width: 100%;
@@ -331,15 +387,19 @@
       .lHidding {
         width: 330px;
         transform: translate(-7%, -50%);
+        background: url('../../../assets/img/A6_sangzang_hidContent_r.png') no-repeat center center;
+        background-size: 100% 100%;
         .lHidding_left {
           display: none;
         }
         .lHidding_right {
           width: 330px;
-          .open {
-            opacity: 0;
-            pointer-events: none;
-          }
+          opacity: 1;
+          pointer-events: auto;
+        }
+        .open {
+          opacity: 0;
+          pointer-events: none;
         }
       }
       .left {
@@ -357,11 +417,97 @@
         }
       }
     }
+
+    .mainShow_tab1 {
+      .lHidding {
+        .lHidding_right {
+          .imgBox {
+            .pic {
+              background: url('../../../assets/img/A6_sangzang_tab1.png') no-repeat center center;
+              background-size: 100% 100%;
+            }
+          }
+        }
+      }
+
+      .left {
+        .operate {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+    }
+
+    .mainShow_tab2 {
+      padding-left: 140px;
+      .lHidding {
+        .lHidding_right {
+          .imgBox {
+            .pic {
+              background: url('../../../assets/img/A6_sangzang_tab2.png') no-repeat center center;
+              background-size: 100% 100%;
+            }
+          }
+        }
+      }
+
+      .left {
+        width: 300px;
+        .pic {
+          right: 17%;
+          top: 3%;
+          transform: scale(1.4);
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background-position: center top;
+          background-size: cover;
+        }
+      }
+    }
+
+    .mainShow_tab3,
+    .mainShow_tab4 {
+      .lHidding {
+        transform: translate(-88%, -50%);
+        .lHidding_right {
+          width: 330px;
+        }
+      }
+      .left {
+        width: 300px;
+        .pic {
+          right: 27%;
+          top: 3%;
+          transform: scale(1.6);
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background-position: center top;
+          background-size: cover;
+        }
+      }
+      .right {
+        width: 50%;
+        .content {
+          width: 75%;
+        }
+      }
+    }
+
+    .mainShow_tab4 {
+      .left {
+        .pic {
+          top: 37%;
+        }
+      }
+    }
+
     .back {
       width: 80px;
       height: 40px;
       position: absolute;
-      z-index: 3;
+      z-index: 1;
       top: 3%;
       left: 4%;
       cursor: pointer;
@@ -414,5 +560,195 @@
       pointer-events: none;
       transition: all 0.3s ease-in-out;
     }
+
+    .geshi {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 1;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: url('../../../assets/img/A6_sangzang_bg.png') no-repeat center center;
+      background-size: 100% 100%;
+      display: flex;
+      padding: 0 20px;
+      align-items: center;
+      transition: all 0.3s ease-in-out;
+      .geshi_left {
+        width: 45%;
+        height: 100%;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        .pic {
+          width: 80%;
+          height: 95%;
+          background-size: contain;
+        }
+      }
+      .geshi_right {
+        width: 55%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        .top {
+          width: 100%;
+          height: 90px;
+          display: flex;
+          align-items: center;
+          gap: 80px;
+          .tab0,
+          .tab1,
+          .tab2 {
+            width: fit-content;
+            min-width: 70px;
+            height: 90px;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            gap: 6px;
+            cursor: pointer;
+            position: relative;
+
+            & > img {
+              width: 60px;
+              object-fit: cover;
+            }
+
+            .tabNub {
+              transition: all 0.3s ease-in-out;
+              font-size: 18px;
+              position: absolute;
+              top: 34%;
+              left: 50%;
+              transform: translate(-55%, -68%);
+              color: rgba(255, 233, 182, 0.6);
+            }
+
+            .tabNubAc {
+              color: rgba(255, 233, 182, 1);
+            }
+
+            .txt {
+              font-size: 16px;
+              line-height: 15px;
+              text-align: center;
+              font-weight: lighter;
+              color: rgba(255, 255, 255, 1);
+              width: 200%;
+              font-weight: 700;
+            }
+            .txtAc {
+              opacity: 0.4;
+            }
+          }
+        }
+        .content {
+          width: 95%;
+          height: 68%;
+          font-size: 16px;
+          line-height: 24px;
+          letter-spacing: 2px;
+          font-weight: 400;
+          color: rgba(69, 68, 55, 1);
+          overflow: auto;
+          &::-webkit-scrollbar {
+            width: 0px;
+            height: 0px;
+          }
+        }
+      }
+    }
+    .geshiHide {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .mzwHot {
+      opacity: 0;
+      pointer-events: none;
+      transition: all 0.3s ease-in-out;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 1;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: rgba(0, 0, 0, 0.7);
+      backdrop-filter: blur(3px);
+      display: flex;
+      padding: 6px 20px;
+      align-items: center;
+      gap: 10px;
+      .mzwHotL {
+        width: 37%;
+        height: 100%;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .mPic {
+          padding: 6px 10px;
+          width: 90%;
+          height: 98%;
+          background: url(../../../assets/img/A6_sangzang_tab1.png) no-repeat center center;
+          background-size: 100% 100%;
+        }
+      }
+      .mzwHotR {
+        padding-top: 10px;
+        width: 60%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        .mtitle,
+        .mtext {
+          font-size: 16px;
+          line-height: 24px;
+          letter-spacing: 2px;
+          font-weight: 400;
+          color: rgba(255, 233, 182, 1);
+        }
+        .mtitle {
+          padding: 20px 0;
+          font-size: 20px;
+          width: 100%;
+          height: 50px;
+        }
+        .mtext {
+          width: 100%;
+          height: fit-content;
+          max-height: 80%;
+          color: rgba(255, 255, 255, 1);
+          overflow: auto;
+          &::-webkit-scrollbar {
+            width: 0px;
+            height: 0px;
+          }
+        }
+      }
+      .mzwclose {
+        width: 70px;
+        height: 50px;
+        position: absolute;
+        top: 14px;
+        right: 63px;
+        & > img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+        cursor: pointer;
+      }
+    }
+
+    .mzwHot_show {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 }

+ 104 - 49
src/pages/A6ybwx/Sangzang/index.tsx

@@ -1,28 +1,39 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import styles from './index.module.scss'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
-import { Toast } from 'antd-mobile'
+
+
 function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
   const [currentTab, setCurrentTab] = useState('tab0')
   const [isShowTabBar, setIsShowTabBar] = useState(true)
   const [isShowHidContent, setIsShowHidContent] = useState(false)
+  const [isShowHidContentRight, setIsShowHidContentRight] = useState(false)
+  const [isShowMzwHot, setIsShowMzwHot] = useState(false)
+  const [selectedGeshi, setSelectedGeshi] = useState(0)
   const { myData } = useSelector((state: RootState) => state.A0Layout)
 
-  useEffect(() => {
-    Toast.show({
-      content: '开发中',
-      duration: 1000
-    })
-  }, [currentTab])
+  const picRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    if (isShowHidContent) {
+    if (isShowHidContent || isShowMzwHot) {
       setIsShowTabBar(false)
     } else {
       setIsShowTabBar(true)
     }
-  }, [isShowHidContent])
+  }, [isShowHidContent, isShowMzwHot])
+
+  useEffect(() => {
+    if (selectedGeshi !== 0) {
+      setIsShowTabBar(false)
+    }
+    else {
+      setIsShowTabBar(true)
+    }
+
+  }, [selectedGeshi])
+
+
 
   const handleTabClick = (tab: string) => {
     if (tab === currentTab) {
@@ -32,6 +43,8 @@ function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
     setCurrentTab(tab)
   }
 
+  console.log(currentTab)
+
   return (
     <div className={styles.sang}>
       <div className='back' onClick={() => setGotoTab(0)}>
@@ -41,67 +54,59 @@ function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
         className={`main ${isShowHidContent ? 'mainAc' : currentTab === 'tab0' ? '' : 'mainShow_' + currentTab
           }`}
       >
-        <div className='lHidding'>
+        <div className={`lHidding ${isShowHidContentRight ? 'showRight' : ''}`}>
           <div className='lHidding_left'>
             <div className='detail_info1'>
               <div className='imgBox'>
-                <div className='pic' />
+                <div className='pic' ref={picRef} />
               </div>
-              <div className='txt'>
-                图片来源
-                <br />
-                《文物》1963年第6期P50
+              <div className='txt' dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[0].from }} >
               </div>
-              <div className='title'>柳子辉墓志铭</div>
-              <div className='time'>北齐天保七年(556年)</div>
+              <div className='title'>{myData.sangzangLeftInfo2[0].name}</div>
+              <div className='time'>{myData.sangzangLeftInfo2[0].txt}</div>
             </div>
-            <div className='detail_info2'>
-              <div className='title_info2'>柳子辉墓志铭</div>
-              <div className='txt_info2'>北齐天保七年(556年)</div>
+            <div className='detail_info2' onClick={() => setIsShowHidContentRight(!isShowHidContentRight)}>
+              <div className='title_info2'>{myData.sangzangStatic.leftInfoName}</div>
+              <div className='txt_info2'>{myData.sangzangStatic.txt}</div>
             </div>
           </div>
           <div className='lHidding_right'>
-            <div
-              className='open'
-              onClick={e => {
-                e.stopPropagation()
-                setIsShowHidContent(!isShowHidContent)
-              }}
-            >
-              {' '}
-              <div className='openPic' />{' '}
-            </div>
-            <div className='imgBox'>
+            <div className='imgBox' onClick={() => setIsShowMzwHot(true)}>
               <div className='pic' />
               <div className='zoomIn'>
-                <img src={require('@/assets/img/A5_zoomin.png')} alt='' />
+                <img src={require('@/assets/img/A6_sangzang_zoomin.png')} alt='' />
               </div>
             </div>
-            <div className='txt'>
-              图片来源
-              <br />
-              《文物》1963年第6期P50
+            <div className='txt' dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[1].from }} >
             </div>
-            <div className='title'>柳子辉墓志铭</div>
-            <div className='time'>北齐天保七年(556年)</div>
+            <div className='title'>{myData.sangzangLeftInfo2[1].name}</div>
+            <div className='time'>{myData.sangzangLeftInfo2[1].txt}</div>
+          </div>
+          <div
+            className='open'
+            onClick={e => {
+              e.stopPropagation()
+              setIsShowHidContent(!isShowHidContent)
+              setIsShowHidContentRight(false)
+            }}
+          >
+            <div className='openPic' />{' '}
           </div>
         </div>
         <div className='left'>
-          <div className='pic' />
+          <div className='pic' style={{
+            background: `url(${require(`@/assets/img/A6_sangzang_left_${currentTab}.png`)}) no-repeat center/contain`
+          }} />
           <div className='operate'>
-            <div className='beiwen1'>程氏颂文</div>
-            <div className='beiwen1'>程哲生卒</div>
-            <div className='beiwen1'>先祖功绩</div>
+            <div className='beiwen1' onClick={() => setSelectedGeshi(1)}>程氏颂文</div>
+            <div className='beiwen2' onClick={() => setSelectedGeshi(2)}>程哲生卒</div>
+            <div className='beiwen3' onClick={() => setSelectedGeshi(3)}>先祖功绩</div>
           </div>
         </div>
         <div className='right'>
           <div className={`content`}>
-            <div className='title myFont'>程哲碑丧葬因素</div>
-            <div className='text'>
-              程哲碑,其以佛像为主题的造像风格与传统造像碑无二,但传统造像碑通常以发愿文为核心,内容多为祈福禳灾、超度亡灵或祈求功德,不强调墓主生平与家族世系。
-              <br />
-              程哲碑则强调墓主生平与家族世系,其文字更多是丧葬语境下的内容,其行文与墓志铭密切相关。
-            </div>
+            <div className='title myFont'>{myData.sangzangStatic.rightInfoName}</div>
+            <div className='text' dangerouslySetInnerHTML={{ __html: myData.sangzangData[Number(currentTab.split('tab')[1])].txt }} />
           </div>
         </div>
       </div>
@@ -139,6 +144,56 @@ function Sang({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
           过程
         </div>
       </div>
+
+      {/* 墓志铭格式-detail */}
+      <div className={`geshi ${selectedGeshi === 0 ? 'geshiHide' : ''}`}>
+        <div className='back' onClick={() => setSelectedGeshi(0)}>
+          <img src={require('@/assets/img/btn_back.png')} alt='' />
+        </div>
+        <div className="geshi_left">
+          <div className="pic" style={{
+            background: `url(${require(`@/assets/img/A6_sangzang_geshi${selectedGeshi === 0 ? '1' : selectedGeshi}.png`)}) no-repeat center/contain`
+          }} />
+        </div>
+        <div className="geshi_right">
+          <div className="top">
+            {myData.mzgeshi.map((item, index) => (
+              <div key={item.key} className={`tab${index}`} onClick={(e) => {
+                e.stopPropagation()
+                setSelectedGeshi(item.key)
+              }}>
+                <img
+                  src={require(`@/assets/img/btn_ModalTxt_bg${selectedGeshi === item.key ? '_ac' : ''
+                    }.png`)}
+                  alt=''
+                />
+                <div className={`tabNub ${selectedGeshi === item.key ? 'tabNubAc' : ''}`}>
+                  {item.sonTxt}
+                </div>
+                <div
+                  className={`txt ${selectedGeshi !== item.key ? 'txtAc' : ''}`}
+
+                >
+                  {item.name}
+                </div>
+              </div>
+            ))}
+
+          </div>
+          <div className="content" dangerouslySetInnerHTML={{ __html: selectedGeshi !== 0 ? myData.mzgeshi[selectedGeshi - 1].txt : '' }}></div>
+        </div>
+      </div>
+
+      <div className={`mzwHot ${isShowMzwHot ? 'mzwHot_show' : ''}`} >
+        <div className="mzwHotL"><div className="mPic" style={{
+          background: `url(${require(`@/assets/img/A6_sangzang_${(currentTab !== 'tab1' && currentTab !== 'tab2') ? 'tab1' : currentTab}.png`)}) no-repeat center/contain`
+        }}></div></div>
+        <div className="mzwHotR">
+          <div className="mtitle">{myData.mzw[(currentTab !== 'tab1' && currentTab !== 'tab2') ? 0 : Number(currentTab.split('tab')[1]) - 1].title}</div>
+          <div className="mtext" dangerouslySetInnerHTML={{ __html: myData.mzw[(currentTab !== 'tab1' && currentTab !== 'tab2') ? 0 : Number(currentTab.split('tab')[1]) - 1].txt }}></div>
+        </div>
+        <div className="mzwclose" onClick={() => setIsShowMzwHot(false)}><img src={require('@/assets/img/closeWithTxt.png')} alt="" /></div>
+      </div>
     </div>
   )
 }

+ 36 - 2
src/types/declaration.d.ts

@@ -20,7 +20,7 @@ declare const apiUrlTemp: string
 // 微信浏览器--视频转画布
 declare const F_Video: any
 
- type MyDataType = {
+type MyDataType = {
   isLdong: boolean
   baseInfo: { title: string; text: string; path: string }[]
   introInfo: { title: string; text: string }[]
@@ -52,7 +52,7 @@ declare const F_Video: any
   // 未解之思
   weijie: string
   // 造像中国化
-  sinicizeDataStatic: { desc: string ,zongjie:{title:string,txt:string} }
+  sinicizeDataStatic: { desc: string; zongjie: { title: string; txt: string } }
   sinicizeData: {
     time: string
     bgPath: string
@@ -80,4 +80,38 @@ declare const F_Video: any
     position: { x: number; y: number }
     text: { title: string; content: string }[]
   }[]
+
+  // 丧葬因素
+  sangzangData: {
+    txt: string
+  }[]
+  sangzangStatic: {
+    rightInfoName: string
+    leftInfoName: string
+    txt: string
+  }
+  sangzangLeftInfo: {
+    pic: string
+    from: string
+    name: string
+    time: string
+    mzw: string
+  }[]
+  sangzangLeftInfo2: {
+    src: string
+    from: string
+    name: string
+    time: string
+    txt: string
+  }[]
+  mzgeshi: {
+    key: number
+    name: string
+    sonTxt: string
+    txt: string
+  }[]
+  mzw: {
+    title: string
+    txt: string
+  }[]
 }