eva-item.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <template>
  2. <view class="eva-wrap flex-col">
  3. <view class="flex-row justify-between">
  4. <view class="flex-row">
  5. <image
  6. src="/static/temp/pro.png"
  7. class="image_16 image_22"
  8. mode="aspectFill"
  9. />
  10. <view class="flex-col items-start group_30">
  11. <text class="text_20 clamp">甜品大师姐</text>
  12. <text class="text_21">2022.07.13 10:56</text>
  13. </view>
  14. </view>
  15. <view class="stars align-center">
  16. <image
  17. src="/static/mang_star.png"
  18. class="image_10"
  19. v-for="(item,idx) in 5"
  20. :key="idx"
  21. />
  22. </view>
  23. </view>
  24. <view class="flex-col group_31">
  25. <view class="group_32">
  26. <text class="text_22">这是我吃过的最好吃的一款,强烈推荐,口感细腻,想象不到的美味。太好吃了。</text>
  27. </view>
  28. <view class="imgs-wrap align-center">
  29. <image
  30. src="/static/temp/pro.png"
  31. class="image_19 image_24"
  32. mode="aspectFill"
  33. v-for="(item,idx) in 6" :key="idx"
  34. @tap="previewImg(idx)"
  35. />
  36. </view>
  37. <view class="mark clamp">#四拼奶油慕斯蛋糕</view>
  38. </view>
  39. </view>
  40. </template>
  41. <script>
  42. export default {
  43. data() {
  44. return {};
  45. },
  46. props: {
  47. //请求数据
  48. info:{
  49. type:Object,
  50. default:()=>({})
  51. },
  52. },
  53. methods: {
  54. previewImg(idx){
  55. let url = [];
  56. this.$tools.previewImg(url)
  57. }
  58. }
  59. };
  60. </script>
  61. <style lang="scss" scoped>
  62. .eva-wrap {
  63. padding: 37rpx 33rpx 40rpx;
  64. .image_16 {
  65. width: 54rpx;
  66. height: 54rpx;
  67. border-radius: 54rpx;
  68. }
  69. .image_22 {
  70. margin-top: 4rpx;
  71. }
  72. .group_30 {
  73. margin-left: 20rpx;
  74. }
  75. .text_20 {
  76. color: #333333;
  77. font-size: 30rpx;
  78. font-family: PingFang;
  79. letter-spacing: 1.2rpx;
  80. max-width: 300rpx;
  81. }
  82. .text_21 {
  83. margin-top: 15rpx;
  84. color: #999999;
  85. font-size: 20rpx;
  86. font-family: PingFang;
  87. }
  88. .image_10 {
  89. width: 28rpx;
  90. height: 28rpx;
  91. margin-left: 4rpx;
  92. }
  93. .group_31 {
  94. margin: 13.5rpx 24rpx 0 7rpx;
  95. }
  96. .group_32 {
  97. line-height: 37rpx;
  98. }
  99. .text_22 {
  100. color: #333333;
  101. font-size: 26rpx;
  102. font-family: PingFang;
  103. line-height: 40rpx;
  104. letter-spacing: 1.04rpx;
  105. }
  106. .imgs-wrap{
  107. flex-wrap: wrap;
  108. .image_19 {
  109. width: 180rpx;
  110. height: 180rpx;
  111. margin-right: 20rpx;
  112. border-radius: 10rpx;
  113. margin-bottom: 20rpx;
  114. // &:nth-child(4n){
  115. // margin-right: 0;
  116. // }
  117. }
  118. .image_24 {
  119. margin-top: 16.5rpx;
  120. align-self: flex-start;
  121. }
  122. }
  123. .mark{
  124. max-width: 400rpx;
  125. font-size: 26rpx;
  126. font-family: PingFang SC;
  127. font-weight: 500;
  128. color: #92B99C;
  129. }
  130. }
  131. </style>