C端小程序
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.

347 lines
6.1 KiB

  1. /* pages/spellGroup/spellGroup.wxss */
  2. .topbg image{
  3. display: block;
  4. width: 100%;
  5. }
  6. .topbg {
  7. position: relative;
  8. }
  9. .topbg text{
  10. position: absolute;
  11. left: 0;
  12. right: 0;
  13. text-align: center;
  14. font-size: 32rpx;
  15. color: #fff;
  16. }
  17. .topbg .my{
  18. top:25rpx;
  19. }
  20. .topbg .score{
  21. top:60rpx;
  22. font-size: 56rpx;
  23. font-weight: bold;
  24. }
  25. page {
  26. height: auto;
  27. overflow: auto;
  28. background: #f7f7f7;
  29. /* background-image: url('https://s3.cn-northwest-1.amazonaws.com.cn/iformall-net/cimg/spell-bg.png'); */
  30. background-size: cover;
  31. background-repeat: no-repeat;
  32. }
  33. .content-box{
  34. height: auto;
  35. padding-bottom: 200rpx;
  36. }
  37. .loading {
  38. text-align: center;
  39. height: 80rpx;
  40. line-height: 80rpx;
  41. font-size: 26rpx;
  42. color: #666;
  43. }
  44. .loading image {
  45. width: 60rpx;
  46. height: 60rpx;
  47. vertical-align: middle;
  48. margin-right: 10rpx;
  49. }
  50. .banner{
  51. margin-bottom: 20rpx;
  52. background: none;
  53. border-radius: 16rpx;
  54. }
  55. .banner .bg {
  56. display: block;
  57. width: 100%;
  58. }
  59. image{
  60. padding: 0;
  61. margin: 0;
  62. }
  63. .banner .bannerbg image{
  64. display: none!important;
  65. height: 0;
  66. overflow: hidden;
  67. }
  68. .bannerimg {
  69. display: block;
  70. width: 710rpx;
  71. height: 260rpx;
  72. border-radius: 15rpx;
  73. margin: -132rpx auto 0;
  74. }
  75. .banner .index-slide-view {
  76. margin: -132rpx auto 0;
  77. }
  78. .top{
  79. position: absolute;
  80. top: 30rpx;
  81. width: 710rpx;
  82. height: 260rpx;
  83. background: #fff;
  84. left: 20rpx;
  85. border-radius: 16rpx;
  86. overflow: hidden;
  87. }
  88. .content .sepll-list{
  89. width: 690rpx;
  90. height: 230rpx;
  91. background: #fff;
  92. border-radius: 30rpx;
  93. margin: 0 auto 30rpx;
  94. }
  95. .content .spell-left{
  96. width: 230rpx;
  97. height: 230rpx;
  98. float: left;
  99. }
  100. .content .spell-left image{
  101. width: 180rpx;
  102. height: 180rpx;
  103. margin: 25rpx;
  104. }
  105. .content .spell-center{
  106. float: left;
  107. width: 304rpx;
  108. height: 100%;
  109. }
  110. .content .tilte{
  111. font-size:30rpx;
  112. font-family:PingFang-SC-Bold;
  113. font-weight:bold;
  114. color:rgba(51,51,51,1);
  115. line-height:44rpx;
  116. padding-top: 16rpx;
  117. overflow: hidden;
  118. text-overflow:ellipsis;
  119. white-space: nowrap;
  120. }
  121. .content .remark{
  122. width:304rpx;
  123. font-size:24rpx;
  124. font-family:PingFang-SC-Medium;
  125. font-weight:500;
  126. color:rgba(140,140,140,1);
  127. line-height:44rpx;
  128. overflow: hidden;
  129. text-overflow:ellipsis;
  130. white-space: nowrap;
  131. }
  132. .content .spell-num{
  133. width: 95rpx;
  134. border:1px solid rgba(255,50,50,1);
  135. border-radius:10rpx;
  136. font-size:24rpx;
  137. font-family:PingFang-SC-Medium;
  138. font-weight:500;
  139. color:rgba(255,50,50,1);
  140. line-height:30rpx;
  141. margin: 10rpx 0;
  142. text-align: center;
  143. }
  144. .content .price{
  145. overflow: hidden;
  146. margin-top: 10rpx;
  147. }
  148. .content .price01{
  149. font-size:50rpx;
  150. font-family:PingFang-SC-Medium;
  151. font-weight:500;
  152. color:rgba(255,50,50,1);
  153. line-height:44rpx;
  154. }
  155. .content .price02{
  156. font-size: 24rpx;
  157. font-family:PingFang-SC-Medium;
  158. font-weight:500;
  159. text-decoration:line-through;
  160. color:rgba(140,140,140,1);
  161. }
  162. .content .price-num{
  163. display: inline;
  164. }
  165. .content .price-unit{
  166. display: inline;
  167. font-size:24rpx;
  168. margin-right: 10rpx;
  169. }
  170. .content .spell-right{
  171. float: left;
  172. width: 156rpx;
  173. }
  174. .right-button{
  175. width:120rpx;
  176. height:48rpx;
  177. font-size:26rpx;
  178. background:linear-gradient(90deg,rgba(236,59,45,1) 0%,rgba(248,98,52,1) 100%);
  179. border-radius:8rpx;
  180. font-family:PingFang-SC-Medium;
  181. font-weight:500;
  182. text-align: center;
  183. color:rgba(255,255,255,1);
  184. line-height:44rpx;
  185. margin: 110rpx auto 0;
  186. margin-top: 110rpx;
  187. }
  188. .right-text{
  189. font-size:22rpx;
  190. font-family:PingFang-SC-Medium;
  191. font-weight:500;
  192. color:rgba(140,140,140,1);
  193. line-height:60rpx;
  194. text-align: center;
  195. }
  196. .bottom{
  197. width: 690rpx;
  198. height: 85rpx;
  199. position: fixed;
  200. bottom: 26rpx;
  201. left: 30rpx;
  202. /* background:rgba(243,69,58,1); */
  203. border:1px solid rgba(255, 222, 67, 1);
  204. border-radius:40px;
  205. color: #fff;
  206. overflow: hidden;
  207. }
  208. .bottom-left{
  209. width: 50%;
  210. float: left;
  211. margin-left: -1rpx;
  212. text-align: center;
  213. line-height: 85rpx;
  214. font-size:30rpx;
  215. font-family:PingFang-SC-Medium;
  216. font-weight:500;
  217. color:rgba(255,253,245,1);
  218. border-right:1px solid rgba(255, 222, 67, 1);
  219. opacity: 1;
  220. }
  221. .bottom-right{
  222. width: 50%;
  223. float: left;
  224. text-align: center;
  225. line-height: 85rpx;
  226. font-size:30rpx;
  227. font-family:PingFang-SC-Medium;
  228. font-weight:500;
  229. color:rgba(255,253,245,1);
  230. opacity: 1;
  231. }
  232. .spell-bottom{
  233. overflow: hidden;
  234. }
  235. .spell-top{
  236. height: auto;
  237. margin: 0 30rpx;
  238. overflow: hidden;
  239. box-sizing: border-box;
  240. border-bottom: 1rpx solid #EEEEEE;
  241. }
  242. .spell-top-left{
  243. float: left;
  244. width: 60%;
  245. }
  246. .spell-top-right{
  247. float: left;
  248. width: 40%;
  249. }
  250. .top-title{
  251. display: inline;
  252. font-size:24rpx;
  253. font-family:PingFang-SC-Medium;
  254. font-weight:500;
  255. color:rgba(51,51,51,1);
  256. line-height:64rpx;
  257. }
  258. .top-num{
  259. display: inline;
  260. font-size:24rpx;
  261. font-family:PingFang-SC-Medium;
  262. font-weight:500;
  263. color:#FF3232;
  264. line-height:64rpx;
  265. padding-left: 8rpx;
  266. }
  267. .spell-top-right{
  268. text-align: right;
  269. font-size:26rpx;
  270. font-family:PingFang-SC-Medium;
  271. font-weight:500;
  272. color:rgba(255,50,50,1);
  273. line-height:64rpx;
  274. }
  275. .no-data01{
  276. width: 690rpx;
  277. padding-top: 174rpx;
  278. height: calc(100vh - 460rpx);
  279. background: #fff;
  280. margin: 0 auto;
  281. border-radius:15rpx;
  282. box-sizing: border-box;
  283. margin-top: 20rpx;
  284. }
  285. .no-data{
  286. width: 690rpx;
  287. padding-top: 174rpx;
  288. height: calc(100vh - 160rpx);
  289. background: #fff;
  290. margin: 0 auto;
  291. border-radius:15rpx;
  292. box-sizing: border-box;
  293. margin-top:20rpx;
  294. }
  295. .no-data01 image{
  296. width: 261rpx;
  297. height: 272rpx;
  298. display: block;
  299. margin: 0 auto;
  300. }
  301. .no-data image{
  302. width: 261rpx;
  303. height: 272rpx;
  304. display: block;
  305. margin: 0 auto;
  306. }
  307. .no-data-text{
  308. text-align: center;
  309. font-size:34rpx;
  310. font-family:PingFang-SC-Medium;
  311. font-weight:500;
  312. color:rgba(0,0,0,1);
  313. }
  314. .hottitle{
  315. height: 100rpx;
  316. line-height: 100rpx;
  317. }
  318. .hottitle text{
  319. color: #333;
  320. font-weight: bold;
  321. font-size: 36rpx;
  322. padding-left: 30rpx;
  323. }
  324. button::after{ border: none; }
  325. .goback{
  326. position: fixed;
  327. right: 50rpx;
  328. bottom: 60rpx;
  329. width:100rpx!important;
  330. height:100rpx;
  331. z-index: 100;
  332. background:rgba(255,255,255,1);
  333. line-height: 95rpx;
  334. border:1rpx solid rgba(227,227,227,1);
  335. border-radius:50%;
  336. }
  337. .goback image{
  338. position: absolute;
  339. width: 60rpx;
  340. left: 0;
  341. right: 0;
  342. top: 0;
  343. bottom: 0;
  344. margin: auto;
  345. }