Skip to content

C
cloudlink
提交 b9ed4cc8 authored 作者: zengBB96's avatar zengBB96
浏览文件
操作

搜索，地区，导航栏

上级 9b3822db
隐藏空白字符变更
内嵌 并排
正在显示 包含 98 行增加 和 103 行删除
20190226111443945/src/App.js
浏览文件 @ b9ed4cc8
......@@ -3,7 +3,7 @@ import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Route from 'react-router-dom/Route';
import Router from 'react-router-dom/Router';
import { Router } from 'react-router-dom';
import createHistory from 'history/createHashHistory';
const history = createHistory();
// import { BrowserRouter } from 'react-router-dom';
......@@ -64,45 +64,6 @@ export default class App extends React.Component {
/>
</Router>
{/* <Tab>
<TabBody>
<Article style={{ display: this.state.tab === 0 ? null : 'none' }}>
<h1>Page 1</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>1.1 Title</h3>
<p>Lorem ipsum dolor sit amet,</p>
</section>
</section>
</Article>
<Article style={{ display: this.state.tab === 1 ? null : 'none' }}>
<h1>Page 2</h1>
<section>
<h2 className="title">Heading</h2>
<section>
<h3>1.2 Title</h3>
<p>Lorem ipsum dolor sit amet,</p>
</section>
</section>
</Article>
</TabBody>
<TabBar>
<TabBarItem
active={this.state.tab === 0}
onClick={e=>this.setState({ tab: 0 })}
icon={<img src={TabBarlist} alt="" />}
label="Tab1"
/>
<TabBarItem active={this.state.tab === 1} onClick={e=>this.setState({ tab: 1 })}>
<TabBarIcon>
<img src={TabBarroom} alt="" />
</TabBarIcon>
<TabBarLabel>Tab2</TabBarLabel>
</TabBarItem>
</TabBar>
</Tab> */}
</div>
);
......
20190226111443945/src/app.less
浏览文件 @ b9ed4cc8
/*全局css样式*/
* {
// background: #F1F1F1;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
......
20190226111443945/src/components/Footer/index.js
浏览文件 @ b9ed4cc8
......@@ -2,35 +2,35 @@
import React from 'react';
import './index.less';
import { Tab, TabBar, TabBarItem } from 'react-weui';
import { browserHistory } from 'react-router';
// import { Link } from 'react-router-dom';
// import { browserHistory } from 'react-router';
import UnTabBarlist from '../../../public/images/meeting.png';
import TabBarlist from '../../../public/images/meeting2.png';
import UnTabBarmeet from '../../../public/images/room.png';
import TabBarmeet from '../../../public/images/room2.png';
import UnTabBarordain from '../../../public/images/ordain.png';
import TabBarordain from '../../../public/images/ordain2.png';
import UnTabBarmy from '../../../public/images/my.png';
import TabBarmy from '../../../public/images/my2.png';
// import UnTabBarmeet from '../../../public/images/room.png';
// import TabBarmeet from '../../../public/images/room2.png';
// import UnTabBarordain from '../../../public/images/ordain.png';
// import TabBarordain from '../../../public/images/ordain2.png';
// import UnTabBarmy from '../../../public/images/my.png';
// import TabBarmy from '../../../public/images/my2.png';
import MyTabIcon from '../MyTabIcon';
export default class Footer extends React.Component {
state={
// eslint-disable-next-line react/no-unused-state
tab: 0
}
componentWillMount() {
}
componentDidMount() {
}
linktoHome = (e) => {
this.setState({ tab: 0 });
console.log(this.props);
linktoHome = (event) => {
// this.setState({ tab: 0 });
// console.log(this.props);
// browserHistory.push(this.newMethod('/home'));
}
};
newMethod() {
return '/home';
......@@ -41,29 +41,46 @@ export default class Footer extends React.Component {
<div className="footer-container">
<Tab>
<TabBar>
<TabBarItem
// eslint-disable-next-line react/destructuring-assignment
active={this.state.tab === 0}
onClick={this.linktoHome}
icon={this.state.tab === 0 ? <img src={TabBarlist} alt="" /> : <img src={UnTabBarlist} alt="" />}
label="会议室"
/>
{/* <TabBarItem active={this.state.tab === 1} onClick={e=>this.setState({ tab: 1 })}>
<Link to="/desc">
<TabBarIcon>
<img src={TabBarmeet} alt="" />
</TabBarIcon>
<TabBarLabel>Tab2</TabBarLabel>
</Link>
</TabBarItem> */}
<TabBarItem
// eslint-disable-next-line react/destructuring-assignment
active={this.state.tab === 1}
onClick={e=>this.setState({ tab: 1 })}
icon={this.state.tab === 1 ? <img src={TabBarmeet} alt="" /> : <img src={UnTabBarmeet} alt="" />}
label="预定"
/>
<TabBarItem
{/* <Link to="/meeting">
<TabBarItem
// eslint-disable-next-line react/destructuring-assignment
active={this.state.tab === 0}
onClick={this.linktoHome}
icon={this.state.tab === 0 ? <img src={TabBarlist} alt="" /> : <img src={UnTabBarlist} alt="" />}
label="会议室"
/>
</Link> */}
<TabBarItem active={this.state.tab === 0} onClick={e=>this.setState({ tab: 0 })}>
<MyTabIcon url="/home" imgUrl={this.state.tab === 0 ? TabBarlist : UnTabBarlist} label="会议室" />
</TabBarItem>
<TabBarItem active={this.state.tab === 1} onClick={e=>this.setState({ tab: 1 })}>
<MyTabIcon url="/meeting" imgUrl={this.state.tab === 1 ? TabBarlist : UnTabBarlist} label="预定" />
</TabBarItem>
<TabBarItem active={this.state.tab === 2} onClick={e=>this.setState({ tab: 2 })}>
<MyTabIcon url="/schedule" imgUrl={this.state.tab === 2 ? TabBarlist : UnTabBarlist} label="日程" />
</TabBarItem>
<TabBarItem active={this.state.tab === 3} onClick={e=>this.setState({ tab: 3 })}>
<MyTabIcon url="/my" imgUrl={this.state.tab === 3 ? TabBarlist : UnTabBarlist} label="我的" />
</TabBarItem>
{/* <Link to="/meeting">
<TabBarItem
// eslint-disable-next-line react/destructuring-assignment
active={this.state.tab === 1}
onClick={e=>this.setState({ tab: 1 })}
icon={this.state.tab === 1 ? <img src={TabBarmeet} alt="" /> : <img src={UnTabBarmeet} alt="" />}
label="预定"
/>
</Link> */}
{/* <TabBarItem
// eslint-disable-next-line react/destructuring-assignment
active={this.state.tab === 2}
onClick={e=>this.setState({ tab: 2 })}
......@@ -76,7 +93,7 @@ export default class Footer extends React.Component {
onClick={e=>this.setState({ tab: 3 })}
icon={this.state.tab === 3 ? <img src={TabBarmy} alt="" /> : <img src={UnTabBarmy} alt="" />}
label="我的"
/>
/> */}
</TabBar>
</Tab>
</div>
......
20190226111443945/src/routes/Desc/index.js
浏览文件 @ b9ed4cc8
/* eslint-disable react/sort-comp */
import React from 'react';
import { Article } from '@wecode/react-weui';
import { Link } from 'react-router-dom';
import Footer from '../../components/Footer';
import './index.less';
import search1 from '../../../public/images/search1.png';
import search2 from '../../../public/images/search2.png';
import search3 from '../../../public/images/search3.png';
export default class Desc extends React.Component {
componentWillMount() {
window.HWH5.navTitle({ title: '框架说明' });
window.HWH5.navTitle({ title: '搜索会议室' });
}
componentDidMount() {}
handleClick=()=>{
}
render() {
return (
<div>
<Article>
<h1>框架说明</h1>
<h2>一套 weui 设计语言和 React 实现：</h2>
<ul className="advantage">
<li> 符合官方交互语言和视觉风格。</li>
<li> 开箱即用的高质量 React 组件。</li>
<li> 本地开发自动检测JSAPI新版本并集成到开发环境。</li>
<li> 使用 eslint，按照规则给出报告的代码检测工具,避免低级错误和统一代码的风格。</li>
<li>
基于 npm + webpack + react + redux + less + jsapi + weui（mit license），
的快速开发本地化的框架。
</li>
</ul>
</Article>
<div className="search">
<img src={search1} alt="" />
<Link to="./pick"><img src={search2} alt="" /></Link>
<img src={search3} alt="" />
</div>
<Footer />
</div>
);
}
......
20190226111443945/src/routes/Desc/index.less
浏览文件 @ b9ed4cc8
.advantage {
list-style: circle;
padding-left: 20px;
li {
margin-bottom: 10px;
}
.search img{
width: 100%;
height: 100%;
}
20190226111443945/src/routes/Meeting/index.js
浏览文件 @ b9ed4cc8
import React from 'react';
import './index.less';
import Footer from '../../components/Footer';
import Ordainmeet from '../../../public/images/ordainmeet.png';
export default class Meeting extends React.Component {
componentWillMount() {
window.HWH5.navTitle({ title: '预定会议' });
}
componentDidMount() {
......@@ -11,7 +14,12 @@ export default class Meeting extends React.Component {
render() {
return (
<div>Meeting</div>
<div>
<div className="Ordainmeet">
<img src={Ordainmeet} alt="" />
</div>
<Footer />
</div>
);
}
};
20190226111443945/src/routes/Meeting/index.less
浏览文件 @ b9ed4cc8
.Ordainmeet img{
width: 100%;
height: auto;
}
\ No newline at end of file
20190226111443945/src/routes/index.js
浏览文件 @ b9ed4cc8
......@@ -6,11 +6,17 @@
import { AsyncComponent } from '@wecode/wlk-react-template-util';
import Home from './Home';
import Meeting from './Meeting';
import Schedule from './Schedule';
import My from './My';
import Pick from './Pick';
// webpackChunkName 可指定模块名称，访问路由按需加载
const routes = [
{ path: '/', component: Home, exact: true },
{ path: '/home', component: Home, exact: true },
{ path: '/meeting', component: Meeting, exact: true },
{ path: '/schedule', component: Schedule, exact: true },
{ path: '/my', component: My, exact: true },
{ path: '/pick', component: Pick, exact: true },
{ path: '/desc', component: AsyncComponent(() => import('./Desc')) }
];
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论