├── src ├── day11 │ ├── router │ │ ├── config.js │ │ └── index.js │ ├── common │ │ └── style.css │ └── container │ │ ├── choose.jsx │ │ ├── index.jsx │ │ └── city.jsx ├── day6 │ ├── common │ │ └── context.js │ └── container │ │ ├── child2.jsx │ │ ├── grandson.jsx │ │ ├── child1.jsx │ │ ├── reGrandson.jsx │ │ └── index.jsx ├── day7 │ ├── common │ │ └── context.js │ ├── container │ │ ├── head.jsx │ │ ├── body.jsx │ │ ├── bodyChild.jsx │ │ └── index.jsx │ ├── index.html │ └── index_2.html ├── day7_1 │ ├── common │ │ └── context.js │ ├── data │ │ └── data.js │ ├── view │ │ ├── index.js │ │ └── home.js │ └── utils │ │ └── connect.js ├── day9_1 │ ├── common │ │ ├── fonts │ │ │ ├── glyphicons-halflings-regular.eot │ │ │ ├── glyphicons-halflings-regular.ttf │ │ │ ├── glyphicons-halflings-regular.woff │ │ │ └── glyphicons-halflings-regular.woff2 │ │ └── css │ │ │ ├── reset.css │ │ │ ├── style.css │ │ │ └── common.css │ ├── components │ │ ├── header │ │ │ └── header.jsx │ │ └── layout │ │ │ └── index.jsx │ ├── router │ │ ├── index.jsx │ │ ├── map.jsx │ │ └── config.jsx │ └── container │ │ ├── app.jsx │ │ └── taopiaopiao │ │ ├── hot.jsx │ │ ├── index.jsx │ │ ├── hotChild1.jsx │ │ ├── hotChild2.jsx │ │ ├── detail.jsx │ │ ├── mine.jsx │ │ └── cinema.jsx ├── day14 │ ├── store │ │ ├── index.js │ │ └── action │ │ │ └── list.js │ ├── router │ │ ├── config.js │ │ └── index.js │ ├── container │ │ ├── index.jsx │ │ ├── order.jsx │ │ └── content.jsx │ └── common │ │ └── style.css ├── day15 │ ├── store │ │ ├── index.js │ │ └── action │ │ │ └── list.js │ ├── container │ │ ├── index.jsx │ │ └── list.jsx │ ├── mock │ │ └── mock.js │ └── common │ │ └── style.css ├── day13 │ ├── store │ │ ├── index.js │ │ └── action │ │ │ └── updata.js │ ├── container │ │ ├── index.jsx │ │ └── cons.jsx │ └── common │ │ └── style │ │ └── style.css ├── day10 │ ├── container │ │ ├── one.jsx │ │ ├── two.jsx │ │ ├── child2.jsx │ │ ├── child1.jsx │ │ ├── home.jsx │ │ ├── mine.jsx │ │ └── index.jsx │ ├── router │ │ ├── index.js │ │ └── config.js │ └── common │ │ └── style.css ├── day9 │ └── container │ │ ├── kele.jsx │ │ ├── xuebi.jsx │ │ ├── child2.jsx │ │ ├── binghongcha.jsx │ │ ├── child1.jsx │ │ └── index.jsx ├── day8 │ └── container │ │ ├── children.jsx │ │ ├── detail.jsx │ │ └── index.jsx ├── index.js ├── day12 │ ├── container │ │ ├── index.jsx │ │ ├── home │ │ │ ├── input.jsx │ │ │ ├── detail.jsx │ │ │ └── index.jsx │ │ ├── mine │ │ │ └── index.jsx │ │ └── type │ │ │ └── index.jsx │ ├── router │ │ ├── config.js │ │ └── index.js │ └── common │ │ └── style.css └── day8_1 │ ├── common │ └── style.css │ └── container │ ├── list.jsx │ ├── index.jsx │ └── setInfo.jsx ├── README.md ├── public ├── favicon.ico ├── img │ └── img.jpg ├── mock │ ├── type.json │ ├── type2.json │ ├── dynamic.json │ ├── data2.json │ ├── data.json │ └── cinema.json ├── manifest.json └── index.html ├── package.json └── .gitignore /src/day11/router/config.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 日常用react做的一些demo 2 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/react-practice/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/img/img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/react-practice/HEAD/public/img/img.jpg -------------------------------------------------------------------------------- /public/mock/type.json: -------------------------------------------------------------------------------- 1 | ["花王", "贝亲", "维达", "好奇", "日本", "嘉宝", "ageb", "双心", "a2", "兰芝", "雪花秀", "啾啾"] 2 | -------------------------------------------------------------------------------- /public/mock/type2.json: -------------------------------------------------------------------------------- 1 | [ "嘉宝", "ageb", "花王", "贝亲", "维达", "好奇", "日本","双心", "a2", "兰芝", "雪花秀", "啾啾"] 2 | -------------------------------------------------------------------------------- /src/day6/common/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default React.createContext(); -------------------------------------------------------------------------------- /src/day7/common/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default React.createContext(); -------------------------------------------------------------------------------- /src/day7_1/common/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default React.createContext(); -------------------------------------------------------------------------------- /src/day9_1/common/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/react-practice/HEAD/src/day9_1/common/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /src/day9_1/common/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/react-practice/HEAD/src/day9_1/common/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /src/day9_1/common/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/react-practice/HEAD/src/day9_1/common/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /src/day9_1/common/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thisislys/react-practice/HEAD/src/day9_1/common/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /src/day14/store/index.js: -------------------------------------------------------------------------------- 1 | import {combineReducers,createStore} from 'redux'; 2 | import List from './action/list'; 3 | const stores=combineReducers({ 4 | List 5 | }); 6 | export let store=createStore(stores); -------------------------------------------------------------------------------- /src/day15/store/index.js: -------------------------------------------------------------------------------- 1 | import {combineReducers,createStore} from 'redux'; 2 | import List from './action/list'; 3 | const stores=combineReducers({ 4 | List 5 | }); 6 | export let store=createStore(stores); -------------------------------------------------------------------------------- /src/day13/store/index.js: -------------------------------------------------------------------------------- 1 | import {createStore,combineReducers} from 'redux'; 2 | import UpdateRender from './action/updata'; 3 | 4 | const reducer=combineReducers({ 5 | UpdateRender 6 | }); 7 | const store=createStore(reducer); 8 | export default store; -------------------------------------------------------------------------------- /src/day10/container/one.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class One extends Component { 4 | render() { 5 | return ( 6 |
7 | ONE 8 |
9 | ); 10 | } 11 | } 12 | 13 | export default One; -------------------------------------------------------------------------------- /src/day10/container/two.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Two extends Component { 4 | render() { 5 | return ( 6 |
7 | TWO 8 |
9 | ); 10 | } 11 | } 12 | 13 | export default Two; -------------------------------------------------------------------------------- /src/day9/container/kele.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Kele extends Component { 4 | render() { 5 | return ( 6 |
7 | 可乐 8 |
9 | ); 10 | } 11 | } 12 | 13 | export default Kele; -------------------------------------------------------------------------------- /src/day9/container/xuebi.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Xuebi extends Component { 4 | render() { 5 | return ( 6 |
7 | 雪碧 8 |
9 | ); 10 | } 11 | } 12 | 13 | export default Xuebi; -------------------------------------------------------------------------------- /src/day10/container/child2.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Child2 extends Component { 4 | render() { 5 | return ( 6 |
7 | Child2 8 |
9 | ); 10 | } 11 | } 12 | 13 | export default Child2; -------------------------------------------------------------------------------- /src/day9_1/components/header/header.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Header extends Component { 4 | render() { 5 | return
6 |
QQ音乐
7 |

下载App

8 |
9 | } 10 | } 11 | 12 | export default Header -------------------------------------------------------------------------------- /src/day8/container/children.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | 3 | class Children extends PureComponent { 4 | render() { 5 | return ( 6 |
7 | {this.props.data} 8 |
9 | ); 10 | } 11 | } 12 | 13 | export default Children; -------------------------------------------------------------------------------- /src/day7_1/data/data.js: -------------------------------------------------------------------------------- 1 | export default { 2 | indexData: { 3 | name: 'index', 4 | content: 'index所需数据' 5 | }, 6 | listData: { 7 | name: 'list', 8 | content: 'list所需数据' 9 | }, 10 | detailData: { 11 | name: 'detail', 12 | content: 'detail所需数据' 13 | } 14 | } -------------------------------------------------------------------------------- /src/day9_1/components/layout/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Layout extends Component { 4 | render() { 5 | const { children } = this.props; 6 | return
7 | {children} 8 |
9 | 10 | 11 | } 12 | } 13 | 14 | export default Layout -------------------------------------------------------------------------------- /src/day9_1/router/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import RouteConfig from './config'; 3 | import RouteMap from './map'; 4 | class RouterView extends React.Component{ 5 | render(){ 6 | const {routes}=this.props; 7 | return () 8 | } 9 | } 10 | export default RouterView; -------------------------------------------------------------------------------- /src/day13/store/action/updata.js: -------------------------------------------------------------------------------- 1 | let defaultState={ 2 | data:{} 3 | } 4 | const UpdateRender=(state=defaultState,action)=>{ 5 | const {type,payload}=action; 6 | switch (type) { 7 | case "UPDATA": 8 | return {...state,data:{...payload}}; 9 | default: 10 | return state; 11 | } 12 | } 13 | export default UpdateRender; -------------------------------------------------------------------------------- /src/day6/container/child2.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Child2 extends Component { 4 | render() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | } 12 | 13 | export default Child2; -------------------------------------------------------------------------------- /src/day9/container/child2.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Child2 extends Component { 4 | render() { 5 | console.log(this.props) 6 | return ( 7 |
8 |

this.props.history.push('/child1')}>Child2

9 |
10 | ); 11 | } 12 | } 13 | 14 | export default Child2; -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/day9/container/binghongcha.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import {withRouter} from 'react-router-dom'; 3 | class Binghongcha extends Component { 4 | render() { 5 | console.log(this.props); 6 | return ( 7 |
8 | 冰红茶 9 |
10 | ); 11 | } 12 | } 13 | 14 | export default withRouter(Binghongcha); -------------------------------------------------------------------------------- /src/day15/container/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import List from './list'; 3 | import '../common/style.css'; 4 | class Index extends Component { 5 | render() { 6 | return ( 7 |
8 |

购物车

9 | 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default Index; -------------------------------------------------------------------------------- /src/day14/router/config.js: -------------------------------------------------------------------------------- 1 | import Content from '../container/content'; 2 | import Order from '../container/order'; 3 | export default { 4 | routers: [{ 5 | path: '/', 6 | redirect: '/buyCar/content', 7 | }, 8 | { 9 | path: '/buyCar/content', 10 | component: Content 11 | }, { 12 | path: '/buyCar/order', 13 | component: Order 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/day7/container/head.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Head extends Component { 4 | render() { 5 | const {data,handleChange}=this.props; 6 | return ( 7 |
8 | {data&&data.map((v,i)=>( 9 | handleChange(i)} key={i}>{v} 10 | ))} 11 |
12 | ); 13 | } 14 | } 15 | 16 | export default Head; -------------------------------------------------------------------------------- /src/day7_1/view/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import {connect} from '../utils/connect'; 3 | class Index extends Component { 4 | render () { 5 | console.log(this.props) // index对应的数据 6 | return ( 7 |
8 |

{this.props.name}

9 |

{this.props.content}

10 |
11 | ) 12 | } 13 | } 14 | export default connect((state)=>state["indexData"])(Index) -------------------------------------------------------------------------------- /src/day15/store/action/list.js: -------------------------------------------------------------------------------- 1 | const defaultState = { 2 | list: [] 3 | } 4 | const listAction = (state = defaultState, action) => { 5 | const { 6 | payload, 7 | type 8 | } = action; 9 | switch (type) { 10 | case 'UPDATA': 11 | return { 12 | ...state, 13 | list: [...payload] 14 | }; 15 | 16 | default: 17 | return state; 18 | } 19 | } 20 | export default listAction; -------------------------------------------------------------------------------- /src/day7_1/view/home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import Index from './index'; 3 | import ConText from '../common/context'; 4 | class Home extends Component { 5 | render () { 6 | return ( 7 |
8 | home主页面 9 | 10 | 11 | 12 |
13 | ) 14 | } 15 | } 16 | 17 | export default Home -------------------------------------------------------------------------------- /src/day14/container/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import {BrowserRouter} from 'react-router-dom'; 3 | import RouterView from '../router/index'; 4 | import Router from '../router/config'; 5 | import '../common/style.css'; 6 | class Index extends Component { 7 | render() { 8 | return ( 9 | 10 | 11 | 12 | ); 13 | } 14 | } 15 | 16 | export default Index; -------------------------------------------------------------------------------- /src/day6/container/grandson.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReGrandson from './reGrandson'; 3 | class Grandson extends Component { 4 | render() { 5 | return ( 6 |
7 | 8 | 9 |
10 | ); 11 | } 12 | changeParent=()=>{ 13 | this.props.changeParent('我是被子组件修改的') 14 | } 15 | } 16 | 17 | export default Grandson; -------------------------------------------------------------------------------- /src/day11/common/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | text-decoration: none; 6 | box-sizing: border-box; 7 | } 8 | 9 | html, 10 | body, 11 | #root { 12 | height: 100%; 13 | width: 100%; 14 | } 15 | .data{ 16 | min-height:50px; 17 | } 18 | .city,.citys { 19 | display: inline-block; 20 | height: 30px; 21 | line-height: 30px; 22 | padding: 0 5px; 23 | margin: 5px; 24 | } 25 | 26 | .active { 27 | border: 1px solid #ccc; 28 | } -------------------------------------------------------------------------------- /public/mock/dynamic.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "天蓝蓝", 3 | "cons": "我哦八方男能发我慰符文啊看澳门豆分为茶茶阿德阿得而复失捞看", 4 | "reply": 12, 5 | "praise": 24, 6 | "replyCons": [{ 7 | "name": "古人说", 8 | "cons": "技法我可能否垃圾覅摩擦块叫我看书法家岸嗖噢挖槽", 9 | "reply": 54, 10 | "praise": 32, 11 | "praiseFloag":false 12 | }, { 13 | "name": "顺风耳", 14 | "cons": "看破案破发麻烦马克思的敬爱的覅技法上开发你了卡萨诺 飞", 15 | "reply": 53, 16 | "praise": 29, 17 | "praiseFloag":false 18 | }] 19 | } -------------------------------------------------------------------------------- /src/day14/store/action/list.js: -------------------------------------------------------------------------------- 1 | const defaultState = { 2 | list: [] 3 | } 4 | const listAction = (state = defaultState, action) => { 5 | const { 6 | payload, 7 | type 8 | } = action; 9 | switch (type) { 10 | case 'UPDATA': 11 | console.log(payload) 12 | return { 13 | ...state, 14 | list: [...payload] 15 | }; 16 | 17 | default: 18 | return state; 19 | } 20 | } 21 | export default listAction; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './day15/container/index.jsx'; 4 | import {Provider} from 'react-redux'; 5 | import {store} from './day15/store'; 6 | // import App from './day7_1/view/home'; 7 | // import data from './day7_1/data/data'; 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById('root') 13 | ); 14 | // ReactDOM.render( 15 | // , 16 | // document.getElementById('root') 17 | // ); 18 | 19 | -------------------------------------------------------------------------------- /src/day15/mock/mock.js: -------------------------------------------------------------------------------- 1 | import Mock from 'mockjs'; 2 | let data=[{ 3 | name: "徐福记沙琪玛", 4 | num: 0, 5 | isCheck: false, 6 | money: "15" 7 | }, 8 | { 9 | name: "徐福记酥心糖", 10 | num: 0, 11 | isCheck: false, 12 | money: "24" 13 | }, { 14 | name: "徐福记牛轧糖", 15 | num: 0, 16 | isCheck: false, 17 | money: "51" 18 | }, { 19 | name: "徐福记爆汁糖", 20 | num: 0, 21 | isCheck: false, 22 | money: "21" 23 | }] 24 | 25 | Mock.mock('/shopCar',()=>{ 26 | return { 27 | code:1, 28 | data 29 | } 30 | }) -------------------------------------------------------------------------------- /src/day6/container/child1.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Grandson from './grandson'; 3 | class Child extends Component { 4 | render() { 5 | return ( 6 |
7 | {this.props.data} 8 |
9 | 10 | 11 |
12 | ); 13 | } 14 | changeSelf=()=>{ 15 | this.props.changeSelf('我是被本身组件修改的') 16 | } 17 | } 18 | 19 | export default Child; -------------------------------------------------------------------------------- /src/day11/container/choose.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Choose extends Component { 4 | render() { 5 | let { chooseData } = this.props; 6 | console.log(chooseData) 7 | return ( 8 |
9 |

10 | {chooseData && chooseData.length ? chooseData.map((v, i) => ( 11 | {v} 12 | )) : ''} 13 |

14 |
15 | ); 16 | } 17 | } 18 | 19 | export default Choose; -------------------------------------------------------------------------------- /src/day8/container/detail.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Detail extends Component { 4 | render() { 5 | const { children } = this.props 6 | return ( 7 |
8 | { 9 | // children(35) 10 | } 11 | { 12 | React.Children.map(children, (obj) => { 13 | console.log(obj) 14 | return obj 15 | }) 16 | } 17 |
18 | ); 19 | } 20 | } 21 | 22 | export default Detail; -------------------------------------------------------------------------------- /src/day7/container/body.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import BodyChild from './bodyChild'; 3 | class Body extends Component { 4 | render() { 5 | // let { data } = this.props; 6 | return ( 7 |
8 | {/*
    9 | { 10 | data && data.map(v => ( 11 |
  • {v}
    • 12 | )) 13 | } 14 |
*/} 15 | 16 |
17 | ); 18 | } 19 | } 20 | 21 | export default Body; -------------------------------------------------------------------------------- /src/day9_1/container/app.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | // import Header from '../components/header/header'; 3 | import Layout from '../components/layout'; 4 | import { HashRouter as Router } from 'react-router-dom'; 5 | import RouteView from '../router' 6 | import '../common/css/style.css' 7 | class App extends Component { 8 | render() { 9 | return ( 10 |
11 | {/*
*/} 12 | 13 | 14 | 15 | 16 | 17 |
18 | ); 19 | } 20 | } 21 | 22 | export default App; -------------------------------------------------------------------------------- /src/day14/common/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | text-decoration: none; 6 | box-sizing: border-box; 7 | } 8 | 9 | html, 10 | body, 11 | #root { 12 | height: 100%; 13 | width: 100%; 14 | } 15 | 16 | .box>p { 17 | height: 44px; 18 | line-height: 44px; 19 | text-align: center; 20 | background: #00f; 21 | color: #fff; 22 | } 23 | .carClass{ 24 | height: 40px; 25 | line-height: 40px; 26 | font-weight: 800; 27 | font-size: 20px; 28 | padding:0 20px; 29 | } 30 | li{ 31 | height: 30px; 32 | line-height: 30px; 33 | display: flex; 34 | justify-content: space-between; 35 | padding: 0 20px; 36 | } -------------------------------------------------------------------------------- /src/day10/container/child1.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import RouterView from '../router' 4 | class Child1 extends Component { 5 | render() { 6 | let { routes } = this.props; 7 | return ( 8 |
9 |

