.head_bg { background: url(../imgs/product/banner-04.png) no-repeat; /* background-size: 100% 100%; */ /* background-size: contain; */ } /*>=1024的设备*/ @media (min-width: 1280px) { .head_bg { background: url(../imgs/product/banner-1280.png) no-repeat; height: 400px; } } @media (min-width: 1440px) { .head_bg { background: url(../imgs/product/banner-1440.png) no-repeat; height: 450px; } } @media (min-width: 1680px) {} @media (min-width: 1920px) { .head_bg { background: url(../imgs/product/banner-1920.png) no-repeat; height: 600px; } } /* 产品功能 开始 */ .index-pc { display: block; } .index-mobile { display: none; } .product-top { height: 420px; padding: 10px 30px 50px; } .product-top .product-project-image { height: 390px; width: 390px; position: absolute; right: 30px; top: 0px; image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */ image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ } .product-top .product-top-name { height: 33px; font-size: 24px; font-weight: 600; letter-spacing: 1px; color: #212326; display: inline-block; vertical-align: middle; } .product-top .product-top-title, .product-top .product-top-title.wiki, .product-top .product-top-title.plan, .product-top .product-top-title.account, .product-top .product-top-subtitle { /* width: 345px; */ width: 500px; } .product-top .product-top-subtitle.perform, .product-top .product-top-subtitle.account { width: 339px; } .product-page-main-content { padding-top: 80px; /* padding-bottom: 80px; */ /* background-color: #fafbfc; */ } .product-top .top-content { margin-top: 80px; } .product-page-main { position: relative; z-index: 5; } .product-page-main-content { padding: 60px 0; } .product-page-main-content .product-content { width: 1200px; margin: auto; } .product-page-main .product-title { text-align: center; line-height: 1.5; font-size: 36px; font-family: SourceHanSansCN; font-weight: bold; color: #333333; } .product-page-main .product-subtitle { line-height: 28px; text-align: center; font-weight: 400; margin-top: 10px; margin-bottom: 40px; font-size: 18px; font-family: SourceHanSansCN; font-weight: 400; color: #666666; } .product-page-main-content .product-content .project-slide-component { width: 100%; } .product-page-main-content .product-content .product-subtitle { line-height: 32px; margin: 10px auto 50px; } .product-page-main-content .product-content .project-slide-component .slide-component { display: flex; justify-content: space-between; align-items: center; margin-bottom: 150px; } .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul { /* position: absolute; */ width: 400px; } .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul.left { left: 0; } .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul.right { right: 0; } .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul li { width: 460px; cursor: pointer; position: relative; display: flex; flex-direction: column; justify-content: center; } .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul li.active { border-color: #0b5dd9; } .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul-title { font-size: 28px; font-family: SourceHanSansCN; font-weight: 500; color: #333333; line-height: 33px; margin-bottom: 35px; letter-spacing: 2px; } .product-content-intro, .slide-component-ul-intro { font-family: SourceHanSansCN; font-weight: 400; color: #6b707a; font-size: 16px; line-height: 22px; letter-spacing: 2px; } .slide-component-ul-intro { margin-bottom: 30px; display: flex; /* display: table-cell; vertical-align: middle; max-width: 450px; */ } .slide-component-ul-intro img { width: 48px; min-width: 48px; height: 43px; margin-right: 10px; display: inline-block; vertical-align: middle; } .slide-component-ul-intro span { /* display: inline-block; vertical-align: middle; */ display: flex; align-items: center; } .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-img { width: 660px; height: 340px; background: #FFFFFF; box-shadow: 0px 0px 22px 2px rgba(0, 0, 0, 0.1); border-radius: 15px; padding: 15px; } .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-img img { /* width: 630px; height: 310px; */ display: block; width: 100%; border-radius: 15px; height: 310px; } .product-top .product-top-logo img { vertical-align: middle; object-fit: contain; } /* 产品功能 结束 */ /* 相通产品开始 */ .product-matrix-and-scene { padding: 80px 0 16px; } .product-matrix-and-scene .product-matrix-card { display: inline-block; width: 485px; height: 240px; border-radius: 3px; box-shadow: 0 4px 8px 0 rgb(48 48 48 / 10%); background-color: #fff; margin-right: 10px; padding: 41px 30px; margin-bottom: 10px; transition: .3s; } .product-matrix-and-scene .product-matrix-card:hover { position: relative; box-shadow: 0 20px 40px 0 rgb(48 48 48 / 5%), 0 30px 60px 0 rgb(48 48 48 / 10%); z-index: 1; } .product-matrix-and-scene .product-matrix-card .product-matrix-card-img { width: 151px; height: 158px; display: inline-block; vertical-align: top; } .product-matrix-and-scene .product-matrix-card .product-matrix-card-content { display: inline-block; width: 255px; margin-left: 15px; vertical-align: top; } .product-matrix-and-scene .product-matrix-card .product-matrix-card-title { height: 30px; font-size: 20px; line-height: 1.5; color: #1d1e20; font-weight: 500; letter-spacing: 1.2px; } .product-matrix-and-scene .product-matrix-card .product-matrix-card-intro { width: 266px; height: 72px; font-size: 14px; line-height: 24px; color: #373737; margin-top: 10px; margin-bottom: 26px; } .product-page-main .product-matrix-card-more { display: inline-block; transition: .3s; height: 20px; } .product-page-main .product-matrix-card-link-more { display: inline-block; height: 20px; font-size: 14px; font-weight: 500; line-height: 20px; color: #0b5dd9; transition: .3s; } .matrix-card-more-arrow { background-image: url(../images/index/icon-right-arrowX3-bf0513bd00.png); } .product-matrix-and-scene .product-scene-card.last { margin-right: 0; } .product-matrix-and-scene .second-content { margin-top: 70px; } /* 相通产品结束 */ /* 场景开始 */ #solutions { background: url('../imgs/changjing_bg.png') no-repeat; background-size: 100% 100%; margin-top: 50px; margin-bottom: 50px; } #solutions .product-matrix-and-scene { padding: 36px 0 68px; } .normal-width, .top-normal-width { width: 1200px; margin-left: auto; margin-right: auto; } .content-title { font-size: 32px; font-weight: 600; line-height: 1.5; text-align: center; color: #1d1e20; } #solutions .solution-matrix { margin-top: 60px; display: flex; justify-content: space-between; } .product-matrix-and-scene .product-scene-card { width: 578px; /* height: 240px; */ background: #FFFFFF; box-shadow: 0px 0px 14px 2px rgba(138, 166, 213, 0.08); border-radius: 2px; text-align: center; box-sizing: border-box; padding: 45px; } .product-matrix-and-scene .product-scene-card .product-scene-card-img { margin-bottom: 20px; } .product-scene-card-title { line-height: 1.5; letter-spacing: 1.2px; font-size: 24px; font-family: SourceHanSansCN; font-weight: 400; color: #333333; } .product-scene-card-intro { line-height: 24px; margin-top: 20px; font-size: 16px; font-family: SourceHanSansCN; font-weight: 400; color: #666666; } .product-matrix-and-scene .product-scene-card.last { margin-right: 0; } /* 场景结束 */ /* 意义开始 */ .meaning { margin-bottom: 75px; } .meaning_content { display: flex; justify-content: space-between; margin-top: 63px; } .meaning_item { /* width: 386px; */ /* height: 354px; */ background: #FFFFFF; border: 1px solid #E5E8ED; box-shadow: 0px 0px 22px 2px rgba(0, 0, 0, 0.06); box-sizing: border-box; padding: 38px 38px 45px 38px; text-align: center; } .meaning_item_img { width: 48px; height: 48px; margin: 0 auto 24px; } .meaning_main_title { font-size: 24px; font-family: SourceHanSansCN; font-weight: 400; color: #333333; line-height: 25px; margin-bottom: 40px; position: relative; } .meaning_main_title::after { position: absolute; content: ''; width: 24px; height: 2px; background: #0051D6; border-radius: 1px; bottom: -20px; left: 50%; margin-left: -12px; } .meaning_sub_title { font-size: 16px; font-family: SourceHanSansCN; font-weight: 400; color: #333333; line-height: 25px; text-align: left; } /* 意义结束 */ @media screen and (min-width: 768px) and (max-width: 991px) { /* 产品功能 开始*/ .index-pc { display: none; } .index-mobile { display: block; } .product-top { height: auto; padding: 50px 30px 0; } .normal-width { width: 555px; } .product-top .product-top-logo { margin-bottom: 20px; } .product-top .product-top-logo img { height: 28px; width: 28px; } .product-top .product-top-logo .product-top-name { font-size: 20px; height: 27px; } .product-top .product-top-title, .product-top .product-top-title.account, .product-top .product-top-title.plan, .product-top .product-top-title.wiki { width: 100%; font-size: 32px; line-height: 48px; letter-spacing: 1px; } .product-top .product-top-subtitle, .product-top .product-top-subtitle.account, .product-top .product-top-subtitle.perform { width: 100%; font-size: 14px; line-height: 20px; letter-spacing: 0; } .product-top .product-project-image { float: none; height: 342px; width: 342px; position: relative; left: auto; bottom: auto; top: auto; right: auto; margin: 20px auto; } .product-top .product-project-image img { width: 100%; height: 100%; margin: auto; } .product-page-main .product-content .product-title { font-size: 24px; line-height: 34px; text-align: left; margin-bottom: 10px; letter-spacing: 1px; } .product-page-main .product-content .product-subtitle { font-size: 14px; line-height: 24px; text-align: left; width: auto; margin-bottom: 40px; } .product-page-main .product-response-card { margin-bottom: 50px; } .product-page-main .product-response-card-content { margin-bottom: 10px; } .product-page-main .product-content-title { font-size: 20px; line-height: 36px; color: #212326; } .product-page-main .product-content-intro { font-size: 14px; line-height: 24px; color: #212326; margin-bottom: 0; } .product-content-intro:before, .slide-component-ul-intro:before { content: ""; width: 6px; height: 6px; border-radius: 50%; display: inline-block; position: absolute; background-color: #212326; top: 12px; left: 0; } .product-page-main .product-content-intro { font-size: 14px; line-height: 24px; color: #212326; margin-bottom: 0; padding-left: 15px; position: relative; font-weight: 400; } .product-page-main .product-content { width: 495px; margin: 0 auto; } .product-page-main .product-response-card-img { width: 100%; height: 300px; } .product-page-main .product-response-card-img img, .product-page-main .product-response-card-img video { height: 100%; width: 100%; box-shadow: 0 20px 24px 0 rgb(48 48 48 / 10%), 0 0 1px 0 rgb(48 48 48 / 20%); border-radius: 3px; } /* 产品功能 结束*/ /* 相通产品开始 */ .product-matrix-and-scene { padding: 50px 30px 20px; } .product-page-main .product-title { font-size: 24px; line-height: 34px; text-align: left; width: auto; margin-bottom: 10px; letter-spacing: 1px; } .product-page-main .product-subtitle { font-size: 14px; text-align: left; line-height: 24px; } .product-matrix-and-scene .product-matrix-card { display: block; width: 100%; margin-bottom: 30px; padding: 40px 20px; } .product-matrix-and-scene .product-matrix-card .product-matrix-card-img { width: 151px; height: 158px; margin-top: 0; } .product-matrix-and-scene .product-matrix-card .product-matrix-card-img img { height: 100%; width: 100%; object-fit: contain; } /* 相通产品结束 */ /* 场景 */ .product-matrix-and-scene .product-scene-card { width: 217px; height: 190px; margin-bottom: 30px; vertical-align: top; margin-right: 28px; } .product-matrix-and-scene .product-scene-card .product-scene-card-img { width: 56px; height: 44px; margin-top: 14px; } .product-matrix-and-scene .product-scene-card .product-scene-card-img img { height: 100%; width: 100%; image-rendering: -webkit-optimize-contrast; } .product-matrix-and-scene .product-scene-card .product-scene-card-title { font-size: 16px; line-height: 30px; } .product-matrix-and-scene .product-scene-card .product-scene-card-intro { margin-right: 0; font-size: 14px; line-height: 22px; } /* 场景 */ } @media screen and (min-width: 200px) and (max-width: 767px) { /* 产品功能 开始*/ .product-top { height: auto; padding: 30px 20px 0; } .normal-width { width: 375px; } .product-top .product-top-logo { margin-bottom: 20px; display: inline-block; } .product-top .product-top-logo img { height: 28px; width: 28px; vertical-align: middle; object-fit: contain; } .product-top .product-top-logo .product-top-name { font-size: 20px; height: 27px; } .product-top .product-top-title.project, .product-top .product-top-title.testcase { width: 90%; } .product-top .product-project-image { height: 268px; width: 268px; position: relative; left: auto; bottom: auto; margin: 20px auto; } .product-top .product-project-image { float: none; } .product-top .product-project-image img { width: 100%; height: 100%; margin: auto; } .product-top .top-content { margin-top: auto; } .product-page-main .product-page-main-content { padding: 50px 0; background-color: #fafbfc; } .product-page-main .product-content { /* width: 495px; */ width: 335px; /* padding: 0 20px; */ margin: 0 auto; } .product-page-main .product-content .product-title { font-size: 24px; line-height: 34px; text-align: left; margin-bottom: 10px; letter-spacing: 1px; } .product-page-main .product-content .product-subtitle { font-size: 14px; line-height: 24px; text-align: left; width: auto; margin-bottom: 40px; } .product-page-main .product-response-card { margin-bottom: 50px; } .product-page-main .product-response-card-content { margin-bottom: 10px; } .product-page-main .product-response-card-img { width: 100%; height: 203px; } .product-page-main .product-content-title { font-size: 20px; line-height: 36px; color: #212326; } .product-page-main .product-content-intro { font-size: 14px; line-height: 24px; color: #212326; margin-bottom: 0; position: relative; } .product-content-intro:before, .slide-component-ul-intro:before { content: ""; width: 6px; height: 6px; border-radius: 50%; display: inline-block; position: absolute; background-color: #212326; top: 12px; left: 0; } .product-page-main .product-content-intro { font-size: 14px; line-height: 24px; color: #212326; margin-bottom: 0; } .product-page-main .product-response-card-img img, .product-page-main .product-response-card-img video { height: 100%; width: 100%; box-shadow: 0 20px 24px 0 rgb(48 48 48 / 10%), 0 0 1px 0 rgb(48 48 48 / 20%); border-radius: 3px; } /* 产品功能 结束*/ /* 相通产品开始 */ .product-matrix-and-scene { padding: 50px 20px 20px; } .product-page-main .product-title { font-size: 24px; line-height: 34px; text-align: left; width: auto; margin-bottom: 10px; letter-spacing: 1px; } .product-page-main .product-subtitle { font-size: 14px; text-align: left; line-height: 24px; margin-bottom: 30px; } .product-matrix-and-scene .product-matrix-card { width: 100%; height: 393px; text-align: center; padding: 30px 20px; } .product-matrix-and-scene .product-matrix-card .product-matrix-card-img { width: 151px; height: 158px; margin-top: auto; } .product-matrix-and-scene .product-matrix-card .product-matrix-card-img img { height: 100%; width: 100%; object-fit: contain; } .product-matrix-and-scene .product-matrix-card .product-matrix-card-content { margin-left: 0; width: 100%; margin-top: 20px; } .product-matrix-and-scene .product-matrix-card .product-matrix-card-content .product-matrix-card-title { width: auto; } .product-matrix-and-scene .product-matrix-card .product-matrix-card-content .product-matrix-card-intro { height: 72px; margin-bottom: 20px; } .product-matrix-and-scene .product-matrix-card .product-matrix-card-content .product-matrix-card-more { height: 20px; } /* 相通产品结束 */ /* 场景 */ .product-page-main .product-subtitle { margin-bottom: 30px; } .product-matrix-and-scene .product-scene-card { height: 213px; width: 152px; } .product-matrix-and-scene .product-scene-card .product-scene-card-img { width: 56px; height: 44px; margin-top: 14px; } .product-matrix-and-scene .product-scene-card .product-scene-card-img img { height: 100%; width: 100%; image-rendering: -webkit-optimize-contrast; } .product-project .product-scene-card, .product-project .product-scene-card.last { margin-right: 12px; } .product-matrix-and-scene .product-scene-card .product-scene-card-title { font-size: 16px; line-height: 30px; } .product-matrix-and-scene .product-scene-card .product-scene-card-intro { margin-right: 0; font-size: 14px; line-height: 22px; } } .jianjie_box { display: flex; justify-content: space-between; flex-wrap: nowrap; margin-top: 30px; } .jianjie_box img { width: 22%; display: block; } .img_box img { display: block; width: 100%; margin-top: 10px; } .point { width: 8px; height: 8px; min-width: 8px; margin-right: 20px; /* border: 1px solid #000; */ border-radius: 50%; background-color: #333; }