Gitlink
/
forgeplus-react-v2
0
0
Fork 1
Code Issues Pull Requests Actions 3 Packages Projects Releases 9 Wiki Activity

样式优化

This commit is contained in:
黄心宇 2025-12-25 20:18:25 +08:00
parent a794bdbd2f
commit 48972062b3
11 changed files with 235 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/factory/components/News/index.jsx
View File

@ -67,7 +67,7 @@ function News(props) {
return (
<div className={`factory-news factory-module ${isVisible ? 'animate-active' : ''}`} ref={contentRef}>
<h1 className="module-title">动态速递，实时感知工厂最新脉搏</h1>
<h1 className="module-title">动态速递，实时感知软件工厂业内新闻</h1>
<div className="circle-wrapper">
<div className="circle-item"></div>
<div className="circle-item"></div>

8
src/factory/lessons/index.jsx
View File

@ -106,8 +106,8 @@ function Index(props) {
</div>
<div className="lesson-body">
<div className="lesson-left">
<h3>AI通识核心课</h3>
<p>图像处理是指对图像执行一些操作以达到预期效果的过程。可以类比数据分析工作，在数据分析时我们需要做一些数据预处理和特征工程</p>
<h3>{ lesson.name }</h3>
<p>{ lesson.summary }</p>
<div className="chapter-list">
{
chapterList.map((item, index) => {
@ -117,7 +117,7 @@ function Index(props) {
<span className="chapter-index">0{index + 1}</span> :
<span className="chapter-index">{index + 1}</span>
}
<div>
<div title={ item.name }>
{
item.name
}
@ -220,7 +220,7 @@ function Index(props) {
chapterList.slice(3).map((item, index) => {
return <div className="chapter-chapter2-item" key={item.id}>
<div className="chapter-head">
<h4 onClick={() => { window.open(item.extendDataUrl) }}>{item.name}</h4>
<h4 title={ item.name } onClick={() => { window.open(item.extendDataUrl) }}>{item.name}</h4>
<div className="line-1"></div>
<div className="line-2"></div>
<div className="line-3"></div>

2
src/factory/news/index.jsx
View File

@ -92,7 +92,7 @@ function Index(props) {
return (
<div className={`news ${isVisible ? 'animate-active' : ''}`}>
<div className="news-header">
<h2><span>动态速递，</span>实时感知工厂最新脉搏</h2>
<h2><span>动态速递，</span>实时感知软件工厂业内新闻</h2>
<div className="header-content">
<div className="header-left">
<h3>{nowTop.name}</h3>

33
src/factory/resource/developmentTools/index.jsx
View File

@ -36,7 +36,6 @@ function Index(props) {
const hasMore = useRef(true)
useEffect(() => {
// getFullList();
getTypeList();
getNewList()
}, []);
@ -45,6 +44,7 @@ function Index(props) {
setPageNum(1)
hasMore.current = true
getFullList()
getHotList()
}, [selectedType])
const getFullList = (isMore = false) => {
@ -74,11 +74,9 @@ function Index(props) {
setPageNum(isMore)
setFullList([...fullList, ...rows])
} else if (selectedType) {
setContentList(res.data.rows.slice(0, 6));
setFullList(res.data.rows.slice(6));
setFullList(rows);
} else {
setTopList(rows.slice(0, 3));
setContentList(rows.slice(3, 9));
setFullList(rows.slice(9));
}
hasMore.current = res.data.total > (isMore ? selectedType ? 6 : 9 + fullList.length + rows.length : rows.length)
@ -86,6 +84,33 @@ function Index(props) {
});
};
const getHotList = () => {
let params = {
id: factoryZoneId,
keywords: toolId,
pageNum: 1,
pageSize: 6,
orderByDownloadCount: true
}
if (selectedType) params.domainId = selectedType
getSourceList(params).then(res => {
setLoading(false)
if (res.data.rows) {
const rows = []
res.data.rows.forEach(e => {
let extendData = {}
if (e.extendData) {
extendData = JSON.parse(e.extendData)
}
rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
});
setContentList(rows)
}
});
}
const getTypeList = () => {
getSourceZoneList(factoryZoneId).then(response => {
if (response && response.data) {

9
src/factory/resource/factoryVersion/index.jsx
View File

@ -26,8 +26,8 @@ function Index(props) {
return (
<div className="version">
<div className="version-top">
<h5>我是版本的标题文案占一行</h5>
<p>复现困难、诊断成本高等问题。在2025 CCF中国开源大会上，滴滴正式将HUATUO本AI核心通识课课程是一门全面且深入的入门课程</p>
<h5>标准化生产线版本集</h5>
<p>存储与显示软件工厂历年来版本情况，提供给用户下载</p>
</div>
<div className="version-content">
{
@ -44,7 +44,10 @@ function Index(props) {
</div>
<div className="version-item-content">
{item.summary}
<p>{item.summary}</p>
<div className="item-data">
<span><i className="iconfont icon-shijian mr5 font-12" />{item.createTime}</span>
</div>
</div>
<button onClick={() => {downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)}} className={index === 0 ? "shiny-button" : "version-btn"}>立即下载</button>
</div>

91
src/factory/resource/factoryVersion/index.scss
View File

@ -54,7 +54,7 @@
div {
margin-top: -21px;
height: 237px;
height: 310px;
border-left: 1px dashed rgba(22, 76, 228, 0.31);
}
}
@ -68,46 +68,78 @@
display: flex;
align-items: center;
width: 250px;
h4 {
line-height: 33px;
font-family: alibabaBold;
font-weight: 700;
color: #091221;
font-size: 24px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.new-tag {
width: 37.49px;
margin-left: 10px;
}
h4 {
line-height: 33px;
font-family: alibabaBold;
font-weight: 700;
color: #091221;
font-size: 24px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.new-tag {
width: 37.49px;
margin-left: 10px;
}
}
.version-item-content {
margin-top: 17px;
width: 100%;
height: 136px;
background: linear-gradient(92.56deg, #f8fbff 0.8%, rgba(255, 255, 255, 0) 99%);
border: 1px solid;
border-color: #ffffff;
border-radius: 17px;
line-height: 34px;
font-family: alibabareg;
color: #091221;
font-size: 15px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
padding: 22px;
p {
width: 100%;
height: 136px;
line-height: 34px;
font-family: alibabareg;
color: #091221;
font-size: 15px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.item-data {
margin-top: 10px;
span {
line-height: 18px;
font-family: alibabareg;
color: #5d6a80;
font-size: 13px;
position: relative;
}
span:not(:last-child) {
margin-right: 15px;
padding-right: 15px;
&::after {
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
content: "";
width: 1px;
height: 9px;
background: rgba(9, 18, 33, 0.22);
}
}
}
}
button {
cursor: pointer;
margin-top: auto;
margin-top: 20px;
width: 104px;
height: 36px;
background-color: rgba(255, 255, 255, 0.42);
@ -120,8 +152,9 @@
color: #091221;
font-size: 14px;
}
.shiny-button {
background-color:#091221;
background-color: #091221;
color: #ffffff;
border: 2px solid transparent;
}

25
src/factory/resource/softwareProject/index.jsx
View File

@ -14,6 +14,8 @@ import bg6 from '../../../images/factory/resource/project-content-3.webp';
import bg7 from '../../../images/factory/resource/project-content-4.webp';
import contentRight from '../../../images/factory/resource/project-content-right.webp';
import bg8 from '../../../images/factory/resource/project-bottom-1.webp'
import user1 from '../../../images/factory/resource/user1.png'
import user2 from '../../../images/factory/resource/user2.png'
import ActionItem from '../components/ActionItem';
import '../../common.scss'
@ -83,13 +85,15 @@ function Index(props) {
<p className="item-desc">{project.description}</p>
<div className="item-bottom">
<div className="item-bottom-tags">
{
{/* {
project.topics && project.topics.split(',').splice(0, 3).map((topic, index) => {
return (
<span key={index} className="item-tag">{topic}</span>
)
})
}
} */}
<img src={ user1 } alt="" />
<span>捐赠者</span> <div></div>{ project.name.split('/')[0] }
</div>
<div className="item-bottom-data">
<span><i className="iconfont icon-guanzhu mr5 font-12" />{project.forkedCount}</span>
@ -108,7 +112,7 @@ function Index(props) {
<h2>全部软件项目</h2>
<div className="project-content-top">
<div className="project-content-top-left">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>共创·共享·开放·共生，携手共创软件工厂新生态</p>
<div className="content-top-list">
{
contentList.map((item, index) => {
@ -122,13 +126,15 @@ function Index(props) {
<h5 className="item-title">{project.name.split('/')[1]}</h5>
</div>
<div className="item-tags">
{
{/* {
project.topics && project.topics.split(',').splice(0, 3).map((topic, index) => {
return (
<span key={index} className="item-tag">{topic}</span>
)
})
}
} */}
<img src={ user2 } alt="" />
<span>捐赠者</span> <div></div>{ project.name.split('/')[0] }
</div>
<div className="item-desc">
{project.description}
@ -167,12 +173,9 @@ function Index(props) {
<img src={project.authorImageUrl} alt="" className="item-img"></img>
<h5 className="item-title">{project.name.split('/')[1]}</h5>
</div>
{
project.description && <div className="item-desc">
{project.description}
</div>
}
<div className="item-desc">
{!project.description ? '暂无简介' : project.description}
</div>
<div className="item-tags">
{
project.topics && project.topics.split(',').splice(0, 3).map((topic, index) => {

138
src/factory/resource/softwareProject/index.scss
View File

@ -18,6 +18,23 @@
border-radius: 16px;
cursor: pointer;
&::after {
position: absolute;
content: "精选";
top: 0;
right: 0;
width: 61px;
height: 31px;
background: linear-gradient(95.44deg, #ff7842 -3.46%, #ff431b 98.61%);
border-radius: 0px 16px 0px 16px;
text-align: center;
line-height: 31px;
font-family: alibaba;
font-weight: 500;
color: #ffffff;
font-size: 14px;
}
.item-bg {
width: 516px;
height: 230px;
@ -47,6 +64,7 @@
display: flex;
flex-direction: column;
flex-grow: 1;
position: relative;
h5 {
line-height: 30px;
@ -76,6 +94,32 @@
.item-bottom-tags {
display: flex;
justify-content: space-between;
align-items: center;
height: 32px;
background: rgba(255, 255, 255, 0.171);
border-radius: 4px;
padding: 5px 9px;
line-height: 22px;
font-family: alibabareg;
color: #ffffff;
font-size: 14px;
img {
width: 15px;
margin-right: 5px;
height: 15px;
}
div {
opacity: 0.5;
width: 6px;
height: 6px;
background: #ffffff;
border-radius: 50%;
margin: 0 6px;
}
.item-tag {
display: inline-block;
@ -90,10 +134,11 @@
.item-bottom-data {
opacity: 0.85;
margin-left: auto;
span {
line-height: 18px;
font-family: alibabareg;
color:#ffffff;
color: #ffffff;
font-size: 13px;
position: relative;
}
@ -172,25 +217,6 @@
overflow: hidden;
}
.item-tags {
margin-top: 22px;
display: flex;
justify-content: flex-start;
.item-tag {
display: inline-block;
padding: 0 8px;
margin-right: 8px;
height: 32px;
background: rgba(22, 76, 228, 0.05);
border-radius: 4px;
line-height: 32px;
font-family: alibabareg;
color: #091221;
font-size: 14px;
}
}
.item-data {
margin-top: auto;
@ -268,6 +294,21 @@
flex-direction: column;
cursor: pointer;
&:nth-child(3),
&:nth-child(4) {
.item-tags {
border: none;
background: rgba(255, 255, 255, 0.84);
div {
opacity: 0.13;
width: 6px;
height: 6px;
background: #5d6a80;
}
}
}
div:nth-child(1) {
height: 100%;
display: flex;
@ -283,6 +324,48 @@
z-index: -1;
}
.item-tags {
// position: absolute;
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 20px;
// top: 150px;
// line-height: 21px;
// font-family: alibabareg;
// color: #091221;
// font-size: 15px;
// display: -webkit-box;
// -webkit-line-clamp: 1;
// -webkit-box-orient: vertical;
// overflow: hidden;
width: fit-content;
background: rgba(179, 190, 252, 0.18);
border: 1px solid;
border-color: #ffffff;
border-radius: 4px;
height: 32px;
padding: 5px 9px;
line-height: 22px;
font-family: alibabareg;
color: #091221;
font-size: 13px;
img {
width: 15px;
margin-right: 5px;
height: 15px;
}
div {
width: 6px;
height: 6px;
background: #ffffff;
border-radius: 50%;
margin: 0 6px;
}
}
&:nth-child(2n+1) {
margin-right: 32px;
}
@ -369,6 +452,21 @@
.item-tags {
margin-top: auto;
display: flex;
justify-content: flex-start;
.item-tag {
display: inline-block;
padding: 0 8px;
margin-right: 8px;
height: 32px;
background: rgba(22, 76, 228, 0.05);
border-radius: 4px;
line-height: 32px;
font-family: alibabareg;
color: #091221;
font-size: 14px;
}
}
}

BIN
src/images/factory/lessons/header-bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 967 KiB

BIN
src/images/factory/resource/user1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/images/factory/resource/user2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB