新的主页

新的主页
dev
cxz 2020-02-08 18:11:59 +08:00
parent d7ecb90af3
commit b946d6eeed
20 changed files with 567 additions and 753 deletions

View File

@ -2,7 +2,7 @@ import React from "react";
import { HashRouter, Route, Switch, Link } from "react-router-dom"; import { HashRouter, Route, Switch, Link } from "react-router-dom";
import LearnMore from "./components/LearnMore"; import LearnMore from "./components/LearnMore";
import History from "./components/History"; import History from "./components/History";
import Entry from "./Entry.js"; import Entry from "./";
import Main from "./components/Main"; import Main from "./components/Main";
import Login from "./components/Login"; import Login from "./components/Login";
function App() { function App() {

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import Sheet from './components/Sheet'; import Sheet from './Component/Sheet';
import { Upload, Button, Icon,BackTop } from 'antd'; import { Upload, Button, Icon,BackTop } from 'antd';
function Entry() { function Entry() {

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;

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>
</>
),
},
],
},
},
],
},
};

View File

@ -0,0 +1,4 @@
# 如何使用:
- umi 里如何使用[请查看](https://landing.ant.design/docs/use/umi)。
- 其它脚手架使用[请查看](https://landing.ant.design/docs/use/getting-started)。

67
src/Home/index.jsx 100644
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>
);
}
}

View File

@ -0,0 +1,5 @@
@import './common.less';
@import './custom.less';
@import './content.less';
@import './teams1.less';
@import './edit.less';

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;
}

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;
}
}
}
}

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);
}
}

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;
}

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;
}
}

18
src/Home/utils.js 100644
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);
};

View File

@ -1,93 +0,0 @@
import React from 'react';
import { Button } from "antd";
import { HashRouter, Route, Switch, Link } from "react-router-dom";
class History extends React.Component {
render() {
return (
<body >
<div>
<div class="bg1">
<h2>
协会历史
</h2>
<div class="para" label-module="para">浙江大学学生E志者协会的前身是1984年陈强先生创办的电器工程学院电气维修小组</div>
<div class="para" label-module="para">步入21世纪为适应新时期学校教育体制的改革和管理模式的创新在电气工程学院团委的大力支持和推动下电器维修小组终于在2008年9月正式成为校级学生社团面向全校吸纳志愿维修的志愿者在全校范围内搭建以志愿维修为主体的服务平台做志愿维修的践行者做安全用电和节约用电的实践者和宣传者做电力热点问题及电器电脑新尖问题的引领者</div>
<div class="para" label-module="para">在此后协会抓紧机遇在做好本职工作的同时积极开拓其他公益志愿活动服务广大师生与社会群众多年来协会还在组织架构运行管理机制文化建设对外宣传等方面展开了积极的探索开展了多项校级精品活动提高了协会在校园文化中的知名度和影响力</div>
<div class="para" label-module="para">近五年来浙江大学学生E志者协会凭借出色的表现屡次获得浙江大学校级优秀社团校级十佳社团青年志愿服务优秀集体等荣誉称号2015年4月浙江大学E志者协会荣升为校四星级社团2016年6月浙江大学学生E志者协会获评浙江大学学生示范性社团该奖项是浙江大学社团最高荣誉</div>
<div class="para" label-module="para">浙江大学学生E志者协会是浙江大学位数不多的拥有自己办公室的社团之一为社团活动提供了良好载体办公室位于紫金港校区东三教学楼200室供社团日常值班维修和社团活动使用</div>
</div>
<div class="bg2">
<h2>
活动回顾
</h2>
<div class="para" label-module="para"><b>校园维修&amp;社区维修</b></div>
<div class="para" label-module="para">协会日常值班维修每月一次的学园义务维修和不定期开展的社区义务维修为同学们和社区居民的生活带来了极大的便利</div>
<div class="para" label-module="para"><b>电脑电器维修知识课堂社联精品课程</b></div>
<div class="para" label-module="para">协会每个长学期都会开办电脑电器维修知识精品课程旨在传授对于电脑电器维修感兴趣的同学相关的知识并交流经验方便同学们自主解决生活中遇到的简单的电脑电器故障2015年秋冬学期精品课程荣获浙江大学学生社团精品课程评比一等奖</div>
<div class="para" label-module="para"><b>浙江大学学生E志者协会30周年庆典暨电气工程学院公益论坛</b></div>
<div class="para" label-module="para">协会向全校师生展示30年来E志者们在公益实践中取得的成果同时也邀请到了校内大型公益组织的代表们分享他们的公益之路活动一经举办即在全校范围内掀起了热心公益实践</div>
<div class="para" label-module="para">的巨大浪潮激发了广大青年学子的投身公益事业的热情点亮了大学生心中公益实践的明灯</div>
</div>
<div class="bg">
<h2>
协会日常
</h2>
<div class="para" label-module="pare">
浙江大学E志者协会其宗旨为以服务社会为己任搭建电器维修爱好者交流平台做安全用电和节约用电的实践者和宣传者研究电力电气热点问题为建设社会主义和谐社会贡献力量</div>
<div class="para" label-module="pare">
在过去的三十年里协会一如既往的做好自己的最本职工作<b>免费电器维修</b>广
协会活动主要分为以下三大部分
<pre>
</pre>
<h3 class="titleh3">
公益活动
</h3>
<pre>
</pre>
<div class="para" ><b>日常值班</b>62014-201524779414590.7%81.3%</div>
<div class="para">
<b>线上交流</b>广沿
</div>
<div class="para">
<b>社会实践</b>80
</div>
<pre>
</pre>
<h3 class="titleh3">
社团活动</h3>
<pre>
</pre>
<div class="para">浙江大学学生E志者协会努力追求发展成一家展现大学生风貌发扬电气特色的优秀公益社团开展如电路板焊接全息投影等内容详实寓教于乐的实践类活动</div>
<div class="para">协会每年推陈出新举办了形式内容各异特点鲜明的精品活动电路的特技鼓励同学自行设计新奇的电路并进行自主焊接功放传心声DIY大赛让同学现场焊接可传声的电路并传达自己的心声地球一小时向全校师生传播正确用电合理节电小常识全息投影DIY烙铁画利用自制全息投影技术让同学体验用烙铁作画的乐趣这一系列形式多样独具协会特色的精品活动吸引了一大批同学的参与获得了同学们的一致好评</div>
<pre>
</pre>
<h3 class="titleh3">创新创意</h3>
<pre>
</pre>
<div class="para">在日常维修中我们基于网络创新方法通过理论和实践的结合提升自己的能力如通过自主实践编写命令提示符批处理文件解决一些系统问题通过沙箱模拟研究校园流行病毒攻击原理并找出源头同时关注切合当代大学生实际的前沿技术曾撰写windows10测评报告office2016评测2016年暑假购机指南文件将所学前沿科技知识应用于日常维修实践</div>
<div class="para">同时每年协会均会组织中高年级成员组队参加智能车竞赛与智能车基地保持联系在技术难题上交换经验协会还举办废旧电子元件电器创意DIY大赛面向全校同学征集创意充分发挥动手实践能力在校内推广电器创意创新的理念协会还曾受邀参加中国大学生创意节杭州赛区活动荣获创意装饰奖</div>
</div>
</div>
<a href='./'>
<Button type="primary" size={"large"}>to home</Button>
</a>
</div>
</body>
)
}
}
export default History

View File

@ -1,42 +0,0 @@
import React from "react";
class LearnMore extends React.Component {
render() {
return (
<body>
<div class="para-title level-2" label-module="para-title">
<h2 class="title-text"><span class="title-prefix">浙江大学学生E志者协会</span></h2>
</div>
<div class="para" label-module="para">三十年间E志者协会作为一个公益组织着眼实际立足于电脑电器维修开拓创新积极学习应用前沿知识扎根实践广泛开展校内外志愿服务活动</div>
<div class="para" label-module="para">三十年间E志者协会的公益之路渐行渐宽从校内到校外从服务师生到服务社会群众从一个电器维修小组发展到如今如此规模的志愿者团队</div>
<div class="para" label-module="para">三十年间E志者协会不忘初心在E志者三十年志愿服务精神的传承中开拓进取汲取课堂及课外前沿科学技术之精华以服务社会为己任传播先进公益文化为己责致力于创建更为优秀的能展现浙江大学青年学生风貌的公益服务团体</div>
<div class="para" label-module="para">我们在2015年提出了引领社团发展的E愿计划核心是提高服务质量开展合作交流和传播公益理念在三十年发展的基础上我们除了打算完善已有服务制度外还规划着在紧密跟进时代步伐 结合学校社团建设制度的情况下推进与其他组织的合作交流结合新技术大力建设协会网络平台以及专属APP借助这些通道以及精品课程完成我们协会从授人以鱼到授人以渔的关键过渡同时也通过我们的身体力行以及新媒体的影响力传播公益理念让公益理念的种子在每个人的心里萌发</div><div class="anchor-list ">
<a name="8" class="lemma-anchor para-title" ></a>
<a name="sub19873141_8" class="lemma-anchor " ></a>
<a name="协会荣誉" class="lemma-anchor " ></a>
</div><div class="para-title level-2" label-module="para-title">
<h2 class="title-text"><span class="title-prefix">浙江大学学生E志者协会</span></h2>
</div>
<div class="para" label-module="para">2009年浙江大学学生E志者协会获浙江省优秀志愿者服务队伍荣誉称号</div>
<div class="para" label-module="para">2009年浙江大学学生E志者协会获浙江大学十大优秀志愿者服务集体荣誉称号</div>
<div class="para" label-module="para">2009年浙江大学学生E志者协会成为浙江大学素质拓展基地候补基地</div>
<div class="para" label-module="para">2009年浙江大学学生E志者协会荣获2009年度浙江大学优秀青年志愿者服务项目荣誉称号</div>
<div class="para" label-module="para">2010年浙江大学学生E志者协会被评为2009-2010年度浙江大学校级优秀社团</div>
<div class="para" label-module="para">2010年末浙江大学学生E志者协会由一星级社团跃升为三星级社团</div>
<div class="para" label-module="para">20102012年连续三年浙江大学学生E志者协会获评浙江大学学生十佳社团</div>
<div class="para" label-module="para">2014年浙江大学学生E志者协会荣升为浙江大学四星级社团</div>
<div class="para" label-module="para">2015年浙江大学学生E志者协会入选浙江大学最美公益服务集体</div>
<div class="para" label-module="para">2015年浙江大学学生E志者协会获社团文化节精品活动二等奖</div>
<div class="para" label-module="para">2015年浙江大学学生E志者协会获社团精品课程一等奖</div>
<div class="para" label-module="para">2015年浙江大学学生E志者协会小手共大手点亮求知之光暑期社会实践入选为校级重点社会实践项目</div>
<div class="para" label-module="para">2016年浙江大学学生E志者协会荣获20152016年度浙江大学学生示范性社团浙江大学社团最高荣誉指导老师赵梓衫老师获浙江大学十佳社团指导老师副会长田畅获浙江大学优秀学生社团干部</div>
<div class="para" label-module="para">2016年浙江大学电路板焊接大赛中协会成员范俊崇童丹妮同学获低年级组一等奖第一名汤继祥田畅同学获高年级组一等奖第一名</div>
<div class="para" label-module="para">2016年浙江大学第十一届中控杯机器人竞赛机器人竞赛购物挑战赛项目中协会电器部副部长王溯恺获一等奖</div>
<div class="para" label-module="para">2016年美国大学生数学建模竞赛MCM/ICM中协会成员贺自怡等同学获M奖</div>
<div class="para" label-module="para">另每年协会成员都有多人进入竺可桢学院工高班和爱迪生班等荣誉班级就读</div>
</body>
)
}
}
export default LearnMore;

View File

