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

fix

Browse Source
This commit is contained in:
X1627315083
2024-05-09 13:34:15 +08:00
parent d53c38591a
commit f3e4acc940
13 changed files with 981 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/style/style.css
View File

@@ -1037,6 +1037,11 @@ li {
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
}
.modal_title_text .modal_title_text_assistant {
font-size: var(--aida-fsize1-6);
font-weight: 400;
color: #000000;
}
.collection_modal .ant-modal-body,
.generalModel_modal .ant-modal-body,
.payOrder_modal .ant-modal-body,

5
src/assets/style/style.less
View File

@@ -1175,6 +1175,11 @@ input:focus{
font-weight: 400;
color: rgba(0,0,0,.45);
}
.modal_title_text_assistant{
font-size: var(--aida-fsize1-6);
font-weight: 400;
color: rgba(0,0,0,1);
}
}
//collection 弹窗
.collection_modal,.generalModel_modal,.payOrder_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page,.Export{

1
src/component/Detail/DesignDetail.vue
View File

@@ -938,7 +938,6 @@ export default defineComponent({
clothesDetail(clothes:any, index:number){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
console.log(designItemDetail);
this.designOrder = true
this.current = designItemDetail.clothes[index]

16
src/component/HomePage/collectionModal.vue
View File

@@ -118,14 +118,14 @@ export default defineComponent({
}
},
activated () {
// let data:any = JSON.parse((sessionStorage.getItem('collectionData') as any));
// if(!data){
// return
// }
// this.showCollectionModal = data.showCollectionModal
// this.collectionStep = data.collectionStep
},
// activated () {
// let data:any = JSON.parse((sessionStorage.getItem('collectionData') as any));
// if(!data){
// return
// }
// this.showCollectionModal = data.showCollectionModal
// this.collectionStep = data.collectionStep
// },
data(){
return{

6
src/component/HomePage/scaleImage.vue
View File

@@ -231,7 +231,7 @@ export default defineComponent({
margin: 0 auto;
margin-top: calc(5rem*1.2);
position: relative;
max-width: calc(50rem*1.2);
max-width: 70rem;
img{
width: auto;
height: 100%;
@@ -249,6 +249,9 @@ export default defineComponent({
right: 2rem;
top: 2rem;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
.operate_icon{
font-size: 1.8rem;
color: #fff;
@@ -257,6 +260,7 @@ export default defineComponent({
}
}
i{
display: flex;
font-size: 1.8rem;
color: #fff;
}

603
src/component/WorksPage/newScaleImage.vue Normal file
View File

@@ -0,0 +1,603 @@
<template>
<a-modal
class="newScaleImage_modal"
v-model:visible="scaleImage"
:footer="null"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="scaleImageMask"
:keyboard="false"
:destroyOnClose="true"
>
<div class="newScaleImage_btn">
<div class="collection_closeIcon left" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="collection_closeIcon" @click.stop="download()">
<i class="fi fi-rr-down-to-line"></i>
</div>
</div>
<div class="newScaleImage_page">
<div class="newScaleImage_content">
<div class="newScaleImage_content_right">
<div class="newScaleImage_content_right_img">
<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
</div>
<div class="nav_centent" v-mousewheel="{allLength:scaleImageList.length}" :style="{'margin-top':scaleImageMarginTop}">
<img class="nav_centent_img" v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active2:index == scaleImageIndex, active3:index == scaleImageIndex+1, active1:index == scaleImageIndex-1}" :title="scaleImageIndex" :src="item?.imgUrl" :key="item.id">
</div>
</div>
<div class="newScaleImage_content_left">
<div class="newScaleImage_content_left_type">
<div class="generate_item_title_left scaleImage_chunk_title">类型：collection/generate</div>
</div>
<!-- <div class="newScaleImage_content_left_collection">
</div> -->
<div class="newScaleImage_content_left_generate">
<div v-show="true" class="scaleImage_chunk_item content_left_generate_item">
<div class="content_left_generate_item_title">
<div class="scaleImage_chunk_title">模型：123123</div>
<div class="generate_item_title_right">
<img class="generate_item_title_right_img" v-lazy="'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'" alt="">
</div>
</div>
</div>
<div class="scaleImage_chunk_item content_left_generate_item content_left_generate_describe">
<div class="content_left_generate_item_title">
<div class="scaleImage_chunk_title">describe</div>
<div class="generate_item_title_right">
<span class="scaleImage_chunk_btn" @click="setCopy">copy</span>
</div>
</div>
<textarea ref="textarea" :value="generateValue"></textarea>
</div>
</div>
</div>
</div>
<div class="newScaleImage_detail">
<div class="newScaleImage_detail_left">
<div>comment</div>
<div>
</div>
</div>
<div class="newScaleImage_detail_right">
<div class="scaleImage_chunk_item">
<div class="detail_right_user detail_right_item">
<div class="detail_right_user_head">
<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
</div>
<div class="detail_right_user_content">
<div class="scaleImage_chunk_title">名字</div>
<div class="detail_right_user_content_intro">个性签名</div>
<div class="scaleImage_chunk_btn">关注</div>
</div>
</div>
<div class="detail_right_operation detail_right_item">
<div>like</div>
<div>收藏</div>
</div>
<div class="detail_right_look_operation detail_right_item">
<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>321</span>
</div>
<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="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>321</span>
</div>
<div>
<i class="fi fi-rr-comment-alt-dots"></i>
<span>321</span>
</div>
</div>
<div class="detail_right_auther detail_right_item">
<div class="scaleImage_chunk_title">Auther Other Products</div>
<div class="detail_right_auther_img">
<div class="detail_right_auther_img_item">
<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
</div>
<div class="detail_right_auther_img_item">
<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
</div>
<div class="detail_right_auther_img_item">
<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
</div>
<div class="detail_right_auther_img_item">
<img src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
</div>
<div class="detail_right_auther_img_item detail_right_auther_img_end">
<span>more +</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a-modal>
</template>
<script lang="ts">
import { defineComponent,watch,getCurrentInstance, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
// import { Https } from "@/tool/https";
// import { getCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { downloadIamge } from "@/tool/util";
export default defineComponent({
setup() {
let scaleImage: any = ref(false);//弹窗
let scaleImageMask:any = ref(false)//弹窗遮罩
let imgData:any = reactive({
generateValue:'123123',
loadingShow:false,
scaleImageMarginTop:0,
scaleImageList:[],
scaleImageIndex:0,//当前图片索引
})
let textarea: any = ref(null)
let setCopy = ()=>{
textarea.value.select()
document.execCommand("copy");
}
let init = (list:any,index:any,dialogueIndex:any)=>{
console.log(213123);
scaleImage.value = true
imgData.scaleImageList = list
imgData.scaleImageIndex = index
// let scaleImageList = this.store.state.UploadFilesModule.moodboard
}
let cancelDsign = ()=>{
scaleImage.value = false
imgData.scaleImageList = []
imgData.scaleImageIndex = 0
}
let download = ()=>{
downloadIamge(imgData.scaleImageList[imgData.scaleImageIndex].imgUrl)
}
let setScaleImageIndex = (index:any)=>{
imgData.scaleImageIndex = index
}
let LikeFile = (item:any,str:string)=>{
const currentInstance = getCurrentInstance();
let parent:any = currentInstance?.parent
console.log(parent);
parent.likeFile(item,str)
}
// LikeFile(item:any,str:string){
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
watch(()=>imgData.scaleImageIndex,
(newVal,oldVal)=>{
let dom:any = document.querySelector('.newScaleImage_content .nav_centent')
if(!dom) return
let contentItemHeight = Number(getComputedStyle(dom).getPropertyValue('--snap-size').split('rem')[0]);
imgData.scaleImageMarginTop = `${contentItemHeight*-(newVal) - contentItemHeight/2}rem`
}
)
return {
scaleImage,
scaleImageMask,
...toRefs(imgData),
textarea,
setCopy,
init,
cancelDsign,
download,
setScaleImageIndex,
LikeFile,
};
},
directives:{
mousewheel:{
mounted (el,binding:any) {
// let contentHeight = Number(getComputedStyle(el).getPropertyValue('--content-height').split('rem')[0]);
let contentItemHeight = Number(getComputedStyle(el).getPropertyValue('--snap-size').split('rem')[0]);
let marginTop = (contentItemHeight*-(binding.instance.scaleImageIndex))-contentItemHeight/2
binding.instance.scaleImageMarginTop = `${marginTop}rem`
let move = false
let parentNode:any = document.querySelector('.newScaleImage_modal .newScaleImage_page')
el.addEventListener('mouseenter',(e:WheelEvent)=>{
move = true
parentNode.style.overflow = 'hidden'
})
el.addEventListener('mouseleave',(e:WheelEvent)=>{
move = false
parentNode.style.overflow = 'auto'
})
el.addEventListener('wheel',(e:WheelEvent)=>{
if(!move) return
marginTop = (contentItemHeight*-(binding.instance.scaleImageIndex))-contentItemHeight/2
if(e.deltaY > 0 && marginTop > -(contentItemHeight*(binding.instance.scaleImageList.length) - contentItemHeight/2)){
marginTop -= contentItemHeight
}else if(e.deltaY < 0 && marginTop < -(contentItemHeight/2)){
marginTop += contentItemHeight
}
binding.instance.scaleImageIndex = Math.round(Math.abs(marginTop/contentItemHeight))-1
binding.instance.scaleImageMarginTop = `${marginTop}rem`
if(Math.abs(marginTop)>=contentItemHeight*binding.instance.scaleImageList.length-5){
// binding.instance.scaleImageList.push(...binding.instance.scaleImageList)
}
})
}
},
},
data() {
return {
// moodTemplateId: "", //模板id
};
},
mounted() {
},
methods: {
// init(list:any,index:any,dialogueIndex:any){
// },
// cancelDsign(){
// this.scaleImage = false
// // this.scaleImageList = []
// // this.scaleImageIndex = 0
// },
// download(){
// // downloadIamge(this.scaleImageList[this.scaleImageIndex].imgUrl)
// },
// setScaleImageIndex(index:any){
// // this.scaleImageIndex = index
// // console.log(this.scaleImageIndex);
// },
// LikeFile(item:any,str:string){
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
},
});
</script>
<style lang="less">
.newScaleImage_modal {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
position: relative;
border-radius: 1rem;
overflow: hidden;
.ant-modal-body {
padding: 0;
// height: calc(65vh - 6.4rem);
height: calc(65rem*1.2);
// background-color: #181818;
}
.ant-modal-btn{
}
.ant-modal-body{
padding: 9rem;
}
.newScaleImage_page{
overflow-y: auto;
height: 100%;
&.newScaleImage_page::-webkit-scrollbar{display: none;}
}
.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
font-size: 2rem;
}
.newScaleImage_btn {
.collection_closeIcon{
position: absolute;
top: calc(2rem*1.2);
right: calc(2rem*1.2);
cursor: pointer;
width: calc(4rem*1.2);
height: calc(4rem*1.2);
display: flex;
align-items: center;
justify-content: center;
&.left{
left: calc(2rem*1.2);
}
.fi-rr-cross-small::before{
padding: calc(.2rem*1.2);
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.22);
transition: .3s all;
color: rgba(0, 0, 0, 0.7);
}
&.collection_closeIcon:hover .fi-rr-cross-small::before{
border: solid 2px rgba(0, 0, 0, 5);
color: rgba(0, 0, 0, 1);
}
.fi-rr-down-to-line{
transition: .3s all;
color: rgba(0, 0, 0, .5);
}
.fi-rr-down-to-line:hover{
color: rgba(0, 0, 0, 1);
}
}
}
--margin: 3rem;
--padding: 2rem;
--border-color: #c4c4c4;
--background-color:#f5f5f5;
.scaleImage_chunk_item{
background: var(--background-color);
padding: var(--padding);
border-radius: var(--padding);
margin-bottom: var(--margin);
}
.scaleImage_chunk_btn{
padding: .5rem 1rem;
border-radius: 4px;
border: .2rem solid var(--border-color);
background: #fff;
cursor: pointer;
}
.scaleImage_chunk_title{
font-size: 2.2rem;
font-weight: 600;
color: #000;
}
.newScaleImage_content{
width: 100%;
display: flex;
.newScaleImage_content_right{
--content-height: 50rem;
display: flex;
width: 60%;
flex-wrap: wrap;
justify-content: space-between;
height: var(--content-height);
position: relative;
overflow: hidden;
.newScaleImage_content_right_img{
height: 100%;
width: 60%;
overflow-x: auto;
display: flex;
img{
width: auto;
max-width: 100%;
height: 100%;
object-fit: contain;
margin-right: 2rem;
}
img:last-child{
margin-right: 0;
}
}
--count: 50;
--snap-size: 10rem;
--offset: 2;
.nav_centent{
width: auto;
display: flex;
flex-direction: column;
position: absolute;
right: 0;
padding-top: calc(var(--content-height) / 2);
padding-left: 10rem;
transition: all .2s;
}
.nav_centent_img{
max-width: calc(var(--snap-size) - 2rem);
height: calc(var(--snap-size) - 2rem);
object-fit: cover;
object-position: 50%,50%;
border-radius: calc(1rem*1.2);
cursor: pointer;
border-radius: 1rem;
overflow: hidden;
// padding: 1rem;
margin: 1rem;
flex-shrink: 0;
position: relative;
transition: all .1s;
&.active1{
// border: 4px solid rgb(148, 230, 255);
transform: scale(1.4) translateX(-30%);
z-index: 2;
}
&.active2{
// border: 4px solid rgb(216, 255, 172);
transform: scale(1.6) translateX(-60%);
z-index: 3;
}
&.active3{
// border: 4px solid rgb(148, 233, 183);
transform: scale(1.4) translateX(-30%);
z-index: 2;
}
}
}
.newScaleImage_content_left{
width: 40%;
padding: 0 var(--padding);
display: flex;
flex-direction: column;
.generate_item_title_left{
font-size: 2.4rem;
}
.newScaleImage_content_left_type{
padding: var(--padding) 0;
margin-bottom: var(--margin);
border-bottom: .2rem solid var(--border-color);
}
.newScaleImage_content_left_generate{
display: flex;
flex-direction: column;
flex: 1;
.content_left_generate_item{
overflow: hidden;
.content_left_generate_item_title{
display: flex;
justify-content: space-between;
align-items: center;
.generate_item_title_right{
.generate_item_title_right_img{
height: 8rem;
width: auto;
object-fit: contain;
}
}
}
}
.content_left_generate_describe{
display: flex;
flex-direction: column;
flex: 1;
margin-bottom: 0;
textarea{
flex: 1;
margin-top: var(--padding);
width: 100% !important;
height: 10rem !important;
border-radius: 4px;
border: .2rem solid var(--border-color);
font-size: 1.8rem;
padding: 1rem;
color: #575757;
outline: none; /* 清除默认焦点样式 */
}
textarea:focus{
border: .2rem solid var(--border-color);
outline: none; /* 清除默认焦点样式 */
}
}
}
}
}
.newScaleImage_detail{
display: flex;
margin-top: var(--margin);
.newScaleImage_detail_right,.newScaleImage_detail_left{
height: auto;
}
.newScaleImage_detail_left{
width: 60%;
}
.newScaleImage_detail_right{
width: 40%;
padding: 0 var(--padding);
.detail_right_item{
margin-bottom: var(--margin);
}
.detail_right_item:last-child{
margin-bottom: 0;
}
.detail_right_user{
display: flex;
.detail_right_user_head{
border-radius: 50%;
overflow: hidden;
img{
width: 10rem;
height: 10rem;
object-fit: cover;
}
}
.detail_right_user_content{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin-left: var(--margin);
.detail_right_user_content_intro,.detail_right_user_content_btn{
font-size: 1.6rem;
}
.detail_right_user_content_intro{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #6b6b6b;
}
.detail_right_user_content_btn{
border: .2rem solid var(--border-color);
}
}
}
.detail_right_operation{
display: flex;
justify-content: space-evenly;
}
.detail_right_look_operation{
display: flex;
justify-content: space-between;
>div{
display: flex;
align-items: center;
font-size: 2rem;
i{
display: flex;
font-size: 2rem;
}
span{
margin-left: calc(var(--padding) / 2);
}
}
}
.detail_right_auther{
.detail_right_auther_img{
width: 100%;
display: flex;
margin-top: var(--padding);
--auther_wh: 8rem;
.detail_right_auther_img_item{
width: var(--auther_wh);
height: var(--auther_wh);
flex-shrink: 1;
margin-right: calc(var(--padding) / 2);
// margin-right: var(--padding);
border-radius: var(--padding);
cursor: pointer;
overflow: hidden;
img{
height: 100%;
max-width: 100%;
object-fit: cover;
}
}
.detail_right_auther_img_end{
margin: 0;
line-height: var(--auther_wh);
text-align: center;
background: #e2e2e2;
font-size: 1.8rem;
font-weight: 600;
}
}
}
}
}
}
</style>

1
src/lang/cn.ts
View File

@@ -4,6 +4,7 @@ export default {
HOME:'首页',
LIBRARY:'收藏',
HISTORY:'历史',
WORKS:'作品广场',
bindEmail:'绑定邮箱',
logOff:'退出登录',
language:'中文',

5
src/lang/en.ts
View File

@@ -4,6 +4,7 @@ export default {
HOME:'HOME',
LIBRARY:'LIBRARY',
HISTORY:'HISTORY',
WORKS:'WORKS',
bindEmail:'bind email',
logOff:'log off',
language:'English',
@@ -162,8 +163,8 @@ export default {
Sketches:'Sketches',
Mannequins:'Mannequins',
model:'model',
jsContent1:'Are you sure to delete the picture?',
jsContent2:'Are you sure to delete the picture?',
jsContent1:'Are you sure to delete this picture?',
jsContent2:'Are you sure to delete this picture?',
jsContent3:'You can only upload Image file!',
jsContent4:'Image must smaller than 2MB!',
jsContent5:'This picture has been uploaded whether to continue uploading？',

4
src/router/index.ts
View File

@@ -51,6 +51,10 @@ const routes: Array<RouteRecordRaw> = [
path:'history',
name:'history',
component: _import_custom('HomeView/history.vue'),
},{
path:'works',
name:'works',
component: _import_custom('HomeView/Works.vue'),
},
]
},

3
src/tool/flexible.js
View File

@@ -7,12 +7,11 @@ let flexible = (designWidth, maxWidth,minWidth) =>{
var width = docEl.getBoundingClientRect().width;
var height = docEl.getBoundingClientRect().height;
maxWidth = maxWidth || 1920;
width > maxWidth && (width = maxWidth);
if(width/height>1.98) width = height * 1.98;
width > maxWidth && (width = maxWidth);
width < minWidth && (width = minWidth);
var rem = width * 10 / designWidth;
docEl.style.fontSize = rem+'px'
// if(height / width > .5)return
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
// if (docEl.firstElementChild) {

5
src/views/HomeMain.vue
View File

@@ -44,6 +44,9 @@
<router-link :class="['nav_item',$route.name === 'history' ? 'select_nav' : '', ]" :to="`/home/history`">
{{$t('Header.HISTORY')}}
</router-link>
<router-link :class="['nav_item',$route.name === 'works' ? 'select_nav' : '', ]" :to="`/home/works`">
{{$t('Header.WORKS')}}
</router-link>
</nav>
<div class="homeMain_right">
@@ -442,7 +445,7 @@ export default defineComponent({
cursor: pointer;
font-weight: 900;
position: relative;
&.nav_item:nth-child(3){
&.nav_item:last-child{
margin: 0;
}
&.nav_item::before {

4
src/views/HomeView/HomeView.vue
View File

@@ -385,9 +385,7 @@ export default defineComponent({
this.store.dispatch('get_clothingType')
//判断账号剩余时间是否太短
let isModalOne = JSON.parse(sessionStorage.getItem("isTimeOne") as any)
// let text = {
// str:'Because you are a trial user, some features may be limited,if you need to subscribe, please click -> <a href="https://code-create.com.hk/aida/" target="_blank"><i class="fi fi-br-link-alt"></i></a>',
// }
let text = {
}

341
src/views/HomeView/Works.vue Normal file
View File

@@ -0,0 +1,341 @@
<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" @click.stop="getImgScale(index)">
<div class="page_content_item_img">
<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">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" :style="{color:item.like?'red':'#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>
<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>
</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://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,
}
],
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;
align-content: flex-start;
.page_content_item{
display: flex;
flex-direction: column;
margin-right: 3rem;
margin-bottom: 3rem;
}
.page_content_item_text,.page_content_item_img{
display: flex;
}
.page_content_item_img{
width: 25rem;
height: 25rem;
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;
>svg{
width: 2rem;
height: 2rem;
margin-right: .5rem;
margin-left: 1rem;
}
}
}
}
}
</style>