// 第一部分 @media screen and (min-width: 1401px) { .part1 { font-family: '微软雅黑'; width: 1400PX; height: 347PX; margin: 20PX auto; display: flex; justify-content: space-between; .part1Left { .part1Left_title { width: 966PX; height: 45PX; line-height: 45PX; background-color: #f7f7f7; color: #337ab7; font-size: 18PX; font-weight: bold; padding: 0 10PX; box-sizing: border-box; a { color: #337ab7; } } .part1Left_content { width: 100%; height: auto; overflow: hidden; margin: 20PX 0; padding-bottom: 20PX; border-bottom: 1PX dashed #ccc; display: flex; justify-content: space-between; .content_img { a { img { width: 319PX; height: 241PX; } } } .content_rightText { width: 615PX; .rightText_top { a { .title { width: 615PX; height: 40PX; line-height: 40PX; font-size: 18PX; font-weight: bold; color: #0f68cc; } .desc { font-size: 14PX; color: #666; max-height: 60PX; line-height: 30PX; font-size: 14PX; color: #000; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } } } .rightText_bottom { width: 615PX; div { float: left; width: 300PX; height: 34PX; line-height: 34PX; border-bottom: 1PX dashed #ccc; a { color: #000; font-size: 12PX; display: inline-block; width: 300PX; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; span { display: inline-block; width: 16PX; height: 16PX; background: url('../../public/index/tubiao.jpg') no-repeat; vertical-align: -4PX; margin-right: 7PX; } } &:nth-child(2n+1) { margin-right: 15PX; } } } } } } .part1Right { width: 406PX; .part1Right_title { width: 406PX; height: 45PX; line-height: 45PX; background-color: #f7f7f7; color: #337ab7; font-size: 18PX; font-weight: bold; padding: 0 10PX; box-sizing: border-box; a { color: #337ab7; } } .part1Right_content { width: 406PX; margin: 20PX 0; div { font-size: 14PX; text-indent: 4PX; margin-bottom: 10PX; &:last-child { margin-bottom: 0; } a { display: inline-block; width: 406PX; color: #494949; position: relative; padding-left: 10PX; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a::after { content: ''; display: block; width: 6PX; height: 6PX; background: #0f68cc; position: absolute; left: 0PX; top: 8PX; } } } } } } @media screen and (min-width: 801px) and (max-width: 1400px) { .part1 { font-family: '微软雅黑'; width: 100%; height: 347PX; margin: 20PX auto; display: flex; justify-content: space-between; .part1Left { width: 69%; .part1Left_title { width: 100%; height: 45PX; line-height: 45PX; background-color: #f7f7f7; color: #337ab7; font-size: 18PX; font-weight: bold; padding: 0 10PX; box-sizing: border-box; a { color: #337ab7; } } .part1Left_content { width: 100%; height: auto; overflow: hidden; margin: 20PX 0; padding: 0 10PX 20PX; box-sizing: border-box; border-bottom: 1PX dashed #ccc; display: flex; justify-content: space-between; .content_img { width: 32%; a { img { width: 100%; height: 241PX; } } } .content_rightText { width: 66%; .rightText_top { width: 100%; a { .title { width: 100%; height: 40PX; line-height: 40PX; font-size: 18PX; font-weight: bold; color: #0f68cc; } .desc { font-size: 14PX; color: #666; max-height: 60PX; line-height: 30PX; font-size: 14PX; color: #000; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } } } .rightText_bottom { width: 100%; div { float: left; width: 48%; height: 34PX; line-height: 34PX; border-bottom: 1PX dashed #ccc; a { color: #000; font-size: 12PX; display: inline-block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; span { display: inline-block; width: 16PX; height: 16PX; background: url('../../public/index/tubiao.jpg') no-repeat; vertical-align: -4PX; margin-right: 7PX; } } &:nth-child(2n+1) { margin-right: 5px; } } } } } } .part1Right { width: 30%; .part1Right_title { width: 100%; height: 45PX; line-height: 45PX; background-color: #f7f7f7; color: #337ab7; font-size: 18PX; font-weight: bold; padding: 0 10PX; box-sizing: border-box; a { color: #337ab7; } } .part1Right_content { width: 100%; margin: 20PX 0; div { font-size: 14PX; text-indent: 4PX; margin-bottom: 10PX; &:last-child { margin-bottom: 0; } a { display: inline-block; width: 100%; color: #494949; position: relative; padding-left: 10PX; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a::after { content: ''; display: block; width: 6PX; height: 6PX; background: #0f68cc; position: absolute; left: 0PX; top: 8PX; } } } } } } @media screen and (max-width: 800px) { .part1 { // z-index: 1; font-family: '微软雅黑'; width: 100%; height: auto; margin: 20px auto; box-sizing: border-box; .part1Left { padding: 0 20px; .part1Left_title { width: 100%; height: 80px; line-height: 80px; background-color: #f7f7f7; border-bottom: 1px solid #ccc; color: #337ab7; font-size: 32px; font-weight: bold; padding: 0 20px; box-sizing: border-box; a { color: #337ab7; font-weight: bold; } } .part1Left_content { width: 100%; height: auto; overflow: hidden; margin: 20px 0; padding-bottom: 20px; border-bottom: 1px dashed #ccc; box-sizing: border-box; .content_img { width: 100%; a { img { width: 100%; height: 482px; } } } .content_rightText { width: 100%; .rightText_top { overflow: hidden; a { .title { width: 100%; height: 80px; line-height: 80px; font-size: 30px; font-weight: bold; color: #0f68cc; } .desc { font-size: 28px; color: #666; max-height: 240px; line-height: 42px; color: #000; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; span { color: #0f68cc; } } } } .rightText_bottom { width: 100%; div { float: left; width: 48%; height: 68px; line-height: 68px; border-bottom: 1px dashed #ccc; a { color: #000; font-size: 24px; display: inline-block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; span { display: inline-block; width: 32px; height: 32px; background: url('../../public/index/tubiao.jpg') no-repeat; vertical-align: -8px; margin-right: 14px; } } &:nth-child(2n+1) { margin-right: 4%; } } } } } } .part1Right { width: 100%; padding: 0 20px; box-sizing: border-box; .part1Right_title { width: 100%; height: 80px; line-height: 80px; background-color: #f7f7f7; border-bottom: 1px solid #ccc; color: #337ab7; font-size: 32px; font-weight: bold; padding: 0 20px; box-sizing: border-box; a { color: #337ab7; } } .part1Right_content { width: 100%; margin: 40px 0; overflow: hidden; div { width: 48%; float: left; font-size: 28px; text-indent: 8px; margin-bottom: 20px; &:last-child { margin-bottom: 0; } a { display: inline-block; width: 100%; color: #494949; position: relative; padding-left: 20px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a::after { content: ''; display: block; width: 12px; height: 12px; background: #0f68cc; position: absolute; left: 0px; top: 16px; } &:nth-child(2n+1) { margin-right: 4%; } } } } } } // 第二部分 @media screen and (min-width: 1401px) { .part2 { font-family: '微软雅黑'; width: 1400PX; height: 393PX; margin: 20PX auto; display: flex; justify-content: space-between; .part2_left { width: 966PX; height: 393PX; .part2_left_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part2_left_content { width: 956PX; .part2LeftContent_top { .part2LeftContent_top_item { width: 950PX; height: 132PX; margin: 0 10PX; box-sizing: border-box; background-color: #f4f4f4; a { display: flex; img { width: 155PX; height: 132PX; margin-right: 20PX; } .left_text { padding-right: 10PX; .left_text_title { width: 100%; height: 40PX; line-height: 40PX; overflow: hidden; font-size: 18PX; color: #347cc8; } .left_text_desc { width: 100%; height: 92PX; line-height: 28PX; font-size: 14PX; color: #333; overflow: hidden; span { color: #0f68cc; } } } } } } .part2LeftContent_bottom { width: 944PX; height: 211PX; margin: 0 15PX; box-sizing: border-box; border-bottom: 1PX dashed #ccc; padding-top: 8PX; div { float: left; width: 300PX; font-size: 14PX; color: #7f7f7f; margin-bottom: 15PX; margin-right: 20PX; a { color: #7f7f7f; } &:nth-child(3n) { margin-right: 0; } &:nth-child(16), &:nth-child(17), &:nth-child(18) { margin-bottom: 0; } } } } } .part2_right { width: 406PX; // height: 393PX; .part2_right_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part2_right_content { padding: 0 10PX; a { img { width: 386PX; height: 194PX; margin: -3PX auto; } .right_title { display: block; width: 100%; height: 34PX; line-height: 34PX; text-align: center; overflow: hidden; background: #166da3; color: #fff; font-size: 12PX; } .right_text { font-size: 14PX; width: 386PX; // height: 120PX; line-height: 25PX; margin-top: 11PX; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; span { color: #826710; font-size: 14PX; } } } } } } } @media screen and (min-width: 801px) and (max-width: 1400px) { .part2 { font-family: '微软雅黑'; width: 100%; height: 393PX; margin: 20PX auto; display: flex; justify-content: space-between; .part2_left { width: 69%; height: 393PX; .part2_left_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part2_left_content { width: 100%; .part2LeftContent_top { width: 100%; .part2LeftContent_top_item { width: 99%; height: 132PX; padding: 0 10PX; box-sizing: border-box; background-color: #f4f4f4; a { display: flex; img { width: 20%; height: 132PX; margin-right: 20PX; } .left_text { width: 80%; padding-right: 10PX; .left_text_title { width: 100%; height: 40PX; line-height: 40PX; overflow: hidden; font-size: 18PX; color: #347cc8; } .left_text_desc { width: 100%; height: 92PX; line-height: 28PX; font-size: 14PX; color: #333; overflow: hidden; span { color: #0f68cc; } } } } } } .part2LeftContent_bottom { width: 100%; height: 211PX; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX dashed #ccc; padding-top: 8PX; div { float: left; width: 32%; font-size: 14PX; color: #7f7f7f; margin-bottom: 15PX; margin-right: 5PX; a { color: #7f7f7f; } &:nth-child(3n) { margin-right: 0; } &:nth-child(16), &:nth-child(17), &:nth-child(18) { margin-bottom: 0; } } } } } .part2_right { width: 30%; .part2_right_title { width: 100%; height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part2_right_content { width: 100%; padding: 0 10PX; box-sizing: border-box; a { width: 100%; img { width: 100%; height: 194PX; margin: -3PX auto; } .right_title { display: block; width: 100%; height: 34PX; line-height: 34PX; text-align: center; overflow: hidden; background: #166da3; color: #fff; font-size: 12PX; } .right_text { font-size: 14PX; width: 100%; // height: 120PX; line-height: 25PX; margin-top: 11PX; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; span { color: #826710; font-size: 14PX; } } } } } } } @media screen and (max-width: 800px) { .part2 { font-family: '微软雅黑'; width: 100%; height: auto; margin: 40px auto; .part2_left { width: 100%; height: auto; padding: 0 20px; box-sizing: border-box; .part2_left_title { width: 100%; height: 80px; line-height: 80px; font-size: 32px; color: #0f68cc; font-weight: bold; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #ccc; margin-bottom: 20px; a { color: #0f68cc; } } .part2_left_content { width: 100%; height: auto; overflow: hidden; .part2LeftContent_top { .part2LeftContent_top_item { width: 100%; height: auto; background-color: #f4f4f4; a { img { width: 100%; height: 300px; } .left_text { .left_text_title { width: 100%; height: 80px; line-height: 80px; overflow: hidden; font-size: 33px; color: #347cc8; } .left_text_desc { width: 100%; height: 192px; line-height: 48px; font-size: 28px; color: #333; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; span { color: #0f68cc; } } } } } } .part2LeftContent_bottom { width: 100%; overflow: hidden; box-sizing: border-box; border-bottom: 2px dashed #ccc; padding-bottom: 20px; padding-top: 20px; margin-bottom: 20px; div { float: left; width: 32%; font-size: 28px; line-height: 48px; color: #7f7f7f; margin-right: 2%; a { width: 100%; color: #7f7f7f; } &:nth-child(3n) { margin-right: 0; } &:nth-child(16), &:nth-child(17), &:nth-child(18) { margin-bottom: 0; } } } } } .part2_right { width: 100%; height: auto; padding: 0 20px; box-sizing: border-box; .part2_right_title { height: 80px; line-height: 80px; font-size: 32px; color: #0f68cc; font-weight: bold; padding: 0 20px; box-sizing: border-box; border-bottom: 2px solid #ccc; margin-bottom: 20px; a { color: #0f68cc; } } .part2_right_content { width: 100%; padding: 0 20px; box-sizing: border-box; a { img { width: 100%; height: 330px; margin: -6px auto; } .right_title { display: block; width: 100%; height: 68px; line-height: 68px; text-align: center; overflow: hidden; background: #166da3; color: #fff; font-size: 24px; } .right_text { width: 100%; line-height: 50px; margin-top: 22px; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; font-size: 28px; span { color: #826710; font-size: 28px; } } } } } } } // 第三部分 @media screen and (min-width: 1401px) { .part3 { width: 1400PX; height: 393PX; margin: 20PX auto; display: flex; justify-content: space-between; .part3_left { font-family: '微软雅黑'; width: 966PX; height: 393PX; .part3_left_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part3_left_content { width: 956PX; .part3LeftContent_top { .part3LeftContent_top_item { width: 950PX; height: 132PX; margin: 0 10PX; box-sizing: border-box; background-color: #f4f4f4; a { display: flex; img { min-width: 155PX; height: 132PX; margin-right: 20PX; } .left_text { padding-right: 10PX; .left_text_title { width: 100%; height: 40PX; line-height: 40PX; overflow: hidden; font-size: 18PX; color: #347cc8; } .left_text_desc { width: 100%; height: 92PX; line-height: 28PX; font-size: 14PX; color: #333; overflow: hidden; span { color: #0f68cc; } } } } } } .part3LeftContent_bottom { width: 944PX; height: 211PX; margin: 0 15PX; box-sizing: border-box; border-bottom: 1PX dashed #ccc; padding-top: 8PX; div { float: left; width: 300PX; font-size: 14PX; color: #7f7f7f; margin-bottom: 15PX; margin-right: 20PX; a { color: #7f7f7f; } &:nth-child(3n) { margin-right: 0; } &:nth-child(16), &:nth-child(17), &:nth-child(18) { margin-bottom: 0; } } } } } .part3_right { width: 406PX; font-family: '微软雅黑'; .part3_right_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part3_right_content { div { color: #494949; font-size: 14PX; text-indent: 14PX; position: relative; margin-bottom: 15PX; a { color: #494949; } &:last-child { margin-bottom: 0; } } div::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6PX; height: 6PX; background-color: #0f68cc; } } } } } @media screen and (min-width: 801px) and (max-width: 1400px) { .part3 { width: 100%; height: auto; margin: 20PX auto; display: flex; justify-content: space-between; .part3_left { font-family: '微软雅黑'; width: 69%; height: auto; .part3_left_title { width: 100%; height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part3_left_content { width: 100%; .part3LeftContent_top { .part3LeftContent_top_item { width: 99%; height: 132PX; padding: 0 10PX; box-sizing: border-box; background-color: #f4f4f4; a { display: flex; img { min-width: 155PX; height: 132PX; margin-right: 20PX; } .left_text { padding-right: 10PX; .left_text_title { width: 100%; height: 40PX; line-height: 40PX; overflow: hidden; font-size: 18PX; color: #347cc8; } .left_text_desc { width: 100%; height: 92PX; line-height: 28PX; font-size: 14PX; color: #333; overflow: hidden; span { color: #0f68cc; } } } } } } .part3LeftContent_bottom { width: 99%; height: 211PX; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX dashed #ccc; padding-top: 8PX; div { float: left; width: 32%; font-size: 14PX; color: #7f7f7f; margin-bottom: 15PX; margin-right: 10PX; a { color: #7f7f7f; } &:nth-child(3n) { margin-right: 0; } &:nth-child(16), &:nth-child(17), &:nth-child(18) { margin-bottom: 0; } } } } } .part3_right { width: 30%; font-family: '微软雅黑'; .part3_right_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part3_right_content { div { color: #494949; font-size: 14PX; text-indent: 14PX; position: relative; margin-bottom: 15PX; a { color: #494949; } &:last-child { margin-bottom: 0; } } div::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6PX; height: 6PX; background-color: #0f68cc; } } } } } @media screen and (max-width: 800px) { .part3 { width: 100%; height: auto; margin: 40px 0; .part3_left { font-family: '微软雅黑'; width: 100%; height: auto; padding: 0 10px; box-sizing: border-box; .part3_left_title { height: 80px; line-height: 80px; font-size: 32px; color: #0f68cc; font-weight: bold; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #ccc; margin-bottom: 20px; a { color: #0f68cc; } } .part3_left_content { width: 100%; .part3LeftContent_top { .part3LeftContent_top_item { width: 100%; height: auto; margin: 0 20px; box-sizing: border-box; background-color: #f4f4f4; a { img { width: 95%; height: 264px; } .left_text { .left_text_title { width: 100%; height: 80px; line-height: 80px; overflow: hidden; font-size: 32px; color: #347cc8; } .left_text_desc { width: 96%; height: 180px; line-height: 40px; font-size: 26px; box-sizing: border-box; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; span { color: #0f68cc; } } } } } } .part3LeftContent_bottom { width: 100%; height: auto; overflow: hidden; margin: 0 20px; box-sizing: border-box; border-bottom: 1px dashed #ccc; padding-top: 16px; padding-bottom: 16px; div { float: left; width: 31%; font-size: 28px; color: #7f7f7f; margin-bottom: 15px; margin-right: 10px; a { color: #7f7f7f; } &:nth-child(3n) { margin-right: 0; } &:nth-child(16), &:nth-child(17), &:nth-child(18) { margin-bottom: 0; } } } } } .part3_right { width: 100%; height: auto; overflow: hidden; font-family: '微软雅黑'; padding: 0 10px; box-sizing: border-box; .part3_right_title { height: 80px; line-height: 80px; font-size: 32px; color: #0f68cc; font-weight: bold; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #ccc; margin-bottom: 20px; a { color: #0f68cc; } } .part3_right_content { padding: 0 10px; box-sizing: border-box; div { float: left; width: 49%; color: #494949; font-size: 28px; text-indent: 28px; position: relative; margin-bottom: 20px; margin-right: 10px; a { color: #494949; } &:nth-child(2n) { margin-right: 0; } &:last-child { margin-bottom: 0; } } div::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background-color: #0f68cc; } } } } } // 第四部分 @media screen and (min-width: 1401px) { .part4 { width: 1400PX; height: 429PX; margin: 0 auto; .part4Left { width: 448PX; float: left; width: 32%; margin: 1%; margin-right: 2%; margin-bottom: 0; .part4Left_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part4Left_content { .part4Content_top { font-family: '微软雅黑'; border: solid 1PX #acacac; padding: 1%; background: #f6f6f6; a { display: flex; img { width: 192PX; height: 110PX; margin-right: 10PX; } .leftTop_text { .leftTop_text_title { height: 66PX; line-height: 33PX; color: #0f68cc; font-size: 20PX; } .leftTop_text_desc { height: 44PX; line-height: 22PX; color: #757373; font-size: 16PX; } } } } .part4Content_bottom { margin-top: 5PX; font-family: '微软雅黑'; div { width: 448PX; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 22PX; color: #494949; font-size: 16PX; position: relative; margin-bottom: 12PX; box-sizing: border-box; a { color: #494949; } } div::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6PX; height: 6PX; background-color: #0f68cc; } } } } .part4Mid { width: 448PX; float: left; width: 32%; margin: 1%; margin-bottom: 0; .part4Left_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part4Left_content { .part4Content_top { font-family: '微软雅黑'; border: solid 1PX #acacac; padding: 1%; background: #f6f6f6; a { display: flex; img { width: 192PX; height: 110PX; margin-right: 10PX; } .leftTop_text { .leftTop_text_title { height: 66PX; line-height: 33PX; color: #0f68cc; font-size: 20PX; } .leftTop_text_desc { height: 44PX; line-height: 22PX; color: #757373; font-size: 16PX; } } } } .part4Content_bottom { margin-top: 5PX; font-family: '微软雅黑'; div { width: 448PX; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 22PX; color: #494949; font-size: 16PX; position: relative; margin-bottom: 12PX; box-sizing: border-box; a { color: #494949; } } div::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6PX; height: 6PX; background-color: #0f68cc; } } } } .part2_right { width: 406PX; width: 29%; float: left; margin: 1%; .part2_right_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part2_right_content { padding: 0 10PX; a { img { width: 386PX; height: 194PX; margin: -3PX auto; } .right_title { display: block; width: 100%; height: 34PX; line-height: 34PX; text-align: center; overflow: hidden; background: #166da3; color: #fff; font-size: 12PX; } .right_text { font-size: 14PX; width: 386PX; // height: 120PX; line-height: 25PX; margin-top: 11PX; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; span { color: #826710; font-size: 14PX; } } } } } } } @media screen and (min-width: 801px) and (max-width: 1400px) { .part4 { width: 100%; height: 429PX; margin: 0 auto; .part4Left { float: left; width: 32%; margin: 1%; margin-right: 2%; margin-bottom: 0; .part4Left_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part4Left_content { .part4Content_top { font-family: '微软雅黑'; border: solid 1PX #acacac; padding: 1%; background: #f6f6f6; a { display: flex; img { width: 45%; height: 110PX; margin-right: 10PX; } .leftTop_text { .leftTop_text_title { height: 66PX; line-height: 33PX; color: #0f68cc; font-size: 20PX; } .leftTop_text_desc { height: 44PX; line-height: 22PX; color: #757373; font-size: 16PX; } } } } .part4Content_bottom { margin-top: 5PX; font-family: '微软雅黑'; div { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 22PX; color: #494949; font-size: 16PX; position: relative; margin-bottom: 12PX; box-sizing: border-box; a { color: #494949; } } div::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6PX; height: 6PX; background-color: #0f68cc; } } } } .part4Mid { float: left; width: 32%; margin: 1%; margin-bottom: 0; .part4Left_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part4Left_content { .part4Content_top { font-family: '微软雅黑'; border: solid 1PX #acacac; padding: 1%; background: #f6f6f6; a { display: flex; img { width: 45%; height: 110PX; margin-right: 10PX; } .leftTop_text { .leftTop_text_title { height: 66PX; line-height: 33PX; color: #0f68cc; font-size: 20PX; } .leftTop_text_desc { height: 44PX; line-height: 22PX; color: #757373; font-size: 16PX; } } } } .part4Content_bottom { margin-top: 5PX; font-family: '微软雅黑'; div { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 22PX; color: #494949; font-size: 16PX; position: relative; margin-bottom: 12PX; box-sizing: border-box; a { color: #494949; } } div::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6PX; height: 6PX; background-color: #0f68cc; } } } } .part2_right { width: 29%; float: left; margin: 1%; .part2_right_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part2_right_content { padding: 0 10PX; a { img { width: 100%; height: 194PX; margin: -3PX auto; } .right_title { display: block; width: 100%; height: 34PX; line-height: 34PX; text-align: center; overflow: hidden; background: #166da3; color: #fff; font-size: 12PX; } .right_text { font-size: 14PX; width: 100%; // height: 120PX; line-height: 25PX; margin-top: 11PX; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; span { color: #826710; font-size: 14PX; } } } } } } } @media screen and (max-width: 800px) { .part4 { width: 100%; height: auto; margin: 0 auto; overflow: hidden; .part4Left { width: 100%; float: left; padding: 0 10px; box-sizing: border-box; .part4Left_title { height: 80px; line-height: 80px; font-size: 32px; color: #0f68cc; font-weight: bold; padding: 0 10px; box-sizing: border-box; border-bottom: 1px solid #ccc; margin-bottom: 20px; a { color: #0f68cc; } } .part4Left_content { width: 100%; .part4Content_top { font-family: '微软雅黑'; border: solid 1px #acacac; padding: 1%; background: #f6f6f6; a { display: flex; img { width: 40%; height: 220px; margin-right: 20px; } .leftTop_text { .leftTop_text_title { height: 120px; line-height: 60px; color: #0f68cc; font-size: 40px; } .leftTop_text_desc { height: 80px; line-height: 40px; color: #757373; font-size: 30px; } } } } .part4Content_bottom { margin-top: 10px; font-family: '微软雅黑'; padding-left: 12px; div { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 22px; color: #494949; font-size: 30px; position: relative; margin-bottom: 20px; box-sizing: border-box; a { color: #494949; } } div::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background-color: #0f68cc; } } } } .part4Mid { width: 100%; float: left; padding: 0 10px; box-sizing: border-box; .part4Left_title { height: 80px; line-height: 80px; font-size: 32px; color: #0f68cc; font-weight: bold; padding: 0 10px; box-sizing: border-box; border-bottom: 1px solid #ccc; margin-bottom: 20px; a { color: #0f68cc; } } .part4Left_content { width: 100%; .part4Content_top { font-family: '微软雅黑'; border: solid 1px #acacac; padding: 1%; background: #f6f6f6; a { display: flex; img { width: 40%; height: 220px; margin-right: 20px; } .leftTop_text { .leftTop_text_title { height: 120px; line-height: 60px; color: #0f68cc; font-size: 40px; } .leftTop_text_desc { height: 80px; line-height: 40px; color: #757373; font-size: 30px; } } } } .part4Content_bottom { margin-top: 10px; font-family: '微软雅黑'; padding-left: 12px; div { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 22px; color: #494949; font-size: 30px; position: relative; margin-bottom: 20px; box-sizing: border-box; a { color: #494949; } } div::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background-color: #0f68cc; } } } } .part2_right { width: 100%; float: left; padding: 0 20px; box-sizing: border-box; .part2_right_title { height: 80px; line-height: 80px; font-size: 32px; color: #0f68cc; font-weight: bold; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #ccc; margin-bottom: 20px; a { color: #0f68cc; } } .part2_right_content { padding: 0 20px; a { img { width: 100%; height: 388px; margin: -6px auto; } .right_title { display: block; width: 100%; height: 68px; line-height: 68px; text-align: center; overflow: hidden; background: #166da3; color: #fff; font-size: 24px; } .right_text { width: 100%; height: auto; line-height: 50px; margin-top: 20px; font-size: 28px; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; span { color: #826710; font-size: 28px; } } } } } } } // 第五部分 @media screen and (min-width: 1401px) { .part5 { width: 1400PX; height: 409PX; margin: 0 auto; margin-top: 0; .part5Left { width: 68%; float: left; margin-right: 2%; margin-top: 0PX; .part5Left_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part5Left_content { height: 272PX; background: linear-gradient(#fdfeff, #e8f5fd); .part5Left_item { padding: 0 50PX; display: flex; img { width: 300PX; height: 270PX; margin-right: 22PX; } .contentText { width: 542PX; .title { width: 542PX; height: 64PX; line-height: 64PX; font-size: 18PX; color: #000; font-weight: bold; margin-top: 22PX; } .desc { width: 100%; height: 100PX; overflow: hidden; line-height: 25PX; font-size: 13PX; color: #333; text-align: left; text-indent: 26PX; } } } .el-carousel { height: 300PX; :deep(.el-carousel__arrow i) { font-size: 63PX !important; } .roll_1_box { position: relative; } :deep(.el-carousel__arrow--left) { position: absolute; top: 44%; left: 15PX; width: 22PX; height: 62PX; color: #1887ff; background: transparent; border: none; border-radius: 4PX; } :deep(.el-icon-arrow-left:before) { font-size: 24PX; line-height: 56PX; } :deep(.el-carousel__arrow--right) { position: absolute; top: 44%; right: 10PX; width: 22PX; height: 62PX; color: #1887ff; background: transparent; border: none; border-radius: 4PX; } :deep(.el-icon-arrow-right:before) { font-size: 24PX; line-height: 56PX; } :deep(.el-carousel__indicators) { // 指示器 left: unset; transform: unset; right: 10PX; bottom: 20PX; } :deep(.el-carousel__button) { // 指示器按钮 width: 20PX; height: 8PX; border: none; // border-radius: 5PX; background: #bac4ca; opacity: 1; } :deep(.is-active .el-carousel__button) { // 指示器激活按钮 background: #007aff; width: 20PX; opacity: 1; } } } } .part5Right { width: 29%; float: left; .part2_right_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part2_right_content { padding: 0 10PX; a { img { width: 386PX; height: 194PX; margin: -3PX auto; } .right_title { display: block; width: 100%; height: 34PX; line-height: 34PX; text-align: center; overflow: hidden; background: #166da3; color: #fff; font-size: 12PX; } .right_text { font-size: 14PX; width: 386PX; // height: 120PX; line-height: 25PX; margin-top: 11PX; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; span { color: #826710; font-size: 14PX; } } } } } } } @media screen and (min-width: 801px) and (max-width: 1400px) { .part5 { width: 100%; height: 409PX; margin: 0 auto; margin-top: 0; .part5Left { width: 68%; float: left; margin-right: 2%; margin-top: 0PX; .part5Left_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part5Left_content { width: 100%; height: 272PX; background: linear-gradient(#fdfeff, #e8f5fd); .part5Left_item { padding: 0 50PX; display: flex; img { width: 300PX; height: 270PX; margin-right: 22PX; } .contentText { width: calc(100% - 300PX); .title { width: calc(100% - 30PX); height: 64PX; line-height: 64PX; font-size: 18PX; color: #000; font-weight: bold; margin-top: 22PX; } .desc { width: 100%; height: 100PX; overflow: hidden; line-height: 25PX; font-size: 13PX; color: #333; text-align: left; text-indent: 26PX; } } } .el-carousel { height: 300PX; :deep(.el-carousel__arrow i) { font-size: 63PX !important; } .roll_1_box { position: relative; } :deep(.el-carousel__arrow--left) { position: absolute; top: 44%; left: 15PX; width: 22PX; height: 62PX; color: #1887ff; background: transparent; border: none; border-radius: 4PX; } :deep(.el-icon-arrow-left:before) { font-size: 24PX; line-height: 56PX; } :deep(.el-carousel__arrow--right) { position: absolute; top: 44%; right: 10PX; width: 22PX; height: 62PX; color: #1887ff; background: transparent; border: none; border-radius: 4PX; } :deep(.el-icon-arrow-right:before) { font-size: 24PX; line-height: 56PX; } :deep(.el-carousel__indicators) { // 指示器 left: unset; transform: unset; right: 10PX; bottom: 20PX; } :deep(.el-carousel__button) { // 指示器按钮 width: 20PX; height: 8PX; border: none; // border-radius: 5PX; background: #bac4ca; opacity: 1; } :deep(.is-active .el-carousel__button) { // 指示器激活按钮 background: #007aff; width: 20PX; opacity: 1; } } } } .part5Right { width: 29%; float: left; // margin: 1%; .part2_right_title { height: 40PX; line-height: 40PX; font-size: 18PX; color: #0f68cc; font-weight: bold; padding: 0 10PX; box-sizing: border-box; border-bottom: 1PX solid #ccc; margin-bottom: 10PX; a { color: #0f68cc; } } .part2_right_content { padding: 0 10PX; a { img { width: 100%; height: 194PX; margin: -3PX auto; } .right_title { display: block; width: 100%; height: 34PX; line-height: 34PX; text-align: center; overflow: hidden; background: #166da3; color: #fff; font-size: 12PX; } .right_text { font-size: 14PX; width: 100%; // height: 120PX; line-height: 25PX; margin-top: 11PX; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; span { color: #826710; font-size: 14PX; } } } } } } } @media screen and (max-width: 800px) { .part5 { width: 100%; height: auto; overflow: hidden; margin: 0 auto; margin-top: 0; .part5Left { width: 100%; height: auto; overflow: hidden; float: left; padding: 0 20px; box-sizing: border-box; .part5Left_title { height: 80px; line-height: 80px; font-size: 32px; color: #0f68cc; font-weight: bold; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #ccc; margin-bottom: 20px; a { color: #0f68cc; } } .part5Left_content { height: auto; background: linear-gradient(#fdfeff, #e8f5fd); overflow: hidden; .part5Left_item { height: auto; overflow: hidden; padding: 0 100px; box-sizing: border-box; img { width: 100%; height: 300px; } .contentText { display: block; width: 100%; height: auto; overflow: hidden; .title { width: 100%; height: auto; overflow: hidden; font-size: 38px; margin-top: 44px; margin-bottom: 10px; color: #000; font-weight: bold; z-index: 100; } .desc { width: 100%; height: auto; overflow: hidden; line-height: 38px; font-size: 28px; color: #333; text-align: left; text-indent: 52px; box-sizing: border-box; } } } .el-carousel { height: 600px; overflow: hidden; .el-carousel__item { display: inline-block; height: auto; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; } :deep(.el-carousel__arrow i) { font-size: 120px !important; } .roll_1_box { position: relative; } :deep(.el-carousel__arrow--left) { position: absolute; top: 50%; left: 20px; width: 44px; height: 124px; color: #1887ff; background: transparent; border: none; border-radius: 4px; } :deep(.el-icon-arrow-left:before) { font-size: 24px; line-height: 56px; } :deep(.el-carousel__arrow--right) { position: absolute; top: 50%; right: 20px; width: 44px; height: 124px; color: #1887ff; background: transparent; border: none; border-radius: 4px; } :deep(.el-icon-arrow-right:before) { font-size: 24px; line-height: 56px; } :deep(.el-carousel__indicators) { display: none; // 指示器 left: unset; transform: unset; right: 10px; bottom: 20px; } :deep(.el-carousel__button) { // 指示器按钮 width: 20px; height: 8px; border: none; // border-radius: 5px; background: #bac4ca; opacity: 1; } :deep(.is-active .el-carousel__button) { // 指示器激活按钮 background: #007aff; width: 20px; opacity: 1; } } } } .part5Right { width: 100%; float: left; padding: 0 20px; box-sizing: border-box; .part2_right_title { height: 80px; line-height: 80px; font-size: 32px; color: #0f68cc; font-weight: bold; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #ccc; margin-bottom: 20px; a { color: #0f68cc; } } .part2_right_content { padding: 0 20px; a { img { width: 100%; height: 388px; margin: -6px auto; } .right_title { display: block; width: 100%; height: 68px; line-height: 68px; text-align: center; overflow: hidden; background: #166da3; color: #fff; font-size: 24px; } .right_text { width: 100%; height: auto; line-height: 50px; margin-top: 20px; font-size: 28px; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; span { color: #826710; font-size: 28px; } } } } } } } // 第六部分 @media screen and (min-width: 1401px) { .part6 { width: 1400PX; height: 409PX; margin: 0 auto; background-color: #ccc; } } @media screen and (min-width: 801px) and (max-width: 1400px) { .part6 { width: 1400PX; height: 409PX; margin: 0 auto; background-color: #ccc; } } @media screen and (max-width: 800px) { .part6 { width: 100%; height: auto; margin: 0 auto; background-color: #ccc; } } .dot1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dot2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .dot3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .dot4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }