upp

src/components/MenuSider/index.module.scss

@@ -70,8 +70,9 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        gap: 20px;
+        gap: 10px;
         position: relative;
+        padding-top: 15px;
 
         .tab {
           text-align: center;
@@ -117,7 +118,7 @@
           height: 60px;
           display: flex;
           align-items: center;
-          justify-content: center;
+          justify-content: space-between;
           gap: 10px;
 
           &>div {
@@ -165,12 +166,14 @@
         }
 
         .icon {
-          width: 100%;
-          &>div{
-            img{
+          width: 65%;
+
+          &>div {
+            img {
               width: 34px;
             }
-            .txt{
+
+            .txt {
               font-size: 12px;
             }
           }

src/components/MenuSider/index.tsx

@@ -75,10 +75,10 @@ function MenuSider({ activeTab }: { activeTab: number }) {
                 <img src={require('@/assets/img/icon_knowledge.png')} alt='' />
                 <div className='txt'>知识图谱</div>
               </div>
-              <div className='poster'>
+              {/* <div className='poster'>
                 <img src={require('@/assets/img/icon_poster.png')} alt='' />
                 <div className='txt'>分享海报</div>
-              </div>
+              </div> */}
             </div>
           </div>
         </div>

src/pages/A5wenwu/index.module.scss

@@ -2,6 +2,7 @@
   width: 100%;
   height: 100%;
   position: relative;
+
   :global {
     .back {
       width: 60px;
@@ -11,7 +12,8 @@
       top: 3%;
       left: 4%;
       cursor: pointer;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
@@ -29,10 +31,12 @@
       align-items: center;
       justify-content: center;
       flex-direction: column;
-      & > img {
+
+      &>img {
         width: 100%;
         object-fit: contain;
       }
+
       .txt {
         width: 100%;
         height: 17px;
@@ -65,10 +69,12 @@
         width: 40px;
         height: 55px;
         cursor: pointer;
-        & > img {
+
+        &>img {
           width: 100%;
           object-fit: contain;
         }
+
         .txt {
           width: 100%;
           height: 17px;
@@ -102,10 +108,12 @@
         width: 25px;
         height: 55px;
         cursor: pointer;
-        & > img {
+
+        &>img {
           width: 100%;
           object-fit: contain;
         }
+
         .txt {
           width: 100%;
           height: 17px;
@@ -120,3 +128,58 @@
     }
   }
 }
+
+
+// ---------移动端
+.A5wenwuMo {
+  :global {
+    .back {
+      width: 80px;
+      height: 40px;
+
+      img {
+        object-fit: fill !important;
+      }
+    }
+
+    .A5_tabBar {
+      top: 46%;
+
+      .tab {
+        width: 60px;
+        height: 60px;
+        margin: 7px 0;
+
+        .txt {
+          margin-top: 4px;
+          font-size: 14px;
+        }
+      }
+    }
+
+
+    .gesture {
+      left: 46%;
+      width: 140px;
+      height: 120px;
+
+      .txt {
+        font-size: 16px;
+      }
+    }
+
+    .A5_tabBarR {
+      top: 46%;
+
+      .tab {
+        width: 45px;
+        height: 65px;
+        margin: 8px 0;
+
+        .txt {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}

src/pages/A5wenwu/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import { backPageFu, callIframeFu } from '@/utils/history'
 import classNames from 'classnames'
+import { isPc } from '@/utils/http'
 
 function A5wenwu() {
   const [currentTab, setCurrentTab] = useState('tab0')
@@ -24,13 +25,13 @@ function A5wenwu() {
   const handleTapian = () => {
     handleTabClick('tab2')
     callIframeFu('hideSize', undefined)
-    console.log('showTapian');
+    console.log('showTapian')
   }
 
   const handleLine = () => {
     handleTabClick('tab3')
     callIframeFu('hideSize', undefined)
-    console.log('showLine');
+    console.log('showLine')
   }
 
   const handleZoomIn = (value: number) => {
@@ -52,15 +53,17 @@ function A5wenwu() {
     setIsShowGesture(false)
   }
   return (
-    <div className={classNames(styles.A5wenwu,)}>
+    <div className={classNames(styles.A5wenwu, isPc ? '' : styles.A5wenwuMo)}>
       <div className='back' onClick={gotoBack}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>
 
-      {isShowGesture && <div className="gesture">
-        <img src={require('@/assets/img/A5_gesture.png')} alt="" />
-        <div className="txt">单指滑动进行旋转</div>
-      </div>}
+      {isShowGesture && (
+        <div className='gesture'>
+          <img src={require('@/assets/img/A5_gesture.png')} alt='' />
+          <div className='txt'>单指滑动进行旋转</div>
+        </div>
+      )}
 
       {/* 左边 */}
       <div className='A5_tabBar'>