.Item{ float:left; padding-right: 10px; position:relative; } .Item:last-child { padding:0 } .moveLeft, .moveRight { height: 120px; padding-right: 15px; position: absolute; top: 0px; z-index: 10; /*display: none;*/ } .moveLeft img, .moveRight img { margin-top: 20px; cursor: pointer; } .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:40px; height:40px; 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; opacity:0.5; background-size:80%; } @keyframes news { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } .circle-rgb{ color:#000; overflow:hidden; left:10px; bottom:10px; } .circle-rgb .deng1{ width:40px; height:40px; background-image:url("../img/1white.png"); background-size:25px; background-position: 7px 8px; background-repeat:no-repeat } .circle-rgb .deng2{ width:40px; height:40px; background-image:url("../img/1white.png"); background-size:25px; background-position: 7px 8px; background-repeat:no-repeat } .circle-rgb .deng3{ width:40px; height:40px; background-image:url("../img/1white.png"); background-size:25px; background-position: 7px 8px; background-repeat:no-repeat } .circle-rgb .deng4{ width:40px; height:40px; background-image:url("../img/1white.png"); background-size:25px; background-position: 7px 8px; background-repeat:no-repeat } .circle-rgb .shan{ animation: shan 0.5s infinite; } .circle-rgb .purple{ width:40px; height:40px; margin:0; 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; cursor:pointer; } .circle-rgb .red{ width:40px; height:40px; margin:0; 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; cursor:pointer; } .circle-rgb .orange{ width:40px; height:40px; margin:0; 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; cursor:pointer; } .circle-rgb .green{ width:40px; height:40px; margin:0; color:#fff; line-height:45px; text-indent:5px; font-size:14px; text-align:center; background-image:url("../img/1green.png"); background-size:23px; background-position: 11px 10px; background-repeat:no-repeat; cursor:pointer; } @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 } .total-item{ float:left; cursor:pointer; padding:0 5px; font-size:16px; text-align:left; text-indent:5px } .purple{ width:20px; height:20px; float:left; line-height:23px; white-space:nowrap; text-indent:25px; margin-top:10px; background-image:url("../img/1purple.png"); background-repeat:no-repeat; } .red{ width:20px; height:20px; float:left; line-height:23px; white-space:nowrap; text-indent:25px; margin-top:10px; background-image:url("../img/1red.png"); background-repeat:no-repeat; } .yellow{ width:20px; height:20px; float:left; line-height:23px; white-space:nowrap; text-indent:25px; margin-top:10px; background-image:url("../img/1yellow.png"); background-repeat:no-repeat; } .green{ width:20px; height:20px; float:left; line-height:23px; white-space:nowrap; text-indent:25px; margin-top:10px; background-image:url("../img/1green.png"); background-repeat:no-repeat; } .pointer{ cursor:pointer }