/* 产品介绍banner */ .product-banner{ position: relative; width: 100%; height: 380px; margin-left: 50%; transform: translateX(-50%); background-color: #0b1324; } .banner-img{ display: block; width: 1920px; height: 100%; margin: 0 auto; } .product-banner-text{ position: absolute; left: 50%; top: 160px; transform: translateX(-50%); } .product-banner-text-ch{ font-size: 38px; font-family: Alibaba PuHuiTi; font-weight: 400; color: #FFFFFF; } .product-banner-line{ width: 30px; height: 3px; margin: 18px auto 0; background-color: #FF9D24; } /* 页面导航栏 */ .product-tab{ position: relative; width: 100%; height: 54px; margin-left: 50%; transform: translateX(-50%); background-color: #fff; line-height: 54px; border-bottom: 1px solid #E8E8E8; box-sizing: border-box; } .product-tab-list{ position: relative; width: 200px; height: 100%; text-align: center; cursor:pointer; } .product-tab-list:hover { color: #FF9600; } .active{ color: #FF9600; } .tab-line{ position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%); display: none; width: 61px; height: 1px; background-color: #FF9600; } .top-fix{ position: fixed; left: 0; top: 0; z-index: 2; } /* 产品介绍 */ .product-introduction{ width: 100%; height: 310px; padding-top: 60px; background-color: #fff; } .product-til{ font-size: 28px; font-family: AlibabaPuHuiTi; font-weight: bold; color: #333333; text-align: center; } .product-introduction-con{ width: 890px; margin: 38px auto 0; font-size: 14px; font-family: PingFangSC; font-weight: 400; color: #333333; line-height: 22px; } /* 产品能力 */ .product-ability{ width: 100%; height: 560px; padding-top: 60px; } .product-ability-con{ display: flex; flex-wrap: wrap; margin-top: 64px; } .product-ability-con-list{ display: flex; flex-direction: column; align-items: center; width: 400px; height: 200px; text-align: center; } .ability-con-list-img{ width: 54px; height: 54px; } .ability-con-list-til{ margin-top: 12px; font-size: 18px; font-family: AlibabaPuHuiTi; font-weight: 400; color: #191919; } .ability-con-list-text{ width: 256px; margin-top: 18px; font-size: 14px; font-family: AlibabaPuHuiTi; font-weight: 400; color: #999999; line-height: 18px; } /* 产品优势 */ .product-advantage{ width: 100%; height: 370px; padding-top: 60px; background-color: #fff; } .product-advantage-con{ display: flex; flex-wrap: wrap; margin-top: 64px; } .product-advantage-con-list{ display: flex; flex-direction: column; align-items: center; width: 300px; height: 200px; text-align: center; } .advantage-con-list-img{ width: 54px; height: 54px; } .advantage-con-list-til{ margin-top: 12px; font-size: 18px; font-family: AlibabaPuHuiTi; font-weight: 400; color: #191919; } .advantage-con-list-text{ width: 210px; margin-top: 18px; font-size: 14px; font-family: AlibabaPuHuiTi; font-weight: 400; color: #999999; line-height: 18px; } /* 适用场景 */ .applicable-scenarios{ width: 100%; height: 500px; padding-top: 60px; } .swiper-container{ width: 1200px; height: 280px; margin: 60px auto 0; } .swiper-slide-img{ width: 100%; height: 218px; } .swiper-slide-til{ margin: 16px auto 0; font-size: 18px; font-family: AlibabaPuHuiTi; font-weight: 400; color: #333333; text-align: center; } .swiper-slide-con{ margin: 8px auto 0; font-size: 14px; font-family: AlibabaPuHuiTi; font-weight: 400; color: #999999; text-align: center; } /* .swiper-button-prev{ display: block; width: 29px; background-image:url("../images/product-left.png"); } .swiper-button-next{ display: block; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } */ .swiper-button-prev{ display: block; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); top: 40%; opacity:0.6; } .swiper-button-next{ display: block; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); top: 40%; opacity:0.6; } /* 使用指南 */ .use-guide{ width: 100%; height: 500px; padding-top: 60px; background: url('../images/product-bottom.png') no-repeat center; background-size: 1920px 100%; background-color: #15202c; } .use-guide-con{ display: flex; justify-content: space-between; margin-top: 70px; } .use-guide-con-list{ display: flex; flex-direction: column; align-items: center; width: 220px; height: 200px; text-align: center; } .use-guide-con-list-img{ width: 76px; height: 76px; } .use-guide-con-list-til{ margin-top: 20px; font-size: 16px; font-family: PingFangSC; font-weight: 400; color: #FFFFFF; } .use-guide-con-list-text{ width: 210px; margin-top: 10px; font-size: 14px; font-family: PingFangSC; font-weight: 400; color: #FFFFFF; opacity: 0.6; } .right-arrow{ width: 14px; height: 20px; margin-top: 25px; } .start-create{ display: block; width: 160px; height: 40px; margin: 20px auto 0; font-size: 16px; font-family: AlibabaPuHuiTi; font-weight: 400; color: #FFFFFF; line-height: 40px; text-align: center; background-color: #FF9D24; border-radius: 6px; } /* 开发文档 */ .dev-doc{ width: 100%; height: 530px; padding-top: 60px; background-color: #fff; } .dev-doc-container{ width: 1200px; height: 236px; margin: 70px auto 0; border: 1px solid #eeeeee; } .dev-doc-list{ width: 100%; height: 58.5px; /* list-style: disc ; */ line-height: 58.5px; font-size: 16px; font-family: AlibabaPuHuiTi; font-weight: 400; color: #333333; background-color: #E8E8E8; } .dev-doc-list:nth-child(2n){ background-color: #fff; } .dev-doc-list::before{ display: inline-block; content: ""; width: 6px; height: 6px; margin: 0 20px 3px 32px; border-radius: 50%; background-color: #333333; } .dev-doc-list a:hover{ color: #FF9600; }