A1300399510/PC-official
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: 移除图片悬停动画并调整容器高度

Browse Source 
移除图片的悬停缩放动画效果以提升性能
将容器高度从100vh改为100%并添加最小高度限制
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-25 16:35:39 +08:00
parent 08053e2211
commit a2ee6e8e1f
4 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/css/guess.css
View File

@@ -39,7 +39,7 @@
} }
.container .container-box { .container .container-box {
padding-top: 24px; padding-top: 24px;
height: 100vh; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -53,13 +53,14 @@
position: relative; position: relative;
width: 1200px; width: 1200px;
height: 280px; height: 280px;
min-height: 280px;
border-radius: 20px; border-radius: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.container .container-box .header::after { .container .container-box .header::after {
content: ""; content: "";
width: 1200px; width: 1200px;
height: 280px; height: 100%;
background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%); background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
border-radius: 20px; border-radius: 20px;
position: absolute; position: absolute;
@@ -227,6 +228,7 @@
padding: 3px; padding: 3px;
overflow: hidden; overflow: hidden;
height: var(--base-height); height: var(--base-height);
min-height: var(--base-height);
} }
.container .container-box .details::after { .container .container-box .details::after {
content: ""; content: "";

6
static/css/guess.less
View File

@@ -48,7 +48,7 @@
.container-box { .container-box {
padding-top: 24px; padding-top: 24px;
height: 100vh; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -63,6 +63,7 @@
position: relative; position: relative;
width: 1200px; width: 1200px;
height: 280px; height: 280px;
min-height: 280px;
// background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%); // background: linear-gradient(180deg, #7d4bf8 0%, #5241b0 100%);
border-radius: 20px; border-radius: 20px;
margin-bottom: 20px; margin-bottom: 20px;
@@ -70,7 +71,7 @@
&::after { &::after {
content: ""; content: "";
width: 1200px; width: 1200px;
height: 280px; height: 100%;
background: linear-gradient(180deg, rgba(125, 75, 248, 1) 0%, rgba(82, 65, 176, 1) 100%); background: linear-gradient(180deg, rgba(125, 75, 248, 1) 0%, rgba(82, 65, 176, 1) 100%);
border-radius: 20px; border-radius: 20px;
position: absolute; position: absolute;
@@ -261,6 +262,7 @@
padding: 3px; padding: 3px;
overflow: hidden; overflow: hidden;
height: var(--base-height); height: var(--base-height);
min-height: var(--base-height);
&::after { &::after {
content: ""; content: "";

4
static/css/index.css
View File

@@ -675,12 +675,8 @@
width: 240px; width: 240px;
height: 240px; height: 240px;
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35)); filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
transition: all 0.3s ease-in-out;
border-radius: 10px; border-radius: 10px;
} }
.content .custom .list .item .info-img:hover {
transform: scale(1.05);
}
.content .custom .bottom { .content .custom .bottom {
position: absolute; position: absolute;
bottom: 0; bottom: 0;

8
static/css/index.less
View File

@@ -787,12 +787,12 @@
width: 240px; width: 240px;
height: 240px; height: 240px;
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35)); filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
transition: all 0.3s ease-in-out; // transition: all 0.3s ease-in-out;
border-radius: 10px; border-radius: 10px;
&:hover { // &:hover {
transform: scale(1.05); // transform: scale(1.05);
} // }
} }
} }
} }