diff --git a/src/glcc/freeProject/component/index.scss b/src/glcc/freeProject/component/index.scss new file mode 100644 index 00000000..186d8f12 --- /dev/null +++ b/src/glcc/freeProject/component/index.scss @@ -0,0 +1,8 @@ +.lastLineScroll { + max-height: 280px; + overflow-y: scroll; +} +.lastTwoScroll { + max-height: 520px; + overflow-y: scroll; +} \ No newline at end of file diff --git a/src/glcc/freeProject/component/projectDetail.jsx b/src/glcc/freeProject/component/projectDetail.jsx index 636e718d..f84a3c9d 100644 --- a/src/glcc/freeProject/component/projectDetail.jsx +++ b/src/glcc/freeProject/component/projectDetail.jsx @@ -3,8 +3,9 @@ import { Button, Tooltip } from 'antd'; import Nodata from '../../../forge/Nodata'; import { useEffect } from 'react'; import { getProjectById } from '../../api'; +import './index.scss'; -export default ({ detail, projectId }) => { +export default ({ detail, projectId, listLen }) => { const [info, setInfo] = useState(detail); useEffect(()=>{ @@ -27,21 +28,29 @@ export default ({ detail, projectId }) => {
项目简介:  {info.projectIntro}
{/* 课题列表 */} - {info.registrationTaskList && info.registrationTaskList.length ? info.registrationTaskList.map((item, index)=>{ - return
-
-
{item.taskName}
-
导师姓名:   {item.tutorName}
- {item.tutorMail &&
邮箱地址:   {item.tutorMail}
} +
= 2 + ? 'lastLineScroll' : listLen == 3 && + info.registrationTaskList.length >= 3 ? 'lastTwoScroll' : '' }> + {info.registrationTaskList && info.registrationTaskList.length ? info.registrationTaskList.map((item, index)=>{ + return
+
+
{item.taskName}
+
导师姓名:   {item.tutorName}
+ {item.tutorMail &&
邮箱地址:   {item.tutorMail}
} +
+
+
{item.taskDesc}
+ {item.taskUrl &&
课题链接:   {item.taskUrl}
} +
+
+
¥{item.taskReward}
-
-
{item.taskDesc}
- {item.taskUrl &&
课题链接:   {item.taskUrl}
} -
-
-
¥{item.taskReward}
-
- }) : } + }) : } +
:
) } \ No newline at end of file diff --git a/src/glcc/freeProject/projectList/index.jsx b/src/glcc/freeProject/projectList/index.jsx index a10f15f7..9b6e47a7 100644 --- a/src/glcc/freeProject/projectList/index.jsx +++ b/src/glcc/freeProject/projectList/index.jsx @@ -14,6 +14,7 @@ const { Search } = Input; function ProjectList() { const [data, setData] = useState([]); const [loading, setLoading] = useState(false); + const [listLen, setListLen] = useState(null); useEffect(() => { setLoading(true); @@ -31,11 +32,26 @@ function ProjectList() { }, []) // 修改taskList盒子的高度,防止弹框过高影响整体页面 - function changeVisible(visible, item) { + function changeVisible(visible, item, index) { if (visible) { - let height = document.documentElement.clientWidth / 1920 * 500 + 70 + document.querySelector(`.${item.gitlinkLastUrl}`).offsetTop + item.registrationTaskList.length * 320; - document.querySelector('#taskList').style.height = height + 'px'; + // let height = document.documentElement.clientWidth / 1920 * 500 + 70 + document.querySelector(`.${item.gitlinkLastUrl}`).offsetTop + item.registrationTaskList.length * 320; + // document.querySelector('#taskList').style.height = height + 'px'; + document.querySelector('#taskList').style.height = 'auto'; + // 判断当前行数是否为最后两行,并添加滚动条样式 + if(data && data.length && data.length > 0){ + const len = data.length; + const num = len%3 == 0 ? 3 : len%3; + // 最后一行 + if(len - index <= num){ + setListLen(2) + } + // 最后两行 + if(len - index <= num + 3 && len - index > num){ + setListLen(3) + } + } } else { + setListLen(null); document.querySelector('#taskList').style.height = 'auto'; } } @@ -46,10 +62,10 @@ function ProjectList() {
{data && data.map((item, index) => { return { changeVisible(visible, item) }} + onVisibleChange={(visible) => { changeVisible(visible, item, index) }} key={index} placement={(index + 1) % 3 === 0 ? 'bottomRight' : (index + 1) % 3 % 2 === 0 ? 'bottom' : 'bottomLeft'} - content={} + content={} trigger='click' overlayClassName='projectItemPopover' autoAdjustOverflow={false}