signin.ttss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  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: flex;
  15. flex-direction: column;
  16. align-items: center;
  17. }
  18. .signin .garden1 {
  19. width: 180rpx;
  20. height: 180rpx;
  21. border-radius: 200rpx;
  22. background-color: rgba(255, 255, 255, 0.4);
  23. position: relative;
  24. }
  25. .signin .garden1 .garden2 {
  26. width: 150rpx;
  27. height: 150rpx;
  28. border-radius: 200rpx;
  29. background-color: rgba(255, 255, 255, 0.7);
  30. position: absolute;
  31. left: 15rpx;
  32. top: 15rpx;
  33. z-index: 80;
  34. }
  35. .signin .garden1 .garden2 .is-signin {
  36. color: #909399;
  37. }
  38. .signin .garden1 .garden2.no-signin {
  39. -webkit-animation: gardens2 2s infinite;
  40. animation: gardens2 2s infinite;
  41. }
  42. .signin .garden1 .garden3 {
  43. width: 120rpx;
  44. height: 120rpx;
  45. border-radius: 200rpx;
  46. background-color: #ffffff;
  47. position: relative;
  48. z-index: 100;
  49. }
  50. .signin .garden1 .garden3.no-signin {
  51. -webkit-animation: gardens3 2s infinite;
  52. animation: gardens3 2s infinite;
  53. }
  54. .signin .u-score-color {
  55. color: #e0e0e0;
  56. }
  57. .signin .rule {
  58. position: absolute;
  59. right: 0;
  60. top: 50rpx;
  61. background-color: rgba(255, 255, 255, 0.9);
  62. border-top-left-radius: 30rpx;
  63. border-bottom-left-radius: 30rpx;
  64. padding: 5rpx 10rpx 5rpx 20rpx;
  65. }
  66. .number {
  67. position: relative;
  68. top: -65rpx;
  69. }
  70. .number .u-col-center {
  71. height: 130rpx;
  72. border-radius: 10rpx;
  73. box-shadow: 0px 0px 5px 0px rgba(0, 34, 144, 0.1);
  74. }
  75. .number .u-col-center .u-row-around {
  76. width: 100%;
  77. }
  78. @-webkit-keyframes gardens2 {
  79. 0% {
  80. opacity: 1;
  81. -webkit-transform: scale(1);
  82. transform: scale(1);
  83. }
  84. 100% {
  85. opacity: 0;
  86. -webkit-transform: scale(1.5);
  87. transform: scale(1.5);
  88. }
  89. }
  90. @keyframes gardens2 {
  91. 0% {
  92. opacity: 1;
  93. -webkit-transform: scale(1);
  94. transform: scale(1);
  95. }
  96. 100% {
  97. opacity: 0;
  98. -webkit-transform: scale(1.5);
  99. transform: scale(1.5);
  100. }
  101. }