update style

scripts/demo.js

@@ -189,7 +189,6 @@ InstantClickChangeFns.push(function() {
     const priviewImgs = [];
     const boxLength = box.find('.preview-img').length;
     box.find('.preview-img').each(function(i, img) {
-      console.log(img.hasAttribute('good'));
       priviewImgs.push(
         <PriviewImg boxLength={boxLength} key={i} src={img.src}
           alt={img.alt} good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')} />

scripts/home.js

@@ -5,19 +5,9 @@ import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
 import EventDispatcher from 'rc-scroll-anim/lib/EventDispatcher';
 import TweenOne from 'rc-tween-one';
 
-const DivId = ['page4', 'page3', 'page2', 'page1', 'banner'];
-const header = document.getElementById('header');
-DivId.forEach(id=> {
-  const page = document.createElement('section');
-  page.id = id;
-  if (id.indexOf('page') >= 0) {
-    page.className = 'page';
-  }
-  document.body.insertBefore(page, header.nextSibling);
-});
-
-// 导航处理；
+// 导航处理
 function scrollNavEvent() {
+  console.log(document.body.scrollTop);
   const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
   const clientHeight = document.documentElement.clientHeight;
   if (scrollTop >= clientHeight) {
@@ -60,7 +50,7 @@ class Banner extends React.Component {
   }
 }
 
-ReactDOM.render(<Banner />, banner);
+ReactDOM.render(<Banner />, document.getElementById('banner'));
 
 
 // page1
@@ -75,7 +65,7 @@ ReactDOM.render((
         type="right"/></Button></div>
     </QueueAnim>
   </ScrollOverPack>
-), page1);
+), document.getElementById('page1'));
 
 //page2
 ReactDOM.render((
@@ -90,9 +80,9 @@ ReactDOM.render((
     <TweenOne key="image" className="image2 image-wrapper" vars={{x: 0, opacity: 1, delay: 300, duration: 550}}
               style={{transform: 'translateX(100px)', opacity: 0}}/>
   </ScrollOverPack>
-), page2);
+), document.getElementById('page2'));
 
-//page3
+// page3
 ReactDOM.render((
   <ScrollOverPack className="content-wrapper">
     <TweenOne key="image" className="image3 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
@@ -105,12 +95,11 @@ ReactDOM.render((
         type="right"/></Button></div>
     </QueueAnim>
   </ScrollOverPack>
-), page3);
+), document.getElementById('page3'));
 
-//page4
+// page4
 ReactDOM.render((
   <ScrollOverPack className="content-wrapper">
-
     <QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom">
       <h1 key="h1">微小·确定·幸福</h1>
       <p key="p">这是一套致力于提升“用户”和“设计者”使用体验的中后台设计语言。</p>
@@ -118,4 +107,4 @@ ReactDOM.render((
     <TweenOne key="image" className="image4 bottom-wrapper" vars={{y: 0, opacity: 1, duration: 550, delay: 550}}
               style={{transform: 'translateY(50px)', opacity: 0}}/>
   </ScrollOverPack>
-), page4);
+), document.getElementById('page4'));

site/static/style.css

@@ -335,10 +335,11 @@ a.nav-link-disabled {
 footer {
   clear: both;
   border-top: 1px solid #eee;
-  font-size: 16px;
+  font-size: 12px;
   background: #fff;
   position: relative;
   z-index: 1;
+  color: #666;
 }
 
 footer ul {
@@ -353,30 +354,18 @@ footer ul li {
 }
 
 footer ul li > h2 {
-  font-size: 1em;
-  color: #5C6B77;
-  margin: 10px auto 0;
+  font-size: 16px;
+  margin: 10px auto 5px;
   font-weight: normal;
 }
 
-footer ul li > h3,
-footer h3 {
-  font-size: 0.75em;
-  color: #5C6B77;
-  font-weight: normal;
-  margin-top: 12px;
-}
-
-footer > h3 {
-  text-align: center;
-  font-size: .75em;
-  display: none;
+footer ul li > div {
+  text-align: left;
   margin: auto;
-  padding: 10px 0;
+  margin: 10px 0;
 }
 
 footer ul li > a {
-  font-size: 0.75em;
   margin: 5px 2px 0 0;
 }
 

site/templates/footer.html

@@ -17,8 +17,8 @@
       <a target="_blank" href="http://t.cn/R4XEpoQ">报告 Bug</a>
     </li>
     <li>
-      <h3>©2015 蚂蚁金服体验技术部出品</h3>
-      <h3>文档版本：<span id="versions-select"></span></h3>
+      <div>©2015 蚂蚁金服体验技术部出品</div>
+      <div>文档版本：<span id="versions-select"></span></div>
     </li>
   </ul>
 </footer>

site/templates/home.html

@@ -3,10 +3,26 @@
 {% block bodyAttribute %}class="index-page"{% endblock %}
 
 {% block content %}
+<section id="banner"></section>
+<section id="page1" class="page"></section>
+<section id="page2" class="page"></section>
+<section id="page3" class="page"></section>
+<section id="page4" class="page"></section>
 <script src="{{static_url('../dist/home.js')}}"></script>
 <style>
-  html, body, div, section, {
-    font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", SimSun, sans-serif;
+  .main-wrapper {
+    background: transparent;
+    width: auto;
+    margin: 0;
+    border-radius: 0;
+    padding: 0;
+    overflow: unset;
+    display: inline;
+  }
+
+  #home-page,
+  #home-page > div {
+    height: 100%;
   }
 
   .index-page {
@@ -25,10 +41,6 @@
     color: #eee;
   }
 
-  .main-wrapper {
-    display: none;
-  }
-
   .nav ul li a {
     transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
@@ -215,7 +227,7 @@
     margin: 20px auto;
     font-size: 16px;
     line-height: 28px;
-    color: #999999;
+    color: #999;
   }
 
   #footer {
@@ -223,11 +235,11 @@
   }
 
   footer ul li > h2 {
-    color: #656975;
+    color: #777;
   }
 
   footer ul li > a {
-    color: #BEC4C8
+    color: #eee;
   }
 </style>
 {% endblock %}