Commit c90532bb by xuzhenghua

Merge branch 'master' of gitlab.julyedu.com:baiguangyao/mr-julyedu into xzhindex

parents 2380ad62 40fce332
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
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
.root-item {
flex: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
line-height: 1;
color: #666;
&:hover {
color: $active;
}
}
.ico {
font-size: 0.42rem;
display: block;
margin-bottom: 0.1rem;
}
.text {
display: block;
line-height: 1;
}
\ No newline at end of file
.root-item {
flex: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
line-height: 1;
color: #666;
&:hover {
color: #0099ff;
}
}
.ico {
font-size: 0.42rem;
display: block;
margin-bottom: 0.1rem;
}
.text {
display: block;
line-height: 1;
}
\ No newline at end of file
.root {
height: 50px;
position: fixed;
z-index: 50;
bottom: 0;
left: 0;
width: 100%;
display: flex;
background: #fff;
border-top: 1px solid #ccc;
}
.navOne, .navTwo, .navThree, .navFour, .navFive {
color: #09f;
&:hover, &:active {
color: #09f;
}
}
.iconfont{
font-size: 24px !important;
margin-bottom: 4px;
}
\ No newline at end of file
.root {
height: 50px;
position: fixed;
z-index: 50;
bottom: 0;
left: 0;
width: 100%;
display: flex;
background: red;
border-top: 1px solid #ccc;
}
.navOne, .navTwo, .navThree, .navFour, .navFive {
color: #09f;
&:hover, &:active {
color: #09f;
}
}
.iconfont{
font-size: 24px !important;
margin-bottom: 4px;
}
\ No newline at end of file
.root {
height: 50px;
position: fixed;
z-index: 50;
bottom: 0;
left: 0;
width: 100%;
display: flex;
background: #fff;
border-top: 1px solid #ccc;
}
.navOne, .navTwo, .navThree, .navFour, .navFive {
color: #09f;
&:hover, &:active {
color: #09f;
}
}
.iconfont{
font-size: 24px !important;
margin-bottom: 4px;
}
\ No newline at end of file
.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;
}
}
.iconfont{
font-size: 24px !important;
margin-bottom: 4px;
}
\ No newline at end of file
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
.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
.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
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
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
.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
.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
/*
* @ 文字颜色
*/
$white: #fff;
$black: #000;
$color_333: #333;
$color_666: #666;
$color_999: #999;
/*
* @ 文字大小
*/
$font_30: 30px;
$font_28: 28px;
$font_26: 26px;
$font_24: 24px;
$font_22: 22px;
$font_20: 20px;
$font_18: 18px;
$font_16: 16px;
$font_14: 14px;
$font_12: 12px;
/*
* @ 背景颜色
*/
$bg_active: #09f;
$bg_fff: #fff;
$bg_000: #000;
$bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5;
$body-bg: #fff; //设置通用的 body 背景色
/*
* @ 文字颜色
*/
$border-color: #e9e9e9; //边框颜色
$body-color: #333; //设置通用的字体颜色
$link-color: #333; //设置通用的链接颜色
$link-visited: #333; //设置链接访问后的颜色
/*
* @ 边框颜色
*/
/*
* @ 文字颜色
*/
/*
* @ 文字颜色
*/
$white: #fff;
$black: #000;
$color_333: #333;
$color_666: #666;
$color_999: #999;
/*
* @ 文字大小
*/
$font_30: 30px;
$font_28: 28px;
$font_26: 26px;
$font_24: 24px;
$font_22: 22px;
$font_20: 20px;
$font_18: 18px;
$font_16: 16px;
$font_14: 14px;
$font_12: 12px;
/*
* @ 背景颜色
*/
$bg_active: #09f;
$bg_fff: #fff;
$bg_000: #000;
$bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5;
$body-bg: #fff; //设置通用的 body 背景色
/*
* @ 分割线颜色
*/
$sp_ddd: #ddd;
$sp_e7eaf1: #e7eaf1;
/*
* @ 边框颜色
*/
/*
* @ 文字颜色
*/
/*
* @ 文字颜色
*/
$white: #fff;
$black: #000;
$color_333: #333;
$color_555: #555;
$color_666: #666;
$color_999: #999;
/*
* @ 文字大小
*/
$font_30: 30px;
$font_28: 28px;
$font_26: 26px;
$font_24: 24px;
$font_22: 22px;
$font_20: 20px;
$font_18: 18px;
$font_16: 16px;
$font_14: 14px;
$font_12: 12px;
/*
* @ 背景颜色
*/
$bg_active: #09f;
$bg_fff: #fff;
$bg_000: #000;
$bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5;
$body-bg: #fff; //设置通用的 body 背景色
/*
* @ 分割线颜色
*/
$sp_ddd: #ddd;
$sp_e7eaf1: #e7eaf1;
/*
* @ 边框颜色
*/
/*
* @ 文字颜色
*/
$active: #09f;
$white: #fff;
$black: #000;
$color_333: #333;
$color_555: #555;
$color_666: #666;
$color_999: #999;
/*
* @ 文字大小
*/
$font_30: 30px;
$font_28: 28px;
$font_26: 26px;
$font_24: 24px;
$font_22: 22px;
$font_20: 20px;
$font_18: 18px;
$font_16: 16px;
$font_14: 14px;
$font_12: 12px;
/*
* @ 背景颜色
*/
$bg_active: #09f;
$bg_fff: #fff;
$bg_000: #000;
$bg_f4f4f4: #f4f4f4;
$bg_f5f5f5: #f5f5f5;
$body-bg: #fff; //设置通用的 body 背景色
/*
* @ 分割线颜色
*/
$sp_ddd: #ddd;
$sp_e7eaf1: #e7eaf1;
/*
* @ 边框颜色
*/
......@@ -11,7 +11,7 @@ export default class Nav extends Component {
<NavLink
pathUrl="/"
exact
icoName={"iconfont iconshouye"}
icoName="iconfont iconshouye"
active={"navOne"}
linkName="首页"
/>
......
......@@ -6,7 +6,8 @@
left: 0;
width: 100%;
display: flex;
border-top: 1px solid #ccc;
background: #fff;
border-top: 1px solid #ddd;
}
.navOne, .navTwo, .navThree, .navFour, .navFive {
......@@ -15,6 +16,15 @@
color: #09f;
}
}
.navTwo{
color: #09f;
&:hover, &:active {
color: #09f;
}
.iconiconfront-16::before{
content: "\E695";
}
}
.iconfont{
font-size: 24px !important;
......
/*
* @ 文字颜色
*/
$active: #09f;
$white: #fff;
$black: #000;
$color_333: #333;
$color_555: #555;
$color_666: #666;
$color_999: #999;
......@@ -28,23 +30,21 @@ $font_12: 12px;
* @ 背景颜色
*/
$bg_active: #09f;
$bg_fff: #fff;
$bg_000: #000;
$bg_f4f4f4: #f4f4f4;
$body-bg: #f2f2f2; //设置通用的 body 背景色
$bg_f5f5f5: #f5f5f5;
$body-bg: #fff; //设置通用的 body 背景色
/*
* @ 文字颜色
* @ 分割线颜色
*/
$border-color: #e9e9e9; //边框颜色
$body-color: #333; //设置通用的字体颜色
$link-color: #333; //设置通用的链接颜色
$link-visited: #333; //设置链接访问后的颜色
$sp_ddd: #ddd;
$sp_e7eaf1: #e7eaf1;
/*
* @ 边框颜色
*/
/*
* @ 文字颜色
*/
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