Merge pull request #20 from captainblue2013/master

勉强加了一下响应式
FreeCodeCamp-Chengdu · Mar 30, 2018 · 737dc59 · 737dc59
2 parents e3edf77 + cdd0321
commit 737dc59
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 14 deletions.
diff --git a/src/layouts/Footer.js b/src/layouts/Footer.js
@@ -7,26 +7,26 @@ class Footer extends Component {
     return (
       <footer className="Footer">
         <div className="row justify-content-center align-items-center footer-bg">
-          <div className="col-xs-6">
+          <div className="col-xs-12 col-md-6">
             <div className="left-content">
               <img src={FLogo} alt="FCC logo"></img>
               <p>
                 "人人皆可编程"营造有温度的技术社区
               </p>
             </div>
           </div>
-          <div className="col-xs-6">
+          <div className="col-xs-12 col-md-6">
             <div className="right-content">
               <About />
             </div>
           </div>
         </div>
         <div className="info justify-content-center align-items-center">
           <div className="row">
-            <div className="col-xs-6">
+            <div className="col-xs-12 col-md-6">
               <p className="left">版权所有©2018 FCC成都社区保留</p>
             </div>
-            <div className="col-xs-6">
+            <div className="col-xs-12 col-md-6">
               <p className="right">
                 FCC成都社区
               </p>

diff --git a/src/layouts/style.scss b/src/layouts/style.scss
@@ -108,3 +108,17 @@ body {
   }  
 }
 
+@media (max-width: 992px) {
+  body{
+    .App{
+      .Footer{
+        .left-content{
+          text-align: center;
+        }
+        .right-content{
+          text-align: center;
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/Index/Events/style.scss b/src/pages/Index/Events/style.scss
@@ -139,4 +139,11 @@ $titlePanelWidth: 200px;
             }
         }
     }
+}
+@media(max-width:992px){
+    .index-events{
+        .MainContainer{
+            overflow: hidden;
+        }
+    }
 }
diff --git a/src/pages/Index/Info/style.scss b/src/pages/Index/Info/style.scss
@@ -44,4 +44,16 @@
             line-height: 30px;
         }
     }
+}
+@media (max-width: 992px) {
+    .index-info{
+        .info-row{
+            .ImagePanel{
+                display: none;
+            }
+            .col-md-7{
+                width: 66.66666667%;
+            }
+        }
+    }
 }
diff --git a/src/pages/Index/Members/style.scss b/src/pages/Index/Members/style.scss
@@ -7,9 +7,9 @@
   background-size: contain;
 }
 .members{
-  width: 1280px;
-  height: 810px;
-  padding-top: 72px;
+  width: 80%;
+  max-width: 1280px;
+  padding-top: 2rem;
   border-radius: 6px;
   margin: 0 auto;
   transform: translateY(-127px);
@@ -31,8 +31,8 @@
     color: rgba(0,0,0,0.1);
   }
   .members-list{
-    padding-top: 46px;
-    padding-bottom: 21px;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
     text-align: left;
   }
   .card-img-top{
@@ -41,13 +41,11 @@
   }
   .member-item{
     display: inline-block;
-    width: 220px;
-    height: 110px;
+    width: 18%;
     border-radius: 6px;
-    padding: 25px 18px 25px 20px;
+    padding: 1.5rem 1rem 1.5rem 2rem;
     font-size: 0;
-    margin-right: 44px;
-    margin-bottom: 25px;
+    margin: 0 1%;
     color: #515151;
   }
   .member-item.last-item{
@@ -101,3 +99,50 @@
     white-space: nowrap;
   }
 }
+@media (max-width: 992px) {
+  .members-block{
+    height: auto;
+  }
+  .members{
+  width: 98%;
+  height: auto;
+  padding: 1rem 0;
+    .member-item{
+      display: inline-block;
+      width: 40%;
+      border-radius: 6px;
+      padding: 3rem 2rem 3rem 4rem;
+      font-size: 0;
+      margin: 0 5%;
+      color: #515151;
+    }
+    .member-item.last-item{
+      margin-right: 5%;
+    }
+  }
+}
+@media (max-width: 480px) {
+  .members{
+    width: 98%;
+    height: auto;
+    padding: 1rem 0;
+      .img-block{
+        width: 20%;
+        height: auto;
+        margin: 0 5%;
+      }
+      .content{
+        width: 60%;
+        margin: 0 0 0 5%;
+      }
+      .member-item{
+        display: inline-block;
+        width: 98%;
+        border-radius: 6px;
+        padding: 1.5rem 1rem 1.5rem 2rem;
+        font-size: 0;
+        margin: 0 2%;
+        color: #515151;
+      }
+    }
+}
diff --git a/src/pages/Index/Slogan/style.scss b/src/pages/Index/Slogan/style.scss
@@ -58,4 +58,16 @@
           bottom: -50px;
         }
       }
+}
+@media (max-width: 992px) {
+  .index-slogan{
+    .BannerContainer{
+      .SloganContainer{
+        word-wrap: break-word;
+      }
+      .BannerIcon{
+        display: none;
+      }
+    }
+  }
 }