详情页暂存

This commit is contained in:
Eeeros 2026-04-03 17:23:54 +08:00
parent 5c148bc636
commit 6504a86fbe
13 changed files with 60 additions and 62 deletions

View File

@ -20,7 +20,7 @@ const resourceInfo = [
{ name: '软件', title: '开源社区软件', icon: 'icon-gongju', desc: '来自开源社区,可按授权许可使用和复用的各类软件', path: '/sf/resources/devtools' }, { name: '软件', title: '开源社区软件', icon: 'icon-gongju', desc: '来自开源社区,可按授权许可使用和复用的各类软件', path: '/sf/resources/devtools' },
] ]
const Resource = forwardRef(({ zoneId }, ref) => { const Resource = forwardRef(({ zoneId, history }, ref) => {
const r1Ref = useRef(null); const r1Ref = useRef(null);
const r2Ref = useRef(null); const r2Ref = useRef(null);
const r3Ref = useRef(null); const r3Ref = useRef(null);
@ -315,10 +315,8 @@ const Resource = forwardRef(({ zoneId }, ref) => {
<div className="item-name" title={item.name}>{item.name}</div> <div className="item-name" title={item.name}>{item.name}</div>
<div className="item-desc" title={item.summary}>{item.summary}</div> <div className="item-desc" title={item.summary}>{item.summary}</div>
<button onClick={() => { <button onClick={() => {
if (item.fileIds) { history.push(`/sf/resources/releases`)
downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) }} disabled={!item.fileIds}>查看</button>
}
}} disabled={!item.fileIds} className={!item.fileIds && 'disabled'} >{item.fileIds ? '下载' : '稍后下载'}</button>
</div> </div>
}) })
} }

View File

@ -298,7 +298,7 @@ function Index(props) {
<News zoneId={factoryZoneId} /> <News zoneId={factoryZoneId} />
<Feature /> <Feature />
<Resource zoneId={factoryZoneId} ref={resourceRef} /> <Resource zoneId={factoryZoneId} history={ props.history } ref={resourceRef} />
<Resource2 zoneId={factoryZoneId} ref={resource2Ref} /> <Resource2 zoneId={factoryZoneId} ref={resource2Ref} />
{/* <Scene zoneId={factoryZoneId} /> */} {/* <Scene zoneId={factoryZoneId} /> */}
</div> </div>

View File

@ -104,6 +104,7 @@ function Index(props) {
<Breadcrumb.Item> <span className="breacrumb-name">{detail.name}</span> </Breadcrumb.Item> <Breadcrumb.Item> <span className="breacrumb-name">{detail.name}</span> </Breadcrumb.Item>
</Breadcrumb> </Breadcrumb>
<div className="header-content"> <div className="header-content">
<div className="header-info">
<Tooltip title={ detail.name } placement="topLeft"> <Tooltip title={ detail.name } placement="topLeft">
<h3>{detail.name}</h3> <h3>{detail.name}</h3>
</Tooltip> </Tooltip>
@ -128,11 +129,11 @@ function Index(props) {
<span>工具类型</span> <span>工具类型</span>
</div> </div>
</div> </div>
</div>
{/* 文件列表展示 */} {/* 文件列表展示 */}
{detail.fileList && detail.fileList.length > 0 && ( {detail.fileList && detail.fileList.length > 0 && (
<div className="file-list"> <div className="file-list">
<h6>文件列表</h6>
<div className="file-list-content"> <div className="file-list-content">
{detail.fileList.map((file, index) => ( {detail.fileList.map((file, index) => (
<div key={file.fileId || index} className="file-item"> <div key={file.fileId || index} className="file-item">
@ -155,13 +156,6 @@ function Index(props) {
</div> </div>
</div> </div>
)} )}
<div className="header-img">
<div className="header-img-wrapper">
<img src={detail.headImg || imageBack1} alt="" />
{!detail.headImg && <img src={imageGif} alt="" />}
</div>
</div>
</div> </div>
</div> </div>
<div className="news-detail-content"> <div className="news-detail-content">

View File

@ -40,20 +40,19 @@
.header-content { .header-content {
margin-top: 30px; margin-top: 30px;
width: 1600px; width: 1600px;
min-height: 481px; height: 460px;
position: relative; position: relative;
border-radius: 16px;
padding: 60px 45px; padding: 60px 45px;
background: linear-gradient(106.16deg, #f7fbff 2.47%, #f5faff 95.98%); background: url('../../../../images/factory/resource/version-detail-header.webp');
border: 2px solid; background-repeat: no-repeat;
border-color: #ffffff; background-size: 100% 100%;
display: flex;
h3 { h3 {
line-height: 47px; line-height: 47px;
font-family: alibabaBold; font-family: alibabaBold;
font-weight: 700; color: #ffffff;
color: #091221; font-size: 30px;
font-size: 34px;
max-width: 650px; max-width: 650px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -65,7 +64,7 @@
max-width: 650px; max-width: 650px;
line-height: 22px; line-height: 22px;
font-family: alibabareg; font-family: alibabareg;
color: #5d6a80; color: #ffffff;
font-size: 16px; font-size: 16px;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
@ -76,26 +75,29 @@
.tools-info { .tools-info {
display: flex; display: flex;
margin-top: 35px; margin-top: 35px;
flex-wrap: wrap;
width: 400px;
div { div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
margin-right: 78px; min-width: 140px;
margin-bottom: 40px;
span:nth-child(1) { span:nth-child(1) {
line-height: 32px; line-height: 32px;
font-family: alibabaBold; font-family: alibabaBold;
font-weight: 700; font-weight: 700;
color: #164ce4; color: #ffd88e;
font-size: 24px; font-size: 22px;
} }
span:nth-child(2) { span:nth-child(2) {
line-height: 20px; line-height: 20px;
font-family: alibabareg; font-family: alibabareg;
color: #5d6a80; color: #ffffff;
font-size: 14px; font-size: 16px;
margin-top: 8px; margin-top: 8px;
} }
@ -143,22 +145,26 @@
} }
&-content { &-content {
background: #f7fbff; width: 1147px;
border-radius: 8px; height: 404px;
background: linear-gradient(108.75deg,#f7fbff 2.52%,#f5faff 95.95%);
border-radius: 16px;
backdrop-filter: blur(30px);
padding: 15px; padding: 15px;
border: 1px solid rgba(22, 76, 228, 0.1);
margin-top: 15px; margin-top: 15px;
.file-item { .file-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 12px 15px; width: 510px;
background: #ffffff; height: 105px;
border-radius: 6px; background: url('../../../../images/factory/resource/version-item-bg.webp'), #ffffff;
margin-bottom: 10px; background-repeat: no-repeat;
border: 1px solid rgba(22, 76, 228, 0.08); background-size: 100% 100%;
border: 2px solid;
border-color: #ffffff;
border-radius: 8px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -322,9 +328,9 @@
} }
.news-detail-content-wrapper { .news-detail-content-wrapper {
background-image: url('../../../../images/factory/resource/detail-bg.png'); // background-image: url('../../../../images/factory/resource/detail-bg.png');
background-repeat: no-repeat; // background-repeat: no-repeat;
background-size: 100% 100%; // background-size: 100% 100%;
padding: 30px; padding: 30px;
border-radius: 16px; border-radius: 16px;
margin-bottom: 60px; margin-bottom: 60px;

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 898 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1008 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB