.product-info1 { width: 100%; height: 250vh; } .product-info1 .product-info1a { width: 100%; height: 100vh; position: sticky; left: 0; top: 0; overflow: hidden; } .product-info1 .product-info1a::before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-image: linear-gradient(0deg, #fff 0%, #fff 50%, #eee 100%); } .product-info1 .product-info1a .cn1 { font-family: "OPPOSans-B"; font-weight: 500; font-size: 230px; color: #EBEBEB; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; line-height: 0.72222222em; color: #eeeeee; word-break: break-word; } .product-info1 .product-info1a .img { z-index: 2; position: absolute; left: 50%; top: calc(50% + 40px); transform: translate(-50%, -50%); width: 100vw; height: 100vh; } .product-info1 .product-info1a .img .img2 { margin: 0 auto; width: 100vw; height: 100vh; object-fit: cover; } .product-info1 .product-info1a .img.img9 { width: 100%; height: auto; } .product-info1 .product-info1a .img.img9 .img2 { width: 32%; height: auto; } .product-info1 .product-info1a .container2 { opacity: 0; z-index: 3; position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); } .product-info1 .product-info1a .container2 .text { width: 38%; background-color: #ffffff; border-radius: 15px; height: 70vh; overflow: auto; /*padding: 60px 40px;*/ padding: 3.8% 2.5%; position: relative; } /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ .product-info1 .product-info1a .container2 .text::-webkit-scrollbar{ width: 5px; background-color: #f8f8f8; border-radius: 15px; } /*定义滚动条轨道 内阴影+颜色*/ .product-info1 .product-info1a .container2 .text::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #f8f8f8; } /*定义滑块颜色*/ .product-info1 .product-info1a .container2 .text::-webkit-scrollbar-thumb{ width: 5px; background-color: #014099; } .product-info1 .product-info1a .container2 .text:before{ content: ''; display: block; width: 166px; height: 167px; background: url("../images/pbg.png") no-repeat center; background-size: 100% !important; position: absolute; right: 0; top: 0; } .product-info1 .product-info1a .container2 .text .cn2 { font-family: "OPPOSans-B"; font-weight: 500; font-size: 70px; color: #014099; line-height: 1; } .product-info1 .product-info1a .container2 .text .cn7 { margin-top: 15px; font-family: "OPPOSans-B"; font-size: 30px; color: #393939; } .product-info1 .product-info1a .container2 .text .cn9 { /*margin: 40px 0;*/ margin: 2.08vw 0; height: 1px; background: #014099; width: 100%; } .product-info1 .product-info1a .container2 .text .cn5{ font-weight: 400; font-size: 20px; color: #393939; line-height: 38px; } .product-info1 .product-info1a .container2 .text .cn10 { /*margin-top: 90px;*/ margin-top: 4.6875vw; display: flex; align-items: center; flex-wrap: wrap; } .product-info1 .product-info1a .container2 .text .cn10 a{ display: flex; align-items: center; justify-content: center; width: 161px; height: 46px; background: #014099; border-radius: 23px; color: #ffffff; transition: all 0.4s; } .product-info1 .product-info1a .container2 .text .cn10 a i{ margin-left: 10px; width: 12px; height: 15px; background: url("../images/d.png") no-repeat center; background-size: 100%; } @media (min-width:1701px) and (max-width:1800px){ } @media (min-width:1601px) and (max-width:1700px){ .product-info1 .product-info1a .cn1{ font-size: 210px; } } @media (min-width:1501px) and (max-width:1600px){ .product-info1 .product-info1a .cn1{ font-size: 200px; } /*.product-info1 .product-info1a .container2 .text{ padding: 55px 35px; }*/ .product-info1 .product-info1a .container2 .text:before{ width: 156px; height: 157px; } .product-info1 .product-info1a .container2 .text .cn2{ font-size: 65px; } .product-info1 .product-info1a .container2 .text .cn7{ font-size: 26px; } .product-info1 .product-info1a .container2 .text .cn5{ font-size: 19px; line-height: 36px; } /*.product-info1 .product-info1a .container2 .text .cn10{ margin-top: 80px; }*/ } @media (min-width:1401px) and (max-width:1500px){ .product-info1 .product-info1a .cn1{ font-size: 190px; } /*.product-info1 .product-info1a .container2 .text{ padding: 50px 30px; }*/ .product-info1 .product-info1a .container2 .text:before{ width: 146px; height: 147px; } .product-info1 .product-info1a .container2 .text .cn2{ font-size: 60px; } .product-info1 .product-info1a .container2 .text .cn7{ font-size: 24px; } .product-info1 .product-info1a .container2 .text .cn5{ font-size: 18px; line-height: 34px; } /*.product-info1 .product-info1a .container2 .text .cn10{ margin-top: 70px; }*/ } @media (min-width:1280px) and (max-width:1400px){ .product-info1 .product-info1a .cn1{ font-size: 170px; } /*.product-info1 .product-info1a .container2 .text{ padding: 45px 25px; }*/ .product-info1 .product-info1a .container2 .text:before{ width: 136px; height: 137px; } .product-info1 .product-info1a .container2 .text .cn2{ font-size: 55px; } .product-info1 .product-info1a .container2 .text .cn7{ font-size: 22px; } .product-info1 .product-info1a .container2 .text .cn5{ font-size: 17px; line-height: 32px; } /*.product-info1 .product-info1a .container2 .text .cn10{ margin-top: 60px; }*/ } @media (min-width:1200px) and (max-width:1279px){ .product-info1 .product-info1a .cn1{ font-size: 160px; } /*.product-info1 .product-info1a .container2 .text{ padding: 40px 20px; }*/ .product-info1 .product-info1a .container2 .text:before{ width: 126px; height: 127px; } .product-info1 .product-info1a .container2 .text .cn2{ font-size: 50px; } .product-info1 .product-info1a .container2 .text .cn7{ font-size: 20px; } .product-info1 .product-info1a .container2 .text .cn5{ font-size: 16px; line-height: 30px; } /*.product-info1 .product-info1a .container2 .text .cn10{ margin-top: 50px; }*/ } @media (max-width: 1199px) { .product-info1 .product-info1a .cn1 { font-size: 220px; } .product-info1 .product-info1a .container2 .text{ padding: 30px 20px; } .product-info1 .product-info1a .container2 .text .cn2{ font-size: 50px; } .product-info1 .product-info1a .container2 .text .cn7{ font-size: 26px; } .product-info1 .product-info1a .container2 .text .cn5{ font-size: 18px; } .product-info1 .product-info1a .container2 .text .cn9{ margin: 35px 0; } .product-info1 .product-info1a .container2 .text .cn10{ margin-top: 50px; } .product-info1 { display: none; } .product-info1 .product-info1a .cn1 { top: 20%; font-size: 180px; line-height: 0.9em; } .product-info1 .product-info1a .img { width: 80%; top: 37%; } .product-info1 .product-info1a .container2 .text { width: 100%; } } @media (max-width: 820px) { } .mbproduct-info1 { width: 100%; height: 140vh; display: none; } .mbproduct-info1 .product-info1a { width: 100%; height: 100vh; position: sticky; left: 0; top: 0; overflow: hidden; } .mbproduct-info1 .product-info1a::before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-image: linear-gradient(0deg, #fff 0%, #fff 50%, #eee 100%); } .mbproduct-info1 .product-info1a .cn1 { font-family: "OPPOSans-B"; font-weight: 500; font-size: 360px; color: #EBEBEB; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; line-height: 0.72222222em; word-break: break-word; } .mbproduct-info1 .product-info1a .img { z-index: 2; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 750px; width: calc(750/1915*100%); } .mbproduct-info1 .product-info1a .img .img2 { margin: 0 auto; width: 100%; } .public-img { display: block; position: relative; z-index: 1; overflow: hidden; } .public-img::before { content: ""; display: block; position: relative; z-index: 0; padding-top: 100%; } .public-img img { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; transition: all 0.5s; } .mbproduct-info1 .product-info1a .container2 { opacity: 0; z-index: 3; position: absolute; left: 50%; top: 103%; transform: translate(-50%, -50%); } .mbproduct-info1 .product-info1a .container2 .text { width: 38%; background-color: #ffffff; border-radius: 15px; height: 55vh; overflow: auto; padding: 60px 40px; position: relative; } .mproduct-info1 .product-info1a .container2 .text:before{ content: ''; display: block; width: 166px; height: 167px; background: url("../images/pbg.png") no-repeat center; background-size: 100% !important; position: absolute; right: 0; top: 0; } .mbproduct-info1 .product-info1a .container2 .text .cn2 { font-family: "OPPOSans-B"; font-weight: 500; font-size: 70px; color: #014099; line-height: 1; } .mbproduct-info1 .product-info1a .container2 .text .cn7 { margin-top: 15px; font-family: "OPPOSans-B"; font-size: 30px; color: #393939; } .mbproduct-info1 .product-info1a .container2 .text .cn9 { margin: 40px 0; height: 1px; background: #014099; width: 100%; } .mbproduct-info1 .product-info1a .container2 .text .cn5{ font-weight: 400; font-size: 20px; color: #393939; line-height: 38px; } .mbproduct-info1 .product-info1a .container2 .text .cn10 { margin-top: 90px; display: flex; align-items: center; flex-wrap: wrap; } .mbproduct-info1 .product-info1a .container2 .text .cn10 a{ display: flex; align-items: center; justify-content: center; width: 161px; height: 46px; background: #014099; border-radius: 23px; color: #ffffff; transition: all 0.4s; } .mbproduct-info1 .product-info1a .container2 .text .cn10 a i{ margin-left: 10px; width: 12px; height: 15px; background: url("../images/d.png") no-repeat center; background-size: 100%; } @media (max-width: 1199px) { .mbproduct-info1 { display: block; } .mbproduct-info1 .product-info1a .cn1 { top: 20%; font-size: 130px; line-height: 0.9em; } .mbproduct-info1 .product-info1a .img { width: 50%; top: 50%; } .mbproduct-info1 .product-info1a .container2 .text { width: 100%; padding: 30px 20px; } /*.mproduct-info1 .product-info1a .container2 .text:before{ width: 126px; height: 127px; }*/ .mbproduct-info1 .product-info1a .container2 .text .cn2{ font-size: 40px; } .mbproduct-info1 .product-info1a .container2 .text .cn7{ font-size: 24px; } .mbproduct-info1 .product-info1a .container2 .text .cn9{ margin: 35px 0; } .mbproduct-info1 .product-info1a .container2 .text .cn5{ font-size: 18px; } .mbproduct-info1 .product-info1a .container2 .text .cn10{ margin-top: 50px; } } @media (max-width: 820px) { .mbproduct-info1 .product-info1a .cn1{ font-size: 110px; } } @media (max-width: 768px) { .mbproduct-info1 .product-info1a .cn1 { font-size: 100px; } .mbproduct-info1 .product-info1a .container2 .text .cn2{ font-size: 36px; } .mbproduct-info1 .product-info1a .container2 .text .cn7{ font-size: 22px; } } @media (max-width: 600px) { .mbproduct-info1 .product-info1a .cn1{ font-size: 55px; } .mbproduct-info1 .product-info1a .img{ width: 70%; } .mbproduct-info1 .product-info1a .container2 .text .cn2{ font-size: 30px; } .mbproduct-info1 .product-info1a .container2 .text .cn7{ font-size: 20px; } .mbproduct-info1 .product-info1a .container2 .text .cn9{ margin: 25px 0 } .mbproduct-info1 .product-info1a .container2 .text .cn5{ font-size: 16px; line-height: 30px; } .mbproduct-info1 .product-info1a .container2 .text .cn10{ margin-top: 35px; } } @media (max-width: 375px) { .mbproduct-info1 .product-info1a .cn1{ font-size: 50px; } } @media (max-width: 340px) { .mbproduct-info1 .product-info1a .cn1{ font-size: 45px; } } /*样本下载*/ .con-box5z { display: none; background-color: rgba(0, 0, 0, 0.5); padding: 1.2rem 0; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; } .con-box5z .container2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60%; } .con-box5z .container2 .close { position: absolute; right: 20px; top: 20px; width: 20px; height: 20px; cursor: pointer; } .con-box5z .container2 .close span { position: absolute; left: 50%; top: 50%; background-color: #333; transform: translate(-50%, -50%) rotate(45deg); } .con-box5z .container2 .close span:nth-child(1) { width: 20px; height: 2px; } .con-box5z .container2 .close span:nth-child(2) { width: 2px; height: 20px; } .con-box5z .container2 .box { border-radius: 15px; background-color: #fff; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 60px 100px; } .con-box5z .container2 .box .el-form{ width: 100%; } @media (max-width: 1199px) { .con-box5z .container2 { max-height: 80%; overflow-y: auto; width: 90%; } .con-box5z .container2 .box{ padding: 35px 50px; } .con-box5z .container2 .close{ right: 30px; top: 10px; } } @media (max-width: 820px) { .con-box5z .ly1 .el-form-item{ width: 100%; margin-bottom: 35px; } } @media (max-width: 768px) { .con-box5z .ly3_fl{ width: 100%; } .con-box5z .ly3_fr{ width: 100%; margin-top: 35px; } .con-box5z .ly3_fr .el-button--primary{ margin: 0 auto; } } @media (max-width: 600px) { .con-box5z .container2{ width: 95%; } .con-box5z .container2 .box{ padding: 35px 25px; } .con-box5z .ly1 .el-form-item{ margin-bottom: 25px; } .con-box5z .ly3_fr{ margin-top: 25px; } }