Skip to content

Commit

Permalink
Tab add features
Browse files Browse the repository at this point in the history
  • Loading branch information
@alex3347
alex3347 committed Dec 11, 2017
1 parent f3ee9a7 commit 98e3a75
Show file tree
Hide file tree
Showing 16 changed files with 376 additions and 88 deletions.
40 changes: 38 additions & 2 deletions src/components/Tab/Tab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,16 @@ import {Link} from 'react-router-dom';
import {connect} from 'react-redux';

class Tab extends Component {
constructor(props){
super(props)
this.state = {
active: false
}
}
render() {
const click = (e)=>{
this.setState({active: !this.state.active})
}
return (
<div className={styles.container}>
<Link to="/" className={`${styles.link} ${this.props.tab.home}`}>
Expand All @@ -16,11 +25,11 @@ class Tab extends Component {
<i className='iconfont icon-jishi2'/>
<s>市集</s>
</Link>
<Link to="/" className={styles.link}>
<div className={styles.link} onClick={click}>
<div className={styles.plusBtn}>
<i className='iconfont icon-iconjia'/>
</div>
</Link>
</div>
<Link to="/Discover" className={`${styles.link} ${this.props.tab.discover}`}>
<i className='iconfont icon-faxian'/>
<s>发现</s>
Expand All @@ -29,6 +38,33 @@ class Tab extends Component {
<i className='iconfont icon-wode'/>
<s>我的</s>
</Link>
<div className={styles.addBtnContainer} style = {this.state.active ? {'display': 'block'}:{'display': 'none'}}>
<div className={styles.shadow}/>
<div className={`${styles.addBtn} ${styles.addBtn1}`}>
<div className={styles.iconContainer}>
<i className='iconfont icon-xiexin'/>
</div>
<div className={styles.title}>写菜谱</div>
<div className={styles.describe}>与大家分享美食做法</div>
</div>
<div className={`${styles.addBtn} ${styles.addBtn2}`}>
<div className={styles.iconContainer}>
<i className='iconfont icon-jishi2'/>
</div>
<div className={styles.title}>逛市集</div>
<div className={styles.describe}>写点烘焙用品和工具</div>
</div>
<div className={`${styles.addBtn} ${styles.addBtn3}`}>
<div className={styles.iconContainer}>
<i className='iconfont icon-05'/>
</div>
<div className={styles.title}>发动态</div>
<div className={styles.describe}>晒美食、晒生活</div>
</div>
<div className={styles.closeBtn} onClick={click}>
<i className='iconfont icon-cross'/>
</div>
</div>
</div>
)
}
Expand Down
111 changes: 111 additions & 0 deletions src/components/Tab/Tab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,5 +48,116 @@
color: #f4ab1e;
}
}
.addBtnContainer{
width:100%;
height:100vh;
position: absolute;
left:0;
bottom:0;
animation: change 0.5s linear;
.shadow{
width:100%;
height:100vh;
background-color: #fff;
opacity:0.8;
position: absolute;
left:0;
bottom:0;
}
.addBtn{
position: absolute;
width:260px;
.iconContainer{
width:144px;
height:144px;
line-height: 144px;
text-align: center;
border-radius: 50%;
margin:0 auto;
i{
font-size: 82px;
color: #fff;
display: inline-block;
}
}
.title{
font-size:28px;
color:#111;
text-align: center;
height:60px;
line-height: 60px;
}
.describe{
font-size:16px;
color:#333;
text-align: center;
}
}
.addBtn1{
left:40px;
bottom:120px;
animation: btnChange1 0.5s linear;
.iconContainer{
background-color: #ffa269;
}
}
.addBtn2{
left:250px;
bottom:340px;
animation: btnChange2 0.5s linear;
.iconContainer{
background-color: #aee4ea;
}
}
.addBtn3{
right:40px;
bottom:120px;
animation: btnChange3 0.5s linear;
.iconContainer{
background-color: #fbd734;
}
}
.closeBtn{
display: inline-block;
width:86px;
height:86px;
border-radius: 50%;
background-color: #f4ab1e;
line-height:86px;
text-align: center;
position: absolute;
left:330px;
bottom:10px;
i{
display: inline-block;
font-size: 38px;
color: #fff;
vertical-align: top;
}
}
}
@keyframes change {
0%{opacity:0;}
50%{opacity:0.5;}
100%{opacity:1;}
}
@keyframes btnChange1 {
0%{left:330px;
bottom:10px;}
100%{left:40px;
bottom:120px;}
}
@keyframes btnChange2 {
0%{left:250px;
bottom:10px;}
100%{left:250px;
bottom:340px;}
}
@keyframes btnChange3 {
0%{right:240px;
bottom:10px;}
100%{right:40px;
bottom:120px;}
}
}

139 changes: 76 additions & 63 deletions src/pages/Discover/Discover.js
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,96 @@
import React, {Component} from 'react';
import Header from './Header/Header';
import Tab from 'components/Tab/Tab';
import Loading from 'components/Loading/Loading';

import {connect} from 'react-redux';

import {request} from "actions/discover";

