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