aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4d86e782e6f844eb80b3bd0a245ea7a2b8c720a6
aida_front/src/component/WorksPage/newScaleImage.vue

603 lines
18 KiB
Vue
Raw Normal View History

fix
2024-05-09 13:34:15 +08:00
<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>
Reference in New Issue Copy Permalink