import styles from './Discover.scss'
export default class Discover extends Component {

class Discover extends Component {
constructor(props){
super(props)
this.state = {
active: '0'
}
}
componentDidMount(){
this.props.request();
}

render() {
let arg = {name:'discover'}
const {content,reload,loading} = this.props.discover;

const click = (e)=>{
this.setState({active: e.target.getAttribute("mark")})
this.props.request()
}
return (
<div className={styles.container}>
<Header/>
<div className={styles.content}>
<div className={styles.tab}>
<div className={styles.btnContainer}>
<div className={styles.on}>圈子</div>
</div>
<div className={styles.btnContainer}>
<div>关注</div>
</div>
</div>
<div className={styles.swiper}/>
<div className={styles.item}>
<div className={styles.imgContainer}>
<img src={require('./images/avatar1.png')} alt=""/>
</div>
<div className={styles.detail}>
<div className={styles.title}>巴拉巴拉拉</div>
<div className={styles.time}>刚刚发表</div>
<div className={styles.describe}><i>#首届厨艺大赛#</i>自己做的芒果蛋糕、披萨和榴莲月饼，做的不好请大家多多包涵，希望各位朋友多多点赞，随便帮我点一下上次发的参赛作品，谢谢大家了！</div>
<div className={styles.product}>
<img src={require('./images/product1.png')} alt=""/>
<img src={require('./images/product2.png')} alt=""/>
<img src={require('./images/product3.png')} alt=""/>
</div>
<div className={styles.bottom}>
<div className={styles.left}>来自 OPPO x6</div>
<div className={styles.right}>
<div className={styles.comment}>
<i className='iconfont icon-pinglun'/>
<s>3</s>
</div>
<div className={styles.good}>
<i className='iconfont icon-dianzan'/>
<s>16</s>
{
['圈子','关注'].map((item, index)=>{
return (
<div className={styles.btnContainer} key={index}>
<div onClick={click}
mark={index}
style = {(index == this.state.active) ? {'borderBottomColor': '#f4ab1e','color': '#f4ab1e'}:null}>
{item}
</div>
</div>
</div>
</div>
</div>
)
})
}
</div>
<div className={styles.item}>
<div className={styles.imgContainer}>
<img src={require('./images/avatar2.png')} alt=""/>
</div>
<div className={styles.detail}>
<div className={styles.title}>樱桃小丸子</div>
<div className={styles.time}>刚刚发表</div>
<div className={styles.describe}><i>#下午茶#</i>受台风影响，今儿个算是凉快了。午睡过后，来点下午茶，准备一些自己亲手做的小点心，外加一杯卡布奇诺，吹吹小风，这日子真惬意....</div>
<div className={styles.product}>
<img src={require('./images/product4.png')} alt=""/>
<img src={require('./images/product5.png')} alt=""/>
<img src={require('./images/product6.png')} alt=""/>
</div>
<div className={styles.bottom}>
<div className={styles.left}>来自 OPPO x6</div>
<div className={styles.right}>
<div className={styles.comment}>
<i className='iconfont icon-pinglun'/>
<s>3</s>
</div>
<div className={styles.good}>
<i className='iconfont icon-dianzan'/>
<s>16</s>
<div className={styles.swiper}/>
{
loading ?
<Loading reload={reload} request={this.props.request}/>
:
content.map((item, index) => {
return(
<div className={styles.item} key={index}>
<div className={styles.imgContainer}>
<img src={require('./images/avatar'+(index+1)+'.png')} alt=""/>
</div>
<div className={styles.detail}>
<div className={styles.title}>{item.name}</div>
<div className={styles.time}>{item.time}</div>
<div className={styles.describe}><i>#{item.group}#</i>{item.content}</div>
<div className={styles.product}>
<img src={require('./images/product'+(index+3)+'.png')} alt=""/>
<img src={require('./images/product'+(index+4)+'.png')} alt=""/>
<img src={require('./images/product'+(index+5)+'.png')} alt=""/>
</div>
<div className={styles.bottom}>
<div className={styles.left}>来自 {item.phone}</div>
<div className={styles.right}>
<div className={styles.comment}>
<i className='iconfont icon-pinglun'/>
<s>{item.comment}</s>
</div>
<div className={styles.praise}>
<i className='iconfont icon-dianzan'/>
<s>{item.praise}</s>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
})
}
</div>
<Tab {...arg}/>
</div>
)
}
}
}
export default connect((state) => ({
discover: state.discover,
}), {request})(Discover);
2 changes: 1 addition & 1 deletion src/pages/Discover/Discover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
margin-left: 10px;
}
}
.good{
.praise{
float: right;
i{
font-size: 32px;
Expand Down
26 changes: 20 additions & 6 deletions src/pages/Market/List/List.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,33 @@ import Loading from 'components/Loading/Loading';


export default class List extends Component {
constructor(props){
super(props)
this.state = {
active: '0'
}
}

render() {
const click = ()=>{
const click = (e)=>{
this.setState({active: e.target.getAttribute("mark")})
this.props.requestCategory()
}
return (
<div className={styles.container}>
<div className={styles.tab}>
<div className={styles.on} onClick={click}>乳制品</div>
<div onClick={click}>烘培工具</div>
<div onClick={click}>模具</div>
<div onClick={click}>辅料</div>
<div onClick={click}>烘焙包装</div>
{
['乳制品','烘培工具','模具','辅料','烘焙包装'].map((item, index)=>{
return (
<div onClick={click}
key={index}
mark={index}
style = {(index == this.state.active) ? {'borderBottomColor': '#f4ab1e','color': '#f4ab1e'}:null}>
{item}
</div>
)
})
}
</div>
<div className={styles.itemContainer}>
{
Expand Down
Loading

0 comments on commit 98e3a75

Please sign in to comment.