aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加衣服纹理功能

Browse Source
This commit is contained in:
X1627315083
2024-03-20 13:34:07 +08:00
parent 5f9fe870c7
commit c5e3a5036d
33 changed files with 579 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/component/HomePage/TaskPage.vue Normal file
View File

@@ -0,0 +1,187 @@
<template>
<a-drawer
v-model:visible="visible"
class="task_page"
style="color: #000"
title="Task List"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="task_content">
<div class="task_content_item" v-for="item in taskList">
<img v-if="item.state === '执行中' || item.state === '失败'" src="@/assets/images/homePage/loading.gif" alt="">
<img v-else :src="item.url" alt="">
<div class="task_content_item_text">
<div class="task_content_item_text_left modal_title_text">
<div class="task_content_item_text_left_titile">{{ item.title }}</div>
<div class="task_content_item_text_left_into modal_title_text_intro">{{ item.time }}</div>
</div>
<div class="task_content_item_text_right modal_title_text">
<div class="task_content_item_text_left_titile">{{ item.state }}</div>
</div>
</div>
</div>
<div class="task_content_more">
点击查看更多
</div>
</div>
</a-drawer>
</template>
<script lang="ts">
import { message, Upload } from "ant-design-vue";
import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import GO from "@/tool/GO";
// import { forEach } from "jszip";
import scaleImage from "@/component/HomePage/scaleImage.vue";
export default defineComponent({
components: {
scaleImage,
},
props: ["msg",'sketchCatecoryList'],
setup() {
// console.log(prop.msg);
const store = useStore();
let visible = ref<boolean>(false);
let taskList = ref([
{
title:'111111111111',
state:'执行中',
url:'@/assets/images/homePage/loading.gif',
time:'2024-3-18'
},{
title:'111111111111',
state:'已完成',
url:'./image/texture/texture0.webp',
time:'2024-3-18'
},{
title:'111111111111',
state:'失败',
url:'@/assets/images/homePage/loading.gif',
time:'2024-3-18'
},{
title:'111111111111',
state:'执行中',
url:'@/assets/images/homePage/loading.gif',
time:'2024-3-18'
},
])
return {
store,
visible,
taskList,
};
},
data(prop) {
return {
}
},
mounted() {
},
watch:{
// newWindowState:{
// handler(newVal,oldVal){
// console.log(newVal);
// if(newVal){
// this.newWindow?.close();
// }
// }
// },
},
methods: {
init(){
this.visible = true
},
afterVisibleChange(bool:any){
console.log(bool);
}
},
});
</script>
<style lang="less">
.task_page {
.ant-drawer-body{
background: #f6f5fa;
}
.task_content{
.task_content_item{
background: #fff;
margin: 2rem 0;
padding: 1rem 2rem 1rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
align-items: flex-start;
position: relative;
height: 12rem;
border-radius: 1rem;
overflow: hidden;
img{
width: 10rem;
max-height: 100%;
object-fit: contain;
margin-right: 2rem;
}
.task_content_item_text{
// display: flex;
display: flex;
justify-content: space-between;
flex: 1;
height: 100%;
align-items: center;
overflow: hidden;
position: relative;
.task_content_item_text_left,.task_content_item_text_right{
margin-bottom: 0;
}
.task_content_item_text_left{
flex: 1;
overflow: hidden;
margin-right: 2rem;
div{
overflow: hidden;
white-space: nowrap; /* 禁止换行 */
text-overflow: ellipsis; /* 显示省略号 */
}
}
.task_content_item_text_right{
width: 10rem;
.task_content_item_text_left_titile,.task_content_item_text_left_into{
text-align: right;
}
.text_click{
}
.task_content_item_text_left_into{
cursor: pointer;
transition: .3s all;
opacity: 0;
position: absolute;
right: 0;
}
}
}
}
.task_content_item:hover .task_content_item_text_left_into{
opacity: 1 !important;
}
.task_content_more{
background: #fff;
width: 100%;
line-height: 5rem;
text-align: center;
cursor: pointer;
}
}
}
</style>
<style lang="less">
.task_page,.layout_modal{
}
</style>