index.wxss 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  1. @charset "UTF-8";
  2. /* 页面左右间距 */
  3. /* 文字尺寸 */
  4. /*文字颜色*/
  5. /* 边框颜色 */
  6. /*颜色*/
  7. /* 图片加载中颜色 */
  8. /* 行为相关颜色 */
  9. /* 功能栏字体大小 */
  10. .f-header .tit {
  11. font-size: 34rpx;
  12. color: #303133;
  13. line-height: 1;
  14. font-weight: bold;
  15. }
  16. .f-header .tit-box {
  17. -webkit-box-flex: 1;
  18. -webkit-flex: 1;
  19. flex: 1;
  20. display: -webkit-box;
  21. display: -webkit-flex;
  22. display: flex;
  23. -webkit-box-orient: vertical;
  24. -webkit-box-direction: normal;
  25. -webkit-flex-direction: column;
  26. flex-direction: column;
  27. }
  28. /*功能栏左侧小图标*/
  29. .f-header .f-left-icon {
  30. height: 34rpx;
  31. width: 8rpx;
  32. background-image: -webkit-linear-gradient(left, #FBEB77, #F8DD4F);
  33. background-image: linear-gradient(to right, #FBEB77, #F8DD4F);
  34. margin-right: 10rpx;
  35. border-radius: 10rpx;
  36. }
  37. page {
  38. background: #f7f8f7;
  39. }
  40. .m-t {
  41. margin-top: 16rpx;
  42. }
  43. .list-box {
  44. margin-top: 30rpx;
  45. }
  46. /* 头部 轮播图 */
  47. .carousel-section {
  48. position: relative;
  49. padding-top: 10px;
  50. overflow: hidden;
  51. background: url(/static/img/indexBg.png) no-repeat;
  52. background-size: 100% 100%;
  53. }
  54. .carousel-section .titleNview-placing {
  55. height: 25px;
  56. padding-top: 44px;
  57. box-sizing: content-box;
  58. }
  59. .carousel-section .titleNview-background {
  60. position: absolute;
  61. top: 0;
  62. left: 0;
  63. width: 100%;
  64. height: 426rpx;
  65. -webkit-transition: 0.4s;
  66. transition: 0.4s;
  67. }
  68. .carousel-section .carousel {
  69. width: 680rpx;
  70. height: 340rpx;
  71. margin: 0 auto;
  72. }
  73. .carousel-section .carousel .carousel-item {
  74. width: 100%;
  75. height: 100%;
  76. overflow: hidden;
  77. }
  78. .carousel-section .carousel image {
  79. width: 100%;
  80. height: 100%;
  81. border-radius: 15rpx;
  82. }
  83. /*公用边框样式*/
  84. .guess-section .icon {
  85. margin-right: 10rpx;
  86. display: inline-block;
  87. padding: 2rpx 10rpx;
  88. border: 1rpx solid #fd5b23;
  89. color: #fd5b23;
  90. line-height: 1;
  91. font-size: 28rpx;
  92. border-radius: 10rpx;
  93. }
  94. .f-header {
  95. display: -webkit-box;
  96. display: -webkit-flex;
  97. display: flex;
  98. -webkit-box-align: center;
  99. -webkit-align-items: center;
  100. align-items: center;
  101. height: 92rpx;
  102. padding: 6rpx 30rpx 8rpx;
  103. }
  104. .f-header image {
  105. -webkit-flex-shrink: 0;
  106. flex-shrink: 0;
  107. width: 80rpx;
  108. height: 80rpx;
  109. margin-right: 20rpx;
  110. }
  111. .f-header .iconenter {
  112. font-size: 34rpx;
  113. color: #909399;
  114. }
  115. .f-header .iconfont {
  116. font-size: 22rpx;
  117. }
  118. /* 商品列表 */
  119. .guess-section {
  120. display: -webkit-box;
  121. display: -webkit-flex;
  122. display: flex;
  123. -webkit-flex-wrap: wrap;
  124. flex-wrap: wrap;
  125. padding: 0 30rpx;
  126. }
  127. .guess-section .guess-item {
  128. overflow: hidden;
  129. display: -webkit-box;
  130. display: -webkit-flex;
  131. display: flex;
  132. -webkit-box-orient: vertical;
  133. -webkit-box-direction: normal;
  134. -webkit-flex-direction: column;
  135. flex-direction: column;
  136. width: 48%;
  137. margin-bottom: 4%;
  138. border-radius: 15rpx;
  139. background-color: white;
  140. box-shadow: 0rpx 0rpx 10rpx 10rpx #f3f3f3;
  141. }
  142. .guess-section .guess-item:nth-child(2n + 1) {
  143. margin-right: 4%;
  144. }
  145. .guess-section .image-wrapper {
  146. width: 100%;
  147. height: 330rpx;
  148. border-radius: 3px;
  149. overflow: hidden;
  150. }
  151. .guess-section .image-wrapper image {
  152. width: 100%;
  153. height: 100%;
  154. opacity: 1;
  155. }
  156. .guess-section .title {
  157. padding-top: 10rpx;
  158. font-size: 28rpx;
  159. color: #303133;
  160. font-weight: bold;
  161. line-height: 1.5;
  162. }
  163. .guess-section .price {
  164. font-size: 32rpx;
  165. color: #F8DD4F;
  166. font-weight: bold;
  167. line-height: 1;
  168. line-height: 80rpx;
  169. }
  170. .guess-section .price .iconJf {
  171. width: 23rpx;
  172. margin-right: 5rpx;
  173. }
  174. .guess-section .detail {
  175. line-height: 1;
  176. }
  177. .guess-section .tip {
  178. color: white;
  179. background-color: #fd5b23;
  180. line-height: 1.5;
  181. font-size: 24rpx;
  182. padding-left: 20rpx;
  183. }
  184. .list-box-h {
  185. height: 1550rpx;
  186. }
  187. .row {
  188. border-radius: 15rpx;
  189. margin: 25rpx;
  190. height: 155rpx;
  191. overflow: hidden;
  192. background-color: #ffffff;
  193. padding-right: 25rpx;
  194. }
  195. .row .list-interval {
  196. border: 1px dashed #ebeef5;
  197. height: 100%;
  198. }
  199. .row .list-interval .top,
  200. .row .list-interval .bottom {
  201. border-radius: 100rpx;
  202. width: 30rpx;
  203. height: 30rpx;
  204. position: absolute;
  205. background-color: #f8f8f8;
  206. right: -15rpx;
  207. }
  208. .row .list-interval .top {
  209. top: -18rpx;
  210. }
  211. .row .list-interval .bottom {
  212. bottom: -18rpx;
  213. }
  214. .row .list-money {
  215. height: 100%;
  216. min-width: 155rpx;
  217. text-align: center;
  218. }
  219. .row .list-money image {
  220. height: 100%;
  221. width: 20rpx;
  222. }
  223. .row .list-money .list-money-text {
  224. -webkit-box-flex: 1;
  225. -webkit-flex-grow: 1;
  226. flex-grow: 1;
  227. padding: 0 25rpx;
  228. }
  229. .row .list-money .list-money-text .tit {
  230. text-align: center;
  231. padding: 15rpx 0rpx;
  232. font-size: 55rpx;
  233. color: #dd524d;
  234. font-weight: bold;
  235. }
  236. .row .list-money .list-money-text .tit.noAction {
  237. color: #909399;
  238. }
  239. .row .list-money .list-money-text .price {
  240. padding-bottom: 25rpx;
  241. color: #909399;
  242. }
  243. .row .row_list_right {
  244. min-width: 200rpx;
  245. padding-left: 25rpx;
  246. line-height: 1;
  247. }
  248. .row .row_list_right .right_time {
  249. padding: 10rpx 0rpx;
  250. color: #909399;
  251. font-size: 24rpx;
  252. }
  253. .row .row_list_right .right_top {
  254. margin: 15rpx 0;
  255. }
  256. .row .row_list_right .right_top .right_name {
  257. font-size: 28rpx;
  258. color: #bc253a;
  259. font-weight: bold;
  260. }
  261. .row .row_list_right .right_top .right_title {
  262. font-size: 28rpx;
  263. color: 28rpx;
  264. font-weight: bold;
  265. }
  266. .row .row_list_right .right_top .right_title.noAction {
  267. color: #909399;
  268. }
  269. .row .right_use {
  270. margin: 15rpx 0;
  271. padding: 10rpx;
  272. width: 160rpx;
  273. text-align: center;
  274. color: #fff;
  275. background-color: #bc253a;
  276. border-radius: 50rpx;
  277. font-size: 24rpx;
  278. }
  279. .row .right_use.noAction {
  280. background-color: #909399;
  281. }
  282. .row .iconlocation {
  283. font-size: 36rpx;
  284. color: #909399;
  285. }
  286. .xtxx {
  287. width: 100%;
  288. height: 70rpx;
  289. position: relative;
  290. margin: 22rpx 0 20rpx;
  291. }
  292. .xtxx .bg {
  293. display: inline-block;
  294. width: 690rpx;
  295. position: absolute;
  296. right: 0;
  297. left: 0;
  298. margin: 0 auto;
  299. }
  300. .xtxx .ld {
  301. width: 28rpx;
  302. height: 34rpx;
  303. position: absolute;
  304. top: 18rpx;
  305. left: 55rpx;
  306. }
  307. .tongz {
  308. width: 690rpx;
  309. height: 70rpx;
  310. margin: 48rpx auto 0;
  311. padding: 18rpx 30rpx 18rpx 24rpx;
  312. -webkit-box-align: center;
  313. -webkit-align-items: center;
  314. align-items: center;
  315. position: relative;
  316. }
  317. .tongz .tongz-bg {
  318. position: absolute;
  319. top: 0;
  320. right: 0;
  321. left: 0;
  322. width: 690rpx;
  323. height: 70rpx;
  324. }
  325. .tongz .tongz-bg image {
  326. width: 100%;
  327. height: 100%;
  328. }
  329. .tongz .tongz-left {
  330. width: 640rpx;
  331. }
  332. .tongz .tongz-left .image-left {
  333. width: 28rpx;
  334. height: 34rpx;
  335. }
  336. .tongz .tongz-left .tongz-font {
  337. margin-left: 22rpx;
  338. font-size: 28rpx;
  339. font-family: Source Han Sans CN;
  340. font-weight: 400;
  341. color: #0f253a;
  342. }
  343. .tongz .tongz-right {
  344. position: relative;
  345. z-index: 11;
  346. width: 12rpx;
  347. height: 26rpx;
  348. }
  349. .tongz .tongz-right image {
  350. width: 100%;
  351. height: 100%;
  352. }
  353. .good-wrapper {
  354. padding: 0 30rpx;
  355. }
  356. .good-wrapper .good {
  357. width: 681rpx;
  358. height: 257rpx;
  359. background: #FFFFFF;
  360. box-shadow: 0px 0px 15rpx 0px rgba(10, 13, 47, 0.14);
  361. border-radius: 14rpx;
  362. margin: 0 auto 20rpx;
  363. padding: 18rpx 19rpx 17rpx;
  364. display: -webkit-box;
  365. display: -webkit-flex;
  366. display: flex;
  367. }
  368. .good-wrapper .good .image-wrapper {
  369. width: 222rpx;
  370. height: 222rpx;
  371. border-radius: 14rpx;
  372. -webkit-flex-shrink: 0;
  373. flex-shrink: 0;
  374. }
  375. .good-wrapper .good .image-wrapper image {
  376. width: 100%;
  377. height: 100%;
  378. opacity: 1;
  379. border-radius: 14rpx;
  380. }
  381. .good-wrapper .good .good-info {
  382. padding-left: 22rpx;
  383. position: relative;
  384. }
  385. .good-wrapper .good .good-info .info-title {
  386. padding-top: 20rpx;
  387. font-size: 32rpx;
  388. font-family: PingFang SC;
  389. font-weight: bold;
  390. color: #333333;
  391. }
  392. .good-wrapper .good .good-info .info-price {
  393. font-size: 36rpx;
  394. font-family: PingFang SC;
  395. font-weight: bold;
  396. color: #FFC000;
  397. line-height: 35px;
  398. position: absolute;
  399. bottom: 0;
  400. left: 22rpx;
  401. display: -webkit-box;
  402. display: -webkit-flex;
  403. display: flex;
  404. -webkit-box-align: center;
  405. -webkit-align-items: center;
  406. align-items: center;
  407. }