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

put it to the zjueva.net and delete OSS

Browse Source
This commit is contained in:
ChenXuzheng
2020-08-03 18:26:26 +08:00
parent c69dcd072c
commit 674f594468
36 changed files with 21061 additions and 4260 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+14 -16
View File
@@ -1,11 +1,9 @@
import React, { Component } from 'react';
import React, { Component } from "react";
import { HashRouter, Route, Switch, Link } from "react-router-dom";
import { enquireScreen } from 'enquire-js';
import Home from './Home/main';
import { enquireScreen } from "enquire-js";
import Home from "./Home/main";
import Page2 from "./Home/history";
import Entry from "./Entry";
import Login from "./components/Login";
let isMobile;
@@ -26,17 +24,17 @@ class App extends Component {
});
}
render() {
return (<div>
<HashRouter>
<Switch>
<Route exact path='/history' component={Page2} />
<Route exact path='/ticket' component={Entry} />
<Route exact path='/' component={Home} />
<Route exact path='/login' component={Login} />
</Switch>
</HashRouter>
</div>
return (
<div>
<HashRouter>
<Switch>
<Route exact path="/history" component={Page2} />
<Route exact path="/ticket" component={Entry} />
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
</Switch>
</HashRouter>
</div>
);
}
}
src/Home/Footer0.jsx
-27
View File
@@ -1,27 +0,0 @@
import React from 'react';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
class Footer extends React.PureComponent {
render() {
const { ...props } = this.props;
const { dataSource } = props;
delete props.dataSource;
delete props.isMobile;
return (
<div {...props} {...dataSource.wrapper}>
<OverPack {...dataSource.OverPack}>
<TweenOne
animation={{ y: '+=30', opacity: 0, type: 'from' }}
key="footer"
{...dataSource.copyright}
>
{dataSource.copyright.children}
</TweenOne>
</OverPack>
</div>
);
}
}
export default Footer;
src/Home/Footer1.jsx
+69
View File
@@ -0,0 +1,69 @@
import React from 'react';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import QueueAnim from 'rc-queue-anim';
import { Row, Col } from 'antd';
import { getChildrenToRender } from './utils';
import { isImg } from './utils';
class Footer extends React.Component {
static defaultProps = {
className: 'footer1',
};
getLiChildren = (data) =>
data.map((item, i) => {
const { title, childWrapper, ...itemProps } = item;
return (
<Col key={i.toString()} {...itemProps} title={null} content={null}>
<h2 {...title}>
{typeof title.children === 'string' &&
title.children.match(isImg) ? (
<img src={title.children} width="100%" alt="img" />
) : (
title.children
)}
</h2>
<div {...childWrapper}>
{childWrapper.children.map(getChildrenToRender)}
</div>
</Col>
);
});
render() {
const { ...props } = this.props;
const { dataSource } = props;
delete props.dataSource;
delete props.isMobile;
const childrenToRender = this.getLiChildren(dataSource.block.children);
return (
<div {...props} {...dataSource.wrapper}>
<OverPack {...dataSource.OverPack}>
<QueueAnim
type="bottom"
key="ul"
leaveReverse
component={Row}
{...dataSource.block}
>
{childrenToRender}
</QueueAnim>
<TweenOne
animation={{ y: '+=30', opacity: 0, type: 'from' }}
key="copyright"
{...dataSource.copyrightWrapper}
>
<div {...dataSource.copyrightPage}>
<div {...dataSource.copyright}>
{dataSource.copyright.children}
</div>
</div>
</TweenOne>
</OverPack>
</div>
);
}
}
export default Footer;
src/Home/data.source.js
+805 -697
View File
File diff suppressed because it is too large Load Diff
src/Home/history.jsx
+89 -89
View File
@@ -1,105 +1,105 @@
/* eslint no-undef: 0 */
/* eslint arrow-parens: 0 */
import React from 'react';
import { enquireScreen } from 'enquire-js';
import React from "react";
import { enquireScreen } from "enquire-js";
import Content11 from './Content11';
import Feature1 from './Feature1';
import Nav3 from './Nav3';
import Content11 from "./Content11";
import Feature1 from "./Feature1";
import Nav3 from "./Nav3";
import {
Nav30DataSource,
Content110DataSource,
Feature13DataSource,
Feature11DataSource,
Feature12DataSource,
Footer00DataSource,
} from './data.source';
import './less/antMotionStyle.less';
import Footer0 from './Footer0';
Nav30DataSource,
Content110DataSource,
Feature13DataSource,
Feature11DataSource,
Feature12DataSource,
Footer10DataSource,
} from "./data.source";
import "./less/antMotionStyle.less";
import Footer1 from "./Footer1";
let isMobile;
enquireScreen((b) => {
isMobile = b;
isMobile = b;
});
const { location } = window;
export default class Page2 extends React.Component {
constructor(props) {
super(props);
this.state = {
isMobile,
show: !location.port, // 如果不是 dva 2.0 请删除
};
}
constructor(props) {
super(props);
this.state = {
isMobile,
show: !location.port, // 如果不是 dva 2.0 请删除
};
}
componentDidMount() {
// 适配手机屏幕;
enquireScreen((b) => {
this.setState({ isMobile: !!b });
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,
});
// dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响；
/* 如果不是 dva 2.0 请删除 start */
if (location.port) {
// 样式 build 时间在 200-300ms 之间;
setTimeout(() => {
this.setState({
show: true,
});
}, 500);
}
/* 如果不是 dva 2.0 请删除 end */
}, 500);
}
/* 如果不是 dva 2.0 请删除 end */
}
render() {
const children = [
<Nav3
id="Nav3_0"
key="Nav3_0"
dataSource={Nav30DataSource}
isMobile={this.state.isMobile}
/>,
<Content11
id="Content11_0"
key="Content11_0"
dataSource={Content110DataSource}
isMobile={this.state.isMobile}
/>,
<Feature1
id="Feature1_0"
key="Feature1_0"
dataSource={Feature13DataSource}
isMobile={this.state.isMobile}
/>,
<Feature1
id="Feature1_1"
key="Feature1_1"
dataSource={Feature11DataSource}
isMobile={this.state.isMobile}
/>,
<Feature1
id="Feature1_2"
key="Feature1_2"
dataSource={Feature12DataSource}
isMobile={this.state.isMobile}
/>,
<Footer0
id="Footer0_0"
key="Footer0_0"
dataSource={Footer00DataSource}
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>
);
}
render() {
const children = [
<Nav3
id="Nav3_0"
key="Nav3_0"
dataSource={Nav30DataSource}
isMobile={this.state.isMobile}
/>,
<Content11
id="Content11_0"
key="Content11_0"
dataSource={Content110DataSource}
isMobile={this.state.isMobile}
/>,
<Feature1
id="Feature1_0"
key="Feature1_0"
dataSource={Feature13DataSource}
isMobile={this.state.isMobile}
/>,
<Feature1
id="Feature1_1"
key="Feature1_1"
dataSource={Feature11DataSource}
isMobile={this.state.isMobile}
/>,
<Feature1
id="Feature1_2"
key="Feature1_2"
dataSource={Feature12DataSource}
isMobile={this.state.isMobile}
/>,
<Footer1
id="Footer1_0"
key="Footer1_0"
dataSource={Footer10DataSource}
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
+17 -17
View File
@@ -1,17 +1,17 @@
@import './common.less';
@import './custom.less';
@import './point.less';
@import './content.less';
@import './nav3.less';
@import './banner3.less';
@import './feature2.less';
@import './feature1.less';
@import './content3.less';
@import './feature8.less';
@import './feature6.less';
@import './content5.less';
@import './content9.less';
@import './footer0.less';
@import './edit.less';
@import'./teams1.less';
@import './content11.less';
@import "./common.less";
@import "./custom.less";
@import "./point.less";
@import "./content.less";
@import "./nav3.less";
@import "./banner3.less";
@import "./feature2.less";
@import "./feature1.less";
@import "./content3.less";
@import "./feature8.less";
@import "./feature6.less";
@import "./content5.less";
@import "./content9.less";
@import "./footer1.less";
@import "./edit.less";
@import "./teams1.less";
@import "./content11.less";
src/Home/less/banner3.less
+13 -4
View File
@@ -25,7 +25,7 @@
font-size: 20px;
line-height: 28px;
font-weight: 400;
>.queue-anim-leaving {
> .queue-anim-leaving {
position: relative !important;
}
}
@@ -40,6 +40,7 @@
& &-name-en {
display: block;
font-size: 14px;
line-height: 32px;
font-weight: 400;
}
@@ -52,11 +53,19 @@
display: block;
margin: 72px auto 0;
background: rgb(3, 67, 101);
background: -moz-linear-gradient(left, rgba(3, 67, 101, 1) 0%, rgba(0, 27, 51, 1) 100%);
background: linear-gradient(to right, rgba(3, 67, 101, 1) 0%, rgba(0, 27, 51, 1) 100%);
background: -moz-linear-gradient(
left,
rgba(3, 67, 101, 1) 0%,
rgba(0, 27, 51, 1) 100%
);
background: linear-gradient(
to right,
rgba(3, 67, 101, 1) 0%,
rgba(0, 27, 51, 1) 100%
);
box-shadow: 0 8px 16px #0a52ab;
border: none;
transition: background .45s @ease-out;
transition: background 0.45s @ease-out;
width: 132px;
line-height: 42px;
height: 42px;
src/Home/less/content5.less
+9 -2
View File
@@ -3,7 +3,7 @@
background-color: #fafafa;
min-height: 720px;
.@{content5} {
>p {
> p {
text-align: center;
}
&-img-wrapper {
@@ -20,9 +20,16 @@
text-align: center;
position: relative;
overflow: hidden;
& img {
border: 1px solid #000;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');
}
.page-pro();
border: none;
transition: box-shadow .3s @ease-out, transform .3s @ease-out;
transition: box-shadow 0.3s @ease-out, transform 0.3s @ease-out;
& > span {
width: 100%;
height: 200px;
src/Home/less/edit.less
+41 -4
View File
@@ -9,7 +9,7 @@
}
#Content3_0 .ant-row > .ant-col > .k6bwkyqmmk8-editor_css {
background-color: rgba(202, 36, 36, 0);
background-image: url('https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg');
background-image: url("https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg");
background-attachment: scroll;
background-blend-mode: normal;
background-position: 0% 0%;
@@ -24,7 +24,7 @@
color: rgb(42, 128, 202);
text-decoration: line-through;
background-color: rgba(195, 67, 67, 0);
background-image: url('https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg');
background-image: url("https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg");
background-attachment: scroll;
background-blend-mode: normal;
background-position: 0% 0%;
@@ -58,10 +58,16 @@
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.35);
}
#Banner3_1 .banner3-text-wrapper > .k6bx9qqmas-editor_css {
margin: 30px 50px 150px 100px;
padding: 0px 0px 0px 75px;
background: linear-gradient(to right, red,#f97400, blue,#990adb);
background: linear-gradient(
to right,
#ffbe0b,
#fb5607,
#ff006e,
#8338ec,
#3a86ff
);
-webkit-background-clip: text;
color: transparent;
}
@@ -279,3 +285,34 @@
#Feature3_0 .ant-col > .content3-text > .k6rohgkzazi-editor_css {
text-align: center;
}
#Footer1_0 .ant-col > .slogan > .kd2miilu93t-editor_css {
font-size: 16px;
top: 10px;
}
#Footer1_0 .ant-col > div > .kd2mqk40hca-editor_css {
min-width: 0px;
min-height: 1px;
}
#Footer1_0 .ant-col > .kd2mmb0w4pl-editor_css > .kd2mmt7a7qg-editor_css {
font-size: 16px;
min-height: 1px;
background-image: ;
background-attachment: ;
background-blend-mode: ;
background-position: ;
background-repeat: ;
background-size: ;
background-clip: ;
}
#Footer1_0 .ant-col > div > .kd2mmt7a7qg-editor_css {
background-clip: padding-box;
width: auto;
min-width: 160px;
height: auto;
min-height: 160px;
background-color: rgba(165, 62, 62, 0);
}
#Footer1_0 .ant-col > .kd2mmb0w4pl-editor_css > .kd2mqk40hca-editor_css {
font-size: 16px;
margin: 0px 0px 12px;
}
src/Home/less/footer0.less
-28
View File
@@ -1,28 +0,0 @@
.footer0-wrapper {
background-color: @template-bg-color;
height: 80px;
overflow: hidden;
.footer0 {
height: 100%;
padding: 0 24px;
line-height: 80px;
text-align: center;
color: @template-footer-text-color;
position: relative;
}
}
@media screen and (max-width: 767px) {
.footer0-wrapper {
.footer0 {
font-size: 12px;
&.home-page {
padding: 0;
}
>div {
width: 90%;
margin: auto;
}
}
}
}
src/Home/less/footer1.less
+98
View File
@@ -0,0 +1,98 @@
.footer1-wrapper {
background: @template-bg-color;
overflow: hidden;
position: relative;
min-height: 360px;
color: @template-footer-text-color;
.footer1 {
.home-page {
padding: 64px 24px 80px;
}
}
.block {
padding: 0 32px;
.logo {
max-width: 180px;
}
.slogan {
font-size: 12px;
margin-top: -20px;
}
>h2 {
margin-bottom: 24px;
color: @template-text-color;
}
a {
color: @template-footer-text-color;
margin-bottom: 12px;
float: left;
clear: both;
&:hover {
color: @primary-color;
}
}
}
.copyright-wrapper {
width: 100%;
border-top: 1px solid fade(@line-color, 10);
.home-page {
padding: 0 24px;
overflow: hidden;
}
.copyright {
height: 80px;
text-align: center;
line-height: 80px;
}
}
}
@media screen and (max-width: 767px) {
.footer1 {
min-height: 550px;
&-wrapper {
.footer1 {
.home-page {
padding: 64px 24px 32px;
}
}
}
.logo {
margin: 0 auto 24px;
}
.block {
text-align: center;
margin-bottom: 32px;
padding: 0;
}
>ul {
width: 90%;
margin: 20px auto 0;
padding: 10px 0;
>li {
width: 100%;
h2 {
margin-bottom: 10px;
}
li {
display: inline-block;
margin-right: 10px;
}
}
}
.copyright {
&-wrapper {
.home-page {
padding: 0;
.copyright {
font-size: 12px;
}
}
}
span {
width: 90%;
}
}
}
}
src/Home/less/nav3.less
+6 -7
View File
@@ -1,7 +1,7 @@
@header3: header3;
.@{header3} {
background: #fff;
background: #d9e8fc;
width: 100%;
z-index: 1;
box-shadow: 0 4px 6px fade(#000, 5);
@@ -16,7 +16,7 @@
display: inline-block;
position: relative;
width: 40px;
line-height: 45px;
& img {
@@ -49,7 +49,7 @@
&-block {
padding: 0 8px;
>* {
> * {
display: inline-block;
}
}
@@ -58,7 +58,6 @@
&-item,
&-item-child,
&-menu {
.ant-menu-sub .ant-menu-item,
.ant-menu-inline .ant-menu-item {
height: auto;
@@ -111,7 +110,7 @@
left: -24px;
width: ~"calc(100% + 48px)";
opacity: 0;
transition: opacity .3s @ease-in-out;
transition: opacity 0.3s @ease-in-out;
background: #fff;
& li {
@@ -143,7 +142,7 @@
height: 2px;
background: @template-nav-bg-color;
margin-top: 4px;
transition: transform .3s @ease-in-out, opacity .3s @ease-in-out;
transition: transform 0.3s @ease-in-out, opacity 0.3s @ease-in-out;
}
:first-child {
@@ -179,7 +178,7 @@
}
}
>.@{header3}-menu {
> .@{header3}-menu {
opacity: 1;
pointer-events: auto;
}
src/Home/main.jsx
+31 -33
View File
@@ -1,19 +1,19 @@
/* eslint no-undef: 0 */
/* eslint arrow-parens: 0 */
import React from 'react';
import { enquireScreen } from 'enquire-js';
import React from "react";
import { enquireScreen } from "enquire-js";
import Nav3 from './Nav3';
import Banner3 from './Banner3';
import Feature2 from './Feature2';
import Feature1 from './Feature1';
import Content3 from './Content3';
import Feature8 from './Feature8';
import Feature6 from './Feature6';
import Content5 from './Content5';
import Content9 from './Content9';
import Footer0 from './Footer0';
import Point from './Point';
import Nav3 from "./Nav3";
import Banner3 from "./Banner3";
import Feature2 from "./Feature2";
import Feature1 from "./Feature1";
import Content3 from "./Content3";
import Feature8 from "./Feature8";
import Feature6 from "./Feature6";
import Content5 from "./Content5";
import Content9 from "./Content9";
import Footer1 from "./Footer1";
import Point from "./Point";
import {
Nav30DataSource,
@@ -25,11 +25,9 @@ import {
Feature60DataSource,
Content50DataSource,
Content90DataSource,
Footer00DataSource,
} from './data.source';
import './less/antMotionStyle.less';
Footer10DataSource,
} from "./data.source";
import "./less/antMotionStyle.less";
let isMobile;
enquireScreen((b) => {
@@ -122,26 +120,26 @@ export default class Home extends React.Component {
isMobile={this.state.isMobile}
/>,
<Footer0
id="Footer0_0"
key="Footer0_0"
dataSource={Footer00DataSource}
<Footer1
id="Footer1_0"
key="Footer1_0"
dataSource={Footer10DataSource}
isMobile={this.state.isMobile}
/>, // 导航和页尾不进入锚点区，如果需要，自行添加;
/>,
<Point
key="list"
data={[
'Nav3_0',
'Banner3_1',
'Feature2_0',
'Feature1_0',
'Content3_0',
'Feature8_0',
'Feature6_0',
'Content5_0',
'Content9_0',
"Nav3_0",
"Banner3_1",
"Feature2_0",
"Feature1_0",
"Content3_0",
"Feature8_0",
"Feature6_0",
"Content5_0",
"Content9_0",
'Footer0_0',
"Footer0_0",
]}
/>,
];
src/footer/Footer1.jsx
+69
View File
@@ -0,0 +1,69 @@
import React from 'react';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import QueueAnim from 'rc-queue-anim';
import { Row, Col } from 'antd';
import { getChildrenToRender } from './utils';
import { isImg } from './utils';
class Footer extends React.Component {
static defaultProps = {
className: 'footer1',
};
getLiChildren = (data) =>
data.map((item, i) => {
const { title, childWrapper, ...itemProps } = item;
return (
<Col key={i.toString()} {...itemProps} title={null} content={null}>
<h2 {...title}>
{typeof title.children === 'string' &&
title.children.match(isImg) ? (
<img src={title.children} width="100%" alt="img" />
) : (
title.children
)}
</h2>
<div {...childWrapper}>
{childWrapper.children.map(getChildrenToRender)}
</div>
</Col>
);
});
render() {
const { ...props } = this.props;
const { dataSource } = props;
delete props.dataSource;
delete props.isMobile;
const childrenToRender = this.getLiChildren(dataSource.block.children);
return (
<div {...props} {...dataSource.wrapper}>
<OverPack {...dataSource.OverPack}>
<QueueAnim
type="bottom"
key="ul"
leaveReverse
component={Row}
{...dataSource.block}
>
{childrenToRender}
</QueueAnim>
<TweenOne
animation={{ y: '+=30', opacity: 0, type: 'from' }}
key="copyright"
{...dataSource.copyrightWrapper}
>
<div {...dataSource.copyrightPage}>
<div {...dataSource.copyright}>
{dataSource.copyright.children}
</div>
</div>
</TweenOne>
</OverPack>
</div>
);
}
}
export default Footer;
src/footer/data.source.js
+208
View File
@@ -0,0 +1,208 @@
import React from 'react';
export const Footer10DataSource = {
wrapper: { className: 'home-page-wrapper footer1-wrapper' },
OverPack: { className: 'footer1', playScale: 0.2 },
block: {
className: 'home-page',
gutter: 0,
children: [
{
name: 'block0',
xs: 24,
md: 6,
className: 'block',
title: {
className: 'logo',
children: (
<span>
<p>
想要了解更多？<br />
</p>
</span>
),
},
childWrapper: {
className: 'slogan',
children: [
{
name: 'content0',
children: (
<span>
<span>
<span>
<span>
<span>
<span>
<p>
<br />
</p>
<p>
快动动手指&nbsp; <b>E键关注</b>
</p>
<p>
<br />
</p>
</span>
</span>
</span>
</span>
</span>
</span>
),
className: 'kd2miilu93t-editor_css',
},
],
},
},
{
name: 'block2',
xs: 24,
md: 6,
className: 'block',
title: {
children: (
<span>
<span>
<span>
<p>QQ</p>
</span>
</span>
</span>
),
},
childWrapper: {
children: [
{
href: '#',
name: 'link0',
children: (
<span>
<span>
<span>
<span>
<p>亦可：1796452364</p>
</span>
</span>
</span>
</span>
),
className: 'kd2mmt7a7qg-editor_css',
},
{
href: '#',
name: 'link1',
children: (
<span>
<span>
<span>
<p>纳新咨询群：111111111</p>
</span>
</span>
</span>
),
className: 'kd2mqk40hca-editor_css',
},
],
},
},
{
name: 'block~kd2muekobzl',
xs: 24,
md: 6,
className: 'block',
title: {
children: (
<span>
<span>
<p>微信公众号</p>
</span>
</span>
),
},
childWrapper: {
children: [
{
href: '#',
name: 'link0',
children: (
<span>
<span>
<span>
<span>
<span>
<span>
<span>
<span>
<span>
<p>
<br />
</p>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
),
className: 'kd2mmt7a7qg-editor_css',
},
],
},
},
{
name: 'block~kd2muff5cyp',
xs: 24,
md: 6,
className: 'block',
title: {
children: (
<span>
<span>
<span>
<span>
<p>Bilibili&nbsp;</p>
</span>
</span>
</span>
</span>
),
},
childWrapper: {
children: [
{
href: '#',
name: 'link0',
children: (
<span>
<span>
<span>
<span>
<p>
<br />
</p>
</span>
</span>
</span>
</span>
),
className: 'kd2mmt7a7qg-editor_css',
},
],
},
},
],
},
copyrightWrapper: { className: 'copyright-wrapper' },
copyrightPage: { className: 'home-page' },
copyright: {
className: 'copyright',
children: (
<span>
©2020 浙江大学学生E志者协会 All Rights Reserved<br />
</span>
),
},
};
src/footer/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/footer/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 Footer1 from './Footer1';
import { Footer10DataSource } from './data.source';
import './less/antMotionStyle.less';
let isMobile;
enquireScreen((b) => {
isMobile = b;
});
const { location = {} } = typeof window !== 'undefined' ? 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 = [
<Footer1
id="Footer1_0"
key="Footer1_0"
dataSource={Footer10DataSource}
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/footer/less/antMotionStyle.less
+5
View File
@@ -0,0 +1,5 @@
@import './common.less';
@import './custom.less';
@import './content.less';
@import './footer1.less';
@import './edit.less';
src/footer/less/common.less
+42
View File
@@ -0,0 +1,42 @@
// @import "~antd/lib/style/v2-compatible-reset.less";
body {
word-wrap: break-word;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
/* .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/footer/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/footer/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/footer/less/edit.less
+31
View File
@@ -0,0 +1,31 @@
#Footer1_0 .ant-col > .slogan > .kd2miilu93t-editor_css {
font-size: 16px;
top: 10px;
}
#Footer1_0 .ant-col > div > .kd2mqk40hca-editor_css {
min-width: 0px;
min-height: 1px;
}
#Footer1_0 .ant-col > .kd2mmb0w4pl-editor_css > .kd2mmt7a7qg-editor_css {
font-size: 16px;
min-height: 1px;
background-image: ;
background-attachment: ;
background-blend-mode: ;
background-position: ;
background-repeat: ;
background-size: ;
background-clip: ;
}
#Footer1_0 .ant-col > div > .kd2mmt7a7qg-editor_css {
background-clip: padding-box;
width: auto;
min-width: 160px;
height: auto;
min-height: 160px;
background-color: rgba(165, 62, 62, 0);
}
#Footer1_0 .ant-col > .kd2mmb0w4pl-editor_css > .kd2mqk40hca-editor_css {
font-size: 16px;
margin: 0px 0px 12px;
}
src/footer/less/footer1.less
+98
View File
@@ -0,0 +1,98 @@
.footer1-wrapper {
background: @template-bg-color;
overflow: hidden;
position: relative;
min-height: 360px;
color: @template-footer-text-color;
.footer1 {
.home-page {
padding: 64px 24px 80px;
}
}
.block {
padding: 0 32px;
.logo {
max-width: 180px;
}
.slogan {
font-size: 12px;
margin-top: -20px;
}
>h2 {
margin-bottom: 24px;
color: @template-text-color;
}
a {
color: @template-footer-text-color;
margin-bottom: 12px;
float: left;
clear: both;
&:hover {
color: @primary-color;
}
}
}
.copyright-wrapper {
width: 100%;
border-top: 1px solid fade(@line-color, 10);
.home-page {
padding: 0 24px;
overflow: hidden;
}
.copyright {
height: 80px;
text-align: center;
line-height: 80px;
}
}
}
@media screen and (max-width: 767px) {
.footer1 {
min-height: 550px;
&-wrapper {
.footer1 {
.home-page {
padding: 64px 24px 32px;
}
}
}
.logo {
margin: 0 auto 24px;
}
.block {
text-align: center;
margin-bottom: 32px;
padding: 0;
}
>ul {
width: 90%;
margin: 20px auto 0;
padding: 10px 0;
>li {
width: 100%;
h2 {
margin-bottom: 10px;
}
li {
display: inline-block;
margin-right: 10px;
}
}
}
.copyright {
&-wrapper {
.home-page {
padding: 0;
.copyright {
font-size: 12px;
}
}
}
span {
width: 90%;
}
}
}
}
src/footer/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);
};
src/picture/qr-bilibili.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

src/picture/qr-qq.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 200 KiB

src/picture/qr-wexin.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB