Skip to content

B
biz.qingxiao.com
Commit 0f90a66a authored by wangxuelai's avatar wangxuelai
Browse files
Options

''

parent fcf5e6cd
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 96 deletions
index.html
View file @ 0f90a66a
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>轻校</title><link rel="shortcut icon" href="https://cdn.img.shangjiadao.cn/qingxiao/biz/image/qxlogo4.png"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Polyfills --><!--[if lt IE 10]>
<script src="js/console-polyfill.js"></script>
<![endif]--><script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=XSZBZ-5LHCV-5I2P7-UQHPW-6456F-JBB3B"></script><link href="https://cdn.img.shangjiadao.cn/qingxiao/biz/dist/index.css?1563445815633" rel="stylesheet"><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/lib/vendor.dll.js?3" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/console-polyfill.js?3" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/es6-shim.min.js?3" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/es5-shim.js?3" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/es5-sham.min.js?3" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/json3.min.js?3" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/html5shiv.min.js?3" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/polyfill.js?3" charset="utf-8"></script></head><body><div id="root"></div><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/dist/index.js?1563445815633" charset="utf-8"></script></body></html>
\ No newline at end of file
<![endif]--><script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=XSZBZ-5LHCV-5I2P7-UQHPW-6456F-JBB3B"></script><link href="https://cdn.img.shangjiadao.cn/qingxiao/biz/dist/index.css?1563505699012" rel="stylesheet"><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/lib/vendor.dll.js?3" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/console-polyfill.js?3" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/es6-shim.min.js?3" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/es5-shim.js?3" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/es5-sham.min.js?3" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/json3.min.js?3" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/html5shiv.min.js?3" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/polyfill.js?3" charset="utf-8"></script></head><body><div id="root"></div><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/dist/index.js?1563505699012" charset="utf-8"></script></body></html>
\ No newline at end of file
public/index.ejs
View file @ 0f90a66a
......@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="shortcut icon" href="https://cdn.img.shangjiadao.cn/qingxiao/biz/image/qxlogo4.png" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Polyfills -->
<!--[if lt IE 10]>
......
src/components/SjdHeader.js
View file @ 0f90a66a
......@@ -13,7 +13,7 @@ class SjdMenu extends React.Component {
componentWillMount() {
}
toggle = () => {
const { dispatch, collapsed } = this.props;
const { dispatch, collapsed, screenIsBig } = this.props;
dispatch({
type: 'webapp/menucollapse',
payload: {
......@@ -38,7 +38,7 @@ class SjdMenu extends React.Component {
}
}
render() {
const { collapsed, userInfo } = this.props;
const { collapsed, userInfo, screenIsBig } = this.props;
const menu = (
<Menu onClick={this.signOut}>
<Menu.Item key="0">
......@@ -46,19 +46,25 @@ class SjdMenu extends React.Component {
</Menu.Item>
</Menu>
);
let headerPdl = 0;
if (screenIsBig) {
headerPdl = !collapsed ? 224 : 104;
} else {
headerPdl = 20;
}
return (
<Header
className={SjdHeaderStyle.header}
style={{
background: '#fff',
padding: 0,
paddingLeft: !collapsed ? 200 : 80,
paddingLeft: headerPdl,
paddingRight: 24,
position: 'fixed',
width: '100%',
left: 0,
top: 0,
zIndex: 1001,
zIndex: 999,
height: '60px',
lineHeight: '60px',
}}>
......@@ -84,10 +90,11 @@ SjdMenu.propTypes = {
};
function mapStateToProps(state) {
const { collapsed, userInfo } = state.webapp;
const { collapsed, userInfo, screenIsBig } = state.webapp;
return {
collapsed,
userInfo,
screenIsBig,
};
}
export default connect(mapStateToProps)(SjdMenu);
src/components/SjdHeader.less
View file @ 0f90a66a
......@@ -4,7 +4,7 @@
.trigger {
font-size: 18px;
line-height: 60px;
padding: 0 24px;
// padding: 0 24px;
cursor: pointer;
transition: color .3s;
}
......
src/models/webapp.js
View file @ 0f90a66a
......@@ -18,6 +18,7 @@ export default {
namespace: 'webapp',
state: {
collapsed: false,
menuDrawerShow: false,
menus: menuConfig.menus,
defaultMenu: '1',
locationPathname: '',
......@@ -30,6 +31,7 @@ export default {
numberToChinese: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一'],
showExpired: false,
dakarole: LocalStorage.getItem('dakarole') || 1,
screenIsBig: true,
// excelTotalAmount: 0,
// excelListRows: 2000,
},
......@@ -40,15 +42,33 @@ export default {
// });
// },
setup({ dispatch, history }) {
window.addEventListener('resize', () => { // 这里表示当鼠标点击时就会触发里面的dispatch命令，这里的save就是reducers中的方法名
console.log('ssss');
window.addEventListener('resize', (e) => { // 这里表示当鼠标点击时就会触发里面的dispatch命令，这里的save就是reducers中的方法名
let screenIsBig = true;
if (document.body.clientWidth > 768) {
screenIsBig = true;
} else {
screenIsBig = false;
}
dispatch({
type: 'updateState',
payload: {
screenIsBig,
},
});
});
return history.listen(({ pathname, search }) => {
let screenIsBig = true;
if (document.body.clientWidth > 768) {
screenIsBig = true;
} else {
screenIsBig = false;
}
dispatch({
type: 'updateState',
payload: {
locationPathname: pathname,
locationQuery: queryString.parse(search),
screenIsBig,
},
});
dispatch({ type: 'menumatch', payload: { pathname } });
......
src/pages/SjdIndex.js
View file @ 0f90a66a
......@@ -17,6 +17,16 @@ class SjdIndex extends React.Component {
type: 'webapp/unloadstates',
});
}
onClose = () => {
const { dispatch } = this.props;
console.log('ssssss');
dispatch({
type: 'webapp/menucollapse',
payload: {
collapsed: true,
},
});
}
signout = () => {
const { dispatch } = this.props;
dispatch({
......@@ -28,63 +38,66 @@ class SjdIndex extends React.Component {
}
render() {
const {
collapsed, location, userInfo, showExpired,
collapsed, location, userInfo, showExpired, menuDrawerShow, screenIsBig,
} = this.props;
let hasRoot = false;
if ((LocalStorage.getItem('user_v2') && LocalStorage.getItem('user_v2').token) || (LocalStorage.getItem('teacher') && LocalStorage.getItem('teacher').token)) {
hasRoot = true;
}
// const Menufather = () => (
// <Sider
// trigger={null}
// collapsible
// collapsed={collapsed}
// style={{
// overflow: 'auto',
// height: '100vh',
// position: 'fixed',
// left: 0,
// zIndex: 1002,
// }}
// className={SjdIndexStyle.menusider}
// >
// <SjdMenu />
// </Sider>);
const redirectDom = (<Redirect to={{ pathname: '/login', state: { from: location } }} />);
let contentMarginLeft = 0;
let paddingRight = 20;
let paddingLeft = 20;
if (screenIsBig) {
contentMarginLeft = !collapsed ? 210 : 90;
} else {
contentMarginLeft = 0;
paddingRight = 10;
paddingLeft = 10;
}
const mainDom = (
<div>
<Layout
style={{ minHeight: '100vh' }}
>
<Drawer
visible={collapsed}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
<Sider
trigger={null}
collapsible
collapsed={collapsed}
style={{
overflow: 'auto',
height: '100vh',
position: 'fixed',
left: 0,
zIndex: 1002,
}}
className={SjdIndexStyle.menusider}
>
<SjdMenu />
</Sider>
{!screenIsBig &&
<Drawer
visible={!collapsed}
closable={false}
onClose={this.onClose}
placement="left"
bodyStyle={{ padding: 0 }}
width={200}
>
<SjdMenu />
</Drawer>
}
{screenIsBig &&
<Sider
trigger={null}
collapsible
collapsed={collapsed}
style={{
overflow: 'auto',
height: '100vh',
position: 'fixed',
left: 0,
zIndex: 1002,
}}
className={SjdIndexStyle.menusider}
>
<SjdMenu />
</Sider>
}
<Layout>
<SjdHeader />
<Content
className={SjdIndexStyle.content}
style={{
marginLeft: !collapsed ? 230 : 110,
marginLeft: contentMarginLeft,
marginTop: 90,
paddingRight,
paddingLeft,
}}>
{this.props.children}
</Content>
......@@ -115,11 +128,14 @@ SjdIndex.propTypes = {
};
function mapStateToProps(state) {
const { collapsed, userInfo, showExpired } = state.webapp;
const {
collapsed, userInfo, showExpired, menuDrawerShow, screenIsBig,
} = state.webapp;
return {
collapsed,
userInfo,
showExpired,
screenIsBig,
};
}
export default connect(mapStateToProps)(SjdIndex);
src/pages/index/index.js
View file @ 0f90a66a
import React from 'react';
import { connect } from 'dva';
import { message } from 'antd';
import { message, Row, Col } from 'antd';
import pageStyle from './index.less';
import { pageIn } from '../../utils/index';
const echarts = require('echarts');
......@@ -269,7 +269,87 @@ class StaticCenter extends React.Component {
return (
<div className={pageStyle.container}>
<div className={pageStyle.topbox}>
<div className={pageStyle.staticbox}>
<Row gutter={16}>
<Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 12 }} style={{ marginBottom: '20px' }}>
<div className={pageStyle.staticcard}>
<div className={pageStyle.cardtitle}>
<div className={pageStyle.cardtitleline} />
<span>数据概况</span>
</div>
<div className={pageStyle.staticitembox}>
<div className={pageStyle.staticitem}>
<div className={pageStyle.statictotal}>{staticcenter.student_count || 0}</div>
<div className={pageStyle.staticname}>学员总数</div>
</div>
<div className={pageStyle.staticitem}>
<div className={pageStyle.statictotal}>{staticcenter.clock_count || 0}</div>
<div className={pageStyle.staticname}>打卡总数</div>
</div>
<div className={pageStyle.staticitem}>
<div className={pageStyle.statictotal}>{staticcenter.subject_count || 0}</div>
<div className={pageStyle.staticname}>主题总数</div>
</div>
</div>
</div>
<div className={pageStyle.staticcard}>
<div className={pageStyle.cardtitle}>
<div className={pageStyle.cardtitleline} />
<span>昨日新增</span>
</div>
<div className={pageStyle.staticitembox}>
<div className={pageStyle.staticitem}>
<div className={pageStyle.statictotal}>{staticcenter.yestday_clock_count || 0}</div>
<div className={pageStyle.staticname}>打卡数</div>
</div>
<div className={pageStyle.staticitem}>
<div className={pageStyle.statictotal}>{staticcenter.yestday_student_count || 0}</div>
<div className={pageStyle.staticname}>新增学员</div>
</div>
<div className={pageStyle.staticitem}>
<div className={pageStyle.statictotal}>{staticcenter.yesterday_no_review || 0}</div>
<div className={pageStyle.staticname}>新增未点评</div>
</div>
</div>
</div>
</Col>
<Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 12 }} style={{ marginBottom: '20px' }}>
<div className={pageStyle.makebox}>
<div className={pageStyle.cardtitle}>
<div className={pageStyle.cardtitleline} />
<span>工作台</span>
</div>
<div className={pageStyle.makeitembox}>
<Row type="flex" justify="center" align="center">
<Col span={8}>
<div className={pageStyle.makeitem} onClick={this.createTheme}>
<div className={`${pageStyle.themeicon} ${pageStyle.themeiconb}`}>
<img src={`${__IMGCDN__}themeaicon.png`} alt="" />
</div>
<div className={pageStyle.themetypename}>新建作业打卡</div>
</div>
</Col>
<Col span={8}>
<div className={pageStyle.makeitem} onClick={this.createCalendarTheme}>
<div className={`${pageStyle.themeicon} ${pageStyle.themeicona}`}>
<img src={`${__IMGCDN__}themebicon.png`} alt="" />
</div>
<div className={pageStyle.themetypename}>新建日历打卡</div>
</div>
</Col>
<Col span={8}>
<div className={pageStyle.makeitem} onClick={this.createUnlockTheme}>
<div className={`${pageStyle.themeicon} ${pageStyle.themeiconc}`}>
<img src={`${__IMGCDN__}themecicon.png`} alt="" />
</div>
<div className={pageStyle.themetypename}>新建闯关打卡</div>
</div>
</Col>
</Row>
</div>
</div>
</Col>
</Row>
{/* <div className={pageStyle.staticbox}>
<div className={pageStyle.staticcard}>
<div className={pageStyle.cardtitle}>
<div className={pageStyle.cardtitleline} />
......@@ -311,32 +391,7 @@ class StaticCenter extends React.Component {
</div>
</div>
</div>
<div className={pageStyle.makebox}>
<div className={pageStyle.cardtitle}>
<div className={pageStyle.cardtitleline} />
<span>工作台</span>
</div>
<div className={pageStyle.makeitembox}>
<div className={pageStyle.makeitem} onClick={this.createTheme}>
<div className={`${pageStyle.themeicon} ${pageStyle.themeiconb}`}>
<img src={`${__IMGCDN__}themeaicon.png`} alt="" />
</div>
<div className={pageStyle.themetypename}>新建作业打卡</div>
</div>
<div className={pageStyle.makeitem} onClick={this.createCalendarTheme}>
<div className={`${pageStyle.themeicon} ${pageStyle.themeicona}`}>
<img src={`${__IMGCDN__}themebicon.png`} alt="" />
</div>
<div className={pageStyle.themetypename}>新建日历打卡</div>
</div>
<div className={pageStyle.makeitem} onClick={this.createUnlockTheme}>
<div className={`${pageStyle.themeicon} ${pageStyle.themeiconc}`}>
<img src={`${__IMGCDN__}themecicon.png`} alt="" />
</div>
<div className={pageStyle.themetypename}>新建闯关打卡</div>
</div>
</div>
</div>
*/}
</div>
<div className={pageStyle.chartbox}>
<div className={`${pageStyle.cardtitle} clearfix`}>
......
src/pages/index/index.less
View file @ 0f90a66a
@import '../../less/variables.less';
.topbox {
display: flex;
margin-bottom: 20px;
// display: flex;
// margin-bottom: 20px;
}
.staticbox {
width: 820px;
......@@ -19,12 +19,10 @@
}
}
.makebox {
width: 840px;
background-color: #fff;
height: 420px;
border-radius: 8px;
padding-top: 20px;
min-width: 600px;
}
.cardtitle {
padding-left: 20px;
......@@ -68,13 +66,13 @@
.makeitembox {
margin-top: 120px;
// padding: 0 31px 0;
display: flex;
align-items: center;
justify-content: space-around;
// display: flex;
// align-items: center;
// justify-content: space-around;
}
.makeitem {
cursor: pointer;
width: 100px;
// width: 100px;
// height: 112px;
border-radius: 20px;
// border: 1px solid rgba(233,233,233,1);
......@@ -104,17 +102,17 @@
font-size: 14px;
color: #000000;
}
@media (max-width: @screen-small-min){
.topbox {
display: block;
}
.makebox {
margin-top: 30px;
}
}
// @media (max-width: @screen-small-min){
// .topbox {
// display: block;
// }
// .makebox {
// margin-top: 30px;
// }
// }
.chartbox {
// width: 1656px;
min-width: 870px;
// min-width: 870px;
background-color: #fff;
border-radius: 10px;
padding-top: 20px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment