2023-04-17 16:14:18 +08:00

347 lines
6.7 KiB
Plaintext

/* pages/UK/UK.wxss */
.page-header image{
display: block;
width: 100%;
height: 500rpx;
}
.hot-apartment{
padding: 56rpx 0 80rpx;
}
.hot-apartment .title{
padding: 0 40rpx 32rpx;
font-size: 38rpx;
color: #333;
font-weight: 600;
}
.city-list{
padding: 0 20rpx 0 40rpx;
display: flex;
flex-wrap: wrap;
}
.city-list .item{
margin-right: 20rpx;
margin-bottom: 20rpx;
display: inline-flex;
}
.city-list .item:last-child{
margin-right: 0;
}
.city-list .item .text{
display: inline-flex;
align-items: center;
background: #f2f2f2;
color: #666;
padding: 0 20rpx;
line-height: 72rpx;
height: 72rpx;
border-radius: 10rpx;
}
.city-list .item.active .text{
color: #fff;
background: #77cbc1;
}
.city-list .item .text .you{
display: inline-flex;
width: 16px;
height: 16px;
flex:0 0 16px;
margin-left: 4px;
}
.card-container{
padding:20rpx 0 0 40rpx;
}
.indicator-dots{
display: flex;
align-items: center;
justify-content: center;
padding-left: 2px;
margin: 40rpx auto 44rpx;
}
.indicator-dots .item{
display: inline-flex;
border:1px solid #ccc;
border-radius: 50%;
flex: 0 0 8px;
width: 8px;
height: 8px;
margin-right: 2px;
}
.indicator-dots .item.active{
background: #77cbc1;
border-color: #77cbc1
}
.card-container .btn .text{
display: flex;
align-items: center;
justify-content: center;
border:1px solid #77cbc1;
color: #77cbc1;
font-size: 26rpx;
width: 400rpx;
height: 72rpx;
border-radius: 36rpx;
margin: 0 auto;
}
.card-container .btn image{
display: inline-flex;
flex:0 0 12px;
width: 12px;
height: 12px;
margin-left: 4px;
}
.hover{
background: transparent
}
.uk-strategy{
border-top: 10px solid #f2f2f2;
padding: 60rpx 0 40rpx;
}
.uk-strategy .title{
padding: 0 40rpx 40rpx;
font-size: 38rpx;
color: #333;
font-weight: 600;
}
.uk-strategy .list{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 40rpx 0;
}
.uk-strategy .item{
display: inline-flex;
width: calc(50% - 10rpx);
height: 280rpx;
border-radius: 20rpx;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
margin-bottom: 20rpx;
font-size: 30rpx;
color: #000
}
/* app,card,job,luggage,strategy,ticket */
.uk-strategy .item.luggage{
background: #fef7da;
}
.uk-strategy .item .icon{
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 32rpx;
height: 100rpx;
}
.uk-strategy .item.luggage .icon image{
width: 65.6rpx;
height: 100rpx;
}
.uk-strategy .item.housetype{
background: #e5faf5;
}
.uk-strategy .item.housetype .icon image{
width: 103rpx;
height: 96rpx;
}
.uk-strategy .item.ticket{
background: #eef1f6;
}
.uk-strategy .item.ticket .icon image{
width: 95.7rpx;
height: 84rpx;
}
.uk-strategy .item.card{
background: #faeceb;
}
.uk-strategy .item.card .icon image{
width: 100rpx;
height: 100rpx;
}
.uk-strategy .item.job{
background: #fff4e2;
}
.uk-strategy .item.job .icon image{
width: 94rpx;
height: 72rpx;
}
.uk-strategy .item.app{
background: #f0eff5;
}
.uk-strategy .item.app .icon image{
width: 64.5rpx;
height: 98rpx;
}
.uk-strategy .item .order{
position: absolute;
left: -16rpx;
top: -16rpx;
transform: rotateZ(-40deg);
border-bottom: 1px solid #e4e4e4;
width: 80rpx;
height: 80rpx;
color: #ccc;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
transform-origin: center;
font-size: 28rpx;
}
.uk-strategy .item .order .text{
transform: rotateZ(40deg);
position: absolute;
left: 40rpx;
top: 34rpx;
}
.about-belloliving{
border-top: 10px solid #f2f2f2;
padding: 60rpx 40rpx 60rpx;
}
.about-belloliving .title{
padding: 0 0rpx 32rpx;
font-size: 38rpx;
color: #333;
font-weight: 600;
}
.about-belloliving .list{
background: #f9f9f9;
border-radius: 20rpx;
padding: 16rpx 40rpx;
}
.about-belloliving .list .item{
display: flex;
align-items: center;
padding: 44rpx 0rpx 44rpx 16rpx;
border-bottom: 1px solid #e4e4e4;
}
.about-belloliving .list .item:last-child{
border-bottom: none;
}
.about-belloliving .list .item image{
width: 60rpx;
height: 60rpx;
}
.about-belloliving .list .text{
color: #666;
display: inline-flex;
word-break: break-all;
font-size: 26rpx;
line-height: 1.6
}
.about-belloliving .list .sub{
display: inline-flex;
width: 120rpx;
flex:0 0 120rpx;
margin-right: 60rpx;
color: #77cbc1;
flex-direction: column;
position: relative;
align-items: center;
}
.about-belloliving .list .icon{
display: inline-flex;
width: 100%;
align-items: center;
justify-content: center;
margin-bottom: 20rpx;
}
.about-belloliving .list .year{
padding-left: 0;
}
.about-belloliving .list .year .sub{
flex: 0 0 160rpx;
width: 160rpx;
margin-right: 36rpx;
}
.about-belloliving .list .year .sub image{
width: 160rpx;
height: 160rpx;
}
.about-belloliving .list .year .sub .name{
position: absolute;
left: 0;
top: -10rpx;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
}
.about-belloliving .list .year .sub .name .num{
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
margin-right: 4rpx;
}
.contact{
margin-top: 40rpx;
background: #f9f9f9;
border-radius: 20rpx;
padding: 64rpx 0 56rpx;
}
.contact .name{
display: flex;
align-items: center;
justify-content: center;
color: #999;
}
.contact .name::before,.contact .name::after{
display: inline-flex;
content: "";
width: 48rpx;
flex: 0 0 48rpx;
height: 1px;
background: #ccc;
margin: 0 20rpx;
}
.contact .belloliving-wechat{
display: flex;
align-items: center;
justify-content: center;
margin: 40rpx 0 10rpx;
font-size: 30rpx;
color: #333;
}
.contact .belloliving-wechat .num{
display: inline-flex;
color: #77cbc1;
background: #ebebeb;
border-radius: 6rpx;
padding: 0 28rpx;
height: 48rpx;
line-height: 46rpx;
align-items: center;
justify-content: center;
font-size: 28rpx;
}
.contact .button{
border:1px solid #e4e4e4;
background: transparent;
border-radius:36rpx;
height: 72rpx;
box-sizing: border-box;
width: 310rpx;
font-size: 26rpx;
margin: 40rpx auto 0;
display: flex;
align-items: center;
justify-content: center;
}
.contact .button image{
width: 44rpx;
height: 36rpx;
margin-right: 14rpx;
}
.contact .tips{
text-align: center;
}
.contact .tips .text{
color: #77cbc1;
font-weight: bold;
display: inline
}