diff --git a/public/css/iconfont.css b/public/css/iconfont.css index 92de082a..607250fc 100644 --- a/public/css/iconfont.css +++ b/public/css/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 2340181 */ - src: url('iconfont.woff2?t=1651041108151') format('woff2'), - url('iconfont.woff?t=1651041108151') format('woff'), - url('iconfont.ttf?t=1651041108151') format('truetype'); + src: url('iconfont.woff2?t=1652687271594') format('woff2'), + url('iconfont.woff?t=1652687271594') format('woff'), + url('iconfont.ttf?t=1652687271594') format('truetype'); } .iconfont { @@ -13,6 +13,58 @@ -moz-osx-font-smoothing: grayscale; } +.icon-ketixiangqingicon:before { + content: "\e92b"; +} + +.icon-bianjiicon:before { + content: "\e92c"; +} + +.icon-baomingxiangqingicon:before { + content: "\e92d"; +} + +.icon-sousuo4:before { + content: "\e92e"; +} + +.icon-quxiaoshenqingicon:before { + content: "\e92f"; +} + +.icon-xiala3:before { + content: "\e930"; +} + +.icon-tianjia_tianchong:before { + content: "\e931"; +} + +.icon-a-shanchu2:before { + content: "\e932"; +} + +.icon-shanchuicon3:before { + content: "\e933"; +} + +.icon-shenqingketiicon:before { + content: "\e934"; +} + +.icon-weixin:before { + content: "\e92a"; +} + +.icon-zanwushuju:before { + content: "\e928"; +} + +.icon-fuwuicon:before { + content: "\e929"; +} + .icon-personal-center:before { content: "\e927"; } diff --git a/public/css/iconfont.js b/public/css/iconfont.js index b910937d..62120a1f 100644 --- a/public/css/iconfont.js +++ b/public/css/iconfont.js @@ -1 +1 @@ -!function(a){var l,c,h,i,o,z='',t=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss"),p=function(a,l){l.parentNode.insertBefore(a,l)};if(t&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}function v(){o||(o=!0,h())}function m(){try{i.documentElement.doScroll("left")}catch(a){return void setTimeout(m,50)}v()}l=function(){var a,l=document.createElement("div");l.innerHTML=z,z=null,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(a=document.body).firstChild?p(l,a.firstChild):a.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),l()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(h=l,i=a.document,o=!1,m(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,v())})}(window); \ No newline at end of file +!function(a){var l,c,h,i,o,z='',t=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss"),p=function(a,l){l.parentNode.insertBefore(a,l)};if(t&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}function v(){o||(o=!0,h())}function m(){try{i.documentElement.doScroll("left")}catch(a){return void setTimeout(m,50)}v()}l=function(){var a,l=document.createElement("div");l.innerHTML=z,z=null,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(a=document.body).firstChild?p(l,a.firstChild):a.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),l()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(h=l,i=a.document,o=!1,m(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,v())})}(window); \ No newline at end of file diff --git a/public/css/iconfont.json b/public/css/iconfont.json index 3bf3eb57..c560203d 100644 --- a/public/css/iconfont.json +++ b/public/css/iconfont.json @@ -5,6 +5,97 @@ "css_prefix_text": "icon-", "description": "", "glyphs": [ + { + "icon_id": "29701613", + "name": "课题详情icon", + "font_class": "ketixiangqingicon", + "unicode": "e92b", + "unicode_decimal": 59691 + }, + { + "icon_id": "29701614", + "name": "编辑icon", + "font_class": "bianjiicon", + "unicode": "e92c", + "unicode_decimal": 59692 + }, + { + "icon_id": "29701615", + "name": "报名详情icon", + "font_class": "baomingxiangqingicon", + "unicode": "e92d", + "unicode_decimal": 59693 + }, + { + "icon_id": "29701616", + "name": "搜索", + "font_class": "sousuo4", + "unicode": "e92e", + "unicode_decimal": 59694 + }, + { + "icon_id": "29701617", + "name": "取消申请icon", + "font_class": "quxiaoshenqingicon", + "unicode": "e92f", + "unicode_decimal": 59695 + }, + { + "icon_id": "29701618", + "name": "下拉", + "font_class": "xiala3", + "unicode": "e930", + "unicode_decimal": 59696 + }, + { + "icon_id": "29701619", + "name": "添加_填充", + "font_class": "tianjia_tianchong", + "unicode": "e931", + "unicode_decimal": 59697 + }, + { + "icon_id": "29701620", + "name": "删除 (2)", + "font_class": "a-shanchu2", + "unicode": "e932", + "unicode_decimal": 59698 + }, + { + "icon_id": "29701621", + "name": "删除icon", + "font_class": "shanchuicon3", + "unicode": "e933", + "unicode_decimal": 59699 + }, + { + "icon_id": "29701622", + "name": "申请课题icon", + "font_class": "shenqingketiicon", + "unicode": "e934", + "unicode_decimal": 59700 + }, + { + "icon_id": "29665762", + "name": "微信", + "font_class": "weixin", + "unicode": "e92a", + "unicode_decimal": 59690 + }, + { + "icon_id": "29467269", + "name": "暂无数据", + "font_class": "zanwushuju", + "unicode": "e928", + "unicode_decimal": 59688 + }, + { + "icon_id": "29467272", + "name": "服务icon", + "font_class": "fuwuicon", + "unicode": "e929", + "unicode_decimal": 59689 + }, { "icon_id": "29206429", "name": "personal-center", diff --git a/public/css/iconfont.ttf b/public/css/iconfont.ttf index 76ccae2b..e63b224e 100644 Binary files a/public/css/iconfont.ttf and b/public/css/iconfont.ttf differ diff --git a/public/css/iconfont.woff b/public/css/iconfont.woff index be0e660d..16909e67 100644 Binary files a/public/css/iconfont.woff and b/public/css/iconfont.woff differ diff --git a/public/css/iconfont.woff2 b/public/css/iconfont.woff2 index 51640e89..79be068f 100644 Binary files a/public/css/iconfont.woff2 and b/public/css/iconfont.woff2 differ diff --git a/src/glcc/api.js b/src/glcc/api.js index f0f99d61..f19f9299 100644 --- a/src/glcc/api.js +++ b/src/glcc/api.js @@ -1,6 +1,6 @@ import fetch from './fetch'; -// 获取当前用户报名信息 +// 获取当前用户项目报名信息 export function getUserApplyInfo(params) { return fetch({ url: `/api/applyInformation/getUserApplyInfo`, @@ -16,4 +16,48 @@ export function applyGlcc(data) { method: 'post', data: data }); +} + +// 课题列表 +export function projectList(params) { + return fetch({ + url: `/api/applyInformation/list`, + method: 'get', + params + }); +} + +// 课题列表 +export function taskList(params) { + return fetch({ + url: `/api/applyInformation/taskList`, + method: 'get', + params + }); +} + +// 项目id查询项目详情 +export function getProjectById(id) { + return fetch({ + url: `/api/applyInformation/${id}`, + method: 'get' + }); +} + +// 获取用户 课题报名信息 +export function getStudentApplyInfo(params) { + return fetch({ + url: `/api/studentApply/getUserApplyInfo`, + method: 'get', + params + }); +} + +// 用户取消课题报名 +export function cancelTaskApply(data) { + return fetch({ + url: '/api/studentApply/delete', + method: 'post', + data: data + }); } \ No newline at end of file diff --git a/src/glcc/home/index.jsx b/src/glcc/home/index.jsx index a3ef69b6..359fa641 100644 --- a/src/glcc/home/index.jsx +++ b/src/glcc/home/index.jsx @@ -8,20 +8,23 @@ import News from './news'; import Partner from "./partner"; import Contact from "./contact"; import banner from "../img/banner.png"; +import introduce from "../img/introduce.png"; +import apply1 from "../img/apply1.png"; +import apply2 from "../img/apply2.png"; import './index.scss'; export default (props) => { - const {current_user, isGlccApplyDate, showNotification} = props; - function goToApply(){ - if(isGlccApplyDate){ - if(current_user && current_user.login){ - window.location.href="https://wj.qq.com/s2/10175205/e8df/"; - }else{ - window.location.href="/login?go_page=https://wj.qq.com/s2/10175205/e8df/"; + const { current_user, isGlccApplyDate, showNotification } = props; + function goToApply() { + if (isGlccApplyDate) { + if (current_user && current_user.login) { + window.location.href = "https://wj.qq.com/s2/10175205/e8df/"; + } else { + window.location.href = "/login?go_page=https://wj.qq.com/s2/10175205/e8df/"; } - }else{ + } else { showNotification("不在报名时间,报名时间为4月15日~5月20日"); - window.location.href="/glcc"; + window.location.href = "/glcc"; } } @@ -30,18 +33,42 @@ export default (props) => { {/* */} {/*
*/} - {/* {!isGlccApplyDate && showNotification("不在报名时间,报名时间为4月15日~5月20日")}}> */} -
+ {/* {!isGlccApplyDate && showNotification("不在报名时间,报名时间为4月15日~5月20日")}}> */} + {/*
立即报名
+
*/} + {/* 报名入口 */} +
+ {/* 项目报名 */} +
+
+ + 项目报名 > + 项目报名已截止 +
+
项目报名开启,导师席位虚位以待
+
+ {/* 学生报名 */} +
{window.location.href="/glcc/student/2"}}> +
+ + 学生报名 > +
+
选择感兴趣的课题,开启您的开源之旅
- {/* */} - {/*
*/} -
-
活动简介
-
GitLink编程夏令营(GLCC),是在CCF中国计算机学会指导下,由CCF开源发展委员会(CCF ODC)举办的面向全国高校学生的暑期编程活动。活动将覆盖近千所高校,并联合各大开源基金会、开源企业、开源社区、开源专家,旨在鼓励青年学生通过参加真实的开源软件开发,提升自身技术能力,为开源社区输送优秀人才。为青年学生提供开放友好的交流平台,希望进一步推动国内开源社区的繁荣发展。
- + {/*
*/} +
+
+
活动简介
+
+
GitLink编程夏令营(GLCC),是在CCF中国计算机学会指导下,由CCF开源发展委员会(CCF ODC)举办的面向全国高校学生的暑期编程活动。活动将覆盖近千所高校,并联合各大开源基金会、开源企业、开源社区、开源专家,旨在鼓励青年学生通过参加真实的开源软件开发,提升自身技术能力,为开源社区输送优秀人才。为青年学生提供开放友好的交流平台,希望进一步推动国内开源社区的繁荣发展。
+ +
+
+
+ diff --git a/src/glcc/home/index.scss b/src/glcc/home/index.scss index 593014cc..bd26ee59 100644 --- a/src/glcc/home/index.scss +++ b/src/glcc/home/index.scss @@ -17,23 +17,69 @@ .ant-btn-primary{ background-color: #466aff; border-color: #466aff; - &:hover{ opacity: .8; } } - .apply-btn { + .applyBox { position: absolute; - top: 15vw; - left: 18.8vw; - width: 152px; - height: 40px; - background-color: #2e5bfe; - border: 1px solid #466aff; - color: #fff; + top: 21vw; + left: 17.5vw; padding-left: 18px; cursor: pointer; + display: flex; + .apply{ + color:#666666; + font-size:15px; + padding: 20px 0 20px 30px; + background-image:linear-gradient(45deg,#C6D3F0 0%,#C9D8FF 50.63%,#E7ECFE 100%); + border:1px solid #ffffff; + border-radius:4px; + box-shadow:0px 0px 6px rgba(255, 255, 255, 0.73); + display: flex; + flex-direction: column; + justify-content: center; + width: 355px; + .til{ + margin-left: 10px; + font-family:PingFang SC; + font-weight:700; + color:#333333; + font-size:18px; + margin-bottom: 10px; + } + &:hover, &:hover .til{ + color:#466aff; + } + .hover-show{ + display: none; + } + &:hover .hover-none, &:hover .pt6{ + display: none; + } + &:hover.project{ + background-image:linear-gradient(45deg,#EBEFFF 0%, #E0E4F9 50.63%,#F1F1F1 100%); + box-shadow:0px 0px 6px #466aff; + cursor: default; + .hover-show{ + display: inline-block; + margin-left: 10px; + font-weight:700; + color: #999999; + font-size:18px; + } + } + } + .apply:last-child{ + margin-left: 35px; + } + .applyIcon{ + width: 30px; + } + .pt6{ + padding-top: 10px; + } } .apply-text { font-family: Alibaba PuHuiTi; @@ -109,25 +155,34 @@ } .introduce { - z-index: 1; - position: relative; - top: -45px; - background-image: linear-gradient( - 163.51deg, - #e5ecff 0%, - #e0e9ff 32.91%, - #fbfcff 100% - ); - background: url("../img/introduce-bg.png"); - box-shadow: 0 0 12px rgba(161, 186, 255, 0.6); - background-size: 100% 100%; - padding: 48px; + // z-index: 1; + // position: relative; + // top: -45px; + // background-image: linear-gradient( + // 163.51deg, + // #e5ecff 0%, + // #e0e9ff 32.91%, + // #fbfcff 100% + // ); + // background: url("../img/introduce-bg.png"); + // box-shadow: 0 0 12px rgba(161, 186, 255, 0.6); + // background-size: 100% 100%; + // padding: 48px; + min-height: 500px; + background-image:linear-gradient(132.67deg,#e5ecff 0%,#e0e9ff 53.13%,#fbfcff 100%); .glcc-tit { - margin-bottom: 30px !important; + margin-bottom: 60px !important; } .introduce-content { color: #202d40; font-size: 15px; line-height: 30px; } + .introduceBox{ + display: flex; + .introduceImg{ + width: 32vw; + margin-left: 3vw; + } + } } diff --git a/src/glcc/home/lightspot/index.jsx b/src/glcc/home/lightspot/index.jsx index c9d25532..3d37479a 100644 --- a/src/glcc/home/lightspot/index.jsx +++ b/src/glcc/home/lightspot/index.jsx @@ -37,9 +37,15 @@ function Lightspot(props) {

有兴趣成为GLCC的导师吗?

想要扩大项目知名度和影响力,为开源项目吸引新鲜血液,培养长期开发者。通过GitLink平台,与高校建立连接,指导开源新人传授他们的开源文化,享受开源的乐趣
{/* {!isGlccApplyDate && showNotification("不在报名时间,报名时间为4月15日~5月20日")}}>立即报名 */} -
立即报名
+
项目报名项目报名已截止
- +
+

你是开源新手,有兴趣参加GLCC吗?

+
想要参与一线开源项目开发,熟悉开源社区运作流程,接受资深开源软件专家指导,获得丰厚奖金和实习机会。参加GLCC,开启全新的开源之旅。
+ {/* {!isGlccApplyDate && showNotification("不在报名时间,报名时间为4月15日~5月20日")}}>立即报名 */} +
学生报名
+
+ {/* */}
@@ -50,19 +56,19 @@ function Lightspot(props) {
- +

覆盖全国千所高校、万名会员

活动邀请10+全球顶尖开源基金会,100+顶级开源项目社区,致力营造专业、开放的开源社区
- +

结识开源伙伴和技术大咖

每个项目配备一名导师,参与开源项目开发可接受一线资深开源项目专家专业指导,结识志同道合的开发伙伴
- +

丰厚奖励&实习绿色通道

入选同学可获得丰厚奖金,并有机会进入优秀开源项目企业实习或工作,受邀参与开源大会等机会
diff --git a/src/glcc/home/lightspot/index.scss b/src/glcc/home/lightspot/index.scss index a99e5e66..7b708f88 100644 --- a/src/glcc/home/lightspot/index.scss +++ b/src/glcc/home/lightspot/index.scss @@ -10,6 +10,7 @@ .info-teacher { display: flex; justify-content: space-between; + margin-bottom: 50px; } .teacher-text { margin-right: 2.84%; @@ -26,6 +27,19 @@ opacity: .8; color: white !important; cursor: pointer; + .hover-show{ + display: inline-block; + } + .hover-none{ + display: none; + } + } + &:hover.project{ + background-color:#abafbe; + cursor: default; + } + .hover-show{ + display: none; } } } diff --git a/src/glcc/img/apply1.png b/src/glcc/img/apply1.png new file mode 100644 index 00000000..1981aa58 Binary files /dev/null and b/src/glcc/img/apply1.png differ diff --git a/src/glcc/img/apply2.png b/src/glcc/img/apply2.png new file mode 100644 index 00000000..6d80273d Binary files /dev/null and b/src/glcc/img/apply2.png differ diff --git a/src/glcc/img/apply_bg1.png b/src/glcc/img/apply_bg1.png new file mode 100644 index 00000000..c2b4a222 Binary files /dev/null and b/src/glcc/img/apply_bg1.png differ diff --git a/src/glcc/img/apply_bg2.png b/src/glcc/img/apply_bg2.png new file mode 100644 index 00000000..850ce493 Binary files /dev/null and b/src/glcc/img/apply_bg2.png differ diff --git a/src/glcc/img/banner.png b/src/glcc/img/banner.png index 9fa40a46..3fe2e801 100644 Binary files a/src/glcc/img/banner.png and b/src/glcc/img/banner.png differ diff --git a/src/glcc/img/introduce.png b/src/glcc/img/introduce.png new file mode 100644 index 00000000..43c007dd Binary files /dev/null and b/src/glcc/img/introduce.png differ diff --git a/src/glcc/img/projectBg.png b/src/glcc/img/projectBg.png new file mode 100644 index 00000000..7e469985 Binary files /dev/null and b/src/glcc/img/projectBg.png differ diff --git a/src/glcc/img/projectDetailTaskBg.png b/src/glcc/img/projectDetailTaskBg.png new file mode 100644 index 00000000..4caff1ae Binary files /dev/null and b/src/glcc/img/projectDetailTaskBg.png differ diff --git a/src/glcc/index.jsx b/src/glcc/index.jsx index cc621dde..96ede753 100644 --- a/src/glcc/index.jsx +++ b/src/glcc/index.jsx @@ -23,12 +23,16 @@ const Apply = Loadable({ loader: () => import("./apply"), loading: Loading, }); -// 开源夏令营报名页面 +// 开源夏令营帮助中心页面 const Help = Loadable({ loader: () => import("./help"), loading: Loading, }); - +// 开源夏令营项目、课题列表页面 +const Project = Loadable({ + loader: () => import("./project"), + loading: Loading, +}); const Glcc = (propsF) => { // 判断时间是否在开源夏令营报名时间内(4月15日~5月20日) @@ -51,6 +55,13 @@ const Glcc = (propsF) => { )} > + {/* 项目/课题列表 */} + ( + + )} + > {/* 首页 */} { + const [info, setInfo] = useState(detail); + + useEffect(()=>{ + if(!detail && projectId){ + // 通过项目Id查询项目详情 + getProjectById(projectId).then(response=>{ + if(response && response.message === 'success'){ + setInfo(response.data) + } + }) + } + },[detail]) + + // detail && (detail.registrationTaskList = [{ + // taskName: 'aaaa啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊', + // tutorName: 'daoshi', + // tutorMail: 'email', + // taskDesc: 'sfdjhdf,hsldf', + // taskUrl: 'url', + // taskReward: '9000' + // },{ + // taskName: 'aaaa啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊', + // tutorName: 'daoshi', + // tutorMail: 'email', + // taskDesc: 'sfdjhdf,hsldfaaaa啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊aaaa啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊aaaa啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊aaaa啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊啊啊啊啊', + // taskUrl: 'url', + // taskReward: '9000' + // }]) + return ( + info ?
+
+ {info.projectName} + {info.projectType} +

{info.gitlinkUrl}

+
{info.officialWebsiteUrl}
+
+ {info.registrationTaskList && info.registrationTaskList.length > 0 ? info.registrationTaskList.map(item=>{ + return
+
+
{item.taskName}
+
导师姓名:   {item.tutorName}
+
邮箱地址:   {item.tutorMail}
+
+
+
{item.taskDesc}
+
课题链接:   {item.taskUrl}
+
{applyTaskId && applyTaskId.includes(item.id) ? : }
+
+
¥ {item.taskReward}
+
+ }) : } +
:
+ ) +} \ No newline at end of file diff --git a/src/glcc/project/index.jsx b/src/glcc/project/index.jsx new file mode 100644 index 00000000..fedade07 --- /dev/null +++ b/src/glcc/project/index.jsx @@ -0,0 +1,71 @@ +import React , { useEffect , useState } from 'react'; +import { Spin } from 'antd'; +import { Route, Switch } from "react-router-dom"; +import banner from "../img/banner.png"; +import './index.scss'; +import Loadable from "react-loadable"; +import Loading from "../../Loading"; +import { Link } from 'react-router-dom'; +import { getStudentApplyInfo } from '../api'; + +// 项目列表页面 +const ProjectList = Loadable({ + loader: () => import("./projectList"), + loading: Loading, +}); +// 课题列表页面 +const TaskList = Loadable({ + loader: () => import("./taskList"), + loading: Loading, +}); + +function Project(propsF) { + const {location, current_user} = propsF; + const {pathname} = location; + + // 用户已报名课题id数组 + const [applyTaskId, setApplyTaskId] = useState([]); + // 刷新用户课题报名信息 + const [studentInfoReset, setStudentInfoReset] = useState(undefined); + + useEffect(()=>{ + // 获取用户课题报名信息current_user user_id + getStudentApplyInfo({userId: current_user && current_user.user_id}).then(response=>{ + if(response && response.message === "success"){ + // setData(response.data.rows); + const data = new Set(); + response.data && response.data.registrationStudentTaskList.map(item=>{ + data.add(item.taskId); + }) + setApplyTaskId(Array.from(data)); + } + }) + },[studentInfoReset]) + + return( +
+ +
+ 课题列表 + 项目列表 +
+ + + ( + + )} + > + ( + + )} + > + + +
+ ) +} +export default Project; \ No newline at end of file diff --git a/src/glcc/project/index.scss b/src/glcc/project/index.scss new file mode 100644 index 00000000..b5228aba --- /dev/null +++ b/src/glcc/project/index.scss @@ -0,0 +1,142 @@ +.glcc_project{ + .head{ + background-color:rgba(188, 208, 255, 0.27); + border:1px solid #ffffff; + text-align: center; + a{ + padding: 18px 20px 20px; + display: inline-block; + color: #273778; + font-size: 18px; + font-weight:700; + line-height: 30px; + &.active{ + border-bottom: 1px solid #5474df;; + } + &:last-child{ + margin-left: 40px; + } + } + } + .listBox{ + background-image:linear-gradient(180deg,#ebf2ff 0%,#ebf2ff 43.09%,#f3f4f8 100%); + .list{ + width: 1200px; + margin: 0 auto; + .search{ + width: 40%; + margin: 0 auto; + padding: 40px 0; + } + .search .ant-btn, .search .ant-input{ + height: 48px; + } + .search .ant-btn{font-size: 30px;} + .search .ant-input{font-size: 16px;} + } + .search{ + .ant-btn-primary{ + background-color:#466aff; + border-color: #466aff; + } + .ant-input:hover{ + border-color: #466aff; + } + } + } +} +.glcc-banner { + width: 100%; +} +// 项目详情框 +.projectDetailBox{ + &.byTask{ + background-image:linear-gradient(180deg,#f1f5ff 0%,#ffffff 100%); + border:1px solid #ffffff; + border-radius:4px; + box-shadow:0px 0px 10px rgba(100, 141, 255, 0.2); + padding: 30px 30px 50px; + .taskItem{ + .center{ + width: 60%; + } + .right{padding-right: 0px;} + } + } + &.nodata{width: 200px;} + font-size:15px; + line-height:30px; + .projectDetailHead{ + color:#465474; + padding-bottom: 12px; + border-bottom: 1px dashed #bec5d5; + .name{ + font-weight:700; + color:#3753c5; + font-size:20px; + } + .type{ + display: inline-block; + border:1px solid #6680bb; + border-radius:4px; + margin-left: 12px; + padding: 4px 6px; + } + } + .taskItem { + display: flex; + justify-content: space-between; + background-color: #ffffff; + box-shadow: 0px 0px 12px rgba(71, 105, 198, 0.4); + .left{ + width: 250px; + background-image: url('../img/projectDetailTaskBg.png'); + background-size: 100% 100%; + padding: 22px 20px; + color:#25304a; + .taskTitle{ + color:#1834a7; + font-size:18px; + } + .email span{color:#466aff;} + } + .center{ + width: 66%; + text-align: left; + padding: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + .taskDesc{ + color:#6b6b6b; + } + .taskUrl{ + color:#465474; + font-size:16px; + span{color:#466aff;} + } + .applyBut{ + background-color:#466aff; + border-color: #466aff; + &:hover{background-color:#5d7cff;} + &:focus{background-color:#1140ff;} + } + } + .right{ + font-weight:700; + color:#ff8800; + font-size:24px; + padding: 30px 30px 0 0; + } + } +} +.projectItemPopover{width: 1200px;} +.projectItemPopover .ant-popover-inner{ + background-image:linear-gradient(180deg,#f1f5ff 0%,#ffffff 100%); + border:1px solid #ffffff; + border-radius:4px; + box-shadow:0px 0px 10px rgba(100, 141, 255, 0.2); + .ant-popover-inner-content{ + padding: 30px 30px 50px; + } +} \ No newline at end of file diff --git a/src/glcc/project/projectList/index.jsx b/src/glcc/project/projectList/index.jsx new file mode 100644 index 00000000..c92bbb47 --- /dev/null +++ b/src/glcc/project/projectList/index.jsx @@ -0,0 +1,48 @@ +import React , { useEffect , useState } from 'react'; +import { Input, Popover, Table, Tooltip } from 'antd'; +import { main_site_url } from '../../fetch'; +import './index.scss'; +import { projectList } from '../../api'; +import ProjectDetail from '../component/projectDetail'; +const {Search} = Input; + +// 项目列表 +function ProjectList({applyTaskId}) { + // 输入搜索框 + const [keyword, setKeyword] = useState(undefined); + const [data, setData] = useState([]); + + useEffect(()=>{ + const params = { + curPage: 1, + keyword, + pageSize: 20 + } + projectList(params).then(response=>{ + if(response && response.message === "success"){ + setData(response.data.rows); + } + }) + },[keyword]) + + return( +
+
+
{setKeyword(value)}}/>
+
+ {data && data.map((item, index)=>{ + return } trigger='click' overlayClassName='projectItemPopover'> +
+
+
+
{item.projectName}
+
{item.projectIntro}
+
+
+ })} +
+
+
+ ) +} +export default ProjectList; \ No newline at end of file diff --git a/src/glcc/project/projectList/index.scss b/src/glcc/project/projectList/index.scss new file mode 100644 index 00000000..a786afa7 --- /dev/null +++ b/src/glcc/project/projectList/index.scss @@ -0,0 +1,76 @@ +.actionBox{ + display: flex; + align-items: center; + color: #466aff; + cursor: pointer; + .iconfont{ + margin: 0 10px 0 14px; + } + .applyTask{ + color:#eb9350; + } +} +.projectListBox{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + .projectItem{ + width: 30%; + background-image: linear-gradient(180deg,rgba(232, 237, 255, 0.85) 0%,rgba(255, 255, 255, 0.85) 100%); + border: 1px solid; + border-color: #ffffff; + border-radius: 4px; + box-shadow:0px 0px 8px rgba(93, 131, 255, 0.26); + text-align: center; + margin-bottom: 50px; + background-image: url('../../img/projectBg.png'); + background-size: 100% 100%; + &:hover{ + cursor: pointer; + background-image: none; + // #E8EDFF—#FFFFFF(85%) + background-image: linear-gradient(180deg,rgba(232, 237, 255, 0.85) 0%,rgba(255, 255, 255, 0.85) 100%); + } + .border{ + height: 5px; + background-color:#657edf; + border-radius:2px 2px 0px 0px; + } + .projectLogo{ + width: 100px; + height: 100px; + border: 1px solid #fff; + border-radius: 50%; + text-align: center; + overflow: hidden; + margin: 25px auto 10px; + img{ + width: 100%; + height: 100%; + display: block; + } + } + .title{ + color:#2a51bf; + font-size:17px; + line-height:30px; + margin-bottom: 15px; + padding: 0 50px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .intro{ + color:#4f5d84; + font-size:15px; + margin-bottom: 15px; + display: -webkit-box; + overflow: hidden; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + text-overflow: ellipsis; + text-align: left; + padding: 0 14px; + } + } +} \ No newline at end of file diff --git a/src/glcc/project/taskList/index.jsx b/src/glcc/project/taskList/index.jsx new file mode 100644 index 00000000..d6d8b82c --- /dev/null +++ b/src/glcc/project/taskList/index.jsx @@ -0,0 +1,128 @@ +import React, { Fragment, useEffect, useState } from 'react'; +import { Input, message, Modal, Table, Tooltip } from 'antd'; +import './index.scss'; +import { cancelTaskApply, taskList } from '../../api'; +import ProjectDetail from '../component/projectDetail'; +const { Search } = Input; + +// 课题列表 +function TaskList({applyTaskId, setStudentInfoReset}) { + const [visible, setVisible] = useState(false); + const [deleteTaskId, setDeleteTaskId] = useState(undefined); + // 输入搜索框 + const [keyword, setKeyword] = useState(undefined); + const [data, setData] = useState([]); + + const columns = [ + { title: '序号', dataIndex: 'index', align: 'center', render: (text, item, index) => index + 1 }, + { title: '课题名称', dataIndex: 'taskName', width: '28%', render: (text) => {text} }, + { title: '项目名称', dataIndex: 'tutorName', width: '28%', render: (text) => {text} }, + { title: '课题奖金', dataIndex: 'taskReward', render: (text) => ¥ {text} }, + { + title: '操作', dataIndex: 'action', align: 'center', className:"actionColumns", render: ((text, item, index) => { + return ( +
+ {applyTaskId && applyTaskId.includes(item.id) ? + {window.location.href=`/glcc/student/apply`}}>报名详情 + {setDeleteTaskId(item.id);setVisible(true)}}> + : + {window.location.href=`/glcc/student/apply/${item.id}`}}>{applyTask(item.id)}}>申请课题} +
+ ) + }) + }, + ] + + const customExpandIcon = (props) => { + if (props.expanded) { + return { + props.onExpand(props.record, e); + }}>课题详情 + } else { + return { + props.onExpand(props.record, e); + }}>课题详情 + } + // if(props.record.members && props.record.members.length > 0){ + // if (props.expanded) { + // return { + // props.onExpand(props.record, e); + // }}>查看成员 + // } else { + // return { + // props.onExpand(props.record, e); + // }}>查看成员 + // } + // }else{ + // return 查看成员 + // } + } + + const expandRow = (record) => { + return + } + + // 申请课题按钮点击函数 + function applyTask(id){ + // 判断用户是否已经报名两个课题 + if(applyTaskId.length >= 2){ + message.error('最多只能同时报名两个课题'); + }else{ + // 跳转到学生报名页 + window.location.href=`/glcc/student/apply/${id}`; + } + } + + // 取消课题按钮点击函数 + function cancelApply(){ + cancelTaskApply({ids: Array.from(deleteTaskId.toString())}).then(response=>{ + if(response && response.message === "success"){ + setVisible(false); + setStudentInfoReset(Math.random()); + message.success('取消成功'); + } + }) + } + + useEffect(() => { + const params = { + curPage: 1, + keyword, + pageSize: 20 + } + taskList(params).then(response => { + if (response && response.message === "success") { + setData(response.data.rows); + } + }) + }, [keyword]) + + return ( +
+
+
{ setKeyword(value) }} />
+ + + {setVisible(false)}} + onOk={cancelApply} + wrapClassName='cancelApplyTask' + > +
!取消申请即删除本次报名记录,确定取消?
+

此操作将永久删除该报名记录,请进行确认以防数据的丢失

+
+ + ) +} +export default TaskList; \ No newline at end of file diff --git a/src/glcc/project/taskList/index.scss b/src/glcc/project/taskList/index.scss new file mode 100644 index 00000000..67e938ca --- /dev/null +++ b/src/glcc/project/taskList/index.scss @@ -0,0 +1,63 @@ +.actionBox{ + display: flex; + align-items: center; + color: #466aff; + cursor: pointer; + .iconfont{margin: 0 10px 0 14px;} + .applyTask{color:#eb9350;} + .cancelApply{visibility: hidden;} +} +tr:hover .actionBox .cancelApply{ + visibility: visible; + color: #E31E1E; +} +.ant-table-tbody .actionColumns{ + display: flex; +} +.cancelApplyTask{ + .ant-modal-close{top: 0px !important;} + .ant-modal-header{ + padding: 8px 20px; + background-color: #e9edff; + .ant-modal-title{text-align: left;} + } + .carefulIcon{ + width: 36px; + height: 36px; + background: #ca0002; + display: inline-block; + border-radius: 50%; + text-align: center; + line-height: 36px; + font-size: 18px; + color: white; + margin-right: 15px; + } + .tilTask{ + color:#333333; + font-size:16px; + margin-left: 35px; + } + .tipTask{ + color:#666666; + font-size:14px; + margin: 30px 0 30px 86px !important; + } + .ant-modal-footer{ + border-top: none; + text-align: center; + padding-bottom: 50px; + .ant-btn{ + &.ant-btn-default{ + color: #df0002; + } + &:hover{ + border-color: #466aff; + color: #466aff; + &.ant-btn-default{ + border-color: #df0002; + color: #df0002;} + } + } + } +} \ No newline at end of file