index.wxss 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  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. /* Border Radius */
  23. /* 水平间距 */
  24. /* 垂直间距 */
  25. /* 透明度 */
  26. /* 文章场景相关 */
  27. .top-cont {
  28. width: 100%;
  29. height: 494rpx;
  30. position: relative;
  31. background-image: url(data:image/png;base64,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);
  32. background-repeat: repeat-x;
  33. background-size: 40rpx 100%;
  34. }
  35. .top-cont .top-inner {
  36. width: 100%;
  37. height: 100%;
  38. position: absolute;
  39. top: 0;
  40. left: 0;
  41. z-index: 2;
  42. }
  43. .top-cont .top-inner .user-info {
  44. padding: 88rpx 30rpx 0 30rpx;
  45. display: flex;
  46. align-items: center;
  47. justify-content: space-between;
  48. }
  49. .top-cont .top-inner .user-info .left {
  50. position: relative;
  51. display: flex;
  52. }
  53. .top-cont .top-inner .user-info .left .head-img {
  54. width: 120rpx;
  55. height: 120rpx;
  56. border-radius: 50%;
  57. overflow: hidden;
  58. margin-right: 30rpx;
  59. border: 4rpx solid #FFFFFF;
  60. box-shadow: 0px 5px 15px 2px rgba(0, 0, 0, 0.1);
  61. }
  62. .top-cont .top-inner .user-info .left .head-img image {
  63. width: 100%;
  64. height: 100%;
  65. }
  66. .top-cont .top-inner .user-info .left .name-phone {
  67. padding-top: 15rpx;
  68. }
  69. .top-cont .top-inner .user-info .left .name-phone .name {
  70. font-size: 40rpx;
  71. font-family: PingFang SC;
  72. font-weight: bold;
  73. color: #111111;
  74. line-height: 1;
  75. }
  76. .top-cont .top-inner .user-info .left .name-phone .phone {
  77. font-size: 28rpx;
  78. font-family: PingFang SC;
  79. font-weight: 500;
  80. color: #666666;
  81. line-height: 1;
  82. margin-top: 30rpx;
  83. }
  84. .top-cont .top-inner .user-info .right {
  85. display: flex;
  86. align-items: center;
  87. justify-content: center;
  88. }
  89. .top-cont .top-inner .user-info .right .msg-box {
  90. margin-left: 10rpx;
  91. width: 44rpx;
  92. height: 44rpx;
  93. }
  94. .top-cont .top-inner .user-info .right .msg-box image {
  95. width: 100%;
  96. height: 100%;
  97. }
  98. .top-cont .top-inner .user-info .right .set {
  99. width: 44rpx;
  100. height: 44rpx;
  101. }
  102. .top-cont .top-inner .user-info .right .set image {
  103. width: 100%;
  104. height: 100%;
  105. }
  106. .top-cont .top-inner .my-order {
  107. padding: 50rpx 20rpx 0;
  108. }
  109. .top-cont .top-inner .my-order .inner {
  110. box-sizing: border-box;
  111. height: 245rpx;
  112. background: #FFFFFF;
  113. border-radius: 16rpx;
  114. padding: 40rpx 30rpx;
  115. display: flex;
  116. flex-direction: column;
  117. justify-content: space-between;
  118. }
  119. .top-cont .top-inner .my-order .inner .title-box {
  120. display: flex;
  121. align-items: center;
  122. justify-content: space-between;
  123. }
  124. .top-cont .top-inner .my-order .inner .title-box .title {
  125. font-size: 34rpx;
  126. font-family: PingFang SC;
  127. font-weight: bold;
  128. color: #222222;
  129. line-height: 1;
  130. }
  131. .top-cont .top-inner .my-order .inner .title-box .all-order {
  132. display: flex;
  133. align-items: center;
  134. }
  135. .top-cont .top-inner .my-order .inner .title-box .all-order .text {
  136. font-size: 26rpx;
  137. font-family: PingFang SC;
  138. font-weight: 500;
  139. color: #999999;
  140. line-height: 1;
  141. margin-right: 8rpx;
  142. }
  143. .top-cont .top-inner .my-order .inner .title-box .all-order image {
  144. width: 14rpx;
  145. height: 24rpx;
  146. }
  147. .top-cont .top-inner .my-order .inner .status-box {
  148. display: flex;
  149. align-items: center;
  150. justify-content: space-between;
  151. padding: 0 10rpx;
  152. }
  153. .top-cont .top-inner .my-order .inner .status-box .item {
  154. display: flex;
  155. flex-direction: column;
  156. align-items: center;
  157. justify-content: center;
  158. }
  159. .top-cont .top-inner .my-order .inner .status-box .item image {
  160. width: 40rpx;
  161. height: 40rpx;
  162. margin-bottom: 18rpx;
  163. }
  164. .top-cont .top-inner .my-order .inner .status-box .item .text {
  165. font-size: 26rpx;
  166. font-family: PingFang SC;
  167. font-weight: 500;
  168. color: #111111;
  169. line-height: 1;
  170. }
  171. .content {
  172. margin-top: 20rpx;
  173. padding: 0 20rpx;
  174. display: flex;
  175. align-items: center;
  176. justify-content: center;
  177. }
  178. .content .used-tools {
  179. box-sizing: border-box;
  180. background: #FFFFFF;
  181. border-radius: 16rpx;
  182. padding: 40rpx 30rpx;
  183. }
  184. .content .used-tools .title {
  185. font-size: 34rpx;
  186. font-family: PingFang SC;
  187. font-weight: bold;
  188. color: #222222;
  189. line-height: 1;
  190. }
  191. .content .used-tools .tools-list {
  192. margin-top: 50rpx;
  193. display: flex;
  194. flex-wrap: wrap;
  195. width: 100%;
  196. }
  197. .content .used-tools .tools-list .item {
  198. box-sizing: border-box;
  199. width: 25%;
  200. display: flex;
  201. flex-direction: column;
  202. align-items: center;
  203. justify-content: center;
  204. margin-bottom: 50rpx;
  205. position: relative;
  206. }
  207. .content .used-tools .tools-list .item image {
  208. width: 44rpx;
  209. height: 44rpx;
  210. }
  211. .content .used-tools .tools-list .item .text {
  212. font-size: 24rpx;
  213. font-family: PingFang SC;
  214. font-weight: 500;
  215. color: #111111;
  216. line-height: 1;
  217. margin-top: 20rpx;
  218. }
  219. .content .used-tools .tools-list .item .contact-btn {
  220. display: inline-block;
  221. position: absolute;
  222. top: 0;
  223. left: 0;
  224. width: 100%;
  225. height: 100%;
  226. opacity: 0;
  227. }
  228. .sub-btn {
  229. position: absolute;
  230. width: 100%;
  231. height: 100%;
  232. opacity: 0;
  233. }
  234. .like-product {
  235. padding: 0 20rpx;
  236. }
  237. .banner {
  238. padding: 20rpx 20rpx 0rpx 20rpx;
  239. height: 200rpx;
  240. position: relative;
  241. display: flex;
  242. align-items: center;
  243. justify-content: center;
  244. }
  245. .banner image {
  246. width: 100%;
  247. height: 100%;
  248. }
  249. .banner .tel_btn {
  250. width: 100%;
  251. height: 100%;
  252. top: 0rpx;
  253. position: absolute;
  254. opacity: 0.0;
  255. }
  256. .log-out {
  257. height: 80rpx;
  258. line-height: 80rpx;
  259. text-align: center;
  260. font-size: 26rpx;
  261. font-family: PingFang SC;
  262. font-weight: 500;
  263. color: #666666;
  264. background: #FFFFFF;
  265. border-radius: 16rpx;
  266. margin-top: 20rpx;
  267. }