Skip to content

M
mr-julyedu
Commit 9fc1818d by baiguangyao
Options

修改底部样式

parent 587d04a0
Showing with 307 additions and 1 deletions
.history/src/common/Nav/NavLink/index_20190418122002.js 0 → 100644
import React, { Component } from 'react'
import { NavLink } from 'react-router-dom';
import './index.scss'
export default class NavLinks extends Component {
render() {
const { pathUrl, active, iconActive, icoName, linkName, ...rest } = this.props;
return (
<NavLink
{...rest}
to={pathUrl}
activeClassName={active}
className={"root-item"}
>
<i activeClassName={iconActive} className={icoName} />
<span className={"text"}>{linkName}</span>
</NavLink>
)
}
}
\ No newline at end of file
.history/src/common/Nav/NavLink/index_20190418122042.js 0 → 100644
import React, { Component } from 'react'
import { NavLink } from 'react-router-dom';
import './index.scss'
export default class NavLinks extends Component {
render() {
const { pathUrl, active, icoName, linkName, ...rest } = this.props;
return (
<NavLink
{...rest}
to={pathUrl}
activeClassName={active}
className={"root-item"}
>
<i className={icoName} />
<span className={"text"}>{linkName}</span>
</NavLink>
)
}
}
\ No newline at end of file
.history/src/common/Nav/index_20190418121111.js 0 → 100644
import React, { Component } from 'react';
import NavLink from './NavLink';
import './index.scss';
export default class Nav extends Component {
render() {
return (
<div>
<div style={{ height: '50px' }}></div>
<div className="root">
<NavLink
pathUrl="/"
exact
icoName="iconfont iconshouye"
active={"navOne"}
linkName="首页"
/>
<NavLink
pathUrl="/classify"
icoName="iconfont iconiconfront-16"
active={"navTwo"}
linkName="分类"
/>
<NavLink
pathUrl="/study"
icoName="iconfont iconxuexi"
active={"navThree"}
linkName="学习"
/>
<NavLink
pathUrl="/my"
icoName="iconfont iconhome"
active={"navFour"}
linkName="我的"
/>
</div>
</div>
)
}
}
\ No newline at end of file
.history/src/common/Nav/index_20190418122307.scss 0 → 100644
.root {
height: 50px;
position: fixed;
z-index: 50;
bottom: 0;
left: 0;
width: 100%;
display: flex;
background: #fff;
border-top: 1px solid #ddd;
}
.navOne, .navTwo, .navThree, .navFour, .navFive {
color: #09f;
&:hover, &:active {
color: #09f;
}
}
.navTwo{
color: #09f;
&:hover, &:active {
color: #09f;
}
.iconiconfront-16{
content: "\E695";
}
}
.iconfont{
font-size: 24px !important;
margin-bottom: 4px;
}
\ No newline at end of file
.history/src/common/Nav/index_20190418122326.scss 0 → 100644
.root {
height: 50px;
position: fixed;
z-index: 50;
bottom: 0;
left: 0;
width: 100%;
display: flex;
background: #fff;
border-top: 1px solid #ddd;
}
.navOne, .navTwo, .navThree, .navFour, .navFive {
color: #09f;
&:hover, &:active {
color: #09f;
}
}
.navTwo{
color: #09f;
&:hover, &:active {
color: #09f;
}
.iconiconfront-16{
content: "\E695";
}
}
.iconfont{
font-size: 24px !important;
margin-bottom: 4px;
}
\ No newline at end of file
.history/src/common/Nav/index_20190418122357.js 0 → 100644
import React, { Component } from 'react';
import NavLink from './NavLink';
import './index.scss';
export default class Nav extends Component {
render() {
return (
<div>
<div style={{ height: '50px' }}></div>
<div className="root">
<NavLink
pathUrl="/"
exact
icoName="iconfont iconshouye"
active={"navOne"}
linkName="首页"
/>
<NavLink
pathUrl="/classify"
icoName="iconfont iconfenlei"
active={"navTwo"}
linkName="分类"
/>
<NavLink
pathUrl="/study"
icoName="iconfont iconxuexi"
active={"navThree"}
linkName="学习"
/>
<NavLink
pathUrl="/my"
icoName="iconfont iconhome"
active={"navFour"}
linkName="我的"
/>
</div>
</div>
)
}
}
\ No newline at end of file
.history/src/common/Nav/index_20190418122421.js 0 → 100644
import React, { Component } from 'react';
import NavLink from './NavLink';
import './index.scss';
export default class Nav extends Component {
render() {
return (
<div>
<div style={{ height: '50px' }}></div>
<div className="root">
<NavLink
pathUrl="/"
exact
icoName="iconfont iconshouye"
active={"navOne"}
linkName="首页"
/>
<NavLink
pathUrl="/classify"
icoName="iconfont iconiconfront-16"
active={"navTwo"}
linkName="分类"
/>
<NavLink
pathUrl="/study"
icoName="iconfont iconxuexi"
active={"navThree"}
linkName="学习"
/>
<NavLink
pathUrl="/my"
icoName="iconfont iconhome"
active={"navFour"}
linkName="我的"
/>
</div>
</div>
)
}
}
\ No newline at end of file
.history/src/common/Nav/index_20190418122435.scss 0 → 100644
.root {
height: 50px;
position: fixed;
z-index: 50;
bottom: 0;
left: 0;
width: 100%;
display: flex;
background: #fff;
border-top: 1px solid #ddd;
}
.navOne, .navTwo, .navThree, .navFour, .navFive {
color: #09f;
&:hover, &:active {
color: #09f;
}
}
.navTwo{
color: #09f;
&:hover, &:active {
color: #09f;
}
.iconiconfront-16{
content: "\E695";
}
}
.iconfont{
font-size: 24px !important;
margin-bottom: 4px;
}
\ No newline at end of file
.history/src/common/Nav/index_20190418122454.scss 0 → 100644
.root {
height: 50px;
position: fixed;
z-index: 50;
bottom: 0;
left: 0;
width: 100%;
display: flex;
background: #fff;
border-top: 1px solid #ddd;
}
.navOne, .navTwo, .navThree, .navFour, .navFive {
color: #09f;
&:hover, &:active {
color: #09f;
}
}
.navTwo{
color: #09f;
&:hover, &:active {
color: #09f;
}
.iconiconfront-16::before{
content: "\E695";
}
}
.iconfont{
font-size: 24px !important;
margin-bottom: 4px;
}
\ No newline at end of file
src/common/Nav/index.js
...@@ -11,7 +11,7 @@ export default class Nav extends Component { ...@@ -11,7 +11,7 @@ export default class Nav extends Component {
<NavLink <NavLink
pathUrl="/" pathUrl="/"
exact exact
icoName={"iconfont iconshouye"} icoName="iconfont iconshouye"
active={"navOne"} active={"navOne"}
linkName="首页" linkName="首页"
/> />
......
src/common/Nav/index.scss
...@@ -16,6 +16,15 @@ ...@@ -16,6 +16,15 @@
color: #09f; color: #09f;
} }
} }
.navTwo{
color: #09f;
&:hover, &:active {
color: #09f;
}
.iconiconfront-16::before{
content: "\E695";
}
}
.iconfont{ .iconfont{
font-size: 24px !important; font-size: 24px !important;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment