Skip to content

J
JTWXWebApp
提交 067e13c4 authored 作者: 吴强's avatar 吴强
浏览文件
操作

first deploy version commit

上级 cdea8183
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 426 行增加 和 133 行删除
.webpackrc.js
浏览文件 @ 067e13c4
...@@ -47,7 +47,10 @@ module.exports = { ...@@ -47,7 +47,10 @@ module.exports = {
}, },
env: { env: {
development: { development: {
publicPath: "/",
define: {
_BASENAME_: '/',
},
extraBabelPlugins: [ extraBabelPlugins: [
'dva-hmr', 'dva-hmr',
["import", {"libraryName": "antd-mobile", "style": true}], ["import", {"libraryName": "antd-mobile", "style": true}],
...@@ -62,6 +65,7 @@ module.exports = { ...@@ -62,6 +65,7 @@ module.exports = {
"production": { "production": {
publicPath: "/bm-wx/", publicPath: "/bm-wx/",
define: { define: {
_BASENAME_: '/bm-wx',
contextPath: "/bm-wx", contextPath: "/bm-wx",
apiContextPath: "/bm-wx" apiContextPath: "/bm-wx"
}, },
......
src/components/CardViewOne.js
浏览文件 @ 067e13c4
...@@ -6,70 +6,140 @@ import { ...@@ -6,70 +6,140 @@ import {
} from 'antd-mobile'; } from 'antd-mobile';
class MyTopCard extends React.Component{ class MyTopCard extends React.Component{
render(){ render(){
return( const SummaryData=this.props.data;
<div> if(SummaryData==null)
<WhiteSpace size="lg" style={{background:"#eee"}} /> {
<Card full> return(
<Card.Header <div>
title={ <WhiteSpace size="lg" style={{background:"#eee"}} />
<div style={{fontSize:"0.85rem"}}> <Card full>
<span style={ {paddingRight:"0.75rem",color:'#38c5b8',fontWeight:"600"}}>总证数</span> <Card.Header
<span >18162</span> title={
</div> <div style={{fontSize:"0.85rem"}}>
} <span style={ {paddingRight:"0.75rem",color:'#38c5b8',fontWeight:"600"}}>总证数</span>
style={ {padding:"1.2rem 1.3rem",color:'#38c5b8'}} <span >0</span>
/> </div>
<Card.Body style={{padding:"0 1.5rem",fontSize:"0.7rem"}}> }
<Flex style={{padding:"1rem 0"}}> style={ {padding:"1.2rem 1.3rem",color:'#38c5b8'}}
<Flex.Item style={{marginRight:"0.75rem"}}> />
<Flex style={{justifyContent:"space-between"}}> <Card.Body style={{padding:"0 1.5rem",fontSize:"0.7rem"}}>
<div>已签约证数</div> <Flex style={{padding:"1rem 0"}}>
<div>16955</div> <Flex.Item style={{marginRight:"0.75rem"}}>
</Flex> <Flex style={{justifyContent:"space-between"}}>
</Flex.Item> <div>已签约证数</div>
<Flex.Item style={{marginLeft:"0.75rem"}}> <div>0</div>
<Flex style={{justifyContent:"space-between"}}> </Flex>
<div>证均成本</div> </Flex.Item>
<div>3544940.25</div> <Flex.Item style={{marginLeft:"0.75rem"}}>
</Flex> <Flex style={{justifyContent:"space-between"}}>
</Flex.Item> <div>证均成本</div>
</Flex> <div>0</div>
</Flex>
</Flex.Item>
</Flex>
<Flex style={{padding:"1rem 0"}}> <Flex style={{padding:"1rem 0"}}>
<Flex.Item style={{marginRight:"0.75rem"}}> <Flex.Item style={{marginRight:"0.75rem"}}>
<Flex style={{justifyContent:"space-between"}}> <Flex style={{justifyContent:"space-between"}}>
<div>安置房套数</div> <div>安置房套数</div>
<div>18473</div> <div>0</div>
</Flex> </Flex>
</Flex.Item> </Flex.Item>
<Flex.Item style={{marginLeft:"0.75rem"}}> <Flex.Item style={{marginLeft:"0.75rem"}}>
<Flex style={{justifyContent:"space-between"}}> <Flex style={{justifyContent:"space-between"}}>
<div>面积成本</div> <div>面积成本</div>
<div>123131.87</div> <div>0</div>
</Flex> </Flex>
</Flex.Item> </Flex.Item>
</Flex> </Flex>
<Flex style={{padding:"1rem 0"}}> <Flex style={{padding:"1rem 0"}}>
<Flex.Item style={{marginRight:"0.75rem"}}> <Flex.Item style={{marginRight:"0.75rem"}}>
<Flex style={{justifyContent:"space-between"}}> <Flex style={{justifyContent:"space-between"}}>
<div>产权调换比例</div> <div>产权调换比例</div>
<div>52.35%</div> <div>0</div>
</Flex> </Flex>
</Flex.Item> </Flex.Item>
<Flex.Item style={{marginLeft:"0.75rem"}}> <Flex.Item style={{marginLeft:"0.75rem"}}>
<Flex style={{justifyContent:"space-between"}}> <Flex style={{justifyContent:"space-between"}}>
<div>货币补偿比例</div> <div>货币补偿比例</div>
<div>3544940.25</div> <div>0</div>
</Flex> </Flex>
</Flex.Item> </Flex.Item>
</Flex> </Flex>
<WhiteSpace size="lg" />
</Card.Body>
</Card>
</div>
);
}else{
return(
<div>
<WhiteSpace size="lg" style={{background:"#eee"}} />
<Card full>
<Card.Header
title={
<div style={{fontSize:"0.85rem"}}>
<span style={ {paddingRight:"0.75rem",color:'#38c5b8',fontWeight:"600"}}>总证数</span>
<span >{SummaryData[0].xiangMuZongHuShu}</span>
</div>
}
style={ {padding:"1.2rem 1.3rem",color:'#38c5b8'}}
/>
<Card.Body style={{padding:"0 1.5rem",fontSize:"0.7rem"}}>
<Flex style={{padding:"1rem 0"}}>
<Flex.Item style={{marginRight:"0.75rem"}}>
<Flex style={{justifyContent:"space-between"}}>
<div>已签约证数</div>
<div>{SummaryData[0].yiQianYueHuShu}</div>
</Flex>
</Flex.Item>
<Flex.Item style={{marginLeft:"0.75rem"}}>
<Flex style={{justifyContent:"space-between"}}>
<div>证均成本</div>
<div>{SummaryData[0].zhengJunChengBen}</div>
</Flex>
</Flex.Item>
</Flex>
<Flex style={{padding:"1rem 0"}}>
<Flex.Item style={{marginRight:"0.75rem"}}>
<Flex style={{justifyContent:"space-between"}}>
<div>安置房套数</div>
<div>{SummaryData.anZhiFangTaoShu}</div>
</Flex>
</Flex.Item>
<Flex.Item style={{marginLeft:"0.75rem"}}>
<Flex style={{justifyContent:"space-between"}}>
<div>面积成本</div>
<div>{SummaryData.mianJiChengBen}</div>
</Flex>
</Flex.Item>
</Flex>
<Flex style={{padding:"1rem 0"}}>
<Flex.Item style={{marginRight:"0.75rem"}}>
<Flex style={{justifyContent:"space-between"}}>
<div>产权调换比例</div>
<div>{SummaryData.chanQuanDiaoHuanBiLi}</div>
</Flex>
</Flex.Item>
<Flex.Item style={{marginLeft:"0.75rem"}}>
<Flex style={{justifyContent:"space-between"}}>
<div>货币补偿比例</div>
<div>{SummaryData.huoBiBuChangBiLi}</div>
</Flex>
</Flex.Item>
</Flex>
<WhiteSpace size="lg" />
</Card.Body>
</Card>
</div>
);
}
<WhiteSpace size="lg" />
</Card.Body>
</Card>
</div>
);
} }
} }
export default MyTopCard; export default MyTopCard;
src/components/CardViewTwo.js
浏览文件 @ 067e13c4
import React from 'react'; import React from 'react';
import { withRouter } from "react-router-dom";
import styles from './CardViewTwoStyles.less'; import styles from './CardViewTwoStyles.less';
import { import {
Badge, Badge,
...@@ -8,6 +9,17 @@ import { ...@@ -8,6 +9,17 @@ import {
WingBlank, WingBlank,
} from 'antd-mobile'; } from 'antd-mobile';
class MyBodyCard extends React.Component{ class MyBodyCard extends React.Component{
pushRoute=(item)=>{
try{
console.info(item);
this.props.history.push(`/SearchPage/${item.jDName}`);
}catch (e)
{
console.info(e);
}
};
render(){ render(){
const arrayData=this.props.data; const arrayData=this.props.data;
console.info(arrayData); console.info(arrayData);
...@@ -18,26 +30,27 @@ class MyBodyCard extends React.Component{ ...@@ -18,26 +30,27 @@ class MyBodyCard extends React.Component{
arrayData.map((item,index)=>{ arrayData.map((item,index)=>{
return ( return (
<div key={index}> <div key={index}>
<Card full> <Card full onClick={()=>this.pushRoute(item)}>
<Card.Header style={ {padding:"0",color:'#38c5b8',fontSize:"0.85rem"}} <Card.Header
title={ style={ {padding:"0",color:'#38c5b8',fontSize:"0.85rem"}}
<div style={ {padding:"1.2rem 1.3rem",color:'#38c5b8',width:"100%"}}> title={
<Flex style={{justifyContent:"space-between",alignItems:"flex-start"}}> <div style={ {padding:"1.2rem 1.3rem",color:'#38c5b8',width:"100%"}}>
<Flex.Item> <Flex style={{justifyContent:"space-between",alignItems:"flex-start"}}>
<Flex style={{alignItems:"flex-start"}}> <Flex.Item>
<p style={ {paddingRight:"0.75rem",color:'#666',fontWeight:"500"}}>{item.index>=10?item.index:`0${item.index}`}</p> <Flex style={{alignItems:"flex-start"}}>
<p style={{color:"#000"}}>{item.jDName}</p> <p style={ {paddingRight:"0.75rem",color:'#666',fontWeight:"500"}}>{item.index>=10?item.index:`0${item.index}`}</p>
</Flex> <p style={{color:"#000"}}>{item.jDName}</p>
</Flex.Item> </Flex>
<Flex.Item style={{textAlign:"right"}}> </Flex.Item>
<div style={{width:"6rem",display:"inline-block",borderRadius:"0.6rem",background:"#caf6f0",textAlign:"center",fontSize:"0.7rem"}}> <Flex.Item style={{textAlign:"right"}}>
<span style={ {paddingRight:"0.75rem",color:'#000',fontWeight:"500"}}>总证数</span> <div style={{width:"6rem",display:"inline-block",borderRadius:"0.6rem",background:"#caf6f0",textAlign:"center",fontSize:"0.7rem"}}>
<span style={{color:"#000"}}>{item.xiangMuZongHuShu}</span> <span style={ {paddingRight:"0.75rem",color:'#000',fontWeight:"500"}}>总证数</span>
</div> <span style={{color:"#000"}}>{item.xiangMuZongHuShu}</span>
</Flex.Item> </div>
</Flex> </Flex.Item>
</div> </Flex>
} </div>
}
/> />
<Card.Body> <Card.Body>
<Flex> <Flex>
...@@ -85,4 +98,4 @@ class MyBodyCard extends React.Component{ ...@@ -85,4 +98,4 @@ class MyBodyCard extends React.Component{
} }
} }
} }
export default MyBodyCard; export default withRouter(MyBodyCard);
src/index.js
浏览文件 @ 067e13c4
...@@ -6,10 +6,9 @@ console.log('index.js'); ...@@ -6,10 +6,9 @@ console.log('index.js');
// 1. Initialize // 1. Initialize
const app = dva({ const app = dva({
history: createBrowserHistory({ history: createBrowserHistory({
// eslint-disable-next-line no-undef
basename: 'bm-wx',
}), }),
// history: createBrowserHistory({
// basename: '/bm-wx',
// }),
}); });
// 2. Plugins // 2. Plugins
...@@ -19,7 +18,7 @@ const app = dva({ ...@@ -19,7 +18,7 @@ const app = dva({
app.model(require('./models/login').default); app.model(require('./models/login').default);
app.model(require('./models/Home/home').default); app.model(require('./models/Home/home').default);
app.model(require('./models/middleselect').default); app.model(require('./models/middleselect').default);
app.model(require('./models/Home/search').default);
// 4. Router // 4. Router
app.router(require('./router').default); app.router(require('./router').default);
......
src/models/Home/home.js
浏览文件 @ 067e13c4
...@@ -17,18 +17,33 @@ export default { ...@@ -17,18 +17,33 @@ export default {
effects: { effects: {
*getSummaryData({ payload }, { take, put, call, select }) { *getSummaryData({ payload }, { take, put, call, select }) {
const payloads = { userName:'admin',password:'admin', type: 'userName', authType: 'password' }; // const payloads = { userName:'admin',password:'admin', type: 'userName', authType: 'password' };
try{ // try{
const result = yield call(login, payloads); // const result = yield call(login, payloads);
console.info(result); // console.info(result);
const { tokenId } = result; // const { tokenId } = result;
yield call(setToken, tokenId);// 这里的yield ,跟C#中的await一样 // yield call(setToken, tokenId);// 这里的yield ,跟C#中的await一样
} // }
catch (erroer) { // catch (erroer) {
console.info(erroer); // console.info(erroer);
} // }
//
//
// const { pNumber } = payload;
// const coordinate = {
// containerType: 'module',
// containerName: 'QueryJiDiModule',
// datasourceName: 'QueryDistrictName',
// };
// try {
// const resultss = yield call(getData, coordinate, { pst: 0, psz: 10 ,params:{pNumber:pNumber}});
// console.info('查询的结果');
// console.info(resultss);
// yield put({ type: 'setSummaryData',payload:{resultss} });
// }catch (erroer){
// console.info(erroer);
// }
// 这是以后放到服务器时候用的代码，因为现在要测试，所以要先注释
const { pNumber } = payload; const { pNumber } = payload;
const coordinate = { const coordinate = {
containerType: 'module', containerType: 'module',
...@@ -43,21 +58,6 @@ export default { ...@@ -43,21 +58,6 @@ export default {
}catch (erroer){ }catch (erroer){
console.info(erroer); console.info(erroer);
} }
// 这是以后放到服务器时候用的代码，因为现在要测试，所以要先注释
// const { pNumber } = payload;
// const coordinate = {
// containerType: 'module',
// containerName: 'QueryJiDiModule',
// datasourceName: 'QueryDistrictName',
// };
// try {
// const resultss = yield call(getData, coordinate, { pst: 0, psz: 10 ,params:{pNumber:pNumber}});
// console.info('查询的结果');
// console.info(resultss);
// yield put({ type: 'setSummaryData',payload:{resultss} });
// }catch (erroer){
// console.info(erroer);
// }
}, },
*getSummary({ payload }, { take, put, call, select }) { *getSummary({ payload }, { take, put, call, select }) {
...@@ -65,7 +65,7 @@ export default { ...@@ -65,7 +65,7 @@ export default {
const coordinate = { const coordinate = {
containerType: 'module', containerType: 'module',
containerName: 'QueryJiDiModule', containerName: 'QueryJiDiModule',
datasourceName: 'QueryJiDiName', datasourceName: 'QueryTotalDistrictName',
}; };
try { try {
const resultss = yield call(getData, coordinate, { pst: 0, psz: 10 ,params:{pNumber:pNumber}}); const resultss = yield call(getData, coordinate, { pst: 0, psz: 10 ,params:{pNumber:pNumber}});
......
src/models/Home/search.js 0 → 100644
浏览文件 @ 067e13c4
import { getData } from '../../utils/DataTemplate';
import {login} from "../../services/login";
import {setToken} from "../../utils/auth";
export default {
namespace: 'search',
state: {
todayQianYue:null,
todayCheXiao:null,
suoDingTongJi:null,
shiWuSuoTongJi:null,
jinDuTongJi:null,
chengBenTongJi:null,
shiYongFangYuanTongJi:null,
jiDiFangYuanTongJi:null,
xiaoQuTongJi:null,
},
subscriptions: {
setup({ dispatch, history }) { // eslint-disable-line
},
},
effects: {
*getResult({ payload }, { take, put, call, select }) {
const { pjName,datasourceName,stateName} = payload;
const coordinate = {
containerType : 'module' ,
containerName : 'QueryPJModule',
datasourceName:datasourceName,
};
try {
const resultss = yield call(getData, coordinate, { pst: 0, psz: 10 ,params:{pjName:pjName}});
console.info('查询的结果');
console.info(resultss);
yield put({ type: 'setResult',payload:{stateName,resultss} });
}catch (erroer){
console.info(erroer);
}
},
},
reducers: {
setResult(state,{payload}){
console.info(payload.stateName);
console.info(payload.resultss);
return {...state,[`${payload.stateName}`]:payload.resultss};
},
},
};
src/models/login.js
浏览文件 @ 067e13c4
...@@ -56,7 +56,7 @@ export default { ...@@ -56,7 +56,7 @@ export default {
const wuqiang=yield call(checkYanZhengMa,telnum,YanZhengMa); const wuqiang=yield call(checkYanZhengMa,telnum,YanZhengMa);
if(wuqiang==="sucess") if(wuqiang==="sucess")
{ {
document.location="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3dcfb1de089346b3&redirect_uri=http%3a%2f%2fv4.free.ngrok.cc%2f&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect"; document.location="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3dcfb1de089346b3&redirect_uri=http%3a%2f%2fwww.shzdfwbc.net.cn%2fbm-wx%2f&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";
}else{ }else{
alert("登陆失败"); alert("登陆失败");
} }
......
src/router.js
浏览文件 @ 067e13c4
...@@ -2,6 +2,7 @@ import React from 'react'; ...@@ -2,6 +2,7 @@ import React from 'react';
import { Router, Route, Switch } from 'dva/router'; import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic'; import dynamic from 'dva/dynamic';
import MiddleSelectPage from "./routes/MiddleSelectPage"; import MiddleSelectPage from "./routes/MiddleSelectPage";
//import SearchPage from "./routes/Home/SearchPage";
function RouterConfig({ history, app }) { function RouterConfig({ history, app }) {
const IndexPage = dynamic({ const IndexPage = dynamic({
...@@ -12,12 +13,17 @@ function RouterConfig({ history, app }) { ...@@ -12,12 +13,17 @@ function RouterConfig({ history, app }) {
app, app,
component: () => import('./routes/Home/HomePage'), component: () => import('./routes/Home/HomePage'),
}) ; }) ;
const SearchPage = dynamic({
app,
component: () => import('./routes/Home/SearchPage'),
}) ;
return ( return (
<Router history={history}> <Router history={history}>
<Switch> <Switch>
<Route path="/" exact component={MiddleSelectPage} /> <Route path="/" exact component={MiddleSelectPage} />
<Route path="/Home" exact component={HomePage} /> <Route path="/Home" component={HomePage} />
<Route path="/Login" exact component={IndexPage} /> <Route path="/Login" component={IndexPage} />
<Route path="/SearchPage/:pjName" component={SearchPage} />
</Switch> </Switch>
</Router> </Router>
); );
......
src/routes/Home/HomePage.js
浏览文件 @ 067e13c4
...@@ -18,6 +18,7 @@ import MyBodyCard from "../../components/CardViewTwo"; ...@@ -18,6 +18,7 @@ import MyBodyCard from "../../components/CardViewTwo";
class HomePage extends React.Component{ class HomePage extends React.Component{
componentWillMount() { componentWillMount() {
const { dispatch } = this.props; const { dispatch } = this.props;
dispatch({ type: 'home/getSummary',payload: { pNumber:'浦东新区' }});
dispatch({ type: 'home/getSummaryData',payload: { pNumber:'浦东新区' }}); dispatch({ type: 'home/getSummaryData',payload: { pNumber:'浦东新区' }});
} }
onChange=(value)=>{ onChange=(value)=>{
...@@ -25,6 +26,7 @@ class HomePage extends React.Component{ ...@@ -25,6 +26,7 @@ class HomePage extends React.Component{
const { dispatch } = this.props; const { dispatch } = this.props;
let objS = document.getElementById("pid"); let objS = document.getElementById("pid");
let district = objS.options[objS.selectedIndex].value; let district = objS.options[objS.selectedIndex].value;
dispatch({ type: 'home/getSummary',payload: { pNumber:district }});
dispatch({ type: 'home/getSummaryData',payload: { pNumber:district }}); dispatch({ type: 'home/getSummaryData',payload: { pNumber:district }});
}; };
render(){ render(){
...@@ -32,21 +34,33 @@ class HomePage extends React.Component{ ...@@ -32,21 +34,33 @@ class HomePage extends React.Component{
<Page> <Page>
<span className={styles.myspan}> <span className={styles.myspan}>
<Select id="pid" data={[ <Select id="pid" data={[
{
value: '浦东新区',
label: '浦东新区'
},
{ {
value: '杨浦区', value: '杨浦区',
label: '杨浦区' label: '杨浦区'
}, },
{ {
value: '浦东新区', value: '宝山区',
label: '浦东新区' label: '宝山区'
}, },
{ {
value: '徐汇区', value: '徐汇区',
label: '徐汇区' label: '徐汇区'
},
{
value: '青浦区',
label: '青浦区'
},
{
value: '嘉定区',
label: '嘉定区'
} }
]} onChange={this.onChange}/> ]} onChange={this.onChange}/>
</span> </span>
<MyTopCard/> <MyTopCard data={this.props.home.Summary}/>
<MyBodyCard data={this.props.home.SummaryData}/> <MyBodyCard data={this.props.home.SummaryData}/>
</Page> </Page>
); );
......
src/routes/Home/SearchPage.js 0 → 100644
浏览文件 @ 067e13c4
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import {
Select,
Page,
} from 'react-weui';
//import styles
import 'weui';
import styles from '../IndexPage.css';
import 'react-weui/build/packages/react-weui.css';
import MyTopCard from '../../components/CardViewThree';
class SearchPage extends React.Component{
constructor(props) {
super(props);
console.info(props.match.params);
}
componentWillMount() {
const { dispatch } = this.props;
dispatch({ type: 'search/getResult',payload: { pjName:this.props.match.params.pjName,datasourceName:'QueryTodayQianYue',stateName:'todayQianYue' }});
dispatch({ type: 'search/getResult',payload: { pjName:this.props.match.params.pjName,datasourceName:'QueryTodayCheXiao',stateName:'todayCheXiao'}});
dispatch({ type: 'search/getResult',payload: { pjName:this.props.match.params.pjName,datasourceName:'QuerySuoDingTongJi',stateName:'suoDingTongJi'}});
dispatch({ type: 'search/getResult',payload: { pjName:this.props.match.params.pjName,datasourceName:'QueryShiWuSuoTongJi',stateName:'shiWuSuoTongJi'}});
dispatch({ type: 'search/getResult',payload: { pjName:this.props.match.params.pjName,datasourceName:'QueryJinDuTongJi',stateName:'jinDuTongJi'}});
dispatch({ type: 'search/getResult',payload: { pjName:this.props.match.params.pjName,datasourceName:'QueryChengBenTongJi',stateName:'chengBenTongJi'}});
dispatch({ type: 'search/getResult',payload: { pjName:this.props.match.params.pjName,datasourceName:'QueryShiYongFangYuanTongJi',stateName:'shiYongFangYuanTongJi'}});
dispatch({ type: 'search/getResult',payload: { pjName:this.props.match.params.pjName,datasourceName:'QueryJiDiFangYuanTongJi',stateName:'jiDiFangYuanTongJi'}});
dispatch({ type: 'search/getResult',payload: { pjName:this.props.match.params.pjName,datasourceName:'QueryXiaoQuTongJi',stateName:'xiaoQuTongJi'}});
}
render(){
return (
<Page>
<div style={{padding:"0 26px", backgroundColor:"#38c5b8"}}>
<span className={styles.myspan}>
<Select style={{color:"#fff"}} data={[
{
value: `${this.props.match.params.pjName}`,
label: `${this.props.match.params.pjName}`
},
]}/>
</span>
</div>
<MyTopCard/>
</Page>
);
};
}
SearchPage.propTypes = {
search: PropTypes.object,
};
// 指定订阅数据，这里关联了 login
function mapStateToProps({ search }) {
return {search};
}
export default connect(mapStateToProps)(SearchPage);
src/routes/IndexPage.css
浏览文件 @ 067e13c4
...@@ -20,6 +20,10 @@ table.mytable td{ ...@@ -20,6 +20,10 @@ table.mytable td{
} }
h1.myTitle{ h1.myTitle{
text-align: center; text-align: center;
font-size: 1.6rem;
color: #fff;
margin-top: 145px;
margin-bottom: 47px;
} }
span.myspan{ span.myspan{
vertical-align:middle; vertical-align:middle;
...@@ -27,6 +31,7 @@ span.myspan{ ...@@ -27,6 +31,7 @@ span.myspan{
background-color: #38c5b8; background-color: #38c5b8;
margin:0px; margin:0px;
z-index:1; z-index:1;
font-size: 0.75rem;
} }
select { select {
/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
...@@ -38,7 +43,7 @@ select { ...@@ -38,7 +43,7 @@ select {
/*在选择框的最右侧中间显示小箭头图片*/ /*在选择框的最右侧中间显示小箭头图片*/
background: url(../assets/downselect.png) no-repeat scroll right center transparent; background: url(../assets/downselect.png) no-repeat scroll right center transparent;
/*为下拉小箭头留出一点位置，避免被文字覆盖*/ /*为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px; padding-right: 20px;
direction: rtl; direction: rtl;
} }
...@@ -71,3 +76,73 @@ select::-ms-expand { display: none; } ...@@ -71,3 +76,73 @@ select::-ms-expand { display: none; }
background-color:#caf6f0 ; background-color:#caf6f0 ;
color:#000000; color:#000000;
} }
/*------body的背景颜色--------*/
.bodyBackground{
background: -webkit-linear-gradient(120deg, #4b85bf 0%, #35aca1 100%); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(120deg, #4b85bf 0%, #35aca1 100%); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(120deg, #4b85bf 0%, #35aca1 100%); /* Firefox 3.6 - 15 */
background: linear-gradient(120deg, #4b85bf 0%, #35aca1 100%); /* 标准的语法（必须放在最后） */
}
/*-------------中间表格最外层-----------*/
.formWrapStyle{
margin: 0 50px;
background: transparent;
}
.formWrapStyle:before,.formWrapStyle:after{
border: none;
}
.formInputBorderOne:before,.formInputBorderTwo:before{
border: none;
}
.formInputBorderOne,.formInputBorderTwo{
border: 1px solid #fff;
border-radius: 40px;
}
.formInputBorderOne{
margin-bottom: 12px;
}
/*--------按钮样式--------*/
.buttonWrapStyle{
margin: 0 50px;
}
.buttonStyle{
border-radius: 40px;
background: #38c5b8;
margin-top: 12px;
margin-bottom: 30px;
}
.accountIcon{
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle;
margin-left: 8px;
margin-right: 13px;
background: url(../assets/account.png) no-repeat 0 0;
background-size: cover;
}
.passwordIcon{
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle;
margin-left: 8px;
margin-right: 13px;
background: url(../assets/password.png) no-repeat 0 0;
background-size: cover;
}
/*placeholder样式*/
input::-webkit-input-placeholder {
color: #fff;
}
input:-moz-placeholder {
color: #fff;
}
src/routes/IndexPage.js
浏览文件 @ 067e13c4
...@@ -55,39 +55,41 @@ class IndexPage extends React.Component{ ...@@ -55,39 +55,41 @@ class IndexPage extends React.Component{
}; };
render(){ render(){
return ( return (
<Page>
<Page className={styles.bodyBackground}>
<h1 className={styles.myTitle}>上海征地房屋补偿</h1> <h1 className={styles.myTitle}>上海征地房屋补偿</h1>
<Form> <Form className={styles.formWrapStyle}>
<FormCell> <FormCell className={styles.formInputBorderOne}>
<CellHeader> <CellHeader>
<Label>手机号</Label> <Label style={{width:"auto"}}><span className={styles.accountIcon}/></Label>
</CellHeader> </CellHeader>
<CellBody> <CellBody>
<Icon value="warn" /> <Icon value="warn" />
<Input type="tel" placeholder={this.props.login.telnum} onBlur={(event)=>this.telCheck(event)}/> <Input type="tel" onBlur={(event)=>this.telCheck(event)} style={{color:"#fff"}} placeholder="手机号"/>
</CellBody> </CellBody>
</FormCell> </FormCell>
<FormCell vcode> <FormCell className={styles.formInputBorderTwo}>
<CellHeader> <CellHeader>
<Label>验证码</Label> <Label style={{width:"auto"}}><span className={styles.passwordIcon}/></Label>
</CellHeader> </CellHeader>
<CellBody> <CellBody>
<Input type="tel" placeholder="" onBlur={(event)=>this.telYanZhengMa(event)}/> <Input type="tel" placeholder="验证码" onBlur={(event)=>this.telYanZhengMa(event)} style={{color:"#fff"}}/>
</CellBody> </CellBody>
<CellFooter> <CellFooter>
<Button type="vcode" onClick={this.sendCheckNum}>发送</Button> <Button type="vcode" onClick={this.sendCheckNum}>发送</Button>
</CellFooter> </CellFooter>
</FormCell> </FormCell>
</Form> </Form>
<ButtonArea> <ButtonArea className={styles.buttonWrapStyle}>
<Button <Button
className={styles.buttonStyle}
//button to display toptips //button to display toptips
onClick={ this.registerClick}> onClick={ this.registerClick}>
注册 立即登陆
</Button> </Button>
</ButtonArea> </ButtonArea>
<Footer> <Footer>
<FooterText> <FooterText style={{color:"#fff"}}>
Copyright © 2017-2018 www.proland.org.cn Copyright © 2017-2018 www.proland.org.cn
</FooterText> </FooterText>
</Footer> </Footer>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论