mirror of
https://gitee.com/blackfox/geekai.git
synced 2024-12-03 12:48:31 +08:00
feat: optimize the midjourney image list styles
This commit is contained in:
RockYang
parent
1ae79331e7
commit
b47ff975b0
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4125778 */
|
||||
src: url('iconfont.woff2?t=1694420182193') format('woff2'),
|
||||
url('iconfont.woff?t=1694420182193') format('woff'),
|
||||
url('iconfont.ttf?t=1694420182193') format('truetype');
|
||||
src: url('iconfont.woff2?t=1697164072791') format('woff2'),
|
||||
url('iconfont.woff?t=1697164072791') format('woff'),
|
||||
url('iconfont.ttf?t=1697164072791') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,6 +13,10 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-face:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
|
||||
.icon-book:before {
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,6 +5,13 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "845789",
|
||||
"name": "笑脸",
|
||||
"font_class": "face",
|
||||
"unicode": "e64b",
|
||||
"unicode_decimal": 58955
|
||||
},
|
||||
{
|
||||
"icon_id": "11836501",
|
||||
"name": "知识库",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -12,29 +12,45 @@
|
||||
</div>
|
||||
<v3-waterfall class="waterfall" id="waterfall" :list="list" srcKey="img_url" :gap="12" :colWidth="colWidth"
|
||||
:style="{ height:listBoxHeight + 'px' }"
|
||||
:distanceToScroll="100" :isLoading="loading" :isOver="over" @scrollReachBottom="getNext">
|
||||
:distanceToScroll="200" :isLoading="loading" :isOver="over" @scrollReachBottom="getNext">
|
||||
<template #default="slotProp">
|
||||
<div class="list-item">
|
||||
<el-image :src="slotProp.item['img_url']+'?imageView2/4/w/300/q/75'"
|
||||
:zoom-rate="1.2"
|
||||
:preview-src-list="[slotProp.item['img_url']]"
|
||||
:preview-teleported="true"
|
||||
:initial-index="10"
|
||||
loading="lazy">
|
||||
<template #placeholder>
|
||||
<div class="image-slot">
|
||||
正在加载图片
|
||||
</div>
|
||||
</template>
|
||||
<div class="image">
|
||||
<el-image :src="slotProp.item['img_url']+'?imageView2/4/w/300/q/75'"
|
||||
:zoom-rate="1.2"
|
||||
:preview-src-list="[slotProp.item['img_url']]"
|
||||
:preview-teleported="true"
|
||||
:initial-index="10"
|
||||
loading="lazy">
|
||||
<template #placeholder>
|
||||
<div class="image-slot">
|
||||
正在加载图片
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<el-icon v-if="slotProp.item['img'] !== ''">
|
||||
<Picture/>
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<el-icon v-if="slotProp.item['img'] !== ''">
|
||||
<Picture/>
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
</div>
|
||||
|
||||
<div class="prompt">
|
||||
<span>{{ slotProp.item.prompt }}</span>
|
||||
<el-icon class="copy-prompt" :data-clipboard-text="slotProp.item.prompt">
|
||||
<DocumentCopy/>
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="footer">
|
||||
<span>没有更多数据了</span>
|
||||
<i class="iconfont icon-face"></i>
|
||||
</div>
|
||||
</template>
|
||||
</v3-waterfall>
|
||||
@ -43,16 +59,17 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from "vue"
|
||||
import {Picture} from "@element-plus/icons-vue";
|
||||
import {onMounted, ref} from "vue"
|
||||
import {DocumentCopy, Picture} from "@element-plus/icons-vue";
|
||||
import {httpGet} from "@/utils/http";
|
||||
import {ElMessage} from "element-plus";
|
||||
import Clipboard from "clipboard";
|
||||
|
||||
const list = ref([])
|
||||
const loading = ref(true)
|
||||
const over = ref(false)
|
||||
const imgType = ref("mj") // 图片类别
|
||||
const listBoxHeight = window.innerHeight - 100
|
||||
const listBoxHeight = window.innerHeight - 71
|
||||
const colWidth = ref(240)
|
||||
|
||||
// 计算瀑布流列宽度
|
||||
@ -91,6 +108,17 @@ const getNext = () => {
|
||||
|
||||
getNext()
|
||||
|
||||
onMounted(() => {
|
||||
const clipboard = new Clipboard('.copy-prompt');
|
||||
clipboard.on('success', () => {
|
||||
ElMessage.success({message: "复制成功！", duration: 500});
|
||||
})
|
||||
|
||||
clipboard.on('error', () => {
|
||||
ElMessage.error('复制失败！');
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user