body { width: 100%; height: 100%; background: #FB4605; } .header { background-size: 100% 100%; padding-top: .81rem; position: relative; width: 100%; height: 3.08rem; background-image: url(../img/pict1.png?v=1.1.1); } .pict { display: block; width: 1.4rem; height: 1.4rem; border-radius: .03rem; position: absolute; top: 1.54rem; left: 1.11rem; } .target { width: 100%; height: 1.16rem; display: flex; align-items:center; position: relative; background-size: 100% 100%; margin: auto; padding: .29rem 0 .2rem; } .notice { width: 100%; height: .35rem; line-height: .29rem; text-align: center; color: #FFEF98; background-image: url("../img/title1.png"); background-size: 100% 100%; } .rule { top: .7rem; } .target ul { width: 3.08rem; margin: 0 auto; margin-top: -.035rem; display: flex; align-items: center; } .target li { font-family: PingFang-SC-Heavy; font-weight: bold; font-size: .4rem; float: left; margin-left: .1rem; width: .65rem; height: .65rem; text-align: center; line-height: .6rem; border: 2px solid transparent; border-radius: .03rem; color: #D59212; font-weight: bold; width: .67rem; height: .67rem; line-height: .67rem; margin-top: .01rem; margin-left: .08rem; } .target .blackColor { border: 5px solid #ffffff; } .content { height: 2.6rem; background-image: url(../img/content1.png); background-size: 100% 100%; } .options { width: 100%; height: 1.8rem; background-size: 100% 100%; } .options ul { margin: auto; width: 3.25rem; padding: 0 .07rem; overflow: hidden; margin-top: .12rem; } .options li { text-align: center; color: #D59212; font-size: .2rem; font-weight: bold; float: left; width: .49rem; height: .48rem; line-height: .36rem; margin-left: .112rem; margin-top: 0; margin-bottom: .1rem; border: .04rem solid transparent; } .banner { width: 100%; height: 1.51rem; background-image: url("../img/other.png"); background-size: 100% 100%; } .active li { width: .47rem; left: .44rem; top: 4.7rem; height: .4rem; line-height: .41rem; text-align: center; color: #FEC853; font-size: .2rem; position: absolute; opacity: 0; z-index: 0; } .active :nth-child(2) { left: 1.04rem; } .active :nth-child(3) { left: 1.65rem; } .active :nth-child(4) { left: 2.25rem; } .active :nth-child(5) { left: 2.85rem; } .active :nth-child(6) { top: 5.28rem; } .active :nth-child(7) { top: 5.28rem; left: 1.04rem; } .active :nth-child(8) { top: 5.28rem; left: 1.65rem; } .active :nth-child(9) { top: 5.28rem; left: 2.25rem; } .active :nth-child(10) { top: 5.28rem; left: 2.85rem; } .active .move { width: .65rem; height: .65rem; line-height: .65rem; font-size: .4rem; font-weight: bold; opacity: .5; top: 3.65rem; opacity: 1; transition: all .6s linear; } .mask { z-index: 2; } .options .flick { color: #986503; }