From 60beb882d7bf7015348c665b368419614f0ef77f Mon Sep 17 00:00:00 2001 From: michael Date: Wed, 14 Aug 2019 21:24:42 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=89=8D=E7=AB=AF=E5=88=87?= =?UTF-8?q?=E5=9B=BE=E5=AE=8C=E6=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Header.js | 76 +++++++++++++++++++++++++++++++++++--- components/Layout.js | 28 ++++++++++++++ components/MyLayout.js | 18 --------- css/reset.styl | 10 +++-- pages/index.jsx | 83 +++++++++++++++++++++++++++++++++++++++--- 5 files changed, 182 insertions(+), 33 deletions(-) create mode 100644 components/Layout.js delete mode 100644 components/MyLayout.js diff --git a/components/Header.js b/components/Header.js index bdf1173..f0679d8 100644 --- a/components/Header.js +++ b/components/Header.js @@ -4,7 +4,7 @@ import { import Link from 'next/link'; -const Header = () => { +const Header = (props) => { const [fade, setFade] = useState(false); useEffect(() => { window.addEventListener('resize', () => { @@ -31,17 +31,19 @@ const Header = () => { const handleOnMouseEnter = (e) => { if (!("ontouchend" in document)) { setFade(true); - console.log('handleOnMouseEnter'); } } const handleOnMouseLeave = () => { if (!("ontouchend" in document)) { setFade(false); - console.log('handleOnMouseLeave'); } } const handleToggle = (e) => { - setFade(!fade); + const {blur,setBlur}=props; + if (window.innerWidth < 500) { + setBlur(!blur); + } + setFade(!fade); } return (
@@ -113,6 +115,40 @@ const Header = () => { background: #333; border-radius: 1px; } + + @media(max-width:500px){ + .arrow.active{ + top: 5px; + transform: translateY(0); + opacity: 1; + box-shadow: 0 0 3px rgba(0,0,0,0.3); + } + + .arrow span{ + transition: 0.3s background-color 0.3s; + background: #333; + } + .arrow span:after, + .arrow span:before{ + transition:0.3s top 0.3s,0.3s bottom 0.3s,0.3s transform; + } + .arrow.active span:after, + .arrow.active span:before{ + transition:0.3s top ,0.3s bottom,0.3s transform 0.3s; + } + .arrow.active span{ + background: transparent; + transition: 0.3s background-color; + } + .arrow.active span:after{ + top: 0; + transform: rotateZ(45deg); + } + .arrow.active span:before{ + bottom:0; + transform: rotateZ(-45deg); + } + } .mask{ position: fixed; top: 0; @@ -134,6 +170,11 @@ const Header = () => { opacity: 0; visibility: hidden; } + @media(max-width:500px){ + .nav{ + height: auto; + } + } .nav.active{ transform: translateY(0); opacity: 1; @@ -145,9 +186,12 @@ const Header = () => { justify-content: space-between; transition: 0.3s; } - @media(max-width:1600px){ + @media(max-width:500px){ .w1500{ - width: 80%; + flex-direction:column; + width: 100%; + padding: 0 15px; + box-sizing: border-box; } } .brand{ @@ -159,6 +203,11 @@ const Header = () => { padding: 0 10px; line-height: 56px; } + @media(max-width:500px){ + .brand a{ + display: inline-block; + } + } .links{ display: flex; } @@ -172,6 +221,21 @@ const Header = () => { .links a:hover{ color: #1890ff; } + @media(max-width:500px){ + .links{ + overflow-x: scroll; + -webkit-overflow-scrolling: touch; + overflow-y: hidden; + } + .links::-webkit-scrollbar{ + display: none; + } + .links a{ + height: 50px; + line-height: 50px; + white-space: nowrap; + } + } `}
) diff --git a/components/Layout.js b/components/Layout.js new file mode 100644 index 0000000..b3aa308 --- /dev/null +++ b/components/Layout.js @@ -0,0 +1,28 @@ +import { + useEffect, + useState, + createRef +} from 'react'; +import Header from './Header'; + +const Layout = props => { + const [blur, setBlur] = useState(false); + return ( + <> +
+
+ {props.children} +
+ {/* background: rgba(255,255,255,0.6) */} + + + ); +}; + +export default Layout; diff --git a/components/MyLayout.js b/components/MyLayout.js deleted file mode 100644 index fc244cd..0000000 --- a/components/MyLayout.js +++ /dev/null @@ -1,18 +0,0 @@ -import Header from './Header'; - -const layoutStyle = { - margin: 20, - padding: 20, - border: '1px solid #DDD' -}; - -const Layout = props => { - return ( -
-
- {props.children} -
- ); -}; - -export default Layout; diff --git a/css/reset.styl b/css/reset.styl index fbf7d5e..eeb5a08 100644 --- a/css/reset.styl +++ b/css/reset.styl @@ -53,10 +53,10 @@ img /* 基本属性 */ body + overflow-x hidden + overflow-y scroll background #fff color #333 - overflow-y scroll - overflow-x hidden font-weight 200 /* 各浏览器的默认属性clear */ @@ -162,7 +162,11 @@ input[type=radio]::-ms-check, input[type=checkbox]::-ms-check .por position relative + .w1500 - max-width 1500px margin 0 auto + max-width 1500px width 100% +@media (max-width: 1600px) + .w1500 + width 80% diff --git a/pages/index.jsx b/pages/index.jsx index 49711a6..c33cd62 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -3,24 +3,93 @@ import React, { useState, createRef } from 'react'; import Link from 'next/link'; -import Header from '../components/Header'; +import Layout from '../components/Layout'; import '../css/reset.styl'; // back = #1890ff // color = #333 export default (props) => { - return <> + return -
- + + +} +const CopyRight = () => { + return ( +
+
+
+
+

关于Blog

+

此Blog诞生的原因是想记录一些日常踩到的坑,也希望借此可以结交到其他的小伙伴啦,分享技术,一起进步.

+
+
+

友情链接

+ +
+
+

Design & Code by Blue.use Mongodb + Next.js

+
+ +
+ ) } const Drive = () => { return

Next.js强力驱动

-

使用的技术栈有:React, Redux, Express, Mongodb. 博客源码

+

使用的技术栈有:React, Redux, Express, Mongodb. 博客源码