10 | child1-1 11 | child1-2 12 |

13 |
14 | 15 |
16 |
17 | ); 18 | } 19 | } 20 | 21 | export default Child1; -------------------------------------------------------------------------------- /src/day9_1/container/taopiaopiao/hot.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { NavLink } from 'react-router-dom'; 3 | import RouterView from '../../router/index'; 4 | class Hot extends Component { 5 | render() { 6 | let { routes } = this.props; 7 | return ( 8 |
9 | 13 | 14 |
15 | ); 16 | } 17 | } 18 | 19 | export default Hot; -------------------------------------------------------------------------------- /src/day7/container/bodyChild.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Context from '../common/context'; 3 | class BodyChild extends Component { 4 | render() { 5 | return ( 6 |
7 | 8 | { 9 | (obj)=>{ 10 | return
    11 | {obj&&obj.map(v=>( 12 |
  • {v}
    • 13 | ))} 14 |
15 | } 16 | } 17 | 18 |
19 | ); 20 | } 21 | } 22 | 23 | export default BodyChild; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.18.0", 7 | "mockjs": "^1.0.1-beta3", 8 | "prop-types": "^15.7.2", 9 | "react": "^16.8.2", 10 | "react-dom": "^16.8.2", 11 | "react-redux": "^6.0.1", 12 | "react-router-dom": "^4.3.1", 13 | "react-scripts": "2.1.5", 14 | "redux": "^4.0.1" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": "react-app" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /src/day10/container/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import RouterView from '../router'; 3 | import { Link } from 'react-router-dom'; 4 | class Home extends Component { 5 | render() { 6 | let { routes } = this.props; 7 | return ( 8 |
9 |
10 |
    11 |
  • index1
    • 12 |
  • index2
    • 13 |
14 |
15 |
16 | 17 |
18 |
19 | ); 20 | } 21 | } 22 | 23 | export default Home; -------------------------------------------------------------------------------- /src/day10/container/mine.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Mine extends Component { 4 | render() { 5 | return ( 6 |
7 |

登陆

8 |
9 |

10 |

11 |
12 | 13 | 14 |

立即注册找回密码

15 |

客服电话：400-456-12345

16 |
17 | ); 18 | } 19 | } 20 | 21 | export default Mine; -------------------------------------------------------------------------------- /src/day10/container/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { BrowserRouter, Link } from 'react-router-dom'; 3 | import RouterView from '../router'; 4 | import '../common/style.css'; 5 | import Router from '../router/config'; 6 | class Index extends Component { 7 | render() { 8 | console.log(this.props) 9 | return ( 10 | 11 |
12 | 13 |
14 | 首页 15 | 我的 16 |
17 | 18 |
19 | 20 | ); 21 | } 22 | } 23 | 24 | export default Index; -------------------------------------------------------------------------------- /src/day7_1/utils/connect.js: -------------------------------------------------------------------------------- 1 | import React,{Component} from 'react'; 2 | import Context from '../common/context'; 3 | export const connect = (func) => { 4 | console.log(func) 5 | return (Components) => { 6 | return class extends Component { 7 | render() { 8 | return ( 9 | 10 | { 11 | (datas)=>{ 12 | console.log(datas) 13 | let status=func(datas); 14 | return () 15 | } 16 | } 17 | 18 | ); 19 | } 20 | } 21 | 22 | } 23 | } -------------------------------------------------------------------------------- /src/day9_1/container/taopiaopiao/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { NavLink } from 'react-router-dom'; 3 | import RouterView from '../../router/index'; 4 | class Index extends Component { 5 | render() { 6 | let { routes } = this.props; 7 | return ( 8 |
9 | 10 |
11 | 热映 12 | 影院 13 | 我的 14 |
15 | 16 |
17 | ); 18 | } 19 | } 20 | 21 | export default Index; -------------------------------------------------------------------------------- /src/day12/container/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { BrowserRouter, NavLink } from 'react-router-dom'; 3 | import Router from '../router/index.js'; 4 | import Config from '../router/config.js'; 5 | import '../common/style.css'; 6 | class Index extends Component { 7 | render() { 8 | return ( 9 | 10 |
11 |
12 |
13 | 主页 14 | 分类 15 | 我的 16 |
17 |
18 | 19 | ); 20 | } 21 | } 22 | export default Index; -------------------------------------------------------------------------------- /src/day12/router/config.js: -------------------------------------------------------------------------------- 1 | import Home from "../container/home"; 2 | import Type from "../container/type"; 3 | import Input from "../container/home/input"; 4 | import Detail from "../container/home/detail"; 5 | import Mine from "../container/mine" 6 | export default { 7 | routers:[ 8 | { 9 | path:'/', 10 | redirect:'/home' 11 | }, 12 | { 13 | path:'/home', 14 | component:Home 15 | }, 16 | { 17 | path:'/type', 18 | component:Type 19 | }, 20 | { 21 | path:'/input', 22 | component:Input 23 | },{ 24 | path:'/detail/:id', 25 | component:Detail 26 | },{ 27 | path:'/mine', 28 | component:Mine 29 | } 30 | ] 31 | } -------------------------------------------------------------------------------- /src/day8_1/common/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding:0; 3 | margin:0; 4 | list-style: none; 5 | text-decoration: none; 6 | box-sizing: border-box; 7 | } 8 | html,body,#app{ 9 | height: 100%; 10 | width: 100%; 11 | } 12 | .box{ 13 | padding:20px; 14 | } 15 | 16 | .info h3{ 17 | text-align: center; 18 | } 19 | .info p{ 20 | line-height: 50px; 21 | height: 50px; 22 | border-bottom: 1px solid #ccc; 23 | } 24 | .info b{ 25 | display: inline-block; 26 | width: 80px; 27 | text-align: center; 28 | } 29 | .info input{ 30 | border:0; 31 | width: 250px; 32 | height: 27px; 33 | line-height: 27px; 34 | outline: 0; 35 | } 36 | .info button{ 37 | margin:5px 0; 38 | height: 30px; 39 | line-height: 30px; 40 | width: 100%; 41 | outline: 0; 42 | border: 0; 43 | background: skyblue; 44 | color: #fff; 45 | } 46 | .list p{ 47 | float: right; 48 | } -------------------------------------------------------------------------------- /src/day11/router/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Switch,Route,Redirect } from 'react-router-dom'; 3 | class Index extends Component { 4 | render() { 5 | let {routes}=this.props; 6 | let redirects=routes&&routes.length&&routes.filter(v=>v.redirect); 7 | let renderRed=redirects&&redirects.map((v,i)=>( 8 | 9 | )) 10 | return ( 11 | 12 | {routes&&routes.length&&routes.map((v,i)=>{ 13 | if(v.component){ 14 | return { 15 | return 16 | }} key={i}/> 17 | } 18 | }).concat(renderRed)} 19 | 20 | ); 21 | } 22 | } 23 | export default Index; -------------------------------------------------------------------------------- /src/day13/container/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import '../common/style/style.css'; 4 | import axios from 'axios'; 5 | import Cons from './cons'; 6 | class Index extends Component { 7 | render() { 8 | return ( 9 |
10 | 11 |
12 | ); 13 | } 14 | componentDidMount() { 15 | let { updata } = this.props; 16 | axios('./mock/dynamic.json').then(res => { 17 | updata(res.data); 18 | }) 19 | 20 | } 21 | } 22 | let mapStateToProps = (state) => { 23 | return state.UpdateRender 24 | } 25 | let mapDispatchToProps = (dispatch) => { 26 | return { 27 | updata(payload) { 28 | dispatch({ type: 'UPDATA', payload }) 29 | } 30 | } 31 | } 32 | export default connect(mapStateToProps, mapDispatchToProps)(Index); -------------------------------------------------------------------------------- /src/day6/container/reGrandson.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Context from '../common/context'; 3 | class ReGrandson extends Component { 4 | render() { 5 | return ( 6 |
7 | 8 | { 9 | (obj)=>{ 10 | console.log(obj); 11 | return ( 12 |
13 | {obj.data} 14 |
15 | 16 |
17 | ) 18 | } 19 | } 20 | 21 | 22 |
23 | ); 24 | } 25 | } 26 | 27 | export default ReGrandson; -------------------------------------------------------------------------------- /src/day9_1/router/map.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import {Switch,Route,Redirect} from 'react-router-dom'; 3 | 4 | class RouteMap extends Component { 5 | render() { 6 | const {routes}=this.props; 7 | const defaultRoute={ 8 | return 9 | }} key={'redirect'} exact/> 10 | return 11 | { 12 | routes.map((item,index)=>{ 13 | const Comp=item.component; 14 | return { 15 | return () 16 | }} key={index}/> 17 | }).concat([defaultRoute]) 18 | } 19 | 20 | } 21 | } 22 | export default RouteMap; -------------------------------------------------------------------------------- /src/day9/container/child1.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Route } from 'react-router-dom'; 3 | import Xuebi from './xuebi'; 4 | import Kele from './kele'; 5 | import Binghongcha from './binghongcha'; 6 | 7 | class Child1 extends Component { 8 | render() { 9 | return ( 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | ); 19 | } 20 | handlePath = (path) => { 21 | let { push } = this.props.history; 22 | push("/child1/" + path) 23 | } 24 | } 25 | 26 | export default Child1; -------------------------------------------------------------------------------- /src/day12/router/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import {Switch,Redirect,Route} from 'react-router-dom'; 3 | class Router extends Component { 4 | render() { 5 | let {routes}=this.props; 6 | let redirects=routes&&routes.length&&routes.filter(item=>item.redirect); 7 | let redirectRender=redirects&&redirects.length&&redirects.map((v,i)=>( 8 | 9 | )) 10 | return ( 11 | 12 | { 13 | routes&&routes.length&&routes.map((v,i)=>{ 14 | if(v.component){ 15 | return { 16 | return 17 | }} key={i}/> 18 | } 19 | }).concat(redirectRender) 20 | } 21 | 22 | ); 23 | } 24 | } 25 | 26 | export default Router; -------------------------------------------------------------------------------- /src/day14/container/order.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | class Order extends Component { 4 | 5 | render() { 6 | console.log(this.props.list) 7 | return ( 8 |
9 |

{ this.handleMinus() }}>从高到低

10 |

{ this.handlePlus() }}>从低到高

11 |
12 | ); 13 | } 14 | handleMinus = () => { 15 | this.props.list.forEach((v,i)=>{ 16 | console.log(v) 17 | }) 18 | this.props.history.push('/buyCar/content') 19 | } 20 | handlePlus = () => { 21 | this.props.history.push('/buyCar/content') 22 | } 23 | 24 | 25 | } 26 | 27 | const mapStateToProps = (state) => { 28 | return state.List; 29 | } 30 | const mapDispatchToProps = (dispatch) => { 31 | return { 32 | updata(payload) { 33 | dispatch({ type: 'UPDATA', payload }) 34 | } 35 | } 36 | } 37 | export default connect(mapStateToProps, mapDispatchToProps)(Order); -------------------------------------------------------------------------------- /src/day14/router/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import {Switch,Redirect,Route} from 'react-router-dom'; 3 | class RouterView extends Component { 4 | render() { 5 | let {routes}=this.props; 6 | let redirectDom=routes&&routes.length&&routes.filter(item=>item.redirect); 7 | let renderRedirect=redirectDom&&redirectDom.length&&redirectDom.map((v,i)=>( 8 | 9 | )) 10 | return ( 11 | 12 | { 13 | routes&&routes.length&&routes.map((v,i)=>{ 14 | if(v.component){ 15 | return { 16 | return 17 | }} key={i}/> 18 | } 19 | }).concat(renderRedirect) 20 | } 21 | 22 | ); 23 | } 24 | } 25 | 26 | export default RouterView; -------------------------------------------------------------------------------- /src/day10/router/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import {Switch,Route,Redirect} from 'react-router-dom'; 3 | class Router extends Component { 4 | render() { 5 | let {routes}=this.props; 6 | let redirect=routes&&routes.length&&routes.filter(item=>item.redirect); 7 | let redirectComp=redirect&&redirect.length&&redirect.map((v,i)=>( 8 | 9 | )) 10 | return ( 11 | 12 | { 13 | routes.length&&routes.map((v,i)=>{ 14 | if(v.component){ 15 | return { 16 | console.log(componentApi) 17 | return 18 | }} key={i}/> 19 | } 20 | }).concat(redirectComp) 21 | } 22 | 23 | ); 24 | } 25 | } 26 | 27 | export default Router; -------------------------------------------------------------------------------- /src/day8_1/container/list.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class List extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | defaultText: ["添加收获地址+"] 8 | } 9 | } 10 | render() { 11 | let { list, deleteInfo, getInfo } = this.props; 12 | const { defaultText } = this.state; 13 | return ( 14 |
15 | { 16 | list.length ? list.map((v, i) => { 17 | return
18 |

{v.name}

19 | 手机号：{v.phone} 20 | 地址：{v.address} 21 |

{ getInfo(v) }}>修改

22 |

{ deleteInfo(i) }}>删除

23 |
24 | }) :

{defaultText}

25 | 26 | } 27 |
28 | ); 29 | } 30 | } 31 | 32 | export default List; -------------------------------------------------------------------------------- /src/day10/router/config.js: -------------------------------------------------------------------------------- 1 | import Home from '../container/home'; 2 | import Child1 from '../container/child1'; 3 | import Child2 from '../container/child2'; 4 | import One from '../container/one'; 5 | import Two from '../container/two'; 6 | import Mine from '../container/mine'; 7 | export default { 8 | routers: [{ 9 | path: '/', 10 | redirect: '/home' 11 | }, { 12 | path: '/home', 13 | component: Home, 14 | children: [{ 15 | path: '/home/child1', 16 | component: Child1, 17 | children: [{ 18 | path: '/home/child1/one', 19 | component: One 20 | }, { 21 | path: '/home/child1/two', 22 | component: Two 23 | }, { 24 | path: '/home/child1', 25 | redirect: "/home/child1/one" 26 | }] 27 | }, { 28 | path: '/home/child2', 29 | component: Child2 30 | }, { 31 | path: '/home', 32 | redirect: '/home/child1' 33 | }] 34 | }, { 35 | path: '/mine', 36 | component: Mine 37 | }] 38 | } -------------------------------------------------------------------------------- /src/day11/container/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Choose from './choose'; 3 | import City from './city'; 4 | import axios from 'axios'; 5 | import '../common/style.css'; 6 | class Index extends Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | city: {}, 11 | chooseData: ["北京"] 12 | } 13 | } 14 | 15 | render() { 16 | const { city, chooseData } = this.state; 17 | return ( 18 |
19 | 20 | 21 |
22 | ); 23 | } 24 | componentDidMount() { 25 | axios('./mock/city.json').then(res => { 26 | this.setState({ 27 | city: res.data 28 | }) 29 | }) 30 | } 31 | handleClick = (data) => { 32 | this.setState({ 33 | chooseData: Array.from(new Set([...this.state.chooseData, data])) 34 | }, () => { 35 | console.log(this.state.chooseData) 36 | }) 37 | } 38 | } 39 | 40 | export default Index; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /src/day7/container/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Head from './head'; 3 | import Body from './body'; 4 | import Context from '../common/context'; 5 | class Index extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | list: { 10 | '小学': ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'], 11 | '初中': ['初一', '初二', '初三'], 12 | '高中': ['高一', '高二', '高三'], 13 | '大学': ['大一', '大二', '大三', '大四'] 14 | }, 15 | defaultIndex: 0 16 | } 17 | } 18 | render() { 19 | const { list, defaultIndex } = this.state; 20 | return ( 21 |
22 | 23 | 24 | 25 | 26 |
27 | ); 28 | } 29 | handleChange = (i) => { 30 | this.setState({ 31 | defaultIndex: i 32 | }) 33 | } 34 | } 35 | 36 | export default Index; -------------------------------------------------------------------------------- /src/day6/container/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Child from './child1'; 3 | import Child2 from './child2'; 4 | import Context from '../common/context'; 5 | class Index extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state={ 9 | data:'我是子组件中要显示的数据' 10 | } 11 | } 12 | 13 | render() { 14 | return ( 15 |
16 | 17 | 18 | 19 | 20 | 21 |
22 | ); 23 | } 24 | changeChild=()=>{ 25 | this.setState({ 26 | data:'我是被父组件修改的' 27 | }) 28 | } 29 | changeContext=()=>{ 30 | this.setState({ 31 | data:'我是通过context修改的' 32 | }) 33 | } 34 | changeData=(data)=>{ 35 | this.setState({ 36 | data 37 | }) 38 | } 39 | } 40 | 41 | export default Index; -------------------------------------------------------------------------------- /src/day8_1/container/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import List from './list'; 3 | import SetInfo from './setInfo'; 4 | import '../common/style.css'; 5 | let arr = []; 6 | class Index extends Component { 7 | 8 | constructor(props) { 9 | super(props); 10 | this.state = { 11 | list: [], 12 | setInfo:{} 13 | } 14 | } 15 | 16 | render() { 17 | let { list,setInfo } = this.state; 18 | return ( 19 |
20 | 21 | 22 |
23 | ); 24 | } 25 | deleteInfo=(idx)=>{ 26 | console.log(idx); 27 | let {list}=this.state; 28 | list.splice(idx,1) 29 | this.setState({ 30 | list 31 | }) 32 | } 33 | saveInfo = (obj) => { 34 | arr.push(obj) 35 | this.setState({ 36 | list: arr 37 | }) 38 | } 39 | getInfo = (val) => { 40 | this.setState({ 41 | setInfo:val 42 | }) 43 | } 44 | } 45 | 46 | export default Index; -------------------------------------------------------------------------------- /src/day11/container/city.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class City extends Component { 4 | render() { 5 | const { city } = this.props; 6 | return ( 7 |
8 | { 9 | city && Object.keys(city).map(v => ( 10 |
11 |

{v}

12 | { 13 | city[v].map((item,i)=>{ 14 | return this.handleChange(item.name)} key={i} className="city">{item.name} 15 | }) 16 | } 17 |
18 | )) 19 | } 20 |
21 | ); 22 | 23 | } 24 | handleChange=(item)=>{ 25 | const { handleClick } = this.props; 26 | const spans=document.querySelectorAll('.myCity>span'); 27 | // spans.forEach((v,i)=>{ 28 | 29 | // console.log(v.firstChild) 30 | // }) 31 | // spans[item].classList.add('active') 32 | handleClick(item); 33 | } 34 | } 35 | 36 | export default City; -------------------------------------------------------------------------------- /src/day9_1/container/taopiaopiao/hotChild1.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import axios from 'axios'; 3 | class HotChild1 extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | data: [] 8 | } 9 | } 10 | render() { 11 | const { data } = this.state; 12 | return ( 13 |
14 | {data&&data.map((v,i)=>{ 15 | return
this.jump(v,v.id)} key={i}> 16 |
17 |

{v.nm}

淘票票评分:{v.sc}

18 |

主演:{v.star}

19 |

{v.showInfo}

20 |
21 | })} 22 |
23 | ); 24 | } 25 | componentDidMount() { 26 | this.getList(); 27 | } 28 | getList=()=>{ 29 | axios.get('./mock/data.json') 30 | .then((res) => { 31 | this.setState({ 32 | data: res.data 33 | }) 34 | }) 35 | } 36 | jump=(v,id)=>{ 37 | this.props.history.push({pathname:"/detail/"+id,params:v}) 38 | } 39 | } 40 | 41 | export default HotChild1; 42 | -------------------------------------------------------------------------------- /src/day9_1/container/taopiaopiao/hotChild2.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import axios from 'axios'; 3 | class HotChild2 extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | data: [] 8 | } 9 | } 10 | render() { 11 | const { data } = this.state; 12 | return ( 13 |
14 | {data&&data.map((v,i)=>{ 15 | return
this.jump(v,v.id)} key={i}> 16 |
17 |

{v.nm}

淘票票评分:{v.sc}

18 |

主演:{v.star}

19 |

{v.showInfo}

20 |
21 | })} 22 |
23 | ); 24 | } 25 | componentDidMount() { 26 | this.getList(); 27 | } 28 | getList=()=>{ 29 | axios.get('./mock/data2.json') 30 | .then((res) => { 31 | this.setState({ 32 | data: res.data 33 | }) 34 | }) 35 | } 36 | jump=(v,id)=>{ 37 | this.props.history.push({pathname:"/detail/"+id,params:v}) 38 | } 39 | } 40 | 41 | export default HotChild2; 42 | -------------------------------------------------------------------------------- /src/day13/common/style/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | text-decoration: none; 6 | box-sizing: border-box; 7 | } 8 | 9 | html, 10 | body, 11 | #root, 12 | .box, 13 | .wrap { 14 | height: 100%; 15 | width: 100%; 16 | } 17 | 18 | .box { 19 | /**/ 20 | } 21 | 22 | .box>p { 23 | height: 44px; 24 | line-height: 44px; 25 | text-align: center; 26 | border-bottom: 1px solid #ccc; 27 | } 28 | 29 | .names { 30 | padding: 5px 20px; 31 | } 32 | 33 | .name, 34 | .else { 35 | display: flex; 36 | justify-content: space-between; 37 | padding: 5px 20px; 38 | } 39 | 40 | .cons { 41 | padding: 10px 20px; 42 | } 43 | 44 | .else { 45 | border-bottom: 1px solid #ccc; 46 | } 47 | 48 | .active { 49 | color: red; 50 | } 51 | 52 | .comment { 53 | width: 100%; 54 | position: fixed; 55 | left: 0; 56 | bottom: 0; 57 | height: 40px; 58 | } 59 | 60 | .comment>input { 61 | height: 42px; 62 | width: 67%; 63 | padding-left: 20px; 64 | outline: 0; 65 | border: 0; 66 | } 67 | 68 | .comment>span { 69 | display: inline-block; 70 | font-size: 12px; 71 | text-align: center; 72 | width: 16%; 73 | } 74 | 75 | .comment>button { 76 | width: 16%; 77 | height: 40px; 78 | outline: 0; 79 | border: 0; 80 | } -------------------------------------------------------------------------------- /src/day12/container/home/input.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Input extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | flag: false, 8 | value:'' 9 | } 10 | } 11 | 12 | render() { 13 | let {flag,value}=this.state; 14 | return ( 15 |
16 | 17 | {flag?

18 | × 19 | √ 20 |

:''} 21 |
22 | ); 23 | } 24 | handleChange = (e) => { 25 | if (e.target.value) { 26 | this.setState({ 27 | flag: true, 28 | value:e.target.value 29 | }) 30 | } 31 | } 32 | handleClear=()=>{ 33 | this.setState({ 34 | value:'' 35 | }) 36 | } 37 | handleBack=()=>{ 38 | this.props.history.push({ 39 | params:this.state.value, 40 | pathname:'/home' 41 | }) 42 | // this.props.history.goBack() 43 | } 44 | } 45 | 46 | export default Input; -------------------------------------------------------------------------------- /src/day9_1/common/css/reset.css: -------------------------------------------------------------------------------- 1 | body, 2 | h1, 3 | h2, 4 | h3, 5 | h4, 6 | p, 7 | ul, 8 | ol, 9 | dl, 10 | dd, 11 | textarea, 12 | button { 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | li { 18 | list-style: none; 19 | } 20 | 21 | body, 22 | h1, 23 | h2, 24 | h3, 25 | h4, 26 | h5, 27 | h6, 28 | p, 29 | ul, 30 | ol, 31 | li, 32 | dl, 33 | dt, 34 | dd, 35 | a, 36 | textarea, 37 | input, 38 | button, 39 | span, 40 | em, 41 | strong, 42 | img, 43 | div { 44 | -webkit-touch-callout: none; 45 | -moz-touch-callout: none; 46 | -ms-touch-callout: none; 47 | touch-callout: none; 48 | -webkit-tap-highlight-color: transparent; 49 | -moz-tap-highlight-color: transparent; 50 | -ms-tap-highlight-color: transparent; 51 | tap-highlight-color: transparent; 52 | } 53 | 54 | input[type=text], 55 | input[type=button], 56 | input[type=password], 57 | input[type=telphone], 58 | input[type=search], 59 | textarea, 60 | button { 61 | outline: 0 none; 62 | -webkit-appearance: none; 63 | } 64 | 65 | textarea { 66 | resize: none; 67 | } 68 | 69 | img { 70 | border: none; 71 | } 72 | 73 | a { 74 | text-decoration: none; 75 | } 76 | 77 | html { 78 | font-size:625%; 79 | -webkit-text-size-adjust: 100%; 80 | -moz-text-size-adjust: 100%; 81 | -ms-text-size-adjust: 100%; 82 | text-size-adjust: 100%; 83 | } 84 | 85 | /*# sourceMappingURL=reset.css.map */ 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /src/day12/container/home/detail.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { withRouter } from 'react-router-dom'; 3 | import axios from 'axios'; 4 | class Detail extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | data: [] 9 | } 10 | } 11 | render() { 12 | const { data } = this.state; 13 | const id = this.props.match.params.id; 14 | const newList = data.filter(item => { 15 | return item.id === parseInt(id) 16 | }) 17 | return ( 18 |
19 | {newList.length && ( 20 |
21 | 22 |

{newList[0].nm}

23 |

买家评分:{newList[0].sc}

24 |

已购{newList[0].wish}件

25 |

价格：{newList[0].id}元

26 |
27 | ) 28 | } 29 |
30 | ); 31 | } 32 | 33 | componentDidMount() { 34 | this.getList(); 35 | } 36 | getList = () => { 37 | axios.get('../mock/data.json') 38 | .then((res) => { 39 | this.setState({ 40 | data: res.data 41 | }) 42 | }) 43 | 44 | 45 | } 46 | } 47 | 48 | export default withRouter(Detail); -------------------------------------------------------------------------------- /src/day9_1/router/config.jsx: -------------------------------------------------------------------------------- 1 | import App from '../container/taopiaopiao/index.jsx'; 2 | import Hot from '../container/taopiaopiao/hot.jsx'; 3 | import Cinema from '../container/taopiaopiao/cinema.jsx'; 4 | import Mine from '../container/taopiaopiao/mine.jsx'; 5 | import HotChild1 from '../container/taopiaopiao/hotChild1.jsx'; 6 | import HotChild2 from '../container/taopiaopiao/hotChild2.jsx'; 7 | import Detail from '../container/taopiaopiao/detail.jsx'; 8 | const routes = [{ 9 | path: '/app', 10 | component: App, 11 | children: [{ 12 | path: '/app/hot', 13 | component: Hot, 14 | 15 | children: [{ 16 | path: '/app/hot/hotChild1', 17 | component: HotChild1 18 | 19 | }, { 20 | path: '/app/hot/hotChild2', 21 | component: HotChild2 22 | }] 23 | }, 24 | { 25 | path: '/app/cinema', 26 | component: Cinema 27 | }, 28 | { 29 | path: '/app/mine', 30 | component: Mine 31 | }], 32 | 33 | // }, { 34 | // path: '/shopCar', 35 | // component: ShopCar 36 | // }, { 37 | // path: '/meituan', 38 | // component: Meituan 39 | // }, { 40 | // path: '/goodsList', 41 | // component: GoodsList 42 | // }, { 43 | // path: '/mtdetail:id', 44 | // component: Mtdetail 45 | }, { 46 | path: "/detail/:id", 47 | component: Detail 48 | }]; 49 | export default routes; -------------------------------------------------------------------------------- /src/day15/common/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | text-decoration: none; 6 | box-sizing: border-box; 7 | } 8 | 9 | html, 10 | body, 11 | #app { 12 | height: 100%; 13 | width: 100%; 14 | } 15 | .box>h4{ 16 | background: red; 17 | height: 44px; 18 | width: 100%; 19 | color: #f5f5f5; 20 | text-align: center; 21 | line-height: 44px; 22 | } 23 | .allIpt { 24 | margin: 10px; 25 | } 26 | 27 | .list dl { 28 | height: 100px; 29 | background: #f5f5f5; 30 | margin: 5px; 31 | display: flex; 32 | padding-left: 30px; 33 | } 34 | 35 | .goods { 36 | position: relative; 37 | } 38 | 39 | .ipt { 40 | position: absolute; 41 | top: 43px; 42 | left: 20px; 43 | } 44 | 45 | .list span { 46 | display: inline-block; 47 | height: 80px; 48 | width: 80px; 49 | background: saddlebrown; 50 | margin: 10px; 51 | text-align: center; 52 | line-height: 80px; 53 | } 54 | 55 | .list dt { 56 | padding: 20px; 57 | } 58 | 59 | .sum { 60 | position: fixed; 61 | left: 0; 62 | bottom: 0; 63 | text-align: right; 64 | padding-right: 20px; 65 | height: 50px; 66 | width: 100%; 67 | background: red; 68 | line-height: 50px; 69 | display: flex; 70 | justify-content: space-around; 71 | } 72 | 73 | .list b { 74 | display: inline-block; 75 | height: 30px; 76 | width: 30px; 77 | background: red; 78 | text-align: center; 79 | line-height: 30px; 80 | } -------------------------------------------------------------------------------- /src/day9/container/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { BrowserRouter, Route ,Redirect} from "react-router-dom"; 3 | import Child1 from './child1'; 4 | import Child2 from './child2'; 5 | class Index extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | iptVal: "默认值" 10 | } 11 | } 12 | render() { 13 | return ( 14 | 15 |
16 | } exact /> 17 | 18 | 19 | {/*
20 | 21 | 22 |
*/} 23 |
24 | 25 | 26 | ); 27 | } 28 | handleChange = (e) => { 29 | this.setState({ 30 | iptVal: e.target.value 31 | }) 32 | } 33 | handleRoute=(route)=>{ 34 | console.log(route.match) 35 | return [, 36 | ] 37 | 38 | } 39 | 40 | } 41 | 42 | export default Index; -------------------------------------------------------------------------------- /src/day9_1/container/taopiaopiao/detail.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { withRouter } from 'react-router-dom'; 3 | import axios from 'axios'; 4 | class Detail extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | data: [] 9 | } 10 | } 11 | render() { 12 | const { data } = this.state; 13 | const id = this.props.match.params.id; 14 | const newList = data.filter(item => { 15 | return item.id === parseInt(id) 16 | }) 17 | 18 | console.log(newList) 19 | return ( 20 |
21 | {newList.length && ( 22 |
23 | 24 |

{newList[0].nm}

25 |

上映时间：{newList[0].showInfo}

26 |

主演：{newList[0].star}

27 |

淘票票评分:{newList[0].sc}

28 |

{newList[0].showInfo}

29 |
30 | ) 31 | } 32 |
33 | ); 34 | } 35 | 36 | componentDidMount() { 37 | this.getList(); 38 | } 39 | getList = () => { 40 | axios.get('./mock/data.json') 41 | .then((res) => { 42 | this.setState({ 43 | data: res.data 44 | }) 45 | }) 46 | 47 | 48 | } 49 | } 50 | 51 | export default withRouter(Detail); -------------------------------------------------------------------------------- /src/day7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 25 | React App 26 | 27 | 28 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/day10/common/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | text-decoration: none; 6 | box-sizing: border-box; 7 | } 8 | 9 | html, 10 | body, 11 | #root, 12 | .box, 13 | .home { 14 | height: 100%; 15 | width: 100%; 16 | } 17 | a{ 18 | color:#fff; 19 | } 20 | .home{ 21 | display: flex; 22 | } 23 | .left { 24 | height: 100%; 25 | width: 25%; 26 | background: blue; 27 | text-align: center; 28 | } 29 | .left li{ 30 | height: 40px; 31 | border-bottom: 1px solid #ccc; 32 | line-height: 40px; 33 | } 34 | .right{ 35 | height: 100%; 36 | width: 75%; 37 | background: #fff; 38 | } 39 | .child1 p{ 40 | height: 40px; 41 | line-height: 40px; 42 | background: red; 43 | display: flex; 44 | justify-content: space-around; 45 | } 46 | 47 | .mine h3 { 48 | text-align: center; 49 | color: #f00; 50 | padding: 20px 0; 51 | } 52 | .mine p>input { 53 | height: 50px; 54 | width: 96%; 55 | outline: 0; 56 | padding-left: 20px; margin-left: 2%; 57 | } 58 | 59 | .mine button { 60 | border: 0; 61 | outline: 0; 62 | border: 1px solid #f00; 63 | border-radius: 5px; 64 | background: red; 65 | color: #fff; 66 | height: 40px; 67 | width: 96%; 68 | margin-left: 2%; 69 | margin-top: 20px; 70 | } 71 | 72 | .else { 73 | display: flex; 74 | justify-content: space-between; 75 | padding: 10px; 76 | color: #f00; 77 | } 78 | 79 | .phone { 80 | font-size: 14px; 81 | color: #ccc; 82 | text-align: center; 83 | } 84 | 85 | footer { 86 | position: fixed; 87 | bottom: 0; 88 | left: 0; 89 | display: flex; 90 | justify-content: space-around; 91 | height: 50px; 92 | background: #f00; 93 | width: 100%; 94 | line-height: 50px; 95 | } 96 | footer a{ 97 | color: #fff; 98 | } -------------------------------------------------------------------------------- /src/day8_1/container/setInfo.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | let i = 0; 3 | class SetInfo extends Component { 4 | 5 | render() { 6 | return ( 7 |
8 |

收获地址

9 |

收货人

10 |

联系电话

11 |

详细地址

12 | 13 |
14 | ); 15 | } 16 | 17 | componentWillReceiveProps(nextProps) { 18 | let { list } = this.props; 19 | if ((nextProps.setInfo.name && nextProps.setInfo.phone && nextProps.setInfo.address) !== undefined) { 20 | this.refs.name.value = nextProps.setInfo.name; 21 | this.refs.phone.value = nextProps.setInfo.phone; 22 | this.refs.address.value = nextProps.setInfo.address; 23 | // for (let t = 0, len = list.length; t < len; t++) { 24 | // if (list[t].id === nextProps.setInfo.id) { 25 | // list[i] = nextProps.setInfo 26 | // } 27 | // } 28 | } 29 | // for (let t = 0, len = list.length; t < len; t++) { 30 | // if (list[t].id === nextProps.setInfo.id) { 31 | // list[i] = nextProps.setInfo 32 | // } 33 | // } 34 | } 35 | 36 | handleInFo = () => { 37 | let nameVal = this.refs.name.value; 38 | let phoneVal = this.refs.phone.value; 39 | let addressVal = this.refs.address.value; 40 | this.props.saveInfo({ name: nameVal, phone: phoneVal, address: addressVal, id: i++ }); 41 | this.refs.name.value = ""; 42 | this.refs.phone.value = ""; 43 | this.refs.address.value = ""; 44 | } 45 | 46 | } 47 | 48 | export default SetInfo; -------------------------------------------------------------------------------- /src/day12/container/mine/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | let mine; 3 | class Mine extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | mines: '' 8 | } 9 | } 10 | 11 | render() { 12 | let { mines } = this.state; 13 | return ( 14 |
15 |

主页

16 | { 17 | mines ? 18 | (
19 |

用户名:{mines}

20 |

账号：{mines}

21 |
) : 22 | (
23 |

登陆

24 |
25 |

26 |

27 |
28 | 29 | 30 |

立即注册找回密码

31 |

猫眼电影 客服电话：400-456-12345

32 |
) 33 | } 34 |
35 | ); 36 | } 37 | componentDidMount() { 38 | this.info() 39 | } 40 | handleLogin = () => { 41 | let nameVal = this.refs.name.value; 42 | localStorage.setItem('mine', nameVal); 43 | this.info() 44 | } 45 | info() { 46 | mine = localStorage.getItem('mine'); 47 | this.setState({ 48 | mines: mine 49 | }) 50 | } 51 | } 52 | 53 | export default Mine; -------------------------------------------------------------------------------- /src/day9_1/container/taopiaopiao/mine.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | let mine; 3 | class Mine extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | mines: '' 8 | } 9 | } 10 | 11 | render() { 12 | let { mines } = this.state; 13 | return ( 14 |
15 |

主页

16 | { 17 | mines ? 18 | (
19 |

用户名:{mines}

20 |

账号：{mines}

21 |
) : 22 | (
23 |

登陆

24 |
25 |

26 |

27 |
28 | 29 | 30 |

立即注册找回密码

31 |

猫眼电影 客服电话：400-456-12345

32 |
) 33 | } 34 |
35 | ); 36 | } 37 | componentDidMount() { 38 | this.info() 39 | } 40 | handleLogin = () => { 41 | let nameVal = this.refs.name.value; 42 | localStorage.setItem('mine', nameVal); 43 | this.info() 44 | } 45 | info() { 46 | mine = localStorage.getItem('mine'); 47 | this.setState({ 48 | mines: mine 49 | }, () => { 50 | console.log(this.state.mines) 51 | }) 52 | } 53 | } 54 | 55 | export default Mine; -------------------------------------------------------------------------------- /src/day14/container/content.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import axios from 'axios'; 3 | import {connect} from 'react-redux'; 4 | import '../mock/carClass'; 5 | class BuyCar extends Component { 6 | // constructor(props) { 7 | // super(props); 8 | // this.state = { 9 | // carList: [] 10 | // } 11 | // } 12 | 13 | render() { 14 | let {list}=this.props; 15 | console.log(list) 16 | return ( 17 |
18 |

{ 19 | this.props.history.push('/buyCar/order') 20 | }}>排序

21 |
22 | { 23 | list.length && list.map(v => { 24 | return v.map((item,i) => { 25 | return (
26 |

{item.carClass}

27 |
    28 | { 29 | item.carList.map((val,idx)=>{ 30 | return ( 31 |
  • {val.carName}{val.price}
    • 32 | ) 33 | }) 34 | } 35 | 36 |
37 |
) 38 | } 39 | ) 40 | }) 41 | } 42 |
43 |
44 | ); 45 | } 46 | componentDidMount() { 47 | this.carData() 48 | } 49 | carData() { 50 | let {updata}=this.props; 51 | axios.get('/carList').then(res => { 52 | updata(res.data.data) 53 | }) 54 | } 55 | } 56 | const mapStateToProps = (state) => { 57 | return state.List; 58 | } 59 | const mapDispatchToProps = (dispatch) => { 60 | return { 61 | updata(payload) { 62 | dispatch({ type: 'UPDATA', payload }) 63 | } 64 | } 65 | } 66 | export default connect(mapStateToProps,mapDispatchToProps)(BuyCar); -------------------------------------------------------------------------------- /src/day7/index_2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | 14 | 79 | 80 | -------------------------------------------------------------------------------- /src/day12/common/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | text-decoration: none; 6 | box-sizing: border-box; 7 | } 8 | 9 | html, 10 | body, 11 | #root, 12 | .type, 13 | .home { 14 | height: 100%; 15 | width: 100%; 16 | } 17 | 18 | .ipt { 19 | position: relative; 20 | } 21 | 22 | .home input, 23 | .ipt input { 24 | height: 30px; 25 | width: 90%; 26 | margin-left: 5%; 27 | border-radius: 15px; 28 | outline: 0; 29 | border: 0; 30 | margin-top: 10px; 31 | background: #eee; 32 | padding-left: 20px; 33 | } 34 | 35 | .listItem { 36 | margin-bottom: 50px; 37 | 38 | } 39 | 40 | .listItem dl { 41 | display: flex; 42 | 43 | } 44 | 45 | .listItem dt { 46 | margin: 10px; 47 | } 48 | 49 | .listItem img { 50 | height: 110px; 51 | width: 110px; 52 | margin: 10px; 53 | } 54 | 55 | .listItem dt>p, 56 | .songList { 57 | text-align: left; 58 | } 59 | 60 | .btn { 61 | top: 15px; 62 | right: 15px; 63 | position: absolute; 64 | height: 20px; 65 | width: 60px; 66 | } 67 | 68 | .btn span { 69 | margin-right: 5px; 70 | display: inline-block; 71 | height: 20px; 72 | line-height: 20px; 73 | width: 20px; 74 | text-align: center; 75 | background: #ccc; 76 | border-radius: 50%; 77 | overflow: hidden; 78 | } 79 | 80 | .detailData img { 81 | width: 100%; 82 | } 83 | .type h4{ 84 | padding:10px; 85 | } 86 | .typeList { 87 | background: #f1f1f1; 88 | display: flex; 89 | width: 100%; 90 | flex-wrap: wrap; 91 | padding:10px 0; 92 | } 93 | 94 | .typeList dl { 95 | width: 25%; 96 | text-align: center; 97 | } 98 | .sort{ 99 | margin-top: 10px; 100 | display: flex; 101 | justify-content: space-around; 102 | } 103 | 104 | .mine { 105 | height: 100%; 106 | width: 100%; 107 | } 108 | 109 | .mine h3 { 110 | text-align: center; 111 | color: #f00; 112 | margin: 20px 0; 113 | } 114 | /* 115 | .mine p { 116 | text-align: center; 117 | margin: 2px; 118 | 119 | } */ 120 | .mine h4{ 121 | height: 44px; 122 | line-height: 44px; 123 | text-align: center; 124 | background: red; 125 | color: #fff; 126 | } 127 | .mine p>input { 128 | height: 50px; 129 | width: 96%; 130 | /* border: 0; */ 131 | /* border-radius: 5px; */ 132 | outline: 0; 133 | padding-left: 20px; 134 | } 135 | 136 | .mine button { 137 | border: 0; 138 | outline: 0; 139 | border: 1px solid #f00; 140 | border-radius: 5px; 141 | background: red; 142 | color: #fff; 143 | height: 40px; 144 | width: 96%; 145 | margin-left: 2%; 146 | margin-top: 20px; 147 | } 148 | 149 | .else { 150 | display: flex; 151 | justify-content: space-between; 152 | padding: 10px; 153 | color: #f00; 154 | } 155 | 156 | .phone { 157 | font-size: 14px; 158 | color: #ccc; 159 | } 160 | 161 | footer { 162 | position: fixed; 163 | bottom: 0; 164 | left: 0; 165 | display: flex; 166 | justify-content: space-around; 167 | height: 50px; 168 | background: #f00; 169 | width: 100%; 170 | line-height: 50px; 171 | } 172 | 173 | footer a { 174 | color: #fff; 175 | } -------------------------------------------------------------------------------- /src/day9_1/container/taopiaopiao/cinema.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import axios from 'axios'; 3 | let arr2; 4 | let arr1; 5 | class Cinema extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | data: [], 10 | search: [] 11 | } 12 | } 13 | render() { 14 | const { data, search } = this.state; 15 | console.log(data) 16 | return ( 17 |
18 |

影院

19 |
20 | 21 | 22 |
23 |
离我最近价钱最低
24 |
25 | {data && data.length && data.map(v => ( 26 |
27 |

{v.nm}

28 |

地址：{v.addr}

29 |

距离：{v.distance}

30 |

人均：{v.sellPrice}

31 |
32 | ))} 33 |
34 |
    { 35 | search && search.length ? search.map((v, i) => ( 36 |
  • {v.nm}
    • 37 | )) : '' 38 | } 39 | 40 |
