xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-09-20 10:16:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: adjust UI for task list page

Browse Source
This commit is contained in:
RockYang 2023-09-15 18:16:59 +08:00
parent 4112426848
commit ae135b89d6
3 changed files with 75 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/src/assets/css/image-mj.css
View File

@ -171,6 +171,26 @@
padding: 2px;
background-color: #555;
}
.page-mj .inner .task-list-box .running-job-list .job-item .job-item-inner {
position: relative;
height: 100%;
overflow: hidden;
}
.page-mj .inner .task-list-box .running-job-list .job-item .job-item-inner .progress {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.5);
}
.page-mj .inner .task-list-box .running-job-list .job-item .job-item-inner .progress span {
font-size: 20px;
color: #fff;
}
.page-mj .inner .task-list-box .running-job-list .job-item .el-image {
width: 100%;
height: 100%;
@ -187,20 +207,20 @@
font-size: 50px;
margin-bottom: 10px;
}
.page-mj .inner .task-list-box .task-list-inner .job-item {
.page-mj .inner .task-list-box .finish-job-list .job-item {
margin-bottom: 20px;
}
.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line {
.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line {
margin: 6px 0;
}
.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line ul {
.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul {
display: flex;
flex-flow: row;
}
.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line ul li {
.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li {
margin-right: 10px;
}
.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line ul li a {
.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a {
padding: 3px 0;
width: 50px;
text-align: center;
@ -210,7 +230,7 @@
background-color: #4e5058;
color: #fff;
}
.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line ul li a:hover {
.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover {
background-color: #6d6f78;
}
.mj-list-item-prompt .el-icon {

27
web/src/assets/css/image-mj.styl
View File

@ -220,6 +220,29 @@
padding 2px
background-color #555555
.job-item-inner {
position relative
height 100%
overflow hidden
.progress {
position absolute
width 100%
height 100%
top 0
left 0
display flex
justify-content center
align-items center
background-color: rgba(0, 0, 0, 0.5)
span {
font-size 20px
color #ffffff
}
}
}
.el-image {
width 100%
height 100%
@ -241,8 +264,8 @@
}
}
.task-list-inner {
.finish-job-list {
.job-item {
margin-bottom 20px
@ -277,8 +300,8 @@
}
}
}
}
}
}

42
web/src/views/ImageMj.vue
View File

@ -225,25 +225,31 @@
trigger="hover"
>
<template #reference>
<el-image :src="scope.item.img_url"
:zoom-rate="1.2"
:preview-src-list="[scope.item.img_url]"
fit="cover"
:initial-index="0" loading="lazy" v-if="scope.item.progress > 0">
<template #placeholder>
<div class="image-slot">
正在加载图片
</div>
</template>
<div v-if="scope.item.progress > 0" class="job-item-inner">
<el-image :src="scope.item.img_url"
:zoom-rate="1.2"
:preview-src-list="[scope.item.img_url]"
fit="cover"
:initial-index="0" loading="lazy">
<template #placeholder>
<div class="image-slot">
正在加载图片
</div>
</template>
<template #error>
<div class="image-slot">
<el-icon>
<Picture/>
</el-icon>
</div>
</template>
</el-image>
<template #error>
<div class="image-slot">
<el-icon>
<Picture/>
</el-icon>
</div>
</template>
</el-image>
<div class="progress">
<el-progress type="circle" :percentage="scope.item.progress" :width="100" color="#47fff1"/>
</div>
</div>
<el-image fit="cover" v-else>
<template #error>
<div class="image-slot">