.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:120px; 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:60px; min-height:60px; max-width:60px; max-height:60px; float:left; position:absolute; left:10px; bottom:10px; display:block; 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{ width:60px; height:60px; color:#000; overflow:hidden; position:absolute; left:10px; bottom:10px; } .circle-rgb .deng1{ width:30px; height:30px; position:absolute; left:0; top:0; background-image:url("../img/1white.png"); background-size:25px; background-position: 7px 8px; background-repeat:no-repeat } .circle-rgb .deng2{ width:30px; height:30px; position:absolute; left:50%; top:0; background-image:url("../img/1white.png"); background-size:25px; background-position: 1px 8px; background-repeat:no-repeat } .circle-rgb .deng3{ width:30px; height:30px; position:absolute; left:0; top:50%; background-image:url("../img/1white.png"); background-size:25px; background-position: 7px 0; background-repeat:no-repeat } .circle-rgb .deng4{ width:30px; height:30px; position:absolute; left:50%; top:50%; background-image:url("../img/1white.png"); background-size:25px; background-position: 1px 0; background-repeat:no-repeat } .circle-rgb .shan{ animation: shan 0.5s infinite; } .circle-rgb .purple{ width:30px; height:30px; color:#fff; line-height:35px; text-indent:6px; font-size:12px; text-align:center; background-image:url("../img/1purple.png"); background-size:16px; background-position: 10px 10px; background-repeat:no-repeat; } .circle-rgb .red{ width:30px; height:30px; color:#fff; line-height:35px; text-indent:-5px; font-size:12px; text-align:center; background-image:url("../img/1red.png"); background-size:16px; background-position: 4px 10px; background-repeat:no-repeat; } .circle-rgb .orange{ width:30px; height:30px; color:#fff; line-height:16px; text-indent:6px; font-size:12px; text-align:center; background-image:url("../img/1yellow.png"); background-size:16px; background-position: 10px 1px; background-repeat:no-repeat; } .circle-rgb .green{ width:30px; height:30px; color:#fff; line-height:16px; text-indent:-5px; font-size:12px; text-align:center; background-image:url("../img/1green.png"); background-size:16px; background-position: 4px 1px; background-repeat:no-repeat; } @keyframes shan { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } .total { width: 40%; height: 68px; line-height: 60px; font-weight: 600; font-size: 18px; text-indent: 0; text-align: center; } .btnLR { width: 30px; height: 120px; } .btnLR img{ width:20px; height:120px; cursor:pointer }