@ -1,45 +0,0 @@
import React, { useEffect, useState } from "react";
import axios from "axios";
function Login() {
const [items, setItems] = useState([]);
useEffect(() => {
const fetchItems = async () => {
let fetchItems = [];
for (let i = 1; i <= 7; i++) {
let result = await axios(
'api/info/' + i,
{
method: 'GET',
}
);
console.log("2312");
fetchItems.push({
id: result.id
})
}
setItems(fetchItems);
}
})
return (
<p>
{
items.map((item, i) => {
return (
<div>
<tr id={i}>
<td>
{item.id}
</td>
</tr>
</div>
);
})
}
</p>
)
}
export default Login;

View File

@ -1,176 +0,0 @@
import React from 'react';
import { Button } from "antd";
import background from "./background.jpg";
import { Route, Switch, Link } from "react-router-dom";
class Main extends React.Component {
render() {
return (
<html>
<body >
<div class='background'>
<a href="https://baike.baidu.com/item/%E6%B5%99%E6%B1%9F%E5%A4%A7%E5%AD%A6%E5%AD%A6%E7%94%9FE%E5%BF%97%E8%80%85%E5%8D%8F%E4%BC%9A">
<h1 class='header'> 浙江大学学生E志者协会 </h1>
</a>
<Link to='/login'>
<div class='header_r_t'>
登陆
</div>
</Link>
<div ><img class='picture1' src='./components/background.jpg'></img>
<dl class="basicInfo-block basicInfo-left">
<dt class="basicInfo-item name">中文名</dt>
<dd class="basicInfo-item value">
浙江大学学生E志者协会
</dd>
<dt class="basicInfo-item name">外文名</dt>
<dd class="basicInfo-item value">
Electrical Volunteer Association of ZJU
</dd>
<dt class="basicInfo-item name">成立年份</dt>
<dd class="basicInfo-item value">
1984
</dd>
</dl><dl class="basicInfo-block basicInfo-right">
<dt class="basicInfo-item name">&nbsp;&nbsp;&nbsp;&nbsp;</dt>
<dd class="basicInfo-item value">
电气工程学院电器维修小组
</dd>
<dt class="basicInfo-item name">社团创始人</dt>
<dd class="basicInfo-item value">
陈强
</dd>
<dt class="basicInfo-item name">社团星级</dt>
<dd class="basicInfo-item value">
五星级
</dd>
</dl></div>
<div class='Button1' >
<Link to='/ticket'>
<Button type="dashed" size={"large"}>
<div class="tmp1">加入我们
</div>
</Button>
</Link>
</div>
<pre>
</pre>
<div class='row-one'>
<div class='container'>
<div class='row-one-cont'>
<ul>
<li>
<p class="arc-tit">
<b>财务外联部</b> </p>
<p class="are-cont">
财外部的主要职能是负责协会的财务工作包括协会年度财务预算和结算的制定规范协会各项财务手续做好各类收支记录妥善管理各种票据以及为协会争取更多的资金支持等
</p>
</li>
<li>
<p class="arc-tit">
<b>文化宣传部</b></p>
<p class="are-cont">
文化宣传部的主要职能是负责协会的对外宣传工作包括协会形象的塑造和宣传制定和执行每次活动前的宣传方案活动现场的摄影和记录活动后新闻稿的撰写和投出等
</p>
</li>
<li>
<p class="arc-tit">
<b>人力资源部</b> </p>
<p class="are-cont">
人力资源部的主要职能是负责协会活动的现场执行以及普通会员的管理包括纳新方案的制定和执行活动现场的安排和布置普通会员志愿服务小时数的统计等,同时负责管理人员调动
</p>
</li>
<li>
<p class="arc-tit">
<b>电脑部</b> </p>
<p class="are-cont">
电脑部的主要职能是负责协会日常电脑维修服务是协会的核心部门另外为了加强会员维修水平电脑部会开展若干次培训活动面向全体会员旨在提高大家的维修水平
</p>
</li>
<li>
<p class="arc-tit">
<b>电器部</b></p>
<p class="are-cont">
电器部的主要职能是负责协会的电器维修以及维修技术的沉淀和积累技术资料的编撰等也会定期向会员科普一些电器的保养维修常识以及工具的使用方法与基础的模电知识
</p>
</li>
</ul>
</div>
</div>
</div>
<div class='footer' >
<div class='Button2'>
<div>
<div><p class="ft-info ">
<span >
地址浙江大学东三教学楼204
</span>
</p>
</div>
<p class="ft-info1 ">
<span >
联系电话12345678900
</span>
</p>
<p class="ft-info2 ">
<span >
QQ1796452364
</span>
</p>
<p class="ft-info3 ">
<span >
公众号浙江大学学生E志者协会
</span>
</p>
</div>
<Link to='/history'>
<Button type="primary" size={"large"}>
<div >历史展望
</div>
</Button>
</Link>
</div>
<div class='Button3'>
<Link to='/learnMore' >
<Button type="primary" size={"large"}>
<div >了解更多
</div>
</Button>
</Link>
</div>
<p class='ft-bot'>
Copyright © 2020 浙江大学学生E志者协会 版权所有
</p>
</div>
</div>
</body>
</html>
)
}
}
export default Main;

View File

@ -1,377 +0,0 @@
import React from 'react'
import axios from 'axios'
import { Button, Form, Input,Icon, Radio, message } from 'antd'
import 'antd/dist/antd.css'
import { confirmAlert } from 'react-confirm-alert'
import 'react-confirm-alert/src/react-confirm-alert.css';
import qs from 'qs';
class NewForm extends React.Component {
componentDidMount() {
this.loadLocalStorage();
}
loadLocalStorage = () => {
const values = JSON.parse(localStorage.getItem('formCache') || '{}');
this.props.form.setFieldsValue(values);
}
saveLocalStorage = () => {
const values = this.props.form.getFieldsValue();
localStorage.setItem('formCache', JSON.stringify(values));
}
handleSubmit = e => {
e.preventDefault();
const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll
confirmAlert({
title: '提交报名表',
message: '您填写的表格已经保存在浏览器中,以后可以修改后覆盖提交。点击 OK 进行提交。',
buttons: [
{
label: 'Yes',
onClick: () => {
validateFieldsAndScroll(
(err, values) => {
if (err) {
message.error('填写不正确,请按照提示修改');
}
else {
console.log(values);
let addForm = async () => {
let result = await axios(
'api/submit',
{
headers:{'Content-Type': 'application/x-www-form-urlencoded'},
method: "POST",
data: qs.stringify({"dto":JSON.stringify(values)})
}
)
if (result.data.success) {
message.success("提交成功!后续的面试时间会以短信形式通知,期待你的加入!")
}
else {
message.error("提交失败!可能是网络问题。")
}
}
addForm();
}
}
)
}
},
{
label: 'No',
onClick: () => {}
}
]
});
}
render() {
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
},
};
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 16,
offset: 8,
},
},
};
const { getFieldDecorator } = this.props.form;
return (
<Form {...formItemLayout} onSubmit={this.handleSubmit}>
<Form.Item label="姓名">
{
getFieldDecorator('name', {
rules: [
{
required: true,
message: "请在此处填入你的姓名"
}
]
})(
<Input />
)
}
</Form.Item>
<Form.Item label="学号" >
{getFieldDecorator('id', {
rules: [
{
required: true,
message: '请在此处填入你的学号',
},
{ pattern: /^[0-9]+$/, message: "混进去了数字以外的东西呀" }
],
})(<Input />)}
</Form.Item>
<Form.Item label="性别">
{
getFieldDecorator('sex', {
rules: [
{
required: true,
message: '请选择你的性别'
}
]
}
)
(
<Radio.Group>
<Radio.Button value={0} ><div><Icon type="man" /></div></Radio.Button>
<Radio.Button value={1} ><div><Icon type="woman" /></div></Radio.Button>
</Radio.Group>
)
}
</Form.Item>
<Form.Item label="年级">
{
getFieldDecorator('grade', {
rules: [
{
required: true,
message: '请选择你的年级'
}
]
}
)
(
<Radio.Group >
<Radio.Button value={1}>大一</Radio.Button>
<Radio.Button value={2}>大二</Radio.Button>
<Radio.Button value={3}>大三</Radio.Button>
<Radio.Button value={4}>大四</Radio.Button>
</Radio.Group>
)
}
</Form.Item>
<Form.Item label="专业/大类">
{
getFieldDecorator('major', {
rules: [
{
required: true,
message: '请在这里填入你的专业'
}
]
}
)(
<Input placeholder="例如:工科试验班(电气)" />
)
}
</Form.Item>
<Form.Item label="E-mail">
{getFieldDecorator('email', {
rules: [
{
required: true,
message: '请在此处填入你的E-mail'
}, { type: 'email', message: "邮箱格式不正确" }
],
})(<Input />)}
</Form.Item>
<Form.Item label="联系电话">
{getFieldDecorator('phone', {
rules: [
{
required: true,
message: '请在此处填入你的电话号码',
},
{ pattern: /^1[345678]\d{9}$/, message: "手机号不太对呀" }
],
})(<Input />)}
</Form.Item>
<Form.Item label="第一志愿(两志愿请不要重复选择)">
{
getFieldDecorator('firstWish', {rules: [
{
required: true,
message: '请选择第一志愿'
}
]})(
<Radio.Group name="firstWish" size="medium">
<Radio.Button value={1}>电脑部</Radio.Button>
<Radio.Button value={2}>电器部</Radio.Button>
<Radio.Button value={3}>文宣部</Radio.Button>
<Radio.Button value={4}>人资部</Radio.Button>
<Radio.Button value={5}>财务部</Radio.Button>
</Radio.Group>
)
}
</Form.Item>
<Form.Item label="第二志愿(两志愿请不要重复选择)">
{
getFieldDecorator('secondWish', {rules: [
{
required: true,
message: '请选择第二志愿'
}
]})(
<Radio.Group name="secondWish" size="medium">
<Radio.Button value={1}>电脑部</Radio.Button>
<Radio.Button value={2}>电器部</Radio.Button>
<Radio.Button value={3}>文宣部</Radio.Button>
<Radio.Button value={4}>人资部</Radio.Button>
<Radio.Button value={5}>财务部</Radio.Button>
</Radio.Group>
)
}
</Form.Item>
<Form.Item label="是否服从调剂">
{
getFieldDecorator('adjustment', {
rules: [
{
required: true,
message: '请选择是否服从调剂'
}
]
}
)(
<Radio.Group >
<Radio value={true}></Radio>
<Radio value={false}></Radio>
</Radio.Group>
)
}
</Form.Item>
<Form.Item label="简述你选择第一志愿的原因">
{
getFieldDecorator('firstReason', {
rules: [
{
required: true,
message: '请填入你选择志愿的原因'
}
]
}
)(
<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
)
}
</Form.Item>
<Form.Item label="简述你选择第二志愿的原因">
{
getFieldDecorator('secondReason', {
rules: [
{
required: true,
message: '请填入你选择志愿的原因'
}
]
}
)
(
<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
)
}
</Form.Item>
<Form.Item label="简单介绍一下你的特长">
{
getFieldDecorator('question1', {
rules: [
{
required: true,
message: '请简单介绍一下你的特长'
}
]
}
)
(
<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
)
}
</Form.Item>
<Form.Item label="你希望未来能在E志者协会得到什么又能为E志付出什么">
{
getFieldDecorator('question2', {
rules: [
{
required: true,
message: '请填入问题的回答'
}
]
}
)
(
<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
)
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time1', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time2', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time3', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time4', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time5', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time6', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time7', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item {...tailFormItemLayout}>
<Button icon="copy" style={{ textAlign: 'center' }} type="primary" htmlType="submit">提交</Button>
<Button icon="save" style={{ margin: "20px", textAlign: 'center' }} onClick={() => { this.saveLocalStorage(); message.success('草稿已保存') }}>保存草稿</Button>
</Form.Item>
</Form>
)
}
}
const Sheet = Form.create({})(NewForm);
export default Sheet;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 198 KiB

View File

@ -3,6 +3,5 @@ import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
import Entry from './Entry'; import Entry from './Entry';
import App from './App'; ReactDOM.render(<Entry />, document.getElementById('root'));
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.register(); serviceWorker.register();