upp

code/public/myData/base.js

@@ -2,6 +2,8 @@ const baseUrl1 = 'http://192.168.20.55:8080/staticData/'
 
 const baseUrl2 = 'https://houseoss.4dkankan.com/project/daYunHeShiKe/staticData/'
 
+const isMo = window.innerWidth < 1200
+
 const myDataTemp = {
   home: [
     { name: '六朝兴替 石刻为证', sorrlNum: 2300 },

code/src/components/Ztop/index.module.scss

@@ -5,6 +5,7 @@
   left: 0;
   width: 100%;
   height: 70px;
+  background-size: 100% 100%;
 
   :global {
     .Zbimg {
@@ -18,4 +19,17 @@
       z-index: 10;
     }
   }
+}
+
+// ------移动端
+.ZtopMo {
+  height: 80px;
+
+  :global {
+    .Zbimg {
+      top: 3px;
+      right: 40px;
+      height: calc(100% - 6px);
+    }
+  }
 }

code/src/components/Ztop/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import styles from './index.module.scss'
 import { baseUrl } from '@/utils/http'
+import classNames from 'classnames'
 
 type Props = {
   backFu: () => void
@@ -8,7 +9,10 @@ type Props = {
 
 function Ztop({ backFu }: Props) {
   return (
-    <div className={styles.Ztop} style={{ backgroundImage: `url(${baseUrl}main/nav.png)` }}>
+    <div
+      className={classNames(styles.Ztop, isMo ? styles.ZtopMo : '')}
+      style={{ backgroundImage: `url(${baseUrl}main/nav.png)` }}
+    >
       <img className='Zbimg' src={`${baseUrl}main/back.png`} alt='' onClick={backFu} />
     </div>
   )

code/src/pages/A1home/index.module.scss

@@ -110,9 +110,69 @@
             }
           }
         }
+
+
       }
+
+      // .A1rowAc {
+      //   .A1rowSon {
+      //     animation: none;
+      //     top: -62px;
+      //     padding-top: 40px;
+      //     width: 100%;
+      //     height: 100%;
+      //     color: #3E2210;
+      //     font-weight: 700;
+      //     font-size: 24px;
+      //     padding-left: 30px;
+      //     left: -5%;
+
+      //     .A1rImg1 {
+      //       opacity: 0;
+      //     }
+
+      //     .A1rImg2 {
+      //       opacity: 1;
+      //     }
+      //   }
+      // }
+    }
+
+
+  }
+}
+
+// 移动端
+.A1homeMo {
+  :global {
+    .A1logo {
+      width: 300px;
     }
 
+    .A1tit {
+      // top: 60px;
+      width: 800px;
+    }
 
+    .A1shi {
+      width: 650px;
+    }
+
+    .A1right {
+      font-size: 30px;
+    }
+
+    .A1di {
+      .A1row {
+        width: 400px;
+        height: 90px;
+
+        .A1rowSon {
+          width: 280px;
+          height: 60px;
+          font-size: 26px;
+        }
+      }
+    }
   }
 }

code/src/pages/A1home/index.tsx

@@ -2,9 +2,14 @@ import React from 'react'
 import styles from './index.module.scss'
 import { baseUrl, myData } from '@/utils/http'
 import history from '@/utils/history'
+import classNames from 'classnames'
+
 function A1home() {
   return (
-    <div className={styles.A1home} style={{ backgroundImage: `url(${baseUrl}home/bg.jpg)` }}>
+    <div
+      className={classNames(styles.A1home, isMo ? styles.A1homeMo : '')}
+      style={{ backgroundImage: `url(${baseUrl}home/bg.jpg)` }}
+    >
       <img className='A1logo' src={`${baseUrl}home/logo.png`} alt='' />
       <img className='A1tit' src={`${baseUrl}home/title.png`} alt='' />
       <img className='A1shi' src={`${baseUrl}home/bs.png`} alt='' />
@@ -17,7 +22,7 @@ function A1home() {
         {myData.home.map((item, index) => (
           <div
             key={item.name}
-            className={`A1row`}
+            className={`A1row ${index === 1 ? 'A1rowAc' : ''}`}
             onClick={() => history.replace(`/main/${item.sorrlNum}`)}
           >
             <div className='A1rowSon'>

code/src/pages/A2main/index.module.scss

@@ -688,4 +688,120 @@
       }
     }
   }
+}
+
+
+// ------移动端
+.A2mainMo {
+  :global {
+    .A2y1Left {
+      width: 60px;
+      height: auto;
+    }
+
+    .A2box {
+      .A2s1 {
+        &>img {
+          width: 500px;
+
+        }
+
+        &>div {
+          font-size: 30px;
+
+          &>p {
+            &:nth-of-type(2) {
+              font-size: 32px;
+            }
+          }
+        }
+      }
+
+      .A2s12 {
+        top: -120px;
+        padding-top: 120px;
+
+        .A2s12_2 {
+          margin-top: 40px;
+          margin-bottom: 20px;
+
+          &>p {
+            font-size: 30px;
+            margin-bottom: 20px;
+          }
+        }
+
+        .A2s12_3 {
+          width: 800px;
+        }
+      }
+
+      .A2l2 {
+        &>p {
+          font-size: 30px;
+        }
+      }
+
+      .A2d2 {
+        margin-bottom: 60px;
+        font-size: 30px;
+      }
+
+      .A2y1 {
+
+        .A2y1_1 {
+          .A2y1_1Txt {
+            height: 320px;
+            font-size: 30px;
+          }
+
+          .A2y1_1Btn {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .A2x1 {
+        &>p {
+          font-size: 30px;
+          margin: 10px 0;
+        }
+      }
+
+      .A2x4 {
+        .A2x4_1 .A2x4Row {
+          width: 220px;
+          height: 60px;
+          margin-bottom: 36px;
+        }
+
+        .A2x4_2 .A2x4_2_2 .hideSorrl>p {
+          font-size: 30px;
+          margin-bottom: 15px;
+        }
+      }
+
+      .A2g3 {
+        width: 220px;
+        height: auto;
+      }
+
+      .A2e1 {
+        .A2e1_1 {
+          margin-bottom: 30px;
+        }
+
+        .A2e1_2>p {
+          font-size: 30px;
+        }
+      }
+
+      .A2logo {
+        width: 300px;
+        height: auto;
+      }
+    }
+
+    // xx
+  }
 }

code/src/pages/A2main/index.tsx

@@ -79,7 +79,10 @@ function A2main() {
   const swiperRef = useRef<any>(null)
 
   return (
-    <div className={classNames(styles.A2main, 'hideSorrl')} ref={sorrlRef}>
+    <div
+      className={classNames(styles.A2main, 'hideSorrl', isMo ? styles.A2mainMo : '')}
+      ref={sorrlRef}
+    >
       <div className='A2box' style={{ backgroundImage: `url(${baseUrl}main/bg.jpg)` }}>
         {/* ------------守望千年--------------- */}
         <div className='A2s1'>

code/src/pages/A3liuChao1/index.module.scss

@@ -45,4 +45,16 @@
       }
     }
   }
+}
+
+// ------移动端
+.A3liuChao1Mo {
+  :global {
+    .A3box .A3txt {
+      &>p {
+        font-size: 30px;
+        line-height: 40px;
+      }
+    }
+  }
 }

code/src/pages/A3liuChao1/index.tsx

@@ -11,7 +11,10 @@ type Props = {
 
 function A3liuChao1({ closeFu, id }: Props) {
   return (
-    <div id='opacityCss' className={classNames(styles.A3liuChao1, 'hideSorrl')}>
+    <div
+      id='opacityCss'
+      className={classNames(styles.A3liuChao1, 'hideSorrl', isMo ? styles.A3liuChao1Mo : '')}
+    >
       <Ztop backFu={closeFu} />
 
       <div className='A3box' style={{ backgroundImage: `url(${baseUrl}main/liuchao/bg.jpg)` }}>

code/src/pages/A3liuChao2/index.module.scss

@@ -132,4 +132,34 @@
 
     }
   }
+}
+
+// --------移动端
+.A3liuChao2Mo {
+  :global {
+    .A3box2 {
+      .A3tit2 {
+        &>div {
+          font-size: 30px;
+        }
+      }
+
+      .A3zhou2 {
+        .A3Ztxt {
+          &>p {
+            font-size: 30px;
+          }
+
+        }
+
+        .A3Zimg .A3ZimgBtn>p {
+          font-size: 30px;
+        }
+      }
+
+      .A3ZdiTxt {
+        font-size: 30px;
+      }
+    }
+  }
 }

code/src/pages/A3liuChao2/index.tsx

@@ -30,7 +30,10 @@ function A3liuChao2({ closeFu, id }: Props) {
   }, [info.imgArr])
 
   return (
-    <div id='opacityCss' className={classNames(styles.A3liuChao2, 'hideSorrl')}>
+    <div
+      id='opacityCss'
+      className={classNames(styles.A3liuChao2, 'hideSorrl', isMo ? styles.A3liuChao2Mo : '')}
+    >
       <Ztop backFu={closeFu} />
 
       <div className='A3box2' style={{ backgroundImage: `url(${baseUrl}main/liuchao/bg2.jpg)` }}>

code/src/pages/A4diao/index.module.scss

@@ -106,4 +106,23 @@
       }
     }
   }
+}
+
+// ------移动端
+.A4diaoMo {
+  :global {
+    .A4left>div {
+      font-size: 30px;
+    }
+
+    .A4right .A4row>p {
+      margin-top: 45px;
+      font-size: 30px;
+    }
+
+    .A4btn {
+      width: 60px !important;
+      height: auto !important;
+    }
+  }
 }

code/src/pages/A4diao/index.tsx

@@ -19,7 +19,7 @@ function A4diao({ closeFu, id }: Props) {
   return (
     <div
       id='opacityCss'
-      className={styles.A4diao}
+      className={classNames(styles.A4diao, isMo ? styles.A4diaoMo : '')}
       style={{ backgroundImage: `url(${baseUrl}main/diao/bg.jpg)` }}
     >
       <Ztop backFu={closeFu} />

code/src/pages/A5yiShou/index.module.scss

@@ -243,4 +243,23 @@
     }
 
   }
+}
+
+// -----移动端
+.A5yiShouMo {
+  :global {
+    .A5main {
+      .A5top3>div {
+        font-size: 30px;
+      }
+
+      .A5txt2 {
+        font-size: 30px;
+      }
+
+      .A5txt3>p {
+        font-size: 30px;
+      }
+    }
+  }
 }

code/src/pages/A5yiShou/index.tsx

@@ -19,7 +19,10 @@ function A5yiShou({ id, closeFu }: Props) {
   const [lookZhu, setLookZhu] = useState(false)
 
   return (
-    <div id='opacityCss' className={classNames(styles.A5yiShou, 'hideSorrl')}>
+    <div
+      id='opacityCss'
+      className={classNames(styles.A5yiShou, 'hideSorrl', isMo ? styles.A5yiShouMo : '')}
+    >
       <Ztop backFu={closeFu} />
 
       <div

code/src/pages/A6yiZheng/index.module.scss

@@ -127,4 +127,17 @@
       }
     }
   }
+}
+
+// -------移动端
+.A6yiZhengMo {
+  :global {
+    .A6main .A6row .A6txt>p {
+      font-size: 30px;
+    }
+
+    .A6main .A6row .A6img>p {
+      font-size: 30px;
+    }
+  }
 }

code/src/pages/A6yiZheng/index.tsx

@@ -16,7 +16,10 @@ function A6yiZheng({ id, closeFu }: Props) {
   }, [id])
 
   return (
-    <div id='opacityCss' className={classNames(styles.A6yiZheng, 'hideSorrl')}>
+    <div
+      id='opacityCss'
+      className={classNames(styles.A6yiZheng, 'hideSorrl', isMo ? styles.A6yiZhengMo : '')}
+    >
       <Ztop backFu={closeFu} />
       <div className='A6main' style={{ backgroundImage: `url(${baseUrl}main/yiZheng/bg.jpg)` }}>
         <img className='A6top1' src={`${baseUrl}main/yiZheng/txt${id}.png`} alt='' />

code/src/pages/A7duiHua/A7arr/index.module.scss

@@ -146,6 +146,7 @@
         position: absolute;
         z-index: 10;
         top: 50%;
+        transform: translateY(-50%);
         left: 380px;
         width: 38px;
         height: 67px;
@@ -166,4 +167,24 @@
 
     }
   }
+}
+
+
+// 移动端
+.A7arrMo {
+  :global {
+    .A7A3 {
+      .A2y1Left {
+        width: 60px;
+        height: auto;
+      }
+
+      .adm-swiper .A7A3IndBox .A7zRow {
+        width: 30px;
+        height: 30px;
+        border-radius: 15px;
+        margin: 0 15px;
+      }
+    }
+  }
 }

code/src/pages/A7duiHua/A7arr/index.tsx

@@ -30,7 +30,7 @@ function A7arr({ arr }: Props) {
   const swiperRef = useRef<any>(null)
 
   return (
-    <div className={styles.A7arr}>
+    <div className={classNames(styles.A7arr, isMo ? styles.A7arrMo : '')}>
       <div className='A7A1' style={{ backgroundImage: `url(${baseUrl}main/duiHua/arrBg.jpg)` }}>
         {arr.map((item, index1) => (
           <div
@@ -69,7 +69,7 @@ function A7arr({ arr }: Props) {
           {info.imgArr.map((item, index2) => (
             <Swiper.Item key={index2}>
               <div className='A7A3box'>
-                <div className='A7A3_1'>{item.name}</div>
+                <div className='A7A3_1 kaiFont'>{item.name}</div>
                 <Image
                   lazy={true}
                   src={baseUrl + item.url}

code/src/pages/A7duiHua/A7page1/index.module.scss

@@ -47,4 +47,13 @@
       }
     }
   }
+}
+
+// 移动端
+.A7page1Mo {
+  :global {
+    .A7top4>p {
+      font-size: 30px;
+    }
+  }
 }

code/src/pages/A7duiHua/A7page1/index.tsx

@@ -3,6 +3,7 @@ import styles from './index.module.scss'
 import { duiHuaPageType } from '@/types'
 import { baseUrl } from '@/utils/http'
 import A7arr from '../A7arr'
+import classNames from 'classnames'
 
 type Props = {
   info: duiHuaPageType
@@ -11,7 +12,7 @@ type Props = {
 function A7page1({ info }: Props) {
   return (
     <div
-      className={styles.A7page1}
+      className={classNames(styles.A7page1, isMo ? styles.A7page1Mo : '')}
       style={{ backgroundImage: `url(${baseUrl}main/duiHua/${info.id}bg.jpg)` }}
     >
       <img className='A7top1' src={`${baseUrl}main/duiHua/${info.id}.png`} alt='' />

code/src/types/declaration.d.ts

@@ -9,3 +9,4 @@ declare module '*.svg'
 declare const baseUrl1: string
 declare const baseUrl2: string
 declare const myDataTemp
+declare const isMo: boolean