41 |
42 | ); 43 | } 44 | componentDidMount() { 45 | this.getList(); 46 | } 47 | getList = () => { 48 | axios.get('./mock/cinema.json') 49 | .then((res) => { 50 | this.setState({ 51 | data: res.data 52 | }) 53 | }) 54 | } 55 | handleChange = (e) => { 56 | if (!e.target.value) { 57 | (this.setState({ 58 | search: [] 59 | })) 60 | } 61 | } 62 | handleSearch = () => { 63 | let { data } = this.state; 64 | let word = this.refs.search.value; 65 | let len = data.length; 66 | let arr = []; 67 | let reg = new RegExp(word); 68 | for (var i = 0; i < len; i++) { 69 | if (data[i].nm.match(reg)) { 70 | arr.push(data[i]); 71 | this.setState({ 72 | search: arr 73 | }) 74 | } 75 | } 76 | } 77 | handleDistance = () => { 78 | const { data } = this.state; 79 | arr1=data; 80 | arr1.sort(this.sortDistance) 81 | console.log(arr1) 82 | this.setState({ 83 | data:arr1 84 | }) 85 | } 86 | sortDistance(a, b) { 87 | return a.distance - b.distance 88 | } 89 | handleMoney = () => { 90 | const { data } = this.state; 91 | arr2=data; 92 | arr2.sort(this.sortMoney) 93 | console.log(arr2) 94 | this.setState({ 95 | data:arr2 96 | }) 97 | } 98 | sortMoney(a, b) { 99 | return a.sellPrice - b.sellPrice 100 | } 101 | } 102 | 103 | export default Cinema; -------------------------------------------------------------------------------- /src/day8/container/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Detail from './detail'; 4 | import Children from './children'; 5 | class Index extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state={ 9 | data: "我是更新前的数据" 10 | } 11 | } 12 | static defaultProps = { 13 | arr: [1, 3, 5, 7, 9], 14 | obj: { name: "liangyuan", age: "19" }, 15 | bool: true, 16 | func: () => { return 123 }, 17 | num: 333, 18 | str: "liangyuan", 19 | anything: "anything", 20 | ele: 元素, 21 | enums: 'my', 22 | types: { sometype: "sometype" }, 23 | arrType: [2, 4, 6, 8, 0], 24 | objType: { age: 19 }, 25 | style: { color: "red", fontSize: 18 }, 26 | any: 1999, 27 | // symbol:"." 28 | 29 | } 30 | static propTypes = { 31 | arr: PropTypes.array,//数组 32 | obj: PropTypes.object.isRequired,//对象(不能为空) 33 | bool: PropTypes.bool,//布尔值 34 | func: PropTypes.func,//函数 35 | num: PropTypes.number,//数组 36 | str: PropTypes.string,//字符串 37 | anything: PropTypes.node,//任意被渲染的事物 38 | ele: PropTypes.element,//元素 39 | enums: PropTypes.oneOf(['my', 'name', 'is', 'liangyuan']),//特定的值的任意一个 40 | types: PropTypes.oneOfType([ 41 | PropTypes.array, 42 | PropTypes.object, 43 | PropTypes.number 44 | ]),//指定类型的任意一种 45 | arrType: PropTypes.arrayOf(PropTypes.number),//指定类型组成的数组 46 | objType: PropTypes.objectOf(PropTypes.number),//制定类型组成的对象 47 | style: PropTypes.shape({ 48 | color: PropTypes.string, 49 | fontSize: PropTypes.number 50 | }), 51 | any: PropTypes.any.isRequired,//不为空的任意类型 52 | // symbol:PropTypes.symbol 53 | } 54 | render() { 55 | const { arr, str, num, bool, obj, func, anything, ele, enums, types, arrType, objType, style, any } = this.props; 56 | console.log("bool", bool) 57 | return ( 58 |
59 |

arr:{arr}

60 |

str:{str}

61 |

num:{num}

62 |

obj:{obj.name} {obj.age}

63 |

func:{func()}

64 |

bool:{bool ? 'true' : 'false'}

65 |

anything:{anything}

66 |

ele:{ele}

67 |

enum:{enums}

68 |

types:{types.sometype}

69 |

arrType:{arrType}

70 |

objType:{objType.age}

71 |

style:颜色：{style.color}字体大小：{style.fontSize}px

72 |

any:{any}

73 | 74 |

1

75 |

2

76 |

3

77 | { 78 | // (num)=>{ 79 | // return num 80 | // } 81 | } 82 | 83 | 84 | 91 |
92 | ); 93 | } 94 | } 95 | 96 | export default Index; -------------------------------------------------------------------------------- /src/day9_1/common/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | list-style: none; 6 | text-decoration: none; 7 | } 8 | 9 | html, 10 | body, 11 | #root, 12 | #App, 13 | section, 14 | .box { 15 | height: 100%; 16 | width: 100%; 17 | } 18 | 19 | .active { 20 | color: #31c27c !important; 21 | } 22 | 23 | .box { 24 | height: 100%; 25 | display: flex; 26 | margin-bottom: 50px; 27 | } 28 | 29 | .body { 30 | flex: 1; 31 | } 32 | 33 | nav { 34 | height: 45px; 35 | width: 100%; 36 | line-height: 45px; 37 | display: flex; 38 | justify-content: space-around; 39 | } 40 | 41 | .listItem dl { 42 | display: flex; 43 | 44 | } 45 | 46 | .listItem dt { 47 | margin: 10px; 48 | } 49 | 50 | .listItem img { 51 | height: 110px; 52 | width: 110px; 53 | margin: 10px; 54 | } 55 | 56 | .listItem dt>p, 57 | .songList { 58 | text-align: left; 59 | } 60 | 61 | .listItem dt>p { 62 | font-size: 16px; 63 | font-weight: bold; 64 | line-height: 19px; 65 | } 66 | 67 | .detailData img { 68 | width: 100%; 69 | } 70 | 71 | .mine { 72 | height: 100%; 73 | width: 100%; 74 | } 75 | 76 | .mine h3 { 77 | text-align: center; 78 | color: #f00; 79 | margin: 20px 0; 80 | } 81 | /* 82 | .mine p { 83 | text-align: center; 84 | margin: 2px; 85 | 86 | } */ 87 | 88 | .mine p>input { 89 | height: 50px; 90 | width: 96%; 91 | /* border: 0; */ 92 | /* border-radius: 5px; */ 93 | outline: 0; 94 | padding-left: 20px; 95 | } 96 | 97 | .mine button { 98 | border: 0; 99 | outline: 0; 100 | border: 1px solid #f00; 101 | border-radius: 5px; 102 | background: red; 103 | color: #fff; 104 | height: 40px; 105 | width: 96%; 106 | margin-left: 2%; 107 | margin-top: 20px; 108 | } 109 | 110 | .else { 111 | display: flex; 112 | justify-content: space-between; 113 | padding: 10px; 114 | color: #f00; 115 | } 116 | 117 | .phone { 118 | font-size: 14px; 119 | color: #ccc; 120 | } 121 | 122 | .cinema { 123 | width: 100%; 124 | height: 100%; 125 | } 126 | 127 | .cinema h3,.mine h4 { 128 | height: 40px; 129 | background: #f00; 130 | color: #fff; 131 | text-align: center; 132 | line-height: 40px; 133 | } 134 | 135 | .search { 136 | height: 40px; 137 | width: 100%; 138 | background: #31c27c; 139 | 140 | 141 | } 142 | 143 | .search input, 144 | .search button { 145 | height: 40px; 146 | outline: 0; 147 | 148 | } 149 | 150 | .search input { 151 | 152 | width: 80%; 153 | } 154 | 155 | .search button { 156 | width: 20%; 157 | } 158 | .cinameList{ 159 | padding:5px; 160 | } 161 | .cinameList>div { 162 | height: 120px; 163 | background: #f4f4f4; 164 | padding:5px; 165 | margin:2px 0; 166 | } 167 | .cinameList p{ 168 | font-size: 13px; 169 | padding:5px 0; 170 | } 171 | .searchList{ 172 | width: 80%; 173 | background: #fff; 174 | position: fixed; 175 | top:85px; 176 | left: 0; 177 | 178 | } 179 | .searchList li{ 180 | height: 30px; 181 | line-height: 30px; 182 | padding-left: 10px; 183 | } 184 | .sort{ 185 | display: flex; 186 | justify-content: space-around; 187 | } 188 | footer { 189 | height: 50px; 190 | line-height: 50px; 191 | display: flex; 192 | background: #f5f5f5; 193 | justify-content: space-around; 194 | position: fixed; 195 | bottom: 0; 196 | left: 0; 197 | width: 100%; 198 | } -------------------------------------------------------------------------------- /src/day12/container/home/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import axios from 'axios'; 3 | class Home extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | data: [], 8 | flag: false, 9 | value: '', 10 | 11 | } 12 | } 13 | render() { 14 | const { data, value, flag } = this.state; 15 | return ( 16 |
17 |
18 |

this.props.history.push('/input')}> 19 | 20 |

21 | {flag ?

22 | × 23 | √ 24 |

: ''} 25 |
26 | 27 |
28 | { 29 | data && data.map((v, i) => { 30 | return
this.jump(v, v.id)} key={i}> 31 |
32 |
33 |

{v.nm}

34 |

买家评分:{v.sc}

35 |

已购{v.wish}件

36 |

价格：{v.id}元

37 |
38 |
39 | }) 40 | } 41 |
42 |
43 | ); 44 | } 45 | componentDidMount() { 46 | this.getList(); 47 | if (this.props.location.params) { 48 | this.setState({ 49 | flag: true, 50 | value: this.props.location.params 51 | }) 52 | // if (this.props.location.params2 && this.props.location.params2.length) { 53 | // this.setState({ 54 | // data: this.props.location.params2 55 | // }) 56 | // } 57 | } 58 | console.log(this.props) 59 | } 60 | componentWillReceiveProps(nextProps){ 61 | this.getList2(); 62 | } 63 | getList = () => { 64 | axios.get('./mock/data2.json') 65 | .then((res) => { 66 | this.setState({ 67 | data: res.data 68 | }) 69 | }) 70 | } 71 | getList2=()=>{ 72 | if (this.props.location.params) { 73 | this.setState({ 74 | flag: true, 75 | value: this.props.location.params 76 | }) 77 | if (this.props.location.params2 && this.props.location.params2.length) { 78 | this.setState({ 79 | data: this.props.location.params2 80 | }) 81 | } 82 | } 83 | } 84 | jump = (v, id) => { 85 | this.props.history.push({ pathname: "/detail/" + id, params: v }) 86 | } 87 | handleClear = () => { 88 | axios.get('./mock/data2.json') 89 | .then((res) => { 90 | this.setState({ 91 | data: res.data 92 | }) 93 | }) 94 | this.setState({ 95 | value: '' 96 | }) 97 | } 98 | handleFind = () => { 99 | let { data, value } = this.state; 100 | let len = data.length; 101 | let arr = []; 102 | let reg = new RegExp(value) 103 | for (var i = 0; i < len; i++) { 104 | if (data[i].nm.match(reg)) { 105 | arr.push(data[i]); 106 | this.setState({ 107 | data: arr 108 | }) 109 | } 110 | } 111 | } 112 | } 113 | 114 | export default Home; -------------------------------------------------------------------------------- /src/day13/container/cons.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | class Index extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | careFloag: false, 8 | praiseFloag: false, 9 | data: {}, 10 | sum: 2 11 | } 12 | } 13 | render() { 14 | let len = Object.keys(this.props.data).length; 15 | const data = this.props.data; 16 | let {sum}=this.state 17 | // console.log(data) 18 | // let sum=data.replyCons.length; 19 | let { careFloag, praiseFloag } = this.state; 20 | return ( 21 |
22 |

8条回复

23 | { 24 | len ? ( 25 |
26 |

{data.name} { 27 | this.setState({ 28 | careFloag: !this.state.careFloag 29 | }) 30 | }}>{careFloag ? '已关注' : '+加关注'}

31 |

{data.cons}

32 |

回复：{data.reply} this.handlePraise(data)}>点赞:{data.praise}

33 | { 34 | data.replyCons ? data.replyCons.map((v, i) => ( 35 |
36 |

{v.name}

37 |

{v.cons}

38 |

回复：{v.reply} this.handlePraises(i)}>点赞:{v.praise} this.handleDel(i)}>删除

39 |
40 | )) : '' 41 | } 42 |
43 | ) : '' 44 | } 45 |
评论：{sum}
46 |
47 | ); 48 | } 49 | // 点赞 50 | handlePraise = (count) => { 51 | let { praiseFloag } = this.state; 52 | this.setState({ 53 | praiseFloag: !praiseFloag 54 | }) 55 | praiseFloag ? --count.praise : ++count.praise; 56 | } 57 | handlePraises = (i) => { 58 | let { data, updata } = this.props; 59 | console.log(data.replyCons[i].praiseFloag, i) 60 | data.replyCons[i].praiseFloag = !data.replyCons[i].praiseFloag; 61 | data.replyCons[i].praiseFloag ? ++data.replyCons[i].praise : --data.replyCons[i].praise; 62 | updata(data) 63 | } 64 | // 删除 65 | handleDel = (i) => { 66 | let { data, updata } = this.props; 67 | let dataItems = data.replyCons; 68 | dataItems.splice(i, 1); 69 | this.setState({ 70 | sum: dataItems.length 71 | }) 72 | updata(data) 73 | } 74 | //添加评论 75 | handleAdd = () => { 76 | let { data, updata } = this.props; 77 | let newData = [...data.replyCons, { 78 | "name": "我", 79 | "cons": this.refs.ipt.value, 80 | "reply": 23, 81 | "praise": 32, 82 | "praiseFloag": false 83 | }] 84 | data.replyCons = newData; 85 | this.setState({ 86 | sum: newData.length 87 | }) 88 | updata(data) 89 | this.refs.ipt.value = ''; 90 | 91 | } 92 | } 93 | let mapStateToProps = (state) => { 94 | return state.UpdateRender 95 | } 96 | let mapDispatchToProps = (dispatch) => { 97 | return { 98 | updata(payload) { 99 | dispatch({ type: 'UPDATA', payload }) 100 | } 101 | } 102 | } 103 | export default connect(mapStateToProps, mapDispatchToProps)(Index); -------------------------------------------------------------------------------- /src/day15/container/list.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | import axios from 'axios'; 4 | import '../mock/mock'; 5 | class List extends Component { 6 | constructor() { 7 | super(); 8 | this.state = { 9 | sum: 0, 10 | total: 0 11 | } 12 | } 13 | 14 | render() { 15 | const { list, updata } = this.props; 16 | return ( 17 |
18 |
19 |

20 | { 21 | list.forEach(item => { 22 | item.isCheck = e.target.checked; 23 | }) 24 | this.handleCheck() 25 | this.computed(); 26 | 27 | updata(list); 28 | }} /> 29 | 30 |

