详情页暂存
|
|
@ -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>
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 898 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1008 B |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 11 KiB |