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

增加荣誉简介 但是less写的好像有大问题
continuous-integration/drone/push Build is passing Details

master
cxz66666 2020-08-28 23:54:38 +08:00
parent 72c73b8dc6
commit 2ac0198bf2
5 changed files with 423 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/Home/Feature3.jsx 100644
View File

@ -0,0 +1,94 @@
import React from "react";
import QueueAnim from "rc-queue-anim";
import TweenOne from "rc-tween-one";
import { Row, Col } from "antd";
import OverPack from "rc-scroll-anim/lib/ScrollOverPack";
import { getChildrenToRender } from "./utils";
class Content31 extends React.PureComponent {
getDelay = (e, b) => (e % b) * 100 + Math.floor(e / b) * 100 + b * 100;
render() {
const { ...props } = this.props;
const { dataSource, isMobile } = props;
delete props.dataSource;
delete props.isMobile;
let clearFloatNum = 0;
const children = dataSource.block.children.map((item, i) => {
const childObj = item.children;
const delay = isMobile ? i * 50 : this.getDelay(i, 24 / item.md);
const liAnim = {
opacity: 0,
type: "from",
ease: "easeOutQuad",
delay,
};
const childrenAnim = { ...liAnim, x: "+=10", delay: delay + 100 };
clearFloatNum += item.md;
clearFloatNum = clearFloatNum > 24 ? 0 : clearFloatNum;
return (
<TweenOne
component={Col}
animation={liAnim}
key={item.name}
{...item}
componentProps={{ md: item.md, xs: item.xs }}
className={
!clearFloatNum
? `${item.className || ""} clear-both`.trim()
: item.className
}
>
<TweenOne
animation={{
x: "-=10",
opacity: 0,
type: "from",
ease: "easeOutQuad",
}}
key="img"
{...childObj.icon}
>
<img src={childObj.icon.children} width="100%" alt="img" />
</TweenOne>
<div {...childObj.textWrapper}>
<TweenOne
key="h2"
animation={childrenAnim}
component="h2"
{...childObj.title}
>
{childObj.title.children}
</TweenOne>
<TweenOne
key="p"
animation={{ ...childrenAnim, delay: delay + 200 }}
component="div"
{...childObj.content}
>
{childObj.content.children}
</TweenOne>
</div>
</TweenOne>
);
});
return (
<div {...props} {...dataSource.wrapper}>
<div {...dataSource.page}>
<div {...dataSource.titleWrapper}>
{dataSource.titleWrapper.children.map(getChildrenToRender)}
</div>
<OverPack {...dataSource.OverPack}>
<QueueAnim key="u" type="bottom">
<Row key="row" {...dataSource.block}>
{children}
</Row>
</QueueAnim>
</OverPack>
</div>
</div>
);
}
}
export default Content31;

256
src/Home/data.source.js
View File

