asder

src/global.less

@@ -189,38 +189,19 @@ body,
   /* flex-wrap: wrap; */
   justify-content: space-between;
 }
-.contact span {
-  position: absolute;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 1);
-  bottom: -25px;
-  left: 20%;
-}
 .nangao {
-  position: relative;
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  background-size: cover;
-  width: 100px;
-  height: 100%;
-}
-.lianmeng {
-  position: relative;
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  background-size: cover;
-  width: 100px;
-  height: 100%;
-  margin-left: 16px;
-  margin-right: 16px;
-}
-.cujinhui {
-  position: relative;
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  background-size: cover;
   width: 100px;
-  height: 100%;
+  height: 150px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  img {
+    width: 100%;
+  }
+  span {
+    padding-top: 0.4rem;
+  }
 }
 @media only screen and (max-width: 575px) {
   .contact > div {
@@ -231,39 +212,6 @@ body,
     /* 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; */

src/layouts/footer.jsx

@@ -125,28 +125,16 @@ export default () => {
                 <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')})`,
-                    }}
-                  >
+                  <div className="nangao">
+                    <img src={require('@/assets/code1.jpg')} />
                     <span>南高公众号</span>
                   </div>
-                  <div
-                    className="lianmeng"
-                    style={{
-                      backgroundImage: `url(${require('@/assets/code2.jpg')})`,
-                    }}
-                  >
+                  <div className="nangao">
+                    <img src={require('@/assets/code2.jpg')} />
                     <span>联盟公众号</span>
                   </div>
-                  <div
-                    className="cujinhui"
-                    style={{
-                      backgroundImage: `url(${require('@/assets/code3.jpg')})`,
-                    }}
-                  >
+                  <div className="nangao">
+                    <img src={require('@/assets/code3.jpg')} />
                     <span>促进会公众号</span>
                   </div>
                 </div>