crm/resources/zqxgxcx/share/pages/materialcase/materialcase.wxss

.topbox {
    display: block;
    width: 100%;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
}

.leftindexbox {
    position: absolute;
    left: 8px;
    width: 70px;
    /* border: 1px solid #d1cfcf; */
    padding: 4px 0;
    height: 28px;
    border-radius: 18px;
    box-sizing: border-box;
}

.leftindexbox .leftgoto {
    display: block;
    width: 8px;
    height: 14px;
    float: left;
    margin-left: 11px;
    transform: rotateY(180deg);
    position: relative;
    top: 2px;
    z-index: 9;
}

.gotoindex {
    display: block;
    width: 16px;
    height: 16px;
    float: right;
    position: relative;
    right: 10px;
    top: 1px;
}

.leftindexbox text {
    position: absolute;
    height: 14px;
    width: 1px;
    left: 30px;
    top: 6px;
    background-color: #d1cfcf;
}

.titbox {
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    z-index: 100;
    overflow: hidden;
}

.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;
}

.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;
    font-weight: bold;
}

.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;
}

.orderbtn {
    display: block;
    width: 154rpx;
    height: 66rpx;
    border-radius: 16rpx;
    position: relative;
    top: 7rpx;
    background-image: linear-gradient(180deg, #4ACDFD 0%, #249EFB 100%);
}

.qrcodeimg {
    display: block;
    width: 80rpx;
    height: 80rpx;
}

.designstylebox {
    width: 450rpx;
}

.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: 34rpx;
}



.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 {
    display: block !important;
    border-radius: 0rpx !important;
    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;
}

.title-tips2 {
    font-size: 32rpx;
    border-left: 10rpx solid #333333;
    box-sizing: border-box;
    padding-left: 10rpx;
    height: 38rpx;
    line-height: 38rpx;
    font-weight: bold;
}

.designcasetit view {
    /* margin-left: 24rpx; */
}
.titleStyle {
    font-weight: bold;
    width: 80%;
}

/* 装修案例 */
.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: 44rpx;
    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: 44rpx;
}

.c-margin {
    margin-left: 30rpx !important;
}

.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: 20rpx;
    background-color: rgba(52, 122, 246, 0.2);
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    position: relative;
    top: 9rpx;
    width: 335rpx;
}

.sharebtnbox image {
    display: block;
    width: 46rpx;
    height: 40rpx;
    position: relative;
    margin-right: 8rpx;
    top: 20rpx;
}



.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;
}


.unloginbox {
    max-height: 800rpx;
    display: block;
    min-height: 400rpx;
    overflow: hidden;
    position: relative;
}

.unloginlayer {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 400rpx;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFFFFF 69%);
    z-index: 8;
}

.articlebtn {
    display: block;
    width: 312rpx;
    height: 64rpx;
    background: #FFFFFF;
    border: 1px solid #384855;
    border-radius: 36rpx;
    position: absolute;
    bottom: 48rpx;
    left: 218rpx;
    text-align: center;
    line-height: 64rpx;
    font-size: 24rpx;
    color: #384855;
}

.articleview {
    width: auto;
    height: 64rpx;
    line-height: 64rpx;
}

.articleview image {
    width: 32rpx;
    height: 32rpx;
    position: relative;
    top: 16rpx;
    margin-left: 8rpx;
    margin-top: 0;
}

/* 联系销售人员 */
.contactSales {
    position: fixed;
    width: 100%;
    height: 140rpx;
    background-color: #fff;
    bottom: 0rpx;
    left: 0rpx;
    z-index: 9999;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 20rpx 30rpx;
    border-top: 1rpx solid #CCCCCC;
}

.contactSales-left {
    flex: 2;
    display: flex;
    align-items: center;
}

.left-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
}

.left-msg {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20rpx;
}

.left-name {
    display: flex;
    align-items: center;
}

.nameCard {
    width: 40rpx;
    height: 40rpx;
    margin-left: 10rpx;
}

.left-text {
    font-size: 24rpx;
    color: #999999;
}

.contactSales-right {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.rightmobile {
    width: 40rpx;
    height: 40rpx;
}

.right-box1 {
    width: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.right-box1>text {
    font-size: 24rpx;
    margin-top: 10rpx;
}

/* 联系销售人员 */
.clientBox {
    position: fixed;
    bottom: 200rpx;
    right: 30rpx;
    z-index: 999;
    width: 112rpx;
    height: 112rpx;
    transition: 1s;
}

.clientBox-avatar {
    width: 110rpx;
    height: 110rpx;
    border-radius: 50%;
    border: 5rpx solid #249EFB;
    overflow: hidden;
}

.clientBox-avatar>image {
    width: 100%;
    height: 100%;
}

.clientBox-text {
    width: 57rpx;
    height: 28rpx;
    background-color: #249EFB;
    border-radius: 8rpx;
    color: #fff;
    font-size: 18rpx;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8rpx;
}

/* 公司信息 */
.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: 32rpx;
    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;
}

/* 公司地址 */
.line {
    width: 100%;
    height: 20rpx;
    background-color: #ECECEC;
}

.title-tips {
    height: 38rpx;
    width: 95%;
    border-left: 10rpx solid #333333;
    line-height: 38rpx;
    font-size: 32rpx;
    margin: 30rpx auto 0rpx;
    box-sizing: border-box;
    padding-left: 10rpx;
    font-weight: bold;
}


.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;
}
.viewPrice {
    background-color: #249EFB;
    list-style: none;
    font-style: normal;
    display: inline;
    font-size: 26rpx;
    width: 150rpx;
    height: 52rpx;
    line-height: 52rpx;
    float: left;
    font-family: none;
    color: #fff;
}
.viewBtnStyle {
    height: 54rpx !important;
    display: flex;
    justify-content: center;
    margin-top: 25rpx !important;
}
.interVrStyle {
    position: absolute;
    width: 90rpx !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}