.wrap { width: 100%; height: auto; position: relative; background: url(../img/areaBgm.png) no-repeat; background-size: 100% 100%; overflow: hidden; } .box_cont { display: flex; margin-top: .14rem; margin-left: .1rem; height: 88%; overflow: hidden; } /*地区*/ .leftList { /*flex: 1;*/ height: 96%; /*overflow-y: auto;*/ } .leftList ul{ height: 100%; overflow-y: auto; } ::-webkit-scrollbar { /*隐藏滚轮*/ display: none; } .leftList li { width: .8rem; height: .32rem; display: flex; justify-content: center; align-items: center; background: #fff; border-radius: .05rem; margin-bottom: .12rem; } .leftList li span { display: block; box-sizing: border-box; color: #333; font-size: .14rem; line-height: .32rem; text-align: center; } .leftList li span.name { text-align: center; } .leftList li span.num { display: none; } .leftList li.active { background: #F09C22; } .leftList li.active span { color: #FFFFFF; } .leftList li.select{ background: #F09C22; } .leftList li.select span { color: #FFFFFF !important; } /*博物馆图片*/ .rightCont { /*flex: 2;*/ margin-left: 0.15rem; margin-top: .05rem; position: relative; height: 96%; } .rightCont .title { font-size: .12rem; color: #fff; /*position: fixed;*/ z-index: 999; padding-bottom: .1rem; } .rightCont .title img { width: .14rem; height: .14rem; margin-right: .05rem; } .imgList{ height: 80%; overflow-y: auto; } .museumImg { display: flex; flex-wrap: wrap; margin-left: .1rem; margin-right: .24rem; margin-top: .12rem; display: none; } .museumImg li { /*width: 50%;*/ height: auto; width: 1.04rem; } .museumImg li:nth-child(2n){ margin-left: .28rem; } .museumImg div.item { width: 1.04rem; /*height: .42rem;*/ position: relative; border-radius: .05rem; } .museumImg li .contImg { width: 1.04rem; height: .42rem; } .museumImg p.contImg img { width: 100%; height: 100%; } .museumImg p.icon { width: .24rem; height: .24rem; position: absolute; right: 0; top: 0; font-size: 0; transform: translate(50%,-50%); display: none; } .museumImg p.icon img { width: 100%; height: 100%; } .museumImg p.name{ color: #fff; font-size: .13rem; width: 1.04rem; text-align: center; margin-top: .08rem; margin-bottom:.18rem ; } .museumImg li.active div.item{ background: #F09C22; } .museumImg li.active p.icon{ display: block; } /*选中名称*/ .chooseList { height: 16%; margin-top: .15rem; width: 100%; /*overflow: hidden;*/ } .chooseList p{ font-size: .12rem; color: #fff; display: flex; align-items: center; } .chooseList p img{ width: .13rem; height: .13rem; } .chooseName { width: 2.7rem; display: flex; margin-top: .12rem; overflow-x: auto; } .chooseName li{ width: .75rem; height: .3rem; border: 1px solid #F09C22; border-radius: .05rem; display: flex; justify-content: center; align-items: center; margin-right: .04rem; } .chooseName li span.text{ width: .42rem; overflow: auto; white-space: nowrap; font-size: .14rem; margin-left: .07rem; color: #fff; box-sizing: border-box; } span.closeIcon img{ width: .14rem; height: .14rem; margin-left: .06rem; padding-right: .02rem; } /*底部按钮*/ .deepBtn { /*height: 12%;*/ position: fixed; left: 50%; bottom: .16rem; transform: translateX(-50%); display: flex; width: 2.91rem; height: .46rem; background: #3B7BFF; justify-content: center; border-radius: .04rem; line-height: .46rem; text-align: center; color: #fff; font-size: .18rem; } /*弹出框*/ .tips{ width: 1.5rem; height: .5rem; border-radius: .1rem; line-height: .5rem; background: rgba(0,0,0,0.7); text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: .18rem; color: #fff; display: none; }