-
{detail.domainName}
-
工具类型
+
+
+ {detail.name}
+
+
+ {detail.summary}
+
+
+
+ {detail.downloadCount}
+ 下载量
+
+
+ {totalFileSize || (detail.fileList && detail.fileList[0] ? detail.fileList[0].fileSizeInfo : 0)}
+ 文件大小
+
+
+ {detail.fileList ? detail.fileList.length : 0}
+ 文件数量
+
+
+ {detail.domainName}
+ 工具类型
+
{/* 文件列表展示 */}
{detail.fileList && detail.fileList.length > 0 && (
-
文件列表
+ {/* 左侧翻页按钮 - 始终显示,但在不需要时作为占位符 */}
+
1 ? 'clickable' : 'placeholder'}`}
+ onClick={currentPage > 1 ? goToPreviousPage : undefined}
+ >
+

+
+
- {detail.fileList.map((file, index) => (
-
+ {getCurrentPageFiles().map((file, index) => (
+
setHoveredFileId(file.fileId || index)}
+ onMouseLeave={() => setHoveredFileId(null)}
+ >
+
+

+
{file.fileOriginName}
{file.fileSizeInfo}
@@ -148,20 +208,21 @@ function Index(props) {
}
}}
>
- 下载
+
))}
+
+ {/* 右侧翻页按钮 - 始终显示,但在不需要时作为占位符 */}
+
+

+
)}
-
-
-
-

- {!detail.headImg &&

}
-
-
diff --git a/src/factory/resource/factoryVersion/detail/index.scss b/src/factory/resource/factoryVersion/detail/index.scss
index ee5b4aef..e32e7978 100644
--- a/src/factory/resource/factoryVersion/detail/index.scss
+++ b/src/factory/resource/factoryVersion/detail/index.scss
@@ -40,98 +40,115 @@
.header-content {
margin-top: 30px;
width: 1600px;
- min-height: 481px;
+ height: 460px;
position: relative;
- border-radius: 16px;
- padding: 60px 45px;
- background: linear-gradient(106.16deg, #f7fbff 2.47%, #f5faff 95.98%);
- border: 2px solid;
- border-color: #ffffff;
+ padding: 28px 32px 28px 43px;
+ background: url('../../../../images/factory/resource/version-detail-header.webp');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ display: flex;
- h3 {
- line-height: 47px;
- font-family: alibabaBold;
- font-weight: 700;
- color: #091221;
- font-size: 34px;
- max-width: 650px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
+ .header-info {
+ width: 550px;
+ padding: 39px 47px 0 0;
- p {
- margin-top: 25px;
- max-width: 650px;
- line-height: 22px;
- font-family: alibabareg;
- color: #5d6a80;
- font-size: 16px;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- }
+ h3 {
+ line-height: 47px;
+ font-family: alibabaBold;
+ color: #ffffff;
+ font-size: 30px;
+ max-width: 650px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
- .tools-info {
- display: flex;
- margin-top: 35px;
+ p {
+ margin-top: 25px;
+ max-width: 650px;
+ line-height: 22px;
+ font-family: alibabareg;
+ color: #ffffff;
+ font-size: 16px;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
- div {
+ .tools-info {
display: flex;
- flex-direction: column;
- position: relative;
- margin-right: 78px;
+ margin-top: 35px;
+ flex-wrap: wrap;
+ width: 400px;
- span:nth-child(1) {
- line-height: 32px;
- font-family: alibabaBold;
- font-weight: 700;
- color: #164ce4;
- font-size: 24px;
- }
+ div {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ min-width: 140px;
+ margin-bottom: 40px;
- span:nth-child(2) {
- line-height: 20px;
- font-family: alibabareg;
- color: #5d6a80;
- font-size: 14px;
- margin-top: 8px;
- }
+ span:nth-child(1) {
+ line-height: 32px;
+ font-family: alibabaBold;
+ font-weight: 700;
+ color: #ffd88e;
+ font-size: 22px;
+ }
- &:not(:last-child) {
- &::after {
- position: absolute;
- content: "";
- width: 0px;
- height: 60px;
- right: -39px;
- border-right: 1px dashed;
- border-color: rgba(22, 76, 228, 0.15);
+ span:nth-child(2) {
+ line-height: 20px;
+ font-family: alibabareg;
+ color: #ffffff;
+ font-size: 16px;
+ margin-top: 8px;
+ }
+
+ &:not(:last-child) {
+ &::after {
+ position: absolute;
+ content: "";
+ width: 0px;
+ height: 60px;
+ right: -39px;
+ border-right: 1px dashed;
+ border-color: rgba(22, 76, 228, 0.15);
+ }
}
}
}
}
- button {
- margin-top: 30px;
- width: 110px;
- height: 36px;
- line-height: 36px;
- cursor: pointer;
- border-radius: 6px;
- line-height: 20px;
- font-family: alibaba;
- font-weight: 500;
- color: #ffffff;
- font-size: 14px;
- text-align: center;
- background-color: #091221;
- }
+ // button {
+ // margin-top: 30px;
+ // width: 110px;
+ // height: 36px;
+ // line-height: 36px;
+ // cursor: pointer;
+ // border-radius: 6px;
+ // line-height: 20px;
+ // font-family: alibaba;
+ // font-weight: 500;
+ // color: #ffffff;
+ // font-size: 14px;
+ // text-align: center;
+ // background-color: #091221;
+ // }
+
.file-list {
- margin-top: 30px;
- max-width: 650px;
+ flex-shrink: 0;
+ width: 947px;
+ height: 404px;
+ background: linear-gradient(108.75deg, #f7fbff36 2.52%, #f5faff59 95.95%);
+ border-radius: 16px;
+ backdrop-filter: blur(30px);
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
h6 {
line-height: 22px;
@@ -143,26 +160,50 @@
}
&-content {
- background: #f7fbff;
- border-radius: 8px;
- padding: 15px;
- border: 1px solid rgba(22, 76, 228, 0.1);
- margin-top: 15px;
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ height: 100%;
+ flex-wrap: wrap;
+ gap: 16px 18px;
+ padding-top: 10px;
.file-item {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 12px 15px;
- background: #ffffff;
- border-radius: 6px;
- margin-bottom: 10px;
- border: 1px solid rgba(22, 76, 228, 0.08);
+ width: 408px;
+ height: 105px;
+ background: url('../../../../images/factory/resource/version-item-bg.webp'), #ffffff;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ border: 2px solid;
+ border-color: #ffffff;
+ border-radius: 8px;
+ padding: 20px 17px;
&:last-child {
margin-bottom: 0;
}
+ .file-icon {
+ width: 50px;
+ height: 50px;
+ background: linear-gradient(46.14deg, #edf2ff 5.48%, #f5f5ff 94.87%);
+ border: 1px solid;
+ border-color: #ffffff;
+ border-radius: 9px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 30px;
+
+ img {
+ width: 22.03px;
+ height: 22.03px;
+ }
+ }
+
.file-info {
display: flex;
flex-direction: column;
@@ -173,7 +214,7 @@
line-height: 20px;
font-family: alibaba;
color: #091221;
- font-size: 14px;
+ font-size: 17px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -182,32 +223,71 @@
.file-size {
line-height: 18px;
font-family: alibabareg;
- color: #5d6a80;
- font-size: 12px;
+ color: #666b86;
+ font-size: 15px;
margin-top: 4px;
+ margin-top: 10px;
}
}
.file-download-btn {
- margin-left: 15px;
- width: 70px;
- height: 28px;
- line-height: 28px;
- cursor: pointer;
- border-radius: 4px;
- font-family: alibaba;
- font-weight: 500;
- color: #164ce4;
- font-size: 12px;
- text-align: center;
- background-color: #e9f2ff;
- border: 1px solid rgba(22, 76, 228, 0.2);
+ margin-right: 25px;
+ margin-left: 25px;
+ background: unset;
flex-shrink: 0;
+ cursor: pointer;
- &:hover {
- background: #d6e6ff;
+ img {
+ width: 28px;
}
}
+ &:hover {
+ background: url('../../../../images/factory/resource/version-item-bg-hover.webp'), #ffffff;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ .file-info {
+ .file-name, .file-size {
+ color: #ffffff;
+ }
+ }
+ .file-download-btn {
+ border: none;
+ }
+ }
+ }
+ }
+
+ .pagination-button {
+ flex-shrink: 0;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.3s ease;
+ z-index: 10;
+
+ &.clickable {
+ cursor: pointer;
+ }
+
+ &.placeholder {
+ opacity: 0;
+ cursor: default;
+ pointer-events: none;
+ }
+
+ img {
+ width: 40px;
+ height: 40px;
+ }
+
+ &.left {
+ left: 10px;
+ }
+
+ &.right {
+ right: 10px;
}
}
}
@@ -322,9 +402,9 @@
}
.news-detail-content-wrapper {
- background-image: url('../../../../images/factory/resource/detail-bg.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
+ // background-image: url('../../../../images/factory/resource/detail-bg.png');
+ // background-repeat: no-repeat;
+ // background-size: 100% 100%;
padding: 30px;
border-radius: 16px;
margin-bottom: 60px;
@@ -357,4 +437,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/src/images/factory/resource/version-detail-header.webp b/src/images/factory/resource/version-detail-header.webp
new file mode 100644
index 00000000..f65b75a9
Binary files /dev/null and b/src/images/factory/resource/version-detail-header.webp differ
diff --git a/src/images/factory/resource/version-file-download-hover.webp b/src/images/factory/resource/version-file-download-hover.webp
new file mode 100644
index 00000000..ff279289
Binary files /dev/null and b/src/images/factory/resource/version-file-download-hover.webp differ
diff --git a/src/images/factory/resource/version-file-download.webp b/src/images/factory/resource/version-file-download.webp
new file mode 100644
index 00000000..3594b25c
Binary files /dev/null and b/src/images/factory/resource/version-file-download.webp differ
diff --git a/src/images/factory/resource/version-file-icon-1.webp b/src/images/factory/resource/version-file-icon-1.webp
new file mode 100644
index 00000000..c8c95576
Binary files /dev/null and b/src/images/factory/resource/version-file-icon-1.webp differ
diff --git a/src/images/factory/resource/version-file-icon-2.webp b/src/images/factory/resource/version-file-icon-2.webp
new file mode 100644
index 00000000..d711a0c7
Binary files /dev/null and b/src/images/factory/resource/version-file-icon-2.webp differ
diff --git a/src/images/factory/resource/version-file-icon-3.webp b/src/images/factory/resource/version-file-icon-3.webp
new file mode 100644
index 00000000..d51f3b81
Binary files /dev/null and b/src/images/factory/resource/version-file-icon-3.webp differ
diff --git a/src/images/factory/resource/version-file-icon-4.webp b/src/images/factory/resource/version-file-icon-4.webp
new file mode 100644
index 00000000..02d78b64
Binary files /dev/null and b/src/images/factory/resource/version-file-icon-4.webp differ
diff --git a/src/images/factory/resource/version-file-icon-5.webp b/src/images/factory/resource/version-file-icon-5.webp
new file mode 100644
index 00000000..7a686c78
Binary files /dev/null and b/src/images/factory/resource/version-file-icon-5.webp differ
diff --git a/src/images/factory/resource/version-file-icon-6.webp b/src/images/factory/resource/version-file-icon-6.webp
new file mode 100644
index 00000000..072f9bd5
Binary files /dev/null and b/src/images/factory/resource/version-file-icon-6.webp differ
diff --git a/src/images/factory/resource/version-item-bg-hover.webp b/src/images/factory/resource/version-item-bg-hover.webp
new file mode 100644
index 00000000..396cbc3e
Binary files /dev/null and b/src/images/factory/resource/version-item-bg-hover.webp differ
diff --git a/src/images/factory/resource/version-item-bg.webp b/src/images/factory/resource/version-item-bg.webp
new file mode 100644
index 00000000..58fd42d5
Binary files /dev/null and b/src/images/factory/resource/version-item-bg.webp differ
diff --git a/src/images/factory/resource/version-list-left.webp b/src/images/factory/resource/version-list-left.webp
new file mode 100644
index 00000000..d5fc491c
Binary files /dev/null and b/src/images/factory/resource/version-list-left.webp differ
diff --git a/src/images/factory/resource/version-list-right.webp b/src/images/factory/resource/version-list-right.webp
new file mode 100644
index 00000000..ae6e4a4c
Binary files /dev/null and b/src/images/factory/resource/version-list-right.webp differ