feat1

src/pages/A0base/index.module.scss

@@ -1,4 +1,26 @@
 .A0base {
   :global {
+    .initPic {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      background: #ccc;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 30%;
+      .title {
+        height: 20%;
+        object-fit: contain;
+      }
+      .button {
+        height: 5%;
+        object-fit: contain;
+      }
+    }
   }
 }

src/pages/A0base/index.tsx

@@ -6,9 +6,13 @@ import styles from './index.module.scss'
 function A0base() {
   const [show, setShow] = useState(true)
   return (
-    <div>
+    <div className={styles.A0base}>
       {/* 初始封面 */}
-      <A1home show={show} setShow={setShow} />
+      <A1home />
+      <div className='initPic' style={{ display: show ? 'flex' : 'none' }}>
+        <img className='title' src={require('../../assets/img/title.png')} alt='' />
+        <img className='button' onClick={() => setShow(false)} src={require('../../assets/img/button.png')} alt='' />
+      </div>
     </div>
   )
 }

src/pages/A1home/components/TabBar/index.module.scss

@@ -2,7 +2,7 @@
   position: fixed;
   top: 4%;
   right: 4%;
-  width: 40%;
+  width: 34%;
   height: 50px;
   :global {
     .tabBarBox {
@@ -12,21 +12,27 @@
       align-items: center;
       gap: 3%;
       .tabItem {
-        width: 30%;
+        text-align: center;
+        width: 33%;
         font-size: 18px;
         font-weight: 500;
         color: #fff;
         cursor: pointer;
       }
     }
-    .underline {
+    .underlineBox {
       position: absolute;
       bottom: 0;
       left: 0;
-      width: 25%;
+      width: 31%;
       height: 4px;
-      background-color: #fff;
       transition: transform 0.3s ease-in-out;
+      .underline {
+        width: 80%;
+        height: 100%;
+        margin: 0 auto;
+        background-color: #fff;
+      }
     }
   }
 }

src/pages/A1home/components/TabBar/index.tsx

@@ -1,21 +1,32 @@
-
 import style from './index.module.scss'
 
-const TabBar = ({ activeIndex, goTo }: { activeIndex: number; goTo: (index: number) => void }) => {
+const TabBar = ({
+  activeIndex,
+  goTo
+}: {
+  activeIndex: number
+  goTo: (index: number) => void
+}) => {
   return (
-    <div className={style.tabBar}><div className='tabBarBox'>
-      <div className='tabItem' onClick={() => goTo(0)}>
-        湖北古代文明
-      </div>
-      <div className='tabItem' onClick={() => goTo(1)}>
-        湖北近代风云
-      </div>
-      <div className='tabItem' onClick={() => goTo(2)}>
-        湖北现当代英杰
+    <div className={style.tabBar}>
+      <div className='tabBarBox'>
+        <div className='tabItem' onClick={() => goTo(0)}>
+          湖北古代文明
+        </div>
+        <div className='tabItem' onClick={() => goTo(1)}>
+          湖北近代风云
+        </div>
+        <div className='tabItem' onClick={() => goTo(2)}>
+          湖北现当代英杰
+        </div>
       </div>
+      <div className='underlineBox' style={{ transform: `translateX(${activeIndex * 111}%)` }}>
+        <div
+          className='underline'
 
-    </div><div className="underline" style={{ transform: `translateX(${activeIndex * 132}%)` }}></div></div>
+        /></div>
+    </div>
   )
 }
 
-export default TabBar
+export default TabBar

src/pages/A1home/index.tsx

@@ -8,7 +8,7 @@ import Slider from 'react-slick'
 import FlipPic from './components/flipPic'
 import isMobile from '@/utils/isMobile'
 
-function A1home({ show, setShow }: { show: boolean; setShow: (show: boolean) => void }) {
+function A1home() {
   const history = useHistory()
   const sliderRef = useRef<Slider>(null)
   const [activeIndex, setActiveIndex] = useState<number>(0)
@@ -83,7 +83,7 @@ function A1home({ show, setShow }: { show: boolean; setShow: (show: boolean) =>
     }
   ]
   return (
-    <div className={styles.A1home} style={{ display: show ? 'flex' : 'none' }}>
+    <div className={styles.A1home}>
       <Background activeIndex={activeIndex} />
       <VerticalBanner
         ref={sliderRef}