up

src/pages/A2yblm/components/ModalTxt/data.ts

@@ -0,0 +1,5 @@
+export const modalTxtTab = [
+  { key: 1, name: '造碑人与碑主', sonTxt: '壹' },
+  { key: 2, name: '程哲生平与家族世系', sonTxt: '贰' },
+  { key: 3, name: '颂文', sonTxt: '叄' }
+]

src/pages/A2yblm/components/ModalTxt/index.module.scss

@@ -19,12 +19,13 @@
       gap: 10px;
 
       .topBar {
-        width: 100%;
+        padding-left: 20px;
+        width: 90%;
         height: 70px;
         display: flex;
         align-items: center;
         justify-content: space-around;
-        padding-right: 80px;
+        padding-right: 60px;
         position: relative;
         gap: 10px;
         margin-top: 10px;
@@ -72,13 +73,12 @@
           }
 
           .tabNub {
-            font-size: 10px;
-            line-height: 45px;
+            font-size: 18px;
             position: absolute;
-            top: 50%;
+            top: 34%;
             left: 50%;
-            transform: translate(-50%, -53%);
-            color: rgba(94, 52, 34, 1);
+            transform: translate(-55%, -50%);
+             color: rgba(255, 233, 182, 0.6);
           }
 
           .tabNubAc {
@@ -220,8 +220,8 @@
           letter-spacing: 2px;
           color: #504e40;
 
-          & > p {
-          }
+          // & > p {
+          // }
         }
       }
     }

src/pages/A2yblm/components/ModalTxt/index.tsx

@@ -5,19 +5,16 @@ import { isPc, myData } from '@/utils/http'
 import { Tooltip } from 'antd'
 import { callIframeFu, isMobiileFu } from '@/utils/history'
 import classNames from 'classnames'
-
-
-
+import { modalTxtTab } from './data'
 
 function ModalTxt({
   setIsShowTabBar,
   setIsShowMzmTitle,
-  setBottomTxt,
+  setBottomTxt
 }: {
   setIsShowTabBar: (isShowTabBar: boolean) => void
   setIsShowMzmTitle: (isShowMzmTitle: boolean) => void
-  setBottomTxt:(val:string)=>void
-
+  setBottomTxt: (val: string) => void
 }) {
   const [selectedTab, setSelectedTab] = useState(0)
   const selectedTabRef = useRef(0)
@@ -214,8 +211,7 @@ function ModalTxt({
     callIframeFu('showInscription', 0)
   }
 
-  const handleTabClick = (tabIndex: number,txt:string) => {
-
+  const handleTabClick = (tabIndex: number, txt: string) => {
     setBottomTxt(txt)
 
     let index = tabIndex
@@ -224,8 +220,7 @@ function ModalTxt({
     setSelectedTab(index)
     callIframeFu('showInscription', index === 0 ? -1 : index)
 
-    if(index===0) setIsShowMzmTitle(false)
-
+    if (index === 0) setIsShowMzmTitle(false)
   }
 
   return (
@@ -238,45 +233,28 @@ function ModalTxt({
               碑额
             </div>
           </div>
-          <div className='tab ' onClick={() => handleTabClick(1,'造碑人与碑主')}>
-            <img
-              src={require(`@/assets/img/btn_ModalTxt_bg${selectedTab === 1 ? '_ac' : ''}.png`)}
-              alt=''
-            />
-            <div className={`tabNub ${selectedTab === 1 ? 'tabNubAc' : ''}`}></div>
-            <div
-              className='txt'
-              style={{ display: selectedTab === 1 || selectedTab === 0 ? 'block' : 'none' }}
-            >
-              造碑人与碑主
-            </div>
-          </div>
-          <div className='tab ' onClick={() => handleTabClick(2,'程哲生平与家族世系')}>
-            <img
-              src={require(`@/assets/img/btn_ModalTxt_bg${selectedTab === 2 ? '_ac' : ''}.png`)}
-              alt=''
-            />
-            <div className={`tabNub ${selectedTab === 2 ? 'tabNubAc' : ''}`}></div>
-            <div
-              className='txt'
-              style={{ display: selectedTab === 2 || selectedTab === 0 ? 'block' : 'none' }}
-            >
-              程哲生平与家族世系
-            </div>
-          </div>
-          <div className='tab ' onClick={() => handleTabClick(3,'颂文')}>
-            <img
-              src={require(`@/assets/img/btn_ModalTxt_bg${selectedTab === 3 ? '_ac' : ''}.png`)}
-              alt=''
-            />
-            <div className={`tabNub ${selectedTab === 3 ? 'tabNubAc' : ''}`}></div>
-            <div
-              className='txt'
-              style={{ display: selectedTab === 3 || selectedTab === 0 ? 'block' : 'none' }}
-            >
-              颂文
+
+          {modalTxtTab.map(item => (
+            <div key={item.key} className='tab' onClick={() => handleTabClick(item.key, item.name)}>
+              <img
+                src={require(`@/assets/img/btn_ModalTxt_bg${
+                  selectedTab === item.key ? '_ac' : ''
+                }.png`)}
+                alt=''
+              />
+              <div className={`tabNub ${selectedTab === item.key ? 'tabNubAc' : ''}`}>
+                {item.sonTxt}
+              </div>
+              <div
+                className='txt'
+                style={{ opacity: selectedTab === item.key || selectedTab === 0 ? '1' : '0' }}
+              >
+                {item.name}
+              </div>
             </div>
-          </div>
+          ))}
+
+  
         </div>
 
         <div