share.wxss 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. /* package-basic-data/pages/share/share.wxss */
  2. page {
  3. background: #F8F9FD;
  4. }
  5. .content {
  6. display: flex;
  7. flex-direction: column;
  8. padding: 20rpx 10px 0rpx 10px;
  9. }
  10. .user-card {
  11. width: auto;
  12. border: 1px solid #F3FBFF;
  13. padding: 50rpx 35rpx 0rpx 35rpx;
  14. border-radius: 30rpx;
  15. background-color: #FFFF;
  16. background: radial-gradient(65.52% 61.17% at 6.12% 18.49%, #CDD8FF 0%, #F3FAFF 100%);
  17. position: relative;
  18. }
  19. .user-card-backgorund {
  20. width: auto;
  21. position: relative;
  22. bottom: 0;
  23. }
  24. .user-card-backgorund .scan-image {
  25. width: 200rpx;
  26. height: 200rpx;
  27. position: absolute;
  28. bottom: 0;
  29. right: 0;
  30. }
  31. .user-card-info {
  32. width: 100%;
  33. display: flex;
  34. }
  35. .user-card-info .info-title {
  36. width: 100%;
  37. display: flex;
  38. }
  39. .user-card-info .title-info .cp-info {
  40. display: flex;
  41. font-size: 16px;
  42. justify-content: flex-start;
  43. align-items: center;
  44. }
  45. .user-card-info .title-info .cp-info .PRO {
  46. background: linear-gradient(77.62deg, #CAA977 12.58%, #FFDA7A 85.49%),
  47. conic-gradient(from 154.5deg at 29.17% -8.33%, #FFE8BA -0.56deg, rgba(255, 230, 165, 0) 0.26deg, rgba(227, 184, 73, 0.34) 17.37deg, rgba(240, 187, 253, 0.23) 347.83deg, rgba(186, 234, 255, 0.38) 353.78deg, #FFE8BA 359.44deg, rgba(255, 230, 165, 0) 360.26deg);
  48. color: #51370F;
  49. border: 0.56rpx solid;
  50. border-image-source: linear-gradient(235.56deg, #A68224 15.82%, #FFDA7A 70.34%);
  51. }
  52. .user-card-info .info-title .version-card {
  53. font-weight: 500;
  54. font-size: 10px;
  55. height: 2vh;
  56. align-items: center;
  57. display: flex;
  58. border-top-left-radius: 20rpx;
  59. border-bottom-right-radius: 20rpx;
  60. padding: 0rpx 10rpx;
  61. justify-items: center;
  62. margin-left: 15rpx;
  63. background: linear-gradient(0deg, #CFC9C0, #CFC9C0),
  64. conic-gradient(from 154.5deg at 29.17% -8.33%, #FFE8BA -0.56deg, rgba(255, 230, 165, 0) 0.26deg, rgba(227, 184, 73, 0.34) 17.37deg, rgba(240, 187, 253, 0.23) 347.83deg, rgba(186, 234, 255, 0.38) 353.78deg, #FFE8BA 359.44deg, rgba(255, 230, 165, 0) 360.26deg);
  65. }
  66. .user-card-info .info-title .version-card span {
  67. color: #51370F;
  68. box-shadow: 0px 0.56px 0px 0px #FFFB9E;
  69. }
  70. .cp-avatar image {
  71. width: 80rpx;
  72. height: 80rpx;
  73. border-radius: 50%;
  74. }
  75. .title-info {
  76. font-size: 14px;
  77. font-weight: bolder;
  78. margin-left: 25rpx;
  79. }
  80. .sign-record {
  81. width: 170rpx;
  82. height: 40rpx;
  83. position: absolute;
  84. font-size: 11px;
  85. display: flex;
  86. justify-content: center;
  87. align-items: center;
  88. top: 19px;
  89. right: 1px;
  90. border-radius: 20rpx 0 0 20rpx;
  91. background-color: #beb9b6;
  92. }
  93. .sign {
  94. width: 120rpx;
  95. height: 50rpx;
  96. position: absolute;
  97. background: #EBC07F;
  98. color: #ffffff;
  99. top: 29px;
  100. font-size: 13px;
  101. right: 10px;
  102. display: flex;
  103. justify-content: center;
  104. align-items: center;
  105. border-radius: 25rpx ;
  106. }
  107. .title-info .user-info {
  108. margin-top: 25rpx;
  109. }
  110. .integral-info {
  111. display: flex;
  112. flex-direction: column;
  113. margin-bottom: 20rpx;
  114. }
  115. .integral-item {
  116. display: flex;
  117. justify-content: space-between;
  118. margin-top: 20rpx;
  119. z-index: 10;
  120. }
  121. .integral-item .item {
  122. display: flex;
  123. color: #1B365D;
  124. font-weight: 600;
  125. font-size: 14px;
  126. align-items: center;
  127. }
  128. .integral-item .number {
  129. color: #FF7B1A;
  130. font-size: 17px;
  131. text-decoration-line: underline;
  132. padding: 0 8rpx;
  133. }
  134. .integral-info .rearmk-view {
  135. margin-top: 15rpx;
  136. font-size: 10px;
  137. }
  138. .integral-info .rearmk-view .title {
  139. font-weight: 600;
  140. color: #1B365D;
  141. }
  142. .integral-info .rearmk-view .info {
  143. color: #95A8CB;
  144. margin-left: 15rpx;
  145. font-weight: 500;
  146. }
  147. .activity-card {
  148. display: flex;
  149. justify-content: center;
  150. align-content: center;
  151. flex-direction: column;
  152. align-items: center;
  153. margin-top: 30rpx;
  154. padding: 20rpx;
  155. box-shadow: 0px 10px 20px 0px #E1E5EE99;
  156. /* border: 1px solid #CE9965; */
  157. box-shadow: 0px 10px 20px 0px #0000000D;
  158. box-shadow: 0px -6px 20px 0px #0000000D;
  159. background: radial-gradient(66.18% 65.3% at 6.12% 18.49%, #FFF9EC 0%, #FFFFFF 100%);
  160. border-radius: 20rpx;
  161. }
  162. .activity-card .activity-title {
  163. color: #A5814A;
  164. font-weight: 600;
  165. font-size: 14px;
  166. margin-bottom: 15rpx;
  167. }
  168. .activity-card .card-item {
  169. display: flex;
  170. width: 100%;
  171. flex-direction: row;
  172. justify-content: space-between;
  173. border: 7rpx solid rgba(255, 111, 5, 0.4);
  174. border-radius: 20rpx;
  175. align-content: center;
  176. align-items: center;
  177. justify-items: center;
  178. }
  179. .card-item .discount-view {
  180. display: flex;
  181. flex-direction: row;
  182. }
  183. .card-item .integral-view {
  184. display: flex;
  185. flex-direction: column;
  186. }
  187. .card-item .integral-view,
  188. .card-item .discount-view {
  189. width: 20%;
  190. height: 13vh;
  191. justify-content: center;
  192. align-content: center;
  193. align-items: center;
  194. border-top-right-radius: 15rpx;
  195. border-bottom-right-radius: 15rpx;
  196. border-right: 1px dashed #95A8CB;
  197. }
  198. .card-item .discount-view .number,
  199. .card-item .integral-view .number {
  200. color: #FF7B1A;
  201. font-weight: 600;
  202. font-size: 20px;
  203. }
  204. .card-item .button-view {
  205. display: flex;
  206. flex-direction: column;
  207. justify-content: center;
  208. align-items: center;
  209. }
  210. .activity-card .title-view {
  211. width: 40%;
  212. min-height: 150rpx;
  213. color: #1B365D;
  214. font-size: 14px;
  215. font-weight: 600;
  216. display: flex;
  217. align-items: center;
  218. justify-content: center;
  219. }
  220. .activity-card .button-view {
  221. padding: 25rpx;
  222. display: flex;
  223. justify-content: center;
  224. align-items: center;
  225. height: 10vh;
  226. border-top-left-radius: 15rpx;
  227. border-bottom-left-radius: 15rpx;
  228. border-left: 1px dashed #95A8CB;
  229. }
  230. .activity-card .button-view .button-class {
  231. border-radius: 20rpx;
  232. background-color: wheat;
  233. }
  234. .activity-card .button-view .remark {
  235. display: flex;
  236. width: 100%;
  237. justify-content: center;
  238. align-content: center;
  239. align-items: center;
  240. font-size: 12px;
  241. margin-top: 15rpx;
  242. }
  243. .activity-card .button-view-footer {
  244. display: flex;
  245. width: 100%;
  246. justify-content: space-between;
  247. align-items: center;
  248. }
  249. .activity-card .button-view-footer .remark {
  250. display: flex;
  251. justify-content: center;
  252. align-content: center;
  253. align-items: center;
  254. font-size: 12px;
  255. margin-top: 15rpx;
  256. }
  257. .activity-card .button-view-footer .user-list {
  258. display: flex;
  259. max-width: 220rpx;
  260. min-width: 100rpx;
  261. justify-content: space-between;
  262. }
  263. .activity-card .button-view-footer .user-list .user-icon image {
  264. width: 23px;
  265. height: 23px;
  266. margin-top: 20rpx;
  267. }
  268. .activity-card .button-view-footer .user-list .user-icon .icon {
  269. margin-top: 20rpx;
  270. font-size: 20px;
  271. border: #95A8CB dashed 1px;
  272. background-color: #d9d9d993;
  273. border-radius: 50%;
  274. color: #95A8CB;
  275. }
  276. .activity-card .button-view-footer .remark .time-view {
  277. display: flex;
  278. width: 150rpx;
  279. justify-content: space-around;
  280. margin-right: 10rpx;
  281. color: #ffffff;
  282. }
  283. .activity-card .button-view-footer .remark .time-view .time {
  284. background-color: #95A8CB;
  285. padding: 5rpx;
  286. border-radius: 5rpx;
  287. }
  288. .van-transition {
  289. width: 100% !important;
  290. }