@ -2193,3 +2193,259 @@ export const Content40DataSource = {
),
},
};
export const Feature31DataSource = {
wrapper: { className: "home-page-wrapper content3-wrapper" },
page: { className: "home-page content3" },
OverPack: { playScale: 0.3 },
titleWrapper: {
className: "title-wrapper",
children: [
{
name: "title",
children: (
<span>
<span>
<span>
<p>
协会荣誉
<br />
</p>
</span>
</span>
</span>
),
className: "title-h1 keedh95kxlm-editor_css",
},
{
name: "content",
className: "title-content",
children: (
<span>
<span>
<span>
<p>仅摘取近期部分荣誉展示</p>
</span>
</span>
</span>
),
},
],
},
block: {
className: "content3-block-wrapper",
children: [
{
name: "block0",
className: "content3-block",
md: 8,
xs: 24,
children: {
icon: {
className: "content3-icon",
children:
"https://zos.alipayobjects.com/rmsportal/ScHBSdwpTkAHZkJ.png",
},
textWrapper: { className: "content3-text" },
title: {
className: "content3-title",
children: (
<span>
<p>五星级社团</p>
</span>
),
},
content: {
className: "content3-content keedl4m5lk-editor_css",
children: (
<span>
<span>
<span>
<p>
2016年协会荣升为浙江大学<b>五星级社团</b>，至今
<b>已经连续四年</b>保持这一称号
<br />
</p>
</span>
</span>
</span>
),
},
},
},
{
name: "block1",
className: "content3-block",
md: 8,
xs: 24,
children: {
icon: {
className: "content3-icon",
children:
"https://zos.alipayobjects.com/rmsportal/NKBELAOuuKbofDD.png",
},
textWrapper: { className: "content3-text" },
title: {
className: "content3-title",
children: (
<span>
<p>十佳社团</p>
</span>
),
},
content: {
className: "content3-content keedn4gkykf-editor_css",
children: (
<span>
<p>
2016-2019年连续<b>获得三年</b>十佳社团荣誉称号，近九年
<b>累计获得七次</b>十佳社团称号
</p>
</span>
),
},
},
},
{
name: "block2",
className: "content3-block",
md: 8,
xs: 24,
children: {
icon: {
className: "content3-icon",
children:
"https://zos.alipayobjects.com/rmsportal/xMSBjgxBhKfyMWX.png",
},
textWrapper: { className: "content3-text" },
title: {
className: "content3-title",
children: (
<span>
<p>五佳课程</p>
</span>
),
},
content: {
className: "content3-content keedi0sp7vt-editor_css",
children: (
<span>
<span>
<p>
近年来协会连续多次获得“<b>五佳课程</b>
”，“精品课程一等奖”等称号，精品课程也备受学员好评
</p>
</span>
</span>
),
},
},
},
{
name: "block3",
className: "content3-block",
md: 8,
xs: 24,
children: {
icon: {
className: "content3-icon",
children:
"https://zos.alipayobjects.com/rmsportal/MNdlBNhmDBLuzqp.png",
},
textWrapper: { className: "content3-text" },
title: {
className: "content3-title",
children: (
<span>
<p>精品活动</p>
</span>
),
},
content: {
className: "content3-content keedtwaja47-editor_css",
children: (
<span>
<span>
<p>
在学生社团文化节上举办的精品活动多次获得奖项，2019年、2018年均获得二等奖
</p>
</span>
</span>
),
},
},
},
{
name: "block4",
className: "content3-block",
md: 8,
xs: 24,
children: {
icon: {
className: "content3-icon",
children:
"https://zos.alipayobjects.com/rmsportal/UsUmoBRyLvkIQeO.png",
},
textWrapper: { className: "content3-text" },
title: {
className: "content3-title",
children: (
<span>
<span>
<span>
<p>公益先锋</p>
</span>
</span>
</span>
),
},
content: {
className: "content3-content",
children: (
<span>
<p>
2019年协会获得<b>至美公益项目</b>二等奖，同年获
<b>“尚德学子”</b>
奖学金社会公益奖，2015年获年度浙江大学最美公益集体。
<br />
</p>
</span>
),
},
},
},
{
name: "block5",
className: "content3-block",
md: 8,
xs: 24,
children: {
icon: {
className: "content3-icon",
children:
"https://zos.alipayobjects.com/rmsportal/ipwaQLBLflRfUrg.png",
},
textWrapper: { className: "content3-text" },
title: {
className: "content3-title",
children: (
<span>
<p>社会实践</p>
</span>
),
},
content: {
className: "content3-content",
children: (
<span>
<p>
2019年赴甘肃酒泉暑期社会实践团获杭州日报2019大学生社会实践擂台赛优秀奖、浙江大学优秀实践团队。2017年获浙江大学年度暑期大学生社会实践活动优秀论文
<br />
</p>
</span>
),
},
},
},
],
},
};

15
src/Home/less/edit.less
View File

@ -275,3 +275,18 @@
font-size: 16px;
margin: 0px 0px 12px;
}
#Feature3_1 .ant-col > .content3-text > .keedl4m5lk-editor_css {
font-size: 17px;
}
#Feature3_1 .ant-col > .content3-text > .keedn4gkykf-editor_css {
font-size: 16px;
}
#Feature3_1 .ant-col > .content3-text > .keedi0sp7vt-editor_css {
font-size: 16px;
}
#Feature3_1 .ant-col > .content3-text > .keedtwaja47-editor_css {
font-size: 16px;
}
#Feature3_1 .home-page > .title-wrapper > .keedh95kxlm-editor_css {
font-size: 34px;
}

52
src/Home/less/feature31.less 100644
View File

@ -0,0 +1,52 @@
@content3: content3;
.@{content3}-wrapper {
min-height: 764px;
.@{content3} {
height: 100%;
overflow: hidden;
& .title-content {
text-align: center;
}
&-block-wrapper {
position: relative;
.@{content3}-block {
display: inline-block;
padding: 48px 24px;
vertical-align: top;
.@{content3}-icon {
display: inline-block;
width: 15%;
vertical-align: top;
}
.@{content3}-text {
width: 85%;
display: inline-block;
padding-left: 8%;
}
&.clear-both {
clear: both;
}
}
}
}
}
@media screen and (max-width: 767px) {
.@{content3}-wrapper {
min-height: 1080px;
.@{content3} {
&-block-wrapper {
margin: 20px auto;
height: auto;
.@{content3}-block {
.@{content3}-title {
font-size: 20px;
}
&.queue-anim-leaving {
position: relative !important;
}
}
}
}
}
}

10
src/Home/main.jsx
View File

@ -9,6 +9,7 @@ import Feature2 from "./Feature2";
import Feature1 from "./Feature1";
import Content3 from "./Content3";
import Feature8 from "./Feature8";
import Feature3 from "./Feature3";
import Feature6 from "./Feature6";
import Content5 from "./Content5";
import Content9 from "./Content9";
@ -21,6 +22,7 @@ import {
Feature20DataSource,
Feature10DataSource,
Feature30DataSource,
Feature31DataSource,
Feature80DataSource,
Feature60DataSource,
Content40DataSource,
@ -120,10 +122,10 @@ export default class Home extends React.Component {
dataSource={Content50DataSource}
isMobile={this.state.isMobile}
/>,
<Content9
id="Content9_0"
key="Content9_0"
dataSource={Content90DataSource}
<Feature3
id="Feature3_1"
key="Feature3_1"
dataSource={Feature31DataSource}
isMobile={this.state.isMobile}
/>,