<template> <view class="eva-wrap flex-col"> <view class="flex-row justify-between"> <view class="flex-row"> <image src="/static/temp/pro.png" class="image_16 image_22" mode="aspectFill" /> <view class="flex-col items-start group_30"> <text class="text_20 clamp">甜品大师姐</text> <text class="text_21">2022.07.13 10:56</text> </view> </view> <view class="stars align-center"> <image src="/static/mang_star.png" class="image_10" v-for="(item,idx) in 5" :key="idx" /> </view> </view> <view class="flex-col group_31"> <view class="group_32"> <text class="text_22">这是我吃过的最好吃的一款,强烈推荐,口感细腻,想象不到的美味。太好吃了。</text> </view> <view class="imgs-wrap align-center"> <image src="/static/temp/pro.png" class="image_19 image_24" mode="aspectFill" v-for="(item,idx) in 6" :key="idx" @tap="previewImg(idx)" /> </view> </view> </view> </template> <script> export default { data() { return {}; }, props: { //请求数据 info:{ type:Object, default:()=>({}) }, }, methods: { previewImg(idx){ let url = []; this.$tools.previewImg(url) } } }; </script> <style lang="scss" scoped> .eva-wrap { padding: 37rpx 33rpx 40rpx; .image_16 { width: 54rpx; height: 54rpx; border-radius: 54rpx; } .image_22 { margin-top: 4rpx; } .group_30 { margin-left: 20rpx; } .text_20 { color: #333333; font-size: 30rpx; font-family: PingFang; letter-spacing: 1.2rpx; max-width: 300rpx; } .text_21 { margin-top: 15rpx; color: #999999; font-size: 20rpx; font-family: PingFang; } .image_10 { width: 28rpx; height: 28rpx; margin-left: 4rpx; } .group_31 { margin: 13.5rpx 24rpx 0 7rpx; } .group_32 { line-height: 37rpx; } .text_22 { color: #333333; font-size: 26rpx; font-family: PingFang; line-height: 40rpx; letter-spacing: 1.04rpx; } .imgs-wrap{ flex-wrap: wrap; .image_19 { width: 180rpx; height: 180rpx; margin-right: 20rpx; border-radius: 10rpx; margin-bottom: 20rpx; // &:nth-child(4n){ // margin-right: 0; // } } .image_24 { margin-top: 16.5rpx; align-self: flex-start; } } } </style>