123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- .Item{
- float:left;
- padding:0 10px;
- position:relative;
- }
- .news{
- width:50px;
- height:50px;
- position:absolute;
- right:0;
- animation: news 0.5s infinite;
- }
- .news span{
- color:#fff;
- position:absolute;
- right:5px;
- }
- .ywItem{
- height:150px;
- color:rgba(0,0,0,1);
- background-size:cover;
- background-repeat:no-repeat;
- text-indent:15px;
- font-size:16px;
- cursor:pointer;
- position:relative
- }
- .ywItem img{
- width:30px;
- height:30px;
- position:absolute;
- z-index:99;
- left: 35px;
- top:85px;
- }
- .number{
- width:calc(100% - 100px);
- height:90px;
- line-height:90px;
- font-size:30px;
- float: right;
- text-align: center;
- }
- .circle{
- min-width:80px;
- min-height:80px;
- max-width:80px;
- max-height:80px;
- float:left;
- position:absolute;
- left:10px;
- bottom:10px;
- display:block;
- /*border-radius:40px;*/
- border-radius:15px;
- /*background-color:rgba(74,156,247,0.6);*/
- opacity:0.5;
- /*background:url('../img/icon1.png') no-repeat center center rgba(74,156,247,0.6);*/
- background-size:80%;
- }
- @keyframes news {
- 0% {
- opacity: 0.5;
- }
- 50% {
- opacity: 1;
- }
- 100% {
- opacity: 0.5;
- }
- }
- .circle-rgb{
- /*border-radius:50%;*/
- width:80px;
- height:80px;
- color:#000;
- overflow:hidden;
- position:absolute;
- left:10px;
- bottom:10px;
- }
- .circle-rgb .deng1{
- width:40px;
- height:40px;
- position:absolute;
- left:0;
- top:0;
- background-image:url("../img/1white.png");
- background-size:35px;
- background-position: 7px 8px;
- background-repeat:no-repeat
- }
- .circle-rgb .deng2{
- width:40px;
- height:40px;
- position:absolute;
- left:50%;
- top:0;
- background-image:url("../img/1white.png");
- background-size:35px;
- background-position: 1px 8px;
- background-repeat:no-repeat
- }
- .circle-rgb .deng3{
- width:40px;
- height:40px;
- position:absolute;
- left:0;
- top:50%;
- background-image:url("../img/1white.png");
- background-size:35px;
- background-position: 7px 0;
- background-repeat:no-repeat
- }
- .circle-rgb .deng4{
- width:40px;
- height:40px;
- position:absolute;
- left:50%;
- top:50%;
- background-image:url("../img/1white.png");
- background-size:35px;
- background-position: 1px 0;
- background-repeat:no-repeat
- }
- .circle-rgb .shan{
- animation: shan 0.5s infinite;
- }
- .circle-rgb .purple{
- width:40px;
- height:40px;
- color:#fff;
- line-height:45px;
- text-indent:5px;
- font-size:14px;
- text-align:center;
- background-image:url("../img/1purple.png");
- background-size:23px;
- background-position: 11px 10px;
- background-repeat:no-repeat;
- }
- .circle-rgb .red{
- width:40px;
- height:40px;
- color:#fff;
- line-height:45px;
- text-indent:-5px;
- font-size:14px;
- text-align:center;
- background-image:url("../img/1red.png");
- background-size:23px;
- background-position: 5px 10px;
- background-repeat:no-repeat;
- }
- .circle-rgb .orange{
- width:40px;
- height:40px;
- color:#fff;
- line-height:30px;
- text-indent:5px;
- font-size:14px;
- text-align:center;
- background-image:url("../img/1yellow.png");
- background-size:23px;
- background-position: 11px 1px;
- background-repeat:no-repeat;
- }
- .circle-rgb .green{
- width:40px;
- height:40px;
- color:#fff;
- line-height:30px;
- text-indent:-5px;
- font-size:14px;
- text-align:center;
- background-image:url("../img/1green.png");
- background-size:23px;
- background-position: 5px 1px;
- background-repeat:no-repeat;
- }
- @keyframes shan {
- 0% {
- opacity: 0.5;
- }
- 50% {
- opacity: 1;
- }
- 100% {
- opacity: 0.5;
- }
- }
- .total {
- width: 40%;
- height: 98px;
- line-height: 90px;
- font-weight: 600;
- font-size: 22px;
- text-indent: 0;
- text-align: center;
- }
- .btnLR {
- width: 50px;
- height: 150px;
- }
- .btnLR img{
- width:30px;
- height:150px;
- cursor:pointer
- }
|