[ { "path": ".babelrc", "content": "{\n \"presets\": [\n \"es2015\",\n \"react\",\n \"stage-0\"\n ],\n \"plugins\": [[\"import\", { \"libraryName\": \"antd\", \"style\": true }]]\n}" }, { "path": ".gitattributes", "content": "# Auto detect text files and perform LF normalization\n* text=auto\n\n# Custom for Visual Studio\n*.cs diff=csharp\n\n# Standard to msysgit\n*.doc\t diff=astextplain\n*.DOC\t diff=astextplain\n*.docx diff=astextplain\n*.DOCX diff=astextplain\n*.dot diff=astextplain\n*.DOT diff=astextplain\n*.pdf diff=astextplain\n*.PDF\t diff=astextplain\n*.rtf\t diff=astextplain\n*.RTF\t diff=astextplain\n" }, { "path": ".gitignore", "content": "node_modules\n\n.idea\ndist\n\nnpm-debug.log\nyarn-error.log\n\n" }, { "path": "README.md", "content": "## 简趣\n一个简单趣味的pc-react站\n\n###技术栈\n- React\n- React-Router\n- ES6\n- Less\n- Antd\n- Mock.js\n- Webpack\n \n###运行\n在目录中，运行指令\n\n npm install\n\n开发版\n \n yarn run dev\n\n发布版\n\n yarn run pro\n\n###历程(各种偷懒啊)\n\n2.24\n配置webpack与包管理 \n2.25\n配置webpack开发热更新\n4.6\n使用stage-0编程，这样可以省去bind(this)\n使用聚合数据API与localStorage做用户登录,接口只能接受username-aaa\n4.21\n完成电影详情页，首页\n5.21\nrouter的异步加载\n\n###挖坑埋坑\n\n1. 公共的base，其他css引用不每次都要引用\n2. 豆瓣的API访问次数，30次/min\n3. 异步读取数据时，返回数据之前切换router会使页面报waring，setState nothing 用给路由一个状态this.mouted\n4. fetch时mock的数据需要放在服务器环境才能拦截http请求,未解决--需要配置node后台环境\n5. 组件样式问题，需要在渲染组件上引入，不应在容器组件上那应用样式，会导致再次使用时还需引样式\n6. fetch错误的catch怎么能统一返回一个数据组合？给一个state做判断，能不能统一返回一个DOM节点--不能\n7. 组件的大小样式是px像素，而当二次使用时不可适配，应使用百分比\n8. webpack打包无法处理jsx中的img标签引用，使用require()则会被编译\n9. react-router@4.x.x渲染是需要按照react-router-dom，没有hashHistory方法，推荐使用browserHistory,只有react-router@3.x.x才有hashHistory\n\n###预览\n![](http://i.imgur.com/6aPjIX4.jpg)\n![](http://i.imgur.com/7FQl7Q4.jpg)\n\n" }, { "path": "package.json", "content": "{\n \"name\": \"EasyFun\",\n \"version\": \"1.0.0\",\n \"description\": \"A project using react es6 webpack antd..\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n \"dev\": \"webpack-dev-server --config webpack.dev.config.js --devtool eval --progress --colors --hot --inline --content-base src\",\n \"pub\": \" rimraf dist/* && webpack --config webpack.pub.config.js -p\"\n },\n \"author\": \"xiaomeng\",\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"autoprefixer-loader\": \"^3.2.0\",\n \"babel-core\": \"^6.21.0\",\n \"babel-loader\": \"^6.2.10\",\n \"babel-plugin-import\": \"^1.1.1\",\n \"babel-preset-es2015\": \"^6.18.0\",\n \"babel-preset-react\": \"^6.16.0\",\n \"babel-preset-stage-0\": \"^6.22.0\",\n \"css-loader\": \"^0.26.1\",\n \"es6-promise\": \"^4.1.0\",\n \"extract-text-webpack-plugin\": \"^1.0.1\",\n \"fetch-jsonp\": \"^1.0.6\",\n \"file-loader\": \"^0.9.0\",\n \"html-webpack-plugin\": \"^2.28.0\",\n \"less\": \"^2.7.2\",\n \"less-loader\": \"^2.2.3\",\n \"mockjs\": \"^1.0.1-beta3\",\n \"open-browser-webpack-plugin\": \"0.0.3\",\n \"react-hot-loader\": \"^1.3.1\",\n \"rimraf\": \"^2.6.1\",\n \"style-loader\": \"^0.13.1\",\n \"url-loader\": \"^0.5.7\",\n \"webpack\": \"^1.14.0\",\n \"webpack-dev-server\": \"^1.16.2\",\n \"yarn\": \"^0.21.3\"\n },\n \"dependencies\": {\n \"antd\": \"^2.7.2\",\n \"react\": \"^15.4.2\",\n \"react-dom\": \"^15.4.2\",\n \"react-router\": \"^3.0.2\"\n }\n}\n" }, { "path": "src/common/fetch.js", "content": "import fetchJsonp from 'fetch-jsonp'\nimport * as config from '../config'\nrequire('es6-promise').polyfill();\n// 获取电影列表\nexport function fetch_movie(opt) {\n if (!opt) {\n return false;\n }\n let REQUEST_PATH = `${config.SERVER_PATH}movie/${opt.type}`;\n if (opt.type !== 'us_box') {\n REQUEST_PATH += `?start=${opt.start}&count=${opt.count}`\n }\n const result = fetchJsonp(REQUEST_PATH, {\n timeout: 3000,\n });\n\n return result.then(response=> {\n return response.json();\n }).catch(err=>\n console.log('parsing failed', err)\n );\n}\n\n// 获取电影详情\nexport function fetch_movieDetail(opt) {\n if (!opt) {\n return false;\n }\n const REQUEST_PATH = `${config.SERVER_PATH}movie/subject/${opt.id}`;\n const result = fetchJsonp(REQUEST_PATH, {\n timeout: 3000,\n });\n\n return result.then(response=> {\n return response.json();\n }).catch(err=>\n console.log('parsing failed', err)\n );\n}\n\n// 登录注册\nexport function fetch_login(opt) {\n if (!opt) {\n return false;\n }\n let params = '';\n for (let [key, value] of Object.entries(opt)) {\n params += `&${key}=${value}`;\n localStorage.setItem(key, value);\n }\n params = params.substring(1);\n let LOGIN_PATH = `${config.LOGIN_PATH}?${params}`;\n return fetch(LOGIN_PATH, {method: 'GET'})\n .then(response => {\n return response.json()\n })\n .catch(err=>\n console.log('parsing failed', err)\n )\n}\n\n// 获取新闻热点\nexport function fetch_spot(opt) {\n return fetch(`http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=${opt.type}&count=${opt.count}`,\n {method: 'GET'})\n .then(response=> {\n return response.json();\n })\n}\n" }, { "path": "src/common/mock.js", "content": "import Mock from 'mockjs'\nconst {Random} = Mock\n\nexport const comments = Mock.mock({\n 'commentList|5': [{\n 'id': '@natural',\n 'time': '@datetime(16-MM-dd HH:mm:ss)',\n 'name': '@cname',\n 'content': '@cparagraph',\n 'url': Random.image('50x50', Random.color(), '#FFF', Random.word(3, 5))\n }]\n});\n\nexport const commentsMore = Mock.mock({\n 'commentList|5': [{\n 'id': '@natural',\n 'time': '@datetime(16-MM-dd HH:mm:ss)',\n 'name': '@cname',\n 'content': '@cparagraph',\n 'url': Random.image('50x50', Random.color(), '#FFF', Random.word(3, 5))\n }]\n});\n\nexport const messages = Mock.mock({\n 'messageList|5-8': [{\n 'id': '@natural',\n 'title': '@ctitle(5,10)',\n 'name': '@name',\n 'url': Random.image('40x40', Random.color(), '#FFF', Random.word(3, 5))\n }]\n});\n\nexport const correlations = Mock.mock({\n 'correlationList|5-8': [{\n 'id': '@natural',\n 'title': '@ctitle(6,10)',\n 'name': '@name',\n 'url': Random.image('40x40', Random.color(), '#FFF', Random.word(3, 5))\n }]\n});\n\nexport const musicTop = Mock.mock({\n 'musicList|10':[{\n 'uniquekey' : '@natural',\n 'title': '@ctitle(3,6)'\n }]\n})\n" }, { "path": "src/components/Book/BookColumn.js", "content": "import React, {Component} from 'react'\nimport BookList from './BookList'\nimport ColumnHeader from '../ColumnHeader'\n\nexport default class MusicColumn extends Component {\n render() {\n return (\n
\n \n \n
\n )\n }\n}\n\n\n" }, { "path": "src/components/Book/BookList.js", "content": "import React from 'react'\n\nconst BookList = () => {\n return (\n
\n \n
\n )\n}\n\nexport default BookList\n" }, { "path": "src/components/ColumnHeader.js", "content": "import React from 'react'\nimport {Link} from 'react-router'\nimport Pages from './Pages'\n\nconst ColumnHeader = ({title, id , target, total, onChange, current, isMore})=> {\n return (\n
\n \n {title} \n \n \n {!isMore && }\n \n
\n )\n}\n\nexport default ColumnHeader" }, { "path": "src/components/Footer.js", "content": "import React from 'react'\nimport {Layout} from 'antd'\n\nconst {Footer} = Layout\n\nconst Foot = () => {\n return (\n \n )\n}\n\nexport default Foot\n" }, { "path": "src/components/Header.js", "content": "import React from 'react'\nimport {Link, IndexLink} from 'react-router'\nimport {Layout, Row, Col} from 'antd'\nimport Login from './Login/Login'\n\nconst {Header} = Layout\n\nconst Head = () => {\n return (\n
\n \n \n \n \n \n
    \n
  • 首页
    • \n
  • 电影
    • \n
  • 热点
    • \n
  • 音乐
    • \n
  • 书籍
    • \n
\n \n \n \n \n \n
\n )\n}\n\nexport default Head\n" }, { "path": "src/components/ListLoadMore.js", "content": "import React, {Component} from 'react'\nimport {Button} from 'antd'\n\nconst ListLoadMore = ({isLoading, handleClick, count}) => {\n return (\n
\n {count > 0 ?\n \n :\n

没有更多了

\n }\n
\n )\n}\n\nexport default ListLoadMore\n" }, { "path": "src/components/Loading.js", "content": "import React, {Component} from 'react'\nimport {Spin} from 'antd'\n\nconst Loading = ()=> {\n return (\n
\n \n
\n )\n}\n\nexport default Loading\n" }, { "path": "src/components/Login/Login.js", "content": "import React, {Component} from 'react'\nimport {Modal, Icon, Button, message} from 'antd'\nimport LoginForm from './LoginForm'\nimport Register from './Register'\n\n\nexport default class Login extends Component {\n state = {\n action: 'login',\n visible: false,\n confirmLoading: false,\n isLogin: false\n }\n componentDidMount() {\n if (localStorage.string) {\n this.setState({\n isLogin: true\n })\n }\n }\n\n showModal = () => {\n this.setState({\n visible: true\n });\n }\n\n handleCancel = () => {\n this.setState({\n visible: false\n });\n }\n\n handleRegiste = () => {\n this.setState({\n action: 'register'\n });\n }\n\n handleRegisterDone = () => {\n this.setState({\n visible: false,\n isLogin: true\n })\n }\n\n handleBack = () => {\n this.setState({\n action: 'login'\n });\n }\n\n logout = () => {\n this.setState({\n isLogin: false,\n action: 'login'\n })\n }\n\n loginDone = () => {\n this.setState({\n isLogin: true,\n visible: false\n });\n message.success(\"登录成功！\");\n }\n\n render() {\n return (\n
\n
\n {this.state.isLogin ?\n \n :\n \n }\n
\n \n \n \n \n 注册\n
: '登录'\n }\n visible={this.state.visible}\n footer={null}\n onCancel={this.handleCancel}\n >\n { this.state.action === 'register' ?\n \n :\n }\n \n \n );\n }\n}\n" }, { "path": "src/components/Login/LoginForm.js", "content": "import React, {Component} from 'react'\nimport {Form, Icon, Input, Button, message} from 'antd';\nconst FormItem = Form.Item;\n\nclass LoginForm extends Component {\n\n handleSubmit = (e) => {\n e.preventDefault();\n // 获取表单的值\n this.props.form.validateFields((err, values) => {\n if (!err && values.userName === localStorage.getItem('string') && values.password === localStorage.getItem('password')) {\n this.props.loginDone();\n // API接收登录，但不会校验\n // fetch_login(Object.assign({}, {action: 'login'}, formData), this.callback);\n } else {\n message.error('登录失败!');\n }\n });\n }\n\n render() {\n const {getFieldDecorator} = this.props.form;\n return (\n
\n \n {getFieldDecorator('userName', {\n rules: [{required: true, message: '请输入用户名!'}],\n })(\n } placeholder=\"用户名\"/>\n )}\n \n \n {getFieldDecorator('password', {\n rules: [{required: true, message: '请输入密码!'}],\n })(\n } type=\"password\" placeholder=\"密码\"/>\n )}\n \n \n \n 或 现在注册！\n \n
\n );\n }\n}\n\nexport default LoginForm = Form.create({})(LoginForm)\n" }, { "path": "src/components/Login/Register.js", "content": "import React, {Component} from 'react'\nimport {Form, Input, Button, Radio, InputNumber, message} from 'antd';\nimport {fetch_login} from '../../common/fetch'\nconst FormItem = Form.Item;\nconst RadioGroup = Radio.Group;\n\nclass RegistrationForm extends Component {\n state = {\n confirmDirty: false,\n isSubmitting: false\n };\n // 表单提交动作\n handleSubmit = (e) => {\n e.preventDefault();\n this.setState({\n isSubmitting: true\n });\n // 但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围\n this.props.form.validateFieldsAndScroll((err, values) => {\n if (!err) {\n fetch_login(Object.assign({}, {action: this.props.action}, values))\n .then(() => this.callback());\n }\n });\n }\n\n callback = () => {\n setTimeout(()=> {\n message.success(\"注册成功!\");\n this.setState({\n isSubmitting: false\n });\n this.props.handleRegisterDone();\n }, 1500);\n }\n\n handleConfirmBlur = (e) => {\n const value = e.target.value;\n this.setState({confirmDirty: this.state.confirmDirty || !!value});\n }\n\n checkPassword = (rule, value, callback) => {\n const form = this.props.form;\n if (value && value !== form.getFieldValue('password')) {\n callback('两次密码输入不一致!');\n } else {\n callback();\n }\n }\n\n checkConfirm = (rule, value, callback) => {\n const form = this.props.form;\n if (value && this.state.confirmDirty) {\n form.validateFields(['confirm'], {force: true});\n }\n callback();\n }\n\n render() {\n // 用于和表单进行双向绑定\n const {getFieldDecorator} = this.props.form;\n const formItemLayout = {\n labelCol: {\n xs: {span: 24},\n sm: {span: 6},\n },\n wrapperCol: {\n xs: {span: 24},\n sm: {span: 14},\n },\n };\n const tailFormItemLayout = {\n wrapperCol: {\n xs: {\n span: 24,\n offset: 0,\n },\n sm: {\n span: 14,\n offset: 6,\n },\n },\n };\n return (\n
\n \n {getFieldDecorator('string', {\n rules: [{\n type: 'string', message: '请输入正确的用户名!',\n }, {\n required: true, message: '请输入你的用户名!',\n }],\n })(\n \n )}\n \n \n {getFieldDecorator('password', {\n rules: [{\n required: true, message: '请输入密码!',\n }, {\n validator: this.checkConfirm,\n }],\n })(\n \n )}\n \n \n {getFieldDecorator('confirm', {\n rules: [{\n required: true, message: '请再次确认密码!',\n }, {\n validator: this.checkPassword,\n }]\n })(\n \n )}\n \n \n {getFieldDecorator('sex', {\n initialValue: 1\n })(\n \n 男\n 女\n 保密\n \n )}\n \n \n {getFieldDecorator('age', {\n initialValue: 18\n })(\n \n )}\n \n \n \n \n \n );\n }\n}\n\nexport default RegistrationForm = Form.create({})(RegistrationForm)\n" }, { "path": "src/components/Movie/MovieAbout.js", "content": "import React from 'react'\nimport {Card, Row, Col} from 'antd'\nimport {messages, correlations} from '../../common/mock'\n\nconst MovieAbout = () => {\n\n const messageList = messages.messageList.map(item=> (\n
\n \n \n \n \n \n

{item.title}

\n

{item.name}

\n \n \n
\n ));\n\n const correlationList = correlations.correlationList.map(item=> (\n
\n \n \n \n \n \n

{item.title}

\n

{item.name}

\n \n \n
\n ));\n\n return (\n \n \n {correlationList}\n \n \n {messageList}\n \n \n )\n}\n\nexport default MovieAbout\n" }, { "path": "src/components/Movie/MovieActor.js", "content": "import React from 'react'\nimport {Card, Icon} from 'antd'\nimport Loading from '../Loading'\n\nconst MovieActors = ({directors, casts, isLoading}) => {\n let actorList;\n if (!isLoading) {\n actorList = casts.map((item, index)=>(\n
  • \n {index == 0 ?

    主演

    :

    }\n \n \n \n

    {item.name}

    \n
    • \n )\n );\n }\n return (\n 更多}>\n {isLoading ?\n \n :\n
      \n
    • \n

      导演

      \n \n \n \n

      {directors[0].name}

      \n
      • \n {actorList}\n
    \n }\n     \n )\n}\n\nexport default MovieActors\n" }, { "path": "src/components/Movie/MovieBanner.js", "content": "import React, {Component} from 'react'\nimport {Rate} from 'antd'\nimport Loading from '../Loading'\n\nconst MovieBanner = ({isLoading, data}) => {\n if (isLoading) {\n return (\n \n )\n }\n\n const directorList = data.directors.map((item, index) => {\n if (index === data.directors.length - 1) {\n return item.name;\n } else {\n return item.name + '、';\n }\n });\n\n const actorList = data.casts.map((item, index) => {\n if (index === data.casts.length - 1) {\n return item.name;\n } else {\n return item.name + '、';\n }\n });\n\n return (\n
    \n
    \n
    \n \n
    \n
    \n

    {data.title}

    \n

    原名: {data.original_title}

    \n

    导演: {directorList}

    \n

    主演：{actorList}

    \n

    国家：{data.countries.join('、')}

    \n

    系列：{data.genres.join('、')}

    \n

    年代：{data.year}

    \n

    短评数：{data.comments_count}

    \n

    评分人数：{data.ratings_count}

    \n
    \n
    \n
    \n {data.rating.average.toFixed(1)}\n
    \n \n
    \n
    \n
    \n )\n}\n\nexport default MovieBanner\n" }, { "path": "src/components/Movie/MovieColumn.js", "content": "import React, {Component} from 'react'\nimport ColumnHeader from '../ColumnHeader'\nimport MovieList from './MovieList'\nimport Loading from '../Loading'\nimport Pages from '../Pages'\nimport {fetch_movie} from '../../common/fetch'\nimport * as config from '../../config'\n\nexport default class MovieColumn extends Component {\n state = {\n isLoading: false,\n MoviesData: null,\n current: 1\n }\n\n componentDidMount() {\n this.setState({\n isLoading: true\n });\n\n fetch_movie({\n start: config.DEFAULT_START,\n count: this.props.count || 4,\n type: this.props.type\n }).then(data=> {\n this.resolve(data);\n }).catch(err=> {\n console.log('parsing failed', err);\n })\n }\n\n componentWillUnmount() {\n // 这里使用组件属性\n this.unmount = true;\n }\n\n resolve = data => {\n if (data && !this.unmount) {\n this.setState({\n MoviesData: data.subjects,\n isLoading: false\n })\n }\n }\n\n pageChange = page => {\n this.setState({\n current: page\n })\n fetch_movie({\n start: (page - 1) * config.DEFAULT_COUNT,\n count: this.props.count || 4,\n type: this.props.type\n }).then(data=> {\n this.resolve(data)\n }).catch(err=> {\n console.log('parsing failed', err);\n })\n }\n\n render() {\n const {type, isMore, total, title, id} = this.props;\n const {MoviesData, isLoading, current} = this.state;\n return (\n
    \n \n { isLoading ? :\n
    \n \n
    \n }\n
    \n )\n }\n}" }, { "path": "src/components/Movie/MovieIntro.js", "content": "import React, {Component} from 'react'\nimport {Card, Col} from 'antd'\nimport {comments, commentsMore} from '../../common/mock'\nimport MovieActor from './MovieActor'\nimport ListLoadMore from '../ListLoadMore'\nimport Loading from '../Loading'\n\nexport default class MovieIntro extends Component {\n state = {\n commentList: comments.commentList,\n count: 1,\n iconLoading: false\n }\n handleClick = ()=> {\n this.setState({\n iconLoading: true\n });\n setTimeout(()=> {\n this.setState({\n count: this.state.count > 0 ? this.state.count - 1 : 0,\n iconLoading: false,\n commentList: [...this.state.commentList, ...commentsMore.commentList]\n });\n }, 1000);\n }\n\n render() {\n let commentList = this.state.commentList.map((item)=>(\n
    \n
    \n \n {item.name}\n {item.time}\n
    \n

    {item.content}

    \n
    \n )\n );\n return (\n \n \n {this.props.isLoading ? : this.props.data.summary}\n \n \n \n {commentList}\n \n \n \n )\n }\n}\n" }, { "path": "src/components/Movie/MovieItem.js", "content": "import React, {Component} from 'react'\nimport {Link} from 'react-router'\nimport {Col} from 'antd'\nimport * as config from '../../config'\n\nconst MovieItem = ({imgUrl, title, rating, genre, id}) => {\n // 返回JSX结构\n return (\n \n
    \n
    \n \n \n \n
    \n
    \n
    {title}
    \n {rating == '0' ?\n
    {genre}
    \n :\n
    {rating}
    \n }\n
    \n
    \n \n );\n}\n\nexport default MovieItem\n" }, { "path": "src/components/Movie/MovieList.js", "content": "import React, {Component, PropTypes} from 'react'\nimport MovieItem from './MovieItem'\nimport {Row} from 'antd'\n\nexport default class MovieList extends Component {\n render() {\n let itemList = null;\n const {MoviesData, type, current} = this.props;\n // 判断是否有数据\n if (MoviesData) {\n // 北美榜数据格式不同，进行判断\n if (type === 'us_box') {\n itemList = MoviesData.map(item => (\n \n ));\n let endlength = current * 4 < itemList.length ? current * 4 : itemList.length;\n itemList = itemList.slice((current - 1) * 4, endlength);\n } else {\n itemList = MoviesData.map(item => (\n \n ));\n }\n }\n\n return (\n // Item间距\n \n {itemList}\n \n );\n }\n}\n" }, { "path": "src/components/Movie/MovieMenu.js", "content": "import React from 'react'\nimport {Anchor} from 'antd'\n\nconst {Link} = Anchor\n\nconst MovieMenu = () => {\n return (\n \n \n \n \n \n \n );\n}\n\nexport default MovieMenu" }, { "path": "src/components/Music/MusicColumn.js", "content": "import React, {Component} from 'react'\nimport {Row, Col} from 'antd'\nimport MusicList from './MusicList'\nimport TopList from '../TopList'\nimport {musicTop} from '../../common/mock'\nimport ColumnHeader from '../ColumnHeader'\n\nexport default class MusicColumn extends Component {\n render() {\n return (\n
    \n \n \n \n \n \n \n \n \n \n
    \n )\n }\n}" }, { "path": "src/components/Music/MusicList.js", "content": "import React, {Component} from 'react'\n\nconst MusicList = ()=> {\n return (\n \n );\n}\n\nexport default MusicList" }, { "path": "src/components/Pages.js", "content": "import React, { Component } from 'react'\nimport { Pagination } from 'antd'\n\nconst Pages = ({current, total, onChange, defaultPageSize, id}) => {\n return (\n
    \n \n
    \n )\n}\n\nexport default Pages\n" }, { "path": "src/components/Spot/NewsList.js", "content": "import React from 'react';\nimport {Link} from 'react-router'\n\nconst NewsList = ({newsData}) => {\n if (!newsData) {\n return

    没有数据

    ;\n }\n const newsList = newsData.map((newsItem, index) => (\n
  • \n \n {newsItem.title}/\n {newsItem.title}\n \n
    • \n ));\n return (\n
    \n
      \n {newsList}\n
    \n
    \n );\n}\n\nexport default NewsList" }, { "path": "src/components/Spot/NewsListBlock.js", "content": "import React, {Component} from 'react'\nimport {fetch_spot} from '../../common/fetch'\nimport NewsList from './NewsList'\nimport Loading from '../Loading'\n\nexport default class NewsListBlock extends Component {\n state = {\n newsData: null,\n isLoading: false\n }\n\n componentDidMount() {\n this.setState({\n isLoading: true\n });\n fetch_spot({\n type: this.props.type,\n count: this.props.count\n })\n .then(\n data=> {\n this.setState({\n newsData: data,\n isLoading: false\n })\n }\n )\n .catch(err=>console.log('parsing failed', err))\n }\n\n render() {\n const {isLoading} = this.state;\n\n return (\n
    \n {isLoading ? : }\n
    \n )\n }\n}" }, { "path": "src/components/Spot/SpotColumn.js", "content": "import React, {Component} from 'react'\nimport {Row, Col, Carousel, Tabs} from 'antd'\nimport NewsListBlock from './NewsListBlock'\nimport TopListBlock from './TopListBlock'\nimport ColumnHeader from '../ColumnHeader'\n\nconst {TabPane} = Tabs\n\nconst SpotColumn = ()=> {\n return (\n
    \n \n \n \n \n
    平壤居民罕见用韩国品牌相机拍照
    \n
    土耳其公投成功海外公民有喜有悲
    \n
    镜头记录雄安新区街头即景
    \n
    长沙现微型古籍疑是科举作弊用书
    \n     \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n     \n
    \n );\n}\n\nexport default SpotColumn\n" }, { "path": "src/components/Spot/TopListBlock.js", "content": "import React, {Component} from 'react';\nimport {Link} from 'react-router'\nimport TopList from '../TopList'\nimport Loading from '../Loading'\nimport {fetch_spot} from '../../common/fetch'\n\nexport default class TopListBlock extends Component {\n state = {\n newsData: null,\n isLoading: false\n }\n\n componentDidMount() {\n this.setState({\n isLoading: true\n });\n fetch_spot({\n type: 'top',\n count: 10\n })\n .then(\n data=> {\n this.setState({\n newsData: data,\n isLoading: false\n })\n }\n )\n .catch(err=>console.log('parsing failed', err))\n }\n\n render() {\n const {isLoading} = this.state;\n return (\n
    \n {isLoading ? : }\n
    \n )\n }\n}\n" }, { "path": "src/components/TopList.js", "content": "import React from 'react';\nimport {Link} from 'react-router'\n\nconst TopList = ({data, title, link}) => {\n if (!data) {\n return

    没有数据

    ;\n }\n const topList = data.map((item, index) => (\n
  • \n \n {index+1}\n {item.title}\n \n
    • \n ));\n return (\n
      \n

    • {title}

      • \n {topList}\n
    );\n}\n\nexport default TopList" }, { "path": "src/config/Route-Config.js", "content": "import React from 'react'\nimport {Router, Route, IndexRoute, Redirect, hashHistory} from 'react-router'\nimport AppContainer from '../containers/AppContainer'\nimport HomeContainer from '../containers/HomeContainer'\n\nconst BookContainer = (location, cb) => {\n require.ensure([], require => {\n cb(null, require('../containers/BookContainer').default)\n },'BookContainer')\n}\n\nconst BookDetailContainer = (location, cb) => {\n require.ensure([], require => {\n cb(null, require('../containers/BookDetailContainer').default)\n },'BookDetailContainer')\n}\n\nconst MovieContainer = (location, cb) => {\n require.ensure([], require => {\n cb(null, require('../containers/MovieContainer').default)\n },'MovieContainer')\n}\n\nconst MovieDetailContainer = (location, cb) => {\n require.ensure([], require => {\n cb(null, require('../containers/MovieDetailContainer').default)\n },'MovieDetailContainer')\n}\n\nconst MusicContainer = (location, cb) => {\n require.ensure([], require => {\n cb(null, require('../containers/MusicContainer').default)\n },'MusicContainer')\n}\n\nconst MusicDetailContainer = (location, cb) => {\n require.ensure([], require => {\n cb(null, require('../containers/MusicDetailContainer').default)\n },'MusicDetailContainer')\n}\n\nconst SpotContainer = (location, cb) => {\n require.ensure([], require => {\n cb(null, require('../containers/SpotContainer').default)\n },'SpotContainer')\n}\n\nconst SpotDetailContainer = (location, cb) => {\n require.ensure([], require => {\n cb(null, require('../containers/SpotDetailContainer').default)\n },'SpotDetailContainer')\n}\n\nconst NotFoundPage = (location, cb) => {\n require.ensure([], require => {\n cb(null, require('../containers/NotFoundPage').default)\n },'NotFoundPage')\n}\n\n/*const HomeContainer = (location, cb) => {\n require.ensure([], require => {\n cb(null, require('../containers/HomeContainer').default)\n },'HomeContainer')\n}*/\n\nconst RootRoter = (\n \n \n \n \n \n \n \n \n \n \n console.log('离开了music页面') }\n onEnter={ ()=>console.log('进入了music页面') }/>\n \n \n \n \n \n)\nexport default RootRoter\n\n" }, { "path": "src/config/index.js", "content": " export const SERVER_PATH = 'https://api.douban.com/v2/';\n export const LOGIN_PATH = 'http://newsapi.gugujiankong.com/Handler.ashx';\n export const DEFAULT_COUNT = 4;\n export const DEFAULT_START = 0;\n" }, { "path": "src/containers/AppContainer.js", "content": "import React, {Component} from 'react'\nimport Header from '../components/Header'\nimport Footer from '../components/Footer'\n\nexport default class AppContainer extends Component {\n render() {\n return (\n
    \n
    \n
    \n {this.props.children}\n
    \n
    \n
    \n )\n }\n}\n" }, { "path": "src/containers/BookContainer.js", "content": "import React, { Component } from 'react'\n\nexport default class BookContainer extends Component {\n constructor(props){\n super(props);\n this.state = {};\n }\n\n componentDidMount() {\n }\n\n render() {\n return (\n
    \n 敬请期待...\n
    \n )\n }\n}\n" }, { "path": "src/containers/BookDetailContainer.js", "content": "import React, { Component } from 'react'\n\nexport default class BookDetailContainer extends Component {\n constructor(props){\n super(props);\n this.state = {};\n }\n\n componentDidMount() {\n }\n\n render() {\n return (\n
    \n BookDE\n
    \n )\n }\n}\n" }, { "path": "src/containers/HomeContainer.js", "content": "import React, {Component} from 'react'\nimport {Carousel, Card, BackTop, Icon} from 'antd'\nimport MovieColumn from '../components/Movie/MovieColumn'\nimport SpotColumn from '../components/Spot/SpotColumn'\nimport MusicColumn from '../components/Music/MusicColumn'\nimport BookColumn from '../components/Book/BookColumn'\n\nexport default class HomeContainer extends Component {\n render() {\n return (\n \n
    \n \n
    \n
    \n
    \n
    \n     \n
    \n \n \n \n \n \n
    \n \n
    \n     \n     \n )\n }\n}\n" }, { "path": "src/containers/MovieContainer.js", "content": "import React, { Component } from 'react'\nimport {Layout} from 'antd'\nimport MovieMenu from '../components/Movie/MovieMenu'\nimport MovieColumn from '../components/Movie/MovieColumn'\n\nconst {Content, Sider} = Layout\n\nexport default class MovieContainer extends Component {\n render() {\n return (\n
    \n \n \n \n \n \n \n \n \n \n \n \n
    \n )\n }\n}\n" }, { "path": "src/containers/MovieDetailContainer.js", "content": "import React, {Component} from 'react'\nimport {Layout, Rate, Card, Icon, Row, BackTop} from 'antd'\nimport MovieBanner from '../components/Movie/MovieBanner'\nimport MovieIntro from '../components/Movie/MovieIntro'\nimport MovieAbout from '../components/Movie/MovieAbout'\nimport {fetch_movieDetail} from '../common/fetch'\n\nexport default class MovieDetailContainer extends Component {\n state = {\n data: null,\n isLoading: true\n }\n\n componentDidMount() {\n fetch_movieDetail({\n id: this.props.params.id\n })\n .then(data=>{\n if (data && !this.unmount) {\n this.setState({\n data: data,\n isLoading: false\n })\n }\n })\n .catch(err=>\n console.log('parsing failed', err)\n )\n }\n\n componentWillUnmount() {\n this.unmount = true;\n }\n\n render() {\n return (\n
    \n \n \n \n \n \n \n
    \n \n
    \n     \n
    \n )\n }\n}\n" }, { "path": "src/containers/MusicContainer.js", "content": "import React, { Component } from 'react'\n\nexport default class MusicContainer extends Component {\n constructor(props){\n super(props);\n this.state = {};\n }\n\n componentDidMount() {\n }\n\n render() {\n return (\n
    \n 敬请期待...\n
    \n )\n }\n}\n" }, { "path": "src/containers/MusicDetailContainer.js", "content": "import React, { Component } from 'react'\n\nexport default class MusicDetailContainer extends Component {\n constructor(props){\n super(props);\n this.state = {};\n }\n\n componentDidMount() {\n }\n\n render() {\n return (\n
    \n MusicDE页面暂时不开发\n
    \n )\n }\n}\n" }, { "path": "src/containers/NotFoundPage.js", "content": "import React, {Component} from 'react'\n\nexport default class SportContainer extends Component {\n render() {\n return (\n
    \n \n
    \n )\n }\n}" }, { "path": "src/containers/SpotContainer.js", "content": "import React, { Component } from 'react'\n\nexport default class SpotContainer extends Component {\n constructor(props){\n super(props);\n this.state = {};\n }\n\n componentDidMount() {\n }\n\n render() {\n return (\n
    \n 敬请期待...\n
    \n )\n }\n}\n" }, { "path": "src/containers/SpotDetailContainer.js", "content": "import React, { Component } from 'react'\n\nexport default class SpotDetailContainer extends Component {\n constructor(props){\n super(props);\n this.state = {};\n }\n\n componentDidMount() {\n }\n\n render() {\n return (\n
    \n SportDE页面暂时不开发\n
    \n )\n }\n}\n" }, { "path": "src/index.html", "content": "\n\n\n \n \n \n \n \n 简趣\n\n\n
    \n\n\n" }, { "path": "src/index.js", "content": "import React from 'react'\nimport ReactDOM from 'react-dom'\n\nimport RootRouter from './config/Route-Config'\n\nimport 'antd/dist/antd.less'\nimport './style/App'\nimport './style/base'\nimport './style/BookList'\nimport './style/ColumnHeader'\nimport './style/Home'\nimport './style/ListLoadMore'\nimport './style/Login'\nimport './style/MovieDetail'\nimport './style/MovieMenu'\nimport './style/Music'\nimport './style/NewsList'\nimport './style/Pages'\nimport './style/Spot'\nimport './style/TopList'\nimport './style/MovieItem'\nimport './style/MovieColumn'\n\nReactDOM.render(\n
    \n {RootRouter}\n
    ,\n document.getElementById('app')\n)\n" }, { "path": "src/style/App.less", "content": "// 首页样式\n.logo {\n display: block;\n line-height: 64px;\n height: 64px;\n background: url('../image/logo.png') left center no-repeat;\n background-position: 0 0;\n}\n\n.header_tab {\n float: right;\n line-height: 62px;\n li {\n a {\n display: block;\n font-size: 18px;\n text-align: center;\n height: 64px;\n &:hover {\n color: #f2bd00\n }\n }\n width: 80px;\n float: left;\n height: 62px;\n }\n}\n\n.header_curPage {\n color: #f2bd00;\n width: 80px;\n line-height: 64px;\n display: block;\n text-align: center;\n border-bottom: 2px solid #108ee9;\n}\n\n/*覆盖样式*/\n.ant-layout-header.wrap {\n background-color: #fcfcfc;\n height: 64px;\n line-height: 64px;\n\n .ant-row {\n border-bottom: 1px solid #eee;\n }\n}\n\n.center {\n padding: 10px 50px 0px 50px;\n .ant-layout-content {\n padding: 0px 8px;\n border: 1px solid #eee;\n border-radius: 10px;\n background-color: #fff;\n }\n .ant-layout, .ant-layout-sider {\n overflow-x: hidden;\n overflow-y: hidden;\n background-color: #fcfcfc;\n }\n\n .ant-menu {\n text-align: center;\n margin-right: 10px;\n background-color: #fff;\n }\n\n .ant-menu-inline, .ant-menu-vertical {\n border: 1px solid #eee;\n border-radius: 10px;\n background-color: #fff;\n }\n\n //右侧中心显示区域\n .content {\n padding-left: 10px;\n border: 1px solid #eee;\n border-radius: 10px;\n background-color: #fff;\n overflow-x: hidden;\n }\n}\n\n.ant-modal-title{\n text-align: center;\n font-weight: normal;\n}\n// 卡片样式\n.ant-card {\n margin: 20px 0px;\n}\n\n// backTop样式\n.ant-back-top-inner {\n height: 40px;\n width: 40px;\n line-height: 40px;\n border-radius: 4px;\n background-color: #1088e9;\n color: #fff;\n text-align: center;\n font-size: 20px;\n}\n\n// 星星样式\n.ant-rate {\n padding-left: 10px;\n}\n\n// 加载中样式\n.loading {\n padding: 30px 50px;\n text-align: center;\n}\n\n.not_found {\n height: 300px;\n background-color: #FFF;\n text-align: center;\n img {\n padding-top: 50px;\n width: 300px;\n }\n}" }, { "path": "src/style/BookList.less", "content": ".list-summary {\n font-size: 0;\n margin-bottom: -30px;\n clear: both;\n li {\n width: 340px;\n height: 180px;\n float: left;\n margin-bottom: 30px;\n display: inline-block;\n }\n .cover {\n float: left;\n margin-right: 18px;\n }\n .title {\n font-size: 14px;\n height: auto;\n margin: 0;\n background: none;\n }\n .info {\n font-size: 12px;\n margin-right: 20px;\n height: 180px;\n p {\n margin: 0;\n word-wrap: break-word;\n .meta-label {\n display: inline-block;\n line-height: 1;\n color: #fff;\n padding: 2px 3px;\n background-color: #a1a1a1;\n }\n }\n .reviews {\n color: #666;\n clear: both;\n padding-top: 15px;\n }\n .star-img {\n color: #4dd197\n }\n }\n &:after {\n content: \"\";\n display: block;\n clear: both;\n }\n}\n" }, { "path": "src/style/ColumnHeader.less", "content": "//栏目\n.column_header {\n border-bottom: 1px solid #eee;\n height: 36px;\n line-height: 30px;\n padding: 5px 10px 5px 0px;\n margin-bottom: 8px;\n .column_more {\n float: right;\n padding-right: 10px;\n color: #9DC;\n }\n .column_title {\n float: left;\n font-size: 18px;\n display: inline-block;\n a {\n color: #E8570C;\n }\n }\n}\n" }, { "path": "src/style/Home.less", "content": ".home {\n .ant-card-body {\n padding: 10px 20px;\n }\n .movie_item {\n width: 20%;\n }\n .carousel{\n padding-bottom: 10px;\n .slick-slide{\n img {\n width: 100%;\n }\n }\n }\n .column_header {\n margin-top:10px;\n }\n .ant-tabs-bar {\n margin-bottom: 8px;\n }\n}" }, { "path": "src/style/ListLoadMore.less", "content": ".list_load {\n padding-top: 10px;\n .ant-btn {\n width: 100%;\n text-align: center;\n }\n p {\n text-align: center;\n color:#e1e1e1;\n }\n}" }, { "path": "src/style/Login.less", "content": ".login {\n text-align: center;\n line-height: 64px;\n font-size: 14px;\n color: #0c0c0c;\n cursor: pointer;\n}\n\n.login_icon {\n font-size: 18px;\n color: #108ee9;\n margin-right: 5px;\n}\n\n.login-form {\n max-width: 300px;\n margin: 0 auto;\n}\n\n.login-form-forgot {\n float: right;\n}\n\n.login-form-button {\n width: 100%;\n}\n\n.modal_back {\n display: block;\n position: absolute;\n left: 0;\n top: -2px;\n cursor: pointer;\n color: #aaa;\n transition: color 0.3s;\n &:hover {\n color: #000\n }\n}\n\n" }, { "path": "src/style/MovieColumn.less", "content": ".movie_column {\n .ant-row {\n border-bottom: 1px solid #eee;\n padding-bottom: 8px;\n }\n}" }, { "path": "src/style/MovieDetail.less", "content": ".movie_detail {\n .movie_intro {\n font-size: 14px;\n }\n .movie_banner {\n height: 350px;\n background-image: url(\"../image/banner.jpg\");\n background-repeat: no-repeat;\n background-size: cover;\n padding: 26px 10px 0px 100px;\n }\n\n .movie_introduce {\n height: 260px;\n }\n\n .movie_poster {\n width: 220px;\n height: 300px;\n float: left;\n img {\n width: 100%;\n height: 100%;\n }\n }\n\n .movie_info {\n width: 400px;\n padding-left: 50px;\n color: #FFF;\n float: left;\n h4 {\n margin-bottom: 15px;\n }\n p {\n padding: 8px 0px;\n }\n }\n\n .movie_content {\n width: 200px;\n padding-left: 50px;\n padding-top: 50px;\n text-align: center;\n color: #FFF;\n float: left;\n }\n\n .movie_gate {\n font-size: 50px;\n font-family: sans-serif;\n color: #108ee9;\n padding: 20px;\n text-align: center;\n }\n\n .actor {\n :last-child {\n margin-right: 0px;\n }\n li {\n float: left;\n margin-right: 20px;\n p {\n text-align: center;\n height: 20px;\n }\n a {\n display: inline-block;\n width: 128px;\n height: 170px;\n img {\n width: 100%;\n height: 100%;\n }\n }\n }\n }\n\n .movie_comment {\n border-bottom: 1px solid #eee;\n padding: 10px 0px;\n .movie_commentator {\n width: 100%;\n float: left;\n margin-bottom: 10px;\n border-bottom: 1px solid #eee;\n padding-bottom: 5px;\n line-height: 36px;\n img {\n width: 30px;\n height: 30px;\n border-radius: 15px;\n margin-right: 10px;\n }\n }\n .movie_commentdate {\n float: right;\n }\n p {\n padding-left: 5px;\n padding-top: 5px;\n }\n }\n\n .movie_about {\n .ant-card-body {\n div {\n cursor: pointer;\n height: 50px;\n p:last-child {\n font-size: 10px;\n color: #4fd2be;\n }\n }\n }\n }\n}\n" }, { "path": "src/style/MovieItem.less", "content": ".movie_item {\n &> div{\n margin: 0 5px;\n }\n .movie_img {\n height: 280px;\n img {\n width: 100%;\n height: 100%;\n }\n }\n .movie_info {\n height: 20px;\n margin-top: 8px;\n .movie_title {\n height: 20px;\n width: 85%;\n font-size: 16px;\n line-height: 20px;\n font-weight: bold;\n float: left;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .movie_score {\n height: 20px;\n line-height: 20px;\n font-size: 18px;\n float: right;\n text-align: right;\n color: #108ee9;\n width: 15%;\n }\n .movie_genre {\n .movie_score;\n font-size: 14px;\n color: #66CD00;\n }\n }\n}" }, { "path": "src/style/MovieMenu.less", "content": ".movie_menu {\n border: 1px solid #eee;\n margin-right: 10px;\n border-radius: 10px;\n .ant-anchor{\n text-align: center;\n .ant-anchor-ink{\n display: none;\n }\n .ant-anchor-link {\n line-height: 20px;\n font-size: 14px;\n padding:8px;\n }\n }\n}" }, { "path": "src/style/Music.less", "content": ".m-cvrlst {\n margin: 20px 0 0 -42px;\n li {\n width: 180px;\n height: 204px;\n float: left;\n display: inline-block;\n overflow: hidden;\n padding: 0 0 30px 42px;\n line-height: 1.4;\n div.u-cover {\n width: 140px;\n height: 140px;\n position: relative;\n display: block;\n img {\n display: block;\n width: 100%;\n height: 100%;\n }\n .msk {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-position: 0 0;\n background: url(../image/coverall.png) no-repeat;\n }\n .icon-play {\n display: inline-block;\n position: absolute;\n right: 10px;\n bottom: 5px;\n width: 16px;\n height: 17px;\n background: url(../image/iconall.png) no-repeat;\n background-position: 0 0;\n float: right;\n }\n .icon-headset {\n display: inline-block;\n float: left;\n width: 16px;\n height: 16px;\n margin: 7px 7px 7px 5px;\n background: url(../image/iconall.png) no-repeat;\n background-position: 0 -24px;\n }\n .nb {\n float: left;\n margin: 7px 0 0 0;\n }\n .bottom {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 27px;\n background: url(../image/coverall.png) no-repeat;\n background-position: 0 -537px;\n color: #ccc;\n }\n p {\n margin: 8px 0 3px;\n width: 100%;\n }\n }\n .dec {\n margin: 8px 0 3px;\n }\n .tit {\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n color: #000;\n }\n }\n}\n\n" }, { "path": "src/style/NewsList.less", "content": ".newsList {\n padding-left: 10px;\n ul > li {\n padding-top: 5px;\n border-bottom: 1px solid #eee;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n height: 70px;\n a {\n color: #595959;\n }\n img {\n width: 80px;\n height: 60px;\n margin-right: 5px;\n }\n }\n}" }, { "path": "src/style/Pages.less", "content": ".Pages {\n height: 24px;\n line-height: 24px;\n ul.ant-pagination {\n float: right;\n }\n}" }, { "path": "src/style/Spot.less", "content": ".spot_news {\n .carousel {\n width: 300px;\n height: 400px;\n padding-left: 20px;\n .slick-slide {\n img {\n width: 100%;\n }\n }\n }\n}\n" }, { "path": "src/style/TopList.less", "content": ".topList {\n padding-left: 10px;\n ul > li {\n border-bottom: 1px solid #eee;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n height: 36px;\n line-height: 36px;\n a {\n color: #595959;\n }\n span {\n display: inline-block;\n font-size: 20px;\n vertical-align: middle;\n margin-right: 8px;\n }\n h3 {\n text-align: center;\n color: #108ee9;\n }\n }\n ul > li:nth-child(4), li:nth-child(2), li:nth-child(3) {\n span {\n color: #ED1C24;\n }\n }\n}" }, { "path": "src/style/base.less", "content": "/* CSS Document */\n\n/* css reset */\nbody, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, form, pre, input, textarea, select, th, td {\n margin: 0;\n padding: 0;\n font-family: \"Microsoft Yahei\";\n}\n\nh1, h2, h3, h4, h5, h6, tr, th, td, textarea {\n word-wrap: break-word;\n word-break: break-all;\n}\n\nbody {\n font-size: 12px;\n background-color: @bgColor;\n}\n\nem {\n font-style: normal;\n}\n\nli {\n list-style: none;\n}\n\na {\n text-decoration: none;\n}\n\nimg {\n border: none;\n vertical-align: middle;\n}\n\ntable {\n border-collapse: collapse;\n}\n\nth, td {\n padding: 0;\n}\n\ntextarea {\n overflow: auto;\n resize: none;\n}\n\n/* end css reset */\n\n/*public.css*/\n.wrap {\n width: 1170px;\n margin: 0 auto;\n}\n\n.auto {\n margin: 0 auto;\n}\n\n.clear {\n zoom: 1;\n}\n\n.clear:after {\n content: \"\";\n display: block;\n clear: both;\n}\n\n.fl {\n float: left;\n}\n\n.fr {\n float: right;\n}\n// 间距\n.pl5 {\n padding-left: 5px;\n}\n\n.pl10 {\n padding-left: 10px;\n}\n\n.pl15 {\n padding-left: 15px;\n}\n\n.pl20 {\n padding-left: 20px;\n}\n\n.pl30 {\n padding-left: 30px;\n}\n\n.pl40 {\n padding-left: 40px;\n}\n\n.pr5 {\n padding-right: 5px;\n}\n\n.pr10 {\n padding-right: 10px;\n}\n\n.pr20 {\n padding-right: 20px;\n}\n\n.pt5 {\n padding-top: 5px;\n}\n\n.pt10 {\n padding-top: 10px;\n}\n\n.pt20 {\n padding-top: 20px;\n}\n\n.pt30 {\n padding-top: 30px;\n}\n\n.pb5 {\n padding-bottom: 5px;\n}\n\n.pb10 {\n padding-bottom: 10px;\n}\n\n.pb20 {\n padding-bottom: 20px;\n}\n\n.pb30 {\n padding-bottom: 30px;\n}\n\n.ml5 {\n margin-left: 5px;\n}\n\n.ml10 {\n margin-left: 10px;\n}\n\n.ml15 {\n margin-left: 15px;\n}\n\n.ml20 {\n margin-left: 20px;\n}\n\n.ml30 {\n margin-left: 30px;\n}\n\n.ml40 {\n margin-left: 40px;\n}\n\n.mr5 {\n margin-right: 5px;\n}\n\n.mr10 {\n margin-right: 10px;\n}\n\n.mr15 {\n margin-right: 15px;\n}\n\n.mr20 {\n margin-right: 20px;\n}\n\n.mr30 {\n margin-right: 30px;\n}\n\n.mt3 {\n margin-top: 3px;\n}\n\n.mt5 {\n margin-top: 5px;\n}\n\n.mt8 {\n margin-top: 8px;\n}\n\n.mt10 {\n margin-top: 10px;\n}\n\n.mt15 {\n margin-top: 15px;\n}\n\n.mt20 {\n margin-top: 20px;\n}\n\n.mt30 {\n margin-top: 30px;\n}\n\n.mb5 {\n margin-bottom: 5px;\n}\n\n.mb10 {\n margin-bottom: 10px;\n}\n\n.mb15 {\n margin-bottom: 15px;\n}\n\n.mb20 {\n margin-bottom: 20px;\n}\n\n.mb40 {\n margin-bottom: 40px;\n}\n\n.mb50 {\n margin-bottom: 50px;\n}\n//字体\n.fb {\n font-weight: bold;\n}\n\n.fz12 {\n font-size: 12px;\n}\n\n.fz14 {\n font-size: 14px;\n}\n\n.fz16 {\n font-size: 16px;\n}\n\n.fz18 {\n font-size: 18px;\n}\n\n.fz24 {\n font-size: 24px;\n}\n// 高度\n.h20 {\n height: 20px;\n}\n\n.h28 {\n height: 28px;\n}\n\n.h64 {\n height: 64px;\n}\n\n.w45 {\n width: 45px;\n}\n\n.w50 {\n width: 50px;\n}\n\n.w60 {\n width: 60px;\n}\n\n.w70 {\n width: 70px;\n}\n\n.w84 {\n width: 84px;\n}\n\n.w80 {\n width: 80px;\n}\n\n.w90 {\n width: 90px;\n}\n\n.w100 {\n width: 100px;\n}\n\n.w106 {\n width: 106px;\n}\n\n.w115 {\n width: 115px;\n}\n\n.w120 {\n width: 120px;\n}\n\n.w125 {\n width: 125px;\n}\n\n.w140 {\n width: 140px;\n}\n\n.w150 {\n width: 150px;\n}\n\n.w157 {\n width: 157px;\n}\n\n.w190 {\n width: 190px;\n}\n\n.w200 {\n width: 200px;\n}\n\n.w230 {\n width: 230px;\n}\n\n.w250 {\n width: 250px;\n}\n\n.w280 {\n width: 280px;\n}\n\n.w300 {\n width: 300px;\n}\n\n.w308 {\n width: 308px;\n}\n\n.w350 {\n width: 350px;\n}\n\n.w370 {\n width: 370px;\n}\n\n.w400 {\n width: 400px;\n}\n\n.w420 {\n width: 420px;\n}\n\n.w440 {\n width: 440px;\n}\n\n.w485 {\n width: 485px;\n}\n\n.w530 {\n width: 530px;\n}\n\n.w550 {\n width: 550px;\n}\n\n.w580 {\n width: 580px;\n}\n\n.w650 {\n width: 650px;\n}\n\n.w680 {\n width: 680px;\n}\n\n.w700 {\n width: 700px;\n}\n\n.w720 {\n width: 720px;\n}\n\n.w750 {\n width: 750px;\n}\n\n.w950 {\n width: 950px;\n}\n\n.vm2 {\n vertical-align: -2px;\n}\n\n.vm3 {\n vertical-align: -3px;\n}\n\n.lh15 {\n line-height: 15px;\n}\n\n.lh18 {\n line-height: 18px;\n}\n\n.lh20 {\n line-height: 20px;\n}\n\n.lh23 {\n line-height: 23px;\n}\n\n.lh25 {\n line-height: 25px;\n}\n\n.lh28 {\n line-height: 28px;\n}\n\n.lh30 {\n line-height: 30px;\n}\n\n.pointer {\n cursor: pointer;\n}\n\n.tl {\n text-align: left;\n}\n\n.tc {\n text-align: center;\n}\n\n.tr {\n text-align: right;\n}\n\n.rel {\n position: relative;\n}\n\n.abs {\n position: absolute;\n}\n\n.fixd {\n position: fixed;\n}\n\n.vbh {\n visibility: hidden;\n}\n\n.nowrap {\n white-space: nowrap;\n}\n\n.wraps {\n word-wrap: break-word;\n word-break: break-all;\n}\n\n.omit {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.fs {\n font-family: \"Microsoft Yahei\";\n}\n\n.ti2 {\n text-indent: 24px;\n}\n\n.vam {\n vertical-align: middle;\n}\n\n.normal {\n font-style: normal;\n}\n\n// 清除浮动\n.fix {\n display: inline-table;\n display: block;\n height: 1%;\n}\n\n.fix:after {\n visibility: hidden;\n display: block;\n font-size: 0;\n content: \" \";\n clear: both;\n height: 0;\n}\n\n// 边框线\n.bdt {\n border-top: 1px solid @bdColor;\n}\n.bdb {\n border-bottom: 1px solid @bdColor;\n}\n.bdr {\n border-right: 1px solid @bdColor;\n}\n.bdl {\n border-left: 1px solid @bdColor;\n}\n.bd {\n border: 1px solid @bdColor;\n}\n// 块\n.inblock {\n display: inline-block;\n}\n\n.hide {\n display: none;\n}\n\n.db {\n display: block;\n}\n\n// 当前\n@current: #f2bd00;\n// 主题色\n@theme: #108ee9;\n// 背景色\n@bgColor: #fcfcfc;\n// 边框色\n@bdColor: #eee;\n// 栏目头色\n@columnColor: #E8570C;\n// 更多字体色\n@moreColor: #9DC;\n// 电影类型\n@genre: #66CD00;" }, { "path": "src/template/template.html", "content": "\n\n\n \n 简趣\n\n\n
    \n\n" }, { "path": "webpack.dev.config.js", "content": "var webpack = require('webpack');\nvar path = require('path');\nvar ExtractTextPlugin = require(\"extract-text-webpack-plugin\"); // 打包css插件\nvar OpenBrowserPlugin = require('open-browser-webpack-plugin'); // 编译后自动打开浏览器\n\nvar ROOT_PATH = path.resolve(__dirname); // 项目跟路径\nvar APP_PATH = path.resolve(ROOT_PATH, 'src'); // 项目开发目录src\nvar APP_FILE = path.resolve(APP_PATH, 'index.js'); // 项目入口的index.js\n\nmodule.exports = {\n entry: [\n 'webpack/hot/dev-server',\n 'webpack-dev-server/client?http://localhost:8080',\n APP_FILE\n ],\n output: {\n path: APP_PATH,\n filename: 'bundle.js'\n },\n // 可以在sources里调试\n devtool: \"cheap-module-eval-source-map\",\n module: {\n loaders: [\n {\n test: /\\.css$/,\n loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer'])\n },\n {\n test: /\\.less$/,\n loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'less'])\n },\n {\n test: /\\.js[x]?$/,\n exclude: /node_modules/,\n loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react,presets[]=stage-0']\n },\n {\n test: /\\.(png|jpg)$/,\n loader: 'url-loader?limit=8192'\n },\n {\n test: /\\.(woff|woff2|eot|ttf|svg)(\\?.*$|$)/,\n loader: 'url'\n }\n ]\n }\n ,\n// 其它解决方案配置\n resolve: {\n // 后缀\n extensions: ['', '.js', '.jsx', '.json', '.less']\n }\n ,\n// 插件\n plugins: [\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: JSON.stringify('development') //定义生产环境\n }\n }),\n new OpenBrowserPlugin({url: 'http://localhost:8080/#/'}),\n new ExtractTextPlugin(\"app.css\")\n ]\n}\n;" }, { "path": "webpack.pub.config.js", "content": "var webpack = require(\"webpack\");\nvar path = require('path');\nvar uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;\nvar ExtractTextPlugin = require(\"extract-text-webpack-plugin\");\nvar HtmlWebpackPlugin = require('html-webpack-plugin');\n\nvar ROOT_PATH = path.resolve(__dirname); // 项目跟路径\nvar APP_PATH = path.resolve(ROOT_PATH, 'src'); // 项目开发目录src\nvar APP_FILE = path.resolve(APP_PATH, 'index.js'); // 项目入口的index.js\nvar DIST_PATH = path.resolve(ROOT_PATH, 'dist'); // 项目打包输出路径\n\nmodule.exports = {\n entry: {\n app: APP_FILE,\n venders: [\n 'react',\n 'react-dom',\n 'react-router',\n // 'antd',这里直接会把所有antd打包\n 'mockjs'\n ]\n },\n output: {\n path: DIST_PATH,\n //表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换\n //publicPath: '/',\n filename: '[name].js',\n chunkFilename: 'js/[name].[chunkhash:5].min.js'\n },\n module: {\n loaders: [\n {\n test: /\\.css$/,\n loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer'])\n },\n {\n test: /\\.less$/,\n loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'less'])\n },\n {\n test: /\\.jsx?$/,\n exclude: /node_modules/,\n loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react,presets[]=stage-0']\n },\n {\n test: /\\.(png|jpg)$/,\n loader: 'url-loader?limit=8192&name=image/[hash:8].[name].[ext]'\n },\n {\n test: /\\.(woff|woff2|eot|ttf|svg)(\\?.*$|$)/,\n loader: 'url'\n }\n ]\n },\n resolve: {\n extensions: ['', '.js', '.jsx', '.json', '.less']\n },\n plugins: [\n // new webpack.ProvidePlugin({ $: \"jquery\" }), // 这是将jquery变成全局变量，不用在自己文件require('jquery')了\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: JSON.stringify('production') //定义生产环境\n }\n }),\n new webpack.optimize.CommonsChunkPlugin('venders', 'venders.js'), // 这是妮第三方库打包生成的文件\n new uglifyJsPlugin({\n output: {\n comments: false, // remove all comments\n },\n compress: {\n warnings: false\n }\n }),\n new ExtractTextPlugin(\"[name].css\"),\n new HtmlWebpackPlugin({\n template: './src/template/template.html', // html模板路径\n htmlWebpackPlugin: {\n files: {\n css: [\"app.css\"],\n js: [\"bundle.js\", \"venders.js\"]\n }\n },\n minify: {\n removeComments: true, // 移除HTML中的注释\n collapseWhitespace: true, // 删除空白符与换行符\n removeAttributeQuotes: true // 移除HTML中的属性引号\n },\n filename: 'index.html',\n favicon:'./src/favicon.ico', //favicon路径\n })\n ]\n};" } ]