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.

613 lines
12 KiB

6 months ago
  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. /* 图片尺寸 */
  24. /* Border Radius */
  25. /* 水平间距 */
  26. /* 垂直间距 */
  27. /* 透明度 */
  28. /* 文章场景相关 */
  29. page,
  30. view,
  31. scroll-view,
  32. swiper,
  33. button,
  34. input,
  35. textarea,
  36. label,
  37. navigator,
  38. image {
  39. box-sizing: border-box !important;
  40. }
  41. image {
  42. vertical-align: top;
  43. }
  44. .gg_zz {
  45. position: fixed;
  46. top: 0;
  47. z-index: 1;
  48. left: 0;
  49. width: 100%;
  50. height: 100%;
  51. background-color: #3c3c3c;
  52. opacity: 0.8;
  53. }
  54. .gg_model {
  55. width: 80%;
  56. color: #666;
  57. z-index: 2;
  58. height: auto;
  59. border-radius: 10px;
  60. opacity: 1;
  61. background-color: white;
  62. position: fixed;
  63. top: 50%;
  64. left: 50%;
  65. -webkit-transform: translate(-50%, -50%);
  66. transform: translate(-50%, -50%);
  67. padding: 10px;
  68. }
  69. .gg_model text {
  70. margin-bottom: 15px;
  71. font-size: 32rpx;
  72. line-height: 20px;
  73. }
  74. .gg_cennel {
  75. margin: auto;
  76. display: block;
  77. width: 55px;
  78. text-align: center;
  79. border-radius: 5px;
  80. font-size: 35rpx;
  81. color: #50BAFE;
  82. border: 1rpx solid #50BAFE;
  83. height: 60rpx;
  84. line-height: 60rpx;
  85. }
  86. .kefubt {
  87. display: flex;
  88. flex-direction: column;
  89. align-items: center;
  90. justify-content: center;
  91. }
  92. .kf .kfbt {
  93. display: flex;
  94. position: fixed;
  95. z-index: 999999;
  96. top: 76%;
  97. right: 0;
  98. margin-right: 3rpx;
  99. background: none;
  100. }
  101. .kf .kfbt::after {
  102. border: 0;
  103. }
  104. .logo {
  105. height: 200rpx;
  106. width: 200rpx;
  107. margin-top: 200rpx;
  108. margin-left: auto;
  109. margin-right: auto;
  110. margin-bottom: 50rpx;
  111. }
  112. .text-area {
  113. display: flex;
  114. justify-content: center;
  115. }
  116. .top {
  117. width: 100%;
  118. display: flex;
  119. justify-content: center;
  120. align-items: center;
  121. }
  122. .top .main-box {
  123. display: flex;
  124. margin: 10rpx;
  125. justify-content: space-between;
  126. background: #fff;
  127. width: 25%;
  128. padding: 10rpx;
  129. margin-top: -3px;
  130. text-align: left;
  131. }
  132. .top .input-box {
  133. width: 70%;
  134. height: 60rpx;
  135. background-color: #f5f5f5;
  136. border-radius: 30rpx;
  137. position: relative;
  138. display: flex;
  139. align-items: center;
  140. justify-content: space-between;
  141. padding-right: 15rpx;
  142. margin-bottom: 15rpx;
  143. }
  144. .top .input-box input {
  145. padding-left: 30rpx;
  146. height: 28rpx;
  147. font-size: 28rpx;
  148. }
  149. .icon {
  150. font-family: 'HMfont-home' !important;
  151. font-size: 60rpx;
  152. font-style: normal;
  153. color: #000000;
  154. }
  155. .icon.search:before {
  156. content: '\e628';
  157. }
  158. .card-swiper {
  159. height: 300rpx !important;
  160. }
  161. .card-swiper swiper-item {
  162. box-sizing: border-box;
  163. padding: 30rpx 0rpx 20rpx;
  164. overflow: initial;
  165. }
  166. .card-swiper swiper-item .swiper-item {
  167. width: 100% !important;
  168. height: 100% !important;
  169. display: block;
  170. border-radius: 30rpx;
  171. -webkit-transform: scale(0.9);
  172. transform: scale(0.9);
  173. transition: all 0.2s ease-in 0s;
  174. overflow: hidden;
  175. }
  176. .card-swiper swiper-item .swiper-item .image {
  177. width: 100% !important;
  178. height: 100% !important;
  179. }
  180. .card-swiper swiper-item.cur .swiper-item {
  181. -webkit-transform: none;
  182. transform: none;
  183. transition: all 0.2s ease-in 0s;
  184. }
  185. .type {
  186. display: flex;
  187. justify-content: flex-start;
  188. align-items: stretch;
  189. flex-wrap: wrap;
  190. margin: 20rpx;
  191. }
  192. .type .item {
  193. flex: 0 0 25%;
  194. display: flex;
  195. justify-content: center;
  196. align-items: center;
  197. flex-direction: column;
  198. margin-bottom: 20rpx;
  199. }
  200. .type .item .image {
  201. width: 100rpx !important;
  202. height: 100rpx !important;
  203. margin-bottom: 10rpx;
  204. border-radius: 50%;
  205. }
  206. .type .item text {
  207. color: #666 !important;
  208. font-size: 28rpx !important;
  209. font-weight: normal !important;
  210. }
  211. .ad-1 {
  212. width: 100%;
  213. height: 220rpx;
  214. padding: 10rpx 20rpx;
  215. background: #fff;
  216. }
  217. .ad-1 image {
  218. width: 100%;
  219. height: 100%;
  220. border-radius: 15rpx;
  221. }
  222. .sellnum {
  223. font-size: 25rpx;
  224. padding-left: 15rpx;
  225. color: #B9B9B9;
  226. }
  227. .sdtext {
  228. padding: 2rpx 8rpx;
  229. border: 1rpx #DBDBDB solid;
  230. border-radius: 5rpx;
  231. color: #B9B9B9;
  232. font-size: 25rpx;
  233. margin-top: 3rpx;
  234. }
  235. .tjgoodlist {
  236. padding: 0 30rpx;
  237. }
  238. .tjgoodlist .title {
  239. width: 100%;
  240. display: flex;
  241. justify-content: center;
  242. align-items: center;
  243. color: #5FCDA2;
  244. font-size: 30rpx;
  245. margin: 20rpx 0;
  246. }
  247. .tjgoodlist .title text {
  248. margin: 0 15rpx;
  249. }
  250. .tjgoodlist .title image {
  251. width: 40rpx;
  252. height: 40rpx;
  253. }
  254. .tjgoodlist .tj_list {
  255. display: flex;
  256. justify-content: space-around;
  257. padding: 10rpx 0;
  258. border-bottom: 1rpx #F0F0F0 solid;
  259. height: 260rpx;
  260. }
  261. .tjgoodlist .tj_list .tjleft {
  262. width: 50%;
  263. }
  264. .tjgoodlist .tj_list .tjleft image {
  265. width: 180rpx;
  266. height: 180rpx;
  267. border-radius: 20rpx;
  268. }
  269. .tjgoodlist .tj_list .tjright {
  270. width: 100%;
  271. padding: 15rpx 4%;
  272. display: -webkit-box;
  273. -webkit-box-orient: vertical;
  274. -webkit-line-clamp: 2;
  275. text-align: justify;
  276. overflow: hidden;
  277. font-size: 28rpx;
  278. color: #747474;
  279. }
  280. .tjgoodlist .tj_list .tjright .tjroot {
  281. display: flex;
  282. justify-content: space-between;
  283. justify-items: center;
  284. padding-top: 8rpx;
  285. }
  286. .task-title {
  287. margin: 30rpx;
  288. }
  289. .task-title .top {
  290. display: flex;
  291. justify-content: space-between;
  292. align-items: center;
  293. }
  294. .task-title .top .left {
  295. display: flex;
  296. justify-content: flex-start;
  297. align-items: center;
  298. }
  299. .task-title .top .left view {
  300. width: 8rpx !important;
  301. height: 36rpx !important;
  302. border-radius: 4rpx;
  303. margin-right: 10rpx;
  304. background: #50BAFE;
  305. }
  306. .task-title .top .left text {
  307. color: #3A4E73 !important;
  308. font-size: 36rpx !important;
  309. font-weight: bold !important;
  310. }
  311. .task-title .top .right {
  312. display: flex;
  313. justify-content: flex-start;
  314. align-items: baseline;
  315. }
  316. .task-title .top .right text {
  317. color: #B0B8C7 !important;
  318. font-size: 28rpx !important;
  319. font-weight: normal !important;
  320. }
  321. .task-title .bottom {
  322. margin-top: 5rpx;
  323. color: #B0B8C7 !important;
  324. font-size: 24rpx !important;
  325. font-weight: normal !important;
  326. }
  327. .task-list {
  328. padding: 0 30rpx;
  329. }
  330. .task-list .item {
  331. display: flex;
  332. justify-content: flex-start;
  333. align-items: stretch;
  334. flex-direction: column;
  335. position: relative;
  336. padding-top: 20rpx;
  337. }
  338. .task-list .item:after {
  339. content: " ";
  340. width: 200%;
  341. height: 200%;
  342. position: absolute;
  343. top: 0;
  344. left: 0;
  345. border-radius: inherit;
  346. -webkit-transform: scale(0.5);
  347. transform: scale(0.5);
  348. -webkit-transform-origin: 0 0;
  349. transform-origin: 0 0;
  350. pointer-events: none;
  351. box-sizing: border-box;
  352. border: 0 #ddd solid;
  353. border-top-width: 0px;
  354. border-right-width: 0px;
  355. border-bottom-width: 1px;
  356. border-left-width: 0px;
  357. }
  358. .task-list .item:first-child {
  359. padding-top: 0;
  360. }
  361. .task-list .item:last-child:after {
  362. display: none;
  363. }
  364. .task-list .item .header {
  365. display: flex;
  366. justify-content: space-between;
  367. align-items: center;
  368. }
  369. .task-list .item .header .left {
  370. display: flex;
  371. justify-content: flex-start;
  372. align-items: center;
  373. }
  374. .task-list .item .header .left .avatar {
  375. width: 50rpx !important;
  376. height: 50rpx !important;
  377. margin-right: 10rpx;
  378. border-radius: 50%;
  379. }
  380. .task-list .item .header .left text {
  381. color: #333 !important;
  382. font-size: 24rpx !important;
  383. font-weight: normal !important;
  384. }
  385. .task-list .item .header .right {
  386. display: flex;
  387. justify-content: flex-start;
  388. align-items: center;
  389. }
  390. .task-list .item .header .right .label {
  391. display: flex;
  392. justify-content: center;
  393. align-items: center;
  394. color: #50BAFE !important;
  395. font-size: 22rpx !important;
  396. font-weight: normal !important;
  397. height: 36rpx;
  398. padding: 0 15rpx;
  399. background: #EDF8FF;
  400. border-radius: 100rpx;
  401. margin-right: 10rpx;
  402. }
  403. .task-list .item .header .right .label:last-child {
  404. margin-right: 0;
  405. }
  406. .task-list .item .body {
  407. padding: 20rpx 0;
  408. padding-left: 5rpx;
  409. display: flex;
  410. justify-content: space-between;
  411. align-items: flex-start;
  412. }
  413. .task-list .item .body .left {
  414. width: 60%;
  415. display: flex;
  416. justify-content: flex-start;
  417. align-items: stretch;
  418. flex-direction: column;
  419. }
  420. .task-list .item .body .left .title {
  421. width: 100%;
  422. overflow: hidden;
  423. white-space: nowrap;
  424. text-overflow: ellipsis;
  425. color: #666 !important;
  426. font-size: 28rpx !important;
  427. font-weight: normal !important;
  428. padding-bottom: 10rpx;
  429. }
  430. .task-list .item .body .left .desc {
  431. width: 100%;
  432. display: -webkit-box !important;
  433. overflow: hidden;
  434. text-overflow: ellipsis;
  435. word-break: break-all;
  436. -webkit-box-orient: vertical;
  437. -webkit-line-clamp: 2;
  438. color: #999 !important;
  439. font-size: 22rpx !important;
  440. font-weight: normal !important;
  441. }
  442. .task-list .item .body .right image {
  443. width: 200rpx !important;
  444. height: 200rpx !important;
  445. }
  446. .goods-list .title {
  447. width: 100%;
  448. display: flex;
  449. justify-content: center;
  450. align-items: center;
  451. color: #5FCDA2;
  452. font-size: 30rpx;
  453. margin: 20rpx 0;
  454. }
  455. .goods-list .title text {
  456. margin: 0 15rpx;
  457. }
  458. .goods-list .title image {
  459. width: 40rpx;
  460. height: 40rpx;
  461. }
  462. .goods-list .product-list {
  463. width: 100%;
  464. padding: 0 4% 3vw 4%;
  465. display: flex;
  466. justify-content: space-between;
  467. flex-wrap: wrap;
  468. }
  469. .goods-list .product-list .product {
  470. width: 48%;
  471. border-radius: 20rpx;
  472. background-color: #fff;
  473. margin: 0 0 15rpx 0;
  474. box-shadow: 0rpx 5rpx 25rpx rgba(0, 0, 0, 0.1);
  475. }
  476. .goods-list .product-list .product image {
  477. width: 100%;
  478. height: 300rpx;
  479. border-radius: 20rpx 20rpx 0 0;
  480. }
  481. .goods-list .product-list .product .name {
  482. width: 100%;
  483. padding: 10rpx 4%;
  484. display: -webkit-box;
  485. -webkit-box-orient: vertical;
  486. -webkit-line-clamp: 2;
  487. text-align: justify;
  488. overflow: hidden;
  489. font-size: 28rpx;
  490. color: #747474;
  491. }
  492. .goods-list .product-list .product .miaos {
  493. width: 100%;
  494. margin: 10rpx;
  495. display: -webkit-box;
  496. -webkit-box-orient: vertical;
  497. -webkit-line-clamp: 1;
  498. text-align: justify;
  499. overflow: hidden;
  500. font-size: 28rpx;
  501. color: #747474;
  502. }
  503. .goods-list .product-list .product .miaosshow {
  504. margin: 10rpx;
  505. font-size: 28rpx;
  506. color: #747474;
  507. }
  508. .goods-list .product-list .product .info {
  509. display: flex;
  510. justify-content: space-between;
  511. align-items: flex-end;
  512. width: 92%;
  513. padding: 10rpx 4% 10rpx 4%;
  514. }
  515. .goods-list .product-list .product .info .price {
  516. color: #e65339;
  517. font-size: 30rpx;
  518. font-weight: 600;
  519. }
  520. .goods-list .product-list .product .info .slogan {
  521. color: #807c87;
  522. font-size: 24rpx;
  523. }
  524. .goods-list .product-list .product .add image {
  525. width: 43rpx;
  526. height: 40rpx;
  527. padding: 7rpx;
  528. }
  529. .nosell {
  530. display: flex;
  531. justify-content: flex-end;
  532. }
  533. .nosell text {
  534. position: relative;
  535. right: 5rpx;
  536. padding: 5rpx;
  537. background-color: #EAEAEA;
  538. color: white;
  539. font-size: 28rpx !important;
  540. }
  541. .number {
  542. display: flex;
  543. justify-content: flex-end;
  544. margin-right: 30rpx;
  545. margin-bottom: 10rpx;
  546. }
  547. .number .input {
  548. width: 70rpx;
  549. height: 45rpx;
  550. margin: 0 10rpx;
  551. border-bottom: 1rpx #ADADAD solid;
  552. }
  553. .number .input input {
  554. width: 60rpx;
  555. height: 60rpx;
  556. display: flex;
  557. justify-content: center;
  558. align-items: center;
  559. text-align: center;
  560. font-size: 26rpx;
  561. }
  562. .number .sub,
  563. .number .add {
  564. width: 45rpx;
  565. height: 45rpx;
  566. border-radius: 5rpx;
  567. }
  568. .number .jia {
  569. display: flex;
  570. width: 45rpx;
  571. height: 45rpx;
  572. justify-content: center;
  573. justify-items: center;
  574. align-items: center;
  575. background-color: #41A863;
  576. color: #fff;
  577. border-radius: 50%;
  578. }
  579. .number .jia image {
  580. width: 40rpx;
  581. height: 40rpx;
  582. padding: 7rpx;
  583. }
  584. .number .jian {
  585. display: flex;
  586. width: 45rpx;
  587. height: 45rpx;
  588. justify-content: center;
  589. justify-items: center;
  590. align-items: center;
  591. background-color: #41A863;
  592. color: #fff;
  593. border-radius: 50%;
  594. padding-bottom: 10rpx;
  595. }
  596. .p-b-btn .yticon {
  597. font-size: 40rpx;
  598. line-height: 48rpx;
  599. color: #909399;
  600. }
  601. .p-b-btn.active,
  602. .p-b-btn.active .yticon {
  603. color: #fa436a;
  604. }
  605. .p-b-btn .icon-fenxiang2 {
  606. font-size: 42rpx;
  607. -webkit-transform: translateY(-2rpx);
  608. transform: translateY(-2rpx);
  609. }
  610. .p-b-btn .icon-shoucang {
  611. font-size: 50rpx;
  612. }