FEAT => 本次更新项目为：
上传封面主图构建完成
This commit is contained in:
@@ -1,7 +1,5 @@
|
||||
.mainImgUploadContainer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// 覆盖 antd Upload 组件的默认样式
|
||||
:global {
|
||||
@@ -25,8 +23,7 @@
|
||||
.mainImgUploadButton {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
min-height: 180px;
|
||||
min-width: 320px;
|
||||
min-height: clamp(90px, 20vw, 180px);
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
@@ -37,7 +34,6 @@
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
|
||||
&:hover {
|
||||
border-color: #1890ff;
|
||||
@@ -59,13 +55,13 @@
|
||||
padding: 20px;
|
||||
|
||||
.uploadingIcon {
|
||||
font-size: 32px;
|
||||
font-size: clamp(24px, 4vw, 32px);
|
||||
color: #1890ff;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.uploadingText {
|
||||
font-size: 14px;
|
||||
font-size: clamp(11px, 2vw, 14px);
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -80,21 +76,21 @@
|
||||
text-align: center;
|
||||
|
||||
.uploadIcon {
|
||||
font-size: 48px;
|
||||
font-size: clamp(50px, 6vw, 48px);
|
||||
color: #1890ff;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.uploadText {
|
||||
.uploadTitle {
|
||||
font-size: 16px;
|
||||
font-size: clamp(14px, 2.5vw, 16px);
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.uploadSubtitle {
|
||||
font-size: 12px;
|
||||
font-size: clamp(10px, 1.5vw, 14px);
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@@ -127,15 +123,15 @@
|
||||
gap: 12px;
|
||||
|
||||
.mainImgIcon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: clamp(28px, 5vw, 40px);
|
||||
height: clamp(28px, 5vw, 40px);
|
||||
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-size: clamp(14px, 2.5vw, 18px);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -144,7 +140,7 @@
|
||||
min-width: 0;
|
||||
|
||||
.mainImgName {
|
||||
font-size: 14px;
|
||||
font-size: clamp(11px, 2vw, 14px);
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
@@ -154,7 +150,7 @@
|
||||
}
|
||||
|
||||
.mainImgSize {
|
||||
font-size: 12px;
|
||||
font-size: clamp(10px, 1.5vw, 12px);
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
@@ -199,7 +195,7 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
min-height: 180px;
|
||||
min-height: clamp(90px, 20vw, 180px);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
@@ -293,266 +289,3 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.mainImgUploadContainer {
|
||||
.mainImgUploadButton {
|
||||
aspect-ratio: 16 / 9;
|
||||
min-height: 135px;
|
||||
min-width: 240px;
|
||||
|
||||
.uploadContent {
|
||||
padding: 16px;
|
||||
|
||||
.uploadIcon {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.uploadText {
|
||||
.uploadTitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.uploadSubtitle {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uploadingContainer {
|
||||
padding: 16px;
|
||||
|
||||
.uploadingIcon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.uploadingText {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainImgItem {
|
||||
.mainImgItemContent {
|
||||
padding: 8px;
|
||||
|
||||
.mainImgIcon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mainImgInfo {
|
||||
.mainImgName {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mainImgSize {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.mainImgActions {
|
||||
.previewBtn,
|
||||
.deleteBtn {
|
||||
padding: 3px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainImgPreview {
|
||||
aspect-ratio: 16 / 9;
|
||||
min-height: 135px;
|
||||
|
||||
.mainImgOverlay {
|
||||
.mainImgActions {
|
||||
.previewBtn,
|
||||
.deleteBtn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
.anticon {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.mainImgUploadContainer {
|
||||
.mainImgUploadButton {
|
||||
aspect-ratio: 16 / 9;
|
||||
min-height: 90px;
|
||||
min-width: 160px;
|
||||
|
||||
.uploadContent {
|
||||
padding: 12px;
|
||||
gap: 8px;
|
||||
|
||||
.uploadIcon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.uploadText {
|
||||
.uploadTitle {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.uploadSubtitle {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uploadingContainer {
|
||||
padding: 12px;
|
||||
gap: 8px;
|
||||
|
||||
.uploadingIcon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.uploadingText {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainImgItem {
|
||||
.mainImgItemContent {
|
||||
padding: 6px;
|
||||
gap: 8px;
|
||||
|
||||
.mainImgIcon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mainImgInfo {
|
||||
.mainImgName {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.mainImgSize {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.mainImgActions {
|
||||
.previewBtn,
|
||||
.deleteBtn {
|
||||
padding: 2px 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainImgPreview {
|
||||
aspect-ratio: 16 / 9;
|
||||
min-height: 90px;
|
||||
|
||||
.mainImgOverlay {
|
||||
.mainImgActions {
|
||||
.previewBtn,
|
||||
.deleteBtn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
.anticon {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 暗色主题支持
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.mainImgUploadContainer {
|
||||
.mainImgUploadButton {
|
||||
background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
|
||||
border-color: #434343;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%);
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
.uploadingContainer {
|
||||
.uploadingText {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.uploadContent {
|
||||
.uploadText {
|
||||
.uploadTitle {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.uploadSubtitle {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainImgItem {
|
||||
background: #2a2a2a;
|
||||
border-color: #434343;
|
||||
|
||||
&:hover {
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
.mainImgItemContent {
|
||||
.mainImgInfo {
|
||||
.mainImgName {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mainImgSize {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.mainImgActions {
|
||||
.previewBtn,
|
||||
.deleteBtn {
|
||||
&:hover {
|
||||
background: #434343;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainImgPreview {
|
||||
background: #1f1f1f;
|
||||
|
||||
.mainImgOverlay {
|
||||
.mainImgActions {
|
||||
.previewBtn,
|
||||
.deleteBtn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ccc;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user