detail.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  1. <template>
  2. <view class="page">
  3. <view class="swiper-sec">
  4. <swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" class="swiper">
  5. <swiper-item v-for="(item, idx) in 3" :key="idx" class="swiper-item">
  6. <view class="img-wrap"><image src="/static/temp/pro.png" mode="aspectFill" class="img"></image></view>
  7. </swiper-item>
  8. </swiper>
  9. <view class="ic-wrap align-center justify-center"><image src="/static/love-full.png" mode="aspectFill" class="ic"></image></view>
  10. </view>
  11. <view class="header-sec">
  12. <view class="flex-col name-wrap">
  13. <view class="flex-col">
  14. <view class="flex-row">
  15. <text class="text_2 clamp">幸福西饼Rice盲盒</text>
  16. <view class="text-wrapper text_3 clamp">仅剩3份</view>
  17. </view>
  18. <image
  19. src="/static/mangd-rarrow.png"
  20. class="image_8 image_9"
  21. />
  22. </view>
  23. <view class="align-center group_10">
  24. <view class="stars align-center">
  25. <image
  26. src="/static/mang_star.png"
  27. class="image_10"
  28. v-for="(item,idx) in 3"
  29. :key="idx"
  30. />
  31. </view>
  32. <text class="text_4">随机搭配</text>
  33. </view>
  34. </view>
  35. <view class="border-wrap"></view>
  36. <view class="flex-row time-wrap">
  37. <text class="text_5">自提时间</text>
  38. <text class="text_6">今天15:00~22:00</text>
  39. </view>
  40. <view class="border-wrap"></view>
  41. <view class="flex-col loc-wrap">
  42. <view class="flex-row justify-between items-start">
  43. <view class="flex-row">
  44. <image
  45. src="/static/temp/pro.png"
  46. class="image_12"
  47. mode="aspectFill"
  48. />
  49. <view class="flex-col items-start group_15">
  50. <text class="text_7 clamp">幸福西饼万达店</text>
  51. <text class="text_8 clamp2">河东区万达广场1F东门入口</text>
  52. </view>
  53. </view>
  54. <view class="flex-row group_16">
  55. <view class="flex-col items-center image-wrapper">
  56. <image
  57. src="/static/mangd-loc.png"
  58. class="image_13"
  59. mode="aspectFill"
  60. />
  61. </view>
  62. <view class="section_5"><!--*--></view>
  63. <view class="flex-col items-center image-wrapper view_3">
  64. <image
  65. src="/static/mang-phone.png"
  66. class="image_14"
  67. mode="aspectFill"
  68. />
  69. </view>
  70. </view>
  71. </view>
  72. <view class="group_17">
  73. <text class="text_9">距离您</text>
  74. <text class="text_10">864m</text>
  75. </view>
  76. </view>
  77. </view>
  78. <view class="line-wrap"></view>
  79. <view class="flex-col items-start tips-wrap">
  80. <text class="title">盲盒内能得到什么</text>
  81. <text class="text_12">随机获得四拼蛋糕,奶油慕斯蛋糕二选一<br/>精致蛋挞、南瓜蛋糕二选一</text>
  82. </view>
  83. <view class="line-wrap"></view>
  84. <view class="review-sec">
  85. <view class="title-wrap align-center justify-between">
  86. <text class="text_14">商品评价</text>
  87. <view class="flex-row group_21">
  88. <text class="text_15">查看全部</text>
  89. <image
  90. src="/static/mangd-rarrow.png"
  91. class="image_8 image_15"
  92. mode="aspectFill"
  93. />
  94. </view>
  95. </view>
  96. <evaItem v-for="(item,idx) in 3" :key="idx" />
  97. </view>
  98. <view class="line-wrap"></view>
  99. <view class="rich-wrap">
  100. <rich-text :nodes="richTxt" class="rich"></rich-text>
  101. </view>
  102. <view class="btn-wrap">
  103. <view class="flex-row group_34">
  104. <view class="flex-col justify-center items-start section_7">
  105. <view class="group_35 align-center">
  106. <text class="text_26">¥</text>
  107. <text class="text_27 clamp">149.00</text>
  108. </view>
  109. </view>
  110. <view class="flex-col items-center text-wrapper_1"><text class="text_30">下单</text></view>
  111. </view>
  112. </view>
  113. <safe-area />
  114. </view>
  115. </template>
  116. <script>
  117. import evaItem from './components/eva-item.vue';
  118. export default {
  119. components: {
  120. evaItem,
  121. },
  122. data() {
  123. return {
  124. richTxt:'<p>你知道吗,盲go good</p>', // this.richTxt = this.$tools.replaceDetail(this.info.content || '');
  125. };
  126. },
  127. methods:{
  128. previewImg(idx){
  129. let url = [];
  130. this.$tools.previewImg(url)
  131. }
  132. }
  133. };
  134. </script>
  135. <style lang="scss">
  136. .swiper-sec{
  137. position: relative;
  138. .swiper{
  139. width: 750rpx;
  140. height: 750rpx;
  141. .img-wrap{
  142. position: relative;
  143. &::after{
  144. content: '';
  145. position: absolute;
  146. left: 0;
  147. top: 0;
  148. width: 100%;
  149. height: 100%;
  150. background-color: rgba(0,0,0,.4);
  151. }
  152. }
  153. .img{
  154. width: 750rpx;
  155. height: 750rpx;
  156. }
  157. }
  158. .ic-wrap{
  159. position: absolute;
  160. z-index: 2;
  161. right: 0;
  162. bottom: 0;
  163. width: 118rpx;
  164. height: 94rpx;
  165. .ic{
  166. width: 54rpx;
  167. height: 54rpx;
  168. }
  169. }
  170. }
  171. .name-wrap {
  172. padding: 34rpx 31rpx 37rpx;
  173. .text_2 {
  174. margin: 7rpx 0 6rpx;
  175. color: #333333;
  176. font-size: 32rpx;
  177. font-family: PingFang;
  178. letter-spacing: 1.28rpx;
  179. max-width: 500rpx;
  180. }
  181. .text-wrapper {
  182. margin-left: 10rpx;
  183. padding: 10rpx 10rpx 11rpx;
  184. background-color: #92b99c;
  185. border-radius: 10rpx;
  186. height: 44rpx;
  187. max-width: 160rpx;
  188. }
  189. .text_3 {
  190. margin-left: 10rpx;
  191. margin-right: 5rpx;
  192. color: #ffffff;
  193. font-size: 24rpx;
  194. font-family: PingFang;
  195. // max-width: 110rpx;
  196. text-align: center;
  197. }
  198. .image_8 {
  199. width: 11rpx;
  200. height: 18rpx;
  201. }
  202. .image_9 {
  203. margin-right: 9rpx;
  204. flex-shrink: 0;
  205. align-self: flex-end;
  206. }
  207. .group_10 {
  208. margin-top: 6rpx;
  209. }
  210. .image_10 {
  211. width: 28rpx;
  212. height: 28rpx;
  213. margin-right: 4rpx;
  214. }
  215. .text_4 {
  216. margin-left: 20rpx;
  217. color: #999999;
  218. font-size: 24rpx;
  219. font-family: PingFang;
  220. }
  221. }
  222. .border-wrap{
  223. margin: 0 auto;
  224. width: 710rpx;
  225. height: 2rpx;
  226. background-color: #eee;
  227. }
  228. .time-wrap {
  229. padding: 40rpx 33rpx 39rpx;
  230. .text_5 {
  231. color: #333333;
  232. font-size: 28rpx;
  233. font-family: PingFang;
  234. letter-spacing: 1.12rpx;
  235. }
  236. .text_6 {
  237. margin-left: 28rpx;
  238. margin-top: 3rpx;
  239. color: #999999;
  240. font-size: 24rpx;
  241. font-family: PingFang;
  242. }
  243. }
  244. .loc-wrap {
  245. padding: 40rpx 30rpx 41rpx;
  246. .image_12 {
  247. margin-top: 5rpx;
  248. width: 68rpx;
  249. height: 68rpx;
  250. border-radius: 68rpx;
  251. }
  252. .group_15 {
  253. margin-left: 16rpx;
  254. }
  255. .text_7 {
  256. color: #333333;
  257. font-size: 30rpx;
  258. font-family: PingFang;
  259. max-width: 420rpx;
  260. }
  261. .text_8 {
  262. margin-top: 20rpx;
  263. color: #999999;
  264. font-size: 24rpx;
  265. font-family: PingFang;
  266. max-width: 420rpx;
  267. line-height: 36rpx;
  268. }
  269. .group_16 {
  270. margin-right: 20rpx;
  271. margin-top: 37rpx;
  272. }
  273. .image-wrapper {
  274. align-self: center;
  275. width: 28rpx;
  276. }
  277. .image_13 {
  278. width: 28rpx;
  279. height: 33rpx;
  280. }
  281. .section_5 {
  282. margin-left: 41rpx;
  283. background-color: #0000001a;
  284. width: 1rpx;
  285. height: 65rpx;
  286. }
  287. .view_3 {
  288. margin-left: 40rpx;
  289. }
  290. .image_14 {
  291. width: 28rpx;
  292. height: 28rpx;
  293. }
  294. .group_17 {
  295. margin-left: 3rpx;
  296. align-self: flex-start;
  297. line-height: 23rpx;
  298. margin-top: 10rpx;
  299. }
  300. .text_9 {
  301. color: #999999;
  302. font-size: 24rpx;
  303. font-family: PingFang;
  304. line-height: 23rpx;
  305. }
  306. .text_10 {
  307. color: #92b99c;
  308. font-size: 24rpx;
  309. font-family: PingFang;
  310. line-height: 19rpx;
  311. }
  312. }
  313. .line-wrap {
  314. background-color: #0000000f;
  315. height: 17rpx;
  316. }
  317. .tips-wrap {
  318. padding: 40rpx 32rpx;
  319. .title {
  320. color: #333333;
  321. font-size: 30rpx;
  322. font-family: PingFang;
  323. }
  324. .text_12 {
  325. margin-left: 4rpx;
  326. margin-top: 20rpx;
  327. color: #999999;
  328. font-size: 24rpx;
  329. font-family: PingFang;
  330. line-height: 36rpx;
  331. }
  332. }
  333. .review-sec{
  334. padding-top: 35rpx;
  335. }
  336. .title-wrap {
  337. height: 37rpx;
  338. margin-bottom: 10rpx;
  339. padding: 0 30rpx;
  340. .text_14 {
  341. color: #333333;
  342. font-size: 28rpx;
  343. font-family: PingFang;
  344. letter-spacing: 1.12rpx;
  345. }
  346. .group_21 {
  347. margin-right: 9rpx;
  348. }
  349. .text_15 {
  350. color: #999999;
  351. font-size: 24rpx;
  352. font-family: PingFang;
  353. }
  354. .image_8 {
  355. width: 11rpx;
  356. height: 18rpx;
  357. }
  358. .image_15 {
  359. margin-left: 11rpx;
  360. margin-bottom: 3rpx;
  361. flex-shrink: 0;
  362. }
  363. }
  364. .rich-wrap{
  365. background-color: #fff;
  366. .rich {
  367. line-height: normal;
  368. }
  369. }
  370. .btn-wrap{
  371. // margin-top: 67rpx;
  372. padding: 0 20rpx;
  373. position: fixed;
  374. /* #ifdef H5 */
  375. bottom: calc(var(--window-bottom) / 2);
  376. /* #endif */
  377. /* #ifdef MP */
  378. bottom: calc(var(--safe-area-inset-bottom) / 2);
  379. /* #endif */
  380. z-index: 10;
  381. left: 20rpx;
  382. right: 20rpx;
  383. .section_7 {
  384. padding: 15rpx 30rpx 14rpx;
  385. flex: 1 1 auto;
  386. background-color: #333333;
  387. border-radius: 47rpx 0px 0px 47rpx;
  388. height: 94rpx;
  389. }
  390. .group_35 {
  391. line-height: 26rpx;
  392. }
  393. .text_26 {
  394. color: #ffffff;
  395. font-size: 24rpx;
  396. font-family: PingFang;
  397. }
  398. .text_27 {
  399. color: #ffffff;
  400. font-size: 34rpx;
  401. font-family: PingFang;
  402. max-width: 300rpx;
  403. letter-spacing: 1.36rpx;
  404. }
  405. .text-wrapper_1 {
  406. padding: 31rpx 0;
  407. flex-shrink: 0;
  408. background-color: #92b99c;
  409. border-radius: 0px 47rpx 47rpx 0px;
  410. width: 165rpx;
  411. height: 94rpx;
  412. }
  413. .text_30 {
  414. color: #ffffff;
  415. font-size: 34rpx;
  416. font-family: PingFang;
  417. line-height: 32rpx;
  418. letter-spacing: 1.36rpx;
  419. }
  420. }
  421. </style>