.image-box { width: 100%; height: 450rpx; overflow: hidden; position: relative; } .vr-box { width: 120rpx; height: 65rpx; position: absolute; z-index: 9; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 36rpx; } .vr-box > image { width: 100%; } .image-box image { width: 100%; min-height: 100%; } .switchTab { position: absolute; max-width: 80%; height: 56rpx; background-color: rgba(255, 255, 255, 0.6); color: #333333; z-index: 999; bottom: 20rpx; left: 50%; transform: translateX(-50%); border-radius: 28rpx; display: flex; align-items: center; } .switchTab>view { width: 130rpx; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 24rpx; } .activeTab { background-color: #249EFB; border-radius: 35rpx; color: #fff; } .titbox{ position: fixed; width: 100%; box-sizing: border-box; z-index: 100; overflow: hidden; } .cover{ display: block; width: 100%; height: auto; min-height: 200rpx; } .saleperson{ display: block; width: 92%; height: 160rpx; background-color: #ffffff; overflow: hidden; border-radius: 10rpx; position: absolute; top:20rpx; left: 4%; z-index: 2; padding: 31rpx 24rpx; box-sizing: border-box; } .saleperson .headimgbox{ display: block; width: 98rpx; height: 98rpx; border-radius: 50%; border: 4rpx solid #347af6; } .saleperson .headimgbox image{ display: block; width: 100%; height: 100%; border-radius: 50%; } .saleperson .phonebox{ display: block; } .phonebox .phoneimg{ display: block; width: 60rpx; height: 60rpx; background-color: rgba(52, 122, 246, 0.2); border-radius: 50%; margin: 0 auto 4rpx; } .phonebox image{ display: block; width: 32rpx; height: 32rpx; margin: 14rpx auto; } .personmsgbox{ margin-left: 16rpx; margin-top: 8rpx; } .titbox .titbg{ display: block; width:100%; position: absolute; top: 0; left:0; } .wlast{ position: absolute; display: block; width:20rpx; height: 36rpx; left: 20rpx; bottom: 16rpx; z-index: 10; } .titmsg{ padding: 30rpx 10rpx 0 10rpx; } .designerbox{ display: block; width: 670rpx; background-color: #f7f7f7; border-radius: 10rpx; box-sizing: border-box; padding: 30rpx; margin:28rpx auto 0; } image.designerimg{ display: block; width: 80rpx; height: 80rpx; border-radius: 40rpx; } .designermsgbox{ margin-left: 32rpx; } .qrcodeimg{ display:block; width: 80rpx; height: 80rpx; } .designstylebox{ width: 450rpx; } .orderbtn{ display: block; width: 154rpx; height: 80rpx; line-height: 80rpx; border-radius: 40rpx; background-image: linear-gradient(180deg, #4ACDFD 0%, #249EFB 100%); } .casemsgbox{ display: block; background-color: #FFFFFF; position: relative; z-index: 1; } .casemsgbox{ width: 730rpx; margin: 40rpx auto; background-color: #ffffff; border-radius: 10rpx; border: 2rpx solid #ececec; box-sizing: border-box; padding: 40rpx 20rpx; } .everycasemsg{ padding-left: 32rpx; box-sizing: border-box; } .casepricebox view{ height:32rpx; overflow:hidden; margin-top:24rpx; } .configtitbox{ display: block; background: #F0F4F7; width:100%; height:88rpx; padding-left: 20rpx; position: relative; } .configtitbox image{ display: block; width: 32rpx; height: 32rpx; margin-right: 16rpx; position: relative; top: 28rpx; } .configmsg{ padding: 24rpx 10rpx 32rpx; font-size: 24rpx; } .setimebox{ padding: 0rpx 10rpx 32rpx; color: #b8b8b8; } .configmsg image{ max-width: 100%; height: auto; } .fbg{ display: block; width: 100%; height:16rpx; background: #F0F4F7; } .switchview{ display: block; padding: 40rpx; } .switchbox{ display: block; width: 216rpx; height: 80rpx; border: 2rpx solid #9DB6CF; line-height: 76rpx; border-radius: 40rpx; overflow: hidden; } .switchbox image{ display: block; width: 16rpx; height: 28rpx; position: relative; top:24rpx; } .designcasebox{ display: block; width: 100%; background: #ffffff; padding-top: 32rpx; border-top: 1px solid #eaeaea; padding-bottom: 140rpx; /* ios < 11.2*/ } .designcasetit{ padding: 0 20rpx; } .designcasetit view{ /* margin-left: 24rpx; */ } /* 装修案例 */ .caselistbox{ padding: 24rpx 20rpx 0; } .everycasebox{ width: 100%; box-shadow: 0 4rpx 20rpx 0 rgba(36,158,251,0.26); border-radius: 10rpx; overflow: hidden; margin-bottom: 20rpx; } .leftcasebox{ margin-right: 20rpx; } .leftcasebox,.rightcasebox{ width: 345rpx; overflow: initial; } .caselistbox .everycasebox .imgbox image{ display: block; width: 100%; } .casesharenum{ position: absolute; right:0; top: 12rpx; height: 40rpx; border-radius: 24rpx 0 0 24rpx; opacity: 0.7; background: #384855; color: #B6CADE; padding-left: 14rpx; padding-right: 8rpx; } .caselistbox .everycasebox .imgbox .casesharenum image{ display: block; width: 22rpx; height: 18rpx; margin-right:4rpx; position: relative; top: 11rpx; } .caselistbox .everycasebox .imgbox .casesharenum view{ line-height: 40rpx; } .casehousemsgbox{ line-height: 32rpx; margin-top: 6rpx; font-size: 22rpx; } .footer{ display: block; width: 100%; height: 98rpx; box-shadow: 0 -4rpx 12rpx 0 rgba(0,145,255,0.15); background: #FFFFFF; position: fixed; left: 0; bottom: 0; z-index: 100; } .collectbox image{ display: block; width:40rpx; height: 40rpx; margin: 10rpx auto 6rpx; } button.friendbox{ background-color: #FFFFFF; } .friendbox image{ display: block; width:48rpx; height: 40rpx; margin: 10rpx auto 6rpx; } button.sharebtnbox{ display: block; margin-left: 16rpx; background: #249EFB; height: 80rpx; line-height: 80rpx; border-radius: 40rpx; position: relative; top: 9rpx; width: 340rpx; } .sharebtnbox image{ display: block; width: 46rpx; height: 40rpx; position: relative; margin-right: 8rpx; top:20rpx; } .sharebtnbox .text{ line-height: 80rpx; color: #FFFFFF; } .lookmore{ display: block; width: 444rpx; height: 88rpx; border: 2rpx solid #9DB6CF; border-radius: 40rpx; line-height: 84rpx; margin: 40rpx auto; } .footerBox{ display: block; width: 100%; height: 98rpx; position: fixed; bottom: 0; left: 0; background-color: #fff; box-shadow: 0 -6rpx 8rpx 0 rgba(56,72,85,0.23); z-index: 99; } .rightfooter{ display: inline-block; width: 300rpx; height: 100%; color: #fff; background: #245FFB; } .rightfooter .righttoptext{ font-size: 40rpx; line-height: 40rpx; margin-top: 12rpx; position: relative; } .rightfooter .righttoptext image{ display: inline-block; width:28rpx; height: 34rpx; position: relative; top: -6rpx; margin-left: 4rpx; } .leftmobileBox,.centerprice{ display: inline-block; width: 225rpx; height: 100%; } .leftmobileBox image,.centerprice image{ width: 48rpx; height: 48rpx; margin: 10rpx auto 0; } .leftmobileBox view,.centerprice view{ font-size: 22rpx; color: #384855; line-height: 32rpx; } .rightbottomText{ display: block; position: relative; font-size: 28rpx; line-height: 34rpx; } .casemsgbox1 .designerbox { padding: 0; width: auto; margin: 0; background: #fff; } .casemsgbox1{ padding: 20rpx 10rpx 30rpx; } .updateBox { width: 730rpx; height: auto; overflow: hidden; padding: 20rpx; background-color: #EFF4F8; display: flex; align-items: center; margin: 20rpx auto 0rpx; } .u-img-box { width: 80rpx; height: 80rpx; border-radius: 50%; overflow: hidden; } .u-img-box image { width: 100%; height: 100%; } .u-company { overflow: hidden; box-sizing: border-box; padding: 0rpx 20rpx; } .u-company-name { font-size: 30rpx; color: #333333; } .u-company-address { color: #A0BDD4; font-size: 24rpx; width: 100%; display: flex; } .address-text { flex: 1; } .address-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .address-show { color: #28A1FF; } .u-button { width: 120rpx; height: 60rpx; background-color: #28A1FF; color: #fff; font-size: 24rpx; font-style: normal; line-height: 60rpx !important; } .flex-sub { flex: 1; } .u-position { font-size: 20rpx; color: #333333; } .caseimgbox{ display: block; border-top: 1px solid #eaeaea; width: 100%; padding: 40rpx; } .everycaseimgbox{ display: block; width: 670rpx; border: 1px solid #eaeaea; border-radius: 10rpx; margin-bottom: 40rpx; overflow: hidden; } .caseimg{ display: block; width: 100%; height: auto; } .casetextbox{ display: block; background-color: #fff; padding: 32rpx 40rpx; } /* 视频案例 */ .videocasebox{ font-size: 36rpx; padding: 20rpx 30rpx; } .vidoetit{ font-weight: bold; padding-left: 22rpx; line-height: 44rpx; position: relative; } .vidoetit::after{ display: block; content: ' '; width: 8rpx; height: 30rpx; background: #333333; border-radius: 2rpx; position: absolute; left: 0; top: 7rpx; } .videoBox{ display: block; width: 100%; height: 450rpx; background: #333333; } /* 案例详情 */ .casetit{ display: block; width: 100%; padding: 20rpx 10rpx 0; } .casetit view{ margin-right: 40rpx; padding-bottom: 10rpx; } .nowtitbox{ font-size: 36rpx; font-weight: bold; position: relative; } .nowtitbox::before{ content: ' '; display: block; width: 12rpx; height: 4rpx; position: absolute; bottom: 0; left: 50%; transform-origin: 100% 0; transform: translateX(-150%) rotate(-30deg); background-color: #333333; } .nowtitbox::after{ content: ' '; display: block; width: 12rpx; height: 4rpx; position: absolute; bottom: 0; left: 50%; background-color: #333333; transform-origin: 0 0; transform: translateX(-50%) rotate(390deg); } .pricebtnimg{ display: block; position: fixed; right: 20rpx; bottom:300rpx; width: 140rpx; height: 140rpx; z-index: 9; } .interVrStyle { position: absolute; width: 90rpx !important; top: 50%; left: 50%; transform: translate(-50%,-50%); } .configmsg image { display: block !important; border-radius: 0rpx !important; }