/* pages/irentDetail/irentDetail.wxss */ @import '../common/common.wxss'; .container { position: relative; background: #fff; padding-bottom: 140rpx; } .container .bj { position: absolute; top: 0; left: 0; width: 100vw; height: 400rpx; background: linear-gradient(46.0873532343303deg, rgba(224, 240, 255, 1) 39%, rgba(98, 177, 255, 1) 122%); } .share-box { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); z-index: 1001; } .share-box .box { width: 100vw; height: 360rpx; position: absolute; bottom: 0; background: #fff; font-size: 0; text-align: center; } .whitebox { width: 100vw; height: calc(100vh - 360rpx); position: absolute; bottom: 360rpx; font-size: 0; text-align: center; } .share-box .name { line-height: 120rpx; font-size: 30rpx; } .share-box .item { display: inline-block; width: 50%; font-size: 30rpx; padding: 30rpx 0; line-height: inherit; vertical-align: middle; background: transparent; border: none; } .share-box .item:after { border: none } .share-box image { display: block; margin: 0 auto 30rpx; } .images { margin: 40rpx; } .images image { width: 100%; display: block; } .share-box .tips { color: #999999; text-align: center; font-size: 28rpx; } .share-box .title { color: #333333; font-size: 38rpx; text-align: center; } .share-box .btn { width: 220rpx; height: 80rpx; line-height: 80rpx; margin: 50rpx auto; text-align: center; color: #C63E3A; font-size: 30rpx; border: 1px solid #e8e8e8; border-radius: 40rpx; } .back { position: fixed; left: 10px; top: 30px; z-index: 1000; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, 0.1); color: #fff; font-size: 15px; text-align: center; line-height: 30px; } .back image { width: 20px; height: 20px; margin-top: 5px; } .info-box { padding: 40rpx; } .title { font-size: 34rpx; font-weight: 700; color: #333; word-break: break-all; margin-bottom: 20rpx; } .info-box .title { font-size: 40rpx } .info-box .sub { font-size: 28rpx; color: #666; word-break: break-all; text-align: justify; } .house-classify { padding: 40rpx; } .house-classify .color-red { color: #C63E3A; display: inline-block; margin: 0 6rpx; } .house-classify .li { display: flex; padding: 30rpx 0; color: #999; justify-content: space-between; align-items: center } .house-classify .li:not(:last-child) { border-bottom: 1px solid #f2f2f2; } .house-classify .name { margin-bottom: 10rpx; font-size: 30rpx; color: #333; } .house-classify .left { display: flex; flex-direction: column; justify-content: left; text-align: left; } .house-classify .right { display: inline-flex; min-width: 120rpx; height: 60rpx; padding: 0 16rpx; justify-content: center; align-content: center; background: #62b1ff; color: #fff; border-radius: 60rpx; font-size: 26rpx; align-items: center; box-sizing: border-box; } map { width: 100%; margin-top: 20rpx; z-index: 1; } map .clickmap { width: 100%; height: 100%; } .add-title { font-size: 32rpx; } .block-box { margin: 0 0 0 40rpx; padding: 40rpx 40rpx 40rpx 0; } .intro { color: #666; text-align: justify; word-break: break-all; font-size: 28rpx; line-height: 48rpx; } .intro .item { min-height: 48rpx; line-height: 48rpx; } .traffic { display: flex; align-items: top; margin-top: 40rpx; } .traffic image { width: 40rpx; height: 40rpx; margin-right: 18rpx; position: relative; top: 10rpx; } .traffic .text { display: inline-flex; flex: 0 0 calc(100% - 58rpx); color: #666; text-align: justify; word-break: break-all; font-size: 28rpx; line-height: 48rpx; position: relative; } .facility { padding: 40rpx 0 40rpx 0rpx; border-radius: 10rpx; } .facility .item { display: flex; margin-top: 40rpx; align-items: top; } .facility .item:nth-child(1) { margin-top: 0; } .facility .item .logo { width: 40rpx; height: 40rpx; margin-right: 18rpx; position: relative; top: 8rpx; } .facility .item .text { display: flex; flex: 0 0 calc(100% - 58rpx); color: #666; text-align: justify; word-break: break-all; font-size: 28rpx; line-height: 48rpx; flex-wrap: wrap; justify-content: flex-start; } .facility .item .text .i { display: inline-flex; margin: 0 30rpx 10rpx 0; align-items: center; } .facility .item .text image { width: 28rpx; height: 28rpx; margin-right: 6rpx; } .imageurl { margin-bottom: 10rpx; width: 100%; } .tomap { white-space: nowrap; padding-right: 60rpx; overflow: hidden; text-overflow: ellipsis; } .tomap image { position: absolute; right: 0; top: 4rpx; width: 40rpx; height: 40rpx; transform: rotateZ(180deg); margin: 0; } .aroundSchool { padding: 30rpx 0; } .aroundSchool .li { padding: 12rpx 0; display: flex; justify-content: space-between; } .aroundSchool .li .schoolname { display: inline-flex; color: #666; font-size: 28rpx; } .aroundSchool .li .distance { display: inline-flex; font-size: 26rpx; color: #ffc05f; } .showmore { color: #999; text-align: center; padding: 10rpx 0; font-size: 26rpx; } .around-school-alert { position: fixed; z-index: 1005; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4) } .around-school-alert .inner { background: #fff; z-index: 1006; position: fixed; bottom: 0; left: 0; width: 100vw; } .around-school-alert .title { text-align: center; font-size: 36rpx; font-weight: 650; color: #333; position: relative; overflow: hidden; display: flex; justify-content: space-between; padding: 0 } .around-school-alert .title .text { display: inline-flex; justify-content: center; flex: 1; padding: 36rpx 0 36rpx 52rpx; } .around-school-alert .close { right: 0; top: 0; width: 52rpx; height: 53rpx; } .around-school-alert .close image { width: 26rpx; height: 26rpx; position: absolute; left: 32rpx; bottom: 32rpx; transform: rotateZ(45deg); } .around-school-alert .item { padding: 36rpx 36rpx 26rpx 40rpx; border-bottom: 1px solid #e8e8e8; } .around-school-alert .school { position: relative; font-size: 30rpx; color: #333; margin-bottom: 20rpx; display: flex; align-items: center; } .around-school-alert .school .icon, .school-list .li .school .icon { left: -50rpx; top: 8rpx; width: 25rpx; height: 26rpx; margin-right: 15rpx; } .around-school-alert .distance-list { display: flex; padding: 10rpx 0; justify-content: space-between; font-size: 24rpx; color: #ffc05f; padding-left: 44rpx; } .around-school-alert .gate { color: #666; font-size: 26rpx; } .around-school-alert .list { max-height: calc(100vh - 400rpx); overflow-y: scroll } .with-same-brand { padding: 40rpx; border-top: 1px solid #e4e4e4; } .with-same-brand .same-title { font-size: 40rpx; color: #333; font-weight: bold; margin-bottom: 40rpx; } .irenCouponReceive { position: fixed; right: 10rpx; bottom: 220rpx; z-index: 1003; } .irenCouponReceive .img { display: block; width: 100rpx; height: 100rpx; margin: 0; top: 0; } .icon-uni52A0::after { content: "\52a0"; } .icon-uni6DFB::after { content: "\6dfb"; } .icon-uni5BA2::after { content: "\5ba2"; } .icon-uni670D::after { content: "\670d"; } .icon-uni9A6C::after { content: "\9a6c"; } .icon-uni4E0A::after { content: "\4e0a"; } .icon-uni9884::after { content: "\9884"; } .icon-uni8BA2::after { content: "\8ba2"; } .serviceWindow { position: fixed; top: 0; left: 0; width: 750rpx; height: 100vh; background-color: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; justify-content: flex-end; z-index: 30007; } .serviceWindow .serviceWindow-box { width: 750rpx; border-radius: 45rpx 45rpx 0 0; background-color: rgba(239, 247, 255, 1); border-top: 8rpx solid #f1d05f; position: relative; display: flex; flex-direction: column; align-items: center; max-height: 90vh; } .serviceWindow .serviceWindow-title { font-size: 60rpx; line-height: 95rpx; color: #333233; display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: bolder; margin-top: 80rpx; } .serviceWindow .serviceWindow-title .serviceWindow-title-item { display: flex; align-items: center; margin-bottom: 25rpx; } .serviceWindow .serviceWindow-title .serviceWindow-title-item i::before { vertical-align: baseline; } .serviceWindow .serviceWindow-head-outer { width: 168rpx; height: 168rpx; border-radius: 100%; background-color: rgba(98, 177, 254, 0.4); display: flex; justify-content: center; align-items: center; position: absolute; top: -84rpx; left: 50%; transform: translateX(-50%); } .serviceWindow .serviceWindow-head-within { width: 136rpx; height: 136rpx; border-radius: 50%; background-color: rgba(223, 239, 255, 1); display: flex; justify-content: center; align-items: center; } .serviceWindow .serviceWindow-head-icon { width: 87rpx; height: 87rpx; } .serviceWindow .serviceWindow-title-icon { width: 291rpx; height: 189rpx; } .serviceWindow .QRCode-box { width: 540rpx; background-color: #fff; border-radius: 75rpx 75rpx 0 0; box-shadow: 0rpx 0rpx 12rpx rgb(98 177 254 / 30%); margin-top: 50rpx; padding-bottom: 158rpx; overflow-y: scroll; } .serviceWindow .QRCode-box .QRCode-item { height: 430rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; } .serviceWindow .QRCode-box .QRCode-item:not(:last-child) { border-bottom: dashed #d7d7d7 2rpx; } .serviceWindow .QRCode-box .QRCode-item .QRCode-item-box { width: 240rpx; height: 240rpx; display: flex; align-items: center; justify-content: center; position: relative; } .serviceWindow .QRCode-box .QRCode-item-image { width: 195rpx; height: 195rpx; } .serviceWindow .QRCode-box .topLeftCorner { position: absolute; top: 0; left: 0; } .serviceWindow .QRCode-box .topRightCorner1 { position: absolute; top: 0; right: 0; } .serviceWindow .QRCode-box .top { width: 8rpx; height: 24rpx; border-radius: 50rpx 50rpx 0 0; background-color: rgba(255, 214, 73, 1); position: absolute; } .serviceWindow .QRCode-box .bottom { width: 8rpx; height: 24rpx; border-radius: 0 0 50rpx 50rpx; background-color: rgba(255, 214, 73, 1); position: absolute; } .serviceWindow .QRCode-box .left { width: 24rpx; height: 8rpx; border-radius: 50rpx 0 0 50rpx; background-color: rgba(255, 214, 73, 1); position: absolute; } .serviceWindow .QRCode-box .right { width: 24rpx; height: 8rpx; border-radius: 0 50rpx 50rpx 0; background-color: rgba(255, 214, 73, 1); position: absolute; } .serviceWindow .QRCode-box .topLeftCorner>view { top: 0; left: 0; } .serviceWindow .QRCode-box .topRightCorner1>view { top: 0; right: 0; } .serviceWindow .QRCode-box .leftBottom>view { bottom: 0; left: 0; } .serviceWindow .QRCode-box .bottomRightCorner>view { bottom: 0; right: 0; } .serviceWindow .QRCode-box .QRCode-item .QRCode-title { font-size: 22rpx; line-height: 22rpx; color: #555; margin-top: 28rpx; word-break: break-word; } .serviceWindow .serviceWindow-bottom { position: absolute; left: 0; bottom: 0; width: 750rpx; height: 246rpx; display: flex; justify-content: center; align-items: center; } .serviceWindow .serviceWindow-bottom .serviceWindow-bottom-bj { width: 750rpx; height: 246rpx; position: absolute; bottom: 0; } .serviceWindow .serviceWindow-bottom .serviceWindow-hint-outer { border-radius: 50rpx; background-color: rgba(255, 255, 255, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1; margin-top: 30rpx; padding: 12rpx; } .serviceWindow .serviceWindow-bottom .serviceWindow-hint-inside { height: 75rpx; border-radius: 50rpx; background-color: rgba(231, 243, 255, 1); display: flex; align-items: center; justify-content: center; font-size: 24rpx; color: rgba(85, 85, 85, 0.8); padding: 0 62rpx; } .newContainer .serviceWindow .serviceWindow-bottom .serviceWindow-hint-inside { padding: 0 42rpx; } .serviceWindow .arrows { width: 32rpx; height: 12rpx; margin: 0 20rpx; } .serviceWindow .serviceWindow-btn { flex: 1; } .detailFooter { z-index: 999; } .detailFooter .fixfooter { z-index: 999; } .detailFooter .fixfooter .phone { background: #62b1fe; color: #fff; border-style: unset; line-height: 100rpx; } .container .content { width: 100vw; background-color: #f6f6f6; border-radius: 65rpx 0 0 0; margin-top: 70rpx; padding-top: 25rpx; position: relative; box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.0823529411764706); position: relative; padding-bottom: 55rpx; } .container .arc { width: 55rpx; height: 55rpx; position: absolute; right: 0; top: 0; transform: translateY(-100%); } .media-module { margin-bottom: 48rpx; } .tab-box { padding: 0 30rpx; margin-bottom: 12rpx; flex-wrap: wrap; } .tab-box .tab-item { height: 48rpx; padding: 0 16rpx; color: #447eb3; background: linear-gradient(-55.8297720355872deg, rgba(224, 240, 255, 1) 0%, rgba(98, 177, 255, 1) 297%); border-radius: 12rpx; font-size: 23rpx; margin-right: 12rpx; margin-bottom: 15rpx; } .apartment-title { font-size: 42rpx; line-height: 69rpx; color: #000000; margin-bottom: 24rpx; padding: 0 30rpx; word-break: break-word; } .apartment-introduce { color: #7f7f7f; line-height: 36rpx; font-size: 25.5rpx; padding: 0 30rpx; margin-bottom: 37.5rpx; word-break: break-word; white-space: pre-wrap; } .all-apartments { color: rgb(51, 51, 51); font-size: 24rpx; line-height: 36rpx; justify-content: space-between; background-color: rgba(242, 242, 242, 1); border: 1rpx solid rgba(235, 235, 235, 1); border-radius: 24rpx; height: 72rpx; margin: 0 30rpx 75rpx; padding: 0 18rpx; } .all-apartments .all-apartments-amount { width: 30rpx; height: 30rpx; border-radius: 50%; background-color: #fdda55; color: #000; font-size: 21rpx; margin-right: 18rpx; } .all-apartments .all-apartments-icon { width: 9rpx; height: 15rpx; } .apartment-block { padding-bottom: 75rpx; } .apartment-block .apartment-head { color: #000000; font-size: 27rpx; padding: 0 30rpx; margin-bottom: 31.5rpx; } .apartment-block .apartment-head-icon { margin-right: 12rpx; width: 36rpx; height: 36rpx; } .room-type-box { padding: 0 30rpx; } .room-type-box .room-type-item { background-color: #fff; border-radius: 15rpx; margin-bottom: 30rpx; padding-top: 36rpx; box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.0823529411764706); position: relative; overflow: hidden; } .room-type-box .room-type-item .room-type-border { position: absolute; top: 0; left: 0; width: 100%; height: 8rpx; } .room-type-box .room-type-item .room-type-border-yellow { background: -webkit-linear-gradient(0deg, rgba(253, 218, 85, 1) 0%, rgba(255, 249, 225, 1) 97%); background: -moz-linear-gradient(90deg, rgba(253, 218, 85, 1) 0%, rgba(255, 249, 225, 1) 97%); background: linear-gradient(90deg, rgba(253, 218, 85, 1) 0%, rgba(255, 249, 225, 1)); } .room-type-box .room-type-item .room-type-border-gray { background: -webkit-linear-gradient(0deg, rgba(215, 215, 215, 1) 0%, rgba(246, 246, 246, 1) 97%); background: -moz-linear-gradient(90deg, rgba(215, 215, 215, 1) 0%, rgba(246, 246, 246, 1) 97%); background: linear-gradient(90deg, rgba(215, 215, 215, 1) 0%, rgba(246, 246, 246, 1) 97%); } .room-type-box .room-type-tab { padding: 0 24rpx; margin-bottom: 21.5rpx; flex-wrap: wrap; } .room-type-box .room-type-title { padding: 0 24rpx; font-size: 36rpx; color: #000000; font-weight: 650; margin-bottom: 16.5rpx; word-break: break-word; } .room-type-box .room-type-tab-item { color: #7F7F7F; font-size: 23rpx; border-radius: 6rpx; height: 36rpx; line-height: 36rpx; background-color: rgb(242, 242, 242); padding: 0 10rpx; margin-right: 12rpx; margin-bottom: 10rpx; } .room-type-box .room-type-tab-item.highlight { color: #50e3c2; background-color: #fff; border: 1rpx solid rgba(80, 227, 194, 1); } .room-type-box .scroll { overflow: hidden; margin-bottom: 30rpx; } /* 在对应的wxss文件中 */ .room-type-media::-webkit-scrollbar { display: none; } .room-type-media { scrollbar-width: none; } .room-type-box .room-type-media { padding: 0 24rpx; margin-bottom: 30rpx; overflow-x: auto; width: 690rpx; display: -webkit-box; } .room-type-box .room-type-media-item { height: 200rpx; margin-right: 15rpx; position: relative; overflow: hidden; } .room-type-box .room-type-media-image { width: 100%; height: 100%; border-radius: 10rpx; } .room-type-box .room-type-videoplay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50rpx; height: 50rpx; } .room-type-box .room-type-bottom { justify-content: space-between; height: 106.5rpx; border-top: 1rpx solid #f2f2f2; padding: 0 28rpx; } .room-type-box .room-type-bottom-left { color: #000000; font-size: 24rpx; } .room-type-box .room-type-bottom .room-type-symbol { font-family: 'Arial-Black', 'Arial Black', sans-serif; font-weight: 900; } .room-type-box .room-type-bottom .room-type-price { color: #f95d5d; font-size: 43rpx; margin: 0 10rpx; font-family: 'Arial-Black', 'Arial Black', sans-serif; font-weight: 900; } .room-type-box .room-type-bottom .room-type-worn-price { margin-left: 18rpx; color: #727272; font-size: 24rpx; text-decoration: line-through; } .room-type-box .room-type-bottom .room-type-month { color: #555555; font-size: 23rpx; font-weight: 400; } .room-type-box .room-type-bottom .room-type-bottom-right { height: 60rpx; line-height: 60rpx; padding: 0 24rpx; border-radius: 54rpx; background-color: rgba(253, 223, 109, 0.235294117647059); font-size: 27rpx; color: #000000; } .room-type-box .room-type-bottom .room-type-bottom-right .consult-icon { width: 36rpx; height: 36rpx; margin-right: 6rpx; font-weight: 400; } .room-type-box .room-type-bottom .room-type-bottom-right.already { background-color: #fff; border: 1rpx solid rgba(215, 215, 215, 1); color: #aaaaaa; font-size: 24rpx; } .apartment-block .apartment-block-text { color: #555555; line-height: 54rpx; font-size: 24rpx; background-color: #fff; margin: 0 30rpx; padding: 30rpx; word-wrap: break-all; white-space: pre-line; border-radius: 30rpx; box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.0823529411764706); display: block; word-break: break-word; } .apartment-map-box { position: relative; width: 690rpx; height: 282rpx; border-radius: 24rpx; background-color: rgba(51, 51, 51, 0.298039215686275); margin: 0 auto; overflow: hidden; } .apartment-map-box .apartment-map { width: 100%; height: 100%; margin: 0; padding: 0; } .apartment-map-box .apartment-map-masking { background-color: rgba(51, 51, 51, 0.298039215686275); width: 100%; height: 100%; } .apartment-map-box .apartment-map-site { background-color: rgba(51, 51, 51, 0.8); border-radius: 15rpx; padding: 18rpx 15rpx; } .apartment-map-box .apartment-map-icon { width: 33rpx; height: 33rpx; } .apartment-map-box .apartment-map-name { font-size: 24rpx; color: #fff; font-weight: 400; padding: 0 9rpx; min-width: 189rpx; max-width: 540rpx; } .apartment-map-box .apartment-map-arrows { width: 9rpx; height: 18rpx; } .apartment-facility { width: 690rpx; margin: 0 30rpx; padding: 30rpx 30rpx 0; border-radius: 30rpx; background-color: #fff; box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.0823529411764706); } .apartment-facility .apartment-facility-item { justify-content: space-between; align-items: flex-start; } .apartment-facility .apartment-facility-item:not(:last-of-type) { margin-bottom: 30rpx; } .apartment-facility .apartment-facility-item:last-of-type .apartment-facility-box { border: none; } .apartment-facility .apartment-facility-title { background-color: rgba(246, 246, 246, 1); height: 39rpx; border-radius: 12rpx; color: #555555; font-size: 24rpx; padding: 0 9rpx; } .apartment-facility .apartment-facility-box { width: calc(100% - 122rpx); border-bottom: 1rpx solid #f2f2f2; flex-wrap: wrap; } .apartment-facility .apartment-facility-box-item { margin-bottom: 30rpx; color: rgb(51, 51, 51); font-size: 24rpx; margin-right: 57rpx; } .apartment-facility .apartment-facility-img { width: 18rpx; height: 13.5rpx; margin-right: 15rpx; } .apartment-block .apartment-block-introduce { box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.0823529411764706); margin: 0 30rpx; padding: 30rpx; word-wrap: break-all; white-space: pre-line; border-radius: 30rpx; background-color: #fff; } .apartment-block .rich-text { font-size: 24rpx; color: #555555; line-height: 54rpx; word-break: break-word; } .apartment-tips { color: #aaaaaa; font-size: 22rpx; line-height: 30rpx; border: 2rpx solid rgba(230, 230, 230, 1); border-radius: 30rpx; padding: 39rpx 27rpx; width: 690rpx; margin: 0 30rpx 75rpx; } .apartment-tips .apartment-tips-text:not(:last-of-type) { margin-bottom: 30rpx; } .apartment-list { margin: 0 auto; flex-direction: column; } .bottom-bar { position: fixed; bottom: 0; left: 0; width: calc(100vw - 75rpx); height: 135rpx; background-color: #fff; z-index: 11; border-top: 1rpx solid #d7d7d7; justify-content: space-between; box-sizing: content-box; padding-right: 30rpx; padding-left: 45rpx; } .bottom-bar .register-btn { width: 450rpx; height: 105rpx; font-size: 36rpx; border-radius: 69rpx; background-color: rgba(98, 177, 255, 1); color: #fff; } .bottom-bar .bottom-bar-item { flex-direction: column; font-size: 21rpx; color: #000000; justify-content: center; } .bottom-bar .bottom-bar-item .bottom-bar-icon { margin-bottom: 6rpx; } .bottom-bar .bottom-bar-collect { margin-left: 45rpx; } .bottom-bar .bottom-bar-collect .bottom-bar-icon { width: 45rpx; height: 45rpx; } .bottom-bar .bottom-bar-icon { width: 39rpx; height: 39rpx; } .bottom-bar .bottom-bar-share { line-height: 1; margin: 0; border: none; outline: none; padding: 0; overflow: auto; border-radius: revert; background: #fff; } .bottom-bar .bottom-bar-share::after { border: none; height: 0; }