opti: 首页布局优化

client/components/Footer/Footer.scss

@@ -10,10 +10,10 @@
 }
 
 .footer-container{
-  @include row-width-limit;
   margin: 0 auto !important;
   padding-top: .48rem;
   padding-bottom: .48rem;
+  max-width: 12.2rem;
   .icon {
     font-size: .16rem;
     margin-right: .08rem;

client/containers/Home/Home.js

@@ -20,14 +20,14 @@ const HomeGuest = () => (
       <div className="container">
         <Row>
           <Col span={24}>
-            <div className="home-heander">
+            <div className="home-header">
               <a href="#" className="item">YAPI</a>
               <a target="_blank" href="/doc/index.html" className="item">使用文档</a>
             </div>
           </Col>
         </Row>
         <Row>
-          <Col span={9}>
+          <Col lg={9} xs={24}>
             <div className="home-des">
               <div className="logo">
                 {logoSVG('72px')}
@@ -40,7 +40,7 @@ const HomeGuest = () => (
               </div>
             </div>
           </Col>
-          <Col span={15}>
+          <Col lg={15} xs={0} className="col-img">
             <div className="img-container">
               <img className="img" src={getImgPath('./image/demo-img', 'jpg')}/>
             </div>
@@ -81,7 +81,7 @@ const HomeGuest = () => (
         <h3 className="title">功能强大的 Mock 服务</h3>
         <span className="desc">你想要的 Mock 服务都在这里</span>
         <Row className="row-card">
-          <Col span={12} className="section-card">
+          <Col lg={12} xs={24} className="section-card">
             <Card title="Mock 规则">
               <p className="mock-desc">通过学习一些简单的 Mock 模板规则即可轻松编写接口，这将大大提高定义接口的效率，并且无需为编写 Mock 数据烦恼: 所有的数据都可以实时随机生成。</p>
               <div className="code">
@@ -99,7 +99,7 @@ const HomeGuest = () => (
               </div>
             </Card>
           </Col>
-          <Col span={12} className="section-card mock-after">
+          <Col lg={12} xs={24} className="section-card mock-after">
             <Card title="生成的 Mock 数据">
               <p className="mock-desc">生成的 Mock 数据可以直接用 ajax 请求使用，也可以通过服务器代理使用（不需要修改项目一行代码）</p>
               <div className="code">
@@ -123,7 +123,7 @@ const HomeGuest = () => (
     <div className="home-section section-manage">
       <div className="container">
         <Row className="row-card" style={{marginBottom: '.48rem'}}>
-          <Col span={7} className="section-card">
+          <Col lg={7} xs={10} className="section-card">
             <Card>
               <div className="section-block block-first">
                 <h4>超级管理员(* N)</h4>
@@ -144,7 +144,7 @@ const HomeGuest = () => (
               </div>
             </Card>
           </Col>
-          <Col span={17} className="section-card manage-word">
+          <Col lg={17} xs={14} className="section-card manage-word">
             <Icon type="team" className="icon" />
             <h3 className="title">扁平化管理模式</h3>
             <p className="desc">接口管理的逻辑较为复杂，操作频率高，层层审批将严重拖慢生产效率，因此传统的金字塔管理模式并不适用。</p>

client/containers/Home/Home.scss

@@ -1,4 +1,3 @@
-@import '../../styles/common.scss';
 @import '../../styles/mixin.scss';
 
 $color-white : #fff;
@@ -13,7 +12,7 @@ $color-bg-lightblue: #c6e2ff;
 .g-body {
   position: relative;
 }
-.home-heander {
+.home-header {
   font-size: 0;
   .item {
     text-decoration: none;
@@ -117,7 +116,6 @@ $color-bg-lightblue: #c6e2ff;
   -webkit-box-orient: vertical;
   .main-one{
     height: 600px;
-    @include wrap-width-limit;
     .home-des{
       padding: 1rem 0 0;
       color: #fff;
@@ -166,7 +164,6 @@ $color-bg-lightblue: #c6e2ff;
     display: flex;
     align-items: center;
     height: 100%;
-    @include row-width-limit;
     margin: 1rem auto 0;
     .user-des{
       margin: 0 auto .5rem;
@@ -190,7 +187,6 @@ $color-bg-lightblue: #c6e2ff;
     }
   }
   .main-part{
-    @include wrap-width-limit;
     padding: 1.5rem 0;
     height: 5.8rem;
     &:nth-child(odd){
@@ -201,7 +197,6 @@ $color-bg-lightblue: #c6e2ff;
     }
   }
   .feat-part{
-    @include wrap-width-limit;
     padding: 1.5rem 0;
     background-color: $color-white;
   }
@@ -209,10 +204,10 @@ $color-bg-lightblue: #c6e2ff;
     min-height: 6rem;
   }
   .container{
-    @include row-width-limit;
     margin: 0 auto;
     height:100%;
     position: relative;
+    max-width: 12.2rem;
   }
   .feat-wrapper {
     display: flex;
@@ -346,6 +341,7 @@ $color-bg-lightblue: #c6e2ff;
   }
   .row-card {
     margin-top: .48rem;
+    padding: 0 .24rem;
   }
   .section-card {
     padding-bottom: 1rem;
@@ -482,6 +478,7 @@ $color-bg-lightblue: #c6e2ff;
   .container {
     display: flex;
     align-items: center;
+    max-width: 12.2rem;
     .tip-title {
       flex: 2;
     }
@@ -518,3 +515,11 @@ $color-bg-lightblue: #c6e2ff;
     transform: rotate(360deg);
   }
 }
+@media (max-width: 1200px) {
+  .home-header, .home-des {
+    text-align: center;
+  }
+  .home-main .main-one .home-des .logo {
+    justify-content: center;
+  }
+}

client/styles/common.scss

@@ -10,7 +10,6 @@ html, body {
              SimSun, sans-serif;
   margin: 0;
   padding: 0;
-  height: 100%;
   background: #ececec;
 }
 ::selection {