html { background-color: #f3f3f3; font-size: 100px; } nav { position: fixed; top: 0; left: 0; z-index: 9999; font-size: 0rem; height: 0.44rem; width: 100%; background-color: #5d7dff; } nav i { display: inline-block; width: 0.16rem; height: 0.16rem; line-height: 0.44rem; margin-left: 0.1rem; background-image: url(../img/back.png); background-repeat: no-repeat; background-size: 100% auto; } nav p { display: inline-block; width: 90%; text-align: center; line-height: 0.44rem; color: #fff; font-size: 0.17rem; } .current-city-wrapper { margin: 0.54rem 0.10rem 0; margin-top: 0rem; } .current-city-wrapper>p { color: #444; font-size: 0.12rem; margin-top: 0.10rem; } .current-city { margin-top: 0.12rem; width: 100%; height: 0.40rem; background-color: #fff; position: relative; font-size: 0; border-radius: 0.04rem; } .current-city span { margin-left: 0.06rem; font-size: 0.16rem; line-height: 0.40rem; color: #5D7DFF; font-weight: bold; vertical-align: middle; } .current-city i { display: inline-block; background: url(../img/location3.png) no-repeat; background-size: 100%; width: 0.17rem; height: 0.17rem; vertical-align: middle; margin-left: 0.09rem; } .city-list-wrapper { position: relative; } .city-list-content { margin: 0.10rem 0.30rem 0 0.1rem; } .city-list-hot-wrapper p { color: #444; font-size: 0.12rem; margin-top: 0.12rem; } .city-list-hot { margin-top: 0.12rem; width: 100%; /*height: 0.94rem;*/ margin-bottom: 0.12rem; padding-bottom: 0.1rem; background-color: #fff; border-radius: 0.04rem; } .city-list-hot div{ width: 33.33%; float: left; } .city-list-hot:after{ content: "."; clear: both; display: block; overflow: hidden; font-size: 0; height: 0; } .city-list-hot li { width: 0.80rem; height: 0.30rem; margin: auto; margin-top: 0.1rem; /*margin-right: 0.15rem;*/ /*margin-left: 0.15rem;*/ font-size: 0.12rem; color: #222; text-align: center; line-height: 0.30rem; background-color: #f3f3f3; } .city-list { width: 100%; margin-top: 0.10rem; border-radius: 4px; margin-right: 0.30rem; background-color: #fff; } .city-list dl { padding-top: 0.14rem; margin-left: 0.18rem; padding-bottom: 0.14rem; border-bottom: 0.5px solid #d8d8d8; } .city-list dt { font-size: 0.16rem; font-weight: bold; color: #222; } .city-list dd { margin-top: 0.14rem; font-size: 0.14rem; color: #222; } .navbar { position: fixed; right: 0; top: 1.54rem; width: 0.20rem; /*height: 4.10rem;*/ height: 70%; background-color: #fff; font-size: 0; overflow-y:auto ; } .navbar a { margin-top: 0.04rem; color: #5d7dff; font-size: 0.10rem; display: block; text-align: center; } .to-top { margin-top: 0.06rem; background-image: url(../img/hide.png); background-repeat: no-repeat; background-position: center; background-size: 50%; width: 0.20rem; height: 0.10rem; margin-bottom: 0.10rem; } .prompt { display: block; width: 0.40rem; height: 0.40rem; line-height: 0.40rem; font-size: 0.18rem; border-radius: 50%; background-color: rgba(0, 0, 0, 0.7); color: #fff; text-align: center; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .alert-info { position: absolute; top: 1.74rem; right: 0.1rem; left: 0.1rem; font-size: 0; text-align: center; } .alert-info p { display: inline-block; height: 0.38rem; color: #fff; font-size: 0.14rem; line-height: 0.38rem; padding: 0 0.10rem; background-color: rgba(0, 0, 0, 0.7); border-radius: 5px; } /*search*/ .search{ height: 0.35rem; margin: 0 0.1rem; margin-top: 0.54rem; background: #FFFFFF; border-radius: 0.06rem; display: flex; align-items: center; } .search i{ display: inline-block; width: 0.17rem; height: 0.17rem; background: url(../img/search.png) no-repeat; background-size:100% ; margin-left: 0.1rem; } .search input{ border: none; outline: none; font-size: 0.16rem; margin-left: 0.08rem; flex: 1; }