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-11-25 17:04:37 +08:00
parent b2b43fe964
commit 8e806d5dc9
7 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/forge/Main/img/home/store-r-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
src/forge/Main/img/home/store-r-1.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 43 KiB

4
src/forge/Main/projectHomeNew/v2/index.jsx
View File

@ -178,7 +178,7 @@ function ProjectHomePage(props) {
<div className="homepage_content">
{/* 一级分类 */}
<div className="homepageMain df cate_list">
<span className="color-white font-15">软件分类：&nbsp;</span>
<span className="color-white font-15 mt8">软件分类：&nbsp;</span>
<ul className="cate_ul">
{/* <a className={cateID ? "" : "active"} onClick={() => { setPage(1); setCateID(undefined); setTopicId(undefined) }}><span>热门推荐</span></a> */}
{
@ -196,7 +196,7 @@ function ProjectHomePage(props) {
size="middle"
onSearch={(value) => { setPage(1); setSearch(value); }}
className="mlat custom-search"
style={{ width: "320px", marginLeft: "auto" }}
style={{ width: "320px", marginLeft: "auto", height: "32px", marginTop: "8px" }}
allowClear
/>
</div>

11
src/forge/Main/projectHomeNew/v2/index.scss
View File

@ -123,17 +123,20 @@
}
.cate_list {
padding: 25px 30px 50px 30px;
padding: 17px 30px 42px 30px;
// background-color: #29385D;
background-image: url("./img/cate_bg.png");
background-size: 100% 100%;
.cate_ul {
max-width: 70%;
}
.cate_ul a {
background-color: #f4f6fa;
border-radius: 6px;
padding: 9px 11px;
margin: 0 8px;
padding: 2px 11px;
margin: 8px;
color: #191919;
display: inline-block;
&:hover {
color: #2149d4;

20
src/forge/Main/projecthome/components/Banner.jsx
View File

@ -7,8 +7,8 @@ import { Link } from "react-router-dom";
const BANNER_DATA = [
{ key: 1, name: '开源仓库', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner1 },
{ key: 2, name: '供应链平台', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner2 },
{ key: 3, name: '软件工厂', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner3 }
{ key: 2, name: '供应链平台', title: '供应链智脑', content: '实现供应链全流程可视化与智能决策。通过实时数据监控、需求预测与风险预警，优化库存与资源配置，助力精准掌控供应链动态，实现降本增效', img: banner2 },
{ key: 3, name: '软件工厂', title: '软件工厂', content: '为您提供从需求到部署的一站式项目工程化管理。通过标准化流程、自动化流水线与统一制品库，赋能团队高效协作、规范交付，全面提升软件生产质量与效率', img: banner3 }
]
function Banner(props) {
@ -37,15 +37,15 @@ function Banner(props) {
if (item) setSelected(item);
};
// useEffect(() => {
// const timer = setInterval(() => {
// const currentIndex = bannerList.findIndex(item => item.key === selected.key);
// const nextIndex = (currentIndex + 1) % bannerList.length;
// setSelected(bannerList[nextIndex]);
// }, 5000);
useEffect(() => {
const timer = setInterval(() => {
const currentIndex = bannerList.findIndex(item => item.key === selected.key);
const nextIndex = (currentIndex + 1) % bannerList.length;
setSelected(bannerList[nextIndex]);
}, 5000);
// return () => clearInterval(timer);
// }, [selected, bannerList]);
return () => clearInterval(timer);
}, [selected, bannerList]);
return (
<div className="home-banner">

2
src/forge/Main/projecthome/components/Store.jsx
View File

@ -6,7 +6,7 @@ import store3 from '../../img/home/store3.png';
import store4 from '../../img/home/store4.png';
import store5 from '../../img/home/store5.png';
import store6 from '../../img/home/store6.png';
import storeR1 from '../../img/home/store-r-1.webp';
import storeR1 from '../../img/home/store-r-1.png';
import storeR2 from '../../img/home/store-r-2.webp';
import storeR3 from '../../img/home/store-r-3.png'
import { Link } from "react-router-dom";

22
src/forge/Main/projecthome/components/index.scss
View File

@ -48,8 +48,9 @@
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
justify-content: right;
color: #ffffff;
padding-right: 40px;
&-selected {
background-image: linear-gradient(270deg, rgba(33, 73, 212, 0.46) 0%, rgba(1, 5, 15, 0) 100%);
@ -61,7 +62,7 @@
top: 0;
width: 2px;
height: 0;
background-image: linear-gradient(136.87deg, #5eb4ff 0%, #2149d4 100%);
background-image: linear-gradient(136.87deg, #5eb4ff 0%, #4C7EFF 100%);
//线性匀速，结束后保持最后一帧状态
animation: vertical-progress 5s linear forwards;
@ -69,7 +70,7 @@
span {
font-family: alibaba;
background-image: linear-gradient(136.9deg, #5eb4ff 0%, #54b5ff 26.25%, #3c80e9 62.21%, #2249d2 100%);
background-image: linear-gradient(136.9deg, #5eb4ff 0%, #54b5ff 26.25%, #4C7EFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@ -105,9 +106,12 @@
font-family: alibabaReg;
font-size: 16px;
}
a {
display: inline-block;
}
&-button {
color: #ffffff;
margin-top: 15px;
margin-top: 25px;
cursor: pointer;
background-image: url('../../img/home/button.png');
background-repeat: no-repeat;
@ -232,7 +236,7 @@
h2 {
font-family: alibaba;
font-size: 24px;
padding-bottom: 37px;
padding-bottom: 30px;
}
p {
opacity: 0;
@ -245,8 +249,8 @@
position: absolute;
top: 0;
left: -46px;
width: 36px;
height: 36px;
width: 34px;
height: 34px;
background-image: url('../../img/home/check.png');
background-repeat: no-repeat;
background-size: 100% 100%;
@ -296,8 +300,8 @@
top: 80px;
}
.right-img-3 {
width: 57px;
height: 57px;
width: 45px;
height: 45px;
left: 686px;
top: 20px;
}