updatereactive

hi-our · Jan 29, 2021 · 15a7ac5 · shenghanqin · Jan 29, 2021 · shenghanqin
1 parent e6670d1
commit 15a7ac5
Show file tree

Hide file tree

Showing 5 changed files with 288 additions and 58 deletions.
diff --git a/components/footer/index.js b/components/footer/index.js
@@ -8,8 +8,8 @@ export default class Footer extends React.Component {
       <footer className="footer">
         <a href="/" className="footer-logo">
           <img src="/images/footer-logo.png" alt="logo"/>
+          <span>感谢阅读！</span>
         </a>
-        <p className="footer-thank">感谢阅读！</p>
         <section className="footer-links">
             <dl className="footer-links-item">
               <dd><p>关于我们</p></dd>

diff --git a/components/footer/styles.styl b/components/footer/styles.styl
@@ -5,32 +5,29 @@
   > .footer-logo {
     display block;
     width 145px;
-    height 62px;
     img {
       width 100%;
       height 100%;
     }
-  }
-  > .footer-thank {
-    font-size: 16px;
-    color: #333333;
-    line-height: 22px;
-    margin: 13px 0 20px;
+    span {
+      display inline-block;
+      font-size: 16px;
+      color: #333333;
+      line-height: 22px;
+      margin: 13px 0 20px;
+    }
   }
   > .footer-links {
     .footer-links-item {
+      display flex;
       margin-bottom 20px;
       &:last-child {
         margin-bottom 0;
       }
       dd {
-        display inline-block;
-        > p, > span {
-          display inline-block;
-        }
         > p {
           font-size: 16px;
-          font-weight: 500;
+          font-weight: bold;
           color: #0D5AFE;
           line-height: 22px;
           margin-right 10px;
@@ -45,3 +42,52 @@
     }
   }
 }
+
+// 响应式
+// 兼容568px - 1024px手机横屏宽度
+@media all and (min-width 568px)  {
+  .footer {
+    display flex;
+    justify-content: space-between;
+    align-items: center;
+    .footer-logo {
+      text-align center;
+      letter-spacing 1px;
+      img {
+        height 58px;
+      }
+      span {
+        margin-bottom 0;
+      }
+    }
+    .footer-links {
+      display flex;
+      justify-content: flex-end;
+      flex 1;
+      .footer-links-item {
+        display inline;
+        margin-bottom 0;
+        margin-right: 3%;
+        dd {
+          span, p {
+            margin-right 0;
+          }
+          p {
+            margin-bottom 14px;
+          }
+          span {
+            display inline-block; 
+            font-size 16px;
+            margin-bottom 10px;
+          }
+          &:last-child span{
+            margin-bottom 0;
+          }
+        }
+        &:last-child {
+          margin-right 0;  
+        }
+      }
+    }
+  }
+}
diff --git a/components/header/index.js b/components/header/index.js
@@ -2,22 +2,51 @@ import React from 'react'
 import './styles.styl'
 import Link from '../link-html'
 
-
 export default class Page extends React.Component {
+  state = {
+    menuState: false // 导航菜单的状态 
+  }
+  changeMenuState = state => this.setState({menuState: state})
   render() {
+    const {menuState} = this.state
     return (
       <>
         {/* 头部 */}
         <header className="header">
           <img className="header-logo" src="/images/logo.png" alt="logo"/>
-          <div className="header-menu" ref={this.menuLogo}>
+          <nav className="navbar">
+            <section className="navbar-item">
+              <a href="" className="navbar-item-active">首页</a>
+            </section>
+            <section className="navbar-item">
+              <a href="">博客文章</a>
+            </section>
+            <section className="navbar-item">
+              <a href="">技术分享</a>
+            </section>
+            <section className="navbar-item">
+              <a href="">关于我们</a>
+            </section>
+          </nav>
+          <div className="navigation-operation">
+            <img src="/images/themoom.png" alt="月亮"/>
+            <img src="/images/language.png" alt="语言"/>
+            <img src="/images/subscribe.png" alt="订阅"/>
+          </div>
+          {/* 杠杠图标 */}
+          <div 
+            className={(menuState ? 'active' : '') + ' header-menu'}
+            onClick={() => this.changeMenuState(true)}
+          >
             <div></div>
             <div></div>
           </div>
         </header>
         {/* 导航菜单 */}
-        <div className="navigation">
-          <div className="navigation-menu">
+        <div
+          className={(menuState ? 'active' : '') + ' navigation'}
+        >
+          <div className="navigation-menu" onClick={() => this.changeMenuState(false)}>
             <div></div>
             <div></div>
           </div>

diff --git a/components/header/styles.styl b/components/header/styles.styl
@@ -14,6 +14,7 @@
 }
 // 导航菜单
 .navigation {
+  display none;
   position fixed;
   top 0;
   left 0;
@@ -23,6 +24,18 @@
   padding 31px 31px 31px 40px;
   background-color rgba(13, 90, 254, .9);
   box-sizing border-box;
+  animation: 0.5s navigationOpacity;
+  &.active {
+    display block;
+  }
+  @keyframes navigationOpacity {
+    0% {
+      opacity 0;  
+    }
+    100% {
+      opacity 1;  
+    }
+  }
   .navigation-menu {
     position absolute;
     right 36px;
@@ -48,40 +61,132 @@
       &:last-child {
         margin-bottom 0;  
       }
-      a {
-        position relative;
-        font-size 24px;
-        font-weight 500;
-        color #f3f3f3;
-        line-height 33px;
-      }
-      a.navigation-links-active {
-          &::after {
-            content "";
-            position absolute;
-            bottom -5px;
-            right 0;
-            left 0;
-            width 30%;
-            margin auto;
-            border-bottom 2px solid #f3f3f3;
-            border-radius 2px;
-          }
-      }
     }
   }
-  .navigation-operation {
-    img {
-      width 24px;
-      height 24px;
-      &:nth-child(2) {
-        margin: 0 50px;
-      }
+}
+.navigation-operation {
+  img {
+    width 24px;
+    height 24px;
+    &:nth-child(2) {
+      margin: 0 50px;
     }
   }
 }
+.navigation-links li a, .navbar .navbar-item a{
+  position relative;
+  font-size 24px;
+  font-weight 500;
+  color #f3f3f3;
+  line-height 33px;
+  &.navbar-item-active::after, &.navigation-links-active::after {
+    content "";
+    position absolute;
+    bottom -5px;
+    right 0;
+    left 0;
+    width 30%;
+    margin auto;
+    border-bottom 2px solid #f3f3f3;
+    border-radius 2px;
+  }
+}
 // 不让滚动条滚动
 .not_scroll { 
   position fixed; 
   overflow-y scroll;
+}
+// 导航杠杠的样式
+.header-menu, .navigation-menu {
+  display flex;
+  flex-flow column;
+  justify-content space-between;
+  width 24px;
+  height 15px;
+  transition all 0.5s;
+  > div {
+    position relative;
+    width 100%;
+    height 3px;
+    background-color #fff;
+    border-radius 5px;
+  }
+  &.active {
+    > div:first-of-type {
+      animation: 0.5s leverFirst;
+    }
+    > div:last-child {
+      animation: 0.5s leverSecond;
+    }
+  }
+}
+// 杠杠动画
+@keyframes leverFirst {
+  0% {
+    transform rotate(0deg);
+  }
+  100% {
+    transform rotate(45deg);
+  }
+}
+@keyframes leverSecond {
+  0% {
+    transform rotate(0deg);
+  }
+  100% {
+    transform translateY(-11px) rotate(-45deg);
+  }
+}
+
+// 响应式
+// 兼容320px - 428px手机竖屏宽度
+@media screen and (min-width 320px){
+  .header {
+    // navbar 导航
+    .navbar, .navigation-operation {
+      display none;
+    }
+    .navigation {
+      .navigation-links {
+        margin 10px 0 !important;
+      }
+    }
+  }
+}
+// 兼容568px - 1024px手机横屏宽度
+@media screen and (min-width 568px){
+  .header {
+    padding 16px;
+    .header-logo {
+      width 128px;  
+    }
+    // 隐常横杆图标
+    .header-menu {
+      display none; 
+    }
+    .navigation-operation {
+      display block;  
+    }
+    // navbar 导航
+    .navbar {
+      display flex;
+      .navbar-item {
+        margin-right 35px;
+        a {
+          font-size 22px;
+        }
+        &:last-child {
+          margin-right 0;  
+        }
+      }
+    }
+    .navigation-operation img:nth-child(2) {
+      margin: 0 19px;
+    }
+    .module-header {
+      .line {
+        display none;  
+      }
+    }
+  }
 }