xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-09-20 18:26:37 +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; padding: 2px;
background-color: #555; 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 { .page-mj .inner .task-list-box .running-job-list .job-item .el-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -187,20 +207,20 @@
font-size: 50px; font-size: 50px;
margin-bottom: 10px; 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; 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; 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; display: flex;
flex-flow: row; 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; 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; padding: 3px 0;
width: 50px; width: 50px;
text-align: center; text-align: center;
@ -210,7 +230,7 @@
background-color: #4e5058; background-color: #4e5058;
color: #fff; 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; background-color: #6d6f78;
} }
.mj-list-item-prompt .el-icon { .mj-list-item-prompt .el-icon {

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

@ -220,6 +220,29 @@
padding 2px padding 2px
background-color #555555 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 { .el-image {
width 100% width 100%
height 100% height 100%
@ -241,8 +264,8 @@
} }
} }
.task-list-inner {
.finish-job-list {
.job-item { .job-item {
margin-bottom 20px margin-bottom 20px
@ -277,8 +300,8 @@
} }
} }
}
}
} }
} }

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

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