HKRentingMiniprogram/pages/index/index.wxss

/* pages/pageIndex/pageIndex.wxss */
.container {
    background: #fafafa;
    min-height: 100vh;
    padding-bottom: 160rpx;
}

.search-btn {
    display: flex;
    align-items: center;
    height: 90rpx;
    line-height: 90rpx;
    width: calc(100vw - 60rpx);
    margin: 0 auto 35rpx;
    border-radius: 10rpx;
    color: #999;
    font-size: 26rpx;
    padding: 0 30rpx;
    box-shadow: 0px 1px 21px 0px rgba(153, 153, 153, 0.27);
    position: relative;
    top: -25rpx;
    z-index: 10;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.96)
}

.search-btn image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 16rpx;
}

.types-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 22rpx;
    color: #333;
    padding: 0 30rpx 10rpx;
}

.types-tab .item {
    display: inline-flex;
    /* flex: 1; */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.types-tab .item .img-box {
    margin-bottom: 16rpx;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 110rpx;
    height: 110rpx;
    border-radius: 30rpx;
    background-color: rgb(255, 255, 255);
    box-shadow: 0.629px 0.777px 16px 0px rgba(243, 243, 243, 0.996);
}

.types-tab .item:nth-child(1) image {
    width: 62rpx;
    height: 58rpx;
}

.types-tab .item:nth-child(2) image {
    width: 63rpx;
    height: 60rpx;
}

.types-tab .item:nth-child(3) image {
    width: 66rpx;
    height: 57rpx;
}

.types-tab .item:nth-child(4) image {
    width: 60rpx;
    height: 60rpx;
}

.addhousingresource-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.addhousingresource-icon .addhousingresource-yellow {
    width: 60rpx;
    height: 60rpx;
    background-color: #fddb50;
    border-radius: 50%;
    position: relative;
}

.across {
    width: 32rpx;
    height: 4rpx;
    border-radius: 50rpx;
    background-color: #000222;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.vertical {
    width: 4rpx;
    height: 32rpx;
    border-radius: 50rpx;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.house-block {
    padding: 64rpx 0 0;
}

.house-block .title {
    margin-bottom: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 30rpx;
    font-size: 32rpx;
    color: #333;
}

.house-block .title .more {
    color: #ffc05f;
    font-size: 24rpx;
    padding: 10rpx 30rpx;
}

.house-block .title .more image {
    width: 9rpx;
    height: 14rpx;
    margin-left: 10rpx;
}

.scroll {
    width: 100vw;

}

.scroll .inner-scroll {
    display: flex;
    padding: 0 30rpx;
}

.scroll .inner-scroll .item {
    margin-right: 20rpx;
    display: inline-flex;
    border-radius: 10rpx;
    background-color: rgb(255, 255, 255);
    box-shadow: 0.629px 0.777px 16px 0px rgba(243, 243, 243, 0.994);
    flex: 0 0 620rpx;
    max-width: calc(100vw - 130rpx);
    overflow: hidden;
    position: relative;
}

.scroll .inner-scroll .right {
    display: inline-flex;
    flex: 0 0 2rpx;
}

.scroll .last-child {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 5, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll .last-child .btn {
    color: #fff;
    width: 210rpx;
    height: 120rpx;
    border: 1px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
}

.scroll .last-child .btn image {
    width: 20rpx;
    height: 20rpx;
    margin-left: 10rpx;
}

.house-brands .title .more {
    color: #66b3ff;
}

.world-block .title .more {
    color: #74cdc1
}

.inner-scroll .card {
    display: block;
    width: 100%;
}

.popularize {
    display: block;
    width: calc(100vw - 60rpx);
    margin: 60rpx auto 0;
    border-radius: 10rpx;
}

.video-box {
    width: 100vw;
    height: 100vh;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0;
    top: 0;
}

.video-box .close {
    position: fixed;
    left: 20rpx;
    top: 20rpx;
    width: 50rpx;
    height: 50rpx;
    z-index: 1000000
}

.video-box video {
    /* margin: calc(50vh - 120px) auto;
  display: block; */
    width: 100vw;
    height: 100vh;
}

.cover {
    position: fixed;
    left: 5px;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.cover .image {
    width: 30rpx;
    height: 30rpx;
}

.area-selection .shadow {
    -moz-box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.0784313725490196);
    -webkit-box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.0784313725490196);
    box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.0784313725490196);
    /* box-shadow: 0 0 12rpx red; */
}

.area-selection {
    width: 690rpx;
    border-radius: 24rpx;
    margin: 0 auto;
    overflow: hidden;
    filter: drop-shadow(0 0 12rpx rgba(0, 0, 0, 0.0784313725490196));
}

.area-selection .head {
    height: 102rpx;
    font-size: 27rpx;
    color: #fff;
    background-color: rgb(98, 177, 255);
    margin-top: 12rpx;
    border-radius: 24rpx 24rpx 0 0;
    /* overflow: hidden; */
    margin-top: 30rpx;

}

.area-selection .head .head-item {
    height: 100%;
    flex-direction: column;
    margin-bottom: 18rpx;
}

.area-selection .head .pitch {
    color: #000000;
    font-size: 30rpx;
    font-weight: 650;
    position: relative;
    z-index: 1;
    padding-bottom: 24rpx;
    background-color: #fff;
    height: 114rpx;
    border-radius: 24rpx 24rpx 0 0;
    margin-bottom: 12rpx;

    /* -moz-box-shadow: 0 -12rpx 12rpx rgba(0, 0, 0, 0.0784313725490196);
    -webkit-box-shadow: 0 -12rpx 12rpx rgba(0, 0, 0, 0.0784313725490196);
    box-shadow: 0 -12rpx 12rpx rgba(0, 0, 0, 0.0784313725490196) */
    box-shadow: 0 -6rpx 12rpx rgba(0, 0, 0, 0.0784313725490196);

}

.area-selection .head .pitch::after,
.area-selection .head .pitch::before {
    content: "";
    position: absolute;
    bottom: 18rpx;
    right: -24rpx;
    width: 24rpx;
    height: 24rpx;
    background: radial-gradient(24rpx at 24rpx 0px, transparent 24rpx, #fff 24rpx);
}

.area-selection .head .pitch::after {
    left: -24rpx;
    right: auto;
    transform: scaleX(-1);

}

.area-selection .head .head-underline {
    width: 122rpx;
    height: 8rpx;
    border-radius: 57rpx;
    background-color: rgba(253, 218, 85, 1);
    margin-top: 6rpx;
}

.area-selection .area-content {
    background-color: #fff;
    border-radius: 24rpx;
    margin-top: -18rpx;
    padding-bottom: 48rpx;

}

.area-selection .area-data {
    font-size: 24rpx;
    color: #555555;
    padding-top: 55rpx;
    position: relative;
    margin-bottom: 48rpx;

}

.area-selection .area-data::after,
.area-selection .area-data::before {
    content: "";
    width: 124.5rpx;
    height: 1rpx;
    background-color: #ebebeb;
    position: absolute;
}

.area-selection .area-data::before {
    left: 30rpx;
}

.area-selection .area-data::after {
    right: 30rpx;
}

.area-selection .area-amount {
    font-weight: 900;
    margin: 0 15rpx;
}

.area-selection .area-icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 15rpx;
}

.area-selection .area-list {
    flex-wrap: wrap;
    color: #555555;
    font-size: 24rpx;
    padding: 0 30rpx;
}

.area-selection .area-list.area-district {
    justify-content: space-between;
}

.area-selection .area-list .area-item {
    border-radius: 12rpx;
    background-color: rgba(242, 242, 242, 1);
    height: 60rpx;
}

.area-selection .area-list.area-district .area-item {
    width: 198rpx;
}

.area-selection .area-list.area-school .area-item {
    width: 90rpx;
    margin-right: 18rpx;
    margin-bottom: 18rpx;
}

.area-selection .area-list.area-school .area-item:nth-child(6n) {
    margin-right: 0;
}

.area-selection .area-list.area-school .area-item:nth-child(n + 6) {
    margin-bottom: 0;
}

.area-selection .area-list.area-type {
    margin-bottom: 39rpx;
}

.area-selection .area-list.area-type:last-of-type {
    margin-bottom: 0;
}

.area-selection .area-list.area-type .area-item {
    width: 168rpx;
    margin-right: 18rpx;
    margin-bottom: 18rpx;
}

.area-selection .area-list.area-type .area-item:nth-child(3n) {
    margin-right: 0;
}

.area-selection .area-list.area-type .area-type-name {
    height: 60rpx;
    line-height: 60rpx;
    margin-right: 40rpx;
}

.area-selection .area-list.area-type .area-type-block {
    flex-wrap: wrap;
}

.area-selection .area-list.area-type .area-item:nth-child(n + 3) {
    margin-bottom: 0;
}

.area-pop-header {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 1rpx solid #ebebeb;
}

.area-pop-header .area-pop-header-title {
    font-size: 32rpx;
    color: #000000;
    font-weight: 650;
}

.area-pop-header .area-pop-header-left {
    padding-left: 30rpx;
}

.area-pop-header .area-pop-header-left image {
    width: 30rpx;
    height: 18rpx;
    transform: rotate(-90deg);
}

.area-pop-content {
    position: fixed;
    left: 0;
    top: 80rpx;
    width: 100%;
    background-color: #fff;
    flex-direction: column;
}

.area-pop-content-left {
    width: 180rpx;
    color: #555555;
    font-size: 27rpx;
    background-color: rgba(246, 246, 246, 1);
}

.area-pop-content-left .area-pop-content-left-item {
    height: 120rpx;
    width: 100%;
}

.area-pop-content-left .area-pop-content-left-item.pitch {
    background-color: #fff;
    font-weight: 650;
    color: #000000;
}

.area-pop-content-right {
    color: #555555;
    font-size: 27rpx;
    overflow: auto;
    min-height: 50vh;
    max-height: 60vh;
}

.area-pop-content-right .area-pop-content-right-item {
    height: 120rpx;
    padding-left: 48rpx;
    padding-right: 31.5rpx;
    justify-content: space-between;

}

.area-pop-content-right .area-pop-content-right-operate {
    width: 27rpx;
    height: 27rpx;
    border-radius: 6rpx;
    border: 1rpx solid rgba(170, 170, 170, 1);
}

.area-pop-bottom {
    font-size: 36rpx;
    padding: 36rpx 30rpx 54rpx;
    border-top: 1rpx solid #ebebeb;
}

.area-pop-bottom .area-pop-reset-btn {
    color: #D7D7D7;
}

.area-pop-bottom .area-pop-reset-btn image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 12rpx;
}

