diff --git a/src/App.js b/src/App.js index ec98625..b57dd3d 100644 --- a/src/App.js +++ b/src/App.js @@ -33,6 +33,7 @@ class App extends Component { + diff --git a/src/Home/Content11.jsx b/src/Home/Content11.jsx index fd44471..c020246 100644 --- a/src/Home/Content11.jsx +++ b/src/Home/Content11.jsx @@ -22,16 +22,7 @@ class Content11 extends React.PureComponent { > {dataSource.titleWrapper.children.map(getChildrenToRender)} - - - + ); } diff --git a/src/Home/data.source.js b/src/Home/data.source.js index 841be2e..a16811c 100644 --- a/src/Home/data.source.js +++ b/src/Home/data.source.js @@ -45,7 +45,7 @@ export const Nav30DataSource = { name: 'item2', className: 'header3-item', children: { - href: 'https://wiki.zjueva.net/', + href: '/#/history', children: [ { children: ( @@ -58,7 +58,7 @@ export const Nav30DataSource = { { name: 'content~k6byeg17g6u', className: '', - children: '协会历史 ', + children: '了解更多 ', }, ], }, @@ -1915,10 +1915,7 @@ export const Content110DataSource = { }, ], }, - button: { - className: 'k6n8x5ig5jn-editor_css', - children: { a: { className: 'button', href: '/#/ticket', children: '立即报名' } }, - }, + }; diff --git a/src/Home/history.jsx b/src/Home/history.jsx index f415196..3466b85 100644 --- a/src/Home/history.jsx +++ b/src/Home/history.jsx @@ -2,7 +2,7 @@ /* eslint arrow-parens: 0 */ import React from 'react'; import { enquireScreen } from 'enquire-js'; - +import Learnmore from "../LearnMore"; import Content11 from './Content11'; import Feature1 from './Feature1'; import Nav3 from './Nav3'; @@ -82,12 +82,8 @@ export default class Page2 extends React.Component { dataSource={Feature12DataSource} isMobile={this.state.isMobile} />, - , + + ]; return (
+ + {dataSource.titleWrapper.children.map(getChildrenToRender)} + + + + + + ); + } +} + +export default Content11; diff --git a/src/LearnMore/Feature7.jsx b/src/LearnMore/Feature7.jsx new file mode 100644 index 0000000..4cadfe7 --- /dev/null +++ b/src/LearnMore/Feature7.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'; +import QueueAnim from 'rc-queue-anim'; +import { Row, Col } from 'antd'; + +import { getChildrenToRender } from './utils'; + +function Feature7(props) { + const { dataSource, isMobile, ...tagProps } = props; + const { blockWrapper, titleWrapper } = dataSource; + const childrenToRender = blockWrapper.children.map((item, i) => ( + + + {item.children.children.map(getChildrenToRender)} + + + )); + return ( +
+
+
+ {titleWrapper.children.map(getChildrenToRender)} +
+ + + {childrenToRender} + + +
+
+ ); +} + +export default Feature7; diff --git a/src/LearnMore/Pricing1.jsx b/src/LearnMore/Pricing1.jsx new file mode 100644 index 0000000..3efea08 --- /dev/null +++ b/src/LearnMore/Pricing1.jsx @@ -0,0 +1,71 @@ +import React from 'react'; +import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'; +import QueueAnim from 'rc-queue-anim'; +import { Row, Col, Button } from 'antd'; +import { getChildrenToRender } from './utils'; + +class Pricing1 extends React.PureComponent { + getChildrenToRender = (item) => { + const { + wrapper, + topWrapper, + name, + buttonWrapper, + line, + content, + money, + } = item.children; + return ( + + +
+
+ {name.children} +
+

+ {money.children} +

