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