#wrap { background: url(../img/game5/game5Bgm.png) no-repeat; background-size: 100% 100%; overflow: hidden; position: relative; } .tipsNum { width: 1.45rem; height: 3.2rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .tipText { position: absolute; top: 40%; transform: translateY(-40%); right: .65rem; width: .8rem; height: 4.32rem; } .tipText ul { display: flex; } .tipText ul li { flex: 1; text-align: center; color: #333; font-size: .26rem; } .tipsNum img { width: 100%; height: 100%; } .titleIcon { margin-top: .1rem; margin-left: .1rem; } .titleIcon ul { display: flex; justify-content: flex-end; } .titleIcon ul li { width: .98rem; height: 1.24rem; } .titleIcon ul li img { width: 100%; height: 100%; } /*内容区*/ .cont_wrap { width: 10rem; height: 5.17rem; margin: 0 auto; background: url(../img/game5/bgm1.png) no-repeat; background-size: 100% 100%; overflow: hidden; } .contList ul{ margin-top: .5rem; } .contList li{ display: none; } .cont_wrap li.end { width: 9rem; height: .8rem; margin: 1.2rem auto 0; color: #9E6538; font-size: .32rem; } /*人物名称*/ .tipList { width: 9rem; display: flex; margin: 0 auto; } .tipList div.nameItem{ display: none; width: 100%; } .tipList ul { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: .5rem; } .tipList ul li { width: 19%; margin-top: .25rem; position: relative; } .tipList ul li p { font-size: .32rem; width: 100%; } .tipList div.left { width: 100%; height: .87rem; /*background: linear-gradient(to bottom, #F4846B , #F64A32);*/ background: linear-gradient(to bottom, #FFD581, #F4A200); border-radius: .44rem; display: flex; line-height: .87rem; color: #FFFFFF; font-size: .32rem; text-align: center; } .tipList div.left p.chose { height: 0.7rem; margin-top: .09rem; margin-left: .33rem; padding-right: .18rem; border-right: 1px solid #fff; display: flex; align-items: center; margin-right: .2rem; } } .tipList div.left p.name { margin-left: .38rem; } .tipList ul li.active div.left { background: linear-gradient(to bottom, #F4846B, #F64A32); } .choseIcon { position: absolute; right: .1rem; bottom: 0.1rem; } .choseIcon p.trueIcon { width: .83rem; height: .63rem; display: none; } .choseIcon p.falseIcon { width: .61rem; height: .61rem; display: none; } .choseIcon p img { width: 100%; height: 100%; } /*按钮*/ .btn {} .sureBtn { width: 2.83rem; height: .72rem; position: absolute; bottom: 19%; left: 50%; transform: translateX(-50%); } .sureBtn img { width: 100%; height: 100%; } .nextBtn { display: none; width: 2.13rem; height: .72rem; position: absolute; bottom: 15%; right: 0; } .nextBtn img { width: 100%; height: 100%; } /*成功后的样子*/ .successCont { position: absolute; left: 0; top: 20%; width: 100%; height: 100%; display: none; } .nameList { display: flex; width: 100%; justify-content: flex-end; } .nameList li { width: 18%; margin-left: .1rem; } .nameList li p { height: .98rem; width: 100%; background: url(../img/game2/titleIcon.png) no-repeat; background-size: 100% 100%; font-size: .32rem; text-align: center; box-sizing: border-box; padding: .18rem .2rem; color: #fff; display: flex; align-items: center; justify-content: center; } .textList { margin-left: .5rem; margin-top: 1rem; } .textList ul { width: 100%; display: flex; justify-content: flex-end; } .textList li { width: 18%; height: 100%; margin-right: .1rem; font-size: .18rem; background: #F4BA78; border: 1px solid #D01217; border-radius: 7px; box-sizing: border-box; padding: .05rem .1rem; } /*成功后的样子end*/