.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%; } .cover{ display: block; width: 100%; height: auto; min-height: 450rpx; } .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 40rpx; } 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; } .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: 20rpx; padding-right: 10rpx; } .caselistbox .everycasebox .imgbox .casesharenum image{ display: block; width: 22rpx; height: 21rpx; margin-right:4rpx; position: relative; top: 11rpx; } .caselistbox .everycasebox .imgbox .casesharenum view{ line-height: 40rpx; } .c-client { margin-left: 30rpx; } .casehousemsgbox{ line-height: 32rpx; margin-top: 6rpx; font-size: 22rpx; } .lookmore{ display: block; width: 444rpx; height: 88rpx; border: 2rpx solid #9DB6CF; border-radius: 40rpx; line-height: 84rpx; margin: 40rpx auto; } .casemsgbox1{ padding: 20rpx 10rpx 30rpx; } /* .designerbox image{ display: block; width: 40rpx; height: 40rpx; margin-right: 10rpx; } */ .casemsgbox1 .designerbox{ padding: 0; width: auto; margin: 0; background: #fff; } .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{ padding: 20rpx 30rpx; font-size: 36rpx; } .vidoetit{ padding-left: 22rpx; line-height: 44rpx; position: relative; font-weight: bold; } .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); } .rightbtnbox{ display: block; position: fixed; right: 0rpx; bottom:200rpx; z-index: 9; } .pricebtnimg{ display: block; position: relative; right: 7rpx; width: 140rpx; height: 140rpx; z-index: 9; margin-bottom: 6rpx; } .tcollectbox{ display: block; width: 98rpx; height: 98rpx; background-color: #ffffff; box-shadow: 0 2rpx 8rpx 0 rgba(56,72,85,0.20); border: solid 1px #B6CADE; border-radius: 50%; position: relative; right: -20rpx; overflow: hidden; } .tcollectbox image{ display: block; width: 27rpx; height: 27rpx; margin: 18rpx auto 12rpx; } .tsharebox{ background-color: #259cfa; box-shadow: 0px 2rpx 15rpx 1px rgba(36, 157, 250, 0.48); border: solid 1px #249dfa; margin-bottom: 24rpx; } .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; } .interVrStyle { position: absolute; width: 90rpx !important; top: 50%; left: 50%; transform: translate(-50%,-50%); } .configmsg image { display: block !important; border-radius: 0rpx !important; }