首页前端切图完毕

MichaelHao25 · Aug 14, 2019 · 60beb88 · 60beb88
1 parent 09a7760
commit 60beb88
Show file tree

Hide file tree

Showing 5 changed files with 182 additions and 33 deletions.
diff --git 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 (
 		<div className="mask" onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
@@ -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;
+					}
+				}
 			`}</style>
 		</div>
 	)

diff --git a/components/Layout.js 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 (
+		<>
+			<Header blur={blur} setBlur={setBlur} />
+			<div className={`${blur ? 'blur' : ''}`}>
+				{props.children}
+			</div>
+			{/* background: rgba(255,255,255,0.6) */}
+			<style jsx>{`
+				.blur{
+					transition: 0.3s;
+					filter: blur(5px);
+					
+				}
+      		`}</style>
+		</>
+	);
+};
+
+export default Layout;
diff --git a/components/MyLayout.js b/components/MyLayout.js
diff --git 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
@@ -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 <Layout>
 		<InitPage />
-		<Header />
 		<Home />
 		<Design />
 		<Drive />
-	</>
+		<CopyRight />
+	</Layout>
+}
+const CopyRight = () => {
+	return (
+		<footer className="footer">
+			<div className="w1500">
+				<div className="list">
+					<div className="item">
+						<h3>关于Blog</h3>
+						<p>此Blog诞生的原因是想记录一些日常踩到的坑,也希望借此可以结交到其他的小伙伴啦,分享技术,一起进步.</p>
+					</div>
+					<div className="item">
+						<h3>友情链接</h3>
+						<div className="links">
+							<Link href="/"><a className="blog">博文</a></Link>
+							<Link href="/"><a className="dev">实验室</a></Link>
+							<Link href="/"><a className="message">留言</a></Link>
+							<Link href="/"><a className="about">关于</a></Link>
+						</div>
+					</div>
+				</div>
+				<p>Design & Code by Blue.use Mongodb + Next.js</p>
+			</div>
+			<style jsx>{`
+				.footer{
+					padding: 20px 0;
+					color: #ccc;
+					background: #333;
+					font-size: 14px;
+				}
+				.list{
+					display: flex;
+					justify-content: space-between;
+				}
+				h3{
+					font-size: 20px;
+					padding-bottom: 10px;
+					white-space: nowrap;
+				}
+				p{
+					padding-bottom: 10px;
+				}
+				.links{
+					display: flex;
+					flex-direction: column;
+				}
+				.links a{
+					line-height: 1.8;
+					transition: 0.3s;
+				}
+				.links a:hover{
+					color: #1890ff;
+				}
+				@media(max-width:500px){
+					.list{
+						flex-direction: column;
+					}
+					.w1500{
+						width: 100%;
+					}
+					.links{
+						align-items: flex-start;
+					}
+					.footer{
+						padding: 20px 15px;
+					}
+				}
+			`}</style>
+		</footer>
+	)
 }
 const Drive = () => {
 	return <div className="container">
 		<h3>Next.js强力驱动</h3>
 		<img src="../static/img/next.svg" alt="" />
-		<p>使用的技术栈有:React, Redux, Express, Mongodb. <a href="#">博客源码</a></p>
+		<p>使用的技术栈有:React, Redux, Express, Mongodb. <a href="https://github.com/MichaelHao25/blog">博客源码</a></p>
 		<style jsx>{`
 			.container{
 				padding: 8% 0 5%;
@@ -363,7 +432,9 @@ const InitPage = () => {
 	const [action, setAction] = useState(false);
 	const [hide, setHide] = useState(false);
 	useEffect(() => {
-		setAction(true);
+		setTimeout(() => {
+			setAction(true);
+		}, 100);
 	}, [])
 	const transitionEnd = () => {
 		console.log('加载动画执行完毕');