message.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <!-- 消息 -->
  2. <template>
  3. <view class="wrap">
  4. <view class="message-list">
  5. <view class="message-item">
  6. <image src="../../../static/message-1.png" mode="" class="message-item-img"></image>
  7. <view class="menu-item-sidebar">
  8. <view class="menu-item-column">
  9. <view class="name">交易物流通知</view>
  10. <view class="msg">您的包裹到达新的站点</view>
  11. </view>
  12. <view class="menu-item-row">
  13. <view class="time">10:47</view>
  14. <view class="circle"></view>
  15. </view>
  16. </view>
  17. </view>
  18. <view class="message-item">
  19. <image src="../../../static/message-2.png" mode="" class="message-item-img"></image>
  20. <view class="menu-item-sidebar">
  21. <view class="menu-item-column">
  22. <view class="name">视频上新通知</view>
  23. <view class="msg">亚健康到底是什么</view>
  24. </view>
  25. <view class="menu-item-row">
  26. <view class="time">10:47</view>
  27. <view class="circle"></view>
  28. </view>
  29. </view>
  30. </view>
  31. <view class="message-item">
  32. <image src="../../../static/message-3.png" mode="" class="message-item-img"></image>
  33. <view class="menu-item-sidebar">
  34. <view class="menu-item-column">
  35. <view class="name">优惠活动</view>
  36. <view class="msg">双十一第二波预售开启</view>
  37. </view>
  38. <view class="menu-item-row">
  39. <view class="time">10:47</view>
  40. <view class="circle"></view>
  41. </view>
  42. </view>
  43. </view>
  44. <view class="message-item">
  45. <image src="../../../static/message-4.png" mode="" class="message-item-img"></image>
  46. <view class="menu-item-sidebar">
  47. <view class="menu-item-column">
  48. <view class="name">客服消息</view>
  49. <view class="msg">亲亲 求求你了 我也不想打扰你</view>
  50. </view>
  51. <view class="menu-item-row">
  52. <view class="time">昨天</view>
  53. </view>
  54. </view>
  55. </view>
  56. <!-- 无内容时显示 -->
  57. <!-- <view class="normal-box">
  58. <image src="../../../static/normal-6.png" mode="widthFix"></image>
  59. 暂无消息
  60. </view> -->
  61. </view>
  62. <view class="bottom">
  63. <view class="label">
  64. 本周热销
  65. </view>
  66. <view class="product-list">
  67. <view class="product-item">
  68. <view class="product-item-column">
  69. <image src="../../../static/img-4.png" class="product-item-column-img" mode="aspectFill">
  70. </image>
  71. <view class="product-item-column-bottom">
  72. <view class="product-item-column-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
  73. <view class="product-item-column-row-between">
  74. <view class="product-item-column-price">
  75. ¥394.00
  76. <text>¥34.00</text>
  77. </view>
  78. <button type="default" class="product-item-column-btn">
  79. <image src="../../../static/add-icon.png" mode=""></image>
  80. </button>
  81. </view>
  82. </view>
  83. </view>
  84. </view>
  85. <view class="product-item">
  86. <view class="product-item-column">
  87. <image src="../../../static/img-4.png" class="product-item-column-img" mode="aspectFill">
  88. </image>
  89. <view class="product-item-column-bottom">
  90. <view class="product-item-column-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
  91. <view class="product-item-column-row-between">
  92. <view class="product-item-column-price">
  93. ¥394.00
  94. <text>¥34.00</text>
  95. </view>
  96. <button type="default" class="product-item-column-btn">
  97. <image src="../../../static/add-icon.png" mode=""></image>
  98. </button>
  99. </view>
  100. </view>
  101. </view>
  102. </view>
  103. <view class="product-item">
  104. <view class="product-item-column">
  105. <image src="../../../static/img-4.png" class="product-item-column-img" mode="aspectFill">
  106. </image>
  107. <view class="product-item-column-bottom">
  108. <view class="product-item-column-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
  109. <view class="product-item-column-row-between">
  110. <view class="product-item-column-price">
  111. ¥394.00
  112. <text>¥34.00</text>
  113. </view>
  114. <button type="default" class="product-item-column-btn">
  115. <image src="../../../static/add-icon.png" mode=""></image>
  116. </button>
  117. </view>
  118. </view>
  119. </view>
  120. </view>
  121. <view class="product-item">
  122. <view class="product-item-column">
  123. <image src="../../../static/img-4.png" class="product-item-column-img" mode="aspectFill">
  124. </image>
  125. <view class="product-item-column-bottom">
  126. <view class="product-item-column-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
  127. <view class="product-item-column-row-between">
  128. <view class="product-item-column-price">
  129. ¥394.00
  130. <text>¥34.00</text>
  131. </view>
  132. <button type="default" class="product-item-column-btn">
  133. <image src="../../../static/add-icon.png" mode=""></image>
  134. </button>
  135. </view>
  136. </view>
  137. </view>
  138. </view>
  139. </view>
  140. </view>
  141. </view>
  142. </template>
  143. <script>
  144. export default {
  145. data() {
  146. return {
  147. }
  148. },
  149. methods: {
  150. }
  151. }
  152. </script>
  153. <style scoped lang="scss">
  154. @import "./message.css";
  155. </style>