Skip to content

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

首页，导航栏

上级 f7122329
显示空白字符变更
内嵌 并排
正在显示 包含 109 行增加 和 116 行删除
20190226111443945/src/App.js
浏览文件 @ 9336a7c6
/* eslint-disable react/destructuring-assignment */
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 createHistory from 'history/createHashHistory';
import { Tab, TabBarItem, TabBar } from 'react-weui';
const history = createHistory();
// import { BrowserRouter } from 'react-router-dom';
/*
全局导入less
*/
import './app.less';
import * as global from 'actions/global';
import routes from './routes';
@connect(
......@@ -21,6 +21,11 @@ import routes from './routes';
)
export default class App extends React.Component {
state={
// eslint-disable-next-line react/no-unused-state
tab: 0
}
componentDidMount() {
window.addEventListener('hashchange', () => {
});
......@@ -51,24 +56,54 @@ export default class App extends React.Component {
component={route.component}
/>
));
}
}
}
/>
</Router>
<Tab type="tabbar">
{/* <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 label="会议">
{i18n.t('home:meeting')}
</TabBarItem>
<TabBarItem label="预定">
预定
</TabBarItem>
<TabBarItem label="我的">
我的
<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>
</Tab> */}
</div>
);
}
......
20190226111443945/src/components/MyTab/index.js deleted 100644 → 0
浏览文件 @ f7122329
import React from 'react';
import './index.less';
import { Tab, TabBarItem, TabBar } from 'react-weui';
import { Link } from 'react-router-dom';
import i18n from 'i18n';
// import { meetingIcon } from '../../../build/apps/20190226111443945/1.0.0/images';
export default class MyTab extends React.Component {
componentWillMount() {
}
componentDidMount() {
}
render() {
return (
<Tab type="tabbar">
<TabBar>
<TabBarItem label="会议">
<Link to="/meeting">{i18n.t('home:meeting')}</Link>
</TabBarItem>
<TabBarItem label="预定">
<Link to="/meeting">预定</Link>
</TabBarItem>
<TabBarItem label="我的">
<Link to="/meeting">我的</Link>
</TabBarItem>
</TabBar>
</Tab>
);
}
};
20190226111443945/src/components/MyTab/package.json deleted 100644 → 0
浏览文件 @ f7122329
{
"name": "index",
"version": "1.0.0",
"private": true,
"main": "./index.js"
}
20190226111443945/src/routes/Home/index.js
浏览文件 @ 9336a7c6
/* eslint-disable react/destructuring-assignment */
/* eslint-disable no-undef */
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
// import { SearchBar } from 'react-weui';
import PropTypes from 'prop-types';
import i18n from 'i18n';
import { Link } from 'react-router-dom';
import * as home from '../../actions/home';
import * as global from '../../actions/global';
import { Tab, TabBarItem, TabBar } from 'react-weui';
import './index.less';
import MyTab from '../../components/MyTab';
// import { MyTab } from '../../components/MyTab';
import Footer from '../../components/Footer';
import seach from '../../../public/images/search.png';
import Indeximg from '../../../public/images/index.png';
// import Banner from '../../../public/images/banner.png';
@connect(
state => ({ ...state.home }),
dispatch => bindActionCreators({ ...home, ...global }, dispatch)
)
export default class Home extends React.Component {
async componentWillMount() {
window.HWH5.navTitle({ title: 'Hello World' });
// window.HWH5.navTitle({ title: 'Hello World' });
HWH5.navTitle({ title: 'UBAINS会议' }).catch(error => {
console.log('设置标题异常', error);
});
const {
homeInfo, dataList, getHomeInfo, getFetchDemo
} = this.props;
......@@ -40,13 +47,23 @@ export default class Home extends React.Component {
}
render() {
return (
<div className="App">
helloworld
return (
<div className="container">
<div className="banner">
<div className="seach">
<Link to="/desc">
<img src={seach} alt="" />
<input type="text" placeholder="请输入会议室名称、状态…" disabled="disabled" />
</Link>
</div>
</div>
{/* <Seach>123</Seach> */}
<div className="indeximg">
<img src={Indeximg} alt="" />
</div>
<Footer />
</div>
);
}
}
......
20190226111443945/src/routes/Home/index.less
浏览文件 @ 9336a7c6
.App {
padding: 10px;
.App-logo {
margin: 20px 0;
text-align: center;
}
.App-header {
height: 90px;
text-align: center;
}
.App-title {
margin-bottom: 30px;
font-size: 1.5em;
text-align: center;
}
.App-intro {
margin-bottom: 10px;
font-size: large;
}
.desc-link {
display: block;
width: 100px;
height: 50px;
margin: 0 auto;
margin-top: 30px;
color: #2b88e6;
font-size: 14px;
.banner{
width: 100%;
height: 137px;
background: url(../../../public/images/banner.png) no-repeat;
background-size: cover;
}
.seach{
width: 60%;
height: 40px;
background:rgba(0, 0, 0, .5);
border-radius: 20px;
text-align: center;
}
.develop-doc {
h3 {
margin-bottom: 5px;
}
ul {
list-style: circle;
padding-left: 30px;
}
li {
margin-bottom: 5px;
color: #2b88e6;
cursor: pointer;
}
}
position: relative;
top: 28%;
left: 18%;
}
.seach img{
display: inline-block;
width: 20px;
height: 20px;
margin: 10px 12px;
}
.seach input{
border: none;
background: none;
color: #fff;
margin: 12px 0;
}
.indeximg img{
width: 100%;
height: auto;
margin-bottom: 50px;
}
20190226111443945/src/routes/index.js
浏览文件 @ 9336a7c6
......@@ -9,6 +9,7 @@ import Meeting from './Meeting';
// webpackChunkName 可指定模块名称，访问路由按需加载
const routes = [
{ path: '/', component: Home, exact: true },
{ path: '/home', component: Home, exact: true },
{ path: '/meeting', component: Meeting, exact: true },
{ path: '/desc', component: AsyncComponent(() => import('./Desc')) }
];
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论