xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-12-27 02:25:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: optimize the midjourney image list styles

Browse Source
This commit is contained in:
RockYang
2023-10-13 11:14:39 +08:00
parent 9fcd686fda
commit 606f24e981
9 changed files with 216 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
web/src/assets/css/images-wall.css
View File

@@ -31,6 +31,52 @@
overflow-y: auto;
overflow-x: hidden;
}
.page-images-wall .inner .waterfall .list-item .image {
overflow: hidden;
}
.page-images-wall .inner .waterfall .list-item .image .el-image {
transition: transform 0.3s;
}
.page-images-wall .inner .waterfall .list-item .prompt {
display: none;
position: absolute;
bottom: 0;
color: #fff;
padding: 10px 10px 20px 10px;
line-height: 1.2;
background-color: rgba(10,10,10,0.7);
}
.page-images-wall .inner .waterfall .list-item .prompt .el-icon {
position: absolute;
bottom: 10px;
right: 10px;
cursor: pointer;
border: 1px solid #fff;
border-radius: 5px;
padding: 2px;
font-size: 12px;
}
.page-images-wall .inner .waterfall .list-item .prompt .el-icon:hover {
background-color: #999;
}
.page-images-wall .inner .waterfall .list-item:hover .prompt {
display: block;
animation: expandUp 0.3s ease-in-out forwards;
transform-origin: bottom center;
transform: scaleY(0); /* 初始状态，元素高度为0 */
}
.page-images-wall .inner .waterfall .list-item:hover .image .el-image {
transform: scale(1.2); /* 放大图像到1.2倍大小 */
}
.page-images-wall .inner .waterfall .footer {
display: flex;
padding: 20px;
align-items: center;
justify-content: center;
}
.page-images-wall .inner .waterfall .footer .iconfont {
margin-left: 6px;
}
.page-images-wall .custom-scroll ::-webkit-scrollbar {
width: 10px; /* 滚动条宽度 */
}
@@ -44,3 +90,35 @@
.page-images-wall .custom-scroll ::-webkit-scrollbar-thumb:hover {
background-color: #666;
}
@-moz-keyframes expandUp {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
@-webkit-keyframes expandUp {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
@-o-keyframes expandUp {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
@keyframes expandUp {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}

72
web/src/assets/css/images-wall.styl
View File

@@ -1,3 +1,12 @@
@keyframes expandUp {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
.page-images-wall {
display: flex;
background-color: #282c34;
@@ -36,6 +45,69 @@
margin: 0 auto;
overflow-y auto
overflow-x hidden
.list-item {
.image {
overflow hidden
.el-image {
transition: transform 0.3s;
}
}
.prompt {
display none
position absolute
bottom 0
color #ffffff
padding 10px 10px 20px 10px
line-height 1.2
background-color rgba(10, 10, 10, 0.7)
.el-icon {
position absolute
bottom 10px
right 10px
cursor pointer
border 1px solid #ffffff
border-radius 5px
padding 2px
font-size 12px;
&:hover {
background-color #999999
}
}
}
&:hover {
.prompt {
display block
animation: expandUp 0.3s ease-in-out forwards;
transform-origin: bottom center;
transform: scaleY(0); /* 初始状态，元素高度为0 */
}
.image {
.el-image {
transform: scale(1.2); /* 放大图像到1.2倍大小 */
}
}
}
}
.footer {
display flex
padding 20px
align-items center
justify-content center
.iconfont {
margin-left 6px
}
}
}
}