/**newIndex.wxss**/ page { } .font40{ font-size: 40px; // color: #fff; } .font52{ font-size: 52px; font-weight: 700; } .pointerEvents{ pointer-events: none; } /deep/.el-carousel__container{ height: 100%!important; } .contentBox{ position: relative; width: 100vw; min-height: 100vh; overflow: hidden; box-sizing: border-box; background-color: white; .picArea{ position: relative; width: 100%; height:860px; .master-pic{ position: relative; width: 100%; height:750px; // padding: 10px; 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; } .indicator-view{ position: absolute; z-index: 12; bottom: 150px; left:50%; transform: translateX(-50%); .indicator-item{ width: 12px; height: 12px; background: #fff; opacity: 0.52; margin-right:6px; border-radius: 50%; &.active{ opacity:1; } &:last-child{ margin-right:0px; } } } } } .mask{ position: absolute; left: 0px; top: 376px; width: 100%; height: 378px; background: linear-gradient(180.00deg, #00000000 0%, #00000080 100%); z-index: 2; } .text-img{ position: absolute; left: 42px; top: 458px; width: 180px; height: auto; z-index: 9; } .lookHouseView{ position: absolute; left:276px; top:500px; width: 200px; height: 76px; border-radius: 38px; background: rgba(0, 0, 0, 0.4); font-family: "Verdana"; font-weight: 400; font-size: 28px; color: #fff; z-index: 9; .icon-ai{ width:46px; height:46px; margin-right:10px; } } .tabList{ position: absolute; width: 100%; height:246px; bottom:0px; overflow-x: auto; overflow-y: hidden; z-index: 2; .tab-item{ width:196px; margin-right: 20px; font-family: "Verdana"; font-weight: 400; font-size: 24px; color: #576937; text-align:center; padding:2px; border-radius: 12px; // border:solid 2px #65574933; // box-shadow: 0 4px 40px #65574933; background: #c0ddb5; box-shadow: 0 4px 40px rgba(101, 87, 73, 0.2); filter: drop-shadow(0 4px 40px #65574933); box-sizing: border-box; // &.tabActive{ // position: relative; // font-weight: 700; // color: #4d463f; // // border:solid 2px #65574933; // background: rgba(254, 176, 102, 0.5); // filter: drop-shadow(0 4px 40px #65574933); // } &:first-child{ margin-left: 30px;; } &:last-child{ margin-right: 30px; } .tab-img{ width: 192px; height: 192px; object-fit: cover; border-radius: 12px; } .tab-info{ width:100%; padding:6px 10px; box-sizing: border-box; } } } .textAbout{ font-family: "DIN Alternate Bold"; font-weight: 700; font-size: 20px; // color: rgba(255, 255, 255, 0.3); opacity: 0.3; margin-left:10px; } .booking-info{ margin-left: 40px; margin-right: 40px; margin-top: 60px; margin-bottom: 60px; position: relative; // border: 2px solid rgba(255, 255, 255, 0.5); // border-top:none; // padding: 60px 30px 20px; box-sizing: border-box; color: #fff; z-index: 3; .title{ font-family: "Verdana Bold"; font-weight: 700; font-size: 32px; margin-bottom: 30px; } .line{ position: absolute; top:0px; width: 100px; height:2px; background-color: rgba(255, 255, 255, 0.5); } .left-line{ left:0px; } .right-line{ right:0px; } // .booking-info-bg{ // position: absolute; // top: 0; // left: 0; // width: 100%; // height: unset; // } .writingBox{ padding:0px 10px; // width: 440px; width: max-content; height: 120px; position: absolute; // margin-top: -45px; // font-family: "STFangsong"; font-weight: 400; // color: #fff; top: -60px; box-sizing: border-box; left: 50%; transform: translate(-50%,0); // background-color: #FFF; // background-color: transparent; // backdrop-filter: blur(20px); .writing-img{ width: 120px; height: 120px; min-width: 120px; filter: drop-shadow(0 3px 4px #00000029); box-sizing: border-box; border-radius: 50%; border: 6px solid #F5F5F5; margin-right:30px; } .wiriting-right{ // text-align: right; padding-right: 20px; .wiriting-text{ // height: 60px; } } } .info-bar{ // padding: 80px 50px 140px; display: flex; flex-wrap: wrap; .info-item{ // color: #fff; width: 33.33%; margin-bottom: 40px; padding-left: 10px; 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: 26px; margin-bottom: 4px; opacity: 0.76; } .info-item-value{ font-family: "DIN Alternate Bold"; font-weight: 700; font-size: 32px; // white-space: nowrap; } } } } .info-view{ position: relative; width: 100%; padding: 0px 30px; padding-bottom:200px; box-sizing: border-box; z-index: 3; .bottom-title{ font-family: "DIN Alternate Bold"; font-weight: 700; font-size: 28px; text-align: center; color: #fff; text-shadow: 0 0 8px rgba(0, 0, 0, 0.17); } .bottom-tips{ font-family: "Verdana"; font-weight: 400; font-size: 28px; line-height: 48px; text-align: center; margin-top:8px; margin-bottom:40px; opacity: 0.6; } .info-point{ width: 100%; margin-bottom: 50px; height: 30px; .left-word{ width: 60px; font-family: "FontName"; font-weight: 400; font-size: 30px; color: #e38330; margin-right: 20px; } .right-word{ width: 60px; font-family: "FontName"; font-weight: 400; font-size: 30px; color: #fff; margin-left: 20px; } .line-view{ width: calc(100% - 160px); height: 8px; .left-line{ height: 100%; background: #e38330; clip-path: polygon(0 0%, 100% 0, calc(100% - 4px) 100%, 0 100%); } .right-line{ height: 100%; background: #fff; opacity: 0.52; clip-path: polygon(4px 0%, 100% 0, 100% 100%, 0 100%); } } } .sub-view-result{ margin-bottom: 50px; .img{ width: 152px; height: 60px; margin-bottom: 10px; } .text{ font-family: "Verdana"; font-weight: 400; font-size: 28px; color:rgba(255, 255, 255, 0.55) } } .sub-view{ width: 100%; height: 80px; font-family: "FontName"; font-weight: 400; font-size: 40px; color: #fff; margin-bottom: 180px; .left{ width: 268px; height: 80px; background: #e38330; border-radius: 40px 0% 0% 40px; margin-right: -10px; clip-path: polygon(0 0%, 100% 0, calc(100% - 20px) 100%, 0 100%); } .right{ width: 268px; height: 80px; background: rgba(255, 255, 255, 0.33); border-radius: 0px 40px 40px 0px; clip-path: polygon(20px 0%, 100% 0, 100% 100%, 0 100%); } } } .bottom-view{ position: fixed; width: 100%; padding: 0px 30px; padding-top: 20px; padding-bottom: 50px; box-sizing: border-box; left: 0px; bottom: 0px; z-index: 3; font-size: 0px; background-image: url('https://dm.static.elab-plus.com/miniProgram/rxdz_btn_bg.png'); background-repeat: no-repeat; background-size: cover; .text{ font-family: "Verdana"; font-weight: 400; font-size: 28px; color:rgba(255, 255, 255, 0.55) } .left{ font-family: "FontName"; font-weight: 400; font-size: 40px; color: #fff; width: 50%; height: 80px; background: rgba(255, 255, 255, 0.33); border-radius: 40px 0% 0% 40px; margin-right: -10px; clip-path: polygon(0 0%, 100% 0, calc(100% - 20px) 100%, 0 100%); } .right{ font-family: "FontName"; font-weight: 400; font-size: 40px; color: #fff; width: 50%; height: 80px; background: #e38330; border-radius: 0px 40px 40px 0px; clip-path: polygon(20px 0%, 100% 0, 100% 100%, 0 100%); } } .bottom-btn{ width: 290px; height: 80px; border-radius: 40px; font-family: "DIN Alternate Bold"; font-weight: 700; font-size: 28px; .bottom-subtitle{ font-family: "DIN Alternate Bold"; font-weight: bold; font-size: 30px; white-space: nowrap; } } .btn{ height: 96px; font-family: "Verdana"; font-weight: 400; font-size: 24px; line-height: 32px; text-align: center; color: #eeefef; .iconfont{ height: 45px; font-size: 40px; color: #FFD37E; } } .btn1{ width: 418px; height: 96px; border-radius: 48px; background: linear-gradient(130.79deg, #a0ed84 0%, #e8f4b7 100%); border: 2px solid #ffffff38; font-family: "DengXian Bold"; font-weight: 700; font-size: 34px; line-height: 32px; color: #365d39; } .btn-qw{ background: linear-gradient(130.79deg, #a0ed84 0%, #e8f4b7 100%); color: #365d39; margin-right:30px; } .btn-share{ background: #f6a553; box-shadow: 0 6px 20px rgba(208, 193, 168, 0.31); color: #fff; } .icon-Shared{ color: #ffffff; font-size:24px; // margin-right:10px; } .info-head{ width: 100%; .head-list{ width: 100%; height: 48px; font-size: 0px; margin-bottom: 6px; .wg-head{ width:48px; height:48px; border-radius: 50%; box-sizing: border-box; background-color:#fff; } .wg-head:nth-of-type(n+2){ margin-left:-8px; } } .text-sty{ font-family: "Verdana"; font-weight: 400; font-size: 26px; color: #fff; } } .pay-view{ position: relative; z-index: 2; .t1{ font-family: "Verdana"; font-weight: 400; font-size: 26px; line-height: 48px; color: #fff; opacity: 0.7; } .t2{ font-family: "DIN Alternate Bold"; font-weight: 700; font-size: 40px; line-height: 52px; color: #fff; } } .swiper-img-gs-mh { // width: 100vw; // top:0px; height: 100%; top:750px; 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; } } .pop-view{ position: fixed; width: 100vw; height: 100vh; box-sizing: border-box; left: 0px; top: 0px; background-color: rgba(112, 112, 112, 0.5); z-index: 99; .pop-main{ position: absolute; left: 0px; bottom: 0px; width: 100%; height: 832px; padding: 60px 50px; box-sizing: border-box; border-radius: 40px 40px 0 0; background: #fff; .modelClose{ position: absolute; right: 30px; top: 30px; font-size: 30px; } .title{ position: relative; font-family: "Verdana Bold"; font-weight: 700; font-size: 32px; color: #000; margin-bottom: 50px; } .content{ position: relative; width: 100%; .item-title{ font-size: 28px; color: #2b2525; margin-bottom: 10px; } .item-input{ position: relative; width: 630px; height: 88px; border-radius: 12px; background: #f7f7f7; padding: 0px 30px; font-size: 0px; .input-real{ font-family: "Helvetica Neue"; font-weight: 400; font-size: 26px; color: #848484; height: 40px; background-color: transparent; width: 70%; } .input-tips{ position: absolute; right: 20px; top: 16px; width: 158px; height: 56px; border-radius: 12px; background: transparent; border: 2px solid #f9870f; font-family: "Helvetica Neue"; font-weight: 400; font-size: 26px; color: #f9870f; } } } .btn{ position: absolute; left: 50px; bottom: 60px; width: 650px; height: 88px; border-radius: 44px; box-sizing: border-box; background: rgba(18, 18, 18, 1); font-family: "Verdana Bold"; font-weight: 700; font-size: 30px; color: #fff; } } } .pop-shareImg{ position: fixed; width: 100vw; height: 100vh; box-sizing: border-box; left: 0px; top: 0px; background-color: rgba(0, 0, 0, 0.8); z-index: 99; .share-img{ position: absolute; top: 54px; right: 58px; width: 575px; height: 453px; } .btn{ position: absolute; left: 238px; bottom: 354px; width: 274px; height: 96px; border-radius: 48px; border: solid 2px greenyellow; color: greenyellow; font-size: 28px; } } textarea::-webkit-scrollbar{ display:none; } textarea::-webkit-input-placeholder{ color: rgba(43, 37, 37, 0.3); font-size: 28px; } input::-webkit-input-placeholder{ color: rgba(132, 132, 132, 0.6); font-size: 26px; } @font-face{ font-family: DINCondensed-Bold; src: url('https://dm.static.elab-plus.com/miniprogram/DINAlternateBold.ttf'); } input,textarea{ border: none; outline: none; appearance: none; cursor:pointer; } input:focus,textarea:focus{ border: none; outline: none; appearance: none; }