.area-pop-bottom .area-pop-reset-btn {
    width: 180rpx;
    height: 96rpx;
    border-radius: 82.5rpx;
    border: 1rpx solid rgba(215, 215, 215, 1);
    margin-right: 30rpx;
}

.area-pop-bottom .area-pop-confirm-btn {
    height: 96rpx;
    border-radius: 82.5rpx;
    background-color: rgba(98, 177, 255, 1);
    color: #fff;
    font-size: 650;
}

.apartment-block {}

.apartment-block .apartment-list {
    padding: 0 30rpx;
}

.apartment-block .apartment-list .apartment-item {
    flex: 0 0 300rpx;
    width: 300rpx;
    height: 235.5rpx;
    border-radius: 24rpx;
    background: linear-gradient(169.477903549005deg, rgba(252, 248, 251, 1) 27%, rgba(98, 177, 255, 1) 348%);
    box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.0784313725490196);
    border: 1rpx solid rgba(229, 232, 240, 1);
    flex-direction: column;
    justify-content: space-between;
    padding: 22.5rpx 18rpx 27rpx 18rpx;
}

.apartment-block .apartment-list .apartment-item:not(:last-of-type) {
    margin-right: 15rpx;
}

.apartment-block .apartment-list .apartment-name {
    color: #000000;
    font-size: 24rpx;
    width: 264rpx;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apartment-block .apartment-list .apartment-introduce {
    color: #7f7f7f;
    font-size: 21rpx;
    width: 264rpx;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8rpx;
}

.apartment-block .apartment-list .apartment-image-list {
    justify-content: space-between;
}

.apartment-block .apartment-list .apartment-image-item {
    width: 126rpx;
    height: 82.5rpx;
    border-radius: 15rpx;
}

.tab-list {
    color: #7F7F7F;
    font-size: 25.5rpx;
    font-weight: 400;
    padding: 0 30rpx;
    margin-top: 30rpx;
    z-index: 1;
    position: relative;
}

.tab-list .tab-item {
    padding: 0 24rpx;
}

.tab-list .tab-item:first-of-type {
    padding-left: 0;
}

.tab-list .tab-item.pitch {
    color: #000;
    font-weight: 650;
    position: relative;
    z-index: 1;
}

.tab-list .tab-item.pitch:first-of-type::after {
    left: -4rpx;
}

.tab-list .tab-item.pitch::after {
    width: 30rpx;
    height: 30rpx;
    content: "";
    position: absolute;
    top: -9rpx;
    /* left: -4rpx; */
    left: 25.5rpx;
    background-color: #50e3c2;
    border-radius: 50%;
    z-index: -1;
}

.tab-list .tab-green {
    width: 30rpx;
    height: 30rpx;
    background-color: #50e3c2;
    position: absolute;
    top: -9rpx;
    left: 26rpx;
    border-radius: 50%;
    z-index: -1;
    transition: left 0.1s;
}

.pinterest-list {
    padding: 0 30rpx;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pinterest-list .pinterest-list-item {
    width: 337.5rpx;
    background-color: #fff;
    border-radius: 24rpx 24rpx 14rpx 24rpx;
    margin-bottom: 18rpx;
}

.pinterest-list .pinterest-list-item.apartment {
    padding-bottom: 36rpx;
}

.pinterest-list .pinterest-list-item.apartment .apartment-top {
    background: linear-gradient(-47.9699747981038deg, rgba(183, 220, 253, 1) -59%, rgba(213, 208, 239, 1) 29%, rgba(98, 177, 255, 1) 135%);
    height: 45rpx;
    border-radius: 24rpx 24rpx 0 0;
}

.pinterest-list .pinterest-list-item.apartment .apartment-icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 8rpx;
}

.pinterest-list .pinterest-list-item.apartment .apartment-text {
    width: 97.5rpx;
    height: 31.5rpx;
}

.pinterest-list .pinterest-list-item.apartment .apartment-img {
    width: 337.5rpx;
    height: 125rpx;
}

.pinterest-list .pinterest-list-item.apartment .apartment-name {
    font-size: 27rpx;
    color: #000000;
    font-weight: 650;
    padding: 13.5rpx 15rpx;
}

.pinterest-list .pinterest-list-item.apartment .apartment-introduce {
    color: #aaaaaa;
    font-size: 21rpx;
    padding: 0 15rpx;
}

.pinterest-list .pinterest-list-item.apartment .apartment-price {
    margin-top: 6rpx;
    margin-bottom: 18rpx;
}

.pinterest-list .pinterest-list-item.apartment .apartment-price-item {
    justify-content: space-between;
    padding: 16.5rpx 0;
    margin: 0 15rpx;
}

.pinterest-list .pinterest-list-item.apartment .apartment-price-item:not(:last-of-type) {
    border-bottom: 1rpx solid #ebebeb;
}

.pinterest-list .pinterest-list-item.apartment .apartment-price-name {
    color: #000000;
    font-size: 22.5rpx;
}

.pinterest-list .pinterest-list-item.apartment .apartment-price-cost {
    font-size: 21rpx;
    color: #555555;
    justify-content: flex-end;
}

.pinterest-list .pinterest-list-item.apartment .apartment-price-unit {
    font-weight: 900;
}

.pinterest-list .pinterest-list-item.apartment .apartment-price-number {
    font-size: 24rpx;
    color: #f95d5d;
    font-weight: 900;
    margin: 0 10rpx;
}

.pinterest-list .pinterest-list-item.apartment .apartment-price-more {
    margin: 0 auto;
    font-size: 21rpx;
    background-color: rgba(253, 223, 109, 1);
    border-radius: 30rpx;
    width: 84rpx;
    height: 36rpx;
}

.pinterest-list .pinterest-list-item.general {}

.pinterest-list .pinterest-list-item.general .general-img {
    width: 337.5rpx;
    height: 253.5rpx;
    border-radius: 24rpx 24rpx 0 0;
}

.pinterest-list .pinterest-list-item.general .general-name {
    font-size: 27rpx;
    color: #000000;
    line-height: 48rpx;
    padding: 0 15rpx;
}

.pinterest-list .pinterest-list-item.general .general-tag {
    background-color: rgba(242, 242, 242, 1);
    border: 1rpx solid rgba(235, 235, 235, 1);
    border-radius: 8rpx;
    height: 36rpx;
    font-size: 21rpx;
    color: #555555;
    display: inline-flex;
    margin-right: 15rpx;
}