|
@@ -20,15 +20,23 @@
|
|
|
<view class="item-box" v-for="(item,index) of initList" :key='index'>
|
|
|
<view class="item-top">
|
|
|
<view class="top-left">
|
|
|
- <image class="img" :src="item.userDTO.avatar"></image>
|
|
|
+ <!-- <image class="img" :src="" v-if="item.userDTO.avata"></image> -->
|
|
|
+ <u-avatar :src="item.userDTO.avatar" size="45" />
|
|
|
</view>
|
|
|
<view class="top-right">
|
|
|
<view class="right-title">{{ item.userDTO.nickname }}</view>
|
|
|
- <view class="right-address">{{ item.distanceTime }} {{ item.location }}</view>
|
|
|
+ <view class="right-address">
|
|
|
+ <view class="marRight-20">
|
|
|
+ {{ item.distanceTime }}
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+
|
|
|
+ {{ item.location }}
|
|
|
+ </view> </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <u-line margin='10rpx 0'></u-line>
|
|
|
+ <!-- <u-line margin='10rpx 0'></u-line> -->
|
|
|
|
|
|
<view class="item-center">
|
|
|
<view class="center-text">
|
|
@@ -41,12 +49,13 @@
|
|
|
<view class="item-bottom">
|
|
|
<view class="bottom-item">
|
|
|
<u-icon :name="item.clickStatus == 0 ? 'heart' : 'heart-fill'" :size='iconSize'
|
|
|
- @click='handlerPraise(item)'></u-icon><span>{{ item.goodNum }}</span>
|
|
|
+ @click='handlerPraise(item)'></u-icon><view class="iconNUm">{{ item.goodNum }}</view>
|
|
|
</view>
|
|
|
<view class="bottom-item" @click='handlerRequireComment(item)'>
|
|
|
- <u-icon name="more-circle" :size='iconSize'></u-icon><span>{{ item.commentNum }}</span>
|
|
|
+ <u-icon name="more-circle" :size='iconSize'></u-icon><view class="iconNUm">{{ item.commentNum }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <u-line margin='-20rpx 0' v-if="index!=initList.length-1"></u-line>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
@@ -224,16 +233,16 @@
|
|
|
}
|
|
|
|
|
|
.center-box {
|
|
|
- margin: 30rpx auto 0;
|
|
|
- width: 95%;
|
|
|
+ // margin: 30rpx auto 0;
|
|
|
+
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
.item-box {
|
|
|
- padding: 20rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- box-shadow: 0 5rpx 15rpx 0 rgba(0, 0, 0, 0.2);
|
|
|
+ padding: 20rpx 20rpx 30rpx 20rpx;
|
|
|
+ // border-radius: 20rpx;
|
|
|
+ // box-sizing: border-box;
|
|
|
+ // margin-bottom: 20rpx;
|
|
|
+ // box-shadow: 0 5rpx 15rpx 0 rgba(0, 0, 0, 0.2);
|
|
|
background-color: #fff;
|
|
|
|
|
|
.item-top {
|
|
@@ -257,15 +266,21 @@
|
|
|
}
|
|
|
|
|
|
.right-address {
|
|
|
+ display: flex;
|
|
|
+ .marRight-20{
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
color: #959595;
|
|
|
- font-style: italic;
|
|
|
- font-weight: bold;
|
|
|
+ // font-style: italic;
|
|
|
+ // font-weight: bold;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.item-center {
|
|
|
+ margin-left: 100rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
.center-text {
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
@@ -275,23 +290,28 @@
|
|
|
display: grid;
|
|
|
grid-template-columns: 32% 32% 32%;
|
|
|
gap: 4% 1%;
|
|
|
-
|
|
|
+ margin-bottom: 10rpx;
|
|
|
.center-img {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
+ width: 186rpx;
|
|
|
+ height: 186rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.item-bottom {
|
|
|
display: flex;
|
|
|
- margin-top: 40rpx;
|
|
|
-
|
|
|
+ // margin-top: 10rpx;
|
|
|
+ margin-bottom: 56rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ justify-content: flex-end;
|
|
|
.bottom-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- width: 20%;
|
|
|
+ min-width: 100rpx;
|
|
|
+ .iconNUm{
|
|
|
+ margin-left: 7rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|