footer开发

src/components/footer/index.module.scss

+.footer {
+  height: 350px;
+  background: #2a2a32;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.logo {
+  width: 152px;
+  height: 43px;
+  background: url('./assets/logo.png') no-repeat;
+  background-size: 100% 100%;
+  margin-right: 104px;
+}
+
+.qrcodeList {
+  display: flex;
+   margin-right: 101px;
+  .qrcodeItem {
+    margin-right: 87px;
+    &:nth-last-child(1) {
+      margin-right: 0;
+    }
+
+    .qrcodeImg {
+      width: 100px;
+      height: 100px;
+    }
+
+    .qrcodeTitle {
+      margin-top: 14px;
+      font-size: 14px;
+      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
+      font-weight: bold;
+      color: #d6d6d6;
+    }
+  }
+}
+
+.rightText {
+  .number {
+    font-size: 58px;
+    font-family: Arial-Black, Arial;
+    font-weight: 900;
+    color: #39aafc;
+    line-height: 82px;
+  }
+  .text {
+    font-size: 16px;
+    font-family: MicrosoftYaHei;
+    color: #949498;
+    line-height: 21px;
+  }
+}

src/components/footer/index.tsx

+import styles from './index.module.scss';
+
+const qrcodeList = [
+  {
+    img: '',
+    title: '科比特官网',
+  },
+  {
+    img: '',
+    title: '云享飞服务号',
+  },
+  {
+    img: '',
+    title: '云享飞小程序',
+  },
+  {
+    img: '',
+    title: '官方社群',
+  },
+];
+
+export default function Footer() {
+  return (
+    <div className={styles.footer}>
+      <div className={styles.logo}></div>
+      <div className={styles.qrcodeList}>
+        {
+          qrcodeList.map(item => {
+            return (
+              <div className={styles.qrcodeItem}>
+                <img className={styles.qrcodeImg} src={item.img}></img>
+                <div className={styles.qrcodeTitle}>{item.title}</div>
+              </div>
+            );
+          })
+        }
+        
+      </div>
+      <div className={styles.rightText}>
+        <div className={styles.number}>100W</div>
+        <div className={styles.text}>加盟商席位等你来入驻</div>
+      </div>
+    </div>
+  );
+}

src/components/layout/index.tsx

@@ -2,6 +2,7 @@ import React, { Suspense } from 'react';
 import { Layout, Space } from 'antd';
 import { Outlet } from 'react-router-dom';
 import NavHeader from '~/components/NavHeader';
+import FooterView from '~/components/footer';
 
 const { Header, Footer, Content } = Layout;
 
@@ -23,7 +24,7 @@ const contentStyle: React.CSSProperties = {
 const footerStyle: React.CSSProperties = {
   textAlign: 'center',
   color: '',
-  backgroundColor: '#7dbcea',
+  backgroundColor: '',
   lineHeight: '1',
 };
 
@@ -34,7 +35,7 @@ type Props = {
 export default function LayoutView(props: Props) {
   return (
     <Space direction='vertical' style={{ width: '100%' }} size={[0, 48]}>
-      <Layout style={{ height: '100vh' }}>
+      <Layout style={{ minHeight: '100vh' }}>
         <Header style={headerStyle}>
           <NavHeader />
         </Header>
@@ -44,7 +45,9 @@ export default function LayoutView(props: Props) {
             <Outlet></Outlet>
           </Suspense>
         </Content>
-        <Footer style={footerStyle}>Footer</Footer>
+        <Footer style={footerStyle}>
+          <FooterView></FooterView>
+        </Footer>
       </Layout>
     </Space>
   );