.image-box { width: 100%; height: 450rpx; overflow: hidden; position: relative; } .overflowHidden { width: 100%; height: 95vh; overflow: hidden; } .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; margin: 0rpx !important; padding: 0rpx !important; } /*--*/ .shareTips { width: 100%; height: 55rpx; background-color: #FDDAC4; color: #F96400; position: fixed; bottom: 100rpx; left: 0rpx; line-height: 55rpx; text-align: center; font-size: 24rpx; } .cutAndShare { width: 100%; height: 100rpx; position: fixed; bottom: 0rpx; left: 0rpx; background-color: #fff; box-shadow: 0rpx -10rpx 10rpx 6rpx rgba(0, 0, 0, 0.1); display: flex; } .shareCutImg { width: 40%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 32rpx; } .shareBtn { flex: 1; height: 100%; background-color: #F96400; border-radius: 0rpx !important; line-height: 100rpx; color: #fff; font-size: 32rpx; } .cutMask { width: 100%; height: 100vh; position: fixed; top: 0rpx; left: 0rpx; background-color: rgba(0, 0, 0, 0.5); z-index: 999999 !important; } .cutBlock { width: 100%; height: 70%; background-color: #fff; position: absolute; bottom: 0rpx; left: 0rpx; box-sizing: border-box; padding: 88rpx 0rpx 100rpx; } .cutTitle { width: 100%; height: 88rpx; background-color: #F96400; color: #fff; font-size: 32rpx; text-align: center; line-height: 88rpx; position: absolute; top: 0rpx; left: 0rpx; } .cutConfirm { width: 100%; height: 100rpx; background-color: #F96400; color: #fff; position: absolute; bottom: 0rpx; left: 0rpx; text-align: center; line-height: 100rpx; font-size: 32rpx; border-radius: 0rpx; } .cutContent { width: 100%; height: 100%; overflow: auto; } .cutShareLabel { width: 100%; height: 66rpx; line-height: 66rpx; box-sizing: border-box; padding: 0rpx 20rpx; } .cutImglistBox { width: 100%; height: auto; overflow: hidden; box-sizing: border-box; padding: 20rpx; display: flex; flex-wrap: wrap; } .uploadImg { width: 150rpx; height: 150rpx; border: 2rpx solid #D7DFE4; display: flex; flex-direction: column; justify-content: center; align-items: center; } .uploadImg>image { width: 50rpx; } .u-text { font-size: 28rpx; color: #B5C6D3; } .imageItem { width: 150rpx; height: 150rpx; background-color: #ccc; margin-right: 10rpx; margin-bottom: 10rpx; position: relative; } .imageItem>image { width: 100%; height: 100%; } .imgdel { width: 60rpx; height: 60rpx; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0rpx 0rpx 10rpx 10rpx rgba(0, 0, 0, 0.05); } .imgdel>image { width: 50rpx; } .u-textarea-box { width: 100%; height: 400rpx; box-sizing: border-box; padding: 20rpx; } .u-textarea { width: 100%; background-color: #F0F4F7; padding: 10rpx; } .shareApprovalbtn { width: 100%; height: 88rpx; background-color: #249EFB; color: #fff; font-size: 30rpx; text-align: center; line-height: 88rpx; position: fixed; bottom: 0rpx; left: 0rpx; z-index: 99; } .shareMask { width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.4); position: fixed; top: 0rpx; left: 0rpx; z-index: 999; } .shareBlock { width: 100%; height: 75%; background-color: #fff; position: absolute; bottom: 0rpx; left: 0rpx; box-sizing: border-box; padding-top: 88rpx; } .shareBlockTitle { width: 100%; height: 88rpx; background-color: #249EFB; color: #fff; font-size: 30rpx; text-align: center; line-height: 88rpx; position: absolute; top: 0rpx; left: 0rpx; } .shareBlockContent { width: 100%; height: 100%; overflow: auto; box-sizing: border-box; padding: 20rpx; } .shareApprovalItem { width: 100%; height: auto; overflow: hidden; display: flex; } .shareApprovalLeft { width: 130rpx; } .shareApprovalLeft>image { width: 96rpx; height: 96rpx; border-radius: 50%; overflow: hidden; } .shareApprovalRight { flex: 1; } .shareApprovalText { width: 100%; height: 66rpx; line-height: 66rpx; } .shareApprovalText .satName { color: 30rpx; color: #333333; } .shareApprovalText .satTime { color: #A8BBCB; font-size: 26rpx; margin-left: 20rpx; } .shareApprovalImgBox { width: 100%; height: auto; overflow: hidden; display: flex; flex-wrap: wrap; } .shareApprovalImgItem { width: 180rpx; height: 150rpx; background-color: #ccc; margin-right: 10rpx; margin-bottom: 10rpx; } .shareApprovalImgItem > image { width: 100%; height: 100%; } .shareApprovalMsg { width: 100%; box-sizing: border-box; padding: 5rpx 0rpx 20rpx; font-size: 26rpx; color: #333333; } .shareApproValBtnBox { width: 100%; height: 88rpx; display: flex; align-items: center; justify-content: space-around; } .aConfirmBtn { width: 260rpx; height: 88rpx; line-height: 88rpx; border-radius: 44rpx; background-color: #249EFB; color: #fff; font-size: 30rpx; } .aRejectBtn { width: 260rpx; height: 88rpx; line-height: 88rpx; border-radius: 44rpx; background-color: #B5CADD; color: #fff; font-size: 30rpx; } .videoloading{ display: block; width: 100%; height: 100%; z-index: 99; background-color: transparent; position: absolute; top: 0; left:0; }