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-05-16 09:41:16 +08:00
parent 4d86e782e6
commit 051b9e4f38
24 changed files with 1561 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

396
src/component/WorksPage/newScaleImage.vue
View File

@@ -12,34 +12,48 @@
:destroyOnClose="true"
>
<div class="newScaleImage_btn">
<div class="collection_closeIcon left" @click.stop="cancelDsign()">
<div class="collection_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="collection_closeIcon" @click.stop="download()">
<!-- <div class="collection_closeIcon" @click.stop="download()">
<i class="fi fi-rr-down-to-line"></i>
</div>
</div> -->
</div>
<div class="newScaleImage_page">
<div class="newScaleImage_content">
<div class="newScaleImage_left">
<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>
<div class="newScaleImage_right">
<div class="newScaleImage_right_content">
<div class="newScaleImage_right_content_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 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> -->
<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-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
</div>
</div>
<div class="started_btn">二创</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">
@@ -58,37 +72,44 @@
</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="newScaleImage_right_detail">
<div class="scaleImage_chunk_item">
<div class="detail_right_user detail_right_item">
<div class="detail_right_user detail_left_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="">
<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
</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_title_intro">个性签名</div>
<div class="scaleImage_chunk_btn">关注</div>
</div>
</div>
<div class="detail_right_operation detail_right_item">
<div>like</div>
<div>收藏</div>
<div class="detail_right_work_detail detail_left_right_item">
<div class="scaleImage_chunk_title">这是一套合成图</div>
<div class="scaleImage_chunk_title_intro">1111111111111111111111111111</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'}">
<div class="detail_right_date detail_left_right_item">
<div class="detail_right_date_setUp">
<div>创建时间</div>
<span>2024/11/1/1</span>
</div>
<div class="detail_right_date_upData">
<div>更新时间</div>
<span>2024/11/1/1</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">
<i v-if="true" :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>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>
@@ -101,11 +122,11 @@
<span>321</span>
</div>
</div>
<div class="detail_right_auther detail_right_item">
<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 src="https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center" alt="">
<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="">
@@ -123,6 +144,58 @@
</div>
</div>
</div>
<div class="newScaleImage_right_comment scaleImage_chunk_item">
<div class="scaleImage_chunk_title">Comment</div>
<div v-if="false" 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">
<div class="detail_left_content_item_img">
<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
</div>
<div class="detail_left_content_item_content">
<div class="scaleImage_chunk_title">名字</div>
<div class="scaleImage_chunk_title_intro">个性签名</div>
<div class="scaleImage_chunk_title_comment" :class="[true?'active':'']">这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
<div class="detail_left_content_item_btn">
<div class="left_content_item_reply">回复</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">展开</div>
</div>
<div class="detail_left_content_item_replyContent">
<div class="detail_left_content_item_img">
<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
</div>
<div class="detail_left_content_item_content">
<div class="scaleImage_chunk_title">名字</div>
<div class="scaleImage_chunk_title_intro">个性签名</div>
<div class="scaleImage_chunk_title_comment" :class="[true?'active':'']"><span class="scaleImage_chunk_title">@名字</span>这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
<div class="detail_left_content_item_btn">
<div class="left_content_item_reply">回复</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">
<input type="text" placeholder="回复Wxd的评论">
<div class="detail_left_setComment_btn">
<i class="fi fi-ss-paper-plane-top"></i>
</div>
</div>
</div>
</div>
</div>
</a-modal>
@@ -152,8 +225,6 @@ export default defineComponent({
document.execCommand("copy");
}
let init = (list:any,index:any,dialogueIndex:any)=>{
console.log(213123);
scaleImage.value = true
imgData.scaleImageList = list
imgData.scaleImageIndex = index
@@ -184,7 +255,7 @@ export default defineComponent({
// },
watch(()=>imgData.scaleImageIndex,
(newVal,oldVal)=>{
let dom:any = document.querySelector('.newScaleImage_content .nav_centent')
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`
@@ -298,6 +369,7 @@ export default defineComponent({
.newScaleImage_page{
overflow-y: auto;
height: 100%;
display: flex;
&.newScaleImage_page::-webkit-scrollbar{display: none;}
}
@@ -360,14 +432,34 @@ export default defineComponent({
font-weight: 600;
color: #000;
}
.newScaleImage_content{
width: 100%;
.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: 50rem;
--content-height: 60rem;
display: flex;
width: 60%;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
height: var(--content-height);
@@ -375,9 +467,11 @@ export default defineComponent({
overflow: hidden;
.newScaleImage_content_right_img{
height: 100%;
width: auto;
width: 60%;
overflow-x: auto;
display: flex;
justify-content: center;
img{
width: auto;
max-width: 100%;
@@ -405,7 +499,9 @@ export default defineComponent({
.nav_centent_img{
max-width: calc(var(--snap-size) - 2rem);
height: calc(var(--snap-size) - 2rem);
object-fit: cover;
object-fit: contain;
width: auto;
background-color: #fff;
object-position: 50%,50%;
border-radius: calc(1rem*1.2);
cursor: pointer;
@@ -433,23 +529,71 @@ export default defineComponent({
}
}
}
.newScaleImage_content_left{
width: 40%;
padding: 0 var(--padding);
}
.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_content_left_type{
.newScaleImage_right_content_type{
padding: var(--padding) 0;
margin-bottom: var(--margin);
border-bottom: .2rem solid var(--border-color);
}
.newScaleImage_content_left_generate{
.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);
}
.content_left_collection_detail{
height: calc(8rem + var(--padding) * 2);
display: flex;
align-items: center;
justify-content: flex-start;
.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;
@@ -478,7 +622,7 @@ export default defineComponent({
margin-top: var(--padding);
width: 100% !important;
height: 10rem !important;
border-radius: 4px;
border-radius: 4rem;
border: .2rem solid var(--border-color);
font-size: 1.8rem;
padding: 1rem;
@@ -493,26 +637,127 @@ export default defineComponent({
}
}
}
}
.newScaleImage_detail{
display: flex;
margin-top: var(--margin);
.newScaleImage_detail_right,.newScaleImage_detail_left{
.newScaleImage_right_detail,.newScaleImage_right_comment{
height: auto;
}
.newScaleImage_detail_left{
width: 60%;
}
.newScaleImage_detail_right{
width: 40%;
padding: 0 var(--padding);
.detail_right_item{
.detail_left_right_item{
margin-bottom: var(--margin);
}
.detail_right_item:last-child{
.detail_left_right_item_click{
cursor: pointer;
}
.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);
>div{
margin-top: .4rem;
>span{
margin-right: .5rem;
color: rgba(122, 97, 220);
}
}
.detail_left_content_item_btn{
display: flex;
align-items: center;
.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{
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{
@@ -523,6 +768,9 @@ export default defineComponent({
height: 10rem;
object-fit: cover;
}
}
.detail_right_user_head:hover{
}
.detail_right_user_content{
flex: 1;
@@ -546,9 +794,11 @@ export default defineComponent({
}
}
}
.detail_right_operation{
display: flex;
justify-content: space-evenly;
.detail_right_work_detail{
.scaleImage_chunk_title_intro{
margin-top: calc(var(--padding) / 2);
height: auto
}
}
.detail_right_look_operation{
display: flex;
@@ -566,6 +816,19 @@ export default defineComponent({
}
}
}
.detail_right_date{
display: flex;
justify-content: space-between;
.detail_right_date_setUp,.detail_right_date_upData{
div{
font-size: 2rem;
font-weight: 600;
}
span{
font-size: 1.8rem;
}
}
}
.detail_right_auther{
.detail_right_auther_img{
width: 100%;
@@ -573,6 +836,7 @@ export default defineComponent({
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;