359 lines
12 KiB
Vue
359 lines
12 KiB
Vue
<template>
|
|
<div class="works_page">
|
|
<div class="modal_title_text">
|
|
<div>Works</div>
|
|
</div>
|
|
<div class="modal_title_text">
|
|
<div v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">{{ item.name }}</div>
|
|
</div>
|
|
<div class="page_content">
|
|
<div class="page_content_item" v-for="item,index in worksList" :key="item">
|
|
<div class="page_content_item_img" @click.stop="getImgScale(index)">
|
|
<img v-lazy="item.imgUrl" alt="">
|
|
<div class="delete_like_file_block" >
|
|
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
|
|
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
|
|
</div>
|
|
</div>
|
|
<div class="page_content_item_text">
|
|
<div class="page_content_item_text_name">
|
|
{{item.name}}
|
|
</div>
|
|
<div class="page_content_item_text_bottom">
|
|
<div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
|
|
<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
</svg>
|
|
<span>{{ item.likeNum }}</span>
|
|
</div>
|
|
<div>
|
|
<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
|
|
<i v-else class="fi fi-rr-social-network"></i>
|
|
<span>321</span>
|
|
</div>
|
|
<div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
|
|
<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
|
|
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
|
|
</svg>
|
|
<span>{{ item.lookNum }}</span>
|
|
</div>
|
|
<!-- <div>
|
|
<i class="fi fi-rr-comment-alt-dots"></i>
|
|
<span>{{ item.lookNum }}</span>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<newScaleImage ref="newScaleImage"></newScaleImage>
|
|
<!-- 蒙层 start-->
|
|
<div class="mark_loading" v-show="isShowMark">
|
|
<a-spin size="large" />
|
|
</div>
|
|
<!-- 蒙层 end-->
|
|
<!-- <RobotAssist></RobotAssist> -->
|
|
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { LoadingOutlined } from "@ant-design/icons-vue";
|
|
import { defineComponent,h ,toRefs,ref,reactive,createVNode,nextTick,provide,computed} from 'vue'
|
|
// import HeaderComponent from "@/component/HomePage/Header.vue";
|
|
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
|
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import {getUploadUrl,isMoible} from '@/tool/util'
|
|
import { useStore } from "vuex";
|
|
import { Https } from "@/tool/https";
|
|
import { getCookie } from "@/tool/cookie";
|
|
import newScaleImage from "@/component/WorksPage/newScaleImage.vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import { ElCascader } from 'element-plus'
|
|
import { remove } from "jszip";
|
|
export default defineComponent({
|
|
components: {
|
|
newScaleImage,
|
|
},
|
|
setup() {
|
|
let filter:any = reactive({
|
|
worksSelect: 'all',
|
|
worksType: [
|
|
{
|
|
name: '全部',
|
|
value: 'all'
|
|
},
|
|
{
|
|
name: 'generate',
|
|
value: 'generate'
|
|
},
|
|
{
|
|
name: 'freehand sketching',
|
|
value: 'freehandSketching'
|
|
},
|
|
],
|
|
worksList: [
|
|
{
|
|
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
|
|
name:'bbb',
|
|
lookNum:'999',
|
|
likeNum:'123',
|
|
like: true,
|
|
},
|
|
{
|
|
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
|
name:'aaa',
|
|
lookNum:'213',
|
|
likeNum:'123',
|
|
like: false,
|
|
},{
|
|
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
|
name:'aaa',
|
|
lookNum:'213',
|
|
likeNum:'123',
|
|
like: false,
|
|
},{
|
|
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
|
name:'aaa',
|
|
lookNum:'213',
|
|
likeNum:'123',
|
|
like: false,
|
|
},{
|
|
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
|
|
name:'aaa',
|
|
lookNum:'213',
|
|
likeNum:'123',
|
|
like: false,
|
|
},{
|
|
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
|
|
name:'bbb',
|
|
lookNum:'999',
|
|
likeNum:'123',
|
|
like: true,
|
|
},{
|
|
imgUrl: 'https://cdn.dribbble.com/userupload/14368520/file/original-253a09d85fc1d5ff83c96c046d535ff7.jpg?resize=450x338&vertical=center',
|
|
name:'bbb',
|
|
lookNum:'999',
|
|
likeNum:'123',
|
|
like: true,
|
|
},{
|
|
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
|
name:'aaa',
|
|
lookNum:'213',
|
|
likeNum:'123',
|
|
like: false,
|
|
},{
|
|
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
|
name:'aaa',
|
|
lookNum:'213',
|
|
likeNum:'123',
|
|
like: false,
|
|
},{
|
|
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
|
name:'aaa',
|
|
lookNum:'213',
|
|
likeNum:'123',
|
|
like: false,
|
|
},{
|
|
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
|
name:'aaa',
|
|
lookNum:'213',
|
|
likeNum:'123',
|
|
like: false,
|
|
},{
|
|
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
|
name:'aaa',
|
|
lookNum:'213',
|
|
likeNum:'123',
|
|
like: false,
|
|
},{
|
|
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
|
name:'aaa',
|
|
lookNum:'213',
|
|
likeNum:'123',
|
|
like: false,
|
|
},{
|
|
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
|
name:'aaa',
|
|
lookNum:'213',
|
|
likeNum:'123',
|
|
like: false,
|
|
},{
|
|
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542',
|
|
name:'aaa',
|
|
lookNum:'213',
|
|
likeNum:'123',
|
|
like: false,
|
|
},{
|
|
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
|
|
name:'aaa',
|
|
lookNum:'213',
|
|
likeNum:'123',
|
|
like: false,
|
|
}
|
|
],
|
|
isShowMark:false
|
|
})
|
|
let newScaleImage:any = ref()
|
|
let setWorksSelect = (val:any) => {
|
|
filter.worksSelect = val.value
|
|
}
|
|
let likeFile = (item:any,type:string) => {
|
|
}
|
|
let getImgScale = (index:any)=>{
|
|
console.log(newScaleImage.value);
|
|
newScaleImage.value.scaleImageMask = true
|
|
newScaleImage.value.init(filter.worksList,index)
|
|
}
|
|
let {t} = useI18n()
|
|
return {
|
|
...toRefs(filter),
|
|
newScaleImage,
|
|
setWorksSelect,
|
|
likeFile,
|
|
getImgScale,
|
|
t,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
indicator: h(LoadingOutlined, {
|
|
style: {
|
|
fontSize: "2.4rem",
|
|
},
|
|
spin: true,
|
|
}),
|
|
upload: {
|
|
isPin: 0,
|
|
gender:'',
|
|
level1Type: this.selectCode,
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
},
|
|
token: "",
|
|
};
|
|
},
|
|
watch:{
|
|
sex(newVal,oldVal){
|
|
this.upload.gender = newVal.value
|
|
},
|
|
searchPictureName(newVal,oldVal){
|
|
// clearTimeout(this.getLibraryListInputTime)
|
|
// this.getLibraryListInputTime = setTimeout(() => {
|
|
// if(newVal != oldVal){
|
|
// this.currentPage = 1
|
|
// }
|
|
// }, 500);
|
|
},
|
|
},
|
|
async mounted(){
|
|
|
|
},
|
|
})
|
|
</script>
|
|
<style lang="less">
|
|
.el-icon{
|
|
font-size: 14px;
|
|
}
|
|
.works_page {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
padding: 0 9rem;
|
|
// min-width: 1440px;
|
|
position: relative;
|
|
.modal_title_text{
|
|
display: flex;
|
|
.modal_title_text_assistant{
|
|
padding: 1rem 3rem;
|
|
border-radius: 2rem;
|
|
background: #eee;
|
|
margin-right: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
.modal_title_text_assistant:last-child{
|
|
margin-right: 0;
|
|
}
|
|
.active{
|
|
background: #39215b;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.page_content {
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
overflow-y: auto;
|
|
height: 145rem;
|
|
align-content: flex-start;
|
|
.page_content_item{
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-right: 4rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
.page_content_item_text,.page_content_item_img{
|
|
display: flex;
|
|
}
|
|
.page_content_item_img{
|
|
width: 30rem;
|
|
height: 30rem;
|
|
overflow: hidden;
|
|
justify-content: center;
|
|
border-radius: 2rem;
|
|
position: relative;
|
|
img{
|
|
// width: 100%;
|
|
cursor: pointer;
|
|
max-height: 100%;
|
|
object-fit: cover;
|
|
transform: scale(1.15);
|
|
transition: all 0.5s;
|
|
}
|
|
.delete_like_file_block{
|
|
cursor: pointer;
|
|
}
|
|
&:hover{
|
|
.delete_like_file_block{
|
|
display: block;
|
|
}
|
|
img{
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
}
|
|
.page_content_item_text{
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
>div{
|
|
font-size: 2rem;
|
|
}
|
|
.page_content_item_text_name{
|
|
width: 30%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.page_content_item_text_bottom{
|
|
width: 70%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
>div{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 2rem;
|
|
margin-right: 1rem;
|
|
i{
|
|
display: flex;
|
|
font-size: 2rem;
|
|
}
|
|
span{
|
|
margin-left: calc(var(--padding) / 2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |