app-spike.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729
  1. <!--秒杀-->
  2. <template>
  3. <view class="app-spike">
  4. <view class="app-list-mode" v-if="listStyle === -1">
  5. <view class="app-item dir-left-nowrap main-between cross-center" :class="{'app-border': goodsStyle === 2}" v-for="(item, index) in list" :key="index">
  6. <app-jump-button form>
  7. <image class="app-icon" lazy-load="true" v-if="showGoodsTag" :src="goodsTagPicUrl"></image>
  8. <image class="app-image" lazy-load="true" :src="item.cover_pic" :mode="fill === 1 ? 'scaleToFill' : fill === 0 ? 'aspectFit' : ''"></image>
  9. <view class="app-content" :class="{'app-name-padding': !showGoodsName}">
  10. <text class="app-name" v-if="showGoodsName" :class="{'app-icon-margin' : !beforeStarting(item.start_time, item.end_time)}">
  11. <text class="app-spike-name">秒杀</text>
  12. {{item.name}}
  13. </text>
  14. <view class="app-icon-v dir-left-nowrap main-left cross-center" v-if="beforeStarting(item.start_time, item.end_time)">
  15. <icon class="app-icon-time"></icon>
  16. <template v-if="startOrEnd(item.start_time, item.end_time) === 's'">
  17. <text class="app-text">距开始</text>
  18. <app-timer color="#ff4544" fontSize="24" :startTime="item.start_time"></app-timer>
  19. </template>
  20. <template v-if="startOrEnd(item.start_time, item.end_time) === 'e'">
  21. <text class="app-text">距结束</text>
  22. <app-timer color="#ff4544" fontSize="24" :startTime="item.end_time"></app-timer>
  23. </template>
  24. </view>
  25. <view class="app-price-button dir-left-nowrap main-between cross-center">
  26. <view class="app-price dir-top-nowrap">
  27. <text class="app-new-price">¥{{item.price}}</text>
  28. <text class="app-original-price">¥{{item.original_price}}</text>
  29. </view>
  30. <button v-if="showBuyBtn" class="app-button"
  31. :style="{
  32. color: buyBtnStyle === 2 || buyBtnStyle === 4 ? buttonColor : 'white',
  33. borderColor: buttonColor,
  34. backgroundColor: buyBtnStyle === 1 || buyBtnStyle === 3 ? buttonColor : 'white',
  35. }"
  36. :class="{
  37. 'app-filling': buyBtnStyle === 1,
  38. 'app-line': buyBtnStyle === 2,
  39. 'app-fillet-fill': buyBtnStyle === 3,
  40. 'app-rounded-line': buyBtnStyle === 4
  41. }"
  42. >{{buyBtnText}}</button>
  43. </view>
  44. </view>
  45. </app-jump-button>
  46. </view>
  47. </view>
  48. <view class="app-one-per-line" v-if="listStyle === 1">
  49. <view class="app-item dir-top-nowrap"
  50. :class="{'app-border': goodsStyle === 2 || goodsStyle === 4}"
  51. v-for="(item, index) in list"
  52. :key="index"
  53. >
  54. <app-jump-button form arrangement="column">
  55. <image class="app-icon"
  56. lazy-load="true"
  57. v-if="showGoodsTag"
  58. :src="goodsTagPicUrl"
  59. ></image>
  60. <image class="app-image"
  61. :class="{'app-image-square' : goodsCoverProportion === '1-1', 'app-image-rectangle': goodsCoverProportion === '3-2'}"
  62. lazy-load="true"
  63. :src="item.cover_pic"
  64. :mode="fill === 1 ? 'scaleToFill' : fill === 0 ? 'aspectFit' : ''"
  65. ></image>
  66. <view class="app-spike-view dir-left-nowrap main-between cross-center" v-if="beforeStarting(item.start_time, item.end_time)"
  67. :class="{'app-view-square': goodsCoverProportion === '1-1', 'app-view-rectangle': goodsCoverProportion === '3-2'}"
  68. >
  69. <text class="app-spike-name">秒杀</text>
  70. <view class="app-right-spike">
  71. <template v-if="startOrEnd(item.start_time, item.end_time) === 's'">
  72. <text class="app-text">距开始</text>
  73. <app-timer color="white" fontSize="24" :startTime="item.start_time"></app-timer>
  74. </template>
  75. <template v-if="startOrEnd(item.start_time, item.end_time) === 'e'">
  76. <text class="app-text">距结束</text>
  77. <app-timer color="white" fontSize="24" :startTime="item.end_time"></app-timer>
  78. </template>
  79. </view>
  80. </view>
  81. <text class="app-name"
  82. v-if="showGoodsName"
  83. :class="{'app-text-align': goodsStyle === 3 || goodsStyle === 4 }"
  84. >{{item.name}}</text>
  85. <view class="app-price-button dir-left-nowrap cross-center"
  86. :class="{'main-between': goodsStyle === 1 || goodsStyle === 2, 'main-center': goodsStyle === 3 || goodsStyle === 4, 'app-margin-no-name': !showGoodsName}"
  87. >
  88. <view class="app-group-price dir-top-nowrap">
  89. <text class="app-new-price">¥{{item.price}}</text>
  90. <text class="app-original-price">¥{{item.original_price}}</text>
  91. </view>
  92. <button class="app-button"
  93. :style="{
  94. color: buyBtnStyle === 2 || buyBtnStyle === 4 ? buttonColor : 'white',
  95. borderColor: buttonColor,
  96. backgroundColor: buyBtnStyle === 1 || buyBtnStyle === 3 ? buttonColor : 'white',
  97. }"
  98. :class="{
  99. 'app-filling': buyBtnStyle === 1,
  100. 'app-line': buyBtnStyle === 2,
  101. 'app-fillet-fill': buyBtnStyle === 3,
  102. 'app-rounded-line': buyBtnStyle === 4
  103. }"
  104. v-if="showBuyBtn && goodsStyle !== 3 && goodsStyle !== 4"
  105. >{{buyBtnText}}</button>
  106. </view>
  107. </app-jump-button>
  108. </view>
  109. </view>
  110. <view class="app-two-per-line dir-left-wrap" v-if="listStyle === 2">
  111. <view v-for="(item, index) in list"
  112. :key="index"
  113. class="app-item dir-top-nowrap"
  114. :class="{'app-border': goodsStyle === 2 || goodsStyle === 4, 'app-item-margin': index%2 === 0}"
  115. >
  116. <app-jump-button form arrangement="column">
  117. <image class="app-icon"
  118. lazy-load="true"
  119. v-if="showGoodsTag"
  120. :src="goodsTagPicUrl"
  121. ></image>
  122. <image class="app-image"
  123. lazy-load="true"
  124. :src="item.cover_pic"
  125. :mode="fill === 1 ? 'scaleToFill' : fill === 0 ? 'aspectFit' : ''"
  126. ></image>
  127. <view class="app-spike-view dir-left-nowrap main-center cross-center" v-if="beforeStarting(item.start_time, item.end_time)">
  128. <template v-if="startOrEnd(item.start_time, item.end_time) === 's'">
  129. <text class="app-text">距开始</text>
  130. <app-timer color="white" fontSize="24" :startTime="item.start_time"></app-timer>
  131. </template>
  132. <template v-if="startOrEnd(item.start_time, item.end_time) === 'e'">
  133. <text class="app-text">距结束</text>
  134. <app-timer color="white" fontSize="24" :startTime="item.end_time"></app-timer>
  135. </template>
  136. </view>
  137. <text class="app-name"
  138. v-if="showGoodsName"
  139. :class="{'app-text-align': goodsStyle === 3 || goodsStyle === 4 }"
  140. >
  141. <text class="app-spike-name">秒杀</text>
  142. {{item.name}}
  143. </text>
  144. <view class="app-group-price-button dir-left-nowrap" :class="{'main-center': goodsStyle === 3 || goodsStyle === 4}">
  145. <view class="app-group-price dir-top-nowrap">
  146. <text class="app-new-price">¥{{item.price}}</text>
  147. <text class="app-original-price">¥{{item.original_price}}</text>
  148. </view>
  149. <button class="app-button"
  150. :style="{
  151. color: buyBtnStyle === 2 || buyBtnStyle === 4 ? buttonColor : 'white',
  152. borderColor: buttonColor,
  153. backgroundColor: buyBtnStyle === 1 || buyBtnStyle === 3 ? buttonColor : 'white',
  154. }"
  155. :class="{
  156. 'app-filling': buyBtnStyle === 1,
  157. 'app-line': buyBtnStyle === 2,
  158. 'app-fillet-fill': buyBtnStyle === 3,
  159. 'app-rounded-line': buyBtnStyle === 4
  160. }"
  161. v-if="showBuyBtn && goodsStyle !== 3 && goodsStyle !== 4">
  162. {{buyBtnText}}
  163. </button>
  164. </view>
  165. </app-jump-button>
  166. </view>
  167. </view>
  168. <app-load-text v-if="!request"></app-load-text>
  169. </view>
  170. </template>
  171. <script>
  172. import appLoadText from '../../basic-component/app-load-text/app-load-text.vue';
  173. import appTimer from '../../basic-component/app-timer/app-timer.vue';
  174. import { mapState } from 'vuex';
  175. export default {
  176. name: 'app-group-goods',
  177. components: {
  178. 'app-load-text': appLoadText,
  179. 'app-timer': appTimer,
  180. },
  181. computed: {
  182. ...mapState({
  183. height : state=>state.gConfig.systemInfo.windowHeight
  184. })
  185. },
  186. props: {
  187. buttonColor: {
  188. type: String,
  189. default: function() {
  190. return "blue";
  191. }
  192. },
  193. buyBtnStyle: {
  194. type: Number,
  195. default: function() {
  196. return 3;
  197. }
  198. },
  199. buyBtnText: {
  200. type: String,
  201. default: function() {
  202. return "马上秒";
  203. }
  204. },
  205. customizeGoodsTag: {
  206. type: Boolean,
  207. default: function() {
  208. return false;
  209. }
  210. },
  211. fill: {
  212. type: Number,
  213. default: function() {
  214. return 1;
  215. }
  216. },
  217. goodsCoverProportion: {
  218. type: String,
  219. default: function() {
  220. return "3-2";
  221. }
  222. },
  223. goodsStyle: {
  224. type: Number,
  225. default: function() {
  226. return 2;
  227. }
  228. },
  229. goodsTagPicUrl: {
  230. type: String,
  231. default: function() {
  232. return "http://v4test2.zjhejiang.com/plugins/diy/assets/images/goods-tag-xp.png";
  233. }
  234. },
  235. list: {
  236. type: Array,
  237. default: function() {
  238. return [
  239. ];
  240. }
  241. },
  242. listStyle: {
  243. type: Number,
  244. default: function() {
  245. return 1;
  246. }
  247. },
  248. showBuyBtn: {
  249. type: Boolean,
  250. default: function() {
  251. return true;
  252. }
  253. },
  254. showGoodsName: {
  255. type: Boolean,
  256. default: function() {
  257. return true;
  258. }
  259. },
  260. showGoodsTag: {
  261. type: Boolean,
  262. default: function() {
  263. return true;
  264. }
  265. },
  266. scrollTop: {
  267. type: Number,
  268. default: function() {
  269. return 0;
  270. }
  271. },
  272. value: {
  273. type: Boolean,
  274. default: function() {
  275. return true;
  276. }
  277. }
  278. },
  279. data() {
  280. return {
  281. request: this.value,
  282. }
  283. },
  284. methods: {
  285. autoEnd() {
  286. this.$lazyLoadingData('app-spike').then(response => {
  287. if (response[0].height +response[0].top < this.height) {
  288. this.request = false;
  289. this.$emit('input', this.request);
  290. }
  291. });
  292. },
  293. beforeStarting(start, end) {
  294. let now = new Date();
  295. let s = new Date(start.replace(/-/g, '/'));
  296. let e = new Date(end.replace(/-/g, '/'));
  297. if (now > s) {
  298. if (now < e) {
  299. return true;
  300. } else {
  301. return false
  302. }
  303. } else {
  304. return true;
  305. }
  306. },
  307. startOrEnd(start, end) {
  308. let now = new Date();
  309. let s = new Date(start.replace(/-/g, '/'));
  310. let e = new Date(end.replace(/-/g, '/'));
  311. if (now > s) {
  312. if (now < e) {
  313. return 'e';
  314. }
  315. } else {
  316. return 's';
  317. }
  318. }
  319. },
  320. watch: {
  321. scrollTop: {
  322. handler: function(n,o) {
  323. if (n > o && this.request) this.autoEnd();
  324. }
  325. }
  326. }
  327. }
  328. </script>
  329. <style scoped lang="scss">
  330. .app-spike {
  331. width: $screen-width;
  332. overflow: hidden;
  333. background-color: white;
  334. }
  335. .app-border {
  336. border-color: #e2e2e2 !important;
  337. }
  338. .app-list-mode {
  339. width: $screen-width;
  340. .app-item {
  341. margin-top: #{15rpx};
  342. width: #{702rpx};
  343. margin-left: #{24rpx};
  344. margin-right: #{24rpx};
  345. height: #{200rpx};
  346. border-bottom-right-radius: #{20rpx};
  347. border-top-right-radius: #{20rpx};
  348. position: relative;
  349. padding-right: #{24rpx};
  350. border: #{1rpx} solid transparent;
  351. .app-icon {
  352. position: absolute;
  353. top: 0;
  354. left: 0;
  355. width: #{65rpx};
  356. height: #{55rpx};
  357. }
  358. .app-image {
  359. width: #{199rpx};
  360. height: #{199rpx};
  361. margin-right: #{33rpx};
  362. }
  363. .app-name-padding {
  364. padding-top: #{81rpx};
  365. }
  366. .app-content {
  367. width: #{446rpx};
  368. height: #{200rpx};
  369. border-bottom-right-radius: #{20rpx};
  370. border-top-right-radius: #{20rpx};
  371. .app-name {
  372. word-break: break-all;
  373. text-overflow: ellipsis;
  374. display: -webkit-box;
  375. -webkit-box-orient: vertical;
  376. -webkit-line-clamp: 2;
  377. overflow: hidden;
  378. font-size: #{28rpx};
  379. color: #353535;
  380. /* #ifndef MP-WEIXIN */
  381. line-height: #{30rpx};
  382. /* #endif */
  383. /* #ifdef MP-WEIXIN */
  384. line-height: #{28rpx};
  385. /* #endif */
  386. height: #{58rpx};
  387. width: #{702-199-33rpx};
  388. margin-top: #{23rpx};
  389. .app-spike-name {
  390. display: inline-block;
  391. font-size: #{22rpx};
  392. width: #{64rpx};
  393. height: #{28rpx};
  394. line-height: #{28rpx};
  395. margin-right: #{8rpx};
  396. color: #ff4544;
  397. background-color: #feeeee;
  398. border-radius: #{14rpx};
  399. }
  400. }
  401. .app-icon-margin {
  402. margin-bottom: #{51rpx};
  403. }
  404. .app-icon-v {
  405. width: #{446rpx};
  406. height: #{35rpx};
  407. line-height: #{35rpx};
  408. margin-top: #{16rpx};
  409. .app-icon-time {
  410. width: #{24rpx};
  411. height: #{24rpx};
  412. background-size: 100% 100%;
  413. background-repeat: no-repeat;
  414. background-image: url("../../../static/image/icon/time.png");
  415. margin-right: #{12rpx};
  416. }
  417. .app-text {
  418. font-size: #{24rpx};
  419. color: #999999;
  420. margin-right: #{12rpx};
  421. }
  422. }
  423. .app-price-button {
  424. margin-top: #{3rpx};
  425. width: #{446rpx};
  426. height: #{48rpx};
  427. .app-price {
  428. height: #{68rpx};
  429. padding-top: #{10rpx};
  430. .app-original-price {
  431. text-decoration: line-through;
  432. font-size: #{22rpx};
  433. color: #999999;
  434. }
  435. .app-new-price {
  436. font-size: #{28rpx};
  437. color: #ff4544;
  438. }
  439. }
  440. .app-button {
  441. display: inline-block;
  442. height: #{48rpx};
  443. line-height: #{48rpx};
  444. padding: 0 #{20rpx};
  445. font-size: #{28rpx};
  446. margin: 0;
  447. border: #{1rpx} solid #ff4544;
  448. }
  449. .app-button:after {
  450. display: none;
  451. }
  452. .app-filling {
  453. background-color: #ff4544;
  454. color: white;
  455. }
  456. .app-line {
  457. background-color: white;
  458. color: #ff4544;
  459. }
  460. .app-fillet-fill {
  461. background-color: #ff4544;
  462. color: white;
  463. border-radius: #{20rpx};
  464. }
  465. .app-rounded-line {
  466. background-color: white;
  467. color: #ff4544;
  468. border-radius: #{20rpx};
  469. }
  470. }
  471. }
  472. }
  473. }
  474. .app-one-per-line {
  475. width: #{750rpx};
  476. padding: #{2rpx} #{24rpx};
  477. .app-item {
  478. width: #{702rpx};
  479. position: relative;
  480. border: #{1rpx} solid transparent;
  481. margin-top: #{24rpx};
  482. border-bottom-right-radius: #{10rpx};
  483. border-bottom-left-radius: #{10rpx};
  484. overflow: hidden;
  485. .app-icon {
  486. position: absolute;
  487. top: 0;
  488. left: 0;
  489. width: #{65rpx};
  490. height: #{55rpx};
  491. }
  492. .app-image {
  493. width: #{702rpx};
  494. }
  495. .app-spike-view {
  496. height: #{80rpx};
  497. width: #{702rpx};
  498. position: absolute;
  499. left: 50%;
  500. transform: translate(-50%, -100%);
  501. background: linear-gradient(left, #ff4544, #ff8b8b);
  502. color: white;
  503. padding: 0 #{24rpx};
  504. .app-spike-name {
  505. font-size: #{32rpx};
  506. }
  507. .app-right-spike {
  508. line-height: #{32rpx};
  509. .app-text {
  510. font-size: #{24rpx};
  511. margin-right: #{12rpx};
  512. }
  513. }
  514. }
  515. .app-view-square {
  516. top: #{702rpx};
  517. }
  518. .app-view-rectangle {
  519. top: #{280.8rpx};
  520. }
  521. .app-image-square {
  522. height: #{702rpx};
  523. }
  524. .app-image-rectangle {
  525. height: #{280.8rpx};
  526. }
  527. .app-name {
  528. word-break: break-all;
  529. text-overflow: ellipsis;
  530. display: -webkit-box;
  531. -webkit-box-orient: vertical;
  532. -webkit-line-clamp: 1;
  533. overflow: hidden;
  534. width: #{702rpx};
  535. padding: 0 #{24rpx};
  536. margin-top: #{28rpx};
  537. font-size: #{26rpx};
  538. color: #353535;
  539. }
  540. .app-text-align {
  541. text-align: center;
  542. }
  543. .app-price-button {
  544. width: #{702rpx};
  545. padding: 0 #{24rpx};
  546. height: #{48rpx};
  547. margin-top: #{36rpx};
  548. margin-bottom: #{24rpx};
  549. .app-group-price {
  550. .app-new-price {
  551. font-size: #{24rpx};
  552. color: #ff4544;
  553. }
  554. .app-original-price {
  555. font-size: #{22rpx};
  556. color: #999999;
  557. text-decoration: line-through;
  558. }
  559. }
  560. .app-margin-no-name {
  561. margin-top: #{92rpx};
  562. }
  563. .app-button {
  564. height: #{48rpx};
  565. padding: 0 #{20rpx};
  566. font-size: #{26rpx};
  567. line-height: #{48rpx};
  568. margin: 0;
  569. border-radius: 0;
  570. border: #{1rpx} solid #ff4544;
  571. }
  572. .app-button:after {
  573. display: none;
  574. }
  575. .app-filling {
  576. background-color: #ff4544;
  577. color: white;
  578. }
  579. .app-line {
  580. background-color: white;
  581. color: #ff4544;
  582. }
  583. .app-fillet-fill {
  584. background-color: #ff4544;
  585. color: white;
  586. border-radius: #{20rpx};
  587. }
  588. .app-rounded-line {
  589. background-color: white;
  590. color: #ff4544;
  591. border-radius: #{20rpx};
  592. }
  593. }
  594. }
  595. }
  596. .app-two-per-line {
  597. width: #{750rpx};
  598. padding: #{2rpx} #{24rpx};
  599. .app-item {
  600. width: #{346rpx};
  601. height: #{534rpx};
  602. border-bottom-left-radius: #{10rpx};
  603. border-bottom-right-radius: #{10rpx};
  604. border: #{1rpx} solid transparent;
  605. overflow: hidden;
  606. position: relative;
  607. margin-top: #{24rpx};
  608. margin-bottom: #{24rpx};
  609. padding-bottom: #{24rpx};
  610. .app-icon {
  611. position: absolute;
  612. top: 0;
  613. left: 0;
  614. width: #{65rpx};
  615. height: #{55rpx};
  616. }
  617. .app-image {
  618. width: #{346rpx};
  619. height: #{346rpx};
  620. }
  621. .app-spike-view {
  622. width: #{346rpx};
  623. height: #{44rpx};
  624. position: absolute;
  625. top: #{346rpx};
  626. left: 50%;
  627. transform: translate(-50%, -100%);
  628. background: linear-gradient(left, #ff4544, #ff8b8b);
  629. .app-text {
  630. font-size: #{24rpx};
  631. margin-right: #{6rpx};
  632. color: white;
  633. }
  634. /deep/ text {
  635. line-height: #{47rpx};
  636. }
  637. }
  638. .app-name {
  639. word-break: break-all;
  640. text-overflow: ellipsis;
  641. display: -webkit-box;
  642. -webkit-box-orient: vertical;
  643. -webkit-line-clamp: 2;
  644. overflow: hidden;
  645. margin-top: #{24rpx};
  646. padding: 0 #{24rpx};
  647. font-size: #{25rpx};
  648. width: #{346rpx};
  649. height: #{49rpx};
  650. line-height: #{25rpx};
  651. color: #353535;
  652. .app-spike-name {
  653. display: inline-block;
  654. color: #ff4544;
  655. font-size: #{20rpx};
  656. height: #{26rpx};
  657. line-height: #{26rpx};
  658. width: #{64rpx};
  659. text-align: center;
  660. background-color: #feeeee;
  661. margin-right: #{12rpx};
  662. }
  663. }
  664. .app-text-align {
  665. text-align: center;
  666. }
  667. .app-group-price-button {
  668. width: #{346rpx};
  669. padding: 0 #{24rpx};
  670. height: #{36+48rpx};
  671. position: relative;
  672. .app-group-price {
  673. height: #{36+48rpx};
  674. padding-top: #{36rpx};
  675. .app-new-price {
  676. font-size: #{22rpx};
  677. color: #ff4544;
  678. }
  679. .app-original-price {
  680. font-size: #{18rpx};
  681. color: #999999;
  682. text-decoration: line-through;
  683. }
  684. }
  685. .app-button {
  686. display: inline-block;
  687. margin: #{36rpx} 0 0 0;
  688. padding: 0 #{10rpx};
  689. min-width: #{120rpx};
  690. height: #{48rpx};
  691. font-size: #{26rpx};
  692. line-height: #{48rpx};
  693. border-radius: 0;
  694. border: #{1rpx} solid #ff4544;
  695. position: absolute;
  696. right: #{24rpx};
  697. }
  698. .app-button:after {
  699. display: none;
  700. }
  701. .app-filling {
  702. background-color: #ff4544;
  703. color: white;
  704. }
  705. .app-line {
  706. background-color: white;
  707. color: #ff4544;
  708. }
  709. .app-fillet-fill {
  710. background-color: #ff4544;
  711. color: white;
  712. border-radius: #{20rpx};
  713. }
  714. .app-rounded-line {
  715. background-color: white;
  716. color: #ff4544;
  717. border-radius: #{20rpx};
  718. }
  719. }
  720. }
  721. .app-item-margin {
  722. margin-right: #{10rpx};
  723. }
  724. }
  725. </style>