Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/v2 jiexiansheng 20210131 #10

Open
wants to merge 26 commits into
base: master
Choose a base branch
from
Open

Feature/v2 jiexiansheng 20210131 #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
bc818db
升级next10-修改page目录结构-配置next/image
qklhk Jan 27, 2021
7c536b1
update 目录修改尝试
Jan 28, 2021
20dc918
update index
qklhk Jan 28, 2021
f05d060
update index classname
qklhk Jan 29, 2021
e6670d1
update
qklhk Jan 29, 2021
15a7ac5
updatereactive
qklhk Jan 29, 2021
fdc0477
update修改昨天的问题
qklhk Jan 30, 2021
b24ed78
初次完成响应式
qklhk Jan 30, 2021
face2f4
update 第一番改进
Jan 30, 2021
71fcb62
update 更新样式导航样式
Jan 30, 2021
69714f6
update 修改顶部动画实现
Jan 30, 2021
ff38c75
update 顶部效果完成第一版，特效一般
Jan 30, 2021
2a1783e
update 顶部效果完成第一版，特效基本ok
Jan 30, 2021
8a953d0
update 顶部效果完成第一版，特效基本ok2
Jan 30, 2021
ccaf571
update 顶部效果完成第一版，特效基本ok3 修改变量
Jan 30, 2021
fdebaa8
update 修改顶部和底部效果
Jan 30, 2021
c88a088
update 修改Home基础
Jan 30, 2021
513b817
update 更新Banner区域
Jan 30, 2021
b555f60
update 删掉基础效果
Jan 30, 2021
b4f38d5
update 目前效果
Jan 30, 2021
e518721
update 1200px上效果
Jan 30, 2021
d26dfcf
update 断点效果
Jan 30, 2021
fca1b45
feat: complete the blog post module
Feb 5, 2021
4bb7af1
fix: remove debugging code
Feb 5, 2021
9c0a70d
style: 优化移动端效果
Feb 5, 2021
af5dde8
style: 样式更新
Feb 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 23 additions & 22 deletions components/footer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,40 @@
import './styles.styl'
import React from 'react'
import Link from '../link-html'
import './styles.styl'

export default class Footer extends React.Component {
render() {
return (
<footer className="footer">
<div className="footer-main">
<a href='/' className="footer-logo">
<h3>小溪里 xiaoxili.com</h3>
<a href="/" className="footer-logo">
<img src="/images/footer-logo.png" alt="logo"/>
<span>感谢阅读！</span>
</a>
<section className="footer-links">
<dl>
<dt><img src="https://image-hosting.xiaoxili.com/img/20200712164455.png" alt="关于我们" />关于</dt>
<dd><Link href="/about">关于小溪里</Link></dd>
<dd><Link href="/about">关于 Hi Our</Link></dd>
<dl className="footer-links-item">
<dt>关于我们</dt>
<dd>关于嘻嘻</dd>
<dd>关于团队</dd>
</dl>
<dl className="footer-links-item">
<dt>社区</dt>
<dd>Taro</dd>
<dd>图雀社区</dd>
</dl>
<dl>
<dt><img src="https://image-hosting.xiaoxili.com/img/20200712164456.png" alt="相关资源" />社区</dt>
{/* <dd><a href="https://cloudbase.net">云开发 CloudBase</a></dd> */}
<dd><a href="https://taro.jd.com">Taro</a></dd>
<dd><a href="https://tuture.co">图雀社区</a></dd>
<dl className="footer-links-item">
<dt>友情链接</dt>
<dd>itclanCoder</dd>
<dd>APPClIP</dd>
</dl>
<dl>
<dt><img src="https://image-hosting.xiaoxili.com/img/20200712183726.png" alt="友情链接" />友情链接</dt>
<dd><a href="https://coder.itclan.cn/">itclanCoder</a></dd>
<dd><a href="https://www.appclip.icu/">APPCLIP</a></dd>
<dl className="footer-links-item">
<dt>联系我们</dt>
<dd>公众号：笑嘻嘻</dd>
<dd>微博：笑嘻嘻</dd>
</dl>
</section>
</div>
<div className="footer-copyright">
Copyright © 2020. All Rights Reserved.<br /><a href="http://www.beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">沪ICP备20020594号</a>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010502005403" target="_blank" rel="noopener noreferrer"><img src="https://image-hosting.xiaoxili.com/img/20200812141626.png" />沪公网安备 31010502005403号</a>
</div>

</footer>
)
}
}
}
217 changes: 93 additions & 124 deletions components/footer/styles.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,124 +1,93 @@
.footer {
background: rgba(255, 255, 255, 0.8);
}

.footer-main {
padding: 30px 16px;
}

.footer-main .footer-logo {
display: block;
width: 130px;
height: 60px;
background: url(https://image-hosting.xiaoxili.com/img/20200712201537.png) no-repeat;
background-size: contain;
text-indent: -9999px;
overflow: hidden;
}


.footer-main .footer-links dl {
padding-left: 30px;
margin-top: 20px;
display: flex;
flex-wrap: wrap;
}

.footer-main .footer-links dt {
width: 100%;
font-size: 16px;
line-height: 1.33;
color: #000;
text-indent: -32px;
margin-bottom: 10px;
}

.footer-main .footer-links dt > img {
display: inline-block;
width: auto;
height: 20px;
vertical-align: middle;
margin: -3px 10px 0 0;
}

.footer-main .footer-links dd {
margin-right: 10px;
}
.footer-main .footer-links dd a {
font-size: 12px;
line-height: 1.33;
color: #000;
}

.footer-main .footer-links dd a:hover {
color: #0000C2;
}

.footer-copyright {
padding: 20px 0;
background: #0000C2;
text-align: center;
color: #fff;
font-size: 14px;
line-height: 1.5;
}

.footer-copyright a {
color: #fff;
}


@media (min-width: 1024px) {
.footer-main {
max-width: 1200px;
padding: 70px 16px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}


.footer-main .footer-logo {
width: 195px;
height: 90px;
}
.footer-main .footer-links {
display: flex;
}

.footer-main .footer-links dl {
margin-top: 0;
padding-left: 40px;
display: block;
flex-wrap: nowrap;
}
.footer-main .footer-links dl + dl {
margin-left: 60px;
}

.footer-main .footer-links dt {
font-size: 24px;
text-indent: -40px;
}

.footer-main .footer-links dt > img {
height: 30px;
}

.footer-main .footer-links dt + dd {
margin-top: 40px;
}

.footer-main .footer-links dd {
margin-top: 20px;
}

.footer-main .footer-links dd a {
font-size: 18px;
}

.footer-copyright > br {
display: none;
}

}
.footer
background-color #F9FBFF
padding 25px

.footer-main
max-width 1200px
margin 0 auto

.footer-logo
display block
width 145px
img
display block
width 100%
height auto

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
align-items baseline

&:last-child
margin-bottom 0

dt
font-size 16px
font-weight bold
color #0D5AFE
line-height 22px
margin-right 10px

dd
margin-right 8px
font-size 12px
color #333333
line-height 17px

// 响应式
// 兼容568px - 1024px手机横屏宽度
@media (min-width 768px)
.footer-main
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

.footer-links-item
display block
margin-bottom 0
margin-right 60px
&:last-child
margin-right 0

dt, dd
margin-right 0

dt
margin-bottom 14px

dd
font-size 16px
margin-bottom 10px
&:last-child
margin-bottom 0

@media (min-width 950px)
.footer
padding-left 32px
padding-right 32px

// PC端
@media (min-width 1200px)
.footer
padding 20px 0
82 changes: 69 additions & 13 deletions components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,81 @@
import React from 'react'
import './styles.styl'
import Link from '../link-html'

export default class Header extends React.Component {
state = {
isOpen: false // 导航菜单的状态
}

export default class Page extends React.Component {
render() {
toggleMenuStatus = () => {
this.setState({
isOpen: !this.state.isOpen
})
}

renderMainNav = (isPC) => {
return (
<header>
<div className="header-main">
<h1 className="logo">
<Link href='/' addHtml={false}>
小溪里 xiaoxili.com
</Link>
</h1>
<nav className="main-nav">
<Link href='/' addHtml={false}>首页</Link>
<nav className={isPC ? 'navigation-pc' : 'navigation-mobile'}>
<ul>
<li>
<Link href='/' isActive={true} addHtml={false}>首页</Link>
</li>
<li>
<a href='/blog' title="小溪里博客">博客</a>

</li>
<li>
<a href='/hi-face' title="Hi头像教程">小册</a>
</li>
<li>
<Link href='/about' addHtml>关于</Link>
</nav>
</li>
</ul>
</nav>
)
}

renderMainOperation = () => {
return (
<div className="navigation-operation">
<button className="mode"></button>
<button className="language"></button>
<button className="subscribe"></button>
</div>
)
}

render() {
const { isOpen } = this.state
return (
<>
{/* 头部 */}
<header className="header">
<div className="header-main">
<h1 className="logo">
<Link href='/' addHtml={false}>
小溪里 xiaoxili.com
</Link>
</h1>
{this.renderMainNav(true)}
{this.renderMainOperation()}
{/* 杠杠图标 */}
</div>
</header>
{/* 导航菜单 */}
<button
className={"navigation-toggle " + (isOpen ? 'active' : '')}
onClick={this.toggleMenuStatus}
>
<div className='text'>菜单切换</div>
</button>
<div
className={'navigation-pop ' + (isOpen ? 'active' : '')}
>
{this.renderMainNav()}
{this.renderMainOperation()}
</div>
</header>
</>
)
}
}
Loading