shijieyichan/css/areaList.css

.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;
}