作者 lihongjuan

123456

*{
margin:0 ;
padding:0;
box-sizing:border-box;
outline:none;
-webkit-tap-highlight-color:rgba(255,0,0,0);
}
.foot{
width:7.5rem;
padding: 0.14rem 0.88rem;
box-sizing: border-box;
display:flex;
align-items: center;
justify-content: space-between;
position: fixed;
bottom:0;
left:0;background: #fff;
}
.footitem{
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.footitemtop{
width:0.4rem;
height:0.4rem;
font-size: 0;
}
.itembottom{
color:#BDC4CE;
font-size: 0.22rem;
}
.itembottom1{
color:#5D8DEE;
font-size: 0.22rem;
}
.register {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
left: 0;
right: 0;
z-index: 99;
top:1.1rem
}
... ...
.logintop{
width:1.48rem;
height:1.48rem;
background:rgba(93,141,238,1);
opacity:1;
border-radius:0.16rem;
color:#fff;
font-size: 0.72rem;
text-align: center;
line-height: 1.48rem;
margin:0.5rem auto 0;
}
.yanzhengleft{
display:flex;
align-items: center;
/*width:2.3rem;*/
/*padding: 0 0.2rem;*/
/*box-sizing: border-box;*/
}
.yanzhengleft input{
border:none;
outline:none;
color:#5B5E63;
font-size:0.28rem;
}
.fasong{
color:#5B5E63;
font-size: 0.28rem;
}
.enterphone{
display:flex;
align-items: center;
width:6rem;
padding: 0.22rem 0;
box-sizing: border-box;
margin:1rem auto 0;
border-bottom:0.01rem solid #f5f5f5
}
.enterphone input{
width:6rem;
border:none;
outline:none;
color:#5B5E63;
font-size:0.28rem;
}
.yanzheng{
display:flex;
align-items: center;
padding: 0.2rem 0;
box-sizing: border-box;
width:6rem;
margin: 0.3rem auto 0;
border-bottom:0.01rem solid #f5f5f5
}
.fasong{
margin-left:1rem;
color:#5B5E63;
font-size:0.28rem;
}
.wentips{
width:4.56rem;
margin:0 auto;
color:#5B5E63;
font-size:0.24rem;
margin-top:0.2rem;
}
.lijideng{
width:6.84rem;
height:0.88rem;
background:linear-gradient(180deg,rgba(136,165,255,1) 0%,rgba(93,141,238,1) 100%);
opacity:1;
border-radius:0.16rem;
color:#fff;
font-size:0.32rem;
text-align: center;
line-height: 0.88rem;
margin:0.72rem auto 0;
}
.zhucename {
width:6.84rem;
margin:0.2rem auto 0;
color: #5B5E63;
font-size: 0.24rem;
line-height: 1.8;
}
.mian{
color:#5D8DEE;
font-size:0.24rem;
}
/*录房赚钱*/
img{
width:100%;
height:100%;
}
.lufangitemleft{
width:0.6rem;
height:0.6rem;
font-size:0;
}
.lufnagitemright{
color:#06121E;
font-size:0.28rem;
margin-left:0.2rem
}
.lufanglist{
padding: 0 0.32rem;
box-sizing:border-box ;
}
.lufangitem{
display:flex;
align-items: center;
justify-content: space-between;
}
.lufangitem{
padding: 0.26rem 0;
box-sizing: border-box;
border-bottom:0.01rem solid #f5f5f5 ;
}
.itemboxleft{
display:flex;
align-items: center;
}
.itemboxright{
width:0.4rem;
height:0.4rem;
font-size:0;
}
.head{
height:4rem;
position: relative;
}
.swiper-wrapper,.swiper-container{
width:100%;
height:4rem;
}
.swiper-slide{
width:100%;
height:4rem;
/*position: fixed;*/
/*left: 0;*/
}
.swiper-slide img{
width:100%;
height:100%;
}
.tophead{
display:flex;
align-items: center;
position: absolute;
top:0.26rem;
left:0.22rem;
z-index:99
}
.topheadleftimg{
width:0.4rem;
height:0.4rem;
font-size: 0;
}
.topheadrightimg{
width:0.4rem;
height:0.4rem;
font-size: 0;
}
.topheadrightname,.topheadrightname{
color:#fff;
font-size: 0.28rem;
margin-left:0.1rem
}
.topheadmiddle{
width:4.5rem;
height:0.6rem;
background: #fff;
font-size:0;
display:flex;
align-items: center;
padding: 0.2rem;
box-sizing: border-box;
margin:0 0.2rem;
border-radius: 8px;
}
.topheadmiddle input{
border:none;
outline: none;
}
.topheadleft{
display:flex;
align-items: center;
}
.topheadright{
display:flex;
align-items: center;
}
.body{
padding: 0 0.32rem;
box-sizing: border-box;
}
.chuzuitem{
width:2.2rem;
height:2rem;
font-size:0;
margin-right:0.12rem;
position: relative;
}
.chuzulist{
display:flex;
align-items: center;
margin-top:0.44rem;
}
.chuzuname{
position: absolute;
top:0.18rem;
left:0.44rem;
color:#fff;
font-size:0.32rem;
}
.chuzuname1{
position: absolute;
top:0.18rem;
left:0.32rem;
color:#fff;
font-size:0.32rem;
}
.fangwulist{
display:flex;
align-items: center;
justify-content: space-between;
margin-top:0.4rem;
}
.fangwuimg{
width:0.98rem;
height:0.92rem;
font-size:0;
}
.fangwuname{
color:#06121E;
font-size:0.28rem;
}
.fangwulsititem{
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.fangwuname{
color:#06121E;
font-size: 0.28rem;
text-align: center;
margin-top:0.1rem
}
.guanyu{
color:#06121E;
font-size: 0.28rem;
position: relative;
margin-top:1rem;
padding-left: 0.3rem;
box-sizing: border-box;
}
.guanyu:before{
display:block;
content: '';
width:0.12rem;
height:0.28rem;
background:#5D8DEE ;
border-radius: 0.04rem;
position:absolute;
top:0;
left:0;
}
.aboutusbox{
display:flex;
align-items: center;
margin-top:0.56rem
}
.aboutboxleft{
width:2.54rem;
height:3.04rem;
font-size:0;
position: relative;
}
.aboutrtop{
display:flex;
align-items: center;
}
.abouttopleft{
width:2rem;
height:1.36rem;
font-size:0;
position: relative;
}
.aboutword{
position: absolute;;
top:0.2rem;
left:0.26rem;
width:0.96rem;
line-height: 1.4;
}
.chubei{
color:#06121E;
font-size: 0.24rem;
}
.chubeinum{
color:#06121E;
font-size: 0.28rem;
font-weight: bold;
}
.aboutboxright{
margin-left:0.16rem
}
.abouttopright{
width:2rem;
height:1.36rem;
font-size:0;
margin-left:0.12rem;
position: relative;
}
.aboutbottom{
width:4.12rem;
height:1.52rem;
font-size:0;
margin-top:0.16rem;
position: relative;
}
.mianimg{
width:6.86rem;
height:2.5rem;
font-size: 0;
margin:0.16rem auto 0;
position: relative;
}
.mianbox{
position: absolute;
top:0.38rem;
left:0.48rem;
}
.mianitembox{
display:flex;
align-items: center;
margin-top:0.15rem
}
.mianitemboxleft{
width:0.32rem;
height:0.32rem;
font-size: 0;
}
.mianitemboxright{
color:#5B5E63;
font-size: 0.22rem;
margin-left:0.1rem
}
.mianbox1{
margin-top:0.2rem
}
.mianboxtop{
color:#5B5E63;
font-size:0.28rem
}
.remen{
display:flex;
align-items: center;
margin-top:0.36rem
}
.remenleft{
width:0.44rem;
height:0.44rem;
font-size: 0;
}
.remenright{
color:#06121E;
font-size:0.36rem;
font-weight: bold;
margin-left:0.1rem;
}
.fangwulist{
display:flex;
align-items: center;
justify-content: space-between;
padding: 0.22rem 0 0.18rem;
box-sizing: border-box;
}
.fangwulistitem{
color:#5B5E63;
font-size: 0.28rem;
height:0.6rem;
line-height: 0.6rem;
position: relative;
}
.fangwuactive{
color:#3D444D;
font-size: 0.28rem;
font-weight: bold;
position: relative;
height:0.6rem;
line-height: 0.6rem;
}
.fangwuactive:after{
display:block;
content:'';
width:0.6rem;
height:0.08rem;
background:#5D8DEE ;
border-radius: 0.16rem;
/*left:50%;*/
/*right:50%;*/
/*transform: translateX(-50%);*/
left:50%;
right:50%;
transform: translateX(50%);
bottom:-0.18rem
}
.fangwuboxitem{
display:flex;
padding: 0.34rem 0;
box-sizing: border-box;
margin-bottom:0.24rem
}
.fangwuboxitemleft{
width:2.2rem;
height:2.2rem;
font-size: 0;
}
.fangitemritop{
display:flex;
align-items: center;
}
.fangitemtopleft{
/*width:0.52rem;*/
/*height:0.24rem;*/
background:#FF5A4E ;
color:#fff;
font-size: 0.12rem;
text-align: center;
line-height: 0.24rem;
padding: 0.06rem;
box-sizing:border-box;
}
.fangitemtopleft1{
background:#5D8DEE;
color:#fff;
font-size: 0.12rem;
text-align: center;
line-height: 0.24rem;
padding: 0.06rem;
box-sizing:border-box;
}
.fangwuitemright{
margin-left:0.54rem;
}
.fangitemtoprightname{
color:#06121E;
font-size: 0.32rem;
font-weight: bold;
margin-left:0.15rem
}
.room{
display:flex;
align-items: center;
margin-top:0.22rem
}
.roomleft{
color:#06121E;
font-size: 0.28rem;
}
.pingfang{
color:#06121E;
font-size: 0.28rem;
margin-left:0.2rem
}
.kaojin{
display:flex;
align-items: center;
color:#8C9198;
font-size: 0.24rem;
margin-top:0.32rem
}
.kaojinright{
margin-left:0.32rem
}
.moneyyue{
color:#FF5A4E;
font-size: 0.32rem;
margin-top:0.22rem
}
.seemore{
color:#5D8DEE;
font-size: 0.32rem;
padding: 0.32rem 0;
text-align: center;
margin-top:0.34rem;
margin-bottom:1.2rem;
}
/*房源*/
.fanghead{
display:flex;
align-items: center;
padding: 0.26rem 0.32rem;
box-sizing: border-box;
justify-content: space-between;
}
.fangheadleft{
display:flex;
align-items: center;
}
.fangheadleftimg{
width:0.24rem;
height:0.24rem;
font-size: 0;
margin-left:0.05rem
}
.ershouname{
color:#06121E;
font-size: 0.28rem;
}
.fangheadmiddle{
display:flex;
align-items: center;
justify-content: center;
width:4.32rem;
height:0.6rem;
background:#EEEEEE ;
}
.souinput{
font-size: 0;
}
.souinput input{
width:3rem;
margin-left:0.1rem;
border:none;
outline: none;
background: transparent;
color:#5B5E63;
font-size:0.22rem;
}
.entersearch{
color:#5B5E63;
font-size:0.22rem;
}
.fangheadname{
width:0.4rem;
height:0.4rem;
font-size: 0;
}
.fangheadright{
display:flex;
align-items: center;
}
.xiaoxiimg{
width:0.29rem;
height:0.28rem;
font-size: 0;
}
.xiaoxiname{
color:#06121E;
font-size: 0.28rem;
position: relative;
margin-left:0.1rem
}
.xiaoxiyuan{
width:0.29rem;
height:0.29rem;
border-radius: 50%;
color:#fff;
font-size:0.12rem ;
text-align: center;
line-height: 0.28rem;
position: absolute;
right:-0.1rem;
top:-0.1rem;
background: #FF5A4E;
}
.fangyuantou{
display:flex;
align-items: center;
justify-content: space-between;
padding: 0.26rem 1.18rem;
box-sizing: border-box;
}
.fangyuantouitem{
display:flex;
align-items: center;
}
.fangyuantourimg{
width:0.24rem;
height:0.24rem;
font-size: 0;
margin-left:0.1rem
}
.fangyuantouleft{
color:#5B5E63;
font-size: 0.32rem;
}
.fangtouactive .fangyuantouleft{
color:#06121E;
font-size: 0.32rem;
font-weight: bold;
}
.fangyuanboxlist{
padding: 0 0.52rem;
box-sizing: border-box;
margin-bottom:1.2rem
}
.diquwrap{
width:7.5rem;
height:4.85rem;
background: #fff;
padding: 0.28rem;
box-sizing: border-box;
position: absolute;
top:0
}
.diwrapbox{
display:flex;
}
.diwraplefttop{
color:#5B5E63;
font-size: 0.26rem;
padding: 0.2rem 0.5rem;
box-sizing: border-box;
text-align: center;
}
.dileftboxitem{
color:#5B5E63;
font-size: 0.28rem;
text-align: center;
padding:0.2rem 0.5rem;
box-sizing: border-box;
}
.diwrapright{
margin-left:0.62rem;
}
.queren{
width:6.84rem;
height:0.88rem;
background:linear-gradient(180deg,rgba(136,165,255,1) 0%,rgba(93,141,238,1) 100%);
opacity:1;
border-radius:0.16rem;
color:#fff;
font-size: 0.32rem;
text-align: center;
line-height: 0.88rem;
margin-top:0.3rem;
}
.jiagewrap{
width:7.5rem;
height:3.4rem;
background: #fff;
padding: 0.32rem;
box-sizing: border-box;
}
.jiagename{
color:#5D8DEE;
font-size: 0.28rem;
}
.jiagequ{
display:flex;
align-items: center;
justify-content: space-between;
margin-top:0.32rem
}
.jiagequleft{
width:2.86rem;
/*height:0.64rem;*/
padding: 0.15rem;
box-sizing: border-box;
font-size: 0;
border:0.01rem solid #EEEEEE
}
.jiagequleft input{
width:2.66rem;
text-align: center;
border:none;
outline:none
}
.jiagequright{
width:2.86rem;
/*height:0.64rem;*/
padding: 0.15rem;
box-sizing: border-box;
font-size: 0;
border:0.01rem solid #EEEEEE
}
.jiagequright input{
width:2.66rem;
text-align: center;
border:none;
outline:none
}
.zhi{
color:#5B5E63;
font-size: 0.28rem;
margin: 0 0.24rem;
/*padding: 0.22rem 0;*/
box-sizing: border-box;
height:0.54rem;
line-height: 0.54rem;
}
.qiuzu{
margin-bottom:1.2rem
}
.qiuzuitem{
padding: 0.4rem 0.42rem;
box-sizing: border-box;
border-bottom:0.01rem solid #f5f5f5;
}
.qiuzuitemtop{
color:#06121E;
font-size: 0.32rem;
font-weight:bold;
}
.qiuzutext{
color:#06121E;
font-size: 0.28rem;
margin-top:0.2rem
}
.qiuzubottom{
display:flex;
align-items: center;
margin-top:0.2rem;
justify-content: space-between;
}
.qiuzutext1{
color:#06121E;
font-size: 0.28rem;
}
.qiuzudate{
color:#8C9198;
font-size: 0.2rem;
}
/*房源详情*/
.detailfangtop{
color:#5D8DEE;
font-size: 0.24rem;
margin-top:0.2rem;
text-align: center;
}
.detaifangimg{
width:6.86rem;
height:3.44rem;
font-size: 0;
margin:0.52rem auto 0;
}
.detaifangbotleft{
color:#8C9198;
font-size: 0.24rem;
}
.detailfangbot{
display:flex;
align-items: center;
justify-content: space-between;
}
.detailfangrigleft{
width:0.36rem;
height:0.36rem;
font-size: 0;
}
.detaifangbotright{
display:flex;
align-items: center;
}
.yijianfuzhu{
color:#8C9198;
font-size: 0.24rem;
}
... ...
/**
* Swiper 4.3.5
* Most modern mobile touch slider and framework with hardware accelerated transitions
* http://www.idangero.us/swiper/
*
* Copyright 2014-2018 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: July 31, 2018
*/
.swiper-container {
height:4rem;
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1
}
.swiper-container-no-flexbox .swiper-slide {
float: left
}
.swiper-container-vertical>.swiper-wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform,-webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box
}
.swiper-container-android .swiper-slide,.swiper-wrapper {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0)
}
.swiper-container-multirow>.swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.swiper-container-free-mode>.swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform,-webkit-transform
}
.swiper-invisible-blank-slide {
visibility: hidden
}
.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide {
height: auto
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: height,-webkit-transform;
transition-property: height,-webkit-transform;
-o-transition-property: transform,height;
transition-property: transform,height;
transition-property: transform,height,-webkit-transform
}
.swiper-container-3d {
-webkit-perspective: 1200px;
perspective: 1200px
}
.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d
}
.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
background-image: -webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));
background-image: -o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));
background-image: linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));
background-image: -o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));
background-image: linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));
background-image: -o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));
background-image: linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
background-image: -webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));
background-image: -o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));
background-image: linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))
}
.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper {
-ms-touch-action: pan-y;
touch-action: pan-y
}
.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper {
-ms-touch-action: pan-x;
touch-action: pan-x
}
.swiper-button-next,.swiper-button-prev {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat
}
.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled {
opacity: .35;
cursor: auto;
pointer-events: none
}
.swiper-button-prev,.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto
}
.swiper-button-next,.swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto
}
.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-lock {
display: none
}
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: .3s opacity;
-o-transition: .3s opacity;
transition: .3s opacity;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
z-index: 10
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0
}
.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction {
bottom: -5px;
left: 0;
width: 100%
}
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transform: scale(.33);
-ms-transform: scale(.33);
transform: scale(.33);
position: relative
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
-webkit-transform: scale(.66);
-ms-transform: scale(.66);
transform: scale(.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
-webkit-transform: scale(.33);
-ms-transform: scale(.33);
transform: scale(.33)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
-webkit-transform: scale(.66);
-ms-transform: scale(.66);
transform: scale(.66)
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
-webkit-transform: scale(.33);
-ms-transform: scale(.33);
transform: scale(.33)
}
.swiper-pagination-bullet {
width: 5px;
height: 5px;
display: inline-block;
border-radius: 50%;
background: #000;
opacity: .2
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #fff;
width:5px;
height:5px;
border-radius: 50%;
}
.swiper-container-vertical>.swiper-pagination-bullets {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0)
}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 6px 0;
display: block
}
.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 8px
}
.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
-webkit-transition: .2s top,.2s -webkit-transform;
transition: .2s top,.2s -webkit-transform;
-o-transition: .2s transform,.2s top;
transition: .2s transform,.2s top;
transition: .2s transform,.2s top,.2s -webkit-transform
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px
}
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap
}
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: .2s left,.2s -webkit-transform;
transition: .2s left,.2s -webkit-transform;
-o-transition: .2s transform,.2s left;
transition: .2s transform,.2s left;
transition: .2s transform,.2s left,.2s -webkit-transform
}
.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: .2s right,.2s -webkit-transform;
transition: .2s right,.2s -webkit-transform;
-o-transition: .2s transform,.2s right;
transition: .2s transform,.2s right;
transition: .2s transform,.2s right,.2s -webkit-transform
}
.swiper-pagination-progressbar {
background: rgba(0,0,0,.25);
position: absolute
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #007aff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top
}
.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0
}
.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar {
width: 4px;
height: 100%;
left: 0;
top: 0
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff
}
.swiper-pagination-progressbar.swiper-pagination-white {
background: rgba(255,255,255,.25)
}
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
background: #fff
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000
}
.swiper-pagination-progressbar.swiper-pagination-black {
background: rgba(0,0,0,.25)
}
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
background: #000
}
.swiper-pagination-lock {
display: none
}
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0,0,0,.1)
}
.swiper-container-horizontal>.swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%
}
.swiper-container-vertical>.swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0,0,0,.5);
border-radius: 10px;
left: 0;
top: 0
}
.swiper-scrollbar-cursor-drag {
cursor: move
}
.swiper-scrollbar-lock {
display: none
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center
}
.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg {
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain
}
.swiper-slide-zoomed {
cursor: move
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12,end) infinite;
animation: swiper-preloader-spin 1s steps(12,end) infinite
}
.swiper-lazy-preloader:after {
display: block;
content: '';
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube {
overflow: visible
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
width: 100%;
height: 100%
}
.swiper-container-cube .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0
}
.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible
}
.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0
}
.swiper-container-flip {
overflow: visible
}
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1
}
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.swiper-container-coverflow .swiper-wrapper {
-ms-perspective: 1200px
}
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>房源</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/base.css">
<script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<!--区域选择框-->
<div class="register" style="display:none">
<div class="diquwrap" style="display:none">
<div class="diwrapbox">
<div class="diwrapleft">
<div class="diwraplefttop">不限</div>
<div class="diwrapleftbox">
<div class="dileftboxitem">东城区</div>
<div class="dileftboxitem">西城区</div>
<div class="dileftboxitem">朝阳区</div>
</div>
</div>
<div class="diwrapright">
<div class="diwraplefttop">不限</div>
<div class="diwrapleftbox">
<div class="dileftboxitem">安定门</div>
<div class="dileftboxitem">安贞</div>
<div class="dileftboxitem">朝阳门内</div>
</div>
</div>
</div>
<div class="queren">确认</div>
</div>
<!-- 价格区间-->
<div class="jiagewrap" style="display:none">
<div class="jiagename">价格区间</div>
<div class="jiagequ">
<div class="jiagequleft">
<input type="text" placeholder="2000">
</div>
<div class="zhi"></div>
<div class="jiagequright">
<input type="text" placeholder="3000">
</div>
</div>
<div class="queren">确认</div>
</div>
<div class="jiagewrap">
<div class="jiagename">面积区间</div>
<div class="jiagequ">
<div class="jiagequleft">
<input type="text" placeholder="最小面积">
</div>
<div class="zhi"></div>
<div class="jiagequright">
<input type="text" placeholder="最大面积">
</div>
</div>
<div class="queren">确认</div>
</div>
</div>
<div class="fanghead">
<div class="fangheadleft">
<div class="ershouname">二手房</div>
<div class="fangheadleftimg">
<img src="img/sun_30.png" alt="">
</div>
</div>
<div class="fangheadmiddle">
<div class="fangheadname">
<img src="img/search.png" alt="">
</div>
<div class="souinput">
<input type="text" placeholder="请输入小区/商圈名称" aria-placeholder="entersearch"/>
</div>
</div>
<div class="fangheadright">
<div class="xiaoxiimg">
<img src="img/xiaoxi.png" alt="">
</div>
<div class="xiaoxiname">
消息
<div class="xiaoxiyuan">5</div>
</div>
</div>
</div>
<div class="fangyuantou">
<div class="fangyuantouitem fangtouactive">
<div class="fangyuantouleft">区域</div>
<!-- <div class="fangyuantourimg">-->
<!-- <img src="img/sun_31.png" alt="">-->
<!-- </div>-->
<div class="fangyuantourimg">
<img src="img/sun_30.png" alt="">
</div>
</div>
<div class="fangyuantouitem">
<div class="fangyuantouleft">价格</div>
<div class="fangyuantourimg">
<img src="img/sun_31.png" alt="">
</div>
</div>
<div class="fangyuantouitem">
<div class="fangyuantouleft">面积</div>
<div class="fangyuantourimg">
<img src="img/sun_31.png" alt="">
</div>
</div>
</div>
<div class="fangyuanboxlist" style="display:none">
<div class="fangwubox">
<div class="fangwuboxitem">
<div class="fangwuboxitemleft">
<img src="img/house.png" alt="">
</div>
<div class="fangwuitemright">
<div class="fangitemritop">
<div class="fangitemtopleft">热门</div>
<div class="fangitemtoprightname">首创路程西府海棠</div>
</div>
<div class="room">
<div class="roomleft">三室两厅</div>
<div class="pingfang">120㎡</div>
</div>
<div class="kaojin">
<div class="kaojinleft">品牌房企</div>
<div class="kaojinright">临近地铁</div>
</div>
<div class="moneyyue">8000元/月</div>
</div>
</div>
<div class="fangwuboxitem">
<div class="fangwuboxitemleft">
<img src="img/house.png" alt="">
</div>
<div class="fangwuitemright">
<div class="fangitemritop">
<div class="fangitemtopleft1">新上</div>
<div class="fangitemtoprightname">首创路程西府海棠</div>
</div>
<div class="room">
<div class="roomleft">三室两厅</div>
<div class="pingfang">120㎡</div>
</div>
<div class="kaojin">
<div class="kaojinleft">品牌房企</div>
<div class="kaojinright">临近地铁</div>
</div>
<div class="moneyyue">8000元/月</div>
</div>
</div>
<div class="fangwuboxitem">
<div class="fangwuboxitemleft">
<img src="img/house.png" alt="">
</div>
<div class="fangwuitemright">
<div class="fangitemritop">
<div class="fangitemtopleft">热门</div>
<div class="fangitemtoprightname">首创路程西府海棠</div>
</div>
<div class="room">
<div class="roomleft">三室两厅</div>
<div class="pingfang">120㎡</div>
</div>
<div class="kaojin">
<div class="kaojinleft">品牌房企</div>
<div class="kaojinright">临近地铁</div>
</div>
<div class="moneyyue">8000元/月</div>
</div>
</div>
<div class="fangwuboxitem">
<div class="fangwuboxitemleft">
<img src="img/house.png" alt="">
</div>
<div class="fangwuitemright">
<div class="fangitemritop">
<div class="fangitemtopleft">热门</div>
<div class="fangitemtoprightname">首创路程西府海棠</div>
</div>
<div class="room">
<div class="roomleft">三室两厅</div>
<div class="pingfang">120㎡</div>
</div>
<div class="kaojin">
<div class="kaojinleft">品牌房企</div>
<div class="kaojinright">临近地铁</div>
</div>
<div class="moneyyue">8000元/月</div>
</div>
</div>
</div>
</div>
<!--求租-->
<div class="qiuzu" style="display:none">
<div class="qiuzuitem">
<div class="qiuzuitemtop">求租的标题</div>
<div class="qiuzutext">期望区域:昌平</div>
<div class="qiuzutext">求租预算:5000-8000元/月</div>
<div class="qiuzubottom">
<div class="qiuzutext1">求租面积:50 - 120㎡</div>
<div class="qiuzudate">更新日期:2019-7-12</div>
</div>
</div>
<div class="qiuzuitem">
<div class="qiuzuitemtop">求租的标题</div>
<div class="qiuzutext">期望区域:昌平</div>
<div class="qiuzutext">求租预算:5000-8000元/月</div>
<div class="qiuzubottom">
<div class="qiuzutext1">求租面积:50 - 120㎡</div>
<div class="qiuzudate">更新日期:2019-7-12</div>
</div>
</div>
<div class="qiuzuitem">
<div class="qiuzuitemtop">求租的标题</div>
<div class="qiuzutext">期望区域:昌平</div>
<div class="qiuzutext">求租预算:5000-8000元/月</div>
<div class="qiuzubottom">
<div class="qiuzutext1">求租面积:50 - 120㎡</div>
<div class="qiuzudate">更新日期:2019-7-12</div>
</div>
</div>
<div class="qiuzuitem">
<div class="qiuzuitemtop">求租的标题</div>
<div class="qiuzutext">期望区域:昌平</div>
<div class="qiuzutext">求租预算:5000-8000元/月</div>
<div class="qiuzubottom">
<div class="qiuzutext1">求租面积:50 - 120㎡</div>
<div class="qiuzudate">更新日期:2019-7-12</div>
</div>
</div>
</div>
<!--求购-->
<div class="qiuzu" style="display:none">
<div class="qiuzuitem">
<div class="qiuzuitemtop">求购的标题</div>
<div class="qiuzutext">期望区域:昌平</div>
<div class="qiuzutext">求租预算:5000-8000元/月</div>
<div class="qiuzubottom">
<div class="qiuzutext1">求租面积:50 - 120㎡</div>
<div class="qiuzudate">更新日期:2019-7-12</div>
</div>
</div>
<div class="qiuzuitem">
<div class="qiuzuitemtop">求购的标题</div>
<div class="qiuzutext">期望区域:昌平</div>
<div class="qiuzutext">求租预算:5000-8000元/月</div>
<div class="qiuzubottom">
<div class="qiuzutext1">求租面积:50 - 120㎡</div>
<div class="qiuzudate">更新日期:2019-7-12</div>
</div>
</div>
<div class="qiuzuitem">
<div class="qiuzuitemtop">求购的标题</div>
<div class="qiuzutext">期望区域:昌平</div>
<div class="qiuzutext">求租预算:5000-8000元/月</div>
<div class="qiuzubottom">
<div class="qiuzutext1">求租面积:50 - 120㎡</div>
<div class="qiuzudate">更新日期:2019-7-12</div>
</div>
</div>
<div class="qiuzuitem">
<div class="qiuzuitemtop">求购的标题</div>
<div class="qiuzutext">期望区域:昌平</div>
<div class="qiuzutext">求租预算:5000-8000元/月</div>
<div class="qiuzubottom">
<div class="qiuzutext1">求租面积:50 - 120㎡</div>
<div class="qiuzudate">更新日期:2019-7-12</div>
</div>
</div>
</div>
<div class="foot">
<div class="footitem">
<div class="footitemtop">
<img src="img/sun_09.png" alt="">
</div>
<div class="itembottom">首页</div>
</div>
<div class="footitem">
<div class="footitemtop">
<img src="img/sun_10.png" alt="">
</div>
<div class="itembottom1">房源</div>
</div>
<div class="footitem">
<div class="footitemtop">
<img src="img/sun_07.png" alt="">
</div>
<div class="itembottom">发布房源</div>
</div>
<div class="footitem">
<div class="footitemtop">
<img src="img/sun_08.png" alt="">
</div>
<div class="itembottom">我的</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script>
$(".fangyuantouitem").click(function(){
$(this).addClass("fangtouactive").siblings(".fangyuantouitem").removeClass("fangtouactive");
$(this).children(".fangyuantourimg").children("img").attr("src","img/sun_30.png");
$(this).siblings(".fangyuantouitem").children(".fangyuantourimg").children("img").attr("src","img/sun_31.png")
})
</script>
</html>
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>房源详情</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/base.css">
<script type="text/javascript" src="../js/base.js"></script>
</head>
<body>
<div class="detailfangtop">此房在XX签约大约节省70280元中介费</div>
<div class="detaifangimg">
<img src="../img/house.png" alt="">
</div>
<div class="detailfangbot">
<div class="detaifangbotleft">房屋编号 128747</div>
<div class="detaifangbotright">
<div class="detailfangrigleft">
<img src="../img/sun_31.png" alt="">
</div>
<div class="yijianfuzhu">一键复制</div>
</div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-2.1.4.js"></script>
</html>
... ...

255 字节

294 字节

292 字节

295 字节

236 字节

239 字节

293 字节

271 字节

200 字节

295 字节

200 字节

189 字节

482 字节

415 字节

418 字节

505 字节

657 字节

618 字节

261 字节

148 字节

144 字节

161 字节

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>首页</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/swiper.min.css">
<script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<div class="head">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/sun_15.png" alt="" >
</div>
<div class="swiper-slide">
<img src="img/sun_15.png" alt="" >
</div>
<div class="swiper-slide">
<img src="img/sun_15.png" alt="" >
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="tophead">
<div class="topheadleft">
<div class="topheadleftimg">
<img src="img/sun_13.png" alt="">
</div>
<div class="topheadrightname">北京</div>
</div>
<div class="topheadmiddle">
<input type="text">
</div>
<div class="topheadright">
<div class="topheadrightimg">
<img src="img/sun_14.png" alt="">
</div>
<div class="topheadrightname">消息</div>
</div>
</div>
</div>
<div class="body">
<div class="chuzulist">
<div class="chuzuitem">
<img src="img/sun_16.png" alt="">
<div class="chuzuname">房屋出售</div>
</div>
<div class="chuzuitem">
<img src="img/sun_17.png" alt="">
<div class="chuzuname">房屋出租</div>
</div>
<div class="chuzuitem">
<img src="img/sun_18.png" alt="">
<div class="chuzuname1">写字楼出租</div>
</div>
</div>
<div class="fangwulist">
<div class="fangwulsititem">
<div class="fangwuimg">
<img src="img/sun_19.png" alt="">
</div>
<div class="fangwuname">房屋求购</div>
</div>
<div class="fangwulsititem">
<div class="fangwuimg">
<img src="img/sun_20.png" alt="">
</div>
<div class="fangwuname">房屋求租</div>
</div>
<div class="fangwulsititem">
<div class="fangwuimg">
<img src="img/sun_21.png" alt="">
</div>
<div class="fangwuname">商铺出租</div>
</div>
<div class="fangwulsititem">
<div class="fangwuimg">
<img src="img/sun_22.png" alt="">
</div>
<div class="fangwuname">求房赚钱</div>
</div>
</div>
<div class="guanyu">关于我们</div>
<div class="aboutusbox">
<div class="aboutboxleft">
<img src="img/sun_23.png" alt="">
<div class="aboutword">
<text class="chubei">平均出售</text>
<text class="chubeinum">15</text> <text class="chubei"></text>
</div>
</div>
<div class="aboutboxright">
<div class="aboutrtop">
<div class="abouttopleft">
<img src="img/sun_24.png" alt="">
<div class="aboutword">
<text class="chubei">储备买家</text>
<text class="chubeinum">68302</text>
</div>
</div>
<div class="abouttopright">
<img src="img/sun_25.png" alt="">
<div class="aboutword">
<text class="chubei">全城经纪人</text>
<text class="chubeinum">68302</text>
</div>
</div>
</div>
<div class="aboutbottom">
<img src="img/sun_26.png" alt="">
<div class="aboutword">
<text class="chubei">全城中介</text>
<text class="chubeinum">68302</text>
</div>
</div>
</div>
</div>
<div class="mianimg">
<img src="img/sun_28.png" alt="">
<div class="mianbox">
<div class="mianboxtop">免中介网 让买房更真实简单</div>
<div class="mianitembox mianbox1">
<div class="mianitemboxleft">
<img src="img/sun_102.png" alt="">
</div>
<div class="mianitemboxright">隐私保护</div>
</div>
<div class="mianitembox">
<div class="mianitemboxleft">
<img src="img/sun_101.png" alt="">
</div>
<div class="mianitemboxright">免费上门评估</div>
</div>
<div class="mianitembox">
<div class="mianitemboxleft">
<img src="img/sun_100.png" alt="">
</div>
<div class="mianitemboxright">全城中介帮卖</div>
</div>
</div>
</div>
<div class="remen">
<div class="remenleft">
<img src="img/sun_27.png" alt="">
</div>
<div class="remenright">热门房源</div>
</div>
<div class="fangwulist">
<div class="fangwulistitem fangwuactive">房屋出售</div>
<div class="fangwulistitem">房屋出租</div>
<div class="fangwulistitem">写字楼出租</div>
<div class="fangwulistitem">商铺出租</div>
</div>
<div class="fangwubox">
<div class="fangwuboxitem">
<div class="fangwuboxitemleft">
<img src="img/house.png" alt="">
</div>
<div class="fangwuitemright">
<div class="fangitemritop">
<div class="fangitemtopleft">热门</div>
<div class="fangitemtoprightname">首创路程西府海棠</div>
</div>
<div class="room">
<div class="roomleft">三室两厅</div>
<div class="pingfang">120㎡</div>
</div>
<div class="kaojin">
<div class="kaojinleft">品牌房企</div>
<div class="kaojinright">临近地铁</div>
</div>
<div class="moneyyue">8000元/月</div>
</div>
</div>
<div class="fangwuboxitem">
<div class="fangwuboxitemleft">
<img src="img/house.png" alt="">
</div>
<div class="fangwuitemright">
<div class="fangitemritop">
<div class="fangitemtopleft1">新上</div>
<div class="fangitemtoprightname">首创路程西府海棠</div>
</div>
<div class="room">
<div class="roomleft">三室两厅</div>
<div class="pingfang">120㎡</div>
</div>
<div class="kaojin">
<div class="kaojinleft">品牌房企</div>
<div class="kaojinright">临近地铁</div>
</div>
<div class="moneyyue">8000元/月</div>
</div>
</div>
<div class="fangwuboxitem">
<div class="fangwuboxitemleft">
<img src="img/house.png" alt="">
</div>
<div class="fangwuitemright">
<div class="fangitemritop">
<div class="fangitemtopleft">热门</div>
<div class="fangitemtoprightname">首创路程西府海棠</div>
</div>
<div class="room">
<div class="roomleft">三室两厅</div>
<div class="pingfang">120㎡</div>
</div>
<div class="kaojin">
<div class="kaojinleft">品牌房企</div>
<div class="kaojinright">临近地铁</div>
</div>
<div class="moneyyue">8000元/月</div>
</div>
</div>
<div class="fangwuboxitem">
<div class="fangwuboxitemleft">
<img src="img/house.png" alt="">
</div>
<div class="fangwuitemright">
<div class="fangitemritop">
<div class="fangitemtopleft">热门</div>
<div class="fangitemtoprightname">首创路程西府海棠</div>
</div>
<div class="room">
<div class="roomleft">三室两厅</div>
<div class="pingfang">120㎡</div>
</div>
<div class="kaojin">
<div class="kaojinleft">品牌房企</div>
<div class="kaojinright">临近地铁</div>
</div>
<div class="moneyyue">8000元/月</div>
</div>
</div>
</div>
<div class="seemore">查看更多</div>
</div>
<div class="foot">
<div class="footitem">
<div class="footitemtop">
<img src="img/sun_05.png" alt="">
</div>
<div class="itembottom1">首页</div>
</div>
<div class="footitem">
<div class="footitemtop">
<img src="img/sun_06.png" alt="">
</div>
<div class="itembottom">房源</div>
</div>
<div class="footitem">
<div class="footitemtop">
<img src="img/sun_07.png" alt="">
</div>
<div class="itembottom">发布房源</div>
</div>
<div class="footitem">
<div class="footitemtop">
<img src="img/sun_08.png" alt="">
</div>
<div class="itembottom">我的</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
autoplay: true,//可选选项,自动滑动
})
$(".fangwulistitem").click(function(){
$(this).addClass("fangwuactive").siblings(".fangwulistitem").removeClass("fangwuactive")
})
</script>
</html>
... ...
var Length = document.documentElement.clientWidth;
var baseWidth = Length <= 1024 ? Length : 1024 < Length ? 750 : '';
document.documentElement.style.fontSize = baseWidth / 750 * 100 + 'px';
... ...
此 diff 太大无法显示。
此 diff 太大无法显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>免中介网</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/base.css">
<script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<div class="logintop"></div>
<div class="enterphone">
<input type="number" placeholder="请输入手机号">
</div>
<div class="yanzheng">
<div class="yanzhengleft">
<input type="text" placeholder="请输入短信验证码">
</div>
<div class="fasong">发送验证码</div>
</div>
<div class="wentips">温馨提示:未注册的手机号将自动创建账号</div>
<div class="lijideng">立即登录</div>
<div class="zhucename">注册/登录即代表同意 <text class="mian">《免中介隐私政策》</text><text class="mian">《免中介用户服务协议》</text></div>
</body>
</html>
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>录房赚钱</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/base.css">
<script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<div class="lufanglist">
<div class="lufangitem">
<div class="itemboxleft">
<div class="lufangitemleft">
<img src="img/sun_01.png" alt="">
</div>
<div class="lufnagitemright">二手房</div>
</div>
<div class="itemboxright">
<img src="img/yourow.png" alt="">
</div>
</div>
<div class="lufangitem">
<div class="itemboxleft">
<div class="lufangitemleft">
<img src="img/sun_02.png" alt="">
</div>
<div class="lufnagitemright">出租房</div>
</div>
<div class="itemboxright">
<img src="img/yourow.png" alt="">
</div>
</div>
<div class="lufangitem">
<div class="itemboxleft">
<div class="lufangitemleft">
<img src="img/sun_03.png" alt="">
</div>
<div class="lufnagitemright">写字楼</div>
</div>
<div class="itemboxright">
<img src="img/yourow.png" alt="">
</div>
</div>
<div class="lufangitem">
<div class="itemboxleft">
<div class="lufangitemleft">
<img src="img/sun_04.png" alt="">
</div>
<div class="lufnagitemright">商城</div>
</div>
<div class="itemboxright">
<img src="img/yourow.png" alt="">
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
</body>
</html>
... ...