金诚优选前端代码
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.

379 lines
5.8 KiB

  1. #sign {
  2. background-color: #f3f3f3;
  3. }
  4. .sign_head {
  5. display: flex;
  6. flex-direction: row;
  7. background: #CDA76E;
  8. padding: 30rpx;
  9. height: 530rpx;
  10. border-radius: 0 0 20px 20px;
  11. }
  12. .sign_message {
  13. display: flex;
  14. flex-direction: column;
  15. margin-left: 24rpx;
  16. width: 100%
  17. }
  18. .user_picture {
  19. width: 100rpx;
  20. height: 100rpx;
  21. border-radius: 50%;
  22. /* background: #ccc; */
  23. }
  24. .user_picture image {
  25. width: 100rpx;
  26. height: 100rpx;
  27. border-radius: 50%;
  28. }
  29. .user_message {
  30. display: flex;
  31. justify-content: space-between;
  32. position: relative;
  33. }
  34. .user_name {
  35. font-size: 34rpx;
  36. color: #111111;
  37. font-weight: 700;
  38. }
  39. .activity_rule {
  40. position: absolute;
  41. display: flex;
  42. align-items: center;
  43. justify-content: center;
  44. color: white;
  45. width: 120rpx;
  46. height: 40rpx;
  47. border-radius: 20rpx;
  48. background: #BA9764;
  49. right: 20rpx;
  50. }
  51. .signed_today{
  52. position: absolute;
  53. top: 20px;
  54. left: 16px;
  55. color: #CDA76E;
  56. height: 20px;
  57. display: flex;
  58. align-items: center;
  59. border: #ffffff solid 5px;
  60. border-radius: 50%;
  61. width: 20px;
  62. justify-content: center;
  63. }
  64. .fs_12 {
  65. font-size: 24rpx
  66. }
  67. .fs_10 {
  68. font-size: 20rpx;
  69. }
  70. image {
  71. width: 100%;
  72. }
  73. .sign_box {
  74. width: 92%;
  75. background: #ffffff;
  76. margin: 0 auto;
  77. margin-top: -380rpx;
  78. border-radius: 8rpx;
  79. padding-bottom: 10px;
  80. }
  81. .sign_text {
  82. width: 100%;
  83. padding: 15rpx 0rpx;
  84. image {
  85. height: 270rpx;
  86. }
  87. }
  88. .sign_show {
  89. width: 100%;
  90. image:nth-child(1) {
  91. height: 1000rpx;
  92. }
  93. image:nth-child(2) {
  94. height: 365rpx;
  95. }
  96. }
  97. .sign_notice {
  98. font-size: 24rpx;
  99. width: 56px;
  100. height: 20px;
  101. font-weight: 500;
  102. color: rgba(0, 0, 0, 1);
  103. line-height: 20px;
  104. }
  105. .notice_context {
  106. width: 92%;
  107. font-size: 24rpx;
  108. color: rgba(102, 102, 102, 1);
  109. line-height: 44rpx;
  110. }
  111. /* ============== */
  112. .sign_body {
  113. display: flex;
  114. flex-direction: column;
  115. position: relative;
  116. }
  117. .row_first {
  118. display: flex;
  119. flex-direction: row;
  120. margin-top: 90rpx;
  121. flex-wrap: wrap
  122. }
  123. .single_sign_day {
  124. margin-bottom: 20px;
  125. width: 56rpx
  126. }
  127. .row_box {
  128. display: flex;
  129. flex-direction: row;
  130. height: 187rpx;
  131. line-height: 187rpx;
  132. }
  133. .image_box {
  134. width: 100%;
  135. margin-top: 20rpx
  136. }
  137. .sign_point {
  138. background: #CDA76E;
  139. width: 60rpx;
  140. height: 60rpx;
  141. border-radius: 50%;
  142. font-size: 27rpx;
  143. color: #ffffff;
  144. display: flex;
  145. justify-content: center;
  146. align-items: center;
  147. margin-bottom: 20rpx
  148. }
  149. .sign_point_false {
  150. background: #eeeeee;
  151. width: 60rpx;
  152. height: 60rpx;
  153. border-radius: 50%;
  154. font-size: 25rpx;
  155. color: #999999;
  156. display: flex;
  157. justify-content: center;
  158. align-items: center;
  159. margin-bottom: 20rpx
  160. }
  161. .sign_day {
  162. width: 40px;
  163. height: 28rpx;
  164. font-size: 20rpx;
  165. font-weight: 400;
  166. color: #AAAAAA;
  167. line-height: 28rpx;
  168. margin-top: 1px;
  169. display: flex;
  170. flex-direction: row;
  171. /* #ifdef H5 */
  172. transform: scale(0.9);
  173. /* #endif */
  174. }
  175. .sign_bar_single {
  176. width: 38rpx;
  177. background: #ffffff
  178. }
  179. .sign_afterBar,
  180. .sign_bar {
  181. width: 36rpx;
  182. height: 6rpx;
  183. margin-top: 27rpx;
  184. }
  185. .sign_bar {
  186. background: #eee;
  187. }
  188. .sign_afterBar {
  189. background: #CDA76E;
  190. }
  191. .sign_gift {
  192. position: absolute;
  193. top: -68rpx;
  194. right: -1rpx;
  195. background: #CDA76E;
  196. width: 60rpx;
  197. height: 60rpx;
  198. border-radius: 50%;
  199. font-size: 25rpx;
  200. color: #999999;
  201. display: flex;
  202. justify-content: center;
  203. align-items: center;
  204. }
  205. .sign_gift image {
  206. margin-top: -4rpx;
  207. margin-left: -32rpx;
  208. width: 35rpx;
  209. height: 35rpx;
  210. }
  211. .angel {
  212. width: 0;
  213. height: 0;
  214. border-width: 17rpx;
  215. border-top-width: 34rpx;
  216. border-style: solid;
  217. border-color: #CDA76E transparent transparent transparent;
  218. margin-top: 64rpx
  219. }
  220. .sign_bar_index {
  221. width: 20rpx;
  222. height: 4rpx;
  223. background: #CDA76E;
  224. margin-top: 27rpx;
  225. }
  226. .signed_days {
  227. width: 90%;
  228. height: 90rpx;
  229. background: rgba(238, 238, 238, 1);
  230. border-radius: 8rpx;
  231. display: flex;
  232. justify-content: center;
  233. align-items: center;
  234. margin-left: 5%
  235. }
  236. .color {
  237. background-color: #FB5054;
  238. color: #ffffff
  239. }
  240. .sign_data {
  241. width: 30%;
  242. margin-left: 39%;
  243. color: #CDA76E;
  244. display: flex;
  245. flex-direction: row;
  246. margin-top: 40rpx;
  247. font-size: 26rpx
  248. }
  249. .arrows {
  250. margin-left: -9rpx;
  251. }
  252. .img0 {
  253. height: 280rpx;
  254. image {
  255. width: 100%;
  256. height: 100%;
  257. }
  258. }
  259. .img1 {
  260. height: 260rpx;
  261. image {
  262. width: 100%;
  263. height: 260rpx;
  264. }
  265. }
  266. .img2 {
  267. height: 940rpx;
  268. image {
  269. width: 100%;
  270. height: 940rpx;
  271. }
  272. }
  273. .img3 {
  274. height: 400rpx;
  275. image{
  276. height: 100%;
  277. }
  278. }
  279. .img5 {
  280. position: relative;
  281. height: 350rpx;
  282. image {
  283. height: 100%;
  284. }
  285. }
  286. .ankeli {
  287. padding-top: 20rpx;
  288. }
  289. .mask_form {
  290. position: fixed;
  291. top: 0;
  292. left: 0;
  293. bottom:0;
  294. right: 0;
  295. background:rgba(1, 1, 1, 0.6);
  296. display: flex;
  297. flex-direction: column
  298. }
  299. .mask {
  300. width:86%;
  301. position: absolute;
  302. top: 0;
  303. left: 0;
  304. right: 0;
  305. bottom: 0;
  306. margin: auto;
  307. z-index:50;
  308. background-color: #fff;
  309. font-size: 14px;
  310. padding: 10px 0;
  311. }
  312. .rule_box{
  313. width: 92%;
  314. border-radius: 5px;
  315. height: 800rpx;
  316. background: #ffffff;
  317. margin: auto;
  318. margin-top: 61px;
  319. position: relative;
  320. }
  321. .close_rule{
  322. position: absolute;
  323. top: 115%;
  324. left: 46%;
  325. border-radius: 50%;
  326. background: #ccc;
  327. width: 30px;
  328. height: 30px;
  329. display: flex;
  330. justify-content: center;
  331. align-items: center;
  332. }