From 2ac0198bf2b7b5c0e86ab0b521db28d978067cf8 Mon Sep 17 00:00:00 2001
From: cxz66666 <1092889706@qq.com>
Date: Fri, 28 Aug 2020 23:54:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=8D=A3=E8=AA=89=E7=AE=80?=
=?UTF-8?q?=E4=BB=8B=20=E4=BD=86=E6=98=AFless=E5=86=99=E7=9A=84=E5=A5=BD?=
=?UTF-8?q?=E5=83=8F=E6=9C=89=E5=A4=A7=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Home/Feature3.jsx | 94 +++++++++++++
src/Home/data.source.js | 256 +++++++++++++++++++++++++++++++++++
src/Home/less/edit.less | 15 ++
src/Home/less/feature31.less | 52 +++++++
src/Home/main.jsx | 10 +-
5 files changed, 423 insertions(+), 4 deletions(-)
create mode 100644 src/Home/Feature3.jsx
create mode 100644 src/Home/less/feature31.less
diff --git a/src/Home/Feature3.jsx b/src/Home/Feature3.jsx
new file mode 100644
index 0000000..660c981
--- /dev/null
+++ b/src/Home/Feature3.jsx
@@ -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 (
+
+
+ 
+
+
+
+ {childObj.title.children}
+
+
+ {childObj.content.children}
+
+
+
+ );
+ });
+ return (
+
+
+
+ {dataSource.titleWrapper.children.map(getChildrenToRender)}
+
+
+
+
+ {children}
+
+
+
+
+
+ 协会荣誉
+
+
+
+
+
+ ),
+ className: "title-h1 keedh95kxlm-editor_css",
+ },
+ {
+ name: "content",
+ className: "title-content",
+ children: (
+
+
+
+ 仅摘取近期部分荣誉展示
+
+
+
+ ),
+ },
+ ],
+ },
+ 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: (
+
+ 五星级社团
+
+ ),
+ },
+ content: {
+ className: "content3-content keedl4m5lk-editor_css",
+ children: (
+
+
+
+
+ 2016年协会荣升为浙江大学五星级社团，至今
+ 已经连续四年保持这一称号
+
+
+
+
+
+ ),
+ },
+ },
+ },
+ {
+ 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: (
+
+ 十佳社团
+
+ ),
+ },
+ content: {
+ className: "content3-content keedn4gkykf-editor_css",
+ children: (
+
+
+ 2016-2019年连续获得三年十佳社团荣誉称号，近九年
+ 累计获得七次十佳社团称号
+
+
+ ),
+ },
+ },
+ },
+ {
+ 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: (
+
+ 五佳课程
+
+ ),
+ },
+ content: {
+ className: "content3-content keedi0sp7vt-editor_css",
+ children: (
+
+
+
+ 近年来协会连续多次获得“五佳课程
+ ”，“精品课程一等奖”等称号，精品课程也备受学员好评
+
+
+
+ ),
+ },
+ },
+ },
+ {
+ 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: (
+
+ 精品活动
+
+ ),
+ },
+ content: {
+ className: "content3-content keedtwaja47-editor_css",
+ children: (
+
+
+
+ 在学生社团文化节上举办的精品活动多次获得奖项，2019年、2018年均获得二等奖
+
+
+
+ ),
+ },
+ },
+ },
+ {
+ 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: (
+
+
+
+ 公益先锋
+
+
+
+ ),
+ },
+ content: {
+ className: "content3-content",
+ children: (
+
+
+ 2019年协会获得至美公益项目二等奖，同年获
+ “尚德学子”
+ 奖学金社会公益奖，2015年获年度浙江大学最美公益集体。
+
+
+
+ ),
+ },
+ },
+ },
+ {
+ 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: (
+
+ 社会实践
+
+ ),
+ },
+ content: {
+ className: "content3-content",
+ children: (
+
+
+ 2019年赴甘肃酒泉暑期社会实践团获杭州日报2019大学生社会实践擂台赛优秀奖、浙江大学优秀实践团队。2017年获浙江大学年度暑期大学生社会实践活动优秀论文
+
+
+
+ ),
+ },
+ },
+ },
+ ],
+ },
+};
diff --git a/src/Home/less/edit.less b/src/Home/less/edit.less
index f4c4758..a30a19e 100644
--- a/src/Home/less/edit.less
+++ b/src/Home/less/edit.less
@@ -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;
+}
diff --git a/src/Home/less/feature31.less b/src/Home/less/feature31.less
new file mode 100644
index 0000000..24ee0e4
--- /dev/null
+++ b/src/Home/less/feature31.less
@@ -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;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/Home/main.jsx b/src/Home/main.jsx
index b628a4b..c0f599c 100644
--- a/src/Home/main.jsx
+++ b/src/Home/main.jsx
@@ -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}
/>,
- ,