+
+
+ {content.children} +
+ +
+
+
+ + ); + }; + + render() { + const { ...props } = this.props; + const { dataSource } = props; + delete props.dataSource; + delete props.isMobile; + const { block } = dataSource; + const childrenToRender = block.children.map(this.getChildrenToRender); + return ( +
+
+
+ {dataSource.titleWrapper.children.map(getChildrenToRender)} +
+ + + {childrenToRender} + + +
+
+ ); + } +} + +export default Pricing1; diff --git a/src/LearnMore/data.source.js b/src/LearnMore/data.source.js new file mode 100644 index 0000000..da7df0c --- /dev/null +++ b/src/LearnMore/data.source.js @@ -0,0 +1,668 @@ +import React from 'react'; +export const Pricing10DataSource = { + wrapper: { className: 'home-page-wrapper pricing1-wrapper' }, + page: { className: 'home-page pricing1' }, + OverPack: { playScale: 0.3, className: 'pricing1-content-wrapper' }, + titleWrapper: { + className: 'pricing1-title-wrapper', + children: [ + { + name: 'title', + children: ( + <> +

协会规划

+ + ), + className: 'pricing1-title-h1', + }, + ], + }, + block: { + className: 'pricing1-block-wrapper', + children: [ + { + name: 'block0', + className: 'pricing1-block', + md: 8, + xs: 24, + children: { + wrapper: { className: 'pricing1-block-box ' }, + topWrapper: { className: 'pricing1-top-wrapper' }, + name: { + className: 'pricing1-name', + children: ( + <> +

+
+

+ + ), + }, + money: { + className: 'pricing1-money k6niku34c3-editor_css', + children: ( + <> +

公益组织

+ + ), + }, + content: { + className: 'pricing1-content k6nimnp5as-editor_css', + children: + 'E志者协会作为一个公益组织,着眼实际,立足于电脑电器维修;开拓创新,积极学习应用前沿知识;扎根实践,广泛开展校内外志愿服务活动。', + }, + line: { className: 'pricing1-line' }, + buttonWrapper: { + className: 'pricing1-button-wrapper', + children: { + a: { + className: 'pricing1-button', + href: '/#/ticket', + children: ( + <> +

+ + ), + }, + }, + }, + }, + }, + { + name: 'block~k6nil20ln5q', + className: 'pricing1-block', + md: 8, + xs: 24, + children: { + wrapper: { className: 'pricing1-block-box ' }, + topWrapper: { className: 'pricing1-top-wrapper' }, + name: { + className: 'pricing1-name', + children: ( + <> +

+
+

+ + ), + }, + money: { + className: 'pricing1-money k6ninis0ok-editor_css', + children: ( + <> +

校内校外

+ + ), + }, + content: { + className: 'pricing1-content k6niojh3hyf-editor_css', + children: + 'E志者协会的公益之路渐行渐宽,从校内到校外,从服务师生到服务社会群众,从一个电器维修小组发展到如今如此规模的志愿者团队。', + }, + line: { className: 'pricing1-line' }, + buttonWrapper: { + className: 'pricing1-button-wrapper', + children: { + a: { + className: 'pricing1-button', + href: '/#/ticket', + children: ( + <> +

浙里

+ + ), + }, + }, + }, + }, + }, + { + name: 'block~k6nil2ir9', + className: 'pricing1-block', + md: 8, + xs: 24, + children: { + wrapper: { className: 'pricing1-block-box ' }, + topWrapper: { className: 'pricing1-top-wrapper' }, + name: { + className: 'pricing1-name', + children: ( + <> +

+
+

+ + ), + }, + money: { + className: 'pricing1-money k6nip1p7ezh-editor_css', + children: ( + <> +

初心不忘

+ + ), + }, + content: { + className: 'pricing1-content k6nipheaxuh-editor_css', + children: + 'E志者协会不忘初心,在志愿服务精神的传承中开拓进取汲取课堂及课外前沿科学技术之精华,以服务社会为己任,传播先进公益文化为己负责', + }, + line: { className: 'pricing1-line' }, + buttonWrapper: { + className: 'pricing1-button-wrapper', + children: { + a: { + className: 'pricing1-button', + href: '/#/ticket', + children: ( + <> +

出发

+ + ), + }, + }, + }, + }, + }, + ], + }, +}; +export const Feature70DataSource = { + wrapper: { className: 'home-page-wrapper feature7-wrapper' }, + page: { className: 'home-page feature7' }, + OverPack: { playScale: 0.3 }, + titleWrapper: { + className: 'feature7-title-wrapper', + children: [ + { + name: 'title', + className: 'feature7-title-h1', + children: ( + <> +

+ 协会荣誉
+

+ + ), + }, + { + name: 'content', + className: 'feature7-title-content', + children: ( + <> +

+                   +                   +   ——仅摘取部分展示 +

+ + ), + }, + ], + }, + blockWrapper: { + className: 'feature7-block-wrapper', + gutter: 24, + children: [ + { + md: 6, + xs: 24, + name: 'block1', + className: 'feature7-block', + children: { + className: 'feature7-block-group k6nj0rhbyb-editor_css', + children: [ + { + name: 'title', + className: 'feature7-block-title k6niz26grar-editor_css', + children: ( + <> +

+ 2009年
+

+ + ), + }, + { + name: 'content', + className: 'feature7-block-content k6nj3s0akal-editor_css', + children: ( + <> +

+        协会获“ + 浙江省优秀志愿者服务队伍 + ”荣誉称号
+

+ + ), + }, + ], + }, + }, + { + md: 6, + xs: 24, + name: 'block~k6nj6uobqcl', + className: 'feature7-block', + children: { + className: 'feature7-block-group k6nj0rhbyb-editor_css', + children: [ + { + name: 'title', + className: 'feature7-block-title k6niz26grar-editor_css', + children: ( + <> +

+ 2009年
+

+ + ), + }, + { + name: 'content', + className: 'feature7-block-content k6nj3s0akal-editor_css', + children: ( + <> +

+ 协会获“浙江大学十大优秀志愿者服务集体”荣誉称号
+

+ + ), + }, + ], + }, + }, + { + md: 6, + xs: 24, + name: 'block~k6nj6vxuva', + className: 'feature7-block', + children: { + className: 'feature7-block-group k6nj0rhbyb-editor_css', + children: [ + { + name: 'title', + className: 'feature7-block-title k6niz26grar-editor_css', + children: ( + <> +

+ 2009年
+

+ + ), + }, + { + name: 'content', + className: 'feature7-block-content k6nj3s0akal-editor_css', + children: ( + <> +

+ 荣获“ 2009年度浙江大学优秀青年志愿者服务项目”荣誉称号
+

+ + ), + }, + ], + }, + }, + { + md: 6, + xs: 24, + name: 'block~k6nj6x1h1pp', + className: 'feature7-block', + children: { + className: 'feature7-block-group k6nj0rhbyb-editor_css', + children: [ + { + name: 'title', + className: 'feature7-block-title k6niz26grar-editor_css', + children: ( + <> +

+ 2010年
+

+ + ), + }, + { + name: 'content', + className: 'feature7-block-content k6nj3s0akal-editor_css', + children: ( + <> +

+ 协会由一星级社团跃升为三星级社团 +
+

+ + ), + }, + ], + }, + }, + { + md: 6, + xs: 24, + name: 'block~k6nj6xikh3', + className: 'feature7-block', + children: { + className: 'feature7-block-group k6nj0rhbyb-editor_css', + children: [ + { + name: 'title', + className: 'feature7-block-title k6niz26grar-editor_css', + children: ( + <> +

2012年

+ + ), + }, + { + name: 'content', + className: 'feature7-block-content k6nj3s0akal-editor_css', + children: ( + <> +

+ 连续三年协会获评“浙江大学学生十佳社团” +
+

+ + ), + }, + ], + }, + }, + { + md: 6, + xs: 24, + name: 'block~k6nj6ycl25', + className: 'feature7-block', + children: { + className: 'feature7-block-group k6nj0rhbyb-editor_css', + children: [ + { + name: 'title', + className: 'feature7-block-title k6niz26grar-editor_css', + children: ( + <> +

+ 2014年
+

+ + ), + }, + { + name: 'content', + className: 'feature7-block-content k6nj3s0akal-editor_css', + children: ( + <> +

+ 协会荣升为浙江大学四星级社团 +
+

+ + ), + }, + ], + }, + }, + { + md: 6, + xs: 24, + name: 'block~k6nj6z393nb', + className: 'feature7-block', + children: { + className: 'feature7-block-group k6nj0rhbyb-editor_css', + children: [ + { + name: 'title', + className: 'feature7-block-title k6niz26grar-editor_css', + children: ( + <> +

2015年

+ + ), + }, + { + name: 'content', + className: 'feature7-block-content k6nj3s0akal-editor_css', + children: ( + <> +

+ 协会入选浙江大学最美公益服务集体 +
+

+ + ), + }, + ], + }, + }, + { + md: 6, + xs: 24, + name: 'block~k6nj70ilku', + className: 'feature7-block', + children: { + className: 'feature7-block-group k6nj0rhbyb-editor_css', + children: [ + { + name: 'title', + className: 'feature7-block-title k6niz26grar-editor_css', + children: ( + <> +

+ 2015年
+

+ + ), + }, + { + name: 'content', + className: 'feature7-block-content k6nj3s0akal-editor_css', + children: ( + <> +

+ 协会获社团文化节精品活动二等奖 +
+

+ + ), + }, + ], + }, + }, + { + md: 6, + xs: 24, + name: 'block~k6nj716t4x', + className: 'feature7-block', + children: { + className: 'feature7-block-group k6nj0rhbyb-editor_css', + children: [ + { + name: 'title', + className: 'feature7-block-title k6niz26grar-editor_css', + children: ( + <> +

+ 2015年
+

+ + ), + }, + { + name: 'content', + className: 'feature7-block-content k6nj3s0akal-editor_css', + children: ( + <> +

+ 协会获社团精品课程一等奖 +
+

+

+ +
+
+

+ + ), + }, + ], + }, + }, + { + md: 6, + xs: 24, + name: 'block~k6nj71z66a', + className: 'feature7-block', + children: { + className: 'feature7-block-group k6nj0rhbyb-editor_css', + children: [ + { + name: 'title', + className: 'feature7-block-title k6niz26grar-editor_css', + children: ( + <> +

+ 2015年
+

+ + ), + }, + { + name: 'content', + className: 'feature7-block-content k6nj3s0akal-editor_css', + children: ( + <> +

+ 协会暑期社会实践入选为校级重点社会实践项目 +
+

+ + ), + }, + ], + }, + }, + { + md: 6, + xs: 24, + name: 'block~k6nj72nvlx', + className: 'feature7-block', + children: { + className: 'feature7-block-group k6nj0rhbyb-editor_css', + children: [ + { + name: 'title', + className: 'feature7-block-title k6niz26grar-editor_css', + children: ( + <> +

+ 2016年
+

+ + ), + }, + { + name: 'content', + className: 'feature7-block-content k6nj3s0akal-editor_css', + children: ( + <> +

+ 协会荣升为浙江大学五星级社团 +
+

+ + ), + }, + ], + }, + }, + { + md: 6, + xs: 24, + name: 'block~k6nj73ckswc', + className: 'feature7-block', + children: { + className: 'feature7-block-group k6nj0rhbyb-editor_css', + children: [ + { + name: 'title', + className: 'feature7-block-title k6niz26grar-editor_css', + children: ( + <> +

2016年

+ + ), + }, + { + name: 'content', + className: 'feature7-block-content k6nj3s0akal-editor_css', + children: ( + <> +

+ 协会荣获“ 2015年-2016年浙江大学学生示范性社团
+

+ + ), + }, + ], + }, + }, + ], + }, +}; +export const Content110DataSource = { + OverPack: { + className: 'home-page-wrapper content11-wrapper', + playScale: 0.3, + }, + titleWrapper: { + className: 'title-wrapper', + children: [ + { + name: 'image', + children: + 'https://gw.alipayobjects.com/zos/rmsportal/PiqyziYmvbgAudYfhuBr.svg', + className: 'title-image', + }, + { + name: 'title', + children: ( + <> +

+
+

+ + ), + className: 'title-h1', + }, + { + name: 'content', + children: ( + <> +

+ 每年协会成员都有多人进入竺可桢学院工高班和爱迪生班等荣誉班级就读 +

+ + ), + className: 'title-content k6njo4yb7gb-editor_css', + }, + { + name: 'content2', + children: ( + <> +

+ 此外在”中控杯“、”大学生数学建模竞赛“、”电路板焊接大赛“中多人获得优异奖项 +

+ + ), + className: 'title-content k6njr5kxpn-editor_css', + }, + ], + }, + button: { + className: '', + children: { a: { className: 'button', href: '/#/ticket', children: '立即报名' } }, + }, +}; diff --git a/src/LearnMore/documentation.md b/src/LearnMore/documentation.md new file mode 100644 index 0000000..ad58ffc --- /dev/null +++ b/src/LearnMore/documentation.md @@ -0,0 +1,4 @@ +# 如何使用: + +- umi 里如何使用[请查看](https://landing.ant.design/docs/use/umi)。 +- 其它脚手架使用[请查看](https://landing.ant.design/docs/use/getting-started)。 diff --git a/src/LearnMore/index.jsx b/src/LearnMore/index.jsx new file mode 100644 index 0000000..f982d7f --- /dev/null +++ b/src/LearnMore/index.jsx @@ -0,0 +1,100 @@ +/* eslint no-undef: 0 */ +/* eslint arrow-parens: 0 */ +import React from 'react'; +import { enquireScreen } from 'enquire-js'; +import Nav3 from "../Home/Nav3"; +import Pricing1 from './Pricing1'; +import Feature7 from './Feature7'; +import Content11 from './Content11'; +import Footer0 from '../Home/Footer0'; +import { + Pricing10DataSource, + Feature70DataSource, + Content110DataSource, +} from './data.source'; +import './less/antMotionStyle.less'; +import '../Home/less/antMotionStyle.less'; +import { + Nav30DataSource, + + Footer00DataSource, + + +} from '../Home/data.source'; +let isMobile; +enquireScreen((b) => { + isMobile = b; +}); + +const { location } = window; + +export default class Home extends React.Component { + constructor(props) { + super(props); + this.state = { + isMobile, + show: !location.port, // 如果不是 dva 2.0 请删除 + }; + } + + componentDidMount() { + // 适配手机屏幕; + enquireScreen((b) => { + this.setState({ isMobile: !!b }); + }); + // dva 2.0 样式在组件渲染之后动态加载,导致滚动组件不生效;线上不影响; + /* 如果不是 dva 2.0 请删除 start */ + if (location.port) { + // 样式 build 时间在 200-300ms 之间; + setTimeout(() => { + this.setState({ + show: true, + }); + }, 500); + } + /* 如果不是 dva 2.0 请删除 end */ + } + + render() { + + const children = [ + + , + , + , + , + ]; + return ( +
{ + this.dom = d; + }} + > + {/* 如果不是 dva 2.0 替换成 {children} start */} + {this.state.show && children} + {/* 如果不是 dva 2.0 替换成 {children} end */} +
+ ); + } +} diff --git a/src/LearnMore/less/antMotionStyle.less b/src/LearnMore/less/antMotionStyle.less new file mode 100644 index 0000000..def35ca --- /dev/null +++ b/src/LearnMore/less/antMotionStyle.less @@ -0,0 +1,7 @@ +@import './common.less'; +@import './custom.less'; +@import './content.less'; +@import './pricing1.less'; +@import './feature7.less'; +@import './content11.less'; +@import './edit.less'; \ No newline at end of file diff --git a/src/LearnMore/less/common.less b/src/LearnMore/less/common.less new file mode 100644 index 0000000..5cd8d98 --- /dev/null +++ b/src/LearnMore/less/common.less @@ -0,0 +1,24 @@ + +@import "~antd/lib/style/v2-compatible-reset.less"; + +body { + word-wrap: break-word; +} + +/* .content-wrapper > .tween-one-leaving, +.queue-anim-leaving { + // position: absolute !important; + // width: 100%; +} */ + +.video { + max-width: 800px; +} + +#react-content { + min-height: 100%; +} +.home-page-wrapper p { + padding: 0; + margin: 0; +} diff --git a/src/LearnMore/less/content.less b/src/LearnMore/less/content.less new file mode 100644 index 0000000..c5ebf36 --- /dev/null +++ b/src/LearnMore/less/content.less @@ -0,0 +1,44 @@ +@homepage: home-page; +.@{homepage}-wrapper { + width: 100%; + position: relative; + overflow: hidden; + .@{homepage} { + height: 100%; + max-width: 1200px; + position: relative; + margin: auto; + will-change: transform; + } + .title-wrapper > h1, > h1 { + font-size: 32px; + color: @text-color; + margin-bottom: 16px; + } + .title-wrapper { + margin: 0 auto 64px; + text-align: center; + } +} + +.@{homepage} { + padding: 128px 24px; +} + +@media screen and (max-width: 767px) { + .@{homepage}-wrapper { + .@{homepage} { + padding: 56px 24px; + >h1 { + font-size: 24px; + margin: 0 auto 32px; + &.title-h1 { + margin-bottom: 8px; + } + } + >p { + margin-bottom: 32px; + } + } + } +} diff --git a/src/LearnMore/less/content11.less b/src/LearnMore/less/content11.less new file mode 100644 index 0000000..70cf997 --- /dev/null +++ b/src/LearnMore/less/content11.less @@ -0,0 +1,46 @@ +@content11: content11; +.@{content11}-wrapper { + height: 480px; + background: url("https://gw.alipayobjects.com/zos/rmsportal/ZsWYzLOItgeaWDSsXdZd.svg") no-repeat bottom; + background-size: cover; + background-size: 100%; + margin: 0 auto; + overflow: hidden; + padding-top: 96px; + &.home-page-wrapper { + .title-wrapper { + margin-bottom: 32px; + } + } + .button { + box-shadow: 0 8px 16px #0554b7; + background: linear-gradient(to right, #05cbff, #1e5aff) !important; + height: 42px; + line-height: 42px; + font-size: 14px; + border: 0; + border-radius: 21px; + color: #fff; + width: 128px; + padding: 0 15px; + display: inline-block; + transition: transform .3s, box-shadow .3s; + &:hover { + transform: translateY(-4px); + box-shadow: 0 12px 20px #0554b7; + } + &:active { + transform: translateY(4px); + box-shadow: 0 4px 8px #0554b7; + } + } + .title-content { + line-height: 32px; + } +} + +@media screen and (max-width: 767px) { + .@{content11}-wrapper { + padding-bottom: 0; + } +} diff --git a/src/LearnMore/less/custom.less b/src/LearnMore/less/custom.less new file mode 100644 index 0000000..710e47c --- /dev/null +++ b/src/LearnMore/less/custom.less @@ -0,0 +1,35 @@ +@import "~antd/lib/style/themes/default.less"; + +@line-color: #e9e9e9; + +@shadow-color: rgba(0, 0, 0, 0.15); + +@bottom-bar-bg-color: #262626; +@bottom-bar-line-color: #000; + +@template-bg-color: #001529; +@template-bg-color-light: #ececec; +@template-nav-bg-color: #001529; +@template-text-color: #ccc; +@template-text-title-color: #bcbcbc; +@template-text-color-light: #fff; +@template-footer-text-color: #999; + +@animate-duration: .45s; + +/* 详细页图片或框框的样式; +*/ +.page-shadow() { + box-shadow: 0 5px 8px @shadow-color; +} + +.page-pro() { + border-radius: 6px; + border: 1px solid @line-color; + transform: translateY(0); + transition: transform .3s @ease-out, box-shadow .3s @ease-out; + &:hover { + .page-shadow(); + transform: translateY(-5px); + } +} diff --git a/src/LearnMore/less/edit.less b/src/LearnMore/less/edit.less new file mode 100644 index 0000000..eff2888 --- /dev/null +++ b/src/LearnMore/less/edit.less @@ -0,0 +1,50 @@ +#Pricing1_0 + .pricing1-block-box + > .pricing1-top-wrapper + > .k6niku34c3-editor_css { + font-size: 28px; +} +#Pricing1_0 .ant-col > .pricing1-block-box > .k6nimnp5as-editor_css { + font-size: 16px; +} +#Pricing1_0 + .pricing1-block-box + > .pricing1-top-wrapper + > .k6ninis0ok-editor_css { + font-size: 28px; +} +#Pricing1_0 .ant-col > .pricing1-block-box > .k6niojh3hyf-editor_css { + font-size: 16px; +} +#Pricing1_0 + .pricing1-block-box + > .pricing1-top-wrapper + > .k6nip1p7ezh-editor_css { + font-size: 28px; +} +#Pricing1_0 .ant-col > .pricing1-block-box > .k6nipheaxuh-editor_css { + font-size: 16px; +} +#Feature7_0 .ant-col > .feature7-block-group > .k6niz1ixc6-editor_css { + width: 0%; +} +#Feature7_0 .ant-col > .feature7-block-group > .k6nj0lolnf-editor_css { + display: none; +} +#Feature7_0 .ant-row > .ant-col > .k6nj0rhbyb-editor_css { + text-align: center; +} +#Feature7_0 .ant-col > .feature7-block-group > .k6niz26grar-editor_css { + width: 50px; + margin: 0px 0px 16px 90px; +} +#Feature7_0 .ant-col > .feature7-block-group > .k6nj3s0akal-editor_css { + font-size: 16px; +} +#Content11_0 .title-wrapper > .k6njo4yb7gb-editor_css { + font-size: 16px; +} +#Content11_0 .title-wrapper > .k6njr5kxpn-editor_css { + font-size: 16px; + height: 100px; +} diff --git a/src/LearnMore/less/feature7.less b/src/LearnMore/less/feature7.less new file mode 100644 index 0000000..f8f41b7 --- /dev/null +++ b/src/LearnMore/less/feature7.less @@ -0,0 +1,81 @@ +@feature7: feature7; + +.@{feature7} { + &-wrapper { + min-height: 564px; + margin: 0 auto; + overflow: hidden; + background-color: #f7f9fc; + + &.home-page-wrapper { + .home-page { + padding: 64px 24px; + } + } + } + + &-title { + + &-wrapper { + text-align: center; + margin-bottom: 40px; + } + + &-h1 { + font-size: 32px; + color: @text-color; + } + + &-content { + margin-top: 16px; + } + } + + &-block { + margin-top: 28px; + + &-group { + display: block; + padding: 28px 24px; + box-shadow: 0 2px 16px fade(#000, 8); + background-image: url('https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*fMOFSpRXMxsAAAAAAAAAAABkARQnAQ'); + background-repeat: no-repeat; + background-position: 100% 100%; + transition: box-shadow @animate-duration @ease-in-out, transform @animate-duration @ease-in-out; + + &:hover { + transform: translateY(-5px); + box-shadow: 0 6px 16px fade(#000, 12); + } + } + + &-image { + float: left; + width: 24px; + } + + &-title { + font-size: 14px; + float: left; + margin-left: 8px; + margin-bottom: 16px; + color: @text-color; + } + + &-content { + clear: both; + color: fade(@text-color, 75); + } + } +} + +@media screen and (max-width: 767px) { + .@{feature7}-wrapper { + min-height: 1540px; + &.home-page-wrapper { + .home-page { + padding: 56px 24px; + } + } + } +} diff --git a/src/LearnMore/less/pricing1.less b/src/LearnMore/less/pricing1.less new file mode 100644 index 0000000..ef73635 --- /dev/null +++ b/src/LearnMore/less/pricing1.less @@ -0,0 +1,85 @@ +@pricing1: pricing1; +.@{pricing1}-wrapper { + min-height: 760px; + .@{pricing1} { + >p { + text-align: center; + } + &-content-wrapper { + min-height: 400px; + } + &-block-box { + width: 260px; + border-radius: 4px; + background: #eef0f3; + text-align: center; + color: #666; + min-height: 400px; + margin: auto; + border: 1px solid transparent; + .page-pro(); + &.active { + border-color: @primary-color; + background: #fff; + .@{pricing1} { + &-top-wrapper { + background: @primary-color; + } + &-name, + &-money, + &-button { + color: #fff; + } + &-button { + background: @primary-color; + } + } + } + } + &-block { + margin-bottom: 24px; + } + &-top-wrapper { + width: 100%; + padding: 16px 24px; + } + &-name { + font-size: 14px; + } + &-money { + font-family: 'Helvetica Neue', sans-serif; + font-size: 32px; + color: #666; + } + &-content { + font-size: 12px; + line-height: 2; + font-weight: 300; + margin: 32px 24px 48px; + } + &-line { + display: block; + height: 1px; + background: #d9d9d9; + margin: 0 24px; + } + &-button-wrapper { + margin: 18px 24px; + } + &-button { + padding: 0 24px; + } + } + &.home-page-wrapper { + .@{pricing1}-title-wrapper { + margin-bottom: 64px; + text-align: center; + } + } +} + +@media screen and (max-width: 767px) { + .@{pricing1}-wrapper { + padding-bottom: 0; + } +} diff --git a/src/LearnMore/utils.js b/src/LearnMore/utils.js new file mode 100644 index 0000000..e9d9c4f --- /dev/null +++ b/src/LearnMore/utils.js @@ -0,0 +1,25 @@ + +import React from 'react'; +import { Button } from 'antd'; + +export const isImg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?/; +export const getChildrenToRender = (item, i) => { + let tag = item.name.indexOf('title') === 0 ? 'h1' : 'div'; + let children; + switch (item.name) { + case 'image': + children = React.createElement('img', { src: item.children, alt: 'img' }); + break; + case 'a': + children = React.createElement('a', { href: item.href }, [item.children]); + break; + default: + children = item.children; + } + if (item.name.indexOf('button') === 0 && typeof item.children === 'object') { + children = React.createElement(Button, { + ...item.children + }); + } + return React.createElement(tag, { key: i.toString(), ...item }, children); +};