signin.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. @charset "UTF-8";
  2. /**
  3. * 下方引入的为uView UI的集成样式文件,为scss预处理器,其中包含了一些"u-"开头的自定义变量
  4. * uView自定义的css类名和scss变量,均以"u-"开头,不会造成冲突,请放心使用
  5. */
  6. page {
  7. background-color: #f4f6f8;
  8. }
  9. .signin {
  10. height: 450rpx;
  11. position: relative;
  12. }
  13. .signin .u-flexs {
  14. display: -webkit-box;
  15. display: -webkit-flex;
  16. display: flex;
  17. -webkit-box-orient: vertical;
  18. -webkit-box-direction: normal;
  19. -webkit-flex-direction: column;
  20. flex-direction: column;
  21. -webkit-box-align: center;
  22. -webkit-align-items: center;
  23. align-items: center;
  24. }
  25. .signin .garden1 {
  26. width: 180rpx;
  27. height: 180rpx;
  28. border-radius: 200rpx;
  29. background-color: rgba(255, 255, 255, 0.4);
  30. position: relative;
  31. }
  32. .signin .garden1 .garden2 {
  33. width: 150rpx;
  34. height: 150rpx;
  35. border-radius: 200rpx;
  36. background-color: rgba(255, 255, 255, 0.7);
  37. position: absolute;
  38. left: 15rpx;
  39. top: 15rpx;
  40. z-index: 80;
  41. }
  42. .signin .garden1 .garden2 .is-signin {
  43. color: #909399;
  44. }
  45. .signin .garden1 .garden2.no-signin {
  46. -webkit-animation: gardens2 2s infinite;
  47. animation: gardens2 2s infinite;
  48. }
  49. .signin .garden1 .garden3 {
  50. width: 120rpx;
  51. height: 120rpx;
  52. border-radius: 200rpx;
  53. background-color: #ffffff;
  54. position: relative;
  55. z-index: 100;
  56. }
  57. .signin .garden1 .garden3.no-signin {
  58. -webkit-animation: gardens3 2s infinite;
  59. animation: gardens3 2s infinite;
  60. }
  61. .signin .u-score-color {
  62. color: #e0e0e0;
  63. }
  64. .signin .rule {
  65. position: absolute;
  66. right: 0;
  67. top: 50rpx;
  68. background-color: rgba(255, 255, 255, 0.9);
  69. border-top-left-radius: 30rpx;
  70. border-bottom-left-radius: 30rpx;
  71. padding: 5rpx 10rpx 5rpx 20rpx;
  72. }
  73. .number {
  74. position: relative;
  75. top: -65rpx;
  76. }
  77. .number .u-col-center {
  78. height: 130rpx;
  79. border-radius: 10rpx;
  80. box-shadow: 0px 0px 5px 0px rgba(0, 34, 144, 0.1);
  81. }
  82. .number .u-col-center .u-row-around {
  83. width: 100%;
  84. }
  85. @-webkit-keyframes gardens2 {
  86. 0% {
  87. opacity: 1;
  88. -webkit-transform: scale(1);
  89. transform: scale(1);
  90. }
  91. 100% {
  92. opacity: 0;
  93. -webkit-transform: scale(1.5);
  94. transform: scale(1.5);
  95. }
  96. }
  97. @keyframes gardens2 {
  98. 0% {
  99. opacity: 1;
  100. -webkit-transform: scale(1);
  101. transform: scale(1);
  102. }
  103. 100% {
  104. opacity: 0;
  105. -webkit-transform: scale(1.5);
  106. transform: scale(1.5);
  107. }
  108. }