feat: 手机footer

src/component/Footer/Footer.jsx

@@ -2,18 +2,18 @@ import React, {useEffect, useState} from 'react';
 import Styles from './Footer.module.css';
 import {useTranslation} from "react-i18next";
 import eventBus from "../../uitls/EventBus";
-import {CONTACT_US, HOME} from "../../uitls/Constants";
+import {CONTACT_US} from "../../uitls/Constants";
 import {useNavigate} from "react-router-dom";
 
 // 底部信息栏组件
 const Footer = () => {
     const {t} = useTranslation();
-    const [isHome, setHome] = useState(false)
+    const [isShowConnect, setConnect] = useState(false)
     const navigate = useNavigate();
 
     useEffect(() => {
         eventBus.on('changeTabEvent', (tab) => {
-            setHome(tab === HOME)
+            setConnect(tab !== CONTACT_US)
             console.log("tab", tab)
         });
 
@@ -34,7 +34,7 @@ const Footer = () => {
             <p className={Styles.content}>{t('footerHelp')}</p>
             <p className={Styles.content}>{t('footerEmail')}</p>
             <button
-                style={{display: isHome ? 'flex' : 'none'}}
+                style={{display: isShowConnect ? 'flex' : 'none'}}
                 className={Styles.ellipseBtn}
                 onClick={onClick}
             >

src/component/Footer/Footer.module.css

@@ -33,4 +33,48 @@
     border-radius: 9999px;
     font-size: 18px;
     cursor: pointer;
+    width: 200px;
+}
+@media (max-width: 768px) {
+    .root {
+        flex: 1;
+        height: 90.1vw;
+        width: 100vw;
+        display: flex;
+        background-color: #ffffff;
+        color: white;
+        text-align: center;
+        justify-content: center;
+        align-items: start;
+        flex-direction: column;
+        padding-left: 8vw;
+    }
+    .title {
+        font-size: 6.4vw;
+        font-weight: bold;
+        color: black;
+        margin-bottom:4.2vw ;
+    }
+    .content {
+        font-size: 4.2vw;
+        font-weight: normal;
+        width: 84vw;
+        color: black;
+        text-align: left;
+        margin-bottom: 8vw;
+    }
+
+    .ellipseBtn {
+        background-color: #000000;
+        color: white;
+        border: none;
+        padding: 2.5vw 5.3vw;
+        border-radius: 9999px;
+        font-size: 3.5vw;
+        cursor: pointer;
+        width: 34.1vw;
+        height: 8.8vw;
+        font-weight: bold;
+        margin-top: 4.2vw;
+    }
 }

src/pages/Home/Home.module.css

@@ -233,9 +233,9 @@
 }
 
 @media (max-width: 768px) {
-    .rootDesk {
-        display: none;
-    }
+    /*.rootDesk {*/
+    /*    display: none;*/
+    /*}*/
 
     .rootPhone {
         display: flex;