974 lines
30 KiB
Vue
974 lines
30 KiB
Vue
<template>
|
||
<a-modal
|
||
class="newScaleImage_modal generalModel"
|
||
v-model:visible="scaleImage"
|
||
:footer="null"
|
||
width="78%"
|
||
:maskClosable="false"
|
||
:centered="true"
|
||
:closable="false"
|
||
:mask="scaleImageMask"
|
||
:keyboard="false"
|
||
:destroyOnClose="true"
|
||
>
|
||
<div class="generalModel_btn">
|
||
<div class="generalModel_closeIcon" @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_left">
|
||
<div class="newScaleImage_content_right">
|
||
<div class="newScaleImage_content_right_img">
|
||
<div>
|
||
<img :src="scaleImageList[scaleImageIndex]">
|
||
<!-- <img :src="scaleImageData?.canvasUrl"> -->
|
||
</div>
|
||
</div>
|
||
<div class="nav_centent" v-mousewheel="{allLength:scaleImageData.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}" :src="item" :key="item.id">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="newScaleImage_right">
|
||
<div class="newScaleImage_right_content">
|
||
<div class="newScaleImage_right_content_type">
|
||
<div class="generate_item_title_left scaleImage_chunk_title">type：{{ scaleImageData?.portfolioType=='History'? 'collection' : 'generate' }}</div>
|
||
</div>
|
||
<div v-if="true" class="newScaleImage_right_content_collection">
|
||
<div class="scaleImage_chunk_item content_left_collection_detail">
|
||
<!-- <div class="scaleImage_chunk_title">设计模式:</div>
|
||
<div class="scaleImage_chunk_title_intro">
|
||
Overall
|
||
</div> -->
|
||
<div class="scaleImage_chunk_title">{{scaleImageData.portfolioName}}</div>
|
||
<div class="scaleImage_chunk_title_intro">{{scaleImageData.portfolioDes}}</div>
|
||
</div>
|
||
<div class="scaleImage_chunk_item content_left_collection_content">
|
||
<div class="scaleImage_chunk_title">Finished Products</div>
|
||
<div class="content_left_collection_content_list">
|
||
<img v-for="item in scaleImageData?.designPythonOutfitList" v-lazy="item.designUrl">
|
||
</div>
|
||
</div>
|
||
<div class="started_btn" @click="setChoose" :title="systemUser.value != 1?'请先登录或者升级为正式用户': scaleImageData.openSource == 0?'作者不允许二次创作':''" :class="{active:systemUser.value != 1?true:scaleImageData.openSource == 0}">二创</div>
|
||
</div>
|
||
<div v-else class="newScaleImage_right_content_generate">
|
||
<div 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 class="newScaleImage_right_detail">
|
||
<div class="scaleImage_chunk_item">
|
||
<div class="detail_right_user detail_left_right_item">
|
||
<!-- <div class="detail_right_user_head">
|
||
<img v-lazy="scaleImageData?.imgUrl">
|
||
</div> -->
|
||
<div class="detail_right_user_content">
|
||
<div class="scaleImage_chunk_title">名字</div>
|
||
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div>
|
||
<div class="scaleImage_chunk_btn">关注</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="detail_right_work_detail detail_left_right_item">
|
||
<!-- <div class="scaleImage_chunk_title">{{ scaleImageData?.portfolioName }}</div> -->
|
||
<!-- <div class="scaleImage_chunk_title_intro">{{ scaleImageData?.portfolioDes }}</div> -->
|
||
</div>
|
||
<div class="detail_right_date detail_left_right_item">
|
||
<div class="detail_right_date_setUp">
|
||
<div>创建时间</div>
|
||
<span>{{ scaleImageData.createDate }}</span>
|
||
</div>
|
||
<div class="detail_right_date_upData">
|
||
<div>更新时间</div>
|
||
<span>{{ scaleImageData.updateDate }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="detail_right_look_operation detail_left_right_item">
|
||
<!-- <div class="detail_left_right_item_click">
|
||
<svg :adminLike="!!true" 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 class="detail_left_right_item_click" @click="setPortfolioLike">
|
||
<i v-if="scaleImageData?.isLike == 1" :adminLike="!!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>{{scaleImageData.likeNum}}</span>
|
||
</div>
|
||
<!-- <div>
|
||
<i class="fi fi-sr-eye"></i>
|
||
<span>{{scaleImageData.likeNum}}</span>
|
||
</div> -->
|
||
<div>
|
||
<i class="fi fi-rr-comment-alt-dots"></i>
|
||
<span>{{commentList.length}}</span>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="detail_right_auther detail_left_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 v-lazy="'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'" 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 class="newScaleImage_right_comment scaleImage_chunk_item">
|
||
<div class="scaleImage_chunk_title">Comment</div>
|
||
<div v-if="commentList.length === 0" class="newScaleImage_right_comment_null">
|
||
<div class="scaleImage_chunk_title">No Comments</div>
|
||
<div class="scaleImage_chunk_title">You can be the first!</div>
|
||
</div>
|
||
<div v-else class="newScaleImage_right_comment_content">
|
||
<div class="detail_left_content_item" v-for="item in commentList" :key="item.id">
|
||
<!-- <div class="detail_left_content_item_img">
|
||
<img v-lazy="scaleImageData?.imgUrl">
|
||
</div> -->
|
||
<div class="detail_left_content_item_content">
|
||
<div class="scaleImage_chunk_title_intro">{{ item?.userName }}</div>
|
||
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div> -->
|
||
<div class="scaleImage_chunk_title" :class="[item.unfold?'':'active']">{{ item.comment }}</div>
|
||
<div class="scaleImage_chunk_title_intro" style="font-size: 1.2rem;" v>{{ item.createTimes }}</div>
|
||
<div class="detail_left_content_item_btn">
|
||
<div class="left_content_item_reply" @click.stop="setCommentReply(item,'parent')">
|
||
<i class="fi fi-rr-comment-alt-dots"></i>
|
||
回复
|
||
</div>
|
||
<!-- <div class="left_content_item_thumbs">
|
||
<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
|
||
<span>123</span>
|
||
</div> -->
|
||
<div v-show="true" class="left_content_item_unfold" @click="()=>item.unfold = !item.unfold">展开</div>
|
||
</div>
|
||
<div class="detail_left_content_item_replyContent" v-for="children in item.childCommentVOList" :key="children.id">
|
||
<div class="detail_left_content_item_img">
|
||
<!-- <img v-lazy="scaleImageData?.imgUrl"> -->
|
||
</div>
|
||
<div class="detail_left_content_item_content">
|
||
<div class="scaleImage_chunk_title">{{ children?.userName }}<span v-if="children?.replyTo" class="replyIcon"></span>{{ children?.replyTo }}</div>
|
||
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div> -->
|
||
<div class="scaleImage_chunk_title" :class="[item.unfold?'':'active']">{{ children.comment }}</div>
|
||
<div class="scaleImage_chunk_title_intro" style="font-size: 1.2rem;" v>{{ children.createTimes }}</div>
|
||
|
||
<div class="detail_left_content_item_btn">
|
||
<div class="left_content_item_reply" @click.stop="setCommentReply(children,'son')">
|
||
<i class="fi fi-rr-comment-alt-dots"></i>
|
||
回复
|
||
</div>
|
||
<!-- <div class="left_content_item_thumbs">
|
||
<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
|
||
<span>123</span>
|
||
</div> -->
|
||
<div v-show="false" class="left_content_item_unfold">展开</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="newScaleImage_right_comment_setComment" @click.stop="">
|
||
<input type="text" ref="commentInputFocus" v-model="commentText" :placeholder="commentInput">
|
||
<div class="detail_left_setComment_btn" @click="setComment">
|
||
<i class="fi fi-ss-paper-plane-top"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent,watch,getCurrentInstance, h, ref ,toRefs,computed,reactive,triggerRef, nextTick, onMounted} from "vue";
|
||
import { Https } from "@/tool/https";
|
||
// import { getCookie } from "@/tool/cookie";
|
||
// import domTurnImg from '@/tool/domTurnImg'
|
||
import { useStore } from "vuex";
|
||
import { useRouter } from 'vue-router'
|
||
import { downloadIamge,setPubDate } from "@/tool/util";
|
||
import { message } from "ant-design-vue";
|
||
|
||
export default defineComponent({
|
||
setup() {
|
||
//首先在setup中定义
|
||
const store = useStore();
|
||
const router = useRouter()
|
||
let scaleImage: any = ref(false);//弹窗
|
||
let scaleImageMask:any = ref(false)//弹窗遮罩
|
||
let imgData:any = reactive({
|
||
generateValue:'123123',
|
||
loadingShow:false,
|
||
scaleImageMarginTop:0,
|
||
commentReply:{
|
||
leve1Id:null,
|
||
leve2Id:null,
|
||
name:'',
|
||
},
|
||
scaleImageList:[],
|
||
scaleImageIndex:0,//当前图片索引
|
||
scaleImageData:{},//当前图片内容
|
||
getCommentData:{
|
||
portfolioId:0,
|
||
page:1,
|
||
size:10
|
||
},
|
||
commentText:'',
|
||
commentInput:'',//评论框提示词
|
||
commentList:[],
|
||
})
|
||
let systemUser = computed(()=>{
|
||
return store.state.UserHabit.systemUser
|
||
})
|
||
let commentInputFocus:any = ref()
|
||
let textarea: any = ref(null)
|
||
let setCopy = ()=>{
|
||
textarea.value.select()
|
||
document.execCommand("copy");
|
||
}
|
||
let init = (item:any)=>{
|
||
scaleImage.value = true
|
||
// let data = list[index]
|
||
getDetail(item,'')
|
||
document.addEventListener('click',removeCommentReply)
|
||
// let scaleImageList = this.store.state.UploadFilesModule.moodboard
|
||
}
|
||
let cancelDsign = ()=>{
|
||
scaleImage.value = false
|
||
imgData.scaleImageIndex = 0
|
||
imgData.scaleImageData = {}
|
||
imgData.commentText = ''
|
||
document.removeEventListener('click',removeCommentReply)
|
||
}
|
||
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
|
||
parent.likeFile(item,str)
|
||
}
|
||
|
||
// LikeFile(item:any,str:string){
|
||
// let parent:any = this.$parent
|
||
// parent.likeFile(item,str)
|
||
// },
|
||
let getDeatilData = {}
|
||
let getDetail = (value:any,str:string)=>{
|
||
imgData.loadingShow = true
|
||
let data = value
|
||
getDeatilData = value
|
||
Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
|
||
(rv: any) => {
|
||
imgData.loadingShow = false
|
||
imgData.scaleImageData = rv
|
||
let canvasUrl = [rv.canvasUrl]
|
||
var findUrl = rv.designPythonOutfitList.map((obj:any) => obj.designUrl);
|
||
imgData.scaleImageList = canvasUrl.concat(findUrl);
|
||
imgData.scaleImageIndex = 0
|
||
imgData.getCommentData.portfolioId = rv.id
|
||
if(str == 'zan'){
|
||
|
||
}else{
|
||
getCommentPage()
|
||
}
|
||
}).catch((res)=>{
|
||
imgData.loadingShow = false
|
||
}
|
||
)
|
||
}
|
||
|
||
let setChoose = () =>{
|
||
if(systemUser.value != 1){
|
||
return message.info('请先登录或者升级为正式用户')
|
||
}
|
||
if(imgData.scaleImageData.openSource == 0){
|
||
return message.info('作者不允许二次创作哦')
|
||
}
|
||
router.push({name:'homePage',params: {id:imgData.scaleImageData.userLikeGroupSourceId,type:'Works'}})
|
||
}
|
||
let setCommentReply = (value:any,str:any)=>{
|
||
imgData.commentReply.leve1Id = value.id
|
||
imgData.commentReply.leve2Id = null
|
||
if(str == 'son'){
|
||
imgData.commentReply.leve1Id = value.parentLevel1Id
|
||
imgData.commentReply.leve2Id = value.id
|
||
}
|
||
imgData.commentReply.name = value.userName
|
||
imgData.commentInput = `回复${imgData.commentReply.name}的评论`
|
||
commentInputFocus.value.focus()
|
||
}
|
||
let removeCommentReply = ()=>{
|
||
imgData.commentReply.leve1Id = null
|
||
imgData.commentReply.leve2Id = null
|
||
imgData.commentReply.name = ''
|
||
imgData.commentInput = '请输入评论内容'
|
||
}
|
||
let setComment = ()=>{
|
||
let data = {
|
||
"accountId": 0,
|
||
"comment": imgData.commentText,
|
||
"createTime": "",
|
||
"id": '',
|
||
"isDeleted": 0,
|
||
"parentLevel1Id": imgData.commentReply.leve1Id,
|
||
"parentLevel2Id": imgData.commentReply.leve2Id,
|
||
"portfolioId": imgData.scaleImageData.id,
|
||
}
|
||
Https.axiosPost(Https.httpUrls.portfolioComment, data)
|
||
.then((rv) => {
|
||
imgData.commentText = ''
|
||
getCommentPage()
|
||
})
|
||
.catch((rv) => {
|
||
});
|
||
}
|
||
let getCommentPage = ()=>{
|
||
let data = imgData.getCommentData
|
||
Https.axiosPost(Https.httpUrls.portfolioCommentPage,data).then(
|
||
(rv: any) => {
|
||
imgData.commentList = rv.content
|
||
imgData.commentList.forEach((item:any)=>{
|
||
item.createTimes = setPubDate(item.createTime)
|
||
if (item.childCommentVOList) {
|
||
item.childCommentVOList.forEach((obj:any)=>{
|
||
obj.createTimes = setPubDate(obj.createTime)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
).catch((res)=>{
|
||
}
|
||
)
|
||
}
|
||
let setPortfolioLike = ()=>{
|
||
|
||
let data = {id:imgData.scaleImageData.id}
|
||
let url
|
||
if(imgData.scaleImageData.isLike == 1){
|
||
url = Https.httpUrls.portfolioNoLike
|
||
}else{
|
||
url = Https.httpUrls.portfolioLike
|
||
}
|
||
Https.axiosGet(url, {params:data})
|
||
.then((rv) => {
|
||
getDetail(getDeatilData,'zan')
|
||
})
|
||
.catch((rv) => {
|
||
});
|
||
}
|
||
watch(()=>imgData.scaleImageIndex,
|
||
(newVal,oldVal)=>{
|
||
let dom:any = document.querySelector('.newScaleImage_left .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),
|
||
systemUser,
|
||
commentInputFocus,
|
||
textarea,
|
||
setCopy,
|
||
init,
|
||
cancelDsign,
|
||
download,
|
||
setScaleImageIndex,
|
||
LikeFile,
|
||
setChoose,
|
||
setCommentReply,
|
||
setComment,
|
||
setPortfolioLike,
|
||
};
|
||
},
|
||
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: {
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.newScaleImage_modal {
|
||
.ant-modal-body{
|
||
padding: 9rem;
|
||
}
|
||
.newScaleImage_page{
|
||
overflow-y: auto;
|
||
height: 100%;
|
||
display: flex;
|
||
&.newScaleImage_page::-webkit-scrollbar{display: none;}
|
||
}
|
||
|
||
--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;
|
||
}
|
||
.scaleImage_chunk_title_comment{
|
||
font-size: 1.6rem;
|
||
font-weight: 600;
|
||
color: #000;
|
||
max-height: 8.5rem;
|
||
overflow: hidden;
|
||
&.active{
|
||
max-height: max-content;
|
||
}
|
||
}
|
||
.scaleImage_chunk_title_intro{
|
||
font-size: 1.6rem;
|
||
font-weight: 300;
|
||
color: #535353;
|
||
// overflow: hidden;
|
||
// text-overflow: ellipsis;
|
||
// white-space: nowrap;
|
||
}
|
||
|
||
.newScaleImage_left{
|
||
display: flex;
|
||
width: 60%;
|
||
position: sticky;
|
||
top: 0;
|
||
.newScaleImage_content_right{
|
||
--content-height: 60rem;
|
||
display: flex;
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
// height: var(--content-height);
|
||
height: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
// overflow-y: auto;
|
||
|
||
.newScaleImage_content_right_img{
|
||
height: 100%;
|
||
width: 70%;
|
||
margin-left: auto;
|
||
// width: 100%;
|
||
display: flex;
|
||
// justify-content: center;
|
||
justify-content: right;
|
||
overflow-y: auto;
|
||
&.newScaleImage_content_right_img::-webkit-scrollbar{display: none;}
|
||
>div{
|
||
width: 100%;
|
||
height: auto;
|
||
img{
|
||
// width: auto;
|
||
max-width: 100%;
|
||
height: 100%;
|
||
// height: 100%;
|
||
object-fit: contain;
|
||
width: 100%;
|
||
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;
|
||
left: 0;
|
||
width: 30%;
|
||
}
|
||
.nav_centent_img{
|
||
max-width: calc(var(--snap-size) - 2rem);
|
||
height: calc(var(--snap-size) - 2rem);
|
||
width: calc(var(--snap-size) - 2rem);
|
||
object-fit: contain;
|
||
padding: .5rem 0;
|
||
background-color: #ffffff;
|
||
border: 1px solid #777777;
|
||
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_right{
|
||
width: 40%;
|
||
padding-left: var(--margin);
|
||
.newScaleImage_right_content{
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: var(--content-height);
|
||
.generate_item_title_left{
|
||
font-size: 2.4rem;
|
||
}
|
||
.newScaleImage_right_content_type{
|
||
padding: var(--padding) 0;
|
||
margin-bottom: var(--margin);
|
||
border-bottom: .2rem solid var(--border-color);
|
||
}
|
||
.newScaleImage_right_content_collection,.newScaleImage_right_content_generate{
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
}
|
||
.newScaleImage_right_content_collection{
|
||
&.newScaleImage_right_content_collection::-webkit-scrollbar{display: none;}
|
||
text-align: center;
|
||
// .content_left_collection_btn{
|
||
// display: flex;
|
||
// justify-content: space-around;
|
||
// }
|
||
.started_btn{
|
||
margin-bottom: var(--margin);
|
||
&.active{
|
||
cursor: no-drop;
|
||
}
|
||
}
|
||
.content_left_collection_detail{
|
||
height: calc(8rem + var(--padding) * 2);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
.scaleImage_chunk_title{
|
||
margin-right: 1rem;
|
||
}
|
||
}
|
||
.content_left_collection_content{
|
||
flex: 1;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
|
||
.content_left_collection_content_list{
|
||
overflow-x: auto;
|
||
display: flex;
|
||
flex: 1;
|
||
width: 100%;
|
||
align-items: center;
|
||
margin-top: var(--padding);
|
||
img{
|
||
height: 30rem;
|
||
width: auto;
|
||
margin-right: var(--margin);
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.newScaleImage_right_content_generate{
|
||
.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: 4rem;
|
||
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_right_detail,.newScaleImage_right_comment{
|
||
height: auto;
|
||
.detail_left_right_item{
|
||
margin-bottom: var(--margin);
|
||
}
|
||
.detail_left_right_item_click{
|
||
cursor: pointer;
|
||
i{
|
||
color: #9e9ea7;
|
||
}
|
||
}
|
||
.detail_left_right_item:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.newScaleImage_right_comment{
|
||
display: flex;
|
||
flex-direction: column;
|
||
>.scaleImage_chunk_title{
|
||
text-align: center;
|
||
}
|
||
.newScaleImage_right_comment_null,.newScaleImage_right_comment_content{
|
||
flex: 1;
|
||
}
|
||
.newScaleImage_right_comment_null{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.scaleImage_chunk_title{
|
||
font-size: 3rem;
|
||
}
|
||
|
||
}
|
||
.newScaleImage_right_comment_content{
|
||
max-height: 60rem;
|
||
overflow-y: auto;
|
||
.detail_left_content_item{
|
||
display: flex;
|
||
margin-bottom: var(--margin);
|
||
&.detail_left_content_item:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
.detail_left_content_item_img{
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
width: 5rem;
|
||
height: 5rem;
|
||
}
|
||
.detail_left_content_item_content{
|
||
flex: 1;
|
||
margin-left: 1rem;
|
||
width: calc(100% - 6rem - 1rem);
|
||
.replyIcon{
|
||
width: 0;
|
||
height: 0;
|
||
vertical-align: middle;
|
||
border: .5rem solid transparent;
|
||
border-left: 1rem solid #000;
|
||
border-right: none;
|
||
display: inline-block;
|
||
margin: 0 1rem;
|
||
}
|
||
>div{
|
||
margin-top: .4rem;
|
||
>span{
|
||
margin-right: .5rem;
|
||
color: rgba(122, 97, 220);
|
||
}
|
||
}
|
||
|
||
|
||
.detail_left_content_item_btn{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 1rem;
|
||
.left_content_item_reply,.left_content_item_thumbs,.left_content_item_unfold{
|
||
cursor: pointer;
|
||
}
|
||
.left_content_item_reply:hover{
|
||
color: #000;
|
||
}
|
||
.left_content_item_thumbs{
|
||
display: flex;
|
||
margin-left: 2rem;
|
||
i{
|
||
font-size: 2rem;
|
||
margin-right: 1rem;
|
||
display: flex;
|
||
}
|
||
}
|
||
.left_content_item_unfold{
|
||
margin-left: auto;
|
||
margin-right: 1rem;
|
||
}
|
||
}
|
||
.detail_left_content_item_replyContent{
|
||
margin-top: var(--padding);
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.newScaleImage_right_comment_setComment{
|
||
display: flex;
|
||
align-items: center;
|
||
height: 4rem;
|
||
justify-content: center;
|
||
margin-top: var(--padding);
|
||
input,.detail_left_setComment_btn{
|
||
border-radius: 1rem;
|
||
}
|
||
input{
|
||
padding-left: var(--padding);
|
||
height: 100%;
|
||
width: 50%;
|
||
font-size: 2rem;
|
||
margin-right: var(--padding);
|
||
border: .2rem solid var(--border-color);
|
||
}
|
||
.detail_left_setComment_btn{
|
||
cursor: pointer;
|
||
width: 4rem;
|
||
height: 4rem;
|
||
background: rgba(57, 33, 91);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
i{
|
||
color: #fff;
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.newScaleImage_right_detail{
|
||
.detail_right_user{
|
||
display: flex;
|
||
.detail_right_user_head{
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
margin-right: var(--margin);
|
||
img{
|
||
width: 10rem;
|
||
height: 10rem;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
.detail_right_user_head:hover{
|
||
|
||
}
|
||
.detail_right_user_content{
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
|
||
.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_work_detail{
|
||
.scaleImage_chunk_title_intro{
|
||
margin-top: calc(var(--padding) / 2);
|
||
height: auto
|
||
}
|
||
}
|
||
.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_date{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.detail_right_date_setUp,.detail_right_date_upData{
|
||
width: 45%;
|
||
div{
|
||
font-size: 2rem;
|
||
font-weight: 600;
|
||
}
|
||
span{
|
||
font-size: 1.8rem;
|
||
}
|
||
}
|
||
}
|
||
.detail_right_auther{
|
||
.detail_right_auther_img{
|
||
width: 100%;
|
||
display: flex;
|
||
margin-top: var(--padding);
|
||
--auther_wh: 8rem;
|
||
.detail_right_auther_img_item{
|
||
text-align: center;
|
||
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> |