├── .eslintrc ├── .gitignore ├── README.md ├── index.html ├── npm-debug.log.2133528225 ├── package.json ├── screenshots ├── 公司真题.png ├── 公司真题2.png ├── 学习1.png ├── 学习页面.png ├── 完善信息.png ├── 我的2.png ├── 我的页面.png ├── 敬请期待.png ├── 日期.png ├── 时间.png ├── 消息.png ├── 消息3.png ├── 消息页面.png ├── 添加笔试.png ├── 社区2.png ├── 社区页面.png ├── 笔试.png ├── 设置.png ├── 课程.png ├── 退出.png └── 题目.png ├── src ├── components │ ├── App.jsx │ ├── design │ │ ├── design.jsx │ │ └── notdone.jsx │ ├── menucommunity.jsx │ ├── menulearn.jsx │ ├── menulearn.less │ ├── menume.jsx │ ├── menume │ │ └── me.jsx │ ├── menumessage.jsx │ ├── message │ │ ├── m.jsx │ │ ├── othermessage.jsx │ │ └── sendmessage.jsx │ ├── otherNav.jsx │ ├── setting │ │ └── setting.jsx │ └── test │ │ ├── addtest │ │ └── addtest.jsx │ │ ├── company.jsx │ │ ├── lesson.jsx │ │ ├── list.jsx │ │ ├── listsub.jsx │ │ ├── practice.jsx │ │ ├── question.jsx │ │ ├── special.jsx │ │ ├── specialpractice.jsx │ │ ├── testcalendar.jsx │ │ └── wrongpractice.jsx ├── index.jsx └── index.less └── webpack.config.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "babel-eslint", 4 | "extends": "eslint-config-airbnb", 5 | "plugins": ["react"], 6 | "env": { 7 | "browser": true, 8 | "node": true, 9 | "mocha": true 10 | }, 11 | "rules": { 12 | "no-console": 1, 13 | "no-debugger": 1, 14 | "no-alert": 1, 15 | "spaced-comment": [0], 16 | "no-unused-vars": [0], 17 | "no-empty": [0], 18 | "react/wrap-multilines": [0], 19 | "react/no-multi-comp": [0], 20 | "no-constant-condition": [0], 21 | "react/jsx-no-bind": [0], 22 | "react/prop-types": [0], 23 | "arrow-body-style": [0], 24 | "react/prefer-stateless-function": [0], 25 | "semi": [0] 26 | }, 27 | "ecmaFeatures": { 28 | "arrowFunctions": true, 29 | "blockBindings": true, 30 | "classes": true, 31 | "defaultParams": true, 32 | "destructuring": true, 33 | "forOf": true, 34 | "generators": true, 35 | "modules": true, 36 | "objectLiteralComputedProperties": true, 37 | "objectLiteralDuplicateProperties": false, 38 | "objectLiteralShorthandMethods": true, 39 | "objectLiteralShorthandProperties": true, 40 | "spread": true, 41 | "superInFunctions": true, 42 | "templateStrings": true, 43 | "jsx": true, 44 | "experimentalObjectRestSpread": true 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .idea/ 3 | .ipr 4 | .iws 5 | *~ 6 | ~* 7 | *.diff 8 | *.patch 9 | *.bak 10 | .DS_Store 11 | Thumbs.db 12 | .project 13 | .*proj 14 | .svn/ 15 | *.swp 16 | *.pyc 17 | *.pyo 18 | node_modules 19 | bower_components/ 20 | npm-debug.log 21 | .module-cache 22 | .*.sw* 23 | dist 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react仿牛客app页面 2 | #### react搭配antdmobile模仿牛客app页面 3 | #### 运行项目 4 | * npm install 5 | * npm start 6 | #### 项目截图 7 | > 主页面 8 | 9 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E5%AD%A6%E4%B9%A0%E9%A1%B5%E9%9D%A2.png "github") 10 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E5%AD%A6%E4%B9%A01.png "github") 11 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E7%A4%BE%E5%8C%BA%E9%A1%B5%E9%9D%A2.png "github") 12 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E7%A4%BE%E5%8C%BA2.png "github") 13 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E6%B6%88%E6%81%AF%E9%A1%B5%E9%9D%A2.png "github") 14 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E6%88%91%E7%9A%84%E9%A1%B5%E9%9D%A2.png "github") 15 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E6%88%91%E7%9A%842.png "github") 16 | > 分页面 17 | 18 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E7%AC%94%E8%AF%95.png "github") 19 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E6%B7%BB%E5%8A%A0%E7%AC%94%E8%AF%95.png "github") 20 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E6%97%A5%E6%9C%9F.png "github") 21 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E6%97%B6%E9%97%B4.png "github") 22 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E8%AE%BE%E7%BD%AE.png "github") 23 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E9%80%80%E5%87%BA.png "github") 24 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E5%AE%8C%E5%96%84%E4%BF%A1%E6%81%AF.png "github") 25 | 26 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E5%85%AC%E5%8F%B8%E7%9C%9F%E9%A2%98.png "github") 27 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E5%85%AC%E5%8F%B8%E7%9C%9F%E9%A2%982.png "github") 28 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E6%B6%88%E6%81%AF.png "github") 29 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E6%B6%88%E6%81%AF3.png "github") 30 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E8%AF%BE%E7%A8%8B.png "github") 31 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E9%A2%98%E7%9B%AE.png "github") 32 | ![github](https://github.com/jinqiang12345/rreact-niukeAPP/blob/master/screenshots/%E6%95%AC%E8%AF%B7%E6%9C%9F%E5%BE%85.png "github") 33 | 34 | 35 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 牛客 6 | 7 | 8 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /npm-debug.log.2133528225: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/npm-debug.log.2133528225 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "1.0.0", 4 | "main": "lib/index", 5 | "scripts": { 6 | "start": "webpack-dev-server --host 0.0.0.0 --port 8000", 7 | "build": "webpack -p --progress --colors" 8 | }, 9 | "license": "MIT", 10 | "dependencies": { 11 | "antd-mobile": "^1.2.0", 12 | "babel-runtime": "^6.11.6", 13 | "moment": "^2.14.1", 14 | "rc-form": "^0.17.2", 15 | "react-router": "3.x" 16 | }, 17 | "devDependencies": { 18 | "antd-mobile-demo-data": "^0.1.3", 19 | "autoprefixer": "^6.5.1", 20 | "babel-core": "^6.25.0", 21 | "babel-loader": "^6.2.4", 22 | "babel-plugin-external-helpers": "^6.22.0", 23 | "babel-plugin-import": "^1.0.1", 24 | "babel-plugin-transform-runtime": "^6.12.0", 25 | "babel-polyfill": "^6.23.0", 26 | "babel-preset-es2015": "^6.9.0", 27 | "babel-preset-react": "^6.11.1", 28 | "babel-preset-stage-0": "^6.16.0", 29 | "bundle-loader": "^0.5.2", 30 | "css-loader": "^0.19.0", 31 | "extract-text-webpack-plugin": "^1.0.1", 32 | "less": "^2.7.1", 33 | "less-loader": "^2.2.3", 34 | "postcss": "^5.2.5", 35 | "postcss-loader": "^1.1.0", 36 | "postcss-pxtorem": "^3.3.1", 37 | "react": "^15.4.2", 38 | "react-dom": "^15.4.2", 39 | "style-loader": "^0.12.4", 40 | "svg-sprite-loader": "^0.2.0", 41 | "url-loader": "^0.5.7", 42 | "webpack": "^1.13.1", 43 | "webpack-bundle-analyzer": "^2.8.1", 44 | "webpack-dev-server": "^1.16.2", 45 | "webpack-visualizer-plugin": "^0.1.11" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /screenshots/公司真题.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/公司真题.png -------------------------------------------------------------------------------- /screenshots/公司真题2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/公司真题2.png -------------------------------------------------------------------------------- /screenshots/学习1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/学习1.png -------------------------------------------------------------------------------- /screenshots/学习页面.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/学习页面.png -------------------------------------------------------------------------------- /screenshots/完善信息.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/完善信息.png -------------------------------------------------------------------------------- /screenshots/我的2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/我的2.png -------------------------------------------------------------------------------- /screenshots/我的页面.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/我的页面.png -------------------------------------------------------------------------------- /screenshots/敬请期待.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/敬请期待.png -------------------------------------------------------------------------------- /screenshots/日期.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/日期.png -------------------------------------------------------------------------------- /screenshots/时间.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/时间.png -------------------------------------------------------------------------------- /screenshots/消息.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/消息.png -------------------------------------------------------------------------------- /screenshots/消息3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/消息3.png -------------------------------------------------------------------------------- /screenshots/消息页面.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/消息页面.png -------------------------------------------------------------------------------- /screenshots/添加笔试.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/添加笔试.png -------------------------------------------------------------------------------- /screenshots/社区2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/社区2.png -------------------------------------------------------------------------------- /screenshots/社区页面.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/社区页面.png -------------------------------------------------------------------------------- /screenshots/笔试.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/笔试.png -------------------------------------------------------------------------------- /screenshots/设置.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/设置.png -------------------------------------------------------------------------------- /screenshots/课程.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/课程.png -------------------------------------------------------------------------------- /screenshots/退出.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/退出.png -------------------------------------------------------------------------------- /screenshots/题目.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jinqiang12345/react-niukeAPP/fe7d0f04a9976874bc37b373f74e504da7b156da/screenshots/题目.png -------------------------------------------------------------------------------- /src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { hashHistory } from 'react-router'; 3 | import FontAwesome from 'react-fontawesome'; 4 | import { NavBar, Drawer, SearchBar, TabBar, Icon } from 'antd-mobile'; 5 | export default class App extends React.Component { 6 | constructor(props){ 7 | super(props); 8 | this.state = { 9 | title: '牛客', 10 | selectedTab: 'blueTab', 11 | label: 'cog' 12 | }; 13 | } 14 | render() { 15 | // console.log(this.props.route, this.props.params, this.props.routeParams); 16 | return ( 17 |
18 | , 23 | hashHistory.push('/sendmessage')}>, 24 | ]} 25 | > 26 | {this.state.title} 27 | 28 | 29 |
30 | {this.props && this.props.children && React.cloneElement(this.props.children, { 31 | changeTitle: title => this.setState({ title }) 32 | }) || 'no content'} 33 | 34 |
35 | 103 | 104 | 105 | {/*
底部固定条
*/} 106 |
107 | ); 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /src/components/design/design.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Flex,WhiteSpace } from 'antd-mobile'; 3 | import FontAwesome from 'react-fontawesome'; 4 | export default class design extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | date: new Date().toISOString().split('T')[0], 9 | day: new Date().getDay(), 10 | tempday: '' 11 | } 12 | } 13 | componentDidMount() { 14 | this.timerID = setInterval( 15 | () => this.tick(), 16 | 1000 17 | ); 18 | switch(this.state.day) { 19 | case 0 : this.setState({ 20 | tempday: '日' 21 | });break; 22 | case 1 : this.setState({ 23 | tempday: '一' 24 | });break; 25 | case 2 : this.setState({ 26 | tempday: '二' 27 | });break; 28 | case 3 : this.setState({ 29 | tempday: '三' 30 | });break; 31 | case 4 : this.setState({ 32 | tempday: '四' 33 | });break; 34 | case 5 : this.setState({ 35 | tempday: '五' 36 | });break; 37 | case 6 : this.setState({ 38 | tempday: '六' 39 | });break; 40 | } 41 | } 42 | componentWillUnmount() { 43 | clearInterval(this.timerID); 44 | } 45 | tick() { 46 | this.setState({ 47 | data: new Date().toISOString().split('T')[0], 48 | day: new Date().getDay() 49 | }); 50 | } 51 | render() { 52 | return ( 53 | 54 | 55 | 56 | { this.state.date }周{ this.state.tempday } 57 |
58 | 打卡 59 | 60 | 61 | 62 | 0 63 |
64 | 今日刷题/道 65 | 66 | 67 | 68 | 0 69 |
70 | 今日学习/节 71 | 72 | 73 | 74 | 4 75 |
76 | 共打卡/天 77 | 78 | 79 | ); 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/components/design/notdone.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { WhiteSpace } from 'antd-mobile'; 3 | export default class notdone extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | } 7 | componentDidMount() { 8 | this.props.changeNavTitle('什么都没有'); 9 | } 10 | render() { 11 | return ( 12 |
13 | 14 | 15 |
{hashHistory.push('/other/addtest')} } style={{ margin: "0 auto", borderRadius: "50%", width: "1rem", height: "1rem", color: "#fff", 16 | backgroundColor: "#148F77", textAlign: "center", lineHeight: "1rem", fontSize: ".4rem", opacity: ".8"}}>!
17 | 18 |
敬请期待
19 |
20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/components/menucommunity.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import FontAwesome from 'react-fontawesome'; 3 | import { hashHistory } from 'react-router'; 4 | import { 5 | List, Tabs, 6 | } from 'antd-mobile'; 7 | 8 | const TabPane = Tabs.TabPane; 9 | 10 | export default class menucommunity extends React.Component { 11 | componentDidMount() { 12 | this.props.changeTitle('社区'); 13 | } 14 | render() { 15 | const Item = List.Item; 16 | const data1 = [ 17 | { 18 | iconname: 'calendar', 19 | text: '通知', 20 | }, 21 | { 22 | iconname: 'comments-o', 23 | text: '讨论区', 24 | }, 25 | { 26 | iconname: 'dot-circle-o', 27 | text: '打卡动态', 28 | }, 29 | { 30 | iconname: 'book', 31 | text: '领资料', 32 | } 33 | ]; 34 | const listItems1 = data1.map((data) => 35 | {hashHistory.push('/other/notdone')}} 39 | > 40 | {data.text} 41 | 42 | ); 43 | const data2 = [ 44 | { 45 | iconname: 'star', 46 | text: '粉丝榜', 47 | }, 48 | { 49 | iconname: 'quora', 50 | text: '答题榜', 51 | }, 52 | { 53 | iconname: 'keyboard-o', 54 | text: '编程榜', 55 | }, 56 | { 57 | iconname: 'thumbs-o-up', 58 | text: '牛币榜', 59 | } 60 | ]; 61 | const listItems2 = data2.map((data) => 62 | hashHistory.push('/other/notdone')} 66 | > 67 | {data.text} 68 | 69 | ); 70 | return (
71 | 72 | 动态 } key="1"> 73 | {listItems1} 74 | 75 | 排行榜 } key="2"> 76 | {listItems2} 77 | 78 | 79 |
); 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/components/menulearn.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { RefreshControl, ListView, Carousel, SwipeAction, Button, Grid, Icon, List, WingBlank } from 'antd-mobile'; 3 | import './menulearn.less'; 4 | import FontAwesome from 'react-fontawesome'; 5 | import { hashHistory } from 'react-router'; 6 | import Design from './design/design' 7 | export default class menulearn extends React.Component { 8 | state = { 9 | data: ['', '', ''], 10 | initialHeight: 200, 11 | } 12 | handleClick = (e) => { 13 | if(e.key == 1){ 14 | hashHistory.push('/other/specialpractice'); 15 | }else if(e.key == 2){ 16 | hashHistory.push('/other/company'); 17 | }else if(e.key == 3){ 18 | hashHistory.push('/other/wrongpractice'); 19 | }else if(e.key == 4){ 20 | hashHistory.push('/other/lesson'); 21 | }else if(e.key == 5){ 22 | hashHistory.push('/other/question'); 23 | }else if(e.key == 6){ 24 | hashHistory.push('/other/special'); 25 | } 26 | } 27 | componentDidMount() { 28 | // simulate img loading 29 | setTimeout(() => { 30 | this.setState({ 31 | data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'], 32 | }); 33 | }, 100); 34 | this.props.changeTitle('学习'); 35 | } 36 | 37 | render() { 38 | const hProp = this.state.initialHeight ? { height: this.state.initialHeight } : {}; 39 | const data1 = [ 40 | {icon: , text: 专项练习, key: 1}, 41 | {icon: , text: 公司套题, key: 2}, 42 | {icon: , text: 错题练习, key: 3}, 43 | {icon: , text: 课程学习, key: 4}, 44 | {icon: , text: 大题查看, key: 5}, 45 | {icon: , text: 精华专题, key: 6}, 46 | ]; 47 | const Item = List.Item; 48 | return ( 49 |
50 |
51 | console.log(`slide from ${from} to ${to}`)} 58 | afterChange={index => console.log('slide to', index)} 59 | > 60 | {this.state.data.map(ii => ( 61 | 62 | icon { 66 | // fire window resize event to change height 67 | window.dispatchEvent(new Event('resize')); 68 | this.setState({ 69 | initialHeight: null, 70 | }); 71 | }} 72 | /> 73 | 74 | ))} 75 | 76 |
77 | 78 | 79 |
80 | 81 | {hashHistory.push('/other/testcalendar')}} 84 | > 85 | 笔试日历 86 | 87 | 88 | 我参与的课程} className="my-list"> 89 | {hashHistory.push('/other/notdone')}} 90 | extra={'1481163人学习'} onLongPress={this.handleLongPress}>基础算法在面试题中的应用 91 | {hashHistory.push('/other/notdone')}} 92 | extra={'1163人学习'} onLongPress={this.handleLongPress}>Git&Github入门基础 93 | {hashHistory.push('/other/notdone')}} 94 | extra={'2661163人学习'} onLongPress={this.handleLongPress}>剑指Offer 95 | 96 | 97 |
98 |
99 | ); 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /src/components/menulearn.less: -------------------------------------------------------------------------------- 1 | .carouseldiv { 2 | overflow: hidden; 3 | } 4 | .my-carousel { 5 | background: #fff; 6 | } 7 | .my-carousel a { 8 | display: inline-block; 9 | width: 100%; 10 | margin: 0; padding: 0; 11 | } 12 | .my-carousel a img { 13 | width: 100%; 14 | vertical-align: top; 15 | } 16 | .my-carousel .v-item { 17 | height: 0.72rem; 18 | line-height: 0.72rem; 19 | padding-left: 0.2rem; 20 | } 21 | .sub-title { 22 | color: #888; 23 | font-size: .28rem; 24 | padding: 30px 0 18px 0; 25 | } 26 | .am-grid { 27 | border: 1px solid #ddd; 28 | } 29 | .listdiv { 30 | color: #333; 31 | margin-bottom: 20%; 32 | } 33 | .gridspan { 34 | font-size: 60%; 35 | color: #333; 36 | } 37 | .iconspan { 38 | font-size: 120%; 39 | color: #333; 40 | font-weight: lighter; 41 | } 42 | .lessonspan { 43 | font-size: 50%; 44 | color: #979A9A; 45 | } 46 | .tabspan { 47 | font-size: 80%; 48 | } 49 | .listspan { 50 | font-size: 70%; 51 | } 52 | .gridspantext { 53 | font-size: 80%; 54 | color: #979A9A; 55 | } 56 | .photo { 57 | width: 60px; 58 | height: 60px; 59 | } 60 | .gridspantext { 61 | font-size: 80%; 62 | color: #979A9A; 63 | } 64 | .gridspanicon { 65 | font-size: 80%; 66 | font-weight: lighter; 67 | color: #148F77; 68 | } 69 | -------------------------------------------------------------------------------- /src/components/menume.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import FontAwesome from 'react-fontawesome'; 3 | import { hashHistory } from 'react-router'; 4 | import { 5 | Card, Grid, List, WhiteSpace 6 | } from 'antd-mobile'; 7 | export default class Demo extends React.Component { 8 | componentDidMount() { 9 | this.props.changeTitle('我的'); 10 | } 11 | render() { 12 | const menudata = [{icon: 338, text: 成就值}, 13 | {icon: 0, text: 被采纳}, 14 | {icon: 0, text: 获赞}, 15 | {icon: 334, text: 答对题}, 16 | {icon: 2, text: 编程通过},]; 17 | const photo = {width: "1.2rem",height: "1.2rem", borderRadius: "50%", marginRight: ".2rem"}; 18 | const Item = List.Item; 19 | const data1 = [ 20 | { 21 | iconname: 'file-text-o', 22 | text: '错题练习', 23 | }, 24 | { 25 | iconname: 'window-close-o', 26 | text: '错题浏览', 27 | } 28 | ]; 29 | const listItems1 = data1.map((data) => 30 | {hashHistory.push('/other/notdone')}} 31 | key={data.iconname} arrow="horizontal" extra={}> 32 | {data.text} 33 | 34 | ); 35 | const data2 = [ 36 | { 37 | iconname: 'file-o', 38 | number: 68, 39 | text: '练习试卷', 40 | }, 41 | { 42 | iconname: 'commenting-o', 43 | number: 0, 44 | text: '回答问题', 45 | }, 46 | { 47 | iconname: 'edit', 48 | number: 0, 49 | text: '发表帖子', 50 | } 51 | ]; 52 | const listItems2 = data2.map((data) => 53 | {hashHistory.push('/other/notdone')}} 54 | key={data.iconname} arrow="horizontal" extra={{data.number}}> 55 | {data.text} 56 | 57 | ); 58 | const data3 = [ 59 | { 60 | iconname: 'star-o', 61 | number: 0, 62 | text: '收藏题目', 63 | }, 64 | { 65 | iconname: 'stack-exchange', 66 | number: 0, 67 | text: '收藏帖子', 68 | } 69 | ]; 70 | const listItems3 = data3.map((data) => 71 | {hashHistory.push('/other/notdone')}} 72 | key={data.iconname} arrow="horizontal" extra={{data.number}}> 73 | {data.text} 74 | 75 | ); 76 | return ( 77 |
78 | 79 | 笑场
81 | 华北电力大学} 82 | thumb="http://rescdn.qqmail.com/dyimg/20131220/7155BCB97148.jpg" 83 | thumbStyle={photo} 84 | extra={ {hashHistory.push('/other/me')}} style={{ fontSize: "120%"}} name='angle-right'/>} 85 | /> 86 | 87 | 关注了 0人} 90 | extra={ 91 | 关注者 0人} /> 94 | 95 | 96 | 97 | {listItems1} 98 | 99 | {listItems2} 100 | 101 | {listItems3} 102 | 103 | 104 | 105 | {hashHistory.push('/other/notdone')}} 106 | arrow="horizontal" extra={}> 107 | 我的下载 108 | 109 | 110 | {hashHistory.push('/other/notdone')}} 111 | arrow="horizontal" extra={4}> 112 | 我的打卡 113 | 114 | 115 | { hashHistory.push('/other/setting'); }}> 116 |
设置
117 | 118 | 119 |
120 | ); 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /src/components/menume/me.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | List, WhiteSpace 4 | } from 'antd-mobile'; 5 | 6 | export default class me extends React.Component { 7 | componentDidMount() { 8 | this.props.changeNavTitle('完善信息'); 9 | } 10 | render() { 11 | const Item = List.Item; 12 | return ( 13 |
14 | 15 | }> 17 | 头像 18 | 19 | 笑场}> 20 | 昵称 21 | 22 | 23 | 华北电力大学}> 24 | 学校 25 | 26 | 阿里巴巴}> 27 | 想去的公司 28 | 29 | 30 | 前端工程师}> 31 | 从事的工作 32 | 33 | 34 |
); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/menumessage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import M from './message/m'; 3 | 4 | export default class menumessage extends React.Component { 5 | componentDidMount() { 6 | this.props.changeTitle('消息'); 7 | } 8 | render() { 9 | return ( 10 | 11 | ); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/message/m.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | /* eslint no-dupe-keys: 0, no-mixed-operators: 0 */ 3 | import { RefreshControl, ListView } from 'antd-mobile'; 4 | 5 | const data = [ 6 | { 7 | img: 'http://www.gx8899.com/uploads/allimg/160804/3-160P4111639.jpg', 8 | des: '小西', 9 | text: '好的！感谢您的分享~', 10 | }, 11 | { 12 | img: 'http://img.wowoqq.com/allimg/170603/1-1F603064500-51.jpg', 13 | des: 'geek', 14 | text: 'Hi', 15 | }, 16 | { 17 | img: 'http://pic.3h3.com/up/2014-8/20148825251350515758.jpg', 18 | des: 'bluce', 19 | text: 'hao are you', 20 | }, 21 | ]; 22 | let index = data.length - 1; 23 | 24 | let pageIndex = 0; 25 | 26 | export default class m extends React.Component { 27 | constructor(props) { 28 | super(props); 29 | const dataSource = new ListView.DataSource({ 30 | rowHasChanged: (row1, row2) => row1 !== row2, 31 | }); 32 | 33 | this.initData = []; 34 | for (let i = 0; i < 3; i++) { 35 | this.initData.push(`r${i}`); 36 | } 37 | this.state = { 38 | dataSource: dataSource.cloneWithRows(this.initData), 39 | refreshing: false, 40 | height: document.documentElement.clientHeight, 41 | }; 42 | } 43 | // If you use redux, the data maybe at props, you need use `componentWillReceiveProps` 44 | // componentWillReceiveProps(nextProps) { 45 | // if (nextProps.dataSource !== this.props.dataSource) { 46 | // this.setState({ 47 | // dataSource: this.state.dataSource.cloneWithRows(nextProps.dataSource), 48 | // }); 49 | // } 50 | // } 51 | componentDidMount() { 52 | this.manuallyRefresh = true; 53 | setTimeout(() => this.setState({ refreshing: true }), 10); 54 | 55 | // Set the appropriate height 56 | setTimeout(() => this.setState({ 57 | height: this.state.height - ReactDOM.findDOMNode(this.refs.lv).offsetTop, 58 | }), 0); 59 | 60 | // handle https://github.com/ant-design/ant-design-mobile/issues/1588 61 | this.refs.lv.getInnerViewNode().addEventListener('touchstart', this.ts = (e) => { 62 | this.tsPageY = e.touches[0].pageY; 63 | }); 64 | this.refs.lv.getInnerViewNode().addEventListener('touchmove', this.tm = (e) => { 65 | this.tmPageY = e.touches[0].pageY; 66 | if (this.tmPageY > this.tsPageY && this.st <= 0 && document.body.scrollTop > 0) { 67 | console.log('start pull to refresh'); 68 | this.domScroller.options.preventDefaultOnTouchMove = false; 69 | } else { 70 | this.domScroller.options.preventDefaultOnTouchMove = undefined; 71 | } 72 | }); 73 | } 74 | componentWillUnmount() { 75 | this.refs.lv.getInnerViewNode().removeEventListener('touchstart', this.ts); 76 | this.refs.lv.getInnerViewNode().removeEventListener('touchmove', this.tm); 77 | } 78 | onScroll = (e) => { 79 | this.st = e.scroller.getValues().top; 80 | this.domScroller = e; 81 | } 82 | onRefresh = () => { 83 | console.log('onRefresh'); 84 | if (!this.manuallyRefresh) { 85 | this.setState({ refreshing: true }); 86 | } else { 87 | this.manuallyRefresh = false; 88 | } 89 | setTimeout(() => { 90 | this.initData = [`ref${pageIndex++}`, ...this.initData]; 91 | this.setState({ 92 | // dataSource: this.state.dataSource.cloneWithRows(this.initData), 93 | refreshing: false, 94 | }); 95 | }, 1000); 96 | }; 97 | render() { 98 | const separator = (sectionID, rowID) => ( 99 |
108 | ); 109 | const row = (rowData, sectionID, rowID) => { 110 | if (index < 0) { 111 | index = data.length - 1; 112 | } 113 | const obj = data[index--]; 114 | return ( 115 |
121 |
122 | icon 123 |
124 |
{obj.des}
125 |
{obj.text}
126 |
127 |
128 |
129 | ); 130 | }; 131 | return ( 132 | } 151 | onScroll={this.onScroll} 152 | /> 153 | ); 154 | } 155 | } 156 | -------------------------------------------------------------------------------- /src/components/message/othermessage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import M from './m'; 3 | /* eslint no-dupe-keys: 0, no-mixed-operators: 0 */ 4 | 5 | export default class othermessage extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | componentDidMount() { 10 | this.props.changeNavTitle('消息'); 11 | } 12 | render() { 13 | return ( 14 |
15 | 16 |
17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/components/message/sendmessage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { hashHistory } from 'react-router'; 3 | import M from './m' 4 | import { NavBar, SearchBar, Popover, Icon } from 'antd-mobile'; 5 | import FontAwesome from 'react-fontawesome'; 6 | const Item = Popover.Item; 7 | export default class sendmessage extends React.Component { 8 | state = { 9 | visible: false, 10 | selected: '', 11 | }; 12 | onSelect = (opt) => { 13 | this.setState({ 14 | visible: true, 15 | selected: opt.props.value, 16 | }); 17 | }; 18 | handleVisibleChange = (visible) => { 19 | this.setState({ 20 | visible, 21 | }); 22 | }; 23 | render() { 24 | let offsetX = -10; // just for pc demo 25 | if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) { 26 | offsetX = -26; 27 | } 28 | return ( 29 |
30 | hashHistory.goBack()} 32 | style={{ background: '#333', color: '#fff' }} 33 | rightContent={ 34 | } data-seed="logId">Github), 40 | (} style={{ whiteSpace: 'nowrap' }}>Google), 41 | (}> 42 | 帮助 43 | ) 44 | ]} 45 | align={{ 46 | overflow: { adjustY: 0, adjustX: 0 }, 47 | offset: [offsetX, 15], 48 | }} 49 | onVisibleChange={this.handleVisibleChange} 50 | onSelect={this.onSelect} 51 | > 52 |
60 | 61 |
62 | 63 | } 64 | > 65 | 私信 66 | 67 | 71 | 72 |
73 | ); 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/components/otherNav.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { hashHistory } from 'react-router'; 3 | import FontAwesome from 'react-fontawesome'; 4 | import { NavBar } from 'antd-mobile'; 5 | export default class otherNav extends React.Component { 6 | constructor(props){ 7 | super(props); 8 | this.state = { 9 | title: '', 10 | }; 11 | } 12 | render() { 13 | return ( 14 |
15 | hashHistory.goBack()} 17 | style={{ background: '#333', color: '#fff' }} 18 | rightContent={[ 19 | hashHistory.push('/other/message')}> 20 | ]} 21 | > 22 | {this.state.title} 23 | 24 |
25 | {this.props && this.props.children && React.cloneElement(this.props.children, { 26 | changeNavTitle: title => this.setState({ title }) 27 | }) || 'no content'} 28 | 29 |
30 |
31 | ); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/components/setting/setting.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | List, WhiteSpace, NavBar, Switch, Modal, Toast, Button 4 | } from 'antd-mobile'; 5 | import { hashHistory } from 'react-router'; 6 | const alert = Modal.alert; 7 | export default class Demo extends React.Component { 8 | constructor(props) { 9 | super(props); 10 | } 11 | componentDidMount() { 12 | this.props.changeNavTitle('设置'); 13 | } 14 | render() { 15 | const Item = List.Item; 16 | const data1 = [ 17 | { 18 | text: '修改手机号码', 19 | }, 20 | { 21 | text: '修改邮箱', 22 | }, 23 | { 24 | text: '修改密码', 25 | }, 26 | { 27 | text: '社交账号绑定', 28 | } 29 | ]; 30 | const listItems1 = data1.map((data) => 31 | {hashHistory.push('/other/notdone')}} 32 | extra={}> 33 | {data.text} 34 | 35 | ); 36 | const data2 = [ 37 | { 38 | text: '设置智能组卷题目数', 39 | }, 40 | { 41 | text: '设置智能组卷来源', 42 | }, 43 | { 44 | text: '智能组卷已屏蔽题目', 45 | } 46 | ]; 47 | const listItems2 = data2.map((data) => 48 | {hashHistory.push('/other/notdone')}} 49 | extra={}> 50 | {data.text} 51 | 52 | ); 53 | return ( 54 |
55 | 56 | {listItems1} 57 | 58 | {listItems2} 59 | 60 | {hashHistory.push('/other/notdone')}} 61 | extra={}> 62 | 提醒和邮件 63 | 64 | 65 | {hashHistory.push('/other/notdone')}} 66 | extra={}> 67 | 修改手机号码 68 | 69 | 70 | alert('退出', '确定退出登录么?', [ 71 | { text: '取消', onPress: () => console.log('cancel') }, 72 | { 73 | text: '确定', 74 | onPress: () => new Promise((resolve) => { 75 | Toast.info('已退出登录', 1); 76 | setTimeout(resolve, 1000); 77 | }), 78 | }, 79 | ])}> 80 |
退出登录
81 | 82 | 83 |
84 | ); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/components/test/addtest/addtest.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | List, WhiteSpace, Button, WingBlank, DatePicker 4 | } from 'antd-mobile'; 5 | import { createForm } from 'rc-form'; 6 | 7 | class addtest extends React.Component { 8 | componentDidMount() { 9 | this.props.changeNavTitle('添加事件'); 10 | } 11 | render(props) { 12 | const { getFieldProps } = this.props.form; 13 | const Item = List.Item; 14 | return ( 15 |
16 | 17 | }> 18 | 公司 19 | 20 | 27 | }> 28 | 考试日期 29 | 30 | 31 | 32 | 33 | }> 34 | 考试开始时间 35 | 36 | 37 | 38 | 39 | }> 40 | 考试结束时间 41 | 42 | 43 | 在线笔试}> 44 | 考试形式 45 | 46 | 47 | 48 | 49 | 50 | 51 | 54 | 55 |
); 56 | } 57 | } 58 | export default createForm()(addtest); 59 | -------------------------------------------------------------------------------- /src/components/test/company.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Tabs, Card } from 'antd-mobile'; 3 | import List from './list' 4 | import FontAwesome from 'react-fontawesome'; 5 | const TabPane = Tabs.TabPane; 6 | export default class company extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | } 10 | componentDidMount() { 11 | this.props.changeNavTitle('公司真题套题'); 12 | } 13 | render() { 14 | const photo = {width: "2.5rem",height: "1.5rem", marginRight: ".5rem"}; 15 | const data = [ 16 | { 17 | text: '百度', 18 | num: 18 19 | }, 20 | { 21 | text: '腾讯', 22 | num: 22 23 | }, 24 | { 25 | text: '去哪儿', 26 | num: 2 27 | }, 28 | { 29 | text: '人人网', 30 | num: 6 31 | }, 32 | { 33 | text: '微博', 34 | num: 1 35 | }, 36 | { 37 | text: '阿里巴巴', 38 | num: 22 39 | }, 40 | { 41 | text: '携程', 42 | num: 2 43 | }, 44 | { 45 | text: '盛大', 46 | num: 1 47 | }, 48 | { 49 | text: '奇虎', 50 | num: 9 51 | }, 52 | { 53 | text: 'google', 54 | num: 3 55 | }, 56 | { 57 | text: '微软', 58 | num: 2 59 | }, 60 | { 61 | text: '小米', 62 | num: 2 63 | }, 64 | { 65 | text: '搜狐', 66 | num: 7 67 | }, 68 | { 69 | text: '网易', 70 | num: 18 71 | }, 72 | { 73 | text: '京东', 74 | num: 23 75 | }, 76 | { 77 | text: '迅雷', 78 | num: 4 79 | }, 80 | { 81 | text: '楚楚街', 82 | num: 2 83 | }, 84 | { 85 | text: '滴滴', 86 | num: 14 87 | }, 88 | { 89 | text: '蘑菇街', 90 | num: 3 91 | }, 92 | { 93 | text: '58同城', 94 | num: 3 95 | }, 96 | { 97 | text: '英特尔', 98 | num: 1 99 | }, 100 | { 101 | text: '乐视网', 102 | num: 2 103 | }, 104 | { 105 | text: '完美世界', 106 | num: 4 107 | }, 108 | { 109 | text: '欢聚时代', 110 | num: 22 111 | } 112 | ]; 113 | const data1 = [ 114 | { 115 | url: 'http://imgs.ebrun.com/resources/2017_04/2017_04_26/201704264801493194852581.jpg', 116 | title: '京东2017校招金融市场商务&金融风控方向笔试试卷', 117 | num: 73, 118 | people: 1 119 | }, 120 | { 121 | url: 'http://imgs.ebrun.com/resources/2017_04/2017_04_26/201704264801493194852581.jpg', 122 | title: '京东2017校招职能方向笔试试卷', 123 | num: 108, 124 | people: 7 125 | }, 126 | { 127 | url: 'http://www.baidu.com/img/bd_logo1.png', 128 | title: '欢聚时代2017校招笔试题目（PHP工程师类）C卷', 129 | num: 37, 130 | people: 49 131 | }, 132 | { 133 | url: 'http://www.baidu.com/img/bd_logo1.png', 134 | title: '欢聚时代2017校招笔试题目（ios工程师类）C卷', 135 | num: 44, 136 | people: 18 137 | }, 138 | { 139 | url: 'http://www.baidu.com/img/bd_logo1.png', 140 | title: '欢聚时代2017校招笔试题目（web前端类）C卷', 141 | num: 28, 142 | people: 176 143 | }, 144 | { 145 | url: 'http://www.baidu.com/img/bd_logo1.png', 146 | title: '欢聚时代2017校招笔试题目（c++基础类）C卷', 147 | num: 24, 148 | people: 207 149 | }, 150 | { 151 | url: 'http://www.baidu.com/img/bd_logo1.png', 152 | title: '欢聚时代2017校招笔试题目（产品类）C卷', 153 | num: 28, 154 | people: 45 155 | }, 156 | { 157 | url: 'http://www.baidu.com/img/bd_logo1.png', 158 | title: '欢聚时代2017校招笔试题目（JAVA基础类）C卷', 159 | num: 23, 160 | people: 291 161 | } 162 | ]; 163 | const CardItems1 = data1.map((data) => 164 | 165 | 168 | 169 | 170 | {data.title} 171 | 172 |
173 | 174 | 175 | 已有{data.people}人参加 176 | 177 |
178 | 179 | 180 | 题目数量：{data.num} 181 | 182 |
183 | 184 | 185 | 难度 186 | 187 | 188 | 189 | 190 | 191 | } 192 | thumb={data.url} 193 | thumbStyle={photo} 194 | /> 195 | 196 | ); 197 | return ( 198 |
199 | 200 | 推荐 } key="1"> 201 | {CardItems1} 202 | 203 | 全部 } key="2"> 204 | 205 | 206 | 207 |
208 | ); 209 | } 210 | } 211 | -------------------------------------------------------------------------------- /src/components/test/lesson.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import FontAwesome from 'react-fontawesome'; 3 | import { 4 | Card 5 | } from 'antd-mobile'; 6 | export default class lesson extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | } 10 | componentDidMount() { 11 | this.props.changeNavTitle('课程'); 12 | } 13 | render() { 14 | const photo = {width: "2.5rem",height: "1.5rem", marginRight: ".5rem"}; 15 | const data1 = [ 16 | { 17 | url: 'http://images.freeimages.com/images/premium/previews/3080/30803618-education-concept-head-with-keyhole-and-lesson-on-chalkboard-ba.jpg', 18 | title: 'BAT面试算法精品课', 19 | num: 12, 20 | people: 34991 21 | }, 22 | { 23 | url: 'https://static01.nyt.com/images/2015/12/27/books/review/27openbook-LN2/27openbook-master675.jpg', 24 | title: '牛课堂算法精讲直播课', 25 | num: 9, 26 | people: 22329 27 | }, 28 | { 29 | url: 'https://flyingbullschool.files.wordpress.com/2014/03/every-lesson-counts.png', 30 | title: '基础算法在面试题中的应用', 31 | num: 1, 32 | people: 14624 33 | }, 34 | { 35 | url: 'https://dataworks-ed.com/wp-content/uploads/2014/08/A-Better-PowerPoint-Lesson.png', 36 | title: '牛人计划-初级项目课', 37 | num: 6, 38 | people: 210 39 | }, 40 | { 41 | url: 'http://study.com/cimages/course-image/high-school-chemistry-syllabus-resource-lesson-plans_138512_large.jpg', 42 | title: '牛人计划-中级项目课', 43 | num: 10, 44 | people: 289 45 | }, 46 | { 47 | url: 'http://wosu.org/wp-content/uploads/2015/10/columbus-neighborhoods-1.jpg', 48 | title: '牛人计划-高级项目课', 49 | num: 14, 50 | people: 289 51 | }, 52 | { 53 | url: 'https://ichef.bbci.co.uk/images/ic/1200x675/p03cp7r6.jpg', 54 | title: '机器学习特训营', 55 | num: 9, 56 | people: 646 57 | }, 58 | { 59 | url: 'https://i.ytimg.com/vi/1fJN8bffTW4/maxresdefault.jpg', 60 | title: '技术面之项目面试技术大揭秘', 61 | num: 1, 62 | people: 15505 63 | }, 64 | { 65 | url: 'https://www.pittsfordschools.org/cms/lib/NY02205365/Centricity/Template/GlobalAssets/images///PCSD%20Logos/Color%20Two%20line%20Stacked%20Pittsford%20Schools.jpg', 66 | title: 'Git&Github入门', 67 | num: 22, 68 | people: 12790 69 | }, 70 | { 71 | url: 'https://illuminations.nctm.org/uploadedImages/Content/Lessons/Highlights_Rotator/NCTMKenKen_Clear_Bkgrd_INTRO_Screen.png', 72 | title: 'HTML入门基础', 73 | num: 17, 74 | people: 6508 75 | }, 76 | ]; 77 | const CardItems1 = data1.map((data) => 78 | 79 | 82 | 83 | 84 | {data.title} 85 | 86 |
87 | 88 | 89 | 共有{data.num}章 90 | 91 |
92 | 93 | 94 | {data.people}人学习 95 | 96 | 97 | } 98 | thumb={data.url} 99 | thumbStyle={photo} 100 | /> 101 | 102 | ); 103 | return ( 104 |
105 | {CardItems1} 106 |
107 | ); 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /src/components/test/list.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | List 4 | } from 'antd-mobile'; 5 | export default class listsub extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | render(props) { 10 | const Item = List.Item; 11 | const listItems1 = this.props.data.map((data) => 12 | {data.num}套}> 13 | {data.text} 14 | 15 | ); 16 | return ( 17 |
18 | {listItems1} 19 |
20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/components/test/listsub.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | List 4 | } from 'antd-mobile'; 5 | export default class list extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | render(props) { 10 | const Item = List.Item; 11 | const Brief = Item.Brief; 12 | const listItems1 = this.props.data.map((data) => 13 | 14 | {data.text} 15 | {data.sub} 16 | 17 | ); 18 | return ( 19 |
20 | {listItems1} 21 |
22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/test/practice.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import FontAwesome from 'react-fontawesome'; 3 | import { hashHistory } from 'react-router'; 4 | import { Accordion, List } from 'antd-mobile'; 5 | export default class practice extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | render() { 10 | const Item = List.Item; 11 | const Brief = Item.Brief; 12 | const data1 = [ 13 | { 14 | title: 'HTML/CSS', 15 | num: 221, 16 | done: 221 17 | }, 18 | { 19 | title: 'C#', 20 | num: 30, 21 | done: 0 22 | }, 23 | { 24 | title: 'Javascript', 25 | num: 190, 26 | done: 190 27 | }, 28 | { 29 | title: 'Java', 30 | num: 935, 31 | done: 115 32 | }, 33 | { 34 | title: 'C/C++', 35 | num: 2300, 36 | done: 8 37 | } 38 | ]; 39 | const dataconstructor = [ 40 | { 41 | title: '数组', 42 | num: 303, 43 | done: 1 44 | }, 45 | { 46 | title: '字符串#', 47 | num: 80, 48 | done: 1 49 | }, 50 | { 51 | title: '链表', 52 | num: 343, 53 | done: 1 54 | }, 55 | { 56 | title: '栈', 57 | num: 297, 58 | done: 0 59 | }, 60 | { 61 | title: '队列', 62 | num: 167, 63 | done: 0 64 | }, 65 | { 66 | title: '树', 67 | num: 730, 68 | done: 10 69 | }, 70 | { 71 | title: '图', 72 | num: 331, 73 | done: 0 74 | }, 75 | { 76 | title: '哈希', 77 | num: 88, 78 | done: 1 79 | }, 80 | { 81 | title: '堆', 82 | num: 61, 83 | done: 1 84 | } 85 | ]; 86 | const dataalogorithm = [ 87 | { 88 | title: '查找', 89 | num: 159, 90 | done: 11 91 | }, 92 | { 93 | title: '排序', 94 | num: 396, 95 | done: 1 96 | }, 97 | { 98 | title: '递归', 99 | num: 31, 100 | done: 0 101 | }, 102 | { 103 | title: '复杂度', 104 | num: 242, 105 | done: 2 106 | }, 107 | { 108 | title: '高级算法', 109 | num: 64, 110 | done: 0 111 | } 112 | ]; 113 | const listItems1 = data1.map((data) => 114 | 练习}> 115 | {data.title} 共{data.num}题 | 已练习{data.done}题 116 | 117 | ); 118 | const listItems2 = dataconstructor.map((data) => 119 | 练习}> 120 | {data.title} 共{data.num}题 | 已练习{data.done}题 121 | 122 | ); 123 | const listItems3 = dataalogorithm.map((data) => 124 | 练习}> 125 | {data.title} 共{data.num}题 | 已练习{data.done}题 126 | 127 | ); 128 | return ( 129 |
130 | 131 | 编程语言}> 132 | {listItems1} 133 | 134 | 数据结构}> 135 | {listItems2} 136 | 137 | 算法}> 138 | {listItems3} 139 | 140 | 141 |
142 | ); 143 | } 144 | } 145 | -------------------------------------------------------------------------------- /src/components/test/question.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Tabs } from 'antd-mobile'; 3 | import Practice from './practice' 4 | import List from './list' 5 | 6 | const TabPane = Tabs.TabPane; 7 | export default class specialpractice extends React.Component { 8 | constructor(props) { 9 | super(props); 10 | } 11 | componentDidMount() { 12 | this.props.changeNavTitle('题目查看讨论'); 13 | } 14 | render() { 15 | const data1 = [ 16 | { 17 | text: '百度', 18 | num: 18 19 | }, 20 | { 21 | text: '腾讯', 22 | num: 22 23 | }, 24 | { 25 | text: '去哪儿', 26 | num: 2 27 | }, 28 | { 29 | text: '人人网', 30 | num: 6 31 | }, 32 | { 33 | text: '微博', 34 | num: 1 35 | }, 36 | { 37 | text: '阿里巴巴', 38 | num: 22 39 | }, 40 | { 41 | text: '携程', 42 | num: 2 43 | }, 44 | { 45 | text: '盛大', 46 | num: 1 47 | }, 48 | { 49 | text: '奇虎', 50 | num: 9 51 | }, 52 | { 53 | text: 'google', 54 | num: 3 55 | }, 56 | { 57 | text: '微软', 58 | num: 2 59 | }, 60 | { 61 | text: '小米', 62 | num: 2 63 | }, 64 | { 65 | text: '搜狐', 66 | num: 7 67 | }, 68 | { 69 | text: '网易', 70 | num: 18 71 | }, 72 | { 73 | text: '京东', 74 | num: 23 75 | }, 76 | { 77 | text: '迅雷', 78 | num: 4 79 | }, 80 | { 81 | text: '楚楚街', 82 | num: 2 83 | }, 84 | { 85 | text: '滴滴', 86 | num: 14 87 | }, 88 | { 89 | text: '蘑菇街', 90 | num: 3 91 | }, 92 | { 93 | text: '58同城', 94 | num: 3 95 | }, 96 | { 97 | text: '英特尔', 98 | num: 1 99 | }, 100 | { 101 | text: '乐视网', 102 | num: 2 103 | }, 104 | { 105 | text: '完美世界', 106 | num: 4 107 | }, 108 | { 109 | text: '欢聚时代', 110 | num: 22 111 | } 112 | ]; 113 | return ( 114 |
115 | 116 | 知识点 } key="1"> 117 | 118 | 119 | 公司 } key="2"> 120 | 121 | 122 | 123 |
124 | ); 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /src/components/test/special.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import FontAwesome from 'react-fontawesome'; 3 | import { 4 | Card 5 | } from 'antd-mobile'; 6 | export default class special extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | } 10 | componentDidMount() { 11 | this.props.changeNavTitle('精华专题'); 12 | } 13 | render() { 14 | const photo = {width: "2.5rem",height: "1.5rem", marginRight: ".5rem"}; 15 | const data1 = [ 16 | { 17 | url: 'http://images.freeimages.com/images/premium/previews/3080/30803618-education-concept-head-with-keyhole-and-lesson-on-chalkboard-ba.jpg', 18 | title: '前端面试经典题目合集', 19 | num: 72, 20 | people: 13657 21 | }, 22 | { 23 | url: 'https://static01.nyt.com/images/2015/12/27/books/review/27openbook-LN2/27openbook-master675.jpg', 24 | title: '剑指Offer', 25 | num: 66, 26 | people: 1481163 27 | }, 28 | { 29 | url: 'https://flyingbullschool.files.wordpress.com/2014/03/every-lesson-counts.png', 30 | title: '2017校招真题编程练习', 31 | num: 69, 32 | people: 34133 33 | }, 34 | { 35 | url: 'https://dataworks-ed.com/wp-content/uploads/2014/08/A-Better-PowerPoint-Lesson.png', 36 | title: '2016校招真题编程练习', 37 | num: 105, 38 | people: 273579 39 | }, 40 | { 41 | url: 'http://study.com/cimages/course-image/high-school-chemistry-syllabus-resource-lesson-plans_138512_large.jpg', 42 | title: '数据库SQL实战', 43 | num: 61, 44 | people: 17040 45 | }, 46 | { 47 | url: 'http://wosu.org/wp-content/uploads/2015/10/columbus-neighborhoods-1.jpg', 48 | title: 'leetcode在线编程训练', 49 | num: 148, 50 | people: 224584 51 | }, 52 | { 53 | url: 'https://ichef.bbci.co.uk/images/ic/1200x675/p03cp7r6.jpg', 54 | title: 'ACM在线编程训练', 55 | num: 7418, 56 | people: 107655 57 | }, 58 | { 59 | url: 'https://i.ytimg.com/vi/1fJN8bffTW4/maxresdefault.jpg', 60 | title: 'ACM解题大全', 61 | num: 9380, 62 | people: 34647 63 | }, 64 | { 65 | url: 'https://www.pittsfordschools.org/cms/lib/NY02205365/Centricity/Template/GlobalAssets/images///PCSD%20Logos/Color%20Two%20line%20Stacked%20Pittsford%20Schools.jpg', 66 | title: 'C/C++面试经典题目合集', 67 | num: 19, 68 | people: 46827 69 | }, 70 | { 71 | url: 'https://illuminations.nctm.org/uploadedImages/Content/Lessons/Highlights_Rotator/NCTMKenKen_Clear_Bkgrd_INTRO_Screen.png', 72 | title: '软件测试经典题目合集', 73 | num: 24, 74 | people: 20049 75 | }, 76 | ]; 77 | const CardItems1 = data1.map((data) => 78 | 79 | 82 | 83 | 84 | {data.title} 85 | 86 |
87 | 88 | 89 | 共{data.num}题 90 | 91 |
92 | 93 | 94 | {data.people}人学习 95 | 96 | 97 | } 98 | thumb={data.url} 99 | thumbStyle={photo} 100 | /> 101 | 102 | ); 103 | return ( 104 |
105 | {CardItems1} 106 |
107 | ); 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /src/components/test/specialpractice.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Practice from './practice' 3 | export default class company extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | } 7 | componentDidMount() { 8 | this.props.changeNavTitle('公司真题套题'); 9 | } 10 | render() { 11 | return ( 12 |
13 | 14 |
15 | ); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/test/testcalendar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Listsub from './listsub' 3 | import { hashHistory } from 'react-router'; 4 | export default class testcalendar extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | } 8 | componentDidMount() { 9 | this.props.changeNavTitle('笔试日历'); 10 | } 11 | render() { 12 | const data = [ 13 | { 14 | text: '拼多多', 15 | sub: '09月02日 15：00 - 17：00' 16 | }, 17 | { 18 | text: '百度内推', 19 | sub: '09月02日 19：00 - 21：00' 20 | }, 21 | { 22 | text: 'CVTE第二场', 23 | sub: '09月02日 19：00 - 20：30' 24 | }, 25 | { 26 | text: '链家网', 27 | sub: '09月02日 19：00 - 21：00' 28 | }, 29 | { 30 | text: '华为', 31 | sub: '09月06日 19：00 - 21：30' 32 | }, 33 | { 34 | text: '拼多多', 35 | sub: '09月02日 15：00 - 17：00' 36 | }, 37 | { 38 | text: '百度内推', 39 | sub: '09月02日 19：00 - 21：00' 40 | }, 41 | { 42 | text: 'CVTE第二场', 43 | sub: '09月02日 19：00 - 20：30' 44 | }, 45 | { 46 | text: '链家网', 47 | sub: '09月02日 19：00 - 21：00' 48 | }, 49 | { 50 | text: '华为', 51 | sub: '09月06日 19：00 - 21：30' 52 | }, 53 | { 54 | text: '拼多多', 55 | sub: '09月02日 15：00 - 17：00' 56 | }, 57 | { 58 | text: '百度内推', 59 | sub: '09月02日 19：00 - 21：00' 60 | }, 61 | { 62 | text: 'CVTE第二场', 63 | sub: '09月02日 19：00 - 20：30' 64 | }, 65 | { 66 | text: '链家网', 67 | sub: '09月02日 19：00 - 21：00' 68 | }, 69 | { 70 | text: '华为', 71 | sub: '09月06日 19：00 - 21：30' 72 | }, 73 | ]; 74 | return ( 75 |
76 | 77 |
{hashHistory.push('/other/addtest')} } style={{ position: "fixed", bottom: ".3rem", right: ".3rem", borderRadius: "50%", width: "1rem", height: "1rem", color: "#fff", 78 | backgroundColor: "#148F77", textAlign: "center", lineHeight: "1rem", fontSize: ".4rem", opacity: ".8"}}>+
79 |
80 | ); 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/components/test/wrongpractice.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Practice from './practice' 3 | export default class wrongpractice extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | } 7 | componentDidMount() { 8 | this.props.changeNavTitle('错题练习'); 9 | } 10 | render() { 11 | return ( 12 |
13 | 14 |
15 | ); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | // import 'antd-mobile/lib/button/style/index.css'; 5 | // import Button from 'antd-mobile/lib/button'; 6 | 7 | import { Router, Route, hashHistory, IndexRoute, Link } from 'react-router'; 8 | 9 | import App from './components/App'; 10 | import Menulearn from './components/menulearn'; 11 | import Menucommunity from './components/menucommunity'; 12 | import Menumessage from './components/menumessage'; 13 | import Menume from './components/menume'; 14 | import OtherNav from './components/otherNav'; 15 | import Setting from './components/setting/setting'; 16 | import OtherMessage from './components/message/othermessage'; 17 | import SendMessage from './components/message/sendmessage'; 18 | import Specialpractice from './components/test/specialpractice'; 19 | import Wrong from './components/test/wrongpractice'; 20 | import Question from './components/test/question'; 21 | import Lesson from './components/test/lesson'; 22 | import Company from './components/test/company'; 23 | import Special from './components/test/special'; 24 | import Testcalendar from './components/test/testcalendar'; 25 | import Addtest from './components/test/addtest/addtest'; 26 | import Notdone from './components/design/notdone'; 27 | import Me from './components/menume/me'; 28 | 29 | import './index.less'; 30 | 31 | ReactDOM.render( 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | , document.getElementById('example')); 56 | -------------------------------------------------------------------------------- /src/index.less: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | } 4 | body { 5 | overflow: auto!important; 6 | -webkit-overflow-scrolling: touch; 7 | background-color: #E5E7E9; 8 | } 9 | #example, .container { 10 | height: 100%; 11 | } 12 | .body { 13 | position: absolute; top: 0; bottom: 0; left: 0; right: 0; 14 | overflow: scroll; 15 | } 16 | .fixed-bottom { 17 | position: fixed; bottom: 0; left: 0; 18 | width: 100%; height: 70px; 19 | background-color: #ddd; 20 | } 21 | hr { 22 | margin: 70px 10px; 23 | } 24 | 25 | // fix style 26 | .am-modal-content { 27 | height: auto; 28 | min-height: 100%; 29 | } 30 | // .am-popup-mask, .am-popup-wrap, .am-popup { 31 | // position: absolute; 32 | // } 33 | .am-refresh-control-pull, .am-refresh-control-release { 34 | justify-content: flex-start; 35 | } 36 | .am-grid-text { 37 | font-size: 60%; 38 | } 39 | .btn-container .btn { 40 | margin: 0.16rem 0; 41 | } 42 | .sub-title { 43 | margin-left: 0.3rem; 44 | } 45 | .result-example .icon { 46 | width: 1.2rem; 47 | height: 1.2rem; 48 | } 49 | .sub-title { 50 | color: #888; 51 | font-size: .28rem; 52 | padding: 30px 0 18px 0; 53 | } 54 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 4 | const autoprefixer = require('autoprefixer'); 5 | const pxtorem = require('postcss-pxtorem'); 6 | 7 | const Visualizer = require('webpack-visualizer-plugin'); // remove it in production environment. 8 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // remove it in production environment. 9 | const otherPlugins = process.argv[1].indexOf('webpack-dev-server') >= 0 ? [] : [ 10 | new Visualizer(), // remove it in production environment. 11 | new BundleAnalyzerPlugin({ 12 | defaultSizes: 'parsed', 13 | // generateStatsFile: true, 14 | statsOptions: { source: false } 15 | }), // remove it in production environment. 16 | ]; 17 | 18 | module.exports = { 19 | devtool: 'source-map', // or 'inline-source-map' 20 | devServer: { 21 | disableHostCheck: true 22 | }, 23 | 24 | entry: { "index": path.resolve(__dirname, 'src/index') }, 25 | 26 | output: { 27 | filename: '[name].js', 28 | chunkFilename: '[id].chunk.js', 29 | path: path.join(__dirname, '/dist'), 30 | publicPath: '/dist/' 31 | }, 32 | 33 | resolve: { 34 | modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')], 35 | extensions: ['', '.web.js', '.jsx', '.js', '.json'], 36 | }, 37 | 38 | module: { 39 | noParse: [/moment.js/], 40 | loaders: [ 41 | { 42 | test: /\.jsx$/, exclude: /node_modules/, loader: 'babel', 43 | query: { 44 | plugins: [ 45 | 'external-helpers', // why not work? 46 | ["transform-runtime", { polyfill: false }], 47 | ["import", [{ "style": "css", "libraryName": "antd-mobile" }]] 48 | ], 49 | presets: ['es2015', 'stage-0', 'react'] 50 | } 51 | }, 52 | { test: /\.(jpg|png)$/, loader: "url?limit=8192" }, 53 | // svg-sprite for antd-mobile@1.0 54 | { test: /\.(svg)$/i, loader: 'svg-sprite', include: [ 55 | require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. 属于 antd-mobile 内置 svg 文件 56 | // path.resolve(__dirname, 'src/my-project-svg-foler'), // 自己私人的 svg 存放目录 57 | ]}, 58 | // { test: /\.css$/, loader: 'style!css' }, // 把css处理成内联style，动态插入到页面 59 | { test: /\.less$/i, loader: ExtractTextPlugin.extract('style', 'css!postcss!less') }, 60 | { test: /\.css$/i, loader: ExtractTextPlugin.extract('style', 'css!postcss') } 61 | ] 62 | }, 63 | postcss: [ 64 | autoprefixer({ 65 | browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'], 66 | }), 67 | pxtorem({ rootValue: 100, propWhiteList: [] }) 68 | ], 69 | externals: { 70 | "react": "React", 71 | "react-dom": "ReactDOM" 72 | }, 73 | plugins: [ 74 | // new webpack.optimize.CommonsChunkPlugin('shared.js'), 75 | new webpack.optimize.CommonsChunkPlugin({ 76 | // minChunks: 2, 77 | name: 'shared', 78 | filename: 'shared.js' 79 | }), 80 | new ExtractTextPlugin('[name].css', { allChunks: true }), 81 | ...otherPlugins 82 | ] 83 | } 84 | --------------------------------------------------------------------------------