表单提交

dev
MengJunyi 2020-02-04 22:04:43 +08:00 committed by cxz
parent 5d90ba0b3d
commit d7ecb90af3
23 changed files with 1323 additions and 0 deletions

23
.gitignore vendored 100644
View File

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

13
package-lock.json generated 100644
View File

@ -0,0 +1,13 @@
{
"name": "my-app",
"version": "0.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"react-confirm-alert": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/react-confirm-alert/-/react-confirm-alert-2.4.1.tgz",
"integrity": "sha512-Sc2N1paCTCS5HWEAhik2IQa9/vwSQLAoCT5uccjPH/VyTaBAkRPZPx9sUqFTy3q5VnnGwCPsoz7fnw54x79d/w=="
}
}
}

38
package.json 100644
View File

@ -0,0 +1,38 @@
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"antd": "^3.26.7",
"axios": "^0.19.2",
"react": "^16.12.0",
"react-confirm-alert": "^2.4.1",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

BIN
public/favicon.ico 100644

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

43
public/index.html 100644
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

BIN
public/logo192.png 100644

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
public/logo512.png 100644

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View File

@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

View File

@ -0,0 +1,2 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *

30
src/App.js 100644
View File

@ -0,0 +1,30 @@
import React from "react";
import { HashRouter, Route, Switch, Link } from "react-router-dom";
import LearnMore from "./components/LearnMore";
import History from "./components/History";
import Entry from "./Entry.js";
import Main from "./components/Main";
import Login from "./components/Login";
function App() {
return (
<div className="App">
<header className="App-header">
<div className="App">
<HashRouter>
<Switch>
<Route exact path='/history' component={History} />
<Route exact path='/ticket' component={Entry} />
<Route exact path='/' component={Main} />
<Route exact path='/learnMore' component={LearnMore} />
<Route exact path='/login' component={Login} />
</Switch>
</HashRouter>
</div>
</header>
</div>
);
}
export default App;

28
src/Entry.js 100644
View File

@ -0,0 +1,28 @@
import React from 'react';
import Sheet from './components/Sheet';
import { Upload, Button, Icon, BackTop } from 'antd';
function Entry() {
return (
<div>
<h2 class="ant-typography" style={{ textAlign: 'center' }}>
浙江大学学生E志者协会2020年纳新报名表
</h2>
<center>
<Upload>
<Button style={{ marginBlockEnd: 20 }}>
<Icon type="upload" />
上传照片
</Button>
</Upload>
</center>
<Sheet />
<BackTop visibilityHeight={200} />
<p style={{ textAlign: 'center' }}>
浙江大学学生E志者协会©2020 Created by EVATech
</p>
</ div>
)
}
export default Entry;

View File

@ -0,0 +1,93 @@
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

@ -0,0 +1,42 @@
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

@ -0,0 +1,45 @@
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

@ -0,0 +1,176 @@
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

@ -0,0 +1,377 @@
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.

After

Width:  |  Height:  |  Size: 198 KiB

235
src/index.css 100644
View File

@ -0,0 +1,235 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.titleh3 {
font-size: 20px;
font-weight: 400;
margin: 0;
}
.para{
font-size: 14px;
word-wrap: break-word;
color: #333;
margin-bottom: 15px;
margin-left: 10px;
text-indent: 2em;
line-height: 24px;
zoom: 1;
width: 1500px;
}
.tmp1{
font-size: 30px;
background-image: -webkit-linear-gradient(left,blue,rgb(235, 168, 14) 20%,rgb(85, 171, 182) 30%, rgb(207, 55, 149) 40%, rgb(18, 224, 97) 50%,rgb(255, 204, 204) 60%,rgb(218, 12, 156) 70%,#66CCCC 80%,rgb(230, 54, 30) 90%,red 100%);
-webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
-webkit-background-clip: text;/* 裁剪背景图,使文字作为裁剪区域向外裁剪 */
-webkit-animation: masked-animation 4s linear infinite;
word-break: break-all;
}
.Button1{
text-align: center;
font-size: 22px
}
.Button2{
margin: 10px;
font-size: 18px
}
.Button3{
margin: 10px;
font-size: 18px
}
.basicInfo-item.name {
width: 100px;
padding: 0 5px 1px 12px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
color: #999;
background-color: gold
}
.bg{
background-color: #E8E8FF;
}
.bg1{
background-color: #D7FFF0;
}
.bg2{
background-color: #DDF3FF;
}
.basicInfo-item.value {
zoom: 1;
font-size: 18px;
color: rgb(0, 0, 0);
width: 500px;
float: left;
position: relative;
word-break: break-all;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
.background {
width: 100%;
height: 100vh; /* 重点一 */
margin: auto;
background-image: url(./components/background.jpg);
background-repeat: no-repeat;
/* 重点二 */
overflow: auto;
background-position:50% 50%;
}
.header {
overflow: hidden;
font-family: "黑体";
color: black;
background-color : black;
text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
-webkit-background-clip : text;
padding: 13px 0px 8px 0px;
}
.header_r_t {
color:rgb(0, 0, 0);
position: absolute;
right: 20px;
top:25px;
border-radius: 5px;
*float: right;
font-size: 17px
}
.row-one {
overflow: hidden;
}
.row-one-cont li {
position: relative;
float: left;
list-style: none;
width: 260px;
margin-right: 16px;
}
.row-one-cont .arc-tit {
margin: 15px 0;
height: 46px;
font-size: 22px;
background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,rgb(204, 162, 63) 20%,rgb(85, 171, 182) 30%, rgb(207, 55, 149) 40%, #00FFFF 50%,rgb(255, 204, 204) 60%,rgb(218, 12, 156) 70%,#66CCCC 80%,rgb(230, 54, 30) 90%,rgb(201, 28, 15) 100%);
-webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
-webkit-background-clip: text;/* 裁剪背景图,使文字作为裁剪区域向外裁剪 */
-webkit-animation: masked-animation 4s linear infinite;
line-height: 23px;
word-break: break-all;
}
.row-one-cont .are-cont {
font-size: 15px;
background-color: rgb(248, 250, 250);
color: rgb(0, 0, 0);
line-height: 28px;
padding-right: 15px;
padding-left: 15px;
word-break: break-all;
border : 1px solid ;
border-top: none;
}
.type1{
font-size: 30px;
}
.footer .ft-bot {
clear: both;
*margin-top: 15px;
}
.footer p {
color: rgb(255, 255, 255);
}
.ft-bot {
text-align: center;
line-height: 20px;
border-top: 1px solid #3c6ba5;
}
.ft-info {
margin: 0px 0 0 80px;
}
.ft-info span {
position: absolute ;
left: 200px;
top:630px;
white-space: nowrap;
color: crimson
}
.ft-info1 span{
position: absolute ;
left: 1200px;
top:630px;
white-space: nowrap;
color: blue
}
.ft-info2 span{
position: absolute ;
left: 200px;
top:680px;
white-space: nowrap;
color:green
}
.ft-info3 span{
position: absolute ;
left: 1200px;
top:680px;
white-space: nowrap;
color: blueviolet
}
.title-prefix {
display: none;
}
.para-title.level-2 .title-text {
float: left;
display: block;
padding: 0 8px 0 18px;
line-height: 24px;
font-size: 22px;
font-weight: 400;
color: #000;
background: #fff;
}
.para-title.level-2 {
display: block;
clear: both;
zoom: 1;
overflow: hidden;
font-size: 20px;
border-left: 12px solid #4F9CEE;
line-height: 24px;
font-size: 22px;
font-weight: 400;
font-family: Microsoft YaHei,SimHei,Verdana;
position: relative;
margin: 35px 0 15px -30px;
}
.picture1{
float: right;
width: 200px ;
height: 50px;
}

8
src/index.js 100644
View File

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

1
src/logo.svg 100644

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.0 KiB

View File

@ -0,0 +1,135 @@
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}

View File

@ -0,0 +1,5 @@
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(proxy('/api', { target: 'http://localhost:5000' }));
}

4
yarn.lock 100644
View File

@ -0,0 +1,4 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1