index.wxss 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739
  1. @charset "UTF-8";
  2. /**
  3. * 这里是uni-app内置的常用样式变量
  4. *
  5. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  6. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  7. *
  8. */
  9. /**
  10. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  11. *
  12. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  13. */
  14. /* 颜色变量 */
  15. /* 字体大小变量 */
  16. /* 行为相关颜色 */
  17. /* 文字基本颜色 */
  18. /* 背景颜色 */
  19. /* 边框颜色 */
  20. /* 尺寸变量 */
  21. /* 文字尺寸 */
  22. /* 图片尺寸 */
  23. /* Border Radius */
  24. /* 水平间距 */
  25. /* 垂直间距 */
  26. /* 透明度 */
  27. /* 文章场景相关 */
  28. page {
  29. background: #f7f7f7;
  30. height: auto;
  31. }
  32. .cart-content {
  33. position: relative;
  34. }
  35. .container-cart-main.none {
  36. display: none;
  37. }
  38. .container-cart-main.show {
  39. display: block;
  40. }
  41. .cart-content.empty.none {
  42. display: none;
  43. }
  44. .cart-content.empty.show {
  45. display: block;
  46. }
  47. .container-cart.show {
  48. display: block;
  49. }
  50. .container-cart.none {
  51. display: none;
  52. }
  53. .empty-container.none {
  54. display: none;
  55. }
  56. .empty-container.show {
  57. display: flex;
  58. }
  59. .foot-check-delbtn {
  60. width: 100%;
  61. height: 80rpx;
  62. position: fixed;
  63. top: 0;
  64. left: 0;
  65. box-sizing: border-box;
  66. padding: 15rpx 24rpx;
  67. background-color: #F7F7F7;
  68. z-index: 990;
  69. }
  70. .foot-check-delbtn .foot-text {
  71. font-size: 26rpx;
  72. height: 50rpx;
  73. line-height: 50rpx;
  74. color: #666666;
  75. float: left;
  76. padding-left: 10rpx;
  77. }
  78. .foot-check-delbtn .foot-text text {
  79. margin: 0 6rpx;
  80. }
  81. .foot-check-delbtn .delBtn {
  82. width: 100rpx;
  83. display: inline-block;
  84. padding: 0 15rpx;
  85. font-size: 26rpx;
  86. height: 50rpx;
  87. line-height: 50rpx;
  88. border-radius: 30rpx;
  89. background: #FFFFFF;
  90. border: 1px solid #ff457b;
  91. color: #ff457b;
  92. float: right;
  93. text-align: center;
  94. }
  95. .foot-check-delbtn .delBtn.none {
  96. display: none;
  97. }
  98. .checkbox-box {
  99. display: flex;
  100. align-items: center;
  101. }
  102. .checkbox-box .checkbox {
  103. display: flex;
  104. margin: 0;
  105. padding: 0 5rpx;
  106. display: flex;
  107. flex-direction: column;
  108. align-items: center;
  109. box-sizing: border-box;
  110. text-align: center;
  111. text-decoration: none;
  112. border-radius: 0;
  113. -webkit-tap-highlight-color: transparent;
  114. overflow: hidden;
  115. background-color: #FFFFFF;
  116. font-size: 36rpx;
  117. color: #999999;
  118. }
  119. .checkbox-box .checkbox.icon-xuanze {
  120. color: #FF457B;
  121. }
  122. .checkbox-box.disabled .checkbox {
  123. color: #999999;
  124. }
  125. .checkbox-box .text {
  126. font-size: 24rpx;
  127. margin-left: 10rpx;
  128. }
  129. .goods-list {
  130. width: 100%;
  131. height: auto;
  132. background-color: #F7F7F7;
  133. }
  134. .goods-list .goods-item {
  135. width: 702rpx;
  136. padding: 0 24rpx;
  137. background: #FFFFFF;
  138. margin-bottom: 24rpx;
  139. }
  140. .goods-list .shoptitle {
  141. display: flex;
  142. align-items: center;
  143. height: 80rpx;
  144. line-height: 80rpx;
  145. }
  146. .goods-list .shoptitle .checkbox-box {
  147. padding: 10rpx;
  148. }
  149. .goods-list .shoptitle .text {
  150. width: 450rpx;
  151. display: block;
  152. overflow: hidden;
  153. text-overflow: ellipsis;
  154. white-space: nowrap;
  155. margin-left: 20rpx;
  156. font-size: 28rpx;
  157. color: #333333;
  158. text-align: left;
  159. font-weight: bold;
  160. }
  161. .goods-list .goods-pros {
  162. width: 100%;
  163. height: auto;
  164. margin-bottom: 20rpx;
  165. }
  166. .goods-list .goods-pros-t {
  167. display: flex;
  168. align-items: center;
  169. width: 100%;
  170. height: 210rpx;
  171. padding: 0 0 26rpx 0;
  172. }
  173. .goods-list .goods-pros-t .checkbox-box {
  174. padding: 10rpx;
  175. }
  176. .goods-list .goods-pros-t .pros-img {
  177. width: 210rpx;
  178. height: 100%;
  179. border-radius: 10rpx;
  180. margin: 0 20rpx;
  181. border: 1px solid #f3f3f3;
  182. }
  183. .goods-list .goods-pros-t .pros-img image {
  184. width: 100%;
  185. height: 100%;
  186. border-radius: 10rpx;
  187. }
  188. .goods-list .goods-pros-b {
  189. width: 100%;
  190. height: auto;
  191. padding: 0 0 24rpx 0;
  192. box-sizing: border-box;
  193. }
  194. .goods-list .goods-pros-b.show {
  195. display: block;
  196. }
  197. .goods-list .goods-pros-b.none {
  198. display: none;
  199. }
  200. .goods-list .goods-pros-b .sum-none {
  201. width: 100%;
  202. height: 48rpx;
  203. line-height: 48rpx;
  204. color: #333333;
  205. float: left;
  206. text-align: right;
  207. }
  208. .goods-list .goods-pros-b .sum-none .money {
  209. font-size: 26rpx;
  210. color: #999999;
  211. text-decoration: line-through;
  212. }
  213. .goods-list .goods-pros-b .sum-none .money-sign {
  214. font-size: 26rpx;
  215. color: #999999;
  216. text-decoration: line-through;
  217. }
  218. .goods-list .goods-pros-b .sum-none .money-reduced {
  219. margin-left: 10rpx;
  220. font-size: 26rpx;
  221. color: #FF457B;
  222. }
  223. .goods-list .goods-pros-b .sum-none .money-reduced .iconfont {
  224. font-size: 34rpx;
  225. }
  226. .goods-list .goods-pros-b .sum {
  227. width: 100%;
  228. height: 40rpx;
  229. font-size: 26rpx;
  230. line-height: 40rpx;
  231. color: #333333;
  232. float: left;
  233. display: flex;
  234. justify-content: flex-end;
  235. font-weight: bold;
  236. }
  237. .goods-list .goods-pros-b .sum .money {
  238. color: #FF457B;
  239. font-size: 26rpx;
  240. }
  241. .goods-list .goods-pros-b .sum .money-sign {
  242. font-size: 24rpx;
  243. color: #FF457B;
  244. }
  245. .goods-list .pros-product {
  246. width: 416rpx;
  247. height: 100%;
  248. line-height: 36rpx;
  249. font-size: 28rpx;
  250. position: relative;
  251. }
  252. .goods-list .pros-product .producttitle {
  253. width: 100%;
  254. display: inline-block;
  255. height: auto;
  256. text-overflow: ellipsis;
  257. display: -webkit-box;
  258. word-break: break-all;
  259. -webkit-box-orient: vertical;
  260. -webkit-line-clamp: 2;
  261. overflow: hidden;
  262. margin-bottom: 15rpx;
  263. }
  264. .goods-list .pros-product .producttitle .no-text {
  265. display: inline-block;
  266. height: 36rpx;
  267. padding: 0 12rpx;
  268. line-height: 36rpx;
  269. background: linear-gradient(315deg, #e70000 0%, #ff6801 100%);
  270. border-radius: 18rpx;
  271. text-align: center;
  272. color: #FFFFFF;
  273. font-size: 28rpx;
  274. margin-right: 24rpx;
  275. }
  276. .goods-list .pros-product .productspec {
  277. height: 36rpx;
  278. color: #999999;
  279. font-size: 26rpx;
  280. }
  281. .goods-list .pros-product .productprice {
  282. position: absolute;
  283. bottom: 0;
  284. width: 100%;
  285. height: 48rpx;
  286. margin: 30rpx 0 0 0;
  287. }
  288. .goods-list .pros-product .productprice .price {
  289. line-height: 48rpx;
  290. font-size: 26rpx;
  291. width: 48%;
  292. color: #FF457B;
  293. float: left;
  294. font-weight: bold;
  295. }
  296. .goods-list .pros-product .productprice .price.disabled {
  297. color: #999999;
  298. text-decoration: line-through;
  299. }
  300. .goods-list .pros-product .productprice .price .money-sign {
  301. font-size: 24rpx;
  302. color: #FF457B;
  303. }
  304. .goods-list .pros-product .productprice .count {
  305. height: 100%;
  306. float: right;
  307. position: relative;
  308. }
  309. .goods-list .pros-product .productprice .count.show {
  310. display: block;
  311. }
  312. .goods-list .pros-product .productprice .count.none {
  313. display: none;
  314. }
  315. .goods-list .pros-product .productprice .count .count-tips {
  316. width: auto;
  317. display: inline-block;
  318. padding: 0 15rpx;
  319. line-height: 44rpx;
  320. height: 44rpx;
  321. border-radius: 22rpx;
  322. background: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%);
  323. font-size: 24rpx;
  324. text-align: center;
  325. color: #FFFFFF;
  326. position: absolute;
  327. top: -60rpx;
  328. left: -5rpx;
  329. z-index: 5;
  330. }
  331. .goods-list .pros-product .productprice .count .count-tips.step {
  332. left: -217rpx;
  333. }
  334. .goods-list .pros-product .productprice .count .count-tips::before {
  335. content: "";
  336. position: absolute;
  337. bottom: -30rpx;
  338. right: 15rpx;
  339. z-index: 1;
  340. width: 0;
  341. height: 0;
  342. border-width: 18rpx;
  343. border-style: solid;
  344. border-color: #FF457B transparent transparent transparent;
  345. }
  346. .goods-list .pros-product .productprice .count .number-box {
  347. display: flex;
  348. justify-content: center;
  349. align-items: center;
  350. border: 2rpx solid #e1e1e1;
  351. border-radius: 30rpx;
  352. height: 48rpx;
  353. margin-left: 20rpx;
  354. }
  355. .goods-list .pros-product .productprice .count .number-box .iconfont {
  356. font-size: 24rpx;
  357. padding: 0 14rpx;
  358. color: #666666;
  359. text-align: center;
  360. line-height: 48rpx;
  361. font-weight: bold;
  362. background: #ffffff;
  363. }
  364. .goods-list .pros-product .productprice .count .number-box .iconfont.icon-jianhao {
  365. border-radius: 30rpx 0 0 30rpx;
  366. }
  367. .goods-list .pros-product .productprice .count .number-box .iconfont.icon-jiahao {
  368. border-radius: 0 30rpx 30rpx 0;
  369. }
  370. .goods-list .pros-product .productprice .count .number-box .btn-input {
  371. width: 56rpx;
  372. height: 44rpx;
  373. line-height: 44rpx;
  374. border-radius: 4rpx;
  375. text-align: center;
  376. font-size: 24rpx;
  377. color: #333333;
  378. background-color: #f7f7f7;
  379. }
  380. .goods-list .pros-product .productprice .count .uni-numbox {
  381. position: absolute;
  382. left: 45rpx;
  383. bottom: 0;
  384. }
  385. .goods-list .pros-product .productprice .count .uni-numbox .uni-numbox-minus, .goods-list .pros-product .productprice .count .uni-numbox .uni-numbox-plus {
  386. width: 50rpx;
  387. line-height: 40rpx;
  388. }
  389. .goods-list .pros-product .productprice .count .uni-numbox .uni-numbox-value {
  390. font-size: 28rpx;
  391. width: 60rpx;
  392. }
  393. .goods-list .pros-product .floor-item-act {
  394. width: 100%;
  395. height: 30rpx;
  396. margin-top: 8rpx;
  397. float: left;
  398. }
  399. .goods-list .pros-product .floor-item-act .tag {
  400. display: inline-block;
  401. height: 32rpx;
  402. font-size: 22rpx;
  403. line-height: 30rpx;
  404. text-align: center;
  405. color: #f83c6c;
  406. float: left;
  407. margin-right: 10rpx;
  408. }
  409. .goods-list .pros-product .floor-item-act .tag.tag-02 {
  410. width: 80rpx;
  411. background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center no-repeat;
  412. background-size: contain;
  413. }
  414. .goods-list .pros-product .floor-item-act .tag.tag-01 {
  415. width: 56rpx;
  416. color: #fff;
  417. background-color: #f83c6c;
  418. border-radius: 4rpx;
  419. }
  420. .failure-list {
  421. width: 702rpx;
  422. height: auto;
  423. padding: 0 24rpx;
  424. margin-top: 20rpx;
  425. background: #FFFFFF;
  426. }
  427. .failure-list .failure-title {
  428. width: 100%;
  429. height: 82rpx;
  430. line-height: 82rpx;
  431. font-size: 28rpx;
  432. border-bottom: 1px solid #EBEBEB;
  433. }
  434. .failure-list .failure-title .title-txt {
  435. float: left;
  436. color: #666666;
  437. text-align: left;
  438. }
  439. .failure-list .failure-title .title-btn {
  440. float: right;
  441. color: #FF457B;
  442. text-align: right;
  443. line-height: 80rpx;
  444. }
  445. .failure-list .failure-title .title-btn .butto {
  446. display: inline-block;
  447. padding: 0 15rpx;
  448. font-size: 26rpx;
  449. height: 50rpx;
  450. line-height: 50rpx;
  451. border-radius: 30rpx;
  452. background: #fff8fd;
  453. border: 1px solid #ff457b;
  454. color: #ff457b;
  455. margin-top: 15rpx;
  456. }
  457. .failure-list .productlist {
  458. padding-top: 10rpx;
  459. }
  460. .failure-list .productlist .goods-pros {
  461. width: 100%;
  462. height: auto;
  463. padding: 20rpx 0;
  464. }
  465. .failure-list .productlist .goods-pros-t {
  466. display: flex;
  467. align-items: center;
  468. width: 100%;
  469. height: 210rpx;
  470. position: relative;
  471. }
  472. .failure-list .productlist .goods-pros-t .img-tip {
  473. display: block;
  474. width: 72rpx;
  475. height: 36rpx;
  476. line-height: 36rpx;
  477. font-size: 24rpx;
  478. text-align: center;
  479. color: #FFFFFF;
  480. border-radius: 24rpx;
  481. background: rgba(51, 51, 51, 0.3);
  482. }
  483. .failure-list .productlist .goods-pros-t .checkbox-box {
  484. padding: 10rpx;
  485. }
  486. .failure-list .productlist .goods-pros-t .pros-img {
  487. width: 180rpx;
  488. height: 100%;
  489. border-radius: 10rpx;
  490. margin: 0 20rpx;
  491. border: 1px solid #f3f3f3;
  492. position: relative;
  493. }
  494. .failure-list .productlist .goods-pros-t .pros-img image {
  495. width: 100%;
  496. height: 100%;
  497. border-radius: 10rpx;
  498. }
  499. .failure-list .productlist .goods-pros-t .pros-marks {
  500. width: 730rpx;
  501. height: 250rpx;
  502. z-index: 90;
  503. background: rgba(0, 0, 0, 0.05);
  504. position: absolute;
  505. left: -20rpx;
  506. top: -20rpx;
  507. }
  508. .failure-list .productlist .goods-pros-b {
  509. width: 622rpx;
  510. margin-left: 84rpx;
  511. height: 40rpx;
  512. padding: 0 0 26rpx 0;
  513. }
  514. .failure-list .productlist .goods-pros-b.show {
  515. display: block;
  516. }
  517. .failure-list .productlist .goods-pros-b.none {
  518. display: none;
  519. }
  520. .failure-list .productlist .goods-pros-b .sum {
  521. font-size: 28rpx;
  522. line-height: 40rpx;
  523. color: #333333;
  524. display: flex;
  525. justify-content: flex-end;
  526. }
  527. .failure-list .productlist .goods-pros-b .sum .money {
  528. color: #FF2A2A;
  529. font-size: 28rpx;
  530. }
  531. .failure-list .productlist .goods-pros-b .sum .money-sign {
  532. font-size: 24rpx;
  533. color: #FF2A2A;
  534. }
  535. .failure-list .productlist .pros-product {
  536. width: 402rpx;
  537. height: 100%;
  538. line-height: 36rpx;
  539. font-size: 28rpx;
  540. position: relative;
  541. }
  542. .failure-list .productlist .pros-product .producttitle {
  543. width: 100%;
  544. display: inline-block;
  545. height: auto;
  546. text-overflow: ellipsis;
  547. display: -webkit-box;
  548. word-break: break-all;
  549. -webkit-box-orient: vertical;
  550. -webkit-line-clamp: 2;
  551. overflow: hidden;
  552. margin-bottom: 8rpx;
  553. }
  554. .failure-list .productlist .pros-product .producttitle .no-text {
  555. display: inline-block;
  556. height: 36rpx;
  557. padding: 0 12rpx;
  558. line-height: 36rpx;
  559. background: linear-gradient(315deg, #e70000 0%, #ff6801 100%);
  560. border-radius: 18rpx;
  561. text-align: center;
  562. color: #FFFFFF;
  563. font-size: 28rpx;
  564. margin-right: 24rpx;
  565. }
  566. .failure-list .productlist .pros-product .productspec {
  567. height: 36rpx;
  568. color: #999999;
  569. font-size: 26rpx;
  570. margin-top: 20rpx;
  571. }
  572. .failure-list .productlist .pros-product .productstate {
  573. font-size: 28rpx;
  574. height: 44rpx;
  575. color: #FF2A2A;
  576. position: absolute;
  577. bottom: 0;
  578. left: 0;
  579. }
  580. .footer {
  581. width: 100%;
  582. background-color: #FFFFFF;
  583. height: 100rpx;
  584. position: fixed;
  585. bottom: 0rpx;
  586. z-index: 100;
  587. }
  588. .footer .footer-le {
  589. width: 520rpx;
  590. height: 100%;
  591. padding: 10rpx 24rpx;
  592. float: left;
  593. box-sizing: border-box;
  594. }
  595. .footer .footer-le .foot-check {
  596. width: 100rpx;
  597. float: left;
  598. line-height: 80rpx;
  599. font-size: 24rpx;
  600. }
  601. .footer .footer-le .foot-check .checkbox {
  602. width: 40rpx;
  603. text-align: center;
  604. }
  605. .footer .footer-le .foot-check .text {
  606. width: 60rpx;
  607. float: right;
  608. }
  609. .footer .footer-le .sum {
  610. width: 360rpx;
  611. height: 100%;
  612. float: right;
  613. box-sizing: border-box;
  614. padding: 0 10rpx;
  615. }
  616. .footer .footer-le .sum .sum-price {
  617. text-align: right;
  618. width: 100%;
  619. height: 80rpx;
  620. line-height: 80rpx;
  621. font-size: 30rpx;
  622. color: #333333;
  623. float: left;
  624. font-weight: normal;
  625. }
  626. .footer .footer-le .sum .sum-price .money {
  627. color: #FF457B;
  628. }
  629. .footer .footer-le .sum .sum-price .money-sign {
  630. font-size: 24rpx;
  631. color: #FF457B;
  632. }
  633. .footer .footer-ri {
  634. width: 230rpx;
  635. height: 100%;
  636. float: right;
  637. display: flex;
  638. justify-content: space-between;
  639. align-items: center;
  640. z-index: 999;
  641. box-sizing: border-box;
  642. padding: 13rpx 15rpx;
  643. }
  644. .footer .footer-ri.none {
  645. display: none;
  646. }
  647. .footer .footer-ri .btn {
  648. width: 200rpx;
  649. height: 100%;
  650. background: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%);
  651. font-size: 28rpx;
  652. line-height: 80rpx;
  653. color: #FFFFFF;
  654. display: flex;
  655. border-radius: 40rpx;
  656. justify-content: center;
  657. align-items: center;
  658. }
  659. .footer .footer-del {
  660. width: 420rpx;
  661. height: 100rpx;
  662. position: absolute;
  663. padding-left: 200rpx;
  664. background: #FFFFFF;
  665. right: 0;
  666. top: 0;
  667. z-index: 1000;
  668. box-sizing: border-box;
  669. padding: 10rpx 0;
  670. display: flex;
  671. }
  672. .footer .footer-del.show {
  673. -webkit-animation: showDelbtn 0s linear both;
  674. animation: showDelbtn 0s linear both;
  675. }
  676. .footer .footer-del.none {
  677. -webkit-animation: hideDelbtn 0s linear both;
  678. animation: hideDelbtn 0s linear both;
  679. }
  680. .footer .footer-del .btn {
  681. flex: 1;
  682. margin: 0 8rpx;
  683. height: 100%;
  684. line-height: 80rpx;
  685. font-size: 28rpx;
  686. color: #FFFFFF;
  687. text-align: center;
  688. float: left;
  689. border-radius: 40rpx;
  690. }
  691. .footer .footer-del .btn.btn-cancel {
  692. background: #f7f7f7;
  693. color: #B2B2B2;
  694. }
  695. .footer .footer-del .btn.btn-confirm {
  696. background: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%);
  697. color: #FFFFFF;
  698. }
  699. @-webkit-keyframes showDelbtn {
  700. 0% {
  701. -webkit-transform: translateX(0);
  702. transform: translateX(0);
  703. }
  704. 100% {
  705. -webkit-transform: translateX(-100%);
  706. transform: translateX(-100%);
  707. }
  708. }
  709. @keyframes showDelbtn {
  710. 0% {
  711. -webkit-transform: translateX(0);
  712. transform: translateX(0);
  713. }
  714. 100% {
  715. -webkit-transform: translateX(-100%);
  716. transform: translateX(-100%);
  717. }
  718. }
  719. @-webkit-keyframes hideDelbtn {
  720. 0% {
  721. -webkit-transform: translateX(-100%);
  722. transform: translateX(-100%);
  723. }
  724. 100% {
  725. -webkit-transform: translateX(0);
  726. transform: translateX(0);
  727. }
  728. }
  729. @keyframes hideDelbtn {
  730. 0% {
  731. -webkit-transform: translateX(-100%);
  732. transform: translateX(-100%);
  733. }
  734. 100% {
  735. -webkit-transform: translateX(0);
  736. transform: translateX(0);
  737. }
  738. }