vue.js模仿京东省市区三级联动的选择组件实例代(2)

样式代码请自己挑选下:

.myAddress{
 width: 100%;
 background-color: white;
 border-top: 4px solid rgba(245,245,245,1);
 color:#333;
}
.myAddress .cont{
 border-bottom: 1px solid rgba(245,245,245,0.8);
}
.myAddress .cont span{
 display: inline-block;
 font-size: 0.28rem;
 color: #333;
 line-height: 0.88rem;
 margin-left: 0.32rem;
}
.myAddress .cont section{
 float:left;
}
.myAddress .cont p{
 display: inline-block;
 font-size: 0.28rem;
 color: #333333;
 line-height: 0.88rem;
 margin-left: 1rem;
}
.myAddress .cont .pic2{
 float: right;
 width: 0.14rem;
 height: 0.24rem;
 margin: 0.32rem 0.32rem 0.32rem 0;
}
.myAddress .cont p.text{
 margin-left: 0.72rem;
}
.showChose{
 width:100%;
 height:100%;
 position:fixed;
 top:0;
 left:0;
 z-index:120;
 background:rgba(77,82,113,0.8);
}
.address{
 position:absolute;
 bottom:0;
 left:0;
 z-index:121;
 background:#fff;
 width:100%;
}
.title h4{
 display:inline-block;
 margin-left:3.2rem;
 font-size:0.32rem;
 line-height:0.88rem;
 font-weight:normal;
 color:#999;
}
.title span{
 margin:0.42rem 0 0 2.2rem;
 font-size:0.45rem;
 line-height:0.34rem;
 color:#D8D8D8;
}
.area{
 display:inline-block;
 font-size:0.24rem;
 line-height:0.88rem;
 margin-left:0.42rem;
 color:#333;
}
.addList{
 width:100%;
 padding-left:0.32rem;
 font-size:0.34rem;
 line-height:0.88rem;
 color:#333;
}
/* 修改的格式 */
.address ul{
 width:95%;
 height:100%;
 max-height: 4.4rem;
 overflow:auto;
}
.address ul li{
 margin-left:5%;
}
.address .title .active{
 color:#0071B8;
 border-bottom:0.02rem solid #0071B8;
}
.address ul .active{
 color:#0071B8;
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对黑区网络的支持。