index.wxss 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
  1. /**index.wxss**/
  2. /* pages/home/home.wxss */
  3. page {
  4. height: auto !important;
  5. }
  6. .swiperNo {
  7. width: 100%;
  8. height: 500rpx;
  9. }
  10. .swiperNo image {
  11. width: 100%;
  12. height: 500rpx;
  13. }
  14. .businessTitle {
  15. font-weight: 600;
  16. font-size: 28rpx;
  17. color: #232323;
  18. line-height: 42rpx;
  19. padding: 0 24rpx;
  20. margin-top: 30rpx;
  21. }
  22. .businessTitle1 {
  23. margin-top: 10rpx;
  24. }
  25. .business {
  26. padding: 20rpx 24rpx 0 24rpx;
  27. /* display: flex;
  28. flex-wrap: wrap;
  29. align-items: center;
  30. justify-content: space-between; */
  31. }
  32. .businessItem {
  33. display: inline-block;
  34. position: relative;
  35. margin-bottom: 30rpx;
  36. margin-right: 21rpx;
  37. }
  38. .businessText {
  39. position: absolute;
  40. top: 12rpx;
  41. left: 12rpx;
  42. font-weight: 600;
  43. font-size: 18rpx;
  44. color: #1C1C1C;
  45. line-height: 26rpx;
  46. white-space: pre-wrap;
  47. }
  48. .business image {
  49. display: inline-block;
  50. width: 160rpx;
  51. height: 200rpx;
  52. }
  53. .businessItem:nth-child(4n) {
  54. margin-right: 0 !important;
  55. }
  56. .contact {
  57. width: 100%;
  58. height: 272rpx;
  59. background: url("http://voms.cdn.bosind.com/upload/bd7c420c458b48809315d10ad8438c14.png");
  60. background-size: 100%;
  61. background-repeat: no-repeat;
  62. font-weight: 400;
  63. font-size: 20rpx;
  64. color: #000000;
  65. line-height: 32rpx;
  66. padding-top: 24rpx;
  67. padding-left: 24rpx;
  68. white-space: pre-wrap;
  69. box-sizing: border-box;
  70. }
  71. .login {
  72. height: 96rpx;
  73. line-height: 96rpx;
  74. background: #1E1E1E;
  75. color: white;
  76. text-align: center;
  77. }
  78. .page {
  79. /* background-color: rgba(0, 0, 0, 0); */
  80. background-color: #F8F8F8;
  81. }
  82. .custom {
  83. position: sticky;
  84. width: 100%;
  85. top: 0;
  86. left: 0;
  87. z-index: 999;
  88. height: 80rpx;
  89. display: flex;
  90. align-items: center;
  91. justify-content: center;
  92. background-color: rgba(0, 0, 0, 0);
  93. /* padding-left: 40rpx; */
  94. background: #FFFFFF;
  95. text-align: center;
  96. }
  97. .customBg {
  98. background: #FFFFFF;
  99. transition: all .5s;
  100. }
  101. .swiper {
  102. width: 750rpx;
  103. height: 360rpx;
  104. }
  105. .swiper image {
  106. width: 750rpx;
  107. height: 360rpx;
  108. }
  109. .search {
  110. height: 68rpx;
  111. background: #FFFFFF;
  112. margin: 24rpx 20rpx 24rpx 20rpx;
  113. position: relative;
  114. }
  115. .search input {
  116. width: 100%;
  117. height: 100%;
  118. font-weight: 500;
  119. font-size: 28rpx;
  120. padding: 20rpx;
  121. padding-right: 60rpx;
  122. box-sizing: border-box;
  123. }
  124. .search icon {
  125. position: absolute;
  126. right: 15rpx;
  127. top: 14rpx;
  128. font-size: 28rpx;
  129. }
  130. .menu {
  131. padding: 30rpx 0;
  132. background: #FFFFFF;
  133. /* overflow: hidden; */
  134. /* overflow-x: auto; */
  135. /* white-space: nowrap; */
  136. }
  137. .menu-item {
  138. display: inline-block;
  139. width: 106rpx;
  140. margin: 0 22rpx;
  141. box-sizing: border-box;
  142. text-align: center;
  143. margin-bottom: 20rpx;
  144. vertical-align: top;
  145. }
  146. .menu-item image {
  147. width: 64rpx;
  148. height: 64rpx;
  149. }
  150. .menu-item .text {
  151. display: block;
  152. font-size: 24rpx;
  153. color: #0D0D0D;
  154. text-align: center;
  155. /* width: 116rpx; */
  156. overflow: hidden;
  157. white-space: nowrap;
  158. text-overflow: clip;
  159. }
  160. .floorTitle {
  161. line-height: 80rpx;
  162. font-weight: 600;
  163. font-size: 28rpx;
  164. color: #000000;
  165. text-align: center;
  166. }
  167. .goodsPanel {
  168. padding: 0 24rpx;
  169. background: #FFFFFF;
  170. }
  171. .goodsQuery {
  172. position: sticky;
  173. top: 116rpx;
  174. background: #FFFFFF;
  175. }
  176. .queryItem {
  177. display: inline-block;
  178. font-size: 28rpx;
  179. line-height: 96rpx;
  180. margin-right: 45rpx;
  181. }
  182. .queryItem:nth-child(2) {
  183. content: "\e617";
  184. }
  185. .queryItem:last-child {
  186. float: right;
  187. margin-right: 0;
  188. vertical-align: middle;
  189. top: 0;
  190. }
  191. .queryItem icon {
  192. vertical-align: middle;
  193. /* height: 62rpx; */
  194. }
  195. .zonghe {
  196. color: #A2A2A2;
  197. }
  198. .zonghe::after {
  199. content: '' !important;
  200. }
  201. .xiaoliang {
  202. vertical-align: middle;
  203. color: #A2A2A2;
  204. }
  205. .xiaoliang::after {
  206. vertical-align: middle;
  207. padding-left: 5rpx;
  208. color: #D9D9D9;
  209. content: "\e625";
  210. }
  211. .xiaoliang.ups::after {
  212. content: "\e623" !important;
  213. }
  214. .xiaoliang.downs::after {
  215. content: "\e624" !important;
  216. }
  217. .zonghe.ups,
  218. .shaixuan.ups,
  219. .xiaoliang.ups,
  220. .xiaoliang.downs {
  221. color: #000000;
  222. }
  223. .jiage {
  224. vertical-align: middle;
  225. }
  226. .jiage::after {
  227. vertical-align: middle;
  228. padding-left: 5rpx;
  229. content: "\e625";
  230. }
  231. .shaixuan {
  232. vertical-align: middle;
  233. position: relative;
  234. color: #A2A2A2;
  235. /* padding-right: 36rpx; */
  236. }
  237. .shaixuan::after {
  238. vertical-align: middle;
  239. padding-left: 10rpx;
  240. content: "\e61e";
  241. }
  242. .goodsList {
  243. display: flex;
  244. justify-content: space-between;
  245. flex-wrap: wrap
  246. }
  247. .goods {
  248. width: 342rpx;
  249. height: 496rpx;
  250. background: #FFFFFF;
  251. }
  252. .goods image {
  253. width: 342rpx;
  254. height: 342rpx;
  255. background-color: #F8F8F8;
  256. }
  257. .goods .name {
  258. font-weight: 400;
  259. font-size: 24rpx;
  260. color: #0D0D0D;
  261. line-height: 36rpx;
  262. padding: 0 22rpx;
  263. margin: 12rpx 0;
  264. height: 72rpx;
  265. }
  266. .goods .bar {
  267. padding: 0 22rpx;
  268. padding-bottom: 20rpx;
  269. display: flex;
  270. justify-content: space-between
  271. }
  272. .goods .bar .price {
  273. flex: 1;
  274. /* float: left; */
  275. font-weight: bold;
  276. font-size: 28rpx;
  277. color: #202020;
  278. vertical-align: middle;
  279. }
  280. .goods .bar .icon {
  281. /* float: right; */
  282. font-size: 28rpx;
  283. color: #00BC8A;
  284. margin-top: 6rpx;
  285. }
  286. .goods .bar::after {
  287. content: "";
  288. display: table;
  289. clear: both;
  290. }
  291. .icon-guanbi {
  292. position: absolute;
  293. top: 22rpx;
  294. right: 42rpx;
  295. color: #D9D9D9;
  296. }
  297. .shaixuanBox {
  298. padding: 0 24rpx;
  299. }
  300. .shaixuanBoxTitle {
  301. font-weight: 600;
  302. font-size: 32rpx;
  303. color: #000000;
  304. }
  305. .shaixuanBoxBrand {
  306. padding: 40rpx 0;
  307. display: flex;
  308. justify-content: space-between;
  309. flex-wrap: wrap;
  310. }
  311. .shaixuanBoxBrand::after {
  312. min-width: 214rpx;
  313. content: "";
  314. }
  315. .shaixuanBoxBrand view {
  316. width: 214rpx;
  317. height: 68rpx;
  318. font-weight: 400;
  319. font-size: 28rpx;
  320. text-align: center;
  321. color: #000000;
  322. line-height: 68rpx;
  323. background: #F8F8F8;
  324. border-radius: 8rpx 8rpx 8rpx 8rpx;
  325. margin-bottom: 16rpx;
  326. padding: 0 10rpx;
  327. box-sizing: border-box;
  328. }
  329. .shaixuanBoxBrand view.active {
  330. color: #FFFFFF;
  331. background: linear-gradient(180deg, #0D0D0D 0%, #4F4F4F 100%);
  332. }
  333. .shaixuanBoxPrice {
  334. padding: 40rpx 0;
  335. display: flex;
  336. justify-content: space-between;
  337. flex-wrap: nowrap;
  338. }
  339. .shaixuanBoxPrice input {
  340. width: 324rpx;
  341. height: 68rpx;
  342. border-radius: 8rpx 8rpx 8rpx 8rpx;
  343. border: 1rpx solid #A2A2A2;
  344. padding: 0 20rpx;
  345. box-sizing: border-box;
  346. text-align: center;
  347. }
  348. .shaixuanBoxBtn {
  349. display: flex;
  350. justify-content: space-between;
  351. flex-wrap: nowrap;
  352. margin-bottom: 70rpx;
  353. }
  354. .shaixuanBoxBtn button {
  355. width: 264rpx;
  356. height: 92rpx;
  357. background: #EEEEEE;
  358. border-radius: 8rpx 8rpx 8rpx 8rpx;
  359. text-align: center;
  360. line-height: 92rpx;
  361. font-weight: 500;
  362. font-size: 32rpx;
  363. padding: 0;
  364. margin: 0;
  365. }
  366. .shaixuanBoxBtn button:last-child {
  367. /* width: 407rpx; */
  368. color: white !important;
  369. background: #00BC8A !important;
  370. border-radius: 8rpx 8rpx 8rpx 8rpx;
  371. }