├── .gitignore ├── demo1.jpg ├── demo2.jpg ├── src ├── images │ ├── logo.png │ ├── carousel_1.jpg │ ├── carousel_2.jpg │ ├── carousel_3.jpg │ └── carousel_4.jpg ├── js │ ├── components │ │ ├── mobile_footer.js │ │ ├── pc_index.js │ │ ├── pc_footer.js │ │ ├── pc_news_block.js │ │ ├── mobile_news_details.js │ │ ├── pc_news_details.js │ │ ├── mobile_index.js │ │ ├── pc_news_image_block.js │ │ ├── mobilelist_pull_refresh.js │ │ ├── pc_newscontainer.js │ │ ├── mobile_usercenter.js │ │ ├── common_comments.js │ │ ├── mobile_list.js │ │ ├── mobile_header.js │ │ ├── pc_usercenter.js │ │ ├── pc_header.js │ │ └── pc_product.js │ └── root.js └── css │ ├── pc.css │ └── mobile.css ├── .vscode └── settings.json ├── index.html ├── README.md ├── package.json ├── LICENSE └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | yarn.lock 4 | _config.yml 5 | package-lock.json -------------------------------------------------------------------------------- /demo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengxiaohua/news-responsive-by-react/HEAD/demo1.jpg -------------------------------------------------------------------------------- /demo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengxiaohua/news-responsive-by-react/HEAD/demo2.jpg -------------------------------------------------------------------------------- /src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengxiaohua/news-responsive-by-react/HEAD/src/images/logo.png -------------------------------------------------------------------------------- /src/images/carousel_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengxiaohua/news-responsive-by-react/HEAD/src/images/carousel_1.jpg -------------------------------------------------------------------------------- /src/images/carousel_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengxiaohua/news-responsive-by-react/HEAD/src/images/carousel_2.jpg -------------------------------------------------------------------------------- /src/images/carousel_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengxiaohua/news-responsive-by-react/HEAD/src/images/carousel_3.jpg -------------------------------------------------------------------------------- /src/images/carousel_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pengxiaohua/news-responsive-by-react/HEAD/src/images/carousel_4.jpg -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.associations": { 3 | "*.cjson": "jsonc", 4 | "*.wxss": "css", 5 | "*.wxs": "javascript", 6 | "*.jsx": "javascriptreact", 7 | "*.wpy": "vue", 8 | "*.vue": "vue", 9 | "*.wxml": "html", 10 | "tslint.json": "jsonc", 11 | "*.ttml": "xml", 12 | "*.ttss": "css" 13 | } 14 | } -------------------------------------------------------------------------------- /src/js/components/mobile_footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default class MobileFooter extends React.Component { 4 | render() { 5 | return ( 6 |
7 | 10 |
11 | ); 12 | }; 13 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 简介 2 | 一个基于react的新闻网站，可以自适应PC和移动端，登录后有评论和收藏功能。 3 | 4 | *项目有点老，最近会慢慢更新项目* 5 | 6 | # DEMO 7 | #### PC端 8 | ![image](https://github.com/pengxiaohua/news-responsive-by-react/blob/master/demo1.jpg) 9 | 10 | #### 移动端 11 | ![iamge](https://github.com/pengxiaohua/news-responsive-by-react/blob/master/demo2.jpg) 12 | 13 | # 安装 14 | #### 安装node_modules 15 | ```shell 16 | npm install  or cnpm install or yarn install 17 | ``` 18 | 19 | # 跑起来 20 | ```shell 21 | npm run dev 22 | ``` 23 | 打开浏览器输入：localhost:8080 24 | -------------------------------------------------------------------------------- /src/js/components/pc_index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PCHeader from './pc_header'; 3 | import PCFooter from './pc_footer'; 4 | import { BackTop } from 'antd'; 5 | 6 | import PCNewsContainer from './pc_newscontainer'; 7 | 8 | export default class PCIndex extends React.Component { 9 | render() { 10 | return ( 11 |
12 | 13 | 14 | 15 | 16 |
17 | ) 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/js/components/pc_footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Row, Col } from 'antd'; 3 | 4 | export default class PCFooter extends React.Component { 5 | 6 | render() { 7 | return ( 8 | 17 | ); 18 | }; 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "news", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "root.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --online --hot --port 8080" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "antd": "^2.8.0", 13 | "array-includes": "^3.0.3", 14 | "babel-loader": "^7.1.1", 15 | "babel-plugin-react-html-attrs": "^2.0.0", 16 | "babel-preset-es2015": "^6.14.0", 17 | "babel-preset-react": "^6.11.1", 18 | "babelify": "^7.3.0", 19 | "css-loader": "^0.25.0", 20 | "fetch": "^1.1.0", 21 | "json-loader": "^0.5.4", 22 | "react": "^15.3.2", 23 | "react-dom": "^15.3.2", 24 | "react-mixin": "^2.0.2", 25 | "react-pull-to-refresh": "^1.0.6", 26 | "react-responsive": "^1.2.6", 27 | "react-router": "^2.8.1", 28 | "react-touch-loader": "^1.1.0", 29 | "style-loader": "^0.13.1", 30 | "webpack": "^3.0.0", 31 | "webpack-dev-server": "^1.16.5" 32 | }, 33 | "devDependencies": { 34 | "babel-plugin-import": "^1.0.1", 35 | "less": "^2.7.2", 36 | "less-loader": "^2.2.3" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Xiaohua Peng 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | 4 | module.exports = { 5 | entry: "./src/js/root.js", 6 | output: { 7 | path: __dirname, 8 | filename: "./src/bundle.js" 9 | }, 10 | module: { 11 | loaders: [ 12 | { 13 | test: /\.js?$/, 14 | exclude: /(node_modules)/, 15 | loader: 'babel-loader', 16 | query: { 17 | presets: ['react', 'es2015'], 18 | plugins: ['react-html-attrs'], //添加组件的插件配置 19 | } 20 | }, 21 | //下面是使用 ant-design 的配置文件 22 | { test: /\.css$/, loader: 'style-loader!css-loader' }, 23 | 24 | { 25 | test: /\.less/, 26 | loader: "style-loader!css-loader!less-loader" 27 | } 28 | ] 29 | }, 30 | context: path.join(__dirname), 31 | devtool: process.env.NODE_ENV !== "production" ? "inline-sourcemap" : null, 32 | plugins: process.env.NODE_ENV !== "production" ? [] : [ 33 | new webpack.optimize.DedupePlugin(), 34 | new webpack.optimize.OccurenceOrderPlugin(), 35 | new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 36 | ], 37 | }; 38 | -------------------------------------------------------------------------------- /src/js/components/pc_news_block.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'antd'; 3 | import { Link } from 'react-router'; 4 | 5 | export default class PCNewsBlock extends React.Component { 6 | constructor() { 7 | super(); 8 | this.state = { 9 | news: '' 10 | }; 11 | } 12 | 13 | componentWillMount() { 14 | var myFetchOptions = { 15 | method: 'GET' 16 | }; 17 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type 18 | + "&count=" + this.props.count, myFetchOptions) 19 | .then(response => response.json()) 20 | .then(json => this.setState({ news: json })); 21 | } 22 | render() { 23 | const { news } = this.state; 24 | const newsList = news.length 25 | ? 26 | news.map((newsItem, index) => ( 27 |
  • 28 | 29 | {newsItem.title} 30 | 31 |
    • 32 | )) 33 | : 34 | '没有加载到任何新闻！'; 35 | 36 | return ( 37 | 38 | 39 |
    40 | 41 | 44 | 45 |
    46 | ); 47 | }; 48 | } -------------------------------------------------------------------------------- /src/js/root.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { Router, Route, hashHistory } from 'react-router'; 4 | import PCIndex from './components/pc_index'; 5 | import PCNewsDetails from './components/pc_news_details'; 6 | import MobileNewsDetails from './components/mobile_news_details'; 7 | import MobileIndex from './components/mobile_index'; 8 | import PCUserCenter from './components/pc_usercenter'; 9 | import MobileUserCenter from './components/mobile_usercenter'; 10 | import MediaQuery from 'react-responsive'; 11 | import 'antd/dist/antd.css'; 12 | 13 | export default class Root extends React.Component { 14 | render() { 15 | return ( 16 |
    17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
    32 | ); 33 | }; 34 | } 35 | ReactDOM.render( 36 | , document.getElementById('mainContainer')); 37 | -------------------------------------------------------------------------------- /src/js/components/mobile_news_details.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Row, Col, BackTop } from 'antd'; 3 | import MobileHeader from './mobile_header'; 4 | import MobileFooter from './mobile_footer'; 5 | import CommonComments from './common_comments' 6 | 7 | export default class MobileNewsDetails extends React.Component { 8 | constructor() { 9 | super(); 10 | this.state = { 11 | newsItem: '' 12 | }; 13 | }; 14 | componentDidMount() { 15 | var myFetchOptions = { 16 | method: 'GET' 17 | }; 18 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnewsitem&uniquekey=" + this.props.params.uniquekey, myFetchOptions) 19 | .then(response => response.json()) 20 | .then(json => { //此时的json就是获取到的评论data 21 | this.setState({ newsItem: json }); 22 | document.title = this.state.newsItem.title + " - React News | React 驱动的新闻平台"; 23 | }) 24 | }; 25 | createMarkup() { 26 | return { __html: this.state.newsItem.pagecontent }; 27 | }; 28 | render() { 29 | return ( 30 |
    31 | 32 |
    33 | 34 | 35 |
    36 | 37 | 38 |     39 | 40 | 41 |
    42 | ); 43 | }; 44 | } 45 | -------------------------------------------------------------------------------- /src/js/components/pc_news_details.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Row, Col, BackTop } from 'antd'; 3 | import PCHeader from './pc_header'; 4 | import PCFooter from './pc_footer'; 5 | import PCNewsImageBlock from './pc_news_image_block'; 6 | import CommonComments from './common_comments' 7 | 8 | export default class PCNewsDetails extends React.Component { 9 | constructor() { 10 | super(); 11 | this.state = { 12 | newsItem: '' 13 | }; 14 | }; 15 | componentDidMount() { 16 | var myFetchOptions = { 17 | method: 'GET' 18 | }; 19 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnewsitem&uniquekey=" 20 | + this.props.params.uniquekey, myFetchOptions) 21 | .then(response => response.json()) 22 | .then(json => { 23 | this.setState({ newsItem: json }); 24 | document.title = this.state.newsItem.title + " - React News | React 驱动的新闻平台"; 25 | }) 26 | }; 27 | createMarkup() { 28 | return { __html: this.state.newsItem.pagecontent }; 29 | }; 30 | render() { 31 | return ( 32 |
    33 | 34 | 35 | 36 | 37 |
    38 | 39 | 40 | 41 | 42 | 43 | 44 |     45 | 46 | 47 |
    48 | ); 49 | }; 50 | } 51 | -------------------------------------------------------------------------------- /src/js/components/mobile_index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MobileHeader from './mobile_header'; 3 | import MobileFooter from './mobile_footer'; 4 | import { Tabs, Carousel } from 'antd'; 5 | import MobileList from './mobile_list'; 6 | import MobileListPullRefresh from './mobilelist_pull_refresh.js'; 7 | const TabPane = Tabs.TabPane; 8 | 9 | export default class MobileIndex extends React.Component { 10 | render() { 11 | 12 | const settings = { 13 | dots: true, 14 | autoplay: true, 15 | speed: 500, 16 | }; 17 | 18 | return ( 19 |
    20 | 21 | 22 | 23 |
    24 | 25 |
    26 |
    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 | ); 52 | }; 53 | } 54 | -------------------------------------------------------------------------------- /src/js/components/pc_news_image_block.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'antd'; 3 | import { Link } from 'react-router'; 4 | 5 | export default class PCNewsImageBlock extends React.Component { 6 | constructor() { 7 | super(); 8 | this.state = { 9 | news: '' 10 | }; 11 | } 12 | 13 | componentWillMount() { 14 | var myFetchOptions = { 15 | method: 'GET' 16 | }; 17 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type 18 | + "&count=" + this.props.count, myFetchOptions) 19 | .then(response => response.json()) 20 | .then(json => this.setState({ news: json })); 21 | } 22 | 23 | 24 | render() { 25 | 26 | const styleImage = { 27 | display: "block", 28 | width: this.props.imageWidth, 29 | height: "90px" 30 | } 31 | 32 | const styleH3 = { 33 | width: this.props.imageWidth, 34 | whiteSpace: "nowrap", //超出的部分用“...”表示 35 | overflow: "hidden", 36 | textOverflow: "ellipsis" 37 | } 38 | 39 | const { news } = this.state; 40 | const newsList = news.length 41 | ? 42 | news.map((newsItem, index) => ( 43 |
    44 | 45 |
    46 | 47 |
    48 |
    49 |

    50 | {newsItem.title} 51 |

    {newsItem.author_name}

    52 |

    53 |
    54 | 55 |
    56 | )) 57 | : 58 | '没有加载到任何新闻！'; 59 | 60 | return ( 61 |
    62 | 63 | {newsList} 64 | 65 |
    66 | ); 67 | }; 68 | } -------------------------------------------------------------------------------- /src/js/components/mobilelist_pull_refresh.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Row, Col } from 'antd'; 3 | import { Link } from 'react-router'; 4 | import ReactPullToRefresh from 'react-pull-to-refresh'; 5 | 6 | export default class MobileList extends React.Component { 7 | constructor() { 8 | super(); 9 | this.state = { 10 | news: '', 11 | 12 | }; 13 | } 14 | 15 | componentWillMount() { 16 | var myFetchOptions = { 17 | method: 'GET' 18 | }; 19 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type 20 | + "&count=" + this.props.count, myFetchOptions) 21 | .then(response => response.json()) 22 | .then(json => this.setState({ news: json })); 23 | }; 24 | 25 | //下拉刷新,下拉国内新闻时候，出现娱乐20条新闻 26 | handleRefresh(resoleve) { 27 | var myFetchOptions = { 28 | method: 'GET' 29 | }; 30 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=yule" 31 | + "&count=20", myFetchOptions) 32 | .then(response => response.json()) 33 | .then(json => { 34 | this.setState({ news: json }); 35 | resoleve(); 36 | }); 37 | }; 38 | 39 | 40 | render() { 41 | const { news } = this.state; 42 | const newsList = news.length 43 | ? 44 | news.map((newsItem, index) => ( 45 |
    46 | 47 |
    48 | {newsItem.title} 49 |
    50 |
    51 |
    52 | {newsItem.title} 53 |
    54 |
    55 |
    56 | {newsItem.realtype} 57 | {newsItem.date} 58 |
    59 |
    60 |
    61 | 62 |
    63 | )) 64 | : 65 | '没有加载到任何新闻！'; 66 | 67 | return ( 68 |
    69 | 70 | 71 | 73 | 74 |
    75 | {newsList} 76 |
    77 | 78 |     79 | 80 |     81 |
    82 | ); 83 | }; 84 | } -------------------------------------------------------------------------------- /src/js/components/pc_newscontainer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Row, Col, Tabs, Carousel } from 'antd'; 3 | import PCNewsBlock from './pc_news_block' 4 | import PCNewsImageBlock from './pc_news_image_block'; 5 | import PCProduct from './pc_product'; 6 | const TabPane = Tabs.TabPane; 7 | 8 | export default class PCNewsContainer extends React.Component { 9 | render() { 10 | 11 | const settings = { 12 | dots: true, 13 | autoplay: true, 14 | speed: 500, 15 | }; 16 | 17 | return ( 18 |
    19 | 20 | 21 | 22 |
    23 |
    24 | 25 |
    26 |
    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 | 52 | 53 | 54 | 55 | 56 | 57 |
    58 | 59 | 60 |
    61 | 62 | 63 |     64 |
    65 | ); 66 | }; 67 | } -------------------------------------------------------------------------------- /src/js/components/mobile_usercenter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Row, Col, BackTop, Tabs, Card } from 'antd'; 3 | import MobileHeader from './mobile_header'; 4 | import MobileFooter from './mobile_footer'; 5 | const TabPane = Tabs.TabPane; 6 | 7 | export default class MobileUserCenter extends React.Component { 8 | 9 | constructor() { 10 | super(); 11 | this.state = { 12 | usercollection: '', 13 | usercomments: '', 14 | previewImage: '', 15 | previewVisible: false 16 | }; 17 | }; 18 | 19 | componentDidMount() { 20 | var myFetchOptions = { 21 | method: 'GET' 22 | }; 23 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getuc&userid=" + localStorage.userid, myFetchOptions) 24 | .then(response => response.json()) 25 | .then(json => { 26 | this.setState({ usercollection: json }); 27 | }); 28 | 29 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getusercomments&userid=" + localStorage.userid, myFetchOptions) 30 | .then(response => response.json()) 31 | .then(json => { 32 | this.setState({ usercomments: json }); 33 | }); 34 | }; 35 | 36 | render() { 37 | const { usercollection, usercomments } = this.state; 38 | const usercollectionList = usercollection.length ? 39 | usercollection.map((uc, index) => ( 40 | 查看}> 42 |

    {uc.Title}

    43 |     44 | )) 45 | : 46 | '您还没有收藏任何的新闻，快去收藏一些新闻吧。'; 47 | 48 | const usercommentsList = usercomments.length ? 49 | usercomments.map((comment, index) => ( 50 | 查看}> 52 |

    {comment.Comments}

    53 |     54 | )) 55 | : 56 | '您还没有发表过任何评论。'; 57 | 58 | return ( 59 |
    60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | {usercollectionList} 68 | 69 | 70 | 71 | 72 | 73 | 74 | {usercommentsList} 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |
    85 | ); 86 | }; 87 | } 88 | -------------------------------------------------------------------------------- /src/js/components/common_comments.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Form, 4 | Input, 5 | Button, 6 | Card, 7 | Row, 8 | Col, 9 | notification 10 | } from 'antd'; 11 | const FormItem = Form.Item; 12 | 13 | class CommonComments extends React.Component { 14 | constructor() { 15 | super(); 16 | this.state = { 17 | comments: '' 18 | } 19 | }; 20 | 21 | componentDidMount() { 22 | var myFetchOptions = { 23 | method: 'GET' 24 | }; 25 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getcomments&uniquekey=" 26 | + this.props.uniquekey, myFetchOptions) 27 | .then(response => response.json()) 28 | .then(json => { 29 | this.setState({ comments: json }); 30 | }); 31 | }; 32 | 33 | handleSubmit(e) { 34 | e.preventDefault(); 35 | var myFetchOptions = { 36 | method: 'GET' 37 | }; 38 | var formdata = this.props.form.getFieldsValue(); 39 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=comment&userid=" 40 | + localStorage.userid 41 | + "&uniquekey=" + this.props.uniquekey 42 | + "&commnet=" + formdata.remark, myFetchOptions) 43 | .then(response => response.json()) 44 | .then(json => { 45 | this.componentDidMount(""); 46 | }) 47 | }; 48 | 49 | addUserCollection() { 50 | var myFetchOptions = { 51 | method: 'GET' 52 | }; 53 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=uc&userid=" + localStorage.userid 54 | + "&uniquekey=" + this.props.uniquekey, myFetchOptions) 55 | .then(response => response.json()) 56 | .then(json => { 57 | //收藏成功以后进行一下全局的提醒 58 | notification['success']({ message: "ReactNews提醒", description: "新闻收藏成功！" }); 59 | }); 60 | }; 61 | 62 | render() { 63 | let { getFieldProps } = this.props.form; 64 | const { comments } = this.state; 65 | const commentList = comments.length 66 | ? 67 | comments.map((comment, index) => ( 68 | 发表于{comment.datetime}}> 69 |

    {comment.Comments}

    70 |     71 | )) 72 | : 73 | "没有加载到任何评论！" 74 | return ( 75 |
    76 | 77 | 78 | {commentList} 79 |
    80 | 81 | 82 | 83 | 84 |    85 | 86 |
    87 | 88 |     89 |
    90 | ); 91 | }; 92 | } 93 | 94 | //二次封装 95 | export default CommonComments = Form.create({})(CommonComments); -------------------------------------------------------------------------------- /src/js/components/mobile_list.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Row, Col } from 'antd'; 3 | import Tloader from 'react-touch-loader'; 4 | import { Link } from 'react-router'; 5 | 6 | export default class MobileList extends React.Component { 7 | constructor() { 8 | super(); 9 | this.state = { 10 | news: '', 11 | count: 5, 12 | hasMore: 0, 13 | initializing: 1, 14 | refreshedAt: Date.now(), 15 | }; 16 | } 17 | 18 | componentWillMount() { 19 | var myFetchOptions = { 20 | method: 'GET' 21 | }; 22 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type 23 | + "&count=" + this.props.count, myFetchOptions) 24 | .then(response => response.json()) 25 | .then(json => this.setState({ news: json })); 26 | }; 27 | 28 | loaderMore(resolve) { 29 | setTimeout(() => { 30 | var count = this.state.count; 31 | this.setState({ 32 | count: count + 5, 33 | }); 34 | 35 | var myFetchOptions = { 36 | method: 'GET' 37 | }; 38 | 39 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type 40 | + "&count=" + this.state.count, myFetchOptions) 41 | .then(response => response.json()) 42 | .then(json => this.setState({ news: json })); 43 | 44 | this.setState({ 45 | hasMore: count > 0 && count < 50, 46 | }) 47 | resolve(); 48 | 49 | }, 300); 50 | }; 51 | 52 | componentDidMount() { 53 | setTimeout(() => { 54 | this.setState({ 55 | hasMore: 1, 56 | initializing: 2 //所有的组件初始化完成 57 | }) 58 | }, 300) 59 | } 60 | 61 | render() { 62 | var { hasMore, initializing, refreshedAt } = this.state; 63 | const { news } = this.state; 64 | const newsList = news.length 65 | ? 66 | news.map((newsItem, index) => ( 67 |
    68 | 69 |
    70 | {newsItem.title} 71 |
    72 |
    73 |
    74 | {newsItem.title} 75 |
    76 |
    77 |
    78 | {newsItem.realtype} 79 | {newsItem.date} 80 |
    81 |
    82 |
    83 | 84 |
    85 | )) 86 | : 87 | '没有加载到任何新闻！'; 88 | 89 | return ( 90 |
    91 | 92 | 93 | 96 | {newsList} 97 | 98 | 99 | 100 |
    101 | ); 102 | }; 103 | } -------------------------------------------------------------------------------- /src/js/components/mobile_header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Icon, 4 | Tabs, 5 | message, 6 | Form, 7 | Input, 8 | Button, 9 | Modal 10 | } from 'antd'; 11 | import { Link } from 'react-router'; 12 | const FormItem = Form.Item; 13 | const TabPane = Tabs.TabPane; 14 | 15 | class MobileHeader extends React.Component { 16 | constructor() { 17 | super(); 18 | this.state = { 19 | current: 'top', 20 | modalVisible: false, 21 | action: 'login', 22 | hasLogined: false, 23 | userNickName: '', 24 | userid: 0 25 | }; 26 | }; 27 | setModalVisible(value) { 28 | this.setState({ modalVisible: value }); 29 | }; 30 | componentWillMount() { 31 | if (localStorage.userid != '') { 32 | this.setState({ hasLogined: true }); 33 | this.setState({ userNickName: localStorage.userNickName, userid: localStorage.userid }); 34 | } 35 | } 36 | handleClick(e) { 37 | if (e.key = "register") { 38 | this.setState({ current: 'register' }); 39 | this.setModalVisible(true); 40 | } else { 41 | { 42 | this.setState({ current: e.key }); 43 | } 44 | } 45 | }; 46 | handleSubmit(e) { 47 | //页面开始向 API 进行提交数据 48 | e.preventDefault(); 49 | var myFetchOptions = { 50 | method: 'GET' 51 | }; 52 | var formData = this.props.form.getFieldsValue(); 53 | console.log(formData); 54 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=" + this.state.action + "&username=" + formData.userName + "&password=" + formData.password + "&r_userName=" + formData.r_userName + "&r_password=" + formData.r_password + "&r_confirmPassword=" + formData.r_confirmPassword, myFetchOptions).then(response => response.json()).then(json => { 55 | this.setState({ userNickName: json.NickUserName, userid: json.UserId }); 56 | }); 57 | if (this.state.action == "login") { 58 | this.setState({ hasLogined: true }); 59 | message.success("登录成功！"); 60 | } else { 61 | message.success("注册成功！"); 62 | } 63 | this.setModalVisible(false); 64 | }; 65 | 66 | login() { 67 | this.setModalVisible(true); 68 | }; 69 | 70 | callback(key) { 71 | if (key == 1) { 72 | this.setState({ action: 'login' }); 73 | } else if (key == 2) { 74 | this.setState({ action: 'register' }); 75 | } 76 | }; 77 | 78 | render() { 79 | let { getFieldProps } = this.props.form; 80 | const userShow = this.state.hasLogined 81 | ? 82 | 83 | 84 | : 85 | return ( 86 |
    87 |
    88 | 89 | logo 90 | ReactNews 91 | 92 | {userShow} 93 |
    94 | this.setModalVisible(false)} onOk={() => this.setModalVisible(false)} okText="关闭"> 95 | 96 | 97 |
    98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 |
    106 |     107 | 108 |
    109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 |
    120 |     121 |     122 |     123 |
    124 | ); 125 | }; 126 | } 127 | export default MobileHeader = Form.create({})(MobileHeader); 128 | -------------------------------------------------------------------------------- /src/js/components/pc_usercenter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Tabs, 4 | Row, 5 | Card, 6 | Col, 7 | Upload, 8 | Modal, 9 | Icon 10 | } from 'antd'; 11 | import PCHeader from './pc_header'; 12 | import PCFooter from './pc_footer'; 13 | const TabPane = Tabs.TabPane; 14 | 15 | export default class PCUserCenter extends React.Component { 16 | constructor() { 17 | super(); 18 | this.state = { 19 | usercollection: '', 20 | usercomments: '', 21 | previewImage: '', 22 | previewVisible: false 23 | }; 24 | }; 25 | componentDidMount() { 26 | const myFetchOptions = { 27 | method: 'GET' 28 | }; 29 | 30 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getuc&userid=" + localStorage.userid, myFetchOptions) 31 | .then(response => response.json()) 32 | .then(json => { 33 | this.setState({ usercollection: json }); 34 | }); 35 | 36 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getusercomments&userid=" + localStorage.userid, myFetchOptions) 37 | .then(response => response.json()) 38 | .then(json => { 39 | this.setState({ usercomments: json }); 40 | }); 41 | 42 | }; 43 | render() { 44 | const props = { 45 | action: 'http://newsapi.gugujiankong.com/handler.ashx', 46 | headers: { 47 | "Access-Control-Allow-Origin": "*" //跨域处理 48 | }, 49 | listType: 'picture-card', 50 | defaultFileList: [ 51 | { 52 | uid: -1, 53 | name: 'xxx.png', 54 | state: 'done', 55 | url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png', 56 | thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png' 57 | } 58 | ], 59 | onPreview: (file) => { 60 | this.setState({ previewImage: file.url, previewVisible: true }); 61 | } 62 | }; 63 | 64 | const { usercollection, usercomments } = this.state; 65 | const usercollectionList = usercollection.length ? 66 | usercollection.map((uc, index) => ( 67 | 查看}> 70 |

    {uc.Title}

    71 |     72 | )) 73 | : 74 | '您还没有收藏任何的新闻，快去收藏一些新闻吧!'; 75 | 76 | const usercommentsList = usercomments.length ? 77 | usercomments.map((comment, index) => ( 78 | 查看}> 80 |

    {comment.Comments}

    81 |     82 | )) 83 | : 84 | '您还没有发表过任何评论!'; 85 | 86 | return ( 87 |
    88 | 89 | 90 | 91 | 92 | 93 | 94 |
    95 | 96 | 97 | {usercollectionList} 98 | 99 | 100 |
    101 |     102 | 103 |
    104 | 105 | 106 | {usercommentsList} 107 | 108 | 109 |
    110 |     111 | 112 |
    113 | 114 | 115 |
    上传照片
    116 |     117 | 120 | 预览 121 | 122 |
    123 |     124 |     125 | 126 | 127 |     128 | 129 |
    130 | ); 131 | }; 132 | } 133 | -------------------------------------------------------------------------------- /src/js/components/pc_header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Menu, 4 | Icon, 5 | Tabs, 6 | message, 7 | Form, 8 | Input, 9 | Button, 10 | Modal, 11 | Row, 12 | Col 13 | } from 'antd'; 14 | const FormItem = Form.Item; 15 | const TabPane = Tabs.TabPane; 16 | import { Link } from 'react-router' 17 | 18 | class PCHeader extends React.Component { 19 | constructor() { 20 | super(); 21 | this.state = { 22 | current: 'top', 23 | modalVisible: false, 24 | action: 'login', 25 | hasLogined: false, 26 | userNickName: '', 27 | userid: 0 28 | }; 29 | }; 30 | 31 | //让页面刷新后用户登录状态依然存在 32 | componentWillMount() { 33 | if (localStorage.userid != '') { 34 | this.setState( 35 | { 36 | hasLogined: true, 37 | userNickName: localStorage.userNickName, 38 | userid: localStorage.userid 39 | } 40 | ); 41 | } 42 | }; 43 | 44 | setModalVisible(value) { 45 | this.setState({ modalVisible: value }); 46 | }; 47 | 48 | handleClick(e) { 49 | if (e.key == "register") { 50 | this.setState({ current: 'register' }); 51 | this.setModalVisible(true); 52 | } else { 53 | { 54 | this.setState({ current: e.key }); 55 | } 56 | } 57 | }; 58 | 59 | handleSubmit(e) { 60 | //页面开始向 API 进行提交数据 61 | e.preventDefault(); 62 | var myFetchOptions = { 63 | method: 'GET' 64 | }; 65 | var formData = this.props.form.getFieldsValue(); 66 | console.log(formData); 67 | 68 | //注册和登录api,根据不同的行为，获取不同的参数 69 | fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=" + this.state.action 70 | + "&username=" + formData.userName + "&password=" + formData.password 71 | + "&r_userName=" + formData.r_userName + "&r_password=" 72 | + formData.r_password + "&r_confirmPassword=" 73 | + formData.r_confirmPassword, myFetchOptions) 74 | .then(response => response.json()) 75 | .then(json => { 76 | this.setState({ userNickName: json.NickUserName, userid: json.UserId }); 77 | //登录成功，存储用户id和name 78 | localStorage.userid = json.UserId; 79 | localStorage.userNickName = json.NickUserName; 80 | }); 81 | if (this.state.action == "login") { 82 | this.setState({ hasLogined: true }); 83 | message.success("登录成功！"); 84 | } else { 85 | message.success("注册成功！"); 86 | } 87 | 88 | this.setModalVisible(false); //请求成功后关闭模态框 89 | }; 90 | 91 | callback(key) { 92 | if (key == 1) { 93 | this.setState({ action: 'login' }); 94 | } else if (key == 2) { 95 | this.setState({ action: 'register' }); 96 | } 97 | }; 98 | 99 | logout() { 100 | localStorage.userid = ''; 101 | localStorage.userNickName = ''; 102 | this.setState({ hasLogined: false }); 103 | }; 104 | 105 | render() { 106 | let { getFieldProps } = this.props.form; 107 | const userShow = this.state.hasLogined 108 | ? 109 | 110 |    111 | 112 | 113 | 114 |    115 | 116 | 117 | : 118 | 注册/登录 119 | ; 120 | return ( 121 |
    122 | 123 | 124 | 125 | 129 | 130 | 131 | 132 | 133 | 头条 134 | 135 | 136 | 社会 137 | 138 | 139 | 国内 140 | 141 | 142 | 国际 143 | 144 | 145 | 娱乐 146 | 147 | 148 | 体育 149 | 150 | 151 | 科技 152 | 153 | 154 | 时尚 155 | 156 | {userShow} 157 | 158 | this.setModalVisible(false)} onOk={() => this.setModalVisible(false)} okText="关闭"> 159 | 160 | 161 | 162 |
    163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 |
    171 |     172 | 173 | 174 |
    175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 |
    186 |     187 | 188 |     189 |     190 | 191 | 192 |     193 |
    194 | ); 195 | }; 196 | } 197 | export default PCHeader = Form.create({})(PCHeader); 198 | -------------------------------------------------------------------------------- /src/css/pc.css: -------------------------------------------------------------------------------- 1 | .logo { 2 | align-items: center; 3 | display: flex; 4 | } 5 | 6 | .logo img { 7 | width: 48px; 8 | height: 48px; 9 | } 10 | 11 | .logo span { 12 | font-size: 24px; 13 | padding-left: 5px; 14 | } 15 | 16 | .footer { 17 | text-align: center; 18 | font-size: 15px; 19 | } 20 | 21 | .register { 22 | float: right !important; 23 | } 24 | 25 | .ant-menu-horizontal>.ant-menu-item>a, .ant-menu-horizontal>.ant-menu-submenu>a { 26 | display: inline-block !important; 27 | } 28 | 29 | .container{ 30 | padding-top: 10px; 31 | } 32 | 33 | .leftContainer { 34 | width: 400px; 35 | float: left; 36 | } 37 | 38 | .carousel { 39 | width: 400px; 40 | float: left; 41 | } 42 | 43 | .ant-card{ 44 | margin-top: 5px !important; 45 | } 46 | 47 | .ant-card-head-title{ 48 | text-align: left !important; 49 | } 50 | .ant-card-body{ 51 | text-align: left !important; 52 | } 53 | .usercenter { 54 | float: right !important; 55 | } 56 | 57 | #container { 58 | text-align: center !important; 59 | } 60 | 61 | .container { 62 | text-align: center; 63 | margin-top: 5px; 64 | } 65 | 66 | .carousel { 67 | width: 400px; 68 | float: left; 69 | } 70 | 71 | .carousel img { 72 | width: 400px; 73 | height: 260px; 74 | } 75 | 76 | .topNewsList { 77 | float: left; 78 | text-align: left; 79 | font-size: 14px; 80 | margin-bottom: 10px; 81 | } 82 | 83 | .topNewsList a { 84 | line-height: 22px !important; 85 | color: #666 !important; 86 | } 87 | 88 | .tabs_news { 89 | padding-left: 10px; 90 | width: 460px; 91 | float: left; 92 | } 93 | 94 | .tabs_product { 95 | width: 300px; 96 | padding-left: 10px; 97 | float: left; 98 | } 99 | 100 | .tabs_news li { 101 | height: 27px; 102 | line-height: 27px; 103 | font-size: 14px; 104 | white-space: nowrap; 105 | overflow: hidden; 106 | width: 417px; 107 | float: left; 108 | text-overflow: ellipsis; 109 | } 110 | 111 | .tabs_product li { 112 | height: 27px; 113 | line-height: 27px; 114 | font-size: 14px; 115 | white-space: nowrap; 116 | overflow: hidden; 117 | width: 257px; 118 | text-overflow: ellipsis; 119 | } 120 | 121 | .clearfix{ 122 | margin-top: 20px; 123 | } 124 | 125 | .ant-tabs-bar { 126 | margin-bottom: 0 !important; 127 | } 128 | 129 | .ant-card-body { 130 | padding: 15px !important; 131 | } 132 | 133 | .leftContainer{ 134 | width:400px; 135 | float: left; 136 | } 137 | 138 | /*image block******START*****/ 139 | .imageblock { 140 | float: left; 141 | } 142 | 143 | .custom-card { 144 | padding: 5px; 145 | } 146 | 147 | .custom-card p { 148 | color: #999; 149 | } 150 | 151 | .register{ 152 | float: right !important; 153 | } 154 | 155 | /*image block******END*****/ 156 | 157 | iframe { 158 | position: relative !important; 159 | overflow-y: hidden !important; 160 | overflow-x: hidden !important; 161 | } 162 | 163 | #content { 164 | font-size: 12px !important; 165 | } 166 | 167 | .ant-menu-horizontal > .ant-menu-item > a, .ant-menu-horizontal > .ant-menu-submenu > a 168 | { 169 | display: inline-block !important; 170 | } 171 | 172 | 173 | /*Footer******Start*****/ 174 | 175 | .footer { 176 | text-align: center; 177 | padding-top: 20px; 178 | } 179 | 180 | 181 | /*Footer******End*****/ 182 | .title,.article-title .title { 183 | font-size: 0.44rem !important; 184 | line-height: 1.4em 185 | } 186 | 187 | .article-src-time { 188 | font-size: 0.3rem !important; 189 | } 190 | 191 | .article-content .txt { 192 | font-size: 0.36rem !important; 193 | } 194 | 195 | /**网易代码引入演示**/ 196 | 197 | .productlinks { 198 | width: 298px; 199 | height: 380px; 200 | margin-top: 6px; 201 | background: #F7F7F7; 202 | -webkit-transition: all .3s; 203 | -moz-transition: all .3s; 204 | -o-transition: all .3s; 205 | transition: all .3s; 206 | } 207 | 208 | .productlinks-item { 209 | text-align: left; 210 | float: left; 211 | width: 290px; 212 | position: relative; 213 | z-index: 1; 214 | padding: 13px 0 13px 10px; 215 | line-height: 25px; 216 | -webkit-transition: all .3s; 217 | -moz-transition: all .3s; 218 | -o-transition: all .3s; 219 | transition: all .3s; 220 | } 221 | 222 | .productlinks-i { 223 | text-indent: -10em; 224 | } 225 | 226 | .productlinks-item strong { 227 | position: absolute; 228 | z-index: 2; 229 | left: 0; 230 | top: 50%; 231 | margin-top: -20px; 232 | overflow: hidden; 233 | width: 40px; 234 | height: 40px; 235 | } 236 | 237 | .productlinks-item a { 238 | padding: 0 4px 0 0; 239 | white-space: nowrap; 240 | } 241 | 242 | .productlinks-item .last, .productlinks-item .pr0 { 243 | padding: 0; 244 | } 245 | 246 | .productlinks-item .pr2 { 247 | padding-right: 2px; 248 | } 249 | 250 | .changeview .productlinks-item { 251 | padding: 4px 0 3px 50px; 252 | } 253 | 254 | .changeview .productlinks { 255 | height: 300px; 256 | margin-top: 56px; 257 | } 258 | 259 | .item-mail, .item-sns { 260 | background: #fff; 261 | } 262 | 263 | .productlinks-i-mail, .productlinks-i-game, .productlinks-i-sns, .productlinks-i-recommend { 264 | width: 40px; 265 | height: 40px; 266 | text-indent: -10em; 267 | position: absolute; 268 | z-index: 3; 269 | } 270 | 271 | .productlinks-i-mail { 272 | background-position: 12px -167px; 273 | } 274 | 275 | .productlinks-i-game { 276 | background-position: 7px -217px; 277 | } 278 | 279 | .productlinks-i-sns { 280 | background-position: 12px -262px; 281 | } 282 | 283 | .productlinks-i-recommend { 284 | background-position: 12px -308px; 285 | } 286 | 287 | .ntes-nav-select-unfold .productlinks-mail-fold { 288 | display: block; 289 | } 290 | 291 | .productlinks-mail-fold { 292 | position: absolute; 293 | z-index: 100; 294 | width: 118px; 295 | height: 154px; 296 | top: -163px; 297 | left: -36px; 298 | display: none; 299 | background: url(http://img2.cache.netease.com/www/v2013/img/bg_fmail_v3.png) left top no-repeat; 300 | } 301 | 302 | .productlinks-mail-warp { 303 | position: relative; 304 | z-index: 100; 305 | background: none; 306 | } 307 | 308 | .productlinks-fold-163, .productlinks-fold-126, .productlinks-fold-yeah, .productlinks-fold-mob { 309 | float: left; 310 | display: inline; 311 | width: 116px; 312 | height: 34px; 313 | text-indent: -100em; 314 | overflow: hidden; 315 | margin-left: 1px; 316 | margin-bottom: 1px; 317 | } 318 | 319 | .productlinks-fold-163 { 320 | margin-top: 1px; 321 | } 322 | 323 | 324 | /*productlist-item */ 325 | 326 | 327 | 328 | 329 | /**Article Content**/ 330 | 331 | .container{ 332 | text-align: center; 333 | } 334 | 335 | .article { 336 | text-align: justify 337 | } 338 | 339 | .article-content .img .img-wrap,.hot-news img { 340 | background-repeat: no-repeat; 341 | background-position: center 342 | } 343 | 344 | .hn-title h2,.in-title h2 { 345 | z-index: 1; 346 | font-weight: 600 347 | } 348 | 349 | #title { 350 | margin: 16px 16px 0!important; 351 | border-bottom: 1px solid #e5e5e5 352 | } 353 | 354 | .article-title { 355 | margin-bottom: .2rem 356 | } 357 | 358 | #title .title,.article-title .title { 359 | font-size: 1.44rem; 360 | line-height: 1.4em 361 | } 362 | 363 | .title { 364 | color: #000 365 | } 366 | 367 | .article-src-time { 368 | font-size: 1rem; 369 | color: #999; 370 | padding-bottom: .2rem 371 | } 372 | 373 | .article-content .section { 374 | line-height: 1.6em; 375 | margin-bottom: .3rem; 376 | margin-top: 0 377 | } 378 | 379 | .article-content .txt { 380 | font-size: 1.36rem 381 | } 382 | 383 | .article-content .img { 384 | margin-bottom: .3rem 385 | } 386 | 387 | .article-content .img .img-wrap { 388 | position: relative; 389 | display: block; 390 | width: 100%; 391 | height: 0; 392 | overflow: hidden; 393 | background-size: 40% 394 | } 395 | 396 | #content { 397 | margin: .3rem 16px 16px 398 | } 399 | 400 | .article-content .img .img-wrap img { 401 | position: absolute; 402 | left: 0; 403 | top: 0; 404 | display: block; 405 | width: 60% 406 | } 407 | 408 | .article-content .img .txt-wrap { 409 | font-size: .36rem; 410 | line-height: 2em 411 | } 412 | 413 | .article-content .app-download { 414 | position: relative; 415 | display: block; 416 | width: 100%; 417 | height: .8rem; 418 | text-align: center; 419 | color: red; 420 | line-height: .8rem; 421 | border: 1px solid #e5e5e5; 422 | border-top: 0 none; 423 | font-size: .34rem 424 | } 425 | 426 | .article-content .app-download img { 427 | position: absolute; 428 | width: .42rem; 429 | height: .42rem; 430 | margin-right: .15rem; 431 | top: 50%; 432 | margin-top: -.21rem; 433 | left: .66rem 434 | } 435 | -------------------------------------------------------------------------------- /src/js/components/pc_product.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default class PCProduct extends React.Component { 4 | render() { 5 | return ( 6 |
    7 | {/* product.html start */} 8 | 46 |
    47 | ); 48 | }; 49 | } 50 | -------------------------------------------------------------------------------- /src/css/mobile.css: -------------------------------------------------------------------------------- 1 | html{ 2 | font-size: 50px; 3 | } 4 | 5 | #mobileheader{ 6 | flex: 1; 7 | background: #f6f6f6; 8 | } 9 | 10 | #mobileheader header{ 11 | border-bottom: 1px solid #2db7f5; 12 | padding-left: 10px; 13 | } 14 | 15 | #mobileheader header img{ 16 | height: 50px; 17 | } 18 | 19 | #mobileheader header span{ 20 | font-size: 35px; 21 | vertical-align: top; 22 | padding-left: 5px; 23 | color: #2db7f5; 24 | } 25 | 26 | #mobileheader i{ 27 | font-size: 0.5rem; 28 | float: right; 29 | margin-right: 0.3rem; 30 | margin-top: 0.3rem; 31 | color:#2db7f5; 32 | } 33 | 34 | #mobileheader ul li{ 35 | font-size: 30px; 36 | } 37 | 38 | #mobileheader .slick-list img{ 39 | height: 220px; 40 | width:100%; 41 | } 42 | 43 | #mobilefooter{ 44 | text-align: center; 45 | } 46 | 47 | #mobileDetailsContainer .title,.article-title .title { 48 | font-size: 0.44rem !important; 49 | line-height: 1.4em 50 | } 51 | 52 | #mobileDetailsContainer .article-src-time { 53 | font-size: 0.3rem !important; 54 | } 55 | 56 | #mobileDetailsContainer .article-content .txt { 57 | font-size: 0.36rem; 58 | } 59 | #mobileDetailsContainer .ant-row{ 60 | margin-top: 20px; 61 | } 62 | 63 | .ucmobileList{ 64 | margin-top: 60px; 65 | } 66 | 67 | 68 | .topbar{text-align: left !important; margin-bottom: 10px;background: #2db7f5;display:block;font-size:.32rem;max-width:1080px;height:.98rem;line-height:.98rem;padding:0 0 0 10px;box-sizing:border-box;font-size:0;-webkit-tap-highlight-color:rgba(0,0,0,0);position:fixed;width:7.5rem;z-index:10000;top:0} 69 | .topbar,.topbar a{color:#fff} 70 | .topbar img{width: 50px;} 71 | .topbar span{ 72 | display: inline-block; 73 | width: 80px; 74 | height: 50px; 75 | vertical-align: top; 76 | font-size: 0.5rem; 77 | padding-left: 10px; 78 | } 79 | 80 | section{background:#f6f6f6;width:6.9rem} 81 | .m_separate{padding:.2rem .3rem;background:#f6f6f6;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5} 82 | .m_article{font-size:14px;padding:.2rem 0;border-bottom:1px solid #e5e5e5;margin:0 .3rem} 83 | .m_article .m_article_img{float:left;width:27%;height:1.4rem;overflow:hidden;position:relative;margin-right:.2rem} 84 | .m_article .m_article_img .m_article_mark{color:#fff;background:#5da3e9;font-size:.28rem;text-align:center;padding:.04rem;position:absolute;display:inline-block;left:0;top:0;height:.4rem;line-height:.4rem;opacity:.9} 85 | .m_article .m_article_img img{width:100%;display:block;min-height:1.4rem} 86 | .m_article .m_article_desc .m_article_channel{display:inline-block;color:rgba(255,51,51,0.9);font-size:12px;padding:2px;line-height:12px;margin-right:.1rem;background:url(http://img2.cache.netease.com/f2e/wap/common/images/border_red.png) no-repeat;background-size:100% 100%} 87 | .m_article .m_article_desc .m_article_time{font-size:.24rem;color:#888;display:inline-block} 88 | .m_article .m_article_desc .m_article_desc_l{float:left} 89 | .m_article .m_article_desc .m_article_desc_r{float:right;background-size:contain;background-position:left 0;background-repeat:no-repeat;color:#888;line-height:.37rem} 90 | .m_article .m_article_desc .m_article_desc_r .iconfont{padding:0 .1rem 0 0;display:inline-block;font-size:.28rem;color:#a8a8a8} 91 | .m_article .m_article_info{overflow:hidden;padding-bottom:4px} 92 | .m_article .m_article_info .m_article_title{text-align: left;font-size:.34rem;margin-bottom:.2rem;color:#404040;line-height:.42rem;width:100%;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;-webkit-line-break:auto;-webkit-box-orient:vertical} 93 | .m_article .m_article_hot{margin-top:.17rem;float:left;height:.42rem;width:100%} 94 | .m_article .m_article_hot .m_article_hot_icon{color:#fff;background:#4c9aea;border-radius:.5rem;text-align:center;padding:.05rem;line-height:.3rem;width:1.11rem;height:.3rem;float:left;position:relative} 95 | .m_article .m_article_hot .m_article_hot_icon:after{content:"";display:block;position:absolute;bottom:-0.05rem;right:-0.04rem;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:10px solid #4c9aea} 96 | .m_article .m_article_hot .m_article_hot_content{margin-left:.15rem;float:left} 97 | .m_article .m_article_hot .m_article_hot_content a{display:inline-block;color:#4c9aea;font-size:.28rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:5.5rem} 98 | .m_article_m0{min-height:1.4rem} 99 | .m_article_m1{min-height:1.4rem} 100 | .m_article_m1 .m_article_title{display:none} 101 | .m_article_m1 .m_article_img{width:100%;margin:0} 102 | .m_photoset .m_photoset_title{font-size:.34rem;margin-bottom:.2rem;color:#404040;display:-webkit-flex;display:-ms-flexbox;display:-webkit-box;display:flex} 103 | .m_photoset .m_photoset_pic{margin:.22rem 0;display:block} 104 | .m_photoset .m_photoset_pic .m_photoset_pic_wrap{overflow:hidden;height:1.65rem} 105 | .m_photoset .m_photoset_pic .m_photoset_pic_wrap img{width:32%;float:left;margin-right:2%;display:inline-block;min-height:1.4rem} 106 | .m_photoset .m_photoset_pic .m_photoset_pic_wrap img:last-child{margin-right:0} 107 | .m_photoset_square{background:#fff;width:3.35rem;float:left;margin:.2rem 0 0 0;padding:0;border:0;box-shadow:0 1px 1px #e3e3e3} 108 | .m_photoset_square .m_photoset_square_img{float:left;width:100%;overflow:hidden;position:relative;height:auto;-webkit-animation:imgload2 1s ease-out;animation:imgload2 1s ease-out;-webkit-animation-name:imgload2;-webkit-animation-duration:1s;-webkit-animation-timing-function:ease-out} 109 | .m_photoset_square .m_photoset_square_img img{width:100%;display:block;min-height:2rem} 110 | .m_photoset_square.papa_item .m_photoset_square_info .m_photoset_square_title span{display:inline} 111 | .m_photoset_square.papa_item .m_photoset_square_info .m_photoset_square_title .m_photoset_square_adflag{display:inline-block;color:#efd469;font-size:12px;padding:2px;line-height:12px;margin-right:.1rem;background:url(http://img2.cache.netease.com/f2e/wap/common/images/border_yellow.png) no-repeat;background-size:100% 100%} 112 | .m_photoset_square .m_photoset_square_info{padding:.15rem;float:left;width:100%;box-sizing:border-box} 113 | .m_photoset_square .m_photoset_square_info .m_photoset_square_title{color:#555;width:100%;margin-bottom:.15rem} 114 | .m_photoset_square .m_photoset_square_info .m_photoset_square_title span{display:block;font-size:.28rem;line-height:.42rem} 115 | .m_photoset_square .m_photoset_square_info .m_photoset_square_desc{width:100%} 116 | .m_photoset_square .m_photoset_square_info .m_photoset_square_desc .m_photoset_square_desc_l{float:left;background-size:contain;background-position:left 0;background-repeat:no-repeat;color:#888;line-height:.36rem;font-size:.24rem} 117 | .m_photoset_square .m_photoset_square_info .m_photoset_square_desc .m_photoset_square_desc_l .iconfont{padding:0 .1rem 0 0;display:inline-block;font-size:.28rem;color:#a8a8a8} 118 | .m_photoset_square .m_photoset_square_info .m_photoset_square_desc .m_photoset_square_desc_r{float:right;background-size:contain;background-position:left 0;background-repeat:no-repeat;color:#888;line-height:.36rem;font-size:.24rem} 119 | .m_photoset_square .m_photoset_square_info .m_photoset_square_desc .m_photoset_square_desc_r .iconfont{padding:0 .1rem 0 0;display:inline-block;font-size:.28rem;color:#a8a8a8} 120 | .m_article_debate{margin:0;background:#eee} 121 | .m_article_debate .m_debate_title{font-size:.34rem;margin-bottom:.2rem;color:#404040;display:-webkit-flex;display:-ms-flexbox;display:-webkit-box;display:flex} 122 | .m_article_debate .m_debate_contents{margin:.4rem 0 .2rem 0} 123 | .m_article_debate .m_debate_contents div{float:left} 124 | .m_article_debate .m_debate_contents .debate_btn{padding:.25rem 0;border:1px solid #eee;border-radius:.5rem;font-size:.28rem;width:1.6rem;text-align:center;background:#fff} 125 | .m_article_debate .m_debate_contents .debate_positive{border:1px solid #ff9292;color:#f33} 126 | .m_article_debate .m_debate_contents .debate_positive:active{background:#ff9292;color:#fff} 127 | .m_article_debate .m_debate_contents .debate_opposing{border:1px solid #9dcdff;color:#4c9aea} 128 | .m_article_debate .m_debate_contents .debate_opposing:active{background:#9dcdff;color:#fff} 129 | .m_article_debate .m_debate_contents .debate_view{width:3.2rem;margin:0 .2rem} 130 | .m_article_debate .m_debate_contents .debate_view .data_positive .data{color:#f33;text-align:center;width:100%;margin:.05rem 0} 131 | .m_article_debate .m_debate_contents .debate_view .data_positive .chart{background:#f33;height:.2rem;width:100%;border-bottom-left-radius:.25rem;border-top-left-radius:.25rem} 132 | .m_article_debate .m_debate_contents .debate_view .chart_wall{margin:0 .05rem;height:.8rem} 133 | .m_article_debate .m_debate_contents .debate_view .data_opposing .data{color:#4c9aea;text-align:center;width:100%;margin:.05rem 0} 134 | .m_article_debate .m_debate_contents .debate_view .data_opposing .chart{background:#4c9aea;height:.2rem;width:100%;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem} 135 | .m_article_debate .m_debate_desc{line-height:.5rem;height:.5rem} 136 | .m_article_debate .m_debate_desc .m_debate_channel{display:inline-block;font-size:.24rem;height:.24rem;line-height:.24rem;border:1px solid #f33;color:#f33;border-radius:4px;padding:0 .04rem;line-height:.32rem;box-sizing:border-box} 137 | .m_article_debate .m_debate_desc .m_debate_time{margin-left:.1rem;font-size:.24rem;color:#888;display:inline-block} 138 | .m_article_debate .m_debate_desc .m_debate_desc_l{float:left} 139 | .m_papa{font-size:.24rem;padding:.2rem 0;border-bottom:1px solid #e5e5e5;margin:0 .3rem} 140 | .m_papa .m_papa_img{float:left;width:27%;height:1.4rem;overflow:hidden;position:relative;margin-right:.2rem} 141 | .m_papa .m_papa_img img{width:100%;height:100%;display:block} 142 | .m_papa .m_papa_desc .m_papa_promote{display:inline-block;font-size:12px;color:#555;padding:2px 2px;height:12px;line-height:12px;background:url(http://img2.cache.netease.com/f2e/wap/common/images/border_grey.png) no-repeat;background-size:100% 100%} 143 | .m_papa .m_papa_desc .m_papa_time{margin-left:.2rem;font-size:.24rem;color:#888;display:inline-block} 144 | .m_papa .m_papa_desc .m_papa_desc_l{float:left} 145 | .m_papa .m_papa_info{overflow:hidden} 146 | .m_papa .m_papa_info .m_papa_title,.m_papa .m_papa_info a{font-size:.34rem;margin-bottom:.2rem;text-decoration:none;color:#404040;line-height:.42rem} 147 | .m_papa_m0 .m_papa_title{display:none} 148 | .m_papa_m0 .m_papa_img{width:100%;height:1.2rem} 149 | .m_papa_m1 .m_papa_title{font-size:.34rem;margin-bottom:.2rem;color:#404040} 150 | .m_papa_m1 .m_papa_title .m_papa_promote{display:inline-block;font-size:.24rem;border:1px solid #555;color:#555;border-radius:3px;padding:2px 2px;height:12px;line-height:12px;float:right} 151 | .m_papa_m1 .m_papa_pic{margin:.22rem 0;display:block} 152 | .m_papa_m1 .m_papa_pic .m_papa_pic_wrap{height:1.66rem;overflow:hidden} 153 | .m_papa_m1 .m_papa_pic .m_papa_pic_wrap img{width:32%;float:left;margin-right:2%;min-height:1.4rem} 154 | .m_papa_m1 .m_papa_pic .m_papa_pic_wrap img:last-child{margin-right:0} 155 | .m_papa_m2{background:#eee;margin:0;border-top:1px solid #e5e5e5;margin-top:-1px;width:100%} 156 | .m_papa_m2 .m_papa_content{font-size:.34rem;color:#4c9aea} 157 | .m_papa_m2 .m_papa_content a,.m_papa_m2 .m_papa_content a:active,.m_papa_m2 .m_papa_content a:visited,.m_papa_m2 .m_papa_content a:focus{color:#4c9aea} 158 | .m_papa_m2 .m_papa_promote{display:inline-block;font-size:12px;border:1px solid #555;color:#555;border-radius:3px;padding:2px 2px;float:right;height:12px;line-height:12px} 159 | .m_papa_iframe .m_papa_iframe_wrap{height:1.4rem;width:6.9rem;overflow:hidden} 160 | .m_papa_iframe iframe{width:100%;height:100%} 161 | .m_papa_iframe_photoset .m_papa_iframe_wrap{height:2.44rem;width:6.9rem;overflow:hidden} 162 | .m_papa_iframe_photoset iframe{width:100%;height:100%} 163 | .m_article_simple{font-size:.24rem;padding:.2rem 0;border-bottom:1px solid #e5e5e5;margin:0 .3rem} 164 | .m_article_simple .m_article_channel{float:left;margin-right:.1rem} 165 | .m_article_simple .m_article_channel span{color:#999;line-height:.32rem;padding-right:.1rem;border-right:1px solid #d2d2d2;font-size:.24rem;margin-top:.08rem;height:.32rem;display:block} 166 | .m_article_simple .m_article_info{overflow:hidden;position:relative} 167 | .m_article_simple .m_article_title{font-size:.34rem;margin-bottom:0;color:#404040;line-height:.45rem;width:5rem;display:inline-block;float:left} 168 | .m_article_simple .m_article_title_long{font-size:.34rem;margin-bottom:0;color:#404040;line-height:.42rem;width:5.5rem;display:inline-block;float:left} 169 | .m_article_simple .m_article_desc{position:absolute;right:0;height:100%;width:1.15rem} 170 | .m_article_simple .m_article_desc .m_article_desc_r{background-size:contain;background-position:left 0;background-repeat:no-repeat;color:#888;line-height:.42rem;white-space:nowrap} 171 | .m_article_simple .m_article_desc .m_article_desc_r .iconfont{padding:0 .1rem 0 0;display:inline-block;font-size:.28rem;color:#a8a8a8} 172 | .no_special .special_section{display:none} 173 | .m_bigimg .m_bigimg_title{font-size:.34rem;color:#404040;display:-webkit-flex;display:-ms-flexbox;display:-webkit-box;display:flex} 174 | .m_bigimg .m_article_img{width:100%;height:2.3rem;margin:.22rem 0} 175 | .m_bigimg .m_article_img .img_wrap{width:100%;height:100%;position:absolute} 176 | .m_bigimg .m_article_img .play-btn-video{width:1.2rem;height:.7rem;position:absolute;top:50%;left:50%;margin-left:-0.6rem;margin-top:-0.35rem;display:block;background:url(http://img2.cache.netease.com/f2e/wap/common_staging/images/icon_play.png) no-repeat;background-size:contain} 177 | .m_split_line{width:100%;height:.2rem;border-top:1px #e6e6e6 solid;border-bottom:1px #e6e6e6 solid;background-color:#eee} 178 | .m_launch_special{margin:0;width:7.5rem;background:#eee} 179 | .m_launch_special .m_launch_special_wrap{padding:.2rem .3rem;background:#f6f6f6;border-top:1px #e6e6e6 solid;border-bottom:1px #e6e6e6 solid} 180 | .m_launch_special .m_launch_special_title{font-size:.34rem;color:#404040;display:-webkit-flex;display:-ms-flexbox;display:-webkit-box;display:flex} 181 | .m_launch_special .m_article{margin:0} 182 | .m_launch_special .m_article:nth-child(4){border-bottom:0} 183 | .m_launch_special .m_open_specail{width:100%;height:.63rem;line-height:.63rem;background-color:#eee;color:#4c9aea;text-align:center;font-size:.24rem} 184 | --------------------------------------------------------------------------------