zjueva/2020-fronted-nx
10
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

新的主页

Browse Source 
新的主页
This commit is contained in:
ChenXuzheng
2020-02-08 18:11:59 +08:00
parent d7ecb90af3
commit b946d6eeed
20 changed files with 567 additions and 753 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Home/Teams1.jsx
+47
View File
@@ -0,0 +1,47 @@
import React from 'react';
import QueueAnim from 'rc-queue-anim';
import { Row, Col } from 'antd';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { getChildrenToRender, isImg } from './utils';
class Teams1 extends React.PureComponent {
getBlockChildren = (data) =>
data.map((item, i) => {
const { titleWrapper, ...$item } = item;
return (
<Col key={i.toString()} {...$item}>
{titleWrapper.children.map(getChildrenToRender)}
</Col>
);
});
render() {
const { ...props } = this.props;
const { dataSource } = props;
delete props.dataSource;
delete props.isMobile;
const listChildren = this.getBlockChildren(dataSource.block.children);
return (
<div {...props} {...dataSource.wrapper}>
<div {...dataSource.page}>
<div {...dataSource.titleWrapper}>
{dataSource.titleWrapper.children.map(getChildrenToRender)}
</div>
<OverPack {...dataSource.OverPack}>
<QueueAnim
type="bottom"
key="block"
leaveReverse
{...dataSource.block}
component={Row}
>
{listChildren}
</QueueAnim>
</OverPack>
</div>
</div>
);
}
}
export default Teams1;
src/Home/data.source.js
+236
View File
@@ -0,0 +1,236 @@
import React from 'react';
export const Teams10DataSource = {
wrapper: { className: 'home-page-wrapper teams1-wrapper' },
page: { className: 'home-page teams1' },
OverPack: { playScale: 0.3, className: '' },
titleWrapper: {
className: 'title-wrapper',
children: [
{
name: 'title',
children: (
<>
<p>
精彩瞬间回放<br />
</p>
</>
),
},
],
},
block: {
className: 'block-wrapper',
children: [
{
name: 'block0',
className: 'block',
md: 8,
xs: 24,
titleWrapper: {
children: [
{
name: 'image',
className: 'teams1-image k6d84n0pi88-editor_css',
children:
'https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*--rVR4hclJYAAAAAAAAAAABjARQnAQ',
},
{
name: 'title',
className: 'teams1-title k6d8cd2spqg-editor_css',
children: '叶秀英',
},
{
name: 'content',
className: 'teams1-job k6d8cjs331-editor_css',
children: '公司+职位 信息暂缺',
},
{
name: 'content1',
className: 'teams1-content k6d8cnw0kx-editor_css',
children: (
<>
<p>cxz</p>
</>
),
},
],
},
},
{
name: 'block~k6d8gm5t74a',
className: 'block',
md: 8,
xs: 24,
titleWrapper: {
children: [
{
name: 'image',
className: 'teams1-image k6d84n0pi88-editor_css',
children:
'https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*--rVR4hclJYAAAAAAAAAAABjARQnAQ',
},
{
name: 'title',
className: 'teams1-title k6d8cd2spqg-editor_css',
children: '叶秀英',
},
{
name: 'content',
className: 'teams1-job k6d8cjs331-editor_css',
children: '公司+职位 信息暂缺',
},
{
name: 'content1',
className: 'teams1-content k6d8cnw0kx-editor_css',
children: (
<>
<p>cxz</p>
</>
),
},
],
},
},
{
name: 'block~k6d8gmrc9da',
className: 'block',
md: 8,
xs: 24,
titleWrapper: {
children: [
{
name: 'image',
className: 'teams1-image k6d84n0pi88-editor_css',
children:
'https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*--rVR4hclJYAAAAAAAAAAABjARQnAQ',
},
{
name: 'title',
className: 'teams1-title k6d8cd2spqg-editor_css',
children: '叶秀英',
},
{
name: 'content',
className: 'teams1-job k6d8cjs331-editor_css',
children: '公司+职位 信息暂缺',
},
{
name: 'content1',
className: 'teams1-content k6d8cnw0kx-editor_css',
children: (
<>
<p>cxz</p>
</>
),
},
],
},
},
{
name: 'block~k6d8gn5m3i9',
className: 'block',
md: 8,
xs: 24,
titleWrapper: {
children: [
{
name: 'image',
className: 'teams1-image k6d84n0pi88-editor_css',
children:
'https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*--rVR4hclJYAAAAAAAAAAABjARQnAQ',
},
{
name: 'title',
className: 'teams1-title k6d8cd2spqg-editor_css',
children: '叶秀英',
},
{
name: 'content',
className: 'teams1-job k6d8cjs331-editor_css',
children: '公司+职位 信息暂缺',
},
{
name: 'content1',
className: 'teams1-content k6d8cnw0kx-editor_css',
children: (
<>
<p>cxz</p>
</>
),
},
],
},
},
{
name: 'block~k6d8gnp75f',
className: 'block',
md: 8,
xs: 24,
titleWrapper: {
children: [
{
name: 'image',
className: 'teams1-image k6d84n0pi88-editor_css',
children:
'https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*--rVR4hclJYAAAAAAAAAAABjARQnAQ',
},
{
name: 'title',
className: 'teams1-title k6d8cd2spqg-editor_css',
children: '叶秀英',
},
{
name: 'content',
className: 'teams1-job k6d8cjs331-editor_css',
children: '公司+职位 信息暂缺',
},
{
name: 'content1',
className: 'teams1-content k6d8cnw0kx-editor_css',
children: (
<>
<p>cxz</p>
</>
),
},
],
},
},
{
name: 'block~k6d8go2ngsc',
className: 'block',
md: 8,
xs: 24,
titleWrapper: {
children: [
{
name: 'image',
className: 'teams1-image k6d84n0pi88-editor_css',
children:
'https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*--rVR4hclJYAAAAAAAAAAABjARQnAQ',
},
{
name: 'title',
className: 'teams1-title k6d8cd2spqg-editor_css',
children: '叶秀英',
},
{
name: 'content',
className: 'teams1-job k6d8cjs331-editor_css',
children: '公司+职位 信息暂缺',
},
{
name: 'content1',
className: 'teams1-content k6d8cnw0kx-editor_css',
children: (
<>
<p>cxz</p>
</>
),
},
],
},
},
],
},
};
src/Home/documentation.md
+4
View File
@@ -0,0 +1,4 @@
# 如何使用：
- umi 里如何使用[请查看](https://landing.ant.design/docs/use/umi)。
- 其它脚手架使用[请查看](https://landing.ant.design/docs/use/getting-started)。
src/Home/index.jsx
+67
View File
@@ -0,0 +1,67 @@
/* eslint no-undef: 0 */
/* eslint arrow-parens: 0 */
import React from 'react';
import { enquireScreen } from 'enquire-js';
import Teams1 from './Teams1';
import { Teams10DataSource } from './data.source';
import './less/antMotionStyle.less';
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 = [
<Teams1
id="Teams1_0"
key="Teams1_0"
dataSource={Teams10DataSource}
isMobile={this.state.isMobile}
/>,
];
return (
<div
className="templates-wrapper"
ref={(d) => {
this.dom = d;
}}
>
{/* 如果不是 dva 2.0 替换成 {children} start */}
{this.state.show && children}
{/* 如果不是 dva 2.0 替换成 {children} end */}
</div>
);
}
}
src/Home/less/antMotionStyle.less
+5
View File
@@ -0,0 +1,5 @@
@import './common.less';
@import './custom.less';
@import './content.less';
@import './teams1.less';
@import './edit.less';
src/Home/less/common.less
+24
View File
@@ -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;
}
src/Home/less/content.less
+44
View File
@@ -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;
}
}
}
}
src/Home/less/custom.less
+35
View File
@@ -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);
}
}
src/Home/less/edit.less
+13
View File
@@ -0,0 +1,13 @@
#Teams1_0 .ant-row > .ant-col > .k6d84n0pi88-editor_css {
width: 20px;
clear: both;
}
#Teams1_0 .ant-row > .ant-col > .k6d8cd2spqg-editor_css {
display: none;
}
#Teams1_0 .ant-row > .ant-col > .k6d8cjs331-editor_css {
display: none;
}
#Teams1_0 .ant-row > .ant-col > .k6d8cnw0kx-editor_css {
font-size: 20px;
}
src/Home/less/teams1.less
+55
View File
@@ -0,0 +1,55 @@
@teams1: teams1;
.@{teams1}-wrapper {
min-height: 446px;
overflow: hidden;
.@{teams1} {
overflow: hidden;
height: 100%;
padding: 64px 24px;
> .title-wrapper {
margin: 0 auto 48px;
}
.block-wrapper {
position: relative;
height: 100%;
overflow: hidden;
padding: 20px 0;
.block {
display: inline-block;
text-align: center;
margin-bottom: 48px;
&.queue-anim-leaving {
position: relative !important;
}
}
}
&-image, &-title, &-job, &-content {
width: 200px;
margin: auto;
line-height: 1.5;
}
&-image {
color: #404040;
img {
width: 100%;
}
}
&-title {
font-size: 24px;
margin: 24px auto 8px;
}
&-job {
margin: 8px auto;
}
&-job, &-content {
font-size: 12px;
color: #919191;
}
}
}
@media screen and (max-width: 767px) {
.@{teams1}-wrapper {
min-height: 1440px;
}
}
src/Home/utils.js
+18
View File
@@ -0,0 +1,18 @@
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';
tag = item.href ? 'a' : tag;
let children = typeof item.children === 'string' && item.children.match(isImg)
? React.createElement('img', { src: item.children, alt: 'img' })
: 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);
};