├── mock └── .gitkeep ├── public └── .gitkeep ├── src ├── routes │ └── Home │ │ ├── less │ │ ├── edit.less │ │ ├── antMotion_style.less │ │ ├── common.less │ │ ├── footer.less │ │ ├── point.less │ │ ├── content.less │ │ ├── custom.less │ │ ├── global.less │ │ ├── content3.less │ │ ├── content1.less │ │ ├── content2.less │ │ ├── content0.less │ │ └── nav.less │ │ ├── Footer.jsx │ │ ├── Point.jsx │ │ ├── Content0.jsx │ │ ├── index.jsx │ │ ├── Content1.jsx │ │ ├── Content2.jsx │ │ ├── documentation.md │ │ ├── Nav.jsx │ │ └── Content3.jsx ├── index.css ├── assets │ └── yay.jpg ├── services │ └── example.js ├── components │ └── Example.js ├── index.ejs ├── index.js ├── router.js ├── models │ └── example.js └── utils │ └── request.js ├── .roadhogrc.mock.js ├── .gitignore ├── .editorconfig ├── .roadhogrc ├── .eslintrc ├── package.json └── README.md /mock/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/routes/Home/less/edit.less: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.roadhogrc.mock.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | }; 4 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | 2 | html, body, :global(#root) { 3 | height: 100%; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /src/assets/yay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-motion/ant-motion-dva-cli-example/HEAD/src/assets/yay.jpg -------------------------------------------------------------------------------- /src/services/example.js: -------------------------------------------------------------------------------- 1 | import request from '../utils/request'; 2 | 3 | export function query() { 4 | return request('/api/users'); 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # production 7 | /dist 8 | 9 | # misc 10 | .DS_Store 11 | npm-debug.log* 12 | -------------------------------------------------------------------------------- /src/components/Example.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Example = () => { 4 | return ( 5 |
6 | Example 7 |
8 | ); 9 | }; 10 | 11 | Example.propTypes = { 12 | }; 13 | 14 | export default Example; 15 | -------------------------------------------------------------------------------- /src/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dva Demo 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [Makefile] 16 | indent_style = tab 17 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import dva from 'dva'; 2 | import './index.css'; 3 | 4 | // 1. Initialize 5 | const app = dva(); 6 | 7 | // 2. Plugins 8 | // app.use({}); 9 | 10 | // 3. Model 11 | // app.model(require('./models/example')); 12 | 13 | // 4. Router 14 | app.router(require('./router')); 15 | 16 | // 5. Start 17 | app.start('#root'); 18 | -------------------------------------------------------------------------------- /src/routes/Home/less/antMotion_style.less: -------------------------------------------------------------------------------- 1 | @import './global.less'; 2 | @import './common.less'; 3 | @import './custom.less'; 4 | @import './point.less'; 5 | @import './content.less'; 6 | @import './nav.less'; 7 | @import './content0.less'; 8 | @import './content1.less'; 9 | @import './content2.less'; 10 | @import './content3.less'; 11 | @import './footer.less'; 12 | @import './edit.less'; -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Router, Route, Switch } from 'dva/router'; 3 | import IndexPage from './routes/Home'; 4 | 5 | function RouterConfig({ history }) { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | } 14 | 15 | export default RouterConfig; 16 | -------------------------------------------------------------------------------- /src/routes/Home/less/common.less: -------------------------------------------------------------------------------- 1 | @import './global'; 2 | 3 | .content-wrapper > .tween-one-leaving, .queue-anim-leaving { 4 | position: absolute !important; 5 | width: 100%; 6 | } 7 | 8 | .video { 9 | max-width: 800px; 10 | } 11 | 12 | .templates-wrapper { 13 | user-select: none; 14 | } 15 | 16 | .is-edit { 17 | * { 18 | pointer-events: none; 19 | } 20 | } 21 | 22 | #react-content{ 23 | min-height: 100%; 24 | } -------------------------------------------------------------------------------- /.roadhogrc: -------------------------------------------------------------------------------- 1 | { 2 | "entry": "src/index.js", 3 | "disableCSSModules": true, 4 | "env": { 5 | "development": { 6 | "extraBabelPlugins": [ 7 | "dva-hmr", 8 | "transform-runtime" 9 | ] 10 | }, 11 | "production": { 12 | "extraBabelPlugins": [ 13 | "transform-runtime" 14 | ] 15 | } 16 | }, 17 | "extraBabelPlugins": [ 18 | "transform-runtime", 19 | ["import", { "libraryName": "antd", "style": true }] 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /src/models/example.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | 4 | namespace: 'example', 5 | 6 | state: {}, 7 | 8 | subscriptions: { 9 | setup({ dispatch, history }) { // eslint-disable-line 10 | }, 11 | }, 12 | 13 | effects: { 14 | *fetch({ payload }, { call, put }) { // eslint-disable-line 15 | yield put({ type: 'save' }); 16 | }, 17 | }, 18 | 19 | reducers: { 20 | save(state, action) { 21 | return { ...state, ...action.payload }; 22 | }, 23 | }, 24 | 25 | }; 26 | -------------------------------------------------------------------------------- /src/routes/Home/less/footer.less: -------------------------------------------------------------------------------- 1 | @import './custom.less'; 2 | 3 | @footer: footer0; 4 | .@{footer} { 5 | background-color: @template-bg-color; 6 | text-align: center; 7 | height: 80px; 8 | color: @template-footer-text-color; 9 | overflow: hidden; 10 | position: relative; 11 | span { 12 | display: block; 13 | margin: 20px auto 0; 14 | } 15 | } 16 | 17 | @media screen and (max-width: 767px) { 18 | .@{footer} { 19 | > div { 20 | width: 90%; 21 | margin: auto; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/routes/Home/less/point.less: -------------------------------------------------------------------------------- 1 | @import './custom.less'; 2 | 3 | @point: templates-list; 4 | .@{point}-wrapper { 5 | position: fixed; 6 | z-index: 9998; 7 | top: 0; 8 | right: 20px; 9 | width: 8px; 10 | display: flex; 11 | height: 100%; 12 | align-items: center; 13 | pointer-events: none 14 | } 15 | 16 | .@{point} { 17 | width: 8px; 18 | height: 8px; 19 | background: @primary-color; 20 | border-radius: 6px; 21 | float: left; 22 | margin: 4px auto; 23 | opacity: .5; 24 | cursor: pointer; 25 | pointer-events: auto; 26 | transition: opacity .3s; 27 | &.active{ 28 | opacity: 1; 29 | } 30 | } 31 | 32 | @media screen and (max-width: 767px) { 33 | .@{point}-wrapper { 34 | display: none; 35 | } 36 | } -------------------------------------------------------------------------------- /src/routes/Home/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import TweenOne from 'rc-tween-one'; 3 | import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'; 4 | 5 | class Footer extends React.Component { 6 | 7 | static defaultProps = { 8 | className: 'footer0', 9 | }; 10 | 11 | render() { 12 | const props = { ...this.props }; 13 | delete props.isMobile; 14 | return ( 18 | 22 | 23 | Copyright © 2017 The Project by Ant Motion. All Rights Reserved 24 | 25 | 26 | ); 27 | } 28 | } 29 | 30 | export default Footer; 31 | -------------------------------------------------------------------------------- /src/utils/request.js: -------------------------------------------------------------------------------- 1 | import fetch from 'dva/fetch'; 2 | 3 | function parseJSON(response) { 4 | return response.json(); 5 | } 6 | 7 | function checkStatus(response) { 8 | if (response.status >= 200 && response.status < 300) { 9 | return response; 10 | } 11 | 12 | const error = new Error(response.statusText); 13 | error.response = response; 14 | throw error; 15 | } 16 | 17 | /** 18 | * Requests a URL, returning a promise. 19 | * 20 | * @param {string} url The URL we want to request 21 | * @param {object} [options] The options we want to pass to "fetch" 22 | * @return {object} An object containing either "data" or "err" 23 | */ 24 | export default function request(url, options) { 25 | return fetch(url, options) 26 | .then(checkStatus) 27 | .then(parseJSON) 28 | .then(data => ({ data })) 29 | .catch(err => ({ err })); 30 | } 31 | -------------------------------------------------------------------------------- /src/routes/Home/less/content.less: -------------------------------------------------------------------------------- 1 | @content: content-template; 2 | .@{content}-wrapper { 3 | width: 100%; 4 | background: #fff; 5 | height: 100vh; 6 | border-color: #666; 7 | position: relative; 8 | // min-height: 685px; 9 | // align-items: center; 10 | // display: flex; 11 | .@{content} { 12 | width: 100%; 13 | max-width: 1200px; 14 | height: 100%; 15 | margin: auto; 16 | position: relative; 17 | h1 { 18 | font-size: 32px; 19 | font-weight: normal; 20 | color: #404040; 21 | line-height: 48px; 22 | } 23 | > p { 24 | font-size: 12px; 25 | margin: 20px auto; 26 | } 27 | } 28 | } 29 | 30 | .content-half-wrapper { 31 | height: 50vh; 32 | // min-height: 342px; 33 | } 34 | 35 | @media screen and (max-width: 767px) { 36 | .@{content}-wrapper { 37 | .@{content} { 38 | // width: 90%; 39 | h1 { 40 | font-size: 24px; 41 | } 42 | /*h1, > p { 43 | text-align: center; 44 | }*/ 45 | } 46 | } 47 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "airbnb", 4 | "rules": { 5 | "arrow-body-style": [0], 6 | "consistent-return": [0], 7 | "generator-star-spacing": [0], 8 | "global-require": [1], 9 | "import/extensions": [0], 10 | "import/no-extraneous-dependencies": [0], 11 | "import/no-unresolved": [0], 12 | "import/prefer-default-export": [0], 13 | "jsx-a11y/no-static-element-interactions": [0], 14 | "no-bitwise": [0], 15 | "no-cond-assign": [0], 16 | "no-else-return": [0], 17 | "no-nested-ternary": [0], 18 | "no-restricted-syntax": [0], 19 | "no-use-before-define": [0], 20 | "react/forbid-prop-types": [0], 21 | "react/jsx-filename-extension": [1, { "extensions": [".js"] }], 22 | "react/jsx-no-bind": [0], 23 | "react/prefer-stateless-function": [0], 24 | "react/prop-types": [0], 25 | "require-yield": [1] 26 | }, 27 | "parserOptions": { 28 | "ecmaFeatures": { 29 | "experimentalObjectRestSpread": true 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/routes/Home/Point.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import ScrollAnim from 'rc-scroll-anim'; 4 | 5 | const Link = ScrollAnim.Link; 6 | export default class Point extends React.Component { 7 | static propTypes = { 8 | className: PropTypes.string, 9 | style: PropTypes.object, 10 | data: PropTypes.array, 11 | }; 12 | 13 | static defaultProps = { 14 | className: 'templates-list', 15 | }; 16 | 17 | render() { 18 | const children = this.props.data.map((item) => { 19 | if (item.match('nav') || item.match('footer')) { 20 | return null; 21 | } 22 | return ( 23 | 29 | ); 30 | }).filter(item => item); 31 | return (
35 |
36 | {children} 37 |
38 |
); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "start": "roadhog server", 5 | "build": "roadhog build", 6 | "lint": "eslint --ext .js src test", 7 | "precommit": "npm run lint" 8 | }, 9 | "engines": { 10 | "install-node": "6.11.1" 11 | }, 12 | "dependencies": { 13 | "antd": "^2.13.6", 14 | "babel-runtime": "^6.9.2", 15 | "dva": "^2.0.3", 16 | "enquire-js": "^0.2.1", 17 | "rc-banner-anim": "^1.0.0", 18 | "rc-queue-anim": "1.x", 19 | "rc-scroll-anim": "2.x", 20 | "rc-tween-one": "2.x", 21 | "react": "^15.4.0", 22 | "react-dom": "^15.4.0" 23 | }, 24 | "devDependencies": { 25 | "babel-eslint": "^7.1.1", 26 | "babel-plugin-dva-hmr": "^0.3.2", 27 | "babel-plugin-import": "^1.6.2", 28 | "babel-plugin-transform-runtime": "^6.9.0", 29 | "eslint": "^3.12.2", 30 | "eslint-config-airbnb": "^13.0.0", 31 | "eslint-plugin-import": "^2.2.0", 32 | "eslint-plugin-jsx-a11y": "^2.2.3", 33 | "eslint-plugin-react": "^6.8.0", 34 | "expect": "^1.20.2", 35 | "husky": "^0.12.0", 36 | "redbox-react": "^1.4.3", 37 | "roadhog": "^1.2.1" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ant-motion-dva-cli-example 2 | 3 | [ant motion](https://motion.ant.design/) 的首页在 [dva-cli](https://github.com/dvajs/dva-cli)0.8.0 里运行的例子 4 | 5 | 请参照[documentation](https://github.com/ant-motion/ant-motion-dva-cli-example/blob/2.0/src/routes/Home/documentation.md)里的步骤。。 6 | 7 | ### 2.0 的改动 8 | 9 | 2.0 里的改动是依据 dva 2.x 脚手架的改动而改动，如果不是 dva-cli 脚手架，去除 index.js 里的 show 相关代码： 10 | 11 | 1. stage 里的 [show](https://github.com/ant-motion/ant-motion-dva-cli-example/blob/2.0/src/routes/Home/index.jsx#L20); 12 | 2. didMount 里的 [if 处理](https://github.com/ant-motion/ant-motion-dva-cli-example/blob/2.0/src/routes/Home/index.jsx#L29-L37) 13 | ```jsx 14 | // dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响； 15 | if (location.port) { 16 | // 样式 build 时间在 200-300ms 之间; 17 | setTimeout(() => { 18 | this.setState({ 19 | show: true, 20 | }); 21 | }, 500); 22 | } 23 | ``` 24 | 25 | 3. return 里 [children 的处理](https://github.com/ant-motion/ant-motion-dva-cli-example/blob/2.0/src/routes/Home/index.jsx#L64), 替换为 `{children}` 26 | 27 | 0.7.8 例子请切回 [master](https://github.com/ant-motion/ant-motion-dva-cli-example/tree/master) 28 | 29 | -------------------------------------------------------------------------------- /src/routes/Home/less/custom.less: -------------------------------------------------------------------------------- 1 | @import "~antd/lib/style/themes/default.less"; 2 | 3 | @link-color : #019BF0; 4 | @link-hover-color : tint(@link-color, 20%); 5 | @link-active-color : shade(@link-color, 5%); 6 | @link-hover-decoration : none; 7 | 8 | @line-color: #e9e9e9; 9 | @line-deep-color: #979797; 10 | @disabled-color: #5B5B5B; 11 | @list-disabled-color: #ccc; 12 | 13 | @page-bg-color: #fff; 14 | 15 | @shadow-color: rgba(0, 0, 0, 0.15); 16 | 17 | @title-color: #404040; 18 | 19 | 20 | @template-bg-color: #333; 21 | @template-bg-color-light: #ECECEC; 22 | @template-nav-bg-color: fade(@template-bg-color, 95%); 23 | @template-text-color: #CCC; 24 | @template-text-title-color: #BCBCBC; 25 | @template-text-color-light: #FFF; 26 | @template-footer-text-color: #666; 27 | 28 | @animate-duration: .45s; 29 | 30 | // 详细页图片或框框的样式; 31 | .page-shadow() { 32 | box-shadow: 0 5px 8px @shadow-color; 33 | } 34 | 35 | .page-pro() { 36 | border-radius: 6px; 37 | border: 1px solid @line-color; 38 | transform: translateY(0px); 39 | transition: transform .3s @ease-out, box-shadow .3s @ease-out; 40 | &:hover { 41 | .page-shadow(); 42 | transform: translateY(-5px); 43 | } 44 | } 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/routes/Home/less/global.less: -------------------------------------------------------------------------------- 1 | @import 'custom'; 2 | html, body { 3 | font-family: "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif; 4 | } 5 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | ul, 11 | ol { 12 | list-style: none; 13 | } 14 | 15 | body video { 16 | display: block; 17 | } 18 | 19 | .text-center { 20 | text-align: center; 21 | } 22 | 23 | a { 24 | transition: color @animate-duration @ease-out; 25 | } 26 | 27 | h1, h2, h3, h4 { 28 | color: @title-color 29 | } 30 | 31 | #react-content { 32 | width: 100%; 33 | overflow: hidden; 34 | } 35 | 36 | #page-404 { 37 | min-height: 680px; 38 | text-align: center; 39 | padding-top: 10%; 40 | color: #999; 41 | & h1 { 42 | text-shadow: -1px -1px 4px #666; 43 | font-size: 200px; 44 | } 45 | } 46 | 47 | // 修改 nprogress load 色 48 | #nprogress { 49 | & .bar { 50 | background: @primary-color; 51 | } 52 | & .peg { 53 | box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color; 54 | } 55 | & .spinner-icon { 56 | border-top-color: @primary-color; 57 | border-left-color: @primary-color; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/routes/Home/less/content3.less: -------------------------------------------------------------------------------- 1 | @import './custom.less'; 2 | 3 | @content2: content2; 4 | .@{content2} { 5 | > h1, > p { 6 | text-align: center; 7 | position: relative; 8 | top: 15%; 9 | } 10 | &-contentWrapper { 11 | position: relative; 12 | top: 20%; 13 | height: 60%; 14 | ul { 15 | > li { 16 | display: inline-block; 17 | width: 33.33%; 18 | padding: 6% 5% 0; 19 | vertical-align: top; 20 | .img { 21 | display: inline-block; 22 | width: 15%; 23 | vertical-align: top; 24 | } 25 | .text { 26 | width: 85%; 27 | display: inline-block; 28 | padding-left: 8%; 29 | } 30 | } 31 | } 32 | } 33 | } 34 | 35 | @media screen and (max-width: 767px) { 36 | .@{content2}-wrapper { 37 | min-height: 960px; 38 | .@{content2} { 39 | overflow: hidden; 40 | width: 90%; 41 | margin: auto; 42 | > h1, > p { 43 | position: relative; 44 | top: auto; 45 | } 46 | > h1 { 47 | margin: 40px auto 20px; 48 | font-size: 24px; 49 | } 50 | &-contentWrapper { 51 | top: auto; 52 | margin: 20px auto; 53 | height: auto; 54 | ul { 55 | > li { 56 | position: relative; 57 | width: 90%; 58 | margin: auto; 59 | display: block; 60 | h1 { 61 | font-size: 20px; 62 | } 63 | &.queue-anim-leaving { 64 | position: relative !important; 65 | } 66 | } 67 | } 68 | } 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/routes/Home/Content0.jsx: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | import { Button, Icon } from 'antd'; 3 | import QueueAnim from 'rc-queue-anim'; 4 | import TweenOne from 'rc-tween-one'; 5 | import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'; 6 | 7 | class Content extends React.Component { 8 | render() { 9 | const props = { ...this.props }; 10 | delete props.isMobile; 11 | return ( 12 | 17 | 24 | 29 | 30 | 31 |

35 | 一个高效的页面动画解决方案 36 |

37 | 40 | 41 | 46 | 47 | 48 | 49 | ); 50 | } 51 | } 52 | 53 | Content.propTypes = { 54 | className: PropTypes.string, 55 | }; 56 | 57 | Content.defaultProps = { 58 | className: 'banner0', 59 | }; 60 | 61 | export default Content; 62 | -------------------------------------------------------------------------------- /src/routes/Home/less/content1.less: -------------------------------------------------------------------------------- 1 | @import './custom.less'; 2 | 3 | @content0: content0; 4 | 5 | .@{content0} { 6 | &-img { 7 | height: 100%; 8 | width: 40%; 9 | overflow: hidden; 10 | position: absolute; 11 | left: 0; 12 | span { 13 | display: inline-block; 14 | position: absolute; 15 | width: 55%; 16 | right: 10%; 17 | line-height: 50vh; 18 | height: 50vh; 19 | margin: auto; 20 | top: 0; 21 | bottom: 0; 22 | img { 23 | vertical-align: middle; 24 | } 25 | } 26 | } 27 | &-text { 28 | display: block; 29 | width: 55%; 30 | height: 150px; 31 | vertical-align: top; 32 | position: absolute; 33 | top: 0; 34 | bottom: 0; 35 | margin: auto; 36 | right: 0; 37 | & p, & h1 { 38 | position: relative !important; 39 | width: 75%; 40 | } 41 | & h1 { 42 | font-size: 32px; 43 | font-weight: normal; 44 | color: #404040; 45 | } 46 | & p { 47 | margin-top: 20px; 48 | } 49 | } 50 | } 51 | 52 | @media screen and (max-width: 767px) { 53 | .@{content0}-wrapper { 54 | height: 400px; 55 | .@{content0} { 56 | overflow: hidden; 57 | width: 90%; 58 | margin: auto; 59 | &-img, &-text { 60 | width: 100%; 61 | display: block; 62 | position: relative; 63 | text-align: center; 64 | } 65 | &-img { 66 | height: 200px; 67 | margin: 20px auto; 68 | span { 69 | right: 0; 70 | left: 0; 71 | margin: auto; 72 | width: 180px; 73 | height: 200px; 74 | line-height: 200px; 75 | } 76 | } 77 | &-text { 78 | height: 140px; 79 | margin-bottom: 20px; 80 | p, h1 { 81 | width: 100%; 82 | top: auto; 83 | } 84 | h1{ 85 | margin: 10px auto; 86 | font-size: 24px; 87 | } 88 | } 89 | } 90 | } 91 | } -------------------------------------------------------------------------------- /src/routes/Home/less/content2.less: -------------------------------------------------------------------------------- 1 | @import './custom.less'; 2 | 3 | @content1: content1; 4 | 5 | .@{content1} { 6 | &-img { 7 | height: 100%; 8 | width: 40%; 9 | overflow: hidden; 10 | position: absolute; 11 | right: 0; 12 | span { 13 | display: block; 14 | position: absolute; 15 | width: 55%; 16 | left: 10%; 17 | line-height: 50vh; 18 | height: 50vh; 19 | margin: auto; 20 | top: 0; 21 | bottom: 0; 22 | img { 23 | vertical-align: middle; 24 | } 25 | } 26 | } 27 | &-text { 28 | display: block; 29 | width: 55%; 30 | height: 150px; 31 | vertical-align: top; 32 | position: absolute; 33 | top: 0; 34 | bottom: 0; 35 | margin: auto; 36 | & p, & h1 { 37 | position: relative !important; 38 | width: 75%; 39 | float: right; 40 | } 41 | & h1 { 42 | font-size: 32px; 43 | font-weight: normal; 44 | color: #404040; 45 | } 46 | & p { 47 | margin-top: 20px; 48 | } 49 | } 50 | } 51 | 52 | @media screen and (max-width: 767px) { 53 | .@{content1}-wrapper { 54 | height: 400px; 55 | .@{content1} { 56 | overflow: hidden; 57 | width: 90%; 58 | margin: auto; 59 | &-img, &-text { 60 | width: 100%; 61 | display: block; 62 | position: relative; 63 | text-align: center; 64 | } 65 | &-img { 66 | margin: 20px auto; 67 | height: 200px; 68 | span { 69 | right: 0; 70 | left: 0; 71 | margin: auto; 72 | width: 180px; 73 | height: 200px; 74 | line-height: 200px; 75 | } 76 | } 77 | &-text { 78 | height: 140px; 79 | margin-top: 20px; 80 | p, h1 { 81 | width: 100%; 82 | top: auto; 83 | } 84 | p { 85 | margin-top: 20px; 86 | } 87 | h1 { 88 | font-size: 24px; 89 | } 90 | } 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /src/routes/Home/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { enquireScreen } from 'enquire-js'; 4 | import scrollScreen from 'rc-scroll-anim/lib/ScrollScreen'; 5 | 6 | import Nav from './Nav'; 7 | import Content0 from './Content0'; 8 | import Content1 from './Content1'; 9 | import Content2 from './Content2'; 10 | import Content3 from './Content3'; 11 | import Footer from './Footer'; 12 | import Point from './Point'; 13 | 14 | import './less/antMotion_style.less'; 15 | 16 | let isMobile; 17 | enquireScreen((b) => { 18 | isMobile = b; 19 | }); 20 | 21 | export default class Home extends React.Component { 22 | constructor(props) { 23 | super(props); 24 | this.state = { 25 | isMobile, 26 | show: !location.port, 27 | }; 28 | } 29 | 30 | componentDidMount() { 31 | // 适配手机屏幕; 32 | enquireScreen((b) => { 33 | this.setState({ isMobile: !!b }); 34 | }); 35 | // dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响； 36 | if (location.port) { 37 | // 样式 build 时间在 200-300ms 之间; 38 | setTimeout(() => { 39 | this.setState({ 40 | show: true, 41 | }); 42 | }, 500); 43 | } 44 | 45 | } 46 | 47 | render() { 48 | const children = [ 49 |