31 | 32 | {list && list.length && list.map((v, i) => ( 33 |
34 | { 35 | list[i].isCheck = e.target.checked; 36 | this.handleCheck() 37 | this.computed(); 38 | updata(list); 39 | }} checked={v.isCheck} /> 40 |
41 |
42 | 我是图片 43 |
44 |
45 |

{v.name}

46 |

价格：{v.money}￥

47 |
48 | this.handleMinus(i)}>- 49 | {v.num} 50 | this.handlePlus(i)}>+ 51 |
52 |
53 |
54 |
55 | 56 | ))} 57 |
58 |
59 | 总价：{this.state.sum} 60 | 总件数：{this.state.num} 61 |
62 | ); 63 | } 64 | handleCheck = () => { 65 | const { list, updata } = this.props; 66 | let listCheck = list.filter(v => v.isCheck); 67 | if (listCheck.length === 4) { 68 | return this.refs.all.checked = true 69 | } 70 | list.forEach((v, i) => { 71 | if (!v.isCheck) { 72 | return this.refs.all.checked = false; 73 | } 74 | }) 75 | } 76 | componentDidMount() { 77 | let { updata } = this.props 78 | axios.get('/shopCar').then(res => { 79 | updata(res.data.data) 80 | }) 81 | this.handleCheck() 82 | this.computed(); 83 | } 84 | handleMinus = (i) => { 85 | const { list, updata } = this.props; 86 | if (list[i].num < 1) return; 87 | list[i].num--; 88 | this.handleCheck() 89 | this.computed(); 90 | updata(list) 91 | 92 | } 93 | handlePlus = (i) => { 94 | const { list, updata } = this.props; 95 | if (list[i].num > 9) return; 96 | list[i].num++; 97 | this.computed(); 98 | updata(list) 99 | 100 | } 101 | computed() { 102 | let { list } = this.props; 103 | let sum = 0, num = 0; 104 | list.forEach(item => { 105 | if (item.isCheck) { 106 | sum += item.num * item.money; 107 | num += item.num 108 | } 109 | }) 110 | this.setState({ 111 | sum, num 112 | }) 113 | } 114 | } 115 | const mapStateToProps = (state) => { 116 | return state.List; 117 | } 118 | const mapDispatchToProps = (dispatch) => { 119 | return { 120 | updata(payload) { 121 | dispatch({ type: 'UPDATA', payload }) 122 | } 123 | } 124 | } 125 | export default connect(mapStateToProps, mapDispatchToProps)(List); -------------------------------------------------------------------------------- /src/day12/container/type/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import axios from 'axios'; 3 | class Type extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | data: [], 8 | flag: false, 9 | value: '' 10 | } 11 | } 12 | render() { 13 | let { flag, value, data } = this.state; 14 | return (
15 |
16 | 17 | {flag ?

18 | × 19 | √ 20 |

: ''} 21 |
22 |

价格排序好评排序

23 |
24 |

进口品牌

25 |
26 | { 27 | data && data.length && data.map((v, i) => { 28 | return
{ this.props.history.push('/home') }} key={i}> 29 |
30 |
{v}
31 |
32 | }) 33 | } 34 |
35 |
36 |
37 |

常用分类

38 |
39 | { 40 | data && data.length && data.map((v, i) => { 41 | return
{ this.props.history.push('/home') }} key={i}> 42 |
43 |
{v}
44 |
45 | }) 46 | } 47 |
48 | 49 |
50 |
51 | ); 52 | } 53 | handleRender1=()=>{ 54 | axios.get('./mock/type.json') 55 | .then((res) => { 56 | this.setState({ 57 | data: res.data 58 | }) 59 | }) 60 | } 61 | handleRender2=()=>{ 62 | axios.get('./mock/type2.json') 63 | .then((res) => { 64 | this.setState({ 65 | data: res.data 66 | }) 67 | }) 68 | } 69 | componentDidMount() { 70 | this.getList(); 71 | } 72 | getList = () => { 73 | axios.get('./mock/type.json') 74 | .then((res) => { 75 | this.setState({ 76 | data: res.data 77 | }) 78 | }) 79 | axios.get('./mock/data2.json') 80 | .then((res) => { 81 | this.setState({ 82 | data2: res.data 83 | }) 84 | }) 85 | } 86 | handleChange = (e) => { 87 | if (e.target.value) { 88 | this.setState({ 89 | flag: true, 90 | value: e.target.value 91 | }) 92 | } else { 93 | axios.get('./mock/type.json') 94 | .then((res) => { 95 | this.setState({ 96 | data: res.data 97 | }) 98 | }) 99 | } 100 | } 101 | handleClear = () => { 102 | axios.get('./mock/type.json') 103 | .then((res) => { 104 | this.setState({ 105 | data: res.data 106 | }) 107 | }) 108 | this.setState({ 109 | value: '' 110 | }) 111 | } 112 | handleFind = () => { 113 | console.log(111) 114 | let { data, value } = this.state; 115 | let len = data.length; 116 | let arr = []; 117 | let reg = new RegExp(value) 118 | for (var i = 0; i < len; i++) { 119 | if (data[i].match(reg)) { 120 | arr.push(data[i]); 121 | console.log(arr) 122 | this.setState({ 123 | data: arr 124 | }) 125 | } 126 | } 127 | // setTimeout(() => { 128 | // this.props.history.push({ 129 | // pathname: '/home', 130 | // params: value, 131 | // params2: this.state.data 132 | // }) 133 | // }, 100); 134 | 135 | } 136 | } 137 | 138 | export default Type; -------------------------------------------------------------------------------- /public/mock/data2.json: -------------------------------------------------------------------------------- 1 | [ 2 | 3 | { 4 | "id": 1218091, 5 | "haspromotionTag": false, 6 | "img": "http://img5.imgtn.bdimg.com/it/u=3663485934,3761231265&fm=26&gp=0.jpg", 7 | "version": "v2d imax", 8 | "nm": "飞驰人生", 9 | "preShow": false, 10 | "sc": 8.8, 11 | "globalReleased": true, 12 | "wish": 382360, 13 | "star": "沈腾,黄景瑜,尹正", 14 | "rt": "2019-02-05", 15 | "showInfo": "今天214家影院放映1709场", 16 | "showst": 3, 17 | "wishst": 0 18 | }, 19 | { 20 | "id": 1214652, 21 | "haspromotionTag": false, 22 | "img": "http://img1.imgtn.bdimg.com/it/u=3674819224,245461761&fm=26&gp=0.jpg", 23 | "version": "", 24 | "nm": "朝花夕誓-于离别之朝束起约定之花", 25 | "preShow": false, 26 | "sc": 0, 27 | "globalReleased": false, 28 | "wish": 74578, 29 | "star": "石见舞菜香,入野自由,茅野爱衣", 30 | "rt": "2019-02-22", 31 | "showInfo": "今天1家影院放映2场", 32 | "showst": 4, 33 | "wishst": 0 34 | }, { 35 | "id": 248906, 36 | "haspromotionTag": false, 37 | "img": "http://img3.imgtn.bdimg.com/it/u=824882645,882311866&fm=26&gp=0.jpg", 38 | "version": "v3d imax", 39 | "nm": "流浪地球", 40 | "preShow": false, 41 | "sc": 9.3, 42 | "globalReleased": true, 43 | "wish": 249514, 44 | "star": "吴京,屈楚萧,李光洁", 45 | "rt": "2019-02-05", 46 | "showInfo": "今天219家影院放映3946场", 47 | "showst": 3, 48 | "wishst": 0 49 | }, 50 | { 51 | "id": 410629, 52 | "haspromotionTag": false, 53 | "img": "http://img1.imgtn.bdimg.com/it/u=1583960114,3466064733&fm=26&gp=0.jpg", 54 | "version": "v3d imax", 55 | "nm": "阿丽塔：战斗天使", 56 | "preShow": false, 57 | "sc": 0, 58 | "globalReleased": false, 59 | "wish": 166665, 60 | "star": "罗莎·萨拉查,克里斯托弗·沃尔兹,基恩·约翰逊", 61 | "rt": "2019-02-22", 62 | "showInfo": "今天129家影院放映158场", 63 | "showst": 4, 64 | "wishst": 0 65 | }, 66 | { 67 | "id": 344869, 68 | "haspromotionTag": false, 69 | "img": "http://img0.imgtn.bdimg.com/it/u=145278557,2078139817&fm=26&gp=0.jpg", 70 | "version": "v2d imax", 71 | "nm": "疯狂的外星人", 72 | "preShow": false, 73 | "sc": 8.5, 74 | "globalReleased": true, 75 | "wish": 459801, 76 | "star": "黄渤,沈腾,马修·莫里森", 77 | "rt": "2019-02-05", 78 | "showInfo": "今天218家影院放映1862场", 79 | "showst": 3, 80 | "wishst": 0 81 | }, 82 | { 83 | "id": 1243239, 84 | "haspromotionTag": false, 85 | "img": "http://img0.imgtn.bdimg.com/it/u=1164867070,1902060026&fm=26&gp=0.jpg", 86 | "version": "v3d", 87 | "nm": "熊出没·原始时代", 88 | "preShow": false, 89 | "sc": 9.2, 90 | "globalReleased": true, 91 | "wish": 91834, 92 | "star": "宋祖儿,谭笑,张伟", 93 | "rt": "2019-02-05", 94 | "showInfo": "今天201家影院放映603场", 95 | "showst": 3, 96 | "wishst": 0 97 | }, 98 | { 99 | "id": 247295, 100 | "haspromotionTag": false, 101 | "img": "http://img4.imgtn.bdimg.com/it/u=3271433706,494321854&fm=26&gp=0.jpg", 102 | "version": "v3d imax", 103 | "nm": "驯龙高手3", 104 | "preShow": true, 105 | "sc": 0, 106 | "globalReleased": false, 107 | "wish": 146514, 108 | "star": "杰伊·巴鲁切尔,亚美莉卡·费雷拉,凯特·布兰切特", 109 | "rt": "2019-03-01", 110 | "showInfo": "2019-03-01 下周五上映", 111 | "showst": 4, 112 | "wishst": 0 113 | }, 114 | { 115 | "id": 344262, 116 | "haspromotionTag": false, 117 | "img": "http://img1.imgtn.bdimg.com/it/u=1301565992,2748090317&fm=26&gp=0.jpg", 118 | "version": "", 119 | "nm": "一吻定情", 120 | "preShow": false, 121 | "sc": 8.6, 122 | "globalReleased": true, 123 | "wish": 81946, 124 | "star": "王大陆,林允,钟丽缇", 125 | "rt": "2019-02-14", 126 | "showInfo": "今天133家影院放映340场", 127 | "showst": 3, 128 | "wishst": 0 129 | }, 130 | { 131 | "id": 580298, 132 | "haspromotionTag": false, 133 | "img": "http://img0.imgtn.bdimg.com/it/u=1164867070,1902060026&fm=26&gp=0.jpg", 134 | "version": "", 135 | "nm": "新喜剧之王", 136 | "preShow": false, 137 | "sc": 8, 138 | "globalReleased": true, 139 | "wish": 332957, 140 | "star": "王宝强,鄂靖文,张全蛋", 141 | "rt": "2019-02-05", 142 | "showInfo": "今天146家影院放映337场", 143 | "showst": 3, 144 | "wishst": 0 145 | }, 146 | { 147 | "id": 1206836, 148 | "haspromotionTag": false, 149 | "img": "http://img1.imgtn.bdimg.com/it/u=1301565992,2748090317&fm=26&gp=0.jpg", 150 | "version": "v3d", 151 | "nm": "神探蒲松龄", 152 | "preShow": false, 153 | "sc": 7.8, 154 | "globalReleased": true, 155 | "wish": 145534, 156 | "star": "成龙,阮经天,钟楚曦", 157 | "rt": "2019-02-05", 158 | "showInfo": "今天101家影院放映178场", 159 | "showst": 3, 160 | "wishst": 0 161 | }, 162 | { 163 | "id": 1215114, 164 | "haspromotionTag": false, 165 | "img": "http://img1.imgtn.bdimg.com/it/u=1301565992,2748090317&fm=26&gp=0.jpg", 166 | "version": "", 167 | "nm": "廉政风云", 168 | "preShow": false, 169 | "sc": 6.9, 170 | "globalReleased": true, 171 | "wish": 100828, 172 | "star": "刘青云,张家辉,林嘉欣", 173 | "rt": "2019-02-05", 174 | "showInfo": "今天96家影院放映170场", 175 | "showst": 3, 176 | "wishst": 0 177 | }, 178 | { 179 | "id": 1206605, 180 | "haspromotionTag": false, 181 | "img": "http://img4.imgtn.bdimg.com/it/u=3271433706,494321854&fm=26&gp=0.jpg", 182 | "version": "", 183 | "nm": "绿皮书", 184 | "preShow": true, 185 | "sc": 0, 186 | "globalReleased": false, 187 | "wish": 12864, 188 | "star": "维果·莫腾森,马赫沙拉·阿里,琳达·卡德里尼", 189 | "rt": "2019-03-01", 190 | "showInfo": "2019-03-01 下周五上映", 191 | "showst": 4, 192 | "wishst": 0 193 | } 194 | ] -------------------------------------------------------------------------------- /public/mock/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 248906, 4 | "haspromotionTag": false, 5 | "img": "http://img3.imgtn.bdimg.com/it/u=824882645,882311866&fm=26&gp=0.jpg", 6 | "version": "v3d imax", 7 | "nm": "流浪地球", 8 | "preShow": false, 9 | "sc": 9.3, 10 | "globalReleased": true, 11 | "wish": 249514, 12 | "star": "吴京,屈楚萧,李光洁", 13 | "rt": "2019-02-05", 14 | "showInfo": "今天219家影院放映3946场", 15 | "showst": 3, 16 | "wishst": 0 17 | }, 18 | { 19 | "id": 410629, 20 | "haspromotionTag": false, 21 | "img": "http://img1.imgtn.bdimg.com/it/u=1583960114,3466064733&fm=26&gp=0.jpg", 22 | "version": "v3d imax", 23 | "nm": "阿丽塔：战斗天使", 24 | "preShow": false, 25 | "sc": 0, 26 | "globalReleased": false, 27 | "wish": 166665, 28 | "star": "罗莎·萨拉查,克里斯托弗·沃尔兹,基恩·约翰逊", 29 | "rt": "2019-02-22", 30 | "showInfo": "今天129家影院放映158场", 31 | "showst": 4, 32 | "wishst": 0 33 | }, 34 | { 35 | "id": 344869, 36 | "haspromotionTag": false, 37 | "img": "http://img0.imgtn.bdimg.com/it/u=145278557,2078139817&fm=26&gp=0.jpg", 38 | "version": "v2d imax", 39 | "nm": "疯狂的外星人", 40 | "preShow": false, 41 | "sc": 8.5, 42 | "globalReleased": true, 43 | "wish": 459801, 44 | "star": "黄渤,沈腾,马修·莫里森", 45 | "rt": "2019-02-05", 46 | "showInfo": "今天218家影院放映1862场", 47 | "showst": 3, 48 | "wishst": 0 49 | }, 50 | { 51 | "id": 1218091, 52 | "haspromotionTag": false, 53 | "img": "http://img5.imgtn.bdimg.com/it/u=3663485934,3761231265&fm=26&gp=0.jpg", 54 | "version": "v2d imax", 55 | "nm": "飞驰人生", 56 | "preShow": false, 57 | "sc": 8.8, 58 | "globalReleased": true, 59 | "wish": 382360, 60 | "star": "沈腾,黄景瑜,尹正", 61 | "rt": "2019-02-05", 62 | "showInfo": "今天214家影院放映1709场", 63 | "showst": 3, 64 | "wishst": 0 65 | }, 66 | { 67 | "id": 1214652, 68 | "haspromotionTag": false, 69 | "img": "http://img1.imgtn.bdimg.com/it/u=3674819224,245461761&fm=26&gp=0.jpg", 70 | "version": "", 71 | "nm": "朝花夕誓-于离别之朝束起约定之花", 72 | "preShow": false, 73 | "sc": 0, 74 | "globalReleased": false, 75 | "wish": 74578, 76 | "star": "石见舞菜香,入野自由,茅野爱衣", 77 | "rt": "2019-02-22", 78 | "showInfo": "今天1家影院放映2场", 79 | "showst": 4, 80 | "wishst": 0 81 | }, 82 | { 83 | "id": 1243239, 84 | "haspromotionTag": false, 85 | "img": "http://img0.imgtn.bdimg.com/it/u=1164867070,1902060026&fm=26&gp=0.jpg", 86 | "version": "v3d", 87 | "nm": "熊出没·原始时代", 88 | "preShow": false, 89 | "sc": 9.2, 90 | "globalReleased": true, 91 | "wish": 91834, 92 | "star": "宋祖儿,谭笑,张伟", 93 | "rt": "2019-02-05", 94 | "showInfo": "今天201家影院放映603场", 95 | "showst": 3, 96 | "wishst": 0 97 | }, 98 | { 99 | "id": 247295, 100 | "haspromotionTag": false, 101 | "img": "http://img4.imgtn.bdimg.com/it/u=3271433706,494321854&fm=26&gp=0.jpg", 102 | "version": "v3d imax", 103 | "nm": "驯龙高手3", 104 | "preShow": true, 105 | "sc": 0, 106 | "globalReleased": false, 107 | "wish": 146514, 108 | "star": "杰伊·巴鲁切尔,亚美莉卡·费雷拉,凯特·布兰切特", 109 | "rt": "2019-03-01", 110 | "showInfo": "2019-03-01 下周五上映", 111 | "showst": 4, 112 | "wishst": 0 113 | }, 114 | { 115 | "id": 344262, 116 | "haspromotionTag": false, 117 | "img": "http://img1.imgtn.bdimg.com/it/u=1301565992,2748090317&fm=26&gp=0.jpg", 118 | "version": "", 119 | "nm": "一吻定情", 120 | "preShow": false, 121 | "sc": 8.6, 122 | "globalReleased": true, 123 | "wish": 81946, 124 | "star": "王大陆,林允,钟丽缇", 125 | "rt": "2019-02-14", 126 | "showInfo": "今天133家影院放映340场", 127 | "showst": 3, 128 | "wishst": 0 129 | }, 130 | { 131 | "id": 580298, 132 | "haspromotionTag": false, 133 | "img": "http://img0.imgtn.bdimg.com/it/u=1164867070,1902060026&fm=26&gp=0.jpg", 134 | "version": "", 135 | "nm": "新喜剧之王", 136 | "preShow": false, 137 | "sc": 8, 138 | "globalReleased": true, 139 | "wish": 332957, 140 | "star": "王宝强,鄂靖文,张全蛋", 141 | "rt": "2019-02-05", 142 | "showInfo": "今天146家影院放映337场", 143 | "showst": 3, 144 | "wishst": 0 145 | }, 146 | { 147 | "id": 1206836, 148 | "haspromotionTag": false, 149 | "img": "http://img1.imgtn.bdimg.com/it/u=1301565992,2748090317&fm=26&gp=0.jpg", 150 | "version": "v3d", 151 | "nm": "神探蒲松龄", 152 | "preShow": false, 153 | "sc": 7.8, 154 | "globalReleased": true, 155 | "wish": 145534, 156 | "star": "成龙,阮经天,钟楚曦", 157 | "rt": "2019-02-05", 158 | "showInfo": "今天101家影院放映178场", 159 | "showst": 3, 160 | "wishst": 0 161 | }, 162 | { 163 | "id": 1215114, 164 | "haspromotionTag": false, 165 | "img": "http://img1.imgtn.bdimg.com/it/u=1301565992,2748090317&fm=26&gp=0.jpg", 166 | "version": "", 167 | "nm": "廉政风云", 168 | "preShow": false, 169 | "sc": 6.9, 170 | "globalReleased": true, 171 | "wish": 100828, 172 | "star": "刘青云,张家辉,林嘉欣", 173 | "rt": "2019-02-05", 174 | "showInfo": "今天96家影院放映170场", 175 | "showst": 3, 176 | "wishst": 0 177 | }, 178 | { 179 | "id": 1206605, 180 | "haspromotionTag": false, 181 | "img": "http://img4.imgtn.bdimg.com/it/u=3271433706,494321854&fm=26&gp=0.jpg", 182 | "version": "", 183 | "nm": "绿皮书", 184 | "preShow": true, 185 | "sc": 0, 186 | "globalReleased": false, 187 | "wish": 12864, 188 | "star": "维果·莫腾森,马赫沙拉·阿里,琳达·卡德里尼", 189 | "rt": "2019-03-01", 190 | "showInfo": "2019-03-01 下周五上映", 191 | "showst": 4, 192 | "wishst": 0 193 | } 194 | ] -------------------------------------------------------------------------------- /src/day9_1/common/css/common.css: -------------------------------------------------------------------------------- 1 | /* 2 | * @description:Common usage Styles 3 | * @author:HaoNan 4 | * @update:HaoNan (2015-08-1 8:30) 5 | */ 6 | @-webkit-viewport { 7 | width: device-width; 8 | } 9 | 10 | @-moz-viewport { 11 | width: device-width; 12 | } 13 | 14 | @-ms-viewport { 15 | width: device-width; 16 | } 17 | 18 | @-o-viewport { 19 | width: device-width; 20 | } 21 | 22 | @viewport { 23 | width: device-width; 24 | } 25 | 26 | body { 27 | font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; 28 | color: #3b3d3e; 29 | } 30 | 31 | a { 32 | color: #666; 33 | } 34 | 35 | a:hover, a:focus { 36 | color: #666; 37 | text-decoration: none; 38 | } 39 | 40 | .block { 41 | display: block; 42 | } 43 | 44 | .float-left { 45 | float: left; 46 | } 47 | 48 | .float-right { 49 | float: right; 50 | } 51 | 52 | .float-none { 53 | float: none; 54 | } 55 | 56 | .margin-center { 57 | margin-left: auto; 58 | margin-right: auto; 59 | display: table; 60 | width: auto; 61 | } 62 | 63 | .text-justify { 64 | text-align: justify; 65 | } 66 | 67 | .text-underline { 68 | text-decoration: underline; 69 | } 70 | 71 | .text-top { 72 | vertical-align: top; 73 | } 74 | 75 | .text-middle { 76 | vertical-align: middle; 77 | } 78 | 79 | .text-bottom { 80 | vertical-align: bottom; 81 | } 82 | 83 | .text-nobr { 84 | white-space: nowrap; 85 | overflow: hidden; 86 | text-overflow: ellipsis; 87 | } 88 | 89 | .text-nowrap { 90 | display: -webkit-box; 91 | overflow: hidden; 92 | text-overflow: ellipsis; 93 | -webkit-box-orient: vertical; 94 | -webkit-line-clamp: 2; 95 | } 96 | 97 | .f0 { 98 | font-size: 0; 99 | } 100 | 101 | .f9 { 102 | font-size: .09rem; 103 | } 104 | 105 | .f10 { 106 | font-size: .1rem; 107 | } 108 | 109 | .f12 { 110 | font-size: .12rem; 111 | } 112 | 113 | .f14 { 114 | font-size: .14rem; 115 | } 116 | 117 | .f16 { 118 | font-size: .16rem; 119 | } 120 | 121 | .f18 { 122 | font-size: .18rem; 123 | } 124 | 125 | .f20 { 126 | font-size: .2rem; 127 | } 128 | 129 | .f24 { 130 | font-size: .24rem; 131 | } 132 | 133 | .f26 { 134 | font-size: .26rem; 135 | } 136 | 137 | .f32 { 138 | font-size: .32rem; 139 | } 140 | 141 | .f36 { 142 | font-size: .36rem; 143 | } 144 | 145 | .pos-relative { 146 | position: relative; 147 | } 148 | 149 | .pos-absolute { 150 | position: absolute; 151 | } 152 | 153 | .pos-static { 154 | position: static; 155 | } 156 | 157 | .text-dark { 158 | color: #000; 159 | } 160 | 161 | .text-light-dark { 162 | color: #666; 163 | } 164 | 165 | .text-jet-dark { 166 | color: #333; 167 | } 168 | 169 | .text-white, a.text-white { 170 | color: #fff; 171 | } 172 | 173 | .text-red, a.text-red { 174 | color: #ff4136; 175 | } 176 | 177 | .text-light-red, a.text-light-red { 178 | color: #f74d4d; 179 | } 180 | 181 | .text-blue, a.text-blue { 182 | color: #006666; 183 | } 184 | 185 | .text-highlight-blue, a.text-highlight-blue { 186 | color: #5badab; 187 | } 188 | 189 | .text-high-blue, a.text-high-blue { 190 | color: #4c6aae; 191 | } 192 | 193 | a.text-light-blue, .text-light-blue { 194 | color: #89afc3; 195 | } 196 | 197 | .text-orange, a.text-orange { 198 | color: #fa8100; 199 | } 200 | 201 | .text-dark-orange { 202 | color: #ff7200; 203 | } 204 | 205 | .text-gray, a.text-gray { 206 | color: #454545; 207 | } 208 | 209 | .text-light-gray { 210 | color: #a3a3a3; 211 | } 212 | 213 | .txt-idt1 { 214 | text-indent: 1rem; 215 | } 216 | 217 | .txt-idt2 { 218 | text-indent: 2rem; 219 | } 220 | 221 | .n { 222 | font-weight: normal; 223 | font-style: normal; 224 | } 225 | 226 | .b { 227 | font-weight: bold; 228 | } 229 | 230 | .i { 231 | font-style: italic; 232 | } 233 | 234 | .wf { 235 | width: 100%; 236 | } 237 | 238 | .hf { 239 | height: 100%; 240 | } 241 | 242 | .nowrap { 243 | white-space: nowrap; 244 | } 245 | 246 | .bk { 247 | word-wrap: break-word; 248 | } 249 | 250 | .rel { 251 | position: relative; 252 | } 253 | 254 | .abs { 255 | position: absolute; 256 | } 257 | 258 | .bg-navy { 259 | background-color: #001f3f; 260 | } 261 | 262 | .bg-blue { 263 | background-color: #0074d9; 264 | } 265 | 266 | .bg-aqua { 267 | background-color: #7fdbff; 268 | } 269 | 270 | .bg-teal { 271 | background-color: #39cccc; 272 | } 273 | 274 | .bg-olive { 275 | background-color: #3d9970; 276 | } 277 | 278 | .bg-green { 279 | background-color: #2ecc40; 280 | } 281 | 282 | .bg-lime { 283 | background-color: #01ff70; 284 | } 285 | 286 | .bg-yellow { 287 | background-color: #ffdc00; 288 | } 289 | 290 | .bg-orange { 291 | background-color: #ff851b; 292 | } 293 | 294 | .bg-danger { 295 | background-color: #ff4136; 296 | } 297 | 298 | .bg-fuchsia { 299 | background-color: #f012be; 300 | } 301 | 302 | .bg-purple { 303 | background-color: #b10dc9; 304 | } 305 | 306 | .bg-maroon { 307 | background-color: #85144b; 308 | } 309 | 310 | .bg-white { 311 | background-color: #ffffff; 312 | } 313 | 314 | .bg-gray { 315 | background-color: #aaaaaa; 316 | } 317 | 318 | .bg-light-gray { 319 | background-color: #f0efed; 320 | } 321 | 322 | .bg-silver { 323 | background-color: #dddddd; 324 | } 325 | 326 | .bg-black { 327 | background-color: #111111; 328 | } 329 | 330 | .bg-white { 331 | background-color: #fff; 332 | } 333 | 334 | .bg-none { 335 | background-image: none !important; 336 | } 337 | 338 | .bgfb { 339 | background-color: #fbfbfb; 340 | } 341 | 342 | .bgf5 { 343 | background-color: #f5f5f5; 344 | } 345 | 346 | .bgf0 { 347 | background-color: #f0f0f0; 348 | } 349 | 350 | .bgeb { 351 | background-color: #ebebeb; 352 | } 353 | 354 | .bge0 { 355 | background-color: #e0e0e0; 356 | } 357 | 358 | .bd1 { 359 | border: 1px solid #ddd; 360 | } 361 | 362 | .bd2 { 363 | border: 2px solid #ddd; 364 | } 365 | 366 | .bd3 { 367 | border: 3px solid #ddd; 368 | } 369 | 370 | .bd0 { 371 | border-width: 0; 372 | } 373 | 374 | .bdl0 { 375 | border-left: 0 !important; 376 | } 377 | 378 | .bdt1 { 379 | border-top: 1px solid #ccc; 380 | } 381 | 382 | .bdr1 { 383 | border-right: 1px solid #ccc; 384 | } 385 | 386 | .bdl1 { 387 | border-left: 1px solid #ccc; 388 | } 389 | 390 | .bdb1 { 391 | border-bottom: 1px solid #eee; 392 | } 393 | 394 | .ml0 { 395 | margin-left: 0; 396 | } 397 | 398 | .mr0 { 399 | margin-right: 0; 400 | } 401 | 402 | .mt0 { 403 | margin-top: 0; 404 | } 405 | 406 | .mb0 { 407 | margin-bottom: 0; 408 | } 409 | 410 | .pl0 { 411 | padding-left: 0; 412 | } 413 | 414 | .pr0 { 415 | padding-right: 0; 416 | } 417 | 418 | .pt0 { 419 | padding-top: 0; 420 | } 421 | 422 | .pb0 { 423 | padding-bottom: 0; 424 | } 425 | 426 | .mlf3 { 427 | margin-left: -3px; 428 | } 429 | 430 | .mlf5 { 431 | margin-left: -5px; 432 | } 433 | 434 | .mlf10 { 435 | margin-left: -10px; 436 | } 437 | 438 | .mrf15 { 439 | margin-right: -15px; 440 | } 441 | 442 | .mlrf15 { 443 | margin-left: -15px !important; 444 | margin-right: -15px !important; 445 | } 446 | 447 | .mtf3 { 448 | margin-top: -3px; 449 | } 450 | 451 | .mtf5 { 452 | margin-top: -5px; 453 | } 454 | 455 | .mtf10 { 456 | margin-top: -10px; 457 | } 458 | 459 | .mtf15 { 460 | margin-top: -15px; 461 | } 462 | .mtf35 { 463 | margin-top: -35px; 464 | } 465 | .mt3 { 466 | margin-top: 3px; 467 | } 468 | 469 | .mt5 { 470 | margin-top: 5px; 471 | } 472 | 473 | .mt10 { 474 | margin-top: 10px; 475 | } 476 | 477 | .mt15 { 478 | margin-top: 15px; 479 | } 480 | 481 | .mt20 { 482 | margin-top: 20px; 483 | } 484 | 485 | .mt25 { 486 | margin-top: 25px; 487 | } 488 | 489 | .mt30 { 490 | margin-top: 30px; 491 | } 492 | 493 | .mt35 { 494 | margin-top: 35px; 495 | } 496 | 497 | .mt50 { 498 | margin-top: 50px; 499 | } 500 | 501 | .mb3 { 502 | margin-bottom: 3px; 503 | } 504 | 505 | .mb5 { 506 | margin-bottom: 5px; 507 | } 508 | 509 | .mb10 { 510 | margin-bottom: 10px; 511 | } 512 | 513 | .mb15 { 514 | margin-bottom: 15px; 515 | } 516 | 517 | .mb20 { 518 | margin-bottom: 20px; 519 | } 520 | 521 | .ml3 { 522 | margin-left: 3px; 523 | } 524 | 525 | .ml5 { 526 | margin-left: 5px; 527 | } 528 | 529 | .ml10 { 530 | margin-left: 10px; 531 | } 532 | 533 | .ml15 { 534 | margin-left: 15px; 535 | } 536 | 537 | .ml20 { 538 | margin-left: 20px; 539 | } 540 | 541 | .mr3 { 542 | margin-right: 3px; 543 | } 544 | 545 | .mr5 { 546 | margin-right: 5px; 547 | } 548 | 549 | .mr10 { 550 | margin-right: 10px; 551 | } 552 | 553 | .mr15 { 554 | margin-right: 15px; 555 | } 556 | 557 | .mr20 { 558 | margin-right: 20px; 559 | } 560 | 561 | .mr30 { 562 | margin-right: 30px; 563 | } 564 | 565 | .mr50 { 566 | margin-right: 50px; 567 | } 568 | 569 | .mlr1 { 570 | margin-left: 1px; 571 | margin-right: 1px; 572 | } 573 | 574 | .mlr3 { 575 | margin-left: 3px; 576 | margin-right: 3px; 577 | } 578 | 579 | .mlr5 { 580 | margin-left: 5px; 581 | margin-right: 5px; 582 | } 583 | 584 | .mlr10 { 585 | margin-left: 10px; 586 | margin-right: 10px; 587 | } 588 | 589 | .p1 { 590 | padding: 1px; 591 | } 592 | 593 | .p3 { 594 | padding: 3px; 595 | } 596 | 597 | .p5 { 598 | padding: 5px; 599 | } 600 | 601 | .p10 { 602 | padding: 10px; 603 | } 604 | 605 | .pt3 { 606 | padding-top: 3px; 607 | } 608 | 609 | .pt5 { 610 | padding-top: 5px; 611 | } 612 | 613 | .pt10 { 614 | padding-top: 10px; 615 | } 616 | 617 | .pt15 { 618 | padding-top: 15px; 619 | } 620 | 621 | .pt20 { 622 | padding-top: 20px; 623 | } 624 | 625 | .pt30 { 626 | padding-top: 30px; 627 | } 628 | 629 | .pt50 { 630 | padding-top: 50px; 631 | } 632 | 633 | .pb3 { 634 | padding-bottom: 3px; 635 | } 636 | 637 | .pb5 { 638 | padding-bottom: 5px; 639 | } 640 | 641 | .pb10 { 642 | padding-bottom: 10px; 643 | } 644 | 645 | .pb15 { 646 | padding-bottom: 15px; 647 | } 648 | 649 | .pb20 { 650 | padding-bottom: 20px; 651 | } 652 | 653 | .pb30 { 654 | padding-bottom: 30px; 655 | } 656 | 657 | .pb50 { 658 | padding-bottom: 50px; 659 | } 660 | 661 | .pl3 { 662 | padding-left: 3px; 663 | } 664 | 665 | .pl5 { 666 | padding-left: 5px; 667 | } 668 | 669 | .pl10 { 670 | padding-left: 10px !important; 671 | } 672 | 673 | .pl15 { 674 | padding-left: 15px; 675 | } 676 | 677 | .pl20 { 678 | padding-left: 20px; 679 | } 680 | 681 | .pl25 { 682 | padding-left: 25px; 683 | } 684 | 685 | .pl30 { 686 | padding-left: 30px; 687 | } 688 | 689 | .pr3 { 690 | padding-right: 3px; 691 | } 692 | 693 | .pr5 { 694 | padding-right: 5px; 695 | } 696 | 697 | .pr10 { 698 | padding-right: 10px !important; 699 | } 700 | 701 | .pr15 { 702 | padding-right: 15px; 703 | } 704 | 705 | .pr20 { 706 | padding-right: 20px; 707 | } 708 | 709 | .pr30 { 710 | padding-right: 30px; 711 | } 712 | 713 | .pr50 { 714 | padding-right: 50px; 715 | } 716 | 717 | .swiper-pagination-bullet-active { 718 | background-color: #666; 719 | } 720 | 721 | /*# sourcremappingURL=common.css.map */ 722 | -------------------------------------------------------------------------------- /public/mock/cinema.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 130, 4 | "mark": 0, 5 | "nm": "橙天嘉禾影城(上地店)", 6 | "sellPrice": "48.9", 7 | "addr": "海淀区上地南口华联商厦4F（近上地南口）", 8 | "distance": "600", 9 | "tag": { 10 | "allowRefund": 0, 11 | "buyout": 0, 12 | "cityCardTag": 0, 13 | "deal": 0, 14 | "endorse": 0, 15 | "hallType": [ 16 | "4K厅" 17 | ], 18 | "hallTypeVOList": [ 19 | { 20 | "name": "4K厅", 21 | "url": "" 22 | } 23 | ], 24 | "sell": 1, 25 | "snack": 1 26 | }, 27 | "promotion": {} 28 | }, 29 | { 30 | "id": 5111, 31 | "mark": 0, 32 | "nm": "CGV影城(清河店)", 33 | "sellPrice": "58", 34 | "addr": "海淀区清河中街68号华润五彩城购物中心东区7层", 35 | "distance": "2.6000", 36 | "tag": { 37 | "allowRefund": 0, 38 | "buyout": 0, 39 | "cityCardTag": 0, 40 | "deal": 0, 41 | "endorse": 0, 42 | "hallType": [ 43 | "60帧厅" 44 | ], 45 | "hallTypeVOList": [], 46 | "sell": 1, 47 | "snack": 1, 48 | "vipTag": "折扣卡" 49 | }, 50 | "promotion": { 51 | "cardPromotionTag": "开卡特惠，首单2张立减6元" 52 | } 53 | }, 54 | { 55 | "id": 25172, 56 | "mark": 0, 57 | "nm": "华联影城(肖家河店)", 58 | "sellPrice": "28", 59 | "addr": "海淀区龙背村路99号院北京华联龙背购物中心", 60 | "distance": "3.1000", 61 | "tag": { 62 | "allowRefund": 0, 63 | "buyout": 0, 64 | "cityCardTag": 0, 65 | "deal": 0, 66 | "endorse": 1, 67 | "hallTypeVOList": [], 68 | "sell": 1, 69 | "snack": 1, 70 | "vipTag": "折扣卡" 71 | }, 72 | "promotion": { 73 | "cardPromotionTag": "开卡特惠，首单2张立减10元" 74 | } 75 | }, 76 | { 77 | "id": 7433, 78 | "mark": 0, 79 | "nm": "大地影院(西三旗物美店)", 80 | "sellPrice": "38.9", 81 | "addr": "海淀区悦秀路99号二层", 82 | "distance": "3.6000", 83 | "tag": { 84 | "allowRefund": 0, 85 | "buyout": 0, 86 | "cityCardTag": 0, 87 | "deal": 0, 88 | "endorse": 0, 89 | "hallTypeVOList": [], 90 | "sell": 1, 91 | "snack": 1, 92 | "vipTag": "折扣卡" 93 | }, 94 | "promotion": { 95 | "cardPromotionTag": "限时¥12.9促销开卡，首单更优惠" 96 | } 97 | }, 98 | { 99 | "id": 25045, 100 | "mark": 0, 101 | "nm": "东融国际影城(西小口店)", 102 | "sellPrice": "38", 103 | "addr": "海淀区文龙家园四里4号楼4F-08", 104 | "distance": "4.3000", 105 | "tag": { 106 | "allowRefund": 0, 107 | "buyout": 0, 108 | "cityCardTag": 0, 109 | "deal": 0, 110 | "endorse": 0, 111 | "hallType": [ 112 | "4D厅" 113 | ], 114 | "hallTypeVOList": [ 115 | { 116 | "name": "4D厅", 117 | "url": "" 118 | } 119 | ], 120 | "sell": 1, 121 | "snack": 1 122 | }, 123 | "promotion": {} 124 | }, 125 | { 126 | "id": 25814, 127 | "mark": 0, 128 | "nm": "莱纳龙域影城", 129 | "sellPrice": "29.9", 130 | "addr": "昌平区龙域中街1号院1号楼昌发展万科广场5层", 131 | "distance": "4.6000", 132 | "tag": { 133 | "allowRefund": 0, 134 | "buyout": 0, 135 | "cityCardTag": 0, 136 | "deal": 0, 137 | "endorse": 1, 138 | "hallType": [ 139 | "杜比全景声厅", 140 | "DTS:X 临境音厅", 141 | "4K厅" 142 | ], 143 | "hallTypeVOList": [ 144 | { 145 | "name": "杜比全景声厅", 146 | "url": "" 147 | }, 148 | { 149 | "name": "DTS:X 临境音厅", 150 | "url": "" 151 | }, 152 | { 153 | "name": "4K厅", 154 | "url": "" 155 | } 156 | ], 157 | "sell": 1, 158 | "snack": 1 159 | }, 160 | "promotion": {} 161 | }, 162 | { 163 | "id": 70, 164 | "mark": 0, 165 | "nm": "嘉华国际影城(学清路店)", 166 | "sellPrice": "40.9", 167 | "addr": "海淀区学清路甲8号圣熙8号购物中心5层西侧（学清路）", 168 | "distance": "4.6000", 169 | "tag": { 170 | "allowRefund": 0, 171 | "buyout": 0, 172 | "cityCardTag": 0, 173 | "deal": 0, 174 | "endorse": 0, 175 | "hallType": [ 176 | "巨幕厅" 177 | ], 178 | "hallTypeVOList": [ 179 | { 180 | "name": "巨幕厅", 181 | "url": "" 182 | } 183 | ], 184 | "sell": 1, 185 | "snack": 1, 186 | "vipTag": "折扣卡" 187 | }, 188 | "promotion": { 189 | "cardPromotionTag": "限时¥19.89促销开卡，首单更优惠" 190 | } 191 | }, 192 | { 193 | "id": 197, 194 | "mark": 0, 195 | "nm": "美嘉欢乐影城(中关村店)", 196 | "sellPrice": "39", 197 | "addr": "海淀区中关村大街15号中关村广场购物中心津乐汇3楼（地铁中关村站D口出西侧）", 198 | "distance": "4.9000", 199 | "tag": { 200 | "allowRefund": 1, 201 | "buyout": 0, 202 | "cityCardTag": 0, 203 | "deal": 0, 204 | "endorse": 1, 205 | "hallType": [ 206 | "杜比全景声厅" 207 | ], 208 | "hallTypeVOList": [ 209 | { 210 | "name": "杜比全景声厅", 211 | "url": "" 212 | } 213 | ], 214 | "sell": 1, 215 | "snack": 1, 216 | "vipTag": "折扣卡" 217 | }, 218 | "promotion": { 219 | "cardPromotionTag": "开卡特惠，首单2张立减4元" 220 | } 221 | }, 222 | { 223 | "id": 17421, 224 | "mark": 0, 225 | "nm": "太平洋影城(北京中关村店)", 226 | "sellPrice": "39", 227 | "addr": "海淀区融科资讯中心B座-1-2", 228 | "distance": "5000", 229 | "tag": { 230 | "allowRefund": 1, 231 | "buyout": 0, 232 | "cityCardTag": 0, 233 | "deal": 0, 234 | "endorse": 1, 235 | "hallTypeVOList": [], 236 | "sell": 1, 237 | "snack": 1, 238 | "vipTag": "折扣卡" 239 | }, 240 | "promotion": { 241 | "cardPromotionTag": "开卡特惠，首单2张立减2元" 242 | } 243 | }, 244 | { 245 | "id": 152, 246 | "mark": 0, 247 | "nm": "金逸影城(中关村店)", 248 | "sellPrice": "48", 249 | "addr": "海淀区中关村大街19号新中关购物中心B1层", 250 | "distance": "5.4000", 251 | "tag": { 252 | "allowRefund": 0, 253 | "buyout": 0, 254 | "cityCardTag": 0, 255 | "deal": 0, 256 | "endorse": 0, 257 | "hallType": [ 258 | "杜比全景声厅" 259 | ], 260 | "hallTypeVOList": [ 261 | { 262 | "name": "杜比全景声厅", 263 | "url": "" 264 | } 265 | ], 266 | "sell": 1, 267 | "snack": 1, 268 | "vipTag": "折扣卡" 269 | }, 270 | "promotion": { 271 | "cardPromotionTag": "开卡特惠，首单2张立减6元" 272 | } 273 | }, 274 | { 275 | "id": 257, 276 | "mark": 0, 277 | "nm": "海淀剧院", 278 | "sellPrice": "33", 279 | "addr": "海淀区中关村大街28号", 280 | "distance": "5.6000", 281 | "tag": { 282 | "allowRefund": 0, 283 | "buyout": 0, 284 | "cityCardTag": 0, 285 | "deal": 0, 286 | "endorse": 1, 287 | "hallTypeVOList": [], 288 | "sell": 1, 289 | "snack": 0, 290 | "vipTag": "折扣卡" 291 | }, 292 | "promotion": { 293 | "cardPromotionTag": "开卡特惠，首单2张立减10元" 294 | } 295 | }, 296 | { 297 | "id": 25346, 298 | "mark": 0, 299 | "nm": "华联影院(回龙观店)", 300 | "sellPrice": "38", 301 | "addr": "昌平区回龙观镇西大街111号三层F3-90", 302 | "distance": "5.7000", 303 | "tag": { 304 | "allowRefund": 0, 305 | "buyout": 0, 306 | "cityCardTag": 0, 307 | "deal": 0, 308 | "endorse": 1, 309 | "hallTypeVOList": [], 310 | "sell": 1, 311 | "snack": 1, 312 | "vipTag": "折扣卡" 313 | }, 314 | "promotion": { 315 | "cardPromotionTag": "开卡特惠，首单2张立减10元" 316 | } 317 | }, 318 | { 319 | "id": 5502, 320 | "mark": 0, 321 | "nm": "保利国际影城(龙旗广场店)", 322 | "sellPrice": "38.9", 323 | "addr": "昌平区黄平路19号院3号楼龙旗广场购物中心3层（地铁8号线育新站路北600米，近永辉超市）", 324 | "distance": "5.7000", 325 | "tag": { 326 | "allowRefund": 0, 327 | "buyout": 0, 328 | "cityCardTag": 0, 329 | "deal": 0, 330 | "endorse": 0, 331 | "hallType": [ 332 | "4K厅" 333 | ], 334 | "hallTypeVOList": [ 335 | { 336 | "name": "4K厅", 337 | "url": "" 338 | } 339 | ], 340 | "sell": 1, 341 | "snack": 1 342 | }, 343 | "promotion": {} 344 | }, 345 | { 346 | "id": 5359, 347 | "mark": 0, 348 | "nm": "新华国际影城(宝盛店)", 349 | "sellPrice": "40.5", 350 | "addr": "海淀区宝盛北里西区28号兴美生活广场5层", 351 | "distance": "5.7000", 352 | "tag": { 353 | "allowRefund": 0, 354 | "buyout": 0, 355 | "cityCardTag": 0, 356 | "deal": 0, 357 | "endorse": 0, 358 | "hallTypeVOList": [], 359 | "sell": 1, 360 | "snack": 1 361 | }, 362 | "promotion": {} 363 | }, 364 | { 365 | "id": 9647, 366 | "mark": 0, 367 | "nm": "沃美影城(回龙观店)", 368 | "sellPrice": "39", 369 | "addr": "昌平区回龙观同成街华联购物中心四楼（城铁回龙观站出口对面）", 370 | "distance": "5.8000", 371 | "tag": { 372 | "allowRefund": 0, 373 | "buyout": 0, 374 | "cityCardTag": 0, 375 | "deal": 0, 376 | "endorse": 0, 377 | "hallType": [ 378 | "杜比全景声厅" 379 | ], 380 | "hallTypeVOList": [ 381 | { 382 | "name": "杜比全景声厅", 383 | "url": "" 384 | } 385 | ], 386 | "sell": 1, 387 | "snack": 1 388 | }, 389 | "promotion": {} 390 | }, 391 | { 392 | "id": 86, 393 | "mark": 0, 394 | "nm": "橙天嘉禾影城(万柳店)", 395 | "sellPrice": "45", 396 | "addr": "海淀区巴沟路2号华联万柳购物中心5层", 397 | "distance": "6000", 398 | "tag": { 399 | "allowRefund": 0, 400 | "buyout": 0, 401 | "cityCardTag": 0, 402 | "deal": 0, 403 | "endorse": 0, 404 | "hallTypeVOList": [], 405 | "sell": 1, 406 | "snack": 1, 407 | "vipTag": "折扣卡" 408 | }, 409 | "promotion": { 410 | "cardPromotionTag": "限时¥12.9促销开卡，首单更优惠" 411 | } 412 | }, 413 | { 414 | "id": 23901, 415 | "mark": 0, 416 | "nm": "百誉朗克影城", 417 | "sellPrice": "33", 418 | "addr": "朝阳区林萃西里16号楼华创生活广场F1层", 419 | "distance": "6.1000", 420 | "tag": { 421 | "allowRefund": 0, 422 | "buyout": 0, 423 | "cityCardTag": 0, 424 | "deal": 0, 425 | "endorse": 1, 426 | "hallTypeVOList": [], 427 | "sell": 1, 428 | "snack": 1, 429 | "vipTag": "折扣卡" 430 | }, 431 | "promotion": { 432 | "cardPromotionTag": "开卡特惠，首单2张立减2元" 433 | } 434 | }, 435 | { 436 | "id": 141, 437 | "mark": 0, 438 | "nm": "海淀工人文化宫", 439 | "sellPrice": "23", 440 | "addr": "海淀区万柳华府北街2号（万柳华联商城南门对面）", 441 | "distance": "6.2000", 442 | "tag": { 443 | "allowRefund": 1, 444 | "buyout": 0, 445 | "cityCardTag": 0, 446 | "deal": 0, 447 | "endorse": 1, 448 | "hallTypeVOList": [], 449 | "sell": 1, 450 | "snack": 1, 451 | "vipTag": "折扣卡" 452 | }, 453 | "promotion": { 454 | "cardPromotionTag": "开卡特惠，首单2张立减10元" 455 | } 456 | }, 457 | { 458 | "id": 58, 459 | "mark": 0, 460 | "nm": "金逸影城(新都店)", 461 | "sellPrice": "30", 462 | "addr": "海淀区西三旗建材城中路6号新都购物广场1层", 463 | "distance": "6.3000", 464 | "tag": { 465 | "allowRefund": 0, 466 | "buyout": 0, 467 | "cityCardTag": 0, 468 | "deal": 0, 469 | "endorse": 0, 470 | "hallTypeVOList": [], 471 | "sell": 1, 472 | "snack": 1 473 | }, 474 | "promotion": {} 475 | }, 476 | { 477 | "id": 155, 478 | "mark": 0, 479 | "nm": "UME国际影城(华星店)", 480 | "sellPrice": "39.5", 481 | "addr": "海淀区双榆树科学院南路44号（双安商场对面）", 482 | "distance": "6.8000", 483 | "tag": { 484 | "allowRefund": 0, 485 | "buyout": 0, 486 | "cityCardTag": 0, 487 | "deal": 0, 488 | "endorse": 0, 489 | "hallType": [ 490 | "IMAX厅", 491 | "CGS中国巨幕厅" 492 | ], 493 | "hallTypeVOList": [ 494 | { 495 | "name": "IMAX厅", 496 | "url": "" 497 | }, 498 | { 499 | "name": "CGS中国巨幕厅", 500 | "url": "" 501 | } 502 | ], 503 | "sell": 1, 504 | "snack": 1, 505 | "vipTag": "折扣卡" 506 | }, 507 | "promotion": { 508 | "cardPromotionTag": "开卡特惠，首单2张立减2元" 509 | } 510 | } 511 | ] --------------------------------------------------------------------------------