ywbl-pad.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. .Item{
  2. float:left;
  3. padding:0 10px;
  4. position:relative;
  5. }
  6. .news{
  7. width:50px;
  8. height:50px;
  9. position:absolute;
  10. right:0;
  11. animation: news 0.5s infinite;
  12. }
  13. .news span{
  14. color:#fff;
  15. position:absolute;
  16. right:5px;
  17. }
  18. .ywItem{
  19. height:120px;
  20. color:rgba(0,0,0,1);
  21. background-size:cover;
  22. background-repeat:no-repeat;
  23. text-indent:15px;
  24. font-size:16px;
  25. cursor:pointer;
  26. position:relative
  27. }
  28. .ywItem img{
  29. width:30px;
  30. height:30px;
  31. position:absolute;
  32. z-index:99;
  33. left: 35px;
  34. top:85px;
  35. }
  36. .number{
  37. width:calc(100% - 100px);
  38. height:90px;
  39. line-height:90px;
  40. font-size:30px;
  41. float: right;
  42. text-align: center;
  43. }
  44. .circle{
  45. min-width:60px;
  46. min-height:60px;
  47. max-width:60px;
  48. max-height:60px;
  49. float:left;
  50. position:absolute;
  51. left:10px;
  52. bottom:10px;
  53. display:block;
  54. border-radius:15px;
  55. /*background-color:rgba(74,156,247,0.6);*/
  56. opacity:0.5;
  57. /*background:url('../img/icon1.png') no-repeat center center rgba(74,156,247,0.6);*/
  58. background-size:80%;
  59. }
  60. @keyframes news {
  61. 0% {
  62. opacity: 0.5;
  63. }
  64. 50% {
  65. opacity: 1;
  66. }
  67. 100% {
  68. opacity: 0.5;
  69. }
  70. }
  71. .circle-rgb{
  72. width:60px;
  73. height:60px;
  74. color:#000;
  75. overflow:hidden;
  76. position:absolute;
  77. left:10px;
  78. bottom:10px;
  79. }
  80. .circle-rgb .deng1{
  81. width:30px;
  82. height:30px;
  83. position:absolute;
  84. left:0;
  85. top:0;
  86. background-image:url("../img/1white.png");
  87. background-size:25px;
  88. background-position: 7px 8px;
  89. background-repeat:no-repeat
  90. }
  91. .circle-rgb .deng2{
  92. width:30px;
  93. height:30px;
  94. position:absolute;
  95. left:50%;
  96. top:0;
  97. background-image:url("../img/1white.png");
  98. background-size:25px;
  99. background-position: 1px 8px;
  100. background-repeat:no-repeat
  101. }
  102. .circle-rgb .deng3{
  103. width:30px;
  104. height:30px;
  105. position:absolute;
  106. left:0;
  107. top:50%;
  108. background-image:url("../img/1white.png");
  109. background-size:25px;
  110. background-position: 7px 0;
  111. background-repeat:no-repeat
  112. }
  113. .circle-rgb .deng4{
  114. width:30px;
  115. height:30px;
  116. position:absolute;
  117. left:50%;
  118. top:50%;
  119. background-image:url("../img/1white.png");
  120. background-size:25px;
  121. background-position: 1px 0;
  122. background-repeat:no-repeat
  123. }
  124. .circle-rgb .shan{
  125. animation: shan 0.5s infinite;
  126. }
  127. .circle-rgb .purple{
  128. width:30px;
  129. height:30px;
  130. color:#fff;
  131. line-height:35px;
  132. text-indent:6px;
  133. font-size:12px;
  134. text-align:center;
  135. background-image:url("../img/1purple.png");
  136. background-size:16px;
  137. background-position: 10px 10px;
  138. background-repeat:no-repeat;
  139. }
  140. .circle-rgb .red{
  141. width:30px;
  142. height:30px;
  143. color:#fff;
  144. line-height:35px;
  145. text-indent:-5px;
  146. font-size:12px;
  147. text-align:center;
  148. background-image:url("../img/1red.png");
  149. background-size:16px;
  150. background-position: 4px 10px;
  151. background-repeat:no-repeat;
  152. }
  153. .circle-rgb .orange{
  154. width:30px;
  155. height:30px;
  156. color:#fff;
  157. line-height:16px;
  158. text-indent:6px;
  159. font-size:12px;
  160. text-align:center;
  161. background-image:url("../img/1yellow.png");
  162. background-size:16px;
  163. background-position: 10px 1px;
  164. background-repeat:no-repeat;
  165. }
  166. .circle-rgb .green{
  167. width:30px;
  168. height:30px;
  169. color:#fff;
  170. line-height:16px;
  171. text-indent:-5px;
  172. font-size:12px;
  173. text-align:center;
  174. background-image:url("../img/1green.png");
  175. background-size:16px;
  176. background-position: 4px 1px;
  177. background-repeat:no-repeat;
  178. }
  179. @keyframes shan {
  180. 0% {
  181. opacity: 0.5;
  182. }
  183. 50% {
  184. opacity: 1;
  185. }
  186. 100% {
  187. opacity: 0.5;
  188. }
  189. }
  190. .total {
  191. width: 40%;
  192. height: 68px;
  193. line-height: 60px;
  194. font-weight: 600;
  195. font-size: 18px;
  196. text-indent: 0;
  197. text-align: center;
  198. }
  199. .btnLR {
  200. width: 30px;
  201. height: 120px;
  202. }
  203. .btnLR img{
  204. width:20px;
  205. height:120px;
  206. cursor:pointer
  207. }