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>
</view>
</block>
<!--三张图片-->
<block v-if="postValue.media.length >= 3">
<u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album>
<!-- 三张图片 -->
<block v-if="postValue.media.length == 3">
<!-- <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>
<!-- tab -->
<view class="center-content-post-tab" style="display: flex;">
@ -281,7 +313,7 @@
.u-album__row__wrapper {}
.data-v-6fcabaad {
border-radius: 20rpx 20rpx 20rpx 20rpx !important;
border-radius: 20rpx !important;
/* width: 200rpx !important;
height: 200rpx !important; */
}
@ -381,7 +413,7 @@
width: 686rpx;
height: 370rpx;
border-radius: 18rpx 18rpx 18rpx 18rpx;
border-radius: 20rpx;
background: #b3d7ff;
}
@ -393,10 +425,49 @@
width: 100%;
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; */
}
.data-v-6fcabaad{
border-radius: 20rpx 20rpx 20rpx 20rpx !important;
}
.box-a {
margin-top: 42rpx;
display: flex;