From f00b9830bfc6e1268b0a8a55965b4fbc645cb1a4 Mon Sep 17 00:00:00 2001
From: namezlx <1879558202@qq.com>
Date: Fri, 18 Aug 2023 13:40:36 +0800
Subject: [PATCH] =?UTF-8?q?'=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=A4=8D'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/glcc/freeProject/component/index.scss     |  8 ++++
 .../freeProject/component/projectDetail.jsx   | 39 ++++++++++++-------
 src/glcc/freeProject/projectList/index.jsx    | 26 ++++++++++---
 3 files changed, 53 insertions(+), 20 deletions(-)
 create mode 100644 src/glcc/freeProject/component/index.scss

diff --git a/src/glcc/freeProject/component/index.scss b/src/glcc/freeProject/component/index.scss
new file mode 100644
index 000000000..186d8f12f
--- /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 636e718dd..f84a3c9d2 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 }) => {
         <div>项目简介:&nbsp;&nbsp;{info.projectIntro}</div>
       </div>
       {/* 课题列表 */}
-      {info.registrationTaskList && info.registrationTaskList.length ? info.registrationTaskList.map((item, index)=>{
-        return <div className='taskItem mt20' key={index}>
-          <div className="left">
-            <div className="taskTitle"><Tooltip title={item.taskName}>{item.taskName}</Tooltip></div>
-            <div className='mt20 oneLine leftWidth'>导师姓名: &nbsp;&nbsp;{item.tutorName}</div>
-            {item.tutorMail && <div className='mb20 email oneLine leftWidth'>邮箱地址: &nbsp;&nbsp;<span><Tooltip title={item.tutorMail}>{item.tutorMail}</Tooltip></span></div>}
+      <div className={ 
+          info.registrationTaskList && 
+          info.registrationTaskList.length &&
+          listLen == 2 && 
+          info.registrationTaskList.length >= 2 
+          ? 'lastLineScroll' : listLen == 3 && 
+          info.registrationTaskList.length >= 3 ? 'lastTwoScroll' : ''  }>
+        {info.registrationTaskList && info.registrationTaskList.length ? info.registrationTaskList.map((item, index)=>{
+          return <div className='taskItem mt20' key={index}>
+            <div className="left">
+              <div className="taskTitle"><Tooltip title={item.taskName}>{item.taskName}</Tooltip></div>
+              <div className='mt20 oneLine leftWidth'>导师姓名: &nbsp;&nbsp;{item.tutorName}</div>
+              {item.tutorMail && <div className='mb20 email oneLine leftWidth'>邮箱地址: &nbsp;&nbsp;<span><Tooltip title={item.tutorMail}>{item.tutorMail}</Tooltip></span></div>}
+            </div>
+            <div className="center">
+              <div className="taskDesc"><Tooltip title={item.taskDesc}>{item.taskDesc}</Tooltip></div>
+              {item.taskUrl && <div className="taskUrl oneLine">课题链接: &nbsp;&nbsp;<a href={item.taskUrl} target={"_blank"}>{item.taskUrl}</a></div>}
+              <div></div>
+            </div>
+            <div className="right oneLine taskUrl"><span className='taskReward'>￥{item.taskReward}</span></div>
           </div>
-          <div className="center">
-            <div className="taskDesc"><Tooltip title={item.taskDesc}>{item.taskDesc}</Tooltip></div>
-            {item.taskUrl && <div className="taskUrl oneLine">课题链接: &nbsp;&nbsp;<a href={item.taskUrl} target={"_blank"}>{item.taskUrl}</a></div>}
-            <div></div>
-          </div>
-          <div className="right oneLine taskUrl"><span className='taskReward'>￥{item.taskReward}</span></div>
-        </div>
-      }) : <Nodata _html="课题暂无数据" small={true}/>}
+        }) : <Nodata _html="课题暂无数据" small={true}/>}
+      </div>
     </div>: <div className="projectDetailBox nodata"><Nodata _html="暂无数据" small={true}/></div>
   )
 }
\ No newline at end of file
diff --git a/src/glcc/freeProject/projectList/index.jsx b/src/glcc/freeProject/projectList/index.jsx
index a10f15f78..9b6e47a77 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() {
         <div className='projectListBox'>
           {data && data.map((item, index) => {
             return <Popover
-              onVisibleChange={(visible) => { 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={<ProjectDetail detail={item}/>}
+              content={<ProjectDetail detail={item} listLen = {listLen} />}
               trigger='click'
               overlayClassName='projectItemPopover'
               autoAdjustOverflow={false}