import React from 'react';
import Style from '@/commonality/queryTime/TimeTabs.less'
class TimeTabs extends React.Component {
constructor(props) {
super(props)
}
state = {
tabs: [
{name: '常用时间', id: 1},
{name: '相对时间', id: 2},
{name: '绝对时间', id: 3},
],
currentIndex: 1
}
handleClick = (id) => {
this.setState({
currentIndex: id
})
}
render() {
const wrap = {
fontFamily: 'NotoSansCJKsc-DemiLight',
fontSize: '10px',
color: '#C0C1C4',
letterSpacing: '-0.24px',
lineHeight: '16px',
marginTop: '6px'
}
const frame = {
height: '110px',
width: '95px',
textAlign: 'center',
display: 'table'
}
const vertical = {
display: 'table-cell',
verticalAlign: 'middle'
}
let _this = this;
let isBox1Show=this.state.currentIndex==1 ? 'block' : 'none';
let isbox2Show=this.state.currentIndex==2 ? 'block' : 'none';
let isbox3Show=this.state.currentIndex==3 ? 'block' : 'none';
let tabList = this.state.tabs.map((e, i) => {
let tabStyle = e.id === this.state.currentIndex ? `${Style.active}` : ''; //通过id进行切换
let imgStyle = e.id === this.state.currentIndex //通过id进行切换图片
? `${require('../../assets/calendarBLue.png')}`
: `${require('../../assets/calendar.png')}`
return (
<li key={i} onClick={this.handleClick.bind(_this, e.id)} className={tabStyle} style={frame}>
{/**this.handleClick.bind(_this, e.id) handleClic(e.id) => {}*/}
<div style={vertical}>
<img src={imgStyle}/>
<div style={wrap}>{e.name}</div>
</div>
</li>
)
})
return (
<div style={{ display: 'flex' }}>
<div>
<ul style={{ background: '#011024', width: '110px', padding: '0'}}>
{tabList}
</ul>
</div>
<div>
<div style={{ display: `${isBox1Show}` }}>
1
</div>
<div style={{ display: `${isbox2Show}` }}>
2
</div>
<div style={{ display: `${isbox3Show}` }}>
3
</div>
</div>
</div>
)
}
}
export default TimeTabs
less 文件
.active {
border-left: 4px solid #00BFF1;
height: 110px;
width: 95px;
text-align: center;
display: table;
div {
color: #00BFF1 !important
}
}