index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578
  1. <template>
  2. <view class="timeUp">
  3. <view class="top-box">
  4. <view class="position-box">
  5. <image class="back" src="../../static/back-btn.png" mode=""></image>
  6. <view class="topbar">
  7. 限时秒杀
  8. </view>
  9. </view>
  10. <zs-search bgColor="#fff"></zs-search>
  11. </view>
  12. <view class="tabs">
  13. <view class="all" :class="[tab == 0?'active':'']" @click="handleTab(0)">
  14. 全部
  15. </view>
  16. <scroll-view class="tab-box" enable-flex scroll-with-animation :scroll-x="true" @scroll="scroll+'rpx'"
  17. :scroll-left="scrollLeft">
  18. <view class="tab" :class="[tab == 1?'active':'']" @click="handleTab(1)">
  19. 加油充电
  20. </view>
  21. <view class="tab" :class="[tab == 2?'active':'']" @click="handleTab(2)">
  22. 酒店民宿
  23. </view>
  24. <view class="tab" :class="[tab == 3?'active':'']" @click="handleTab(3)">
  25. 景区门票
  26. </view>
  27. <view class="tab" :class="[tab == 4?'active':'']" @click="handleTab(4)">
  28. 餐饮美食
  29. </view>
  30. <view class="tab" :class="[tab == 5?'active':'']" @click="handleTab(5)">
  31. 超市购物
  32. </view>
  33. <view class="tab" :class="[tab == 6?'active':'']" @click="handleTab(6)">
  34. 健身运动
  35. </view>
  36. <view class="tab" :class="[tab == 7?'active':'']" @click="handleTab(7)">
  37. 医疗健康
  38. </view>
  39. </scroll-view>
  40. </view>
  41. <view class="seckill-box">
  42. <view class="count-down-box">
  43. <u-count-down
  44. :time="30 * 60 * 60 * 1000"
  45. format="HH:mm:ss"
  46. autoStart
  47. millisecond
  48. @change="onChange"
  49. >
  50. <view class="time">
  51. <view class="title">
  52. 倒计时
  53. </view>
  54. <view class="time__custom">
  55. <text class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
  56. </view>
  57. <text class="time__doc">:</text>
  58. <view class="time__custom">
  59. <text class="time__custom__item">{{ timeData.minutes }}</text>
  60. </view>
  61. <text class="time__doc">:</text>
  62. <view class="time__custom">
  63. <text class="time__custom__item">{{ timeData.seconds }}</text>
  64. </view>
  65. </view>
  66. </u-count-down>
  67. </view>
  68. <view class="item-box">
  69. <view class="item">
  70. <image class="icon"
  71. src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/4jGNrpGpdaPX0cc0b8f9dacd8eb606a97fd3a72cbf64.png/1.png"
  72. mode=""></image>
  73. <view class="title">
  74. 中国国际能源永
  75. 温加油站加油...
  76. </view>
  77. <view class="progress-box">
  78. <view class="progress">
  79. <view class="value" :style="{width:'100rpx'}">
  80. </view>
  81. <image class="progress-icon" src="../../static/progress-icon.png" mode=""></image>
  82. </view>
  83. <view class="label">
  84. 60%
  85. </view>
  86. </view>
  87. <view class="btn">
  88. 马上抢
  89. </view>
  90. </view>
  91. <view class="item">
  92. <image class="icon"
  93. src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/YfpEwXi8CoD5c0ed0850ecd9d45219412493577e2e00.png/1.png"
  94. mode=""></image>
  95. <view class="title">
  96. 中国国际能源永
  97. 温加油站加油...
  98. </view>
  99. <view class="progress-box" :style="{'--num':tab}">
  100. <view class="progress">
  101. <view class="value" :style="{width:'100rpx'}">
  102. </view>
  103. <image class="progress-icon" src="../../static/progress-icon.png" mode=""></image>
  104. </view>
  105. <view class="label">
  106. 60%
  107. </view>
  108. </view>
  109. <view class="btn">
  110. 马上抢
  111. </view>
  112. </view>
  113. <view class="item">
  114. <image class="icon"
  115. src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/CgcLtkGfeVi9c82fc7ccde4bc89041c8d16a3c378d14.png/1.png"
  116. mode=""></image>
  117. <view class="title">
  118. 中国国际能源永
  119. 温加油站加油...
  120. </view>
  121. <view class="progress-box" :style="{'--num':tab}">
  122. <view class="progress">
  123. <view class="value" :style="{width:'100rpx'}">
  124. </view>
  125. <image class="progress-icon" src="../../static/progress-icon.png" mode=""></image>
  126. </view>
  127. <view class="label">
  128. 60%
  129. </view>
  130. </view>
  131. <view class="btn">
  132. 马上抢
  133. </view>
  134. </view>
  135. </view>
  136. </view>
  137. <!-- 列表 -->
  138. <zs-list class="list-box" mt="0" @load="loadMore" :status="status">
  139. <view class="item" v-for="(item,index) in list" :key="index">
  140. <image class="icon" :src="item.icon" mode=""></image>
  141. <view class="info-box">
  142. <view class="title">
  143. {{item.title}}
  144. </view>
  145. <view class="progress-box">
  146. <view class="progress">
  147. <view class="value" :style="{width:'100rpx'}">
  148. </view>
  149. <image class="progress-icon" src="../../static/progress-icon.png" mode=""></image>
  150. </view>
  151. <view class="label">
  152. 60%
  153. </view>
  154. </view>
  155. <view class="desc">
  156. <view class="label">
  157. </view>
  158. <view class="value">
  159. {{item.desc}}
  160. </view>
  161. </view>
  162. <view class="btn">
  163. 马上抢
  164. </view>
  165. </view>
  166. </view>
  167. </zs-list>
  168. </view>
  169. </template>
  170. <script>
  171. export default {
  172. data() {
  173. return {
  174. tab: 0,
  175. scrollLeft: 0,
  176. timeData: {},//倒计时
  177. status:'more',
  178. list:[
  179. {
  180. icon:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/ZYTLVzkmgxB10ac3feb8df96b57b8c6c22c9b9ff8cbf.png/1.png',
  181. title:'麓客岛,动物农场两大一小超值亲子套票',
  182. desc:'惊喜一元购'
  183. },
  184. {
  185. icon:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/IRTbUvGb8Q7b004f5f2781831619d71a99d182c67be2.png/1.png',
  186. title:'佳晨信网红便利店零食超市部分商品1折',
  187. desc:'低至1折'
  188. },
  189. {
  190. icon:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/ktFFVE2qnrl187c6f3a8e2a27729d869a8c0606dffc1.png/1.png',
  191. title:'安心到家家政服务,打扫清洁低至5折',
  192. desc:'满200享7折'
  193. },
  194. ]
  195. }
  196. },
  197. methods: {
  198. onChange(e) {
  199. this.timeData = e
  200. },
  201. handleTab(val) {
  202. this.tab = val
  203. if (val > 3) {
  204. this.scrollLeft = (val - 2) * 60
  205. } else if (val <= 3 && this.scrollLeft > 100) {
  206. this.scrollLeft = 0
  207. }
  208. },
  209. loadMore() {},
  210. },
  211. }
  212. </script>
  213. <style lang="scss" scoped>
  214. .timeUp {
  215. background: #f5f5f5;
  216. .top-box {
  217. height: 358rpx;
  218. box-sizing: border-box;
  219. padding-top: 180rpx;
  220. background: linear-gradient(180deg, #FF4C3A 0%, #FFFFFF 100%);
  221. position: relative;
  222. }
  223. .position-box {
  224. position: absolute;
  225. width: 100%;
  226. top: 90rpx;
  227. left: 0;
  228. z-index: 2;
  229. display: flex;
  230. align-items: center;
  231. justify-content: center;
  232. .back {
  233. position: absolute;
  234. top: 10rpx;
  235. left: 30rpx;
  236. color: #fff;
  237. display: flex;
  238. align-items: center;
  239. font-size: 24rpx;
  240. width: 40rpx;
  241. height: 40rpx;
  242. filter: invert(1);
  243. }
  244. .topbar {
  245. font-size: 36rpx;
  246. color: #FFFFFF;
  247. text-align: center;
  248. font-weight: bold;
  249. font-family: DOUYUFont;
  250. }
  251. }
  252. .tabs {
  253. display: flex;
  254. align-items: center;
  255. font-size: 28rpx;
  256. color: #888888;
  257. line-height: 100rpx;
  258. margin-top: -90rpx;
  259. background: #FFFFFF;
  260. border-radius: 16rpx;
  261. background: #fff;
  262. .all {
  263. padding: 0 30rpx;
  264. white-space: nowrap;
  265. width: 110rpx;
  266. box-sizing: border-box;
  267. text-align: center;
  268. background: #FFFFFF;
  269. color: #333333;
  270. position: relative;
  271. z-index: 2;
  272. }
  273. .tab {
  274. padding: 0 20rpx;
  275. line-height: 100rpx;
  276. background: #FFFFFF;
  277. }
  278. .tab-box {
  279. width: 640rpx;
  280. display: flex;
  281. flex-wrap: nowrap;
  282. white-space: nowrap;
  283. height: 100rpx;
  284. }
  285. .active {
  286. font-weight: bold;
  287. color: #333333;
  288. position: relative;
  289. &::before {
  290. content: '';
  291. width: 33rpx;
  292. height: 11rpx;
  293. position: absolute;
  294. bottom: 15rpx;
  295. left: 50%;
  296. transform: translateX(-50%);
  297. background: url('../../static/active.png') no-repeat;
  298. background-size: 100% 100%;
  299. }
  300. }
  301. }
  302. .seckill-box {
  303. height: 460rpx;
  304. margin: 0 30rpx;
  305. box-sizing: border-box;
  306. padding: 88rpx 24rpx 0;
  307. background: url('http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/5LRJ5PeXOEzE424542612bd586ae0f9e10936b41062c.png/1.png') no-repeat;
  308. background-size: 100% 100%;
  309. position: relative;
  310. .count-down-box{
  311. position: absolute;
  312. top: 16rpx;
  313. right: 24rpx;
  314. .title{
  315. color: #fff;
  316. margin-right: 10rpx;
  317. font-size: 24rpx;
  318. }
  319. .time {
  320. display: flex;
  321. align-items: center;
  322. &__custom {
  323. margin-top: 4px;
  324. width: 22px;
  325. height: 22px;
  326. background-color: #fff;
  327. border-radius: 4px;
  328. /* #ifndef APP-NVUE */
  329. display: flex;
  330. /* #endif */
  331. justify-content: center;
  332. align-items: center;
  333. &__item {
  334. color: #FF4C3A;
  335. font-size: 12px;
  336. text-align: center;
  337. }
  338. }
  339. &__doc {
  340. color: #fff;
  341. padding: 0px 4px;
  342. }
  343. &__item {
  344. color: #606266;
  345. font-size: 15px;
  346. margin-right: 4px;
  347. }
  348. }
  349. }
  350. .item-box {
  351. display: flex;
  352. justify-content: space-between;
  353. .item {
  354. width: 200rpx;
  355. height: 360rpx;
  356. border-radius: 16rpx;
  357. background: #fff;
  358. .icon {
  359. width: 200rpx;
  360. height: 178rpx;
  361. }
  362. .title {
  363. margin:10rpx 15rpx;
  364. font-size: 22rpx;
  365. color: #222222;
  366. overflow: hidden;
  367. text-overflow: ellipsis;
  368. -webkit-line-clamp: 2;
  369. display: -webkit-box;
  370. -webkit-box-orient: vertical;
  371. }
  372. .progress-box {
  373. margin: 15rpx;
  374. height: 24rpx;
  375. background: #FFEFC5;
  376. border: 1rpx solid #FFA820;
  377. border-radius: 12rpx;
  378. position: relative;
  379. display: flex;
  380. align-items: center;
  381. .progress {
  382. position: absolute;
  383. left: 0%;
  384. top: 0;
  385. display: flex;
  386. flex: 1;
  387. width: 170rpx;
  388. .value {
  389. background: linear-gradient(180deg, #FFBC1E 0%, #FBD97D 100%);
  390. height: 24rpx;
  391. }
  392. .progress-icon{
  393. width: 16.8rpx;
  394. height: 28.4rpx;
  395. transform: translateX(-50%);
  396. }
  397. }
  398. .label{
  399. position: absolute;
  400. top: 50%;
  401. right: 20rpx;
  402. display: block;
  403. transform: translateY(-50%);
  404. content: var(--num);
  405. font-size: 16rpx;
  406. color: #222;
  407. }
  408. }
  409. .btn {
  410. width: 104rpx;
  411. line-height: 36rpx;
  412. text-align: center;
  413. font-size: 24rpx;
  414. font-weight: bold;
  415. color: #fff;
  416. background: #FF4C3A;
  417. border-radius: 18rpx;
  418. margin: 0 auto;
  419. }
  420. }
  421. }
  422. }
  423. .list-box {
  424. .item{
  425. background: #FFFFFF;
  426. border-radius: 12rpx;
  427. display: flex;
  428. padding: 20rpx;
  429. margin: 30rpx 30rpx 0;
  430. .icon{
  431. width: 220rpx;
  432. height: 220rpx;
  433. }
  434. .info-box{
  435. flex: 1;
  436. padding-left: 20rpx;
  437. position: relative;
  438. .title{
  439. font-size: 28rpx;
  440. color: #222222;
  441. overflow: hidden;
  442. text-overflow: ellipsis;
  443. -webkit-line-clamp: 2;
  444. display: -webkit-box;
  445. -webkit-box-orient: vertical;
  446. }
  447. .progress-box {
  448. margin: 15rpx;
  449. height: 24rpx;
  450. background: #FFEFC5;
  451. border: 1rpx solid #FFA820;
  452. border-radius: 12rpx;
  453. position: relative;
  454. display: flex;
  455. align-items: center;
  456. .progress {
  457. position: absolute;
  458. left: 0%;
  459. top: 0;
  460. display: flex;
  461. flex: 1;
  462. width: 170rpx;
  463. .value {
  464. background: linear-gradient(180deg, #FFBC1E 0%, #FBD97D 100%);
  465. height: 24rpx;
  466. }
  467. .progress-icon{
  468. width: 16.8rpx;
  469. height: 28.4rpx;
  470. transform: translateX(-50%);
  471. }
  472. }
  473. .label{
  474. position: absolute;
  475. top: 50%;
  476. right: 20rpx;
  477. display: block;
  478. transform: translateY(-50%);
  479. content: var(--num);
  480. font-size: 16rpx;
  481. color: #222;
  482. }
  483. }
  484. .desc{
  485. display: flex;
  486. align-items: center;
  487. height: 44rpx;
  488. line-height: 44rpx;
  489. margin-top: 24rpx;
  490. font-size: 24rpx;
  491. .label{
  492. background: linear-gradient(180deg, #FF4A39 0%, #FC8B45 100%);
  493. color: #fff;
  494. width: 44rpx;
  495. text-align: center;
  496. border-radius: 8rpx 0 0 8rpx;
  497. }
  498. .value{
  499. color: #FE5B47;
  500. background: rgba(254,91,71,0.1);
  501. padding: 0 15rpx;
  502. border-radius: 0 8rpx 8rpx 0;
  503. }
  504. }
  505. .btn{
  506. width: 140rpx;
  507. height: 60rpx;
  508. line-height: 60rpx;
  509. text-align: center;
  510. background: #FF4C3A;
  511. font-weight: bold;
  512. color: #FFFFFF;
  513. font-size: 28rpx;
  514. border-radius: 30rpx 30rpx 30rpx 30rpx;
  515. position: absolute;
  516. right: 0;
  517. bottom: 0;
  518. }
  519. }
  520. }
  521. }
  522. }
  523. </style>