C端小程序
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

294 lines
5.4 KiB

  1. /* pages/spellDetail/index.wxss */
  2. page {
  3. height: auto;
  4. overflow: auto;
  5. background: #f89132;
  6. background-image: url('https://s3.cn-northwest-1.amazonaws.com.cn/iformall-net/cimg/spelldetail-bg.png');
  7. background-size: cover;
  8. background-repeat: no-repeat;
  9. }
  10. .status{
  11. width: 690rpx;
  12. padding:0 28rpx;
  13. margin: 0 auto;
  14. box-sizing: border-box;
  15. background:rgba(255,255,255,1);
  16. border-radius:15rpx;
  17. }
  18. .status-top{
  19. width: 100%;
  20. height: 75rpx;
  21. box-sizing: border-box;
  22. border-bottom: 1rpx solid #F9F9F9;
  23. /* overflow: hidden; */
  24. }
  25. .p-status{
  26. float: left;
  27. width: 260rpx;
  28. font-size:32rpx;
  29. font-family:PingFang-SC-Bold;
  30. font-weight:bold;
  31. color:rgba(243,69,58,1);
  32. line-height: 75rpx;
  33. }
  34. .p-time{
  35. float: right;
  36. font-size:26rpx;
  37. font-family:PingFang-SC-Medium;
  38. font-weight:500;
  39. color:rgba(243,69,58,1);
  40. width: 38rpx;
  41. height: 30rpx;
  42. margin-top: 22rpx;
  43. background:rgba(252,220,221,1);
  44. border-radius:10rpx;
  45. line-height: 30rpx;
  46. text-align: center;
  47. margin: 22rpx 6rpx;
  48. }
  49. .p-mao{
  50. float: right;
  51. font-size:26rpx;
  52. font-family:PingFang-SC-Medium;
  53. font-weight:500;
  54. color:rgba(243,69,58,1);
  55. line-height: 75rpx;
  56. }
  57. .p-text{
  58. float: right;
  59. font-size:26rpx;
  60. font-family:PingFang-SC-Regular;
  61. font-weight:400;
  62. color:rgba(51,51,51,1);
  63. line-height:75rpx;
  64. }
  65. .status-center{
  66. width: 100%;
  67. overflow: hidden;
  68. padding: 20rpx 0;
  69. text-align: center;
  70. border-bottom: 1rpx solid #F9F9F9;
  71. }
  72. .tuanzhang{
  73. display: inline-block;
  74. width: 80rpx;
  75. height: 80rpx;
  76. position: relative;
  77. }
  78. .touxiangitems{
  79. margin: 20rpx;
  80. }
  81. .touxiang{
  82. width: 80rpx;
  83. height: 80rpx;
  84. border-radius: 40rpx;
  85. overflow: hidden;
  86. }
  87. .no-touxiang{
  88. width: 80rpx;
  89. height: 80rpx;
  90. overflow: hidden;
  91. background:rgba(252,220,221,1);
  92. border:1rpx solid rgba(243,69,58,1);
  93. border-radius:50%;
  94. box-sizing: border-box;
  95. line-height: 78rpx;
  96. text-align: center;
  97. font-size:32rpx;
  98. font-family:PingFang-SC-Regular;
  99. font-weight:400;
  100. color:rgba(243,69,58,1);
  101. }
  102. .touxiang image{
  103. width: 80rpx;
  104. height: 80rpx;
  105. }
  106. .tuan-icon{
  107. position: absolute;
  108. bottom: 20rpx;
  109. left: 8rpx;
  110. width: 64rpx;
  111. height: 27rpx;
  112. }
  113. .tuan-icon image{
  114. width: 64rpx;
  115. height: 27rpx;
  116. }
  117. .status-bottom{
  118. width: 100%;
  119. height: auto;
  120. overflow: hidden;
  121. }
  122. .position-icon{
  123. width: 38rpx;
  124. float: left;
  125. }
  126. .position-icon image{
  127. width: 27rpx;
  128. height: 37rpx;
  129. margin-top: 17rpx;
  130. }
  131. .position{
  132. font-size:28rpx;
  133. font-family:PingFang-SC-Medium;
  134. font-weight:500;
  135. color:rgba(51,51,51,1);
  136. line-height: 72rpx;
  137. }
  138. .detail{
  139. width: 690rpx;
  140. padding:0 28rpx;
  141. margin: 30rpx auto 0;
  142. box-sizing: border-box;
  143. background:rgba(255,255,255,1);
  144. border-radius:15rpx;
  145. }
  146. .detail-top{
  147. width: 100%;
  148. height: auto;
  149. overflow: hidden;
  150. padding-bottom: 12rpx;
  151. }
  152. .detail-top01{
  153. float: left;
  154. width: 180rpx;
  155. }
  156. .detail-top01 image{
  157. width: 180rpx;
  158. height: 180rpx;
  159. margin-top: 33rpx;
  160. }
  161. .detail-top02{
  162. width: 208rpx;
  163. float: left;
  164. margin-left: 16rpx;
  165. }
  166. .title{
  167. font-size:30rpx;
  168. font-family:PingFang-SC-Bold;
  169. font-weight:bold;
  170. color:rgba(51,51,51,1);
  171. line-height:44rpx;
  172. margin-top: 30rpx;
  173. }
  174. .des{
  175. font-size:26rpx;
  176. font-family:PingFang-SC-Medium;
  177. font-weight:500;
  178. color:rgba(134,134,134,1);
  179. line-height:40rpx;
  180. }
  181. .detail-top03{
  182. float: left;
  183. padding-top: 170rpx;
  184. width: 230rpx;
  185. }
  186. .detail-p-name{
  187. float: right;
  188. font-size:26rpx;
  189. font-family:PingFang-SC-Medium;
  190. font-weight:500;
  191. color:rgba(134,134,134,1);
  192. line-height:44rpx;
  193. }
  194. .detail-p-price{
  195. float: right;
  196. font-size:26rpx;
  197. font-family:PingFang-SC-Medium;
  198. font-weight:500;
  199. color:rgba(51,51,51,1);
  200. }
  201. .detail-bottom{
  202. border-top: 1rpx solid #F9F9F9;
  203. width: 100%;
  204. overflow: hidden;
  205. height: 86rpx;
  206. }
  207. .b-unit{
  208. float: right;
  209. font-size:24rpx;
  210. font-family:PingFang-SC-Medium;
  211. font-weight:500;
  212. color:rgba(237,63,46,1);
  213. margin-top: 36rpx;
  214. }
  215. .b-price{
  216. float: right;
  217. font-size:40rpx;
  218. font-family:PingFang-SC-Medium;
  219. font-weight:500;
  220. color:rgba(237,63,46,1);
  221. margin-top: 18rpx;
  222. }
  223. .b-name{
  224. float: right;
  225. font-size:26rpx;
  226. font-family:PingFang-SC-Medium;
  227. font-weight:500;
  228. color:rgba(51,51,51,1);
  229. margin-right: 6rpx;
  230. margin-top: 34rpx;
  231. }
  232. .order{
  233. width: 690rpx;
  234. padding:10rpx 28rpx;
  235. margin: 30rpx auto 0;
  236. box-sizing: border-box;
  237. background:rgba(255,255,255,1);
  238. border-radius:15rpx;
  239. }
  240. .order-list{
  241. height: 55rpx;
  242. }
  243. .order-title{
  244. line-height: 55rpx;
  245. float: left;
  246. font-size:26rpx;
  247. font-family:PingFang-SC-Medium;
  248. font-weight:500;
  249. color:rgba(51,51,51,1);
  250. }
  251. .order-text{
  252. float: right;
  253. text-align: right;
  254. line-height: 55rpx;
  255. font-size:26rpx;
  256. font-family:PingFang-SC-Medium;
  257. font-weight:500;
  258. color:rgba(134,134,134,1);
  259. }
  260. .user-motto {
  261. border: 0;
  262. width:650rpx;
  263. height:85rpx;
  264. background:linear-gradient(90deg,rgba(248,85,45,1) 0%,rgba(241,60,66,1) 0%,rgba(248,86,46,1) 100%);
  265. box-shadow:0px 8rpx 8rpx 1rpx rgba(242,61,65,0.32);
  266. border-radius:43rpx;
  267. font-size:36rpx;
  268. font-family:PingFang-SC-Medium;
  269. font-weight:500;
  270. color:rgba(254,254,254,1);
  271. line-height: 85rpx;
  272. margin-top: 200rpx;
  273. }
  274. .user-motto::after {
  275. border: none;
  276. }
  277. .button button:nth-of-type(1){
  278. width:520rpx;
  279. height:95rpx;
  280. margin: 30rpx auto 38rpx;
  281. background:linear-gradient(90deg,rgba(248,85,45,1) 0%,rgba(241,60,66,1) 0%,rgba(248,86,46,1) 100%);
  282. border-radius:47rpx;
  283. color: #fff;
  284. }
  285. .button button:nth-of-type(2){
  286. width:520rpx;
  287. height:95rpx;
  288. background:rgba(255,255,255,1);
  289. border:1rpx solid rgba(190,190,190,1);
  290. border-radius:47rpx;
  291. color:#333333;
  292. margin-bottom: 50rpx;
  293. }