Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
金诚优选前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 Commits
1 Branch
0 Tags
5.0 MiB
Tree: d5e8be2635
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'd5e8be2635'
${ noResults }
ec.uniapp-master/pages/discover/discoverdetails.vue

236 lines
7.5 KiB
Raw Normal View History

店铺详情页/发现页/个人主页/发现详情页
4 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <template>
  2. <view>
  3. <lf-nav :spreadOut="true" :showIcon="true" title="详情"></lf-nav>
  4. <view class="lf-p-32">
  5. <view class="lf-flex">
  6. <view class="tag-father">
  7. <image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="head-img"></image>
  8. <view class="head-tag">V</view>
  9. </view>
  10. <view class="lf-flex-column lf-m-l-20">
  11. <view class="lf-font-32 lf-color-black lf-font-bold">最新FUEJFEI</view>
  12. <view class="lf-font-24 lf-color-777 lf-m-t-15">08-28 18:39</view>
  13. </view>
  14. </view>
  15. <view class="lf-font-28 lf-color-333 lf-m-t-20">
  16. 在售商品在售商品在售商品在售商品在售商品在售商品在售商品在售
  17. </view>
  18. <view class="lf-flex-wrap lf-m-t-20">
  19. <image v-for="item in 9" class="qzone-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
  20. </view>
  21. <view class="lf-m-t-30 lf-row-between lf-p-l-50 lf-p-r-50">
  22. <view class="lf-row-center">
  23. <text class="lf-iconfont icon-shoucang"></text>
  24. <text class="lf-font-24 lf-color-777 lf-m-l-10">379</text>
  25. </view>
  26. <view class="lf-row-center">
  27. <text class="lf-iconfont icon-fabu"></text>
  28. <text class="lf-font-24 lf-color-777 lf-m-l-10">3579</text>
  29. </view>
  30. <view class="lf-row-center">
  31. <text class="lf-iconfont icon-fenxiang"></text>
  32. <text class="lf-font-24 lf-color-777 lf-m-l-10">63</text>
  33. </view>
  34. </view>
  35. </view>
  36. <self-line/>
  37. <!-- 评论 -->
  38. <view class="comment">
  39. <view class="lf-color-555 lf-font-24">共 2条评论</view>
  40. <!-- 评论开始 -->
  41. <view>
  42. <view class="lf-m-t-20">
  43. <view class="lf-flex">
  44. <view>
  45. <image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
  46. </view>
  47. <view class="lf-flex-column lf-m-l-20">
  48. <view class="lf-color-999 lf-font-24">金城优选哈哈</view>
  49. <view>
  50. <view class="lf-color-black lf-line-2" style="max-width:550rpx;">评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text></view>
  51. </view>
  52. </view>
  53. <view class="lf-m-l-32" style="position: absolute;right:33rpx;">
  54. <view>
  55. <text class="lf-iconfont icon-shoucang"></text>
  56. </view>
  57. <view class="lf-color-555 lf-font-24">10</view>
  58. </view>
  59. </view>
  60. </view>
  61. <view class="comment-replay">
  62. <view class="lf-flex">
  63. <view>
  64. <image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
  65. </view>
  66. <view class="lf-flex-column lf-m-l-20">
  67. <view class="lf-color-999 lf-font-24">优选嘿嘿</view>
  68. <view>
  69. <view class="lf-color-black lf-line-2 lf-row-center" style="max-width: 446rpx;">评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text></view>
  70. </view>
  71. </view>
  72. <view class="lf-m-l-32" style="position: absolute;right:33rpx;">
  73. <view>
  74. <text class="lf-iconfont icon-shoucang"></text>
  75. </view>
  76. <view class="lf-color-555 lf-font-24">10</view>
  77. </view>
  78. </view>
  79. <view class="lf-flex">
  80. <view class="lf-flex lf-m-t-30">
  81. <view>
  82. <image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
  83. </view>
  84. <view class="lf-flex-column lf-m-l-20">
  85. <view class="lf-color-999 lf-font-24">金城优选哈哈</view>
  86. <view class="lf-row-center" style="max-width: 446rpx;">
  87. <text class="lf-color-333 lf-m-r-10">回复</text>
  88. <text class="lf-font-24 lf-color-999">优选嘿嘿:</text>
  89. <text class="lf-font-26 lf-color-black lf-m-l-10">哈哈哈哈哈</text>
  90. <text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text>
  91. </view>
  92. </view>
  93. </view>
  94. <view class="lf-m-t-30" style="position: absolute;right:33rpx;">
  95. <view>
  96. <text class="lf-iconfont icon-shoucang"></text>
  97. </view>
  98. <view class="lf-color-555 lf-font-24">10</view>
  99. </view>
  100. </view>
  101. </view>
  102. </view>
  103. <!-- 评论结束 -->
  104. <view>
  105. <view class="lf-m-t-20">
  106. <view class="lf-flex">
  107. <view>
  108. <image class="comment-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
  109. </view>
  110. <view class="lf-flex-column lf-m-l-20">
  111. <view class="lf-color-999 lf-font-24">金城优选哈哈</view>
  112. <view>
  113. <view class="lf-color-black lf-line-2" style="max-width:550rpx;">评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论<text class="lf-color-999 lf-font-24 lf-m-l-10">08-30</text></view>
  114. </view>
  115. </view>
  116. <view class="lf-m-l-32" style="position: absolute;right:33rpx;">
  117. <view>
  118. <text class="lf-iconfont icon-shoucang"></text>
  119. </view>
  120. <view class="lf-color-555 lf-font-24">10</view>
  121. </view>
  122. </view>
  123. </view>
  124. </view>
  125. </view>
  126. <!-- 底部tab -->
  127. <view class="comment-tab">
  128. <view>
  129. <input class="rom-search" type="text" placeholder="说点什么" />
  130. </view>
  131. <view class="lf-row-center">
  132. <view class="lf-row-center lf-m-r-35">
  133. <text class="lf-iconfont icon-shoucang"></text>
  134. <text class="lf-m-l-10 lf-font-24 lf-color-black">379</text>
  135. </view>
  136. <view class="lf-row-center lf-m-r-35">
  137. <text class="lf-iconfont icon-fenxiang"></text>
  138. <text class="lf-m-l-10 lf-font-24 lf-color-black">3579</text>
  139. </view>
  140. <view class="lf-row-center lf-m-r-35">
  141. <text class="lf-iconfont icon-fabu"></text>
  142. <text class="lf-m-l-10 lf-font-24 lf-color-black">379</text>
  143. </view>
  144. </view>
  145. </view>
  146. </view>
  147. </template>
  149. <script>
  150. </script>
  152. <style scoped lang="scss">
  153. .tag-father {
  154. position: relative;
  155. }
  156. .head-tag {
  157. color: white;
  158. display: flex;
  159. align-items: center;
  160. justify-content: center;
  161. text-align: center;
  162. font-size: 24rpx;
  163. width: 36rpx;
  164. height: 36rpx;
  165. border-radius: 50%;
  166. background-color: #15716E;
  167. border: 1rpx solid #FFFFFF;
  168. position: absolute;
  169. left: 66rpx;
  170. top: 70rpx;
  171. z-index: 99;
  172. }
  173. /deep/.input-placeholder{
  174. color: #aaa;
  175. font-size: 28rpx;
  176. }
  177. .rom-search {
  178. width: 279rpx;
  179. height: 70rpx;
  180. background: #F4F8F8;
  181. border-radius: 35rpx;
  182. padding-left: 30rpx;
  183. font-size: 28rpx;
  184. }
  185. .comment-tab {
  186. padding: 0 0 0 32rpx;
  187. display: flex;
  188. justify-content: space-between;
  189. height: 100rpx;
  190. align-items: center;
  191. width: 100%;
  192. border-top: 1rpx solid rgba(0, 0, 0, 0.1);
  193. position: fixed;
  194. bottom: 0;
  195. z-index: 99;
  196. background-color: white;
  197. }
  198. .comment-replay {
  199. margin-left: 96rpx;
  200. margin-top: 28rpx;
  201. }
  202. .comment-img {
  203. width: 75rpx;
  204. height: 75rpx;
  205. border-radius: 50%;
  206. }
  207. .comment{
  208. width: 100%;
  209. height: max-content;
  210. background-color: white;
  211. border-radius: 5rpx;
  212. box-sizing: border-box;
  213. padding: 32rpx;
  214. font-size: 28rpx;
  215. color: #777777;
  216. padding-bottom: 120rpx;
  217. }
  218. .qzone-img {
  219. position: relative;
  220. width: 220rpx;
  221. height: 220rpx;
  222. border-radius: 10rpx;
  223. margin-right: 12rpx;
  224. &:nth-child(3n) {
  225. margin-right: 0;
  226. }
  227. &:nth-child(n + 4) {
  228. margin-top: 12rpx;
  229. }
  230. }
  231. .head-img {
  232. width: 100rpx;
  233. height: 100rpx;
  234. border-radius: 50%;
  235. }
  236. </style>