换背景,印花single模式交互修改

This commit is contained in:
X1627315083
2024-07-02 14:15:11 +08:00
parent 8e694ce2c4
commit 2bc888eac9
12 changed files with 196 additions and 91 deletions

View File

@@ -17,6 +17,7 @@
height: item.style.imgHeihgt + 'px',
}"
/>
<div v-if="item.original == 1" class="falls_item_user_Original">{{$t('newScaleImage.Original')}}</div>
</div>
<!-- 文字 -->
@@ -298,6 +299,19 @@ export default defineComponent({
object-fit: cover;
transition: all .3s;
}
.falls_item_user_Original{
font-weight: 600;
font-size: 12px;
color: #39215b;
background: #c9a2ff;
padding: 0 5px;
border-radius: 4px;
margin-right: 2px;
position: absolute;
top: 10px;
right: 10px;
left: auto;
}
}
.falls_item_bottom{
padding: 0 10px;
@@ -334,8 +348,14 @@ export default defineComponent({
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
div{
display: flex;
flex-direction: column;
align-items: flex-start;
>div{
font-size: 16px;
display: flex;
align-items: center;
}
span{
font-size: 12px;

View File

@@ -54,6 +54,8 @@
</div> -->
<div class="detail_right_user_content">
<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div>
<div v-if="scaleImageData.original == 1" class="scaleImage_chunk_title_intro scaleImage_chunk_title_Original">{{$t('newScaleImage.Original')}}</div>
<div v-else class="scaleImage_chunk_title_intro">{{$t('newScaleImage.from')}}<span>@{{ scaleImageData.originalUserName }}/{{ scaleImageData.originalUserName }}</span></div>
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div>
<div class="scaleImage_chunk_btn">关注</div> -->
</div>
@@ -260,7 +262,7 @@ import fullScreenImg from '@/component/HomePage/fullScreenImg.vue'
export default defineComponent({
components:{fullScreenImg},
emits:['deletePorfolio'],
emits:['deletePorfolio','bbb'],
setup(props:any,{emit}) {
let {t} = useI18n()
//首先在setup中定义
@@ -735,6 +737,44 @@ export default defineComponent({
}
}
}
.detail_right_user{
display: flex;
width: 100%;
.detail_right_user_content{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
.scaleImage_chunk_title_Original{
color: #39215b;
background: #c9a2ff;
padding: 0 1rem;
border-radius: 4px;
font-weight: 600;
}
.scaleImage_chunk_title_intro{
span{
cursor: pointer;
color: #39215b;
text-decoration: underline;
}
}
}
.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{
}
}
.newScaleImage_left{
display: flex;
width: 60%;
@@ -1128,42 +1168,7 @@ export default defineComponent({
}
}
.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);