/**newIndex.wxss**/ page { } .font40{ font-size: 40rem; // color: #fff; } .font52{ font-size: 52rem; font-weight: 700; } .pointerEvents{ pointer-events: none; } /deep/.el-carousel__container{ height: 100%!important; } .contentBox{ position: relative; width: 100vw; overflow: hidden; box-sizing: border-box; background-color: white; .picArea{ position: relative; width: 100%; height:1100rem; .master-pic{ position: relative; width: 100%; height:930rem; // padding: 10rem; box-sizing: border-box; // background-color: #171717; .master-pic-swiper{ width: 100%; height: 100%; } .master-pic-img{ width: 100%; height: 100%; display: block; object-fit: cover; } .lookHouseView{ position: absolute; left:276rem; bottom:138rem; width: 200rem; height: 76rem; border-radius: 38rem; background: rgba(0, 0, 0, 0.4); font-family: "Verdana"; font-weight: 400; font-size: 28rem; color: #fff; .icon-ai{ width:46rem; height:46rem; margin-right:10rem; } } .indicator-view{ position: absolute; z-index: 12; bottom: 100rem; left:50%; transform: translateX(-50%); .indicator-item{ width: 12rem; height: 12rem; background: #fff; opacity: 0.52; margin-right:6rem; border-radius: 50%; &.active{ opacity:1; } &:last-child{ margin-right:0rem; } } } } } .tabList{ position: absolute; width: 100%; height:246rem; bottom:0rem; overflow-x: auto; overflow-y: hidden; z-index: 2; .tab-item{ width:196rem; margin-right: 20rem; font-family: "Verdana"; font-weight: 400; font-size: 24rem; color: #1d1d1d; text-align:center; padding:2rem; // border:solid 2rem #65574933; // box-shadow: 0 4rem 40rem #65574933; background: #ededed; filter: drop-shadow(0 4rem 40rem #65574933); box-sizing: border-box; &.tabActive{ position: relative; font-weight: 700; color: #4d463f; // border:solid 2rem #65574933; background: rgba(254, 176, 102, 0.5); filter: drop-shadow(0 4rem 40rem #65574933); } &:first-child{ margin-left: 30rem;; } &:last-child{ margin-right: 30rem; } .tab-img{ width: 192rem; height: 200rem; object-fit: cover; } .tab-info{ width:100%; padding:6rem 10rem; box-sizing: border-box; } } } .textAbout{ font-family: "DIN Alternate Bold"; font-weight: 700; font-size: 20rem; // color: rgba(255, 255, 255, 0.3); opacity: 0.3; margin-left:10rem; } .booking-info{ margin-left: 30rem; margin-right: 30rem; margin-top: 130rem; margin-bottom: 15rem; position: relative; border: 2rem solid rgba(255, 255, 255, 0.5); border-top:none; padding: 90rem 30rem 20rem; box-sizing: border-box; color: #fff; z-index: 3; .line{ position: absolute; top:0rem; width: 100rem; height:2rem; background-color: rgba(255, 255, 255, 0.5); } .left-line{ left:0rem; } .right-line{ right:0rem; } // .booking-info-bg{ // position: absolute; // top: 0; // left: 0; // width: 100%; // height: unset; // } .writingBox{ padding:0rem 10rem; // width: 440rem; width: max-content; height: 120rem; position: absolute; // margin-top: -45rem; // font-family: "STFangsong"; font-weight: 400; // color: #fff; top: -60rem; box-sizing: border-box; left: 50%; transform: translate(-50%,0); // background-color: #FFF; // background-color: transparent; // backdrop-filter: blur(20px); .writing-img{ width: 120rem; height: 120rem; min-width: 120rem; filter: drop-shadow(0 3rem 4rem #00000029); box-sizing: border-box; border-radius: 50%; border: 6rem solid #F5F5F5; margin-right:30rem; } .wiriting-right{ // text-align: right; padding-right: 20rem; .wiriting-text{ // height: 60rem; } } } .info-bar{ // padding: 80rem 50rem 140rem; display: flex; flex-wrap: wrap; .info-item{ // color: #fff; width: 33.33%; margin-bottom: 40rem; padding-left: 10rem; box-sizing: border-box; // &:nth-child(3n-1){ // width: 39.66%; // } // &:nth-child(3n-2){ // width: 27%; // } &:nth-child(3n-2){ padding-left: 0; } } .info-item-label{ font-family: "Verdana"; font-weight: 400; font-size: 28rem; margin-bottom: 8rem; } .info-item-value{ font-family: "DIN Alternate Bold"; font-weight: bold; font-size: 34rem; // white-space: nowrap; } } } } .swiper-img-gs-mh { // width: 100vw; // top:0rem; height: calc(100% - 930rem); top:930rem; width: 100%; opacity: 0.85; position: absolute; left: 0; z-index: 1; overflow: hidden; box-sizing: border-box; .img{ width: 100%; height: 100%; filter: blur(20px); transform: scale(1.2); object-fit: cover; } } .bottom-view{ position: relative; width: 100%; padding-top:128rem; padding-bottom:300rem; box-sizing: border-box; z-index: 3; .bottom-title{ font-family: "DIN Alternate Bold"; font-weight: 700; font-size: 28rem; text-align: center; color: #fff; text-shadow: 0 0 8rem rgba(0, 0, 0, 0.17); } .bottom-tips{ font-family: "Verdana"; font-weight: 400; font-size: 28rem; line-height: 48rem; text-align: center; margin-top:8rem; margin-bottom:40rem; opacity: 0.6; } .bottom-btn{ width: 290rem; height: 80rem; border-radius: 40rem; font-family: "DIN Alternate Bold"; font-weight: 700; font-size: 28rem; .bottom-subtitle{ font-family: "DIN Alternate Bold"; font-weight: bold; font-size: 30rem; white-space: nowrap; } } .btn-qw{ background: rgba(246, 165, 83, 0.2); color: #f6a553; margin-right:30rem; } .btn-share{ background: #f6a553; box-shadow: 0 6rem 20rem rgba(208, 193, 168, 0.31); color: #fff; } }