talk
/
talk_appAmin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

重写话题图片样式

main
Connor 2024-06-08 22:18:45 +08:00
parent 4348db7898
commit fe564d159f
2 changed files with 81 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
pages/common/postview/index.vue
View File

@ -39,9 +39,41 @@
:src="mediaItem"></image> :src="mediaItem"></image>
</view> </view>
</block> </block>
<!--三张图片--> <!-- 三张图片 -->
<block v-if="postValue.media.length >= 3"> <block v-if="postValue.media.length == 3">
<u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album> <!-- <u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album> -->
<view class="flex justifyBetween">
<view class="img-style-3-1" v-for="(mediaItem, index3) in postValue.media.slice(0,3)" :key="index3">
<image :lazy-load="true"
@tap.stop="previewImage(mediaItem, postValue.media)" mode="aspectFill"
:src="mediaItem"></image>
</view>
</view>
</block>
<!--大于三张图片-列表-->
<block v-if="postValue.media.length > 3 && postViewType == 0">
<!-- <u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album> -->
<view class="flex justifyBetween">
<view class="img-style-3-2" v-for="(mediaItem, index3) in postValue.media.slice(0,3)" :key="index3">
<image :lazy-load="true"
@tap.stop="previewImage(mediaItem, postValue.media)" mode="aspectFill"
:src="mediaItem"></image>
<view v-if="index3 == 2" class="img-cover-style" @tap.stop="previewImage(mediaItem, postValue.media)">
<text>+{{ postValue.media.length - 3 }}</text>
</view>
</view>
</view>
</block>
<!--大于三张图片-详情-->
<block v-if="postValue.media.length >= 3 && postViewType == 1">
<!-- <u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album> -->
<view class="flex justifyBetween wrap">
<view class="img-style-3-1" v-for="(mediaItem, index3) in postValue.media" :key="index3">
<image :lazy-load="true"
@tap.stop="previewImage(mediaItem, postValue.media)" mode="aspectFill"
:src="mediaItem"></image>
</view>
</view>
</block> </block>
<!-- tab --> <!-- tab -->
<view class="center-content-post-tab" style="display: flex;"> <view class="center-content-post-tab" style="display: flex;">
@ -281,7 +313,7 @@
.u-album__row__wrapper {} .u-album__row__wrapper {}
.data-v-6fcabaad { .data-v-6fcabaad {
border-radius: 20rpx 20rpx 20rpx 20rpx !important; border-radius: 20rpx !important;
/* width: 200rpx !important; /* width: 200rpx !important;
height: 200rpx !important; */ height: 200rpx !important; */
} }
@ -381,7 +413,7 @@
width: 686rpx; width: 686rpx;
height: 370rpx; height: 370rpx;
border-radius: 18rpx 18rpx 18rpx 18rpx; border-radius: 20rpx;
background: #b3d7ff; background: #b3d7ff;
} }
@ -393,7 +425,46 @@
width: 100%; width: 100%;
height: 306rpx; height: 306rpx;
border-radius: 18rpx 18rpx 18rpx 18rpx; border-radius: 20rpx;
}
}
.img-style-3-1{
image {
// margin: 6rpx;
width: 222rpx;
height: 222rpx;
border-radius: 20rpx;
}
}
.img-style-3-2{
display: flex;
justify-content: space-between;
position: relative;
image {
// margin: 6rpx;
width: 222rpx;
height: 222rpx;
border-radius: 20rpx;
}
}
.img-cover-style{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 20rpx;
text{
color: #fff;
} }
} }

4
pages/index.vue
View File

@ -494,6 +494,10 @@ import PostView from "@/pages/common/postview/index.vue";
height: 200rpx !important; */ height: 200rpx !important; */
} }
.data-v-6fcabaad{
border-radius: 20rpx 20rpx 20rpx 20rpx !important;
}
.box-a { .box-a {
margin-top: 42rpx; margin-top: 42rpx;
display: flex; display: flex;