init
This commit is contained in:
@@ -0,0 +1,242 @@
|
||||
.project-cases-modal {
|
||||
width: 758px;
|
||||
height: 700px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
background-color: #f2f3f5;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
background-image: url("@/assets/images/Common/modal_bg.png");
|
||||
background-size: 100% 100%;
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url("@/assets/images/Common/close.png");
|
||||
background-size: 100% 100%;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project-cases-modal-title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
color: #1d2129;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.project-cases-modal-list {
|
||||
width: 100%;
|
||||
max-height: 640px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
|
||||
.project-cases-modal-item {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
background-color: #fff;
|
||||
|
||||
.project-cases-modal-item-title {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
line-height: 30px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
color: #0275f2;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.project-cases-modal-item-text {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
text-align: left;
|
||||
color: #1d2129;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.project-cases-modal-horizontal-list {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.high-count-list-item {
|
||||
width: 220px;
|
||||
height: 82px;
|
||||
background-color: #f7f8fa;
|
||||
margin-right: 20px;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
border: 1px solid #e5e6eb;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
|
||||
> span {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
padding: 0 8px;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.high {
|
||||
color: #2c7aff;
|
||||
background-color: #e8f3ff;
|
||||
border: 1px solid #2c7aff;
|
||||
}
|
||||
.medium {
|
||||
color: #722ed1;
|
||||
background-color: #f5e8ff;
|
||||
border: 1px solid #722ed1;
|
||||
}
|
||||
.low {
|
||||
color: #00b42a;
|
||||
background-color: #e8ffea;
|
||||
border: 1px solid #00b42a;
|
||||
}
|
||||
> p {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
text-align: left;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1d2129;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.class-list-item {
|
||||
width: 220px;
|
||||
height: 60px;
|
||||
background-color: #f7f8fa;
|
||||
margin-right: 20px;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e5e6eb;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
|
||||
.class-list-item-title {
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
> i {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-image: url("@/assets/images/ProjectLibraryPage/class_icon.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
> span {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #1d2129;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-cases-modal-attachment-list {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.attachment-list-item {
|
||||
width: 337px;
|
||||
height: 80px;
|
||||
border: 1px solid #e5e6eb;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
background-color: #f7f8fa;
|
||||
margin-right: 20px;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url("@/assets/images/ProjectLibraryPage/eyes_icon.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.attachment-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.attachment-info {
|
||||
width: 200px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
> p {
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #09090b;
|
||||
}
|
||||
> span {
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #788089;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { useState } from "react";
|
||||
import Modal from "@/components/Modal";
|
||||
import PDFICON from "@/assets/images/Common/pdf_icon.png";
|
||||
import "./index.css";
|
||||
|
||||
export default ({ visible, onClose, data }) => {
|
||||
const handleCloseModal = () => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal visible={visible} onClose={handleCloseModal}>
|
||||
<div className="project-cases-modal">
|
||||
<i className="close-icon" onClick={handleCloseModal} />
|
||||
<p className="project-cases-modal-title">{data?.title}</p>
|
||||
<ul className="project-cases-modal-list">
|
||||
{/* 项目概述 */}
|
||||
<li className="project-cases-modal-item">
|
||||
<p className="project-cases-modal-item-title">项目概述</p>
|
||||
<p className="project-cases-modal-item-text">
|
||||
本项目是长安汽车换代CS95（代号CD569）中的车机系统测试项目，基于腾讯车载互联平台，整合QQ音乐、喜马拉雅FM、酷我音乐、导航、远程控制等29个智能功能模块，
|
||||
旨在为车主提供便捷舒适的智能出行体验。项目中本人重点负责影音娱乐、行车记录及微信APP模块的测试工作，主要通过台架测试与仿真手段，验证系统功能稳定性与使用便捷性。
|
||||
</p>
|
||||
</li>
|
||||
{/* 适用岗位 */}
|
||||
<li className="project-cases-modal-item">
|
||||
<p className="project-cases-modal-item-title">适用岗位</p>
|
||||
<ul className="project-cases-modal-horizontal-list">
|
||||
<li className="high-count-list-item">
|
||||
<span className="high">高阶岗</span>
|
||||
<p>测试工程师</p>
|
||||
</li>
|
||||
<li className="high-count-list-item">
|
||||
<span className="medium">高阶岗</span>
|
||||
<p>测试工程师</p>
|
||||
</li>
|
||||
<li className="high-count-list-item">
|
||||
<span className="low">高阶岗</span>
|
||||
<p>测试工程师</p>
|
||||
</li>
|
||||
<li className="high-count-list-item">
|
||||
<span className="low">高阶岗</span>
|
||||
<p>测试工程师</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{/* 对应课程 */}
|
||||
<li className="project-cases-modal-item">
|
||||
<p className="project-cases-modal-item-title">适用岗位</p>
|
||||
<ul className="project-cases-modal-horizontal-list">
|
||||
<li className="class-list-item">
|
||||
<div className="class-list-item-title">
|
||||
<i />
|
||||
<span>物联网就业管家课程</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{/* 项目整体流程介绍 */}
|
||||
<li className="project-cases-modal-item">
|
||||
<p className="project-cases-modal-item-title">项目整体流程介绍</p>
|
||||
<p className="project-cases-modal-item-text">
|
||||
1. 需求分析：
|
||||
测试流程的起点，需深入理解产品需求文档和系统设计说明，明确各功能模块的业务逻辑、接口调用和交互方式。
|
||||
例如，在车载系统中，需要分析导航、影音、远程控制等模块的使用场景、输入输出以及与硬件（如摄像头、音响、控制器）的依赖关系。
|
||||
2. 需求分析：
|
||||
测试流程的起点，需深入理解产品需求文档和系统设计说明，明确各功能模块的业务逻辑、接口调用和交互方式。
|
||||
例如，在车载系统中，需要分析导航、影音、远程控制等模块的使用场景、输入输出以及与硬件（如摄像头、音响、控制器）的依赖关系。
|
||||
</p>
|
||||
</li>
|
||||
{/* 项目案例关键技术点 */}
|
||||
<li className="project-cases-modal-item">
|
||||
<p className="project-cases-modal-item-title">项目案例关键技术点</p>
|
||||
<p className="project-cases-modal-item-text">
|
||||
1. 需求分析： 测试流程的起点{" "}
|
||||
</p>
|
||||
<p className="project-cases-modal-item-text">
|
||||
1. 需求分析： 测试流程的起点{" "}
|
||||
</p>
|
||||
</li>
|
||||
{/* 附件 */}
|
||||
<li className="project-cases-modal-item">
|
||||
<p className="project-cases-modal-item-title">附件</p>
|
||||
<ul className="project-cases-modal-attachment-list">
|
||||
<li className="attachment-list-item">
|
||||
<img src={PDFICON} alt="icon" className="attachment-icon" />
|
||||
<div className="attachment-info">
|
||||
<p>项目测试用例.pdf</p>
|
||||
<span>2220kb</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
100
src/pages/ProjectLibraryPage/index.css
Normal file
100
src/pages/ProjectLibraryPage/index.css
Normal file
@@ -0,0 +1,100 @@
|
||||
.user-portfolio-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
|
||||
.user-portfolio-wrapper {
|
||||
width: 1120px;
|
||||
height: 790px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
.user-portfolio-search-area {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
|
||||
.ser-portfolio-searc {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
border: 1px solid #2c7aff;
|
||||
|
||||
span {
|
||||
background-color: #fff;
|
||||
}
|
||||
input {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-portfolio-list {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
padding: 20px 0;
|
||||
|
||||
.user-portfolio-item:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.user-portfolio-item {
|
||||
flex-shrink: 0;
|
||||
width: 340px;
|
||||
height: 82px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px;
|
||||
background-color: #f7f8fa;
|
||||
border: 1px solid #e5e6eb;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
> span {
|
||||
border: 1px solid #2c7aff;
|
||||
background-color: #e8f3ff;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
color: #2c7aff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
|
||||
> p {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1d2129;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
> span {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #2c7aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
60
src/pages/ProjectLibraryPage/index.jsx
Normal file
60
src/pages/ProjectLibraryPage/index.jsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { useState } from "react";
|
||||
import { Input } from "@arco-design/web-react";
|
||||
import { mockData } from "@/data/mockData";
|
||||
import ProjectCasesModal from "./components/ProjectCasesModal";
|
||||
|
||||
import "./index.css";
|
||||
|
||||
const InputSearch = Input.Search;
|
||||
const { projectLibrary } = mockData;
|
||||
|
||||
const ProjectLibrary = () => {
|
||||
const [modalData, setModalData] = useState(undefined);
|
||||
const [projectCasesModalVisible, setProjectCasesModalVisible] =
|
||||
useState(false);
|
||||
|
||||
const onSearch = (value) => {
|
||||
console.log(value);
|
||||
};
|
||||
const handleProjectClick = (item) => {
|
||||
setModalData(item);
|
||||
setProjectCasesModalVisible(true);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setProjectCasesModalVisible(false);
|
||||
setModalData(undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="user-portfolio-page">
|
||||
<div className="user-portfolio-wrapper">
|
||||
<div className="user-portfolio-search-area">
|
||||
<InputSearch
|
||||
className="ser-portfolio-search"
|
||||
onSearch={onSearch}
|
||||
searchButton="搜索"
|
||||
/>
|
||||
</div>
|
||||
<ul className="user-portfolio-list">
|
||||
{projectLibrary?.projects?.map((item) => (
|
||||
<li className="user-portfolio-item" key={item.id}>
|
||||
<span>{item.subtitle}</span>
|
||||
<div>
|
||||
<p>{item.title}</p>
|
||||
<span onClick={() => handleProjectClick(item)}>详情 > </span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<ProjectCasesModal
|
||||
data={modalData}
|
||||
visible={projectCasesModalVisible}
|
||||
onClose={handleCloseModal}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectLibrary;
|
||||
Reference in New Issue
Block a user