zxcdf

src/global.less

@@ -74,32 +74,31 @@ body,
     background-position: 0% 50%;
   }
 }
-
 * {
   margin: 0;
   padding: 0;
 }
 #webFooter {
   width: 100%;
-  /* height: 400px; */
+  /* height: auto; */
   background-color: black;
 }
 #webFooter > div:first-child {
-  height: calc(100% - 40px);
+  /* height:calc(100% - 40px) ; */
   padding: 50px 50px 80px 80px;
-  display: flex;
+  /* display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: space-between; */
 }
 .footer-copyright {
   color: rgba(194, 194, 194, 1);
-  border-top: 1px solid rgba(194, 194, 194, 1);
+  border-top: 0.5px solid rgba(194, 194, 194, 1);
   font-size: 14px;
   font-family: 'HarmonyOS Sans SC';
+  padding: 16px;
   text-align: center;
-  padding: 16px 0;
 }
-.footer-content h3 {
+.footer-content h2 {
   margin-bottom: 24px;
   color: rgba(255, 255, 255, 1);
   font-family: '黑体';
@@ -148,6 +147,7 @@ body,
   height: 100px;
   margin-top: 32px;
   display: flex;
+  /* flex-wrap: wrap; */
   justify-content: space-between;
 }
 .contact span {
@@ -183,6 +183,58 @@ body,
   width: 100px;
   height: 100%;
 }
+@media only screen and (max-width: 575px) {
+  .contact > div {
+    width: 100%;
+    height: auto;
+    margin-top: 32px;
+    display: block;
+    /* flex-wrap: wrap; */
+    /* justify-content: space-between;  */
+  }
+  .contact span {
+    position: absolute;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 1);
+  }
+  .nangao {
+    height: 150px;
+    position: relative;
+    background-repeat: no-repeat;
+    background-position: 0 0;
+    background-size: cover;
+    width: 150px;
+  }
+  .lianmeng {
+    height: 150px;
+    position: relative;
+    background-repeat: no-repeat;
+    background-position: 0 0;
+    background-size: cover;
+    width: 150px;
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 40px;
+  }
+  .cujinhui {
+    position: relative;
+    background-repeat: no-repeat;
+    background-position: 0 0;
+    background-size: cover;
+    width: 150px;
+    height: 150px;
+    margin-top: 40px;
+  }
+  .footer-copyright {
+    height: auto;
+    /* padding-left: 32px; */
+    color: rgba(194, 194, 194, 1);
+    /* border-top: 0.5px solid rgba(194, 194, 194, 1); */
+    /* line-height: 40px; */
+    font-size: 14px;
+    font-family: 'HarmonyOS Sans SC';
+  }
+}
 
 @media (min-width: 1024px) {
   html {

src/layouts/footer.jsx

 import React, { useState } from 'react';
+import { Col, Row } from 'antd';
 
 const ContentList = (props) => {
   const { title, listData } = props;
   return (
     <div className="footer-content">
-      <h3>{title}</h3>
+      <h2>{title}</h2>
       <div>
         {listData.map((item, index) => (
           <li>
@@ -84,43 +85,55 @@ export default () => {
   return (
     <div id="webFooter">
       <div>
-        <ContentList title="关于南高" listData={list1} />
-        <ContentList title="智能工厂解决方案" listData={list2} />
-        <ContentList title="下载中心" listData={list3} />
-        <div className="footer-content">
-          <button>联系我们</button>
-          <div className="contact">
-            <li>电话&nbsp;&nbsp;&nbsp;&nbsp;025-86111901</li>
-            <li>邮箱&nbsp;&nbsp;&nbsp;&nbsp;center@jsnangao.com</li>
-            <li>地址&nbsp;&nbsp;&nbsp;&nbsp;南京市江宁开发区东南大学路33号</li>
-            <div>
-              <div
-                className="nangao"
-                style={{
-                  backgroundImage: `url(${require('@/assets/code1.jpg')})`,
-                }}
-              >
-                <span>南高公众号</span>
-              </div>
-              <div
-                className="lianmeng"
-                style={{
-                  backgroundImage: `url(${require('@/assets/code2.jpg')})`,
-                }}
-              >
-                <span>联盟公众号</span>
-              </div>
-              <div
-                className="cujinhui"
-                style={{
-                  backgroundImage: `url(${require('@/assets/code3.jpg')})`,
-                }}
-              >
-                <span>促进会公众号</span>
+        <Row style={{ display: 'flex', justifyContent: 'space-around' }}>
+          <Col xs={24} sm={8} xl={8} xxl={6}>
+            <ContentList title="关于南高" listData={list1} />
+          </Col>
+          <Col xs={24} sm={8} xl={8} xxl={6}>
+            <ContentList title="智能工厂解决方案" listData={list2} />
+          </Col>
+          <Col xs={24} sm={8} xl={8} xxl={6}>
+            <ContentList title="下载中心" listData={list3} />
+          </Col>
+          <Col xs={24} sm={24} xl={24} xxl={6}>
+            <div className="footer-content">
+              <button>联系我们</button>
+              <div className="contact">
+                <li>电话&nbsp;&nbsp;&nbsp;&nbsp;025-86111901</li>
+                <li>邮箱&nbsp;&nbsp;&nbsp;&nbsp;center@jsnangao.com</li>
+                <li>
+                  地址&nbsp;&nbsp;&nbsp;&nbsp;南京市江宁开发区东南大学路33号
+                </li>
+                <div>
+                  <div
+                    className="nangao"
+                    style={{
+                      backgroundImage: `url(${require('@/assets/code1.jpg')})`,
+                    }}
+                  >
+                    <span>南高公众号</span>
+                  </div>
+                  <div
+                    className="lianmeng"
+                    style={{
+                      backgroundImage: `url(${require('@/assets/code2.jpg')})`,
+                    }}
+                  >
+                    <span>联盟公众号</span>
+                  </div>
+                  <div
+                    className="cujinhui"
+                    style={{
+                      backgroundImage: `url(${require('@/assets/code3.jpg')})`,
+                    }}
+                  >
+                    <span>促进会公众号</span>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
+          </Col>
+        </Row>
       </div>
       <div className="footer-copyright">
         Copyright © 2017