diff --git a/web/src/assets/css/images-wall.css b/web/src/assets/css/images-wall.css index d313ec8a..dc6f2cf5 100644 --- a/web/src/assets/css/images-wall.css +++ b/web/src/assets/css/images-wall.css @@ -35,38 +35,40 @@ overflow: hidden; } .page-images-wall .inner .waterfall .list-item .image .el-image { + width: 100%; transition: transform 0.3s; cursor: pointer; } -.page-images-wall .inner .waterfall .list-item .prompt { +.page-images-wall .inner .waterfall .list-item .opt { display: none; position: absolute; - width: 180px; + width: 100%; bottom: 0; left: 0; color: #fff; - padding: 10px 10px 20px 10px; + padding: 8px 10px; line-height: 1.2; border-top-right-radius: 10px; background-color: rgba(10,10,10,0.7); } -.page-images-wall .inner .waterfall .list-item .prompt span { +.page-images-wall .inner .waterfall .list-item .opt span { word-break: break-all; } -.page-images-wall .inner .waterfall .list-item .prompt .el-icon { - position: absolute; - bottom: 10px; - right: 10px; +.page-images-wall .inner .waterfall .list-item .opt .el-icon, +.page-images-wall .inner .waterfall .list-item .opt .iconfont { + top: 2px; cursor: pointer; border: 1px solid #fff; border-radius: 5px; padding: 2px; - font-size: 12px; + font-size: 16px; + margin-right: 10px; } -.page-images-wall .inner .waterfall .list-item .prompt .el-icon:hover { - background-color: #999; +.page-images-wall .inner .waterfall .list-item .opt .el-icon:hover, +.page-images-wall .inner .waterfall .list-item .opt .iconfont:hover { + background-color: #444; } -.page-images-wall .inner .waterfall .list-item:hover .prompt { +.page-images-wall .inner .waterfall .list-item:hover .opt { display: block; animation: expandUp 0.3s ease-in-out forwards; transform-origin: bottom center; diff --git a/web/src/assets/css/images-wall.styl b/web/src/assets/css/images-wall.styl index 19b269e9..b5c5729a 100644 --- a/web/src/assets/css/images-wall.styl +++ b/web/src/assets/css/images-wall.styl @@ -52,19 +52,20 @@ overflow hidden .el-image { + width 100% transition: transform 0.3s; cursor pointer } } - .prompt { + .opt { display none position absolute - width 180px + width 100% bottom 0 left 0 color #ffffff - padding 10px 10px 20px 10px + padding 8px 10px line-height 1.2 border-top-right-radius 10px background-color rgba(10, 10, 10, 0.7) @@ -73,24 +74,23 @@ word-break break-all } - .el-icon { - position absolute - bottom 10px - right 10px + .el-icon, .iconfont { + top 2px cursor pointer border 1px solid #ffffff border-radius 5px padding 2px - font-size 12px; + font-size 16px; + margin-right 10px &:hover { - background-color #999999 + background-color #444444 } } } &:hover { - .prompt { + .opt { display block animation: expandUp 0.3s ease-in-out forwards; transform-origin: bottom center; diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue index c8d90d18..d582af15 100644 --- a/web/src/views/ImageMj.vue +++ b/web/src/views/ImageMj.vue @@ -555,6 +555,7 @@ const options = [ }, ] +const router = useRouter() const params = ref({ task_type: "image", rate: rates[0].value, @@ -565,7 +566,7 @@ const params = ref({ img_arr: [], raw: false, weight: 0.25, - prompt: "", + prompt: router.currentRoute.value.params["prompt"] ?? "", neg_prompt: "", tile: false, quality: 0 @@ -577,7 +578,6 @@ const activeName = ref('image') const runningJobs = ref([]) const finishedJobs = ref([]) -const router = useRouter() const socket = ref(null) const imgCalls = ref(0) diff --git a/web/src/views/ImagesWall.vue b/web/src/views/ImagesWall.vue index 99d106e3..cbb62a75 100644 --- a/web/src/views/ImagesWall.vue +++ b/web/src/views/ImagesWall.vue @@ -13,7 +13,7 @@