/* pages/pageIndex/pageIndex.wxss */ page { --scheme-bg: #62b1ff; } .container { background: rgba(246, 246, 246, 1); min-height: 100vh; padding-bottom: 160rpx; overflow: hidden; width: 100vw; } .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; */ padding: 0 52.5rpx 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; */ width: 84rpx; height: 84rpx; /* border-radius: 30rpx; */ border-radius: 24rpx; background-color: rgb(255, 255, 255); /* box-shadow: 0.629px 0.777px 16px 0px rgba(243, 243, 243, 0.996); */ box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.0784313725490196); } .types-tab .item image { width: 48rpx; height: 45rpx; } /* .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 -6rpx 12rpx rgba(0, 0, 0, 0.0784313725490196); -webkit-box-shadow: 0 -6rpx 12rpx rgba(0, 0, 0, 0.0784313725490196); box-shadow: 0 -6rpx 12rpx rgba(0, 0, 0, 0.0784313725490196); /* box-shadow: 0 0 12rpx red; */ } .area-selection { width: 690rpx; border-radius: 24rpx; margin: 22rpx 30rpx 0; box-sizing: border-box; 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; align-items: center; padding-top: 30rpx; } .area-selection .head .head-item .head-name { line-height: 48rpx; } .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 -8rpx 12rpx rgba(0, 0, 0, 0.0784313725490196); padding-top: 20rpx; } .area-selection .head .head-item-pitch { width: 24rpx; height: 24rpx; position: absolute; bottom: 18rpx; background-color: #fff; /* border: 1rpx solid; */ /* border-top-color: rgb(98, 177, 255); */ /* border-right-color: rgb(98, 177, 255); */ /* border-bottom-color: #fff; */ /* border-left-color: #fff; */ } .area-selection .head .head-item-pitch::after { content: ""; width: 24rpx; height: 24rpx; background-color: rgb(98, 177, 255); position: absolute; } .area-selection .head .head-item-pitch-left { left: -24rpx; } .area-selection .head .head-item-pitch-right { right: -24rpx; } .area-selection .head .head-item-pitch-left::after { border-radius: 0 0 24rpx 0; } .area-selection .head .head-item-pitch-right::after { border-radius: 0 0 0 24rpx; } /* .area-selection .head .pitch::after, .area-selection .head .pitch::before { content: ""; position: absolute; bottom: 18rpx; right: -24rpx; width: 24rpx; height: 24rpx; background-color: rgb(98, 177, 255); border-radius: 0 0 0 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; height: 100%; } .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-unlimited-pitch { width: 30rpx; height: 30rpx; border-radius: 50%; background-color: #b1d8ff; } .area-pop-content-right .area-pop-content-right-operate-unlimited-pitch image { width: 18rpx; height: 13.5rpx; } .area-pop-content-right .area-pop-content-right-operate-unlimited { width: 30rpx; height: 30rpx; border-radius: 50%; border: 1rpx solid rgba(170, 170, 170, 1); } .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-content-right .area-pop-content-right-operate.operate-pitch { border: none; } .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 { margin-top: 37.5rpx; box-sizing: border-box; overflow: hidden; } .apartment-block .scroll { box-sizing: border-box; overflow: hidden; } .apartment-block .apartment-list { padding: 0 30rpx; width: 100vw; box-sizing: border-box; } .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; } .apartment-block .apartment-list .apartment-introduce { color: #7f7f7f; font-size: 21rpx; width: 264rpx; 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: 54rpx; 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: 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; position: relative; box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.0784313725490196); } .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; width: 120rpx; } .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 { padding-bottom: 36rpx; } .pinterest-list .pinterest-list-item.general .top-right-corner { height: 36rpx; padding: 0 10rpx; font-size: 21rpx; border-radius: 8rpx; position: absolute; top: 15rpx; right: 15rpx; background-color: rgba(51, 51, 51, 0.56078431372549); color: #fff; } .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; display: -webkit-box; display: -ms-flexbox; /* display: flex; */ -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } .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; padding: 0 15rpx; } .pinterest-list .pinterest-list-item.general .label-list { font-size: 23rpx; color: #aaaaaa; padding: 0 15rpx; line-height: 40rpx; margin-top: 15rpx; } .pinterest-list .pinterest-list-item.general .label-list .label-item:not(:last-of-type) { padding-right: 43rpx; position: relative; } .pinterest-list .pinterest-list-item.general .label-list .label-item:not(:last-of-type)::after { width: 5rpx; height: 5rpx; border-radius: 50%; content: ""; display: block; position: absolute; top: 18.5rpx; right: 20rpx; background-color: #aaaaaa; } .pinterest-list .pinterest-list-item.general .general-cost { font-size: 21rpx; color: #555555; padding: 0 15rpx; margin-top: 15rpx; } .pinterest-list .pinterest-list-item.general .general-cost .general-unit { font-weight: 900; color: #000000; } .pinterest-list .pinterest-list-item.general .general-cost .general-number { font-size: 30rpx; color: #F95D5D; font-weight: 900; margin: 0 10rpx; } .pinterest-list .pinterest-list-item .color-scheme { width: 48rpx; height: 48rpx; border-radius: 8rpx; /* background-color: red; */ background-color: var(--scheme-bg); position: absolute; bottom: 0; right: 0; } .pinterest-list .pinterest-list-item .color-scheme::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 0 0 100% 0; background-color: #fff; } .headSwiper { width: 690rpx; margin: 32rpx auto 30rpx; position: relative; border-radius: 20rpx; } .headSwiper .headSwiper-img { width: 690rpx; height: 292.5rpx; border-radius: 20rpx; } .headSwiper .indication-point { position: absolute; bottom: 20rpx; right: 15rpx; height: 18rpx; border-radius: 45rpx; background-color: rgba(255, 255, 255, 0.501960784313725); padding: 0 9rpx; } .headSwiper .indication-point .indication-point-item { width: 12rpx; height: 12rpx; border-radius: 50%; border: 1rpx solid #aaaaaa; background-color: transparent; } .headSwiper .indication-point .indication-point-item:not(:last-of-type) { margin-right: 4rpx; } .headSwiper .indication-point .indication-point-item.pitch { border: none; background-color: #000000; } .search-box { width: 690rpx; height: 72rpx; border-radius: 345rpx; border: 1rpx solid rgba(235, 235, 235, 1); margin: 12rpx auto 0; background-color: #fff; } .search-box .search-img { width: 30rpx; height: 30rpx; margin: 0 22.5rpx; } .search-box .search-input { height: 100%; } .waterfall-item { width: 300rpx; } .apartment1-name { font-size: 27rpx; color: transparent; font-weight: 650; padding: 13.5rpx 15rpx; } .apartment1-introduce { color: transparent; font-size: 21rpx; padding: 0 15rpx; } .general-name1 { font-size: 27rpx; color: transparent; line-height: 48rpx; padding: 0 15rpx; display: -webkit-box; display: -ms-flexbox; /* display: flex; */ -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; }