// 第一部分 @media screen and (min-width: 1401px) { .part1 { font-family: '微软雅黑'; width: 1400PX; margin: 20PX auto; display: flex; justify-content: space-between; .part1Left { width: 49%; .el-carousel { position: relative; span { display: block; width: 100%; height: 75PX; line-height: 50PX; background-color: rgba(0, 0, 0, 0.5); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 15PX; text-align: center; } // 左右箭头按钮 .el-carousel__arrow--right :deep(.class-name), .el-carousel__arrow--left :deep(.class-name) { width: 68PX; height: 68PX; } img { width: 100%; height: 500PX; } //左右箭头图片 :deep(.el-icon svg) { height: 1em; width: 1em; background-color: transparent; } :deep(.el-carousel__arrow) { border-radius: 0; background-color: transparent; } :deep(.el-carousel__arrow i) { font-size: 68PX !important; } // 箭头按钮距离左右边框的距离 :deep(.el-carousel__arrow--left) { left: -15PX; left: 10PX; } :deep(.el-carousel__arrow--right) { right: -15PX; right: 10PX; } :deep(.el-carousel__indicators--horizontal) { bottom: -18PX; bottom: -10PX; left: 50%; transform: translateX(-50%); } // 指示器按钮 :deep(.el-carousel__button) { width: 50PX; height: 8PX; border-radius: 4PX; border: none; opacity: 1; background-color: #ff9b9b; } :deep(.is-active .el-carousel__button) { // 指示器激活按钮 background: #ff0024; } :deep(.el-carousel__container) { height: 100%; } :deep(.custom-indicators) { position: absolute; bottom: 10PX; left: 50%; transform: translateX(-50%); } // 将指示器的所有样式都不显示 // :deep(.el-carousel__indicators) { // display: none; // } } } .part1Right { width: 49%; .part1Right_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part1Right_content { width: 100%; div { width: 100%; height: 43PX; line-height: 38PX; list-style-position: inside; list-style-image: url(../../public/index/index_42.png); border-bottom: 1PX solid #ccc; &:last-child { margin-bottom: 0; } a { font-size: 16PX; color: #333; em { display: inline-block; width: 16PX; height: 16PX; background: url(../../public/index/index_42.png) no-repeat; vertical-align: -3PX; } } &:nth-child(1), &:nth-child(2), &:nth-child(3) { a { em { background: url(../../public/index/index_31.png) no-repeat; vertical-align: -3PX; } } } } } } } } @media screen and (min-width: 801px) and (max-width: 1400px) { .part1 { font-family: '微软雅黑'; width: 100%; margin: 20PX auto; display: flex; justify-content: space-between; padding: 0 5PX; box-sizing: border-box; .part1Left { width: 49%; .el-carousel { position: relative; span { display: block; width: 100%; height: 75PX; line-height: 50PX; background-color: rgba(0, 0, 0, 0.5); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: 15PX; text-align: center; } // 左右箭头按钮 .el-carousel__arrow--right :deep(.class-name), .el-carousel__arrow--left :deep(.class-name) { width: 68PX; height: 68PX; } img { width: 100%; height: 500PX; } //左右箭头图片 :deep(.el-icon svg) { height: 1em; width: 1em; background-color: transparent; } :deep(.el-carousel__arrow) { border-radius: 0; background-color: transparent; } :deep(.el-carousel__arrow i) { font-size: 68PX !important; } // 箭头按钮距离左右边框的距离 :deep(.el-carousel__arrow--left) { left: -15PX; left: 10PX; } :deep(.el-carousel__arrow--right) { right: -15PX; right: 10PX; } :deep(.el-carousel__indicators--horizontal) { bottom: -18PX; bottom: -10PX; left: 50%; transform: translateX(-50%); } // 指示器按钮 :deep(.el-carousel__button) { width: 20px; height: 8PX; border-radius: 4PX; border: none; opacity: 1; background-color: #ff9b9b; } :deep(.is-active .el-carousel__button) { // 指示器激活按钮 background: #ff0024; } :deep(.el-carousel__container) { height: 100%; } :deep(.custom-indicators) { position: absolute; bottom: 10PX; left: 50%; transform: translateX(-50%); } // 将指示器的所有样式都不显示 // :deep(.el-carousel__indicators) { // display: none; // } } } .part1Right { width: 49%; .part1Right_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part1Right_content { width: 100%; div { width: 100%; height: 43PX; line-height: 38PX; list-style-position: inside; list-style-image: url(../../public/index/index_42.png); border-bottom: 1PX solid #ccc; &:last-child { margin-bottom: 0; } a { font-size: 16PX; color: #333; em { display: inline-block; width: 16PX; height: 16PX; background: url(../../public/index/index_42.png) no-repeat; vertical-align: -3PX; } } &:nth-child(1), &:nth-child(2), &:nth-child(3) { a { em { background: url(../../public/index/index_31.png) no-repeat; vertical-align: -3PX; } } } } } } } } @media screen and (max-width: 800px) { .part1 { font-family: '微软雅黑'; width: 100%; margin: 40px auto; padding: 0 20px; box-sizing: border-box; .part1Left { width: 100%; height: 190PX; margin-bottom: 40px; .el-carousel { position: relative; height: 260PX; span { display: block; width: 100%; height: 75px; line-height: 75px; background-color: rgba(0, 0, 0, 0.5); position: absolute; bottom: 6PX; // left: 50%; // transform: translateX(-50%); color: #fff; font-size: 30px; text-align: center; } // 左右箭头按钮 .el-carousel__arrow--right :deep(.class-name), .el-carousel__arrow--left :deep(.class-name) { width: 68PX; height: 68PX; } img { width: 100%; height: 190PX; } //左右箭头图片 :deep(.el-icon svg) { display: none; height: 1em; width: 1em; background-color: transparent; } :deep(.el-carousel__arrow) { border-radius: 0; background-color: transparent; } :deep(.el-carousel__arrow i) { font-size: 68PX !important; } // 箭头按钮距离左右边框的距离 :deep(.el-carousel__arrow--left) { left: -15PX; left: 10PX; } :deep(.el-carousel__arrow--right) { right: -15PX; right: 10PX; } :deep(.el-carousel__indicators--horizontal) { bottom: -18PX; bottom: -10PX; left: 50%; transform: translateX(-50%); } // 指示器按钮 :deep(.el-carousel__button) { width: 50PX; height: 8PX; border-radius: 4PX; border: none; opacity: 1; background-color: #ff9b9b; } :deep(.is-active .el-carousel__button) { // 指示器激活按钮 background: #ff0024; } :deep(.el-carousel__container) { height: 100%; } :deep(.custom-indicators) { position: absolute; bottom: 10PX; left: 50%; transform: translateX(-50%); } // 将指示器的所有样式都不显示 :deep(.el-carousel__indicators) { display: none; } } :deep(.el-carousel__item) { display: inline-block; width: 100%; height: 41%; overflow: hidden; position: absolute; top: 0; left: 0; } } .part1Right { width: 100%; .part1Right_title { width: 100%; height: 80px; overflow: hidden; border-bottom: solid 4px #b41c2a; a { display: block; width: 214px; height: 80px; line-height: 80px; background: #b41c2a; text-align: center; color: #fff; font-size: 40px; font-weight: bold; border-top-left-radius: 20px; border-top-right-radius: 20px; } } .part1Right_content { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; div { width: 48%; height: 80px; line-height: 80px; list-style-position: inside; list-style-image: url(../../public/index/index_42.png); border-bottom: 2px solid #ccc; &:last-child { margin-bottom: 0; } a { font-size: 32px; color: #333; em { display: inline-block; width: 32px; height: 32px; background: url(../../public/index/index_42.png) no-repeat; vertical-align: -6px; } } &:nth-child(1), &:nth-child(2), &:nth-child(3) { a { em { background: url(../../public/index/index_31.png) no-repeat; vertical-align: -6px; } } } } } } } } // 第二部分 @media screen and (min-width: 1401px) { .part2 { font-family: '微软雅黑'; width: 1400PX; margin: 20PX auto; display: flex; justify-content: space-between; .part2_left { width: 30%; .part2_left_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part2_left_content { width: 100%; div { width: 100%; height: 43PX; line-height: 38PX; list-style-position: inside; list-style-image: url(../../public/index/index_42.png); border-bottom: 1PX solid #ccc; &:last-child { margin-bottom: 0; } a { font-size: 16PX; color: #333; em { display: inline-block; width: 16PX; height: 16PX; background: url(../../public/index/index_42.png) no-repeat; vertical-align: -3PX; } } &:nth-child(1), &:nth-child(2), &:nth-child(3) { a { em { background: url(../../public/index/index_31.png) no-repeat; vertical-align: -3PX; } } } } } } .part2_right { width: 68%; .part2_right_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part2_right_content { padding: 0 10PX; .part2_right_contentItem { width: 100%; height: auto; overflow: hidden; padding: 21PX 0; border-bottom: 1PX solid #f2f2f2; a { display: flex; img { width: 175PX; height: 92PX; margin-right: 20PX; } .right_text { .left_text_title { display: block; width: 100%; line-height: 30PX; overflow: hidden; font-size: 18PX; color: #000; font-weight: bold; } .left_text_desc { width: 100%; height: 60PX; line-height: 20PX; overflow: hidden; font-size: 14PX; color: #7d7d7d; text-indent: 28PX; } } } } } } } } @media screen and (min-width: 801px) and (max-width: 1400px) { .part2 { font-family: '微软雅黑'; width: 100%; margin: 20PX auto; display: flex; justify-content: space-between; padding: 0 5PX; box-sizing: border-box; .part2_left { width: 30%; .part2_left_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part2_left_content { width: 100%; div { width: 100%; height: 43PX; line-height: 38PX; list-style-position: inside; list-style-image: url(../../public/index/index_42.png); border-bottom: 1PX solid #ccc; &:last-child { margin-bottom: 0; } a { font-size: 16PX; color: #333; em { display: inline-block; width: 16PX; height: 16PX; background: url(../../public/index/index_42.png) no-repeat; vertical-align: -3PX; } } &:nth-child(1), &:nth-child(2), &:nth-child(3) { a { em { background: url(../../public/index/index_31.png) no-repeat; vertical-align: -3PX; } } } } } } .part2_right { width: 68%; .part2_right_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part2_right_content { padding: 0 10PX; .part2_right_contentItem { width: 100%; height: auto; overflow: hidden; padding: 21PX 0; border-bottom: 1PX solid #f2f2f2; a { display: flex; img { width: 175PX; height: 92PX; margin-right: 20PX; } .right_text { .left_text_title { display: block; width: 100%; line-height: 30PX; overflow: hidden; font-size: 18PX; color: #000; font-weight: bold; } .left_text_desc { width: 100%; height: 60PX; line-height: 20PX; overflow: hidden; font-size: 14PX; color: #7d7d7d; text-indent: 28PX; } } } } } } } } @media screen and (max-width: 800px) { .part2 { font-family: '微软雅黑'; width: 100%; margin: 20px auto; padding: 0 20px; box-sizing: border-box; .part2_left { width: 100%; margin-bottom: 40px; .part2_left_title { width: 100%; height: 80px; overflow: hidden; border-bottom: solid 2px #b41c2a; a { display: block; width: 214px; height: 80px; line-height: 80px; background: #b41c2a; text-align: center; color: #fff; font-size: 40px; font-weight: bold; border-top-left-radius: 20px; border-top-right-radius: 20px; } } .part2_left_content { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; div { width: 48%; height: 80px; line-height: 80px; list-style-position: inside; list-style-image: url(../../public/index/index_42.png); border-bottom: 1px solid #ccc; &:last-child { margin-bottom: 0; } a { font-size: 32px; color: #333; em { display: inline-block; width: 32px; height: 32px; background: url(../../public/index/index_42.png) no-repeat; vertical-align: -6px; } } &:nth-child(1), &:nth-child(2), &:nth-child(3) { a { em { background: url(../../public/index/index_31.png) no-repeat; vertical-align: -6px; } } } } } } .part2_right { width: 100%; .part2_right_title { width: 100%; height: 80px; overflow: hidden; border-bottom: solid 2px #b41c2a; a { display: block; width: 214px; height: 80px; line-height: 80px; background: #b41c2a; text-align: center; color: #fff; font-size: 40px; font-weight: bold; border-top-left-radius: 20px; border-top-right-radius: 20px; } } .part2_right_content { padding: 0 20px; box-sizing: border-box; .part2_right_contentItem { width: 100%; height: auto; overflow: hidden; padding: 20px 0; border-bottom: 2px solid #f2f2f2; a { img { width: 100%; height: 300px; margin-right: 20px; } .right_text { .left_text_title { display: block; width: 100%; line-height: 60px; overflow: hidden; font-size: 32px; color: #000; font-weight: bold; } .left_text_desc { width: 100%; height: 120px; line-height: 40px; overflow: hidden; font-size: 28px; color: #7d7d7d; text-indent: 56px; } } } } } } } } // 第三部分 @media screen and (min-width: 1401px) { .part3 { width: 1400PX; margin: 20PX auto; .part3_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; margin-bottom: 20PX; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part3_content { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; .part3_contentList { width: 23%; height: auto; overflow: hidden; border: 1PX solid #ccc; margin-bottom: 20PX; a { img { display: block; width: 100%; height: 175PX; } .contentListText { padding: 0 5PX; box-sizing: border-box; .contentListText_title { font-family: '微软雅黑'; display: block; width: 100%; height: 50PX; line-height: 50PX; overflow: hidden; font-size: 16PX; color: #333; font-weight: bold; padding: 0 5PX; box-sizing: border-box; } .contentListText_desc { font-family: '微软雅黑'; width: 100%; height: 60PX; line-height: 20PX; font-size: 13PX; color: #727272; text-indent: 26PX; padding: 0 5PX; box-sizing: border-box; } } } &:hover { border: 1PX solid #ff0024; } &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8) { margin-bottom: 0; } } } } } @media screen and (min-width: 801px) and (max-width: 1400px) { .part3 { width: 100%; margin: 20PX auto; padding: 0 5PX; box-sizing: border-box; .part3_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; margin-bottom: 20PX; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part3_content { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; .part3_contentList { width: 23%; height: auto; overflow: hidden; border: 1PX solid #ccc; margin-bottom: 20PX; a { img { display: block; width: 100%; height: 175PX; } .contentListText { padding: 0 5PX; box-sizing: border-box; .contentListText_title { font-family: '微软雅黑'; display: block; width: 100%; height: 50PX; line-height: 50PX; overflow: hidden; font-size: 16PX; color: #333; font-weight: bold; padding: 0 5PX; box-sizing: border-box; } .contentListText_desc { font-family: '微软雅黑'; width: 100%; height: 60PX; line-height: 20PX; font-size: 13PX; color: #727272; text-indent: 26PX; padding: 0 5PX; box-sizing: border-box; } } } &:hover { border: 1PX solid #ff0024; } &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8) { margin-bottom: 0; } } } } } @media screen and (max-width: 800px) { .part3 { width: 100%; margin: 40px auto; padding: 0 20px; box-sizing: border-box; .part3_title { width: 100%; height: 80px; overflow: hidden; border-bottom: solid 2px #b41c2a; margin-bottom: 20px; a { display: block; width: 214px; height: 80px; line-height: 80px; background: #b41c2a; text-align: center; color: #fff; font-size: 40px; font-weight: bold; border-top-left-radius: 20px; border-top-right-radius: 20px; } } .part3_content { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; .part3_contentList { width: 48%; height: auto; overflow: hidden; border: 2px solid #ccc; margin-bottom: 40px; a { img { display: block; width: 100%; height: 186px; } .contentListText { padding: 0 10px; box-sizing: border-box; .contentListText_title { font-family: '微软雅黑'; display: block; width: 100%; height: 80px; line-height: 80px; overflow: hidden; font-size: 32px; color: #333; font-weight: bold; padding: 0 10px; box-sizing: border-box; } .contentListText_desc { font-family: '微软雅黑'; width: 100%; height: 120px; line-height: 40px; font-size: 26px; color: #727272; text-indent: 52px; padding: 0 10px; box-sizing: border-box; } } } &:hover { border: 2px solid #ff0024; } &:nth-child(7), &:nth-child(8) { margin-bottom: 0; } } } } } // 第四部分 @media screen and (min-width: 1401px) { .part4 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: 1400PX; margin: 0 auto; overflow: hidden; display: flex; justify-content: space-between; // margin-bottom: 500px; .part4Left { width: 30%; margin-bottom: 0; .part4Left_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; margin-bottom: 20PX; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part4Left_content { .part4Left_contentList { width: 100%; height: auto; overflow: hidden; padding: 10PX 0; border-bottom: 1PX dashed #ccc; box-sizing: border-box; margin-bottom: 10PX; a { .contentTitle { display: block; width: 100%; height: 36PX; overflow: hidden; line-height: 36PX; font-size: 18PX; color: #333; font-weight: bold; } .contentDesc { display: block; width: 100%; max-height: 66PX; line-height: 22PX; overflow: hidden; font-size: 14PX; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .textdetail { float: right; color: #ff0024; font-size: 14PX; } } &:last-child { margin-bottom: 0; } } } } .part4Right { width: 68%; .part4Right_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; margin-bottom: 20PX; box-sizing: border-box; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part4Right_content { width: 100%; display: flex; justify-content: space-between; .rightContent_img { width: 50%; .rightImg1 { width: 100%; height: 167PX; position: relative; margin-bottom: 10PX; a { img { width: 100%; height: 167PX; } span { display: block; width: 100%; line-height: 30PX; overflow: hidden; background: rgba(0, 0, 0, .5); font-size: 15PX; color: #fff; padding: 0 10PX; box-sizing: border-box; position: absolute; bottom: 0; left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } .rightImg2 { width: 100%; height: 120PX; margin-bottom: 10PX; box-sizing: border-box; display: flex; justify-content: space-between; div { width: 49%; position: relative; a { img { width: 100%; height: 120PX; } span { display: block; width: 100%; line-height: 30PX; overflow: hidden; background: rgba(0, 0, 0, .5); font-size: 15PX; color: #fff; padding: 0 10PX; box-sizing: border-box; position: absolute; bottom: 0; left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } } .rightImg3 { width: 100%; height: 120PX; margin-bottom: 10PX; display: flex; justify-content: space-between; div { width: 49%; position: relative; a { img { width: 100%; height: 120PX; } span { display: block; width: 100%; line-height: 30PX; overflow: hidden; background: rgba(0, 0, 0, .5); font-size: 15PX; color: #fff; padding: 0 10PX; box-sizing: border-box; position: absolute; bottom: 0; left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } } .rightImg4 { width: 100%; height: 167PX; position: relative; a { img { width: 100%; height: 167PX; } span { display: block; width: 100%; line-height: 30PX; overflow: hidden; background: rgba(0, 0, 0, .5); font-size: 15PX; color: #fff; padding: 0 10PX; box-sizing: border-box; position: absolute; bottom: 0; left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } } .rightContent_text { width: 45%; .rightContent_text_item { width: 100%; height: 39PX; line-height: 39PX; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; a { font-size: 16PX; color: #000; } &:nth-child(5n+1) { margin-top: 10PX; a { color: #ff0024; } } &:first-child { margin-top: 0PX; } } } } } } } @media screen and (min-width: 801px) and (max-width: 1400px) { .part4 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: 100%; margin: 0 auto; overflow: hidden; display: flex; justify-content: space-between; padding: 0 5PX; box-sizing: border-box; .part4Left { width: 30%; margin-bottom: 0; .part4Left_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; margin-bottom: 20PX; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part4Left_content { .part4Left_contentList { width: 100%; height: auto; overflow: hidden; padding: 10PX 0; border-bottom: 1PX dashed #ccc; box-sizing: border-box; margin-bottom: 10PX; a { .contentTitle { display: block; width: 100%; height: 36PX; overflow: hidden; line-height: 36PX; font-size: 18PX; color: #333; font-weight: bold; } .contentDesc { display: block; width: 100%; max-height: 66PX; line-height: 22PX; overflow: hidden; font-size: 14PX; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .textdetail { float: right; color: #ff0024; font-size: 14PX; } } &:last-child { margin-bottom: 0; } } } } .part4Right { width: 68%; .part4Right_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; margin-bottom: 20PX; box-sizing: border-box; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part4Right_content { width: 100%; display: flex; justify-content: space-between; .rightContent_img { width: 50%; .rightImg1 { width: 100%; height: 167PX; position: relative; margin-bottom: 10PX; a { img { width: 100%; height: 167PX; } span { display: block; width: 100%; line-height: 30PX; overflow: hidden; background: rgba(0, 0, 0, .5); font-size: 15PX; color: #fff; padding: 0 10PX; box-sizing: border-box; position: absolute; bottom: 0; left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } .rightImg2 { width: 100%; height: 120PX; margin-bottom: 10PX; box-sizing: border-box; display: flex; justify-content: space-between; div { width: 49%; position: relative; a { img { width: 100%; height: 120PX; } span { display: block; width: 100%; line-height: 30PX; overflow: hidden; background: rgba(0, 0, 0, .5); font-size: 15PX; color: #fff; padding: 0 10PX; box-sizing: border-box; position: absolute; bottom: 0; left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } } .rightImg3 { width: 100%; height: 120PX; margin-bottom: 10PX; display: flex; justify-content: space-between; div { width: 49%; position: relative; a { img { width: 100%; height: 120PX; } span { display: block; width: 100%; line-height: 30PX; overflow: hidden; background: rgba(0, 0, 0, .5); font-size: 15PX; color: #fff; padding: 0 10PX; box-sizing: border-box; position: absolute; bottom: 0; left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } } .rightImg4 { width: 100%; height: 167PX; position: relative; a { img { width: 100%; height: 167PX; } span { display: block; width: 100%; line-height: 30PX; overflow: hidden; background: rgba(0, 0, 0, .5); font-size: 15PX; color: #fff; padding: 0 10PX; box-sizing: border-box; position: absolute; bottom: 0; left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } } .rightContent_text { width: 45%; .rightContent_text_item { width: 100%; height: 39PX; line-height: 39PX; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; a { font-size: 16PX; color: #000; } &:nth-child(5n+1) { margin-top: 10PX; a { color: #ff0024; } } &:first-child { margin-top: 0PX; } } } } } } } @media screen and (max-width: 800px) { .part4 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: 100%; margin: 0 auto; overflow: hidden; padding: 0 20px; box-sizing: border-box; .part4Left { width: 100%; margin-bottom: 20px; .part4Left_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; margin-bottom: 20px; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part4Left_content { .part4Left_contentList { width: 100%; height: auto; overflow: hidden; padding: 20px 0; border-bottom: 2px dashed #ccc; box-sizing: border-box; a { .contentTitle { display: block; width: 100%; height: 72px; overflow: hidden; line-height: 72px; font-size: 32px; color: #333; font-weight: bold; } .contentDesc { display: block; width: 100%; max-height: 132px; line-height: 44px; overflow: hidden; font-size: 28px; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .textdetail { float: right; color: #ff0024; font-size: 28px; } } &:last-child { margin-bottom: 0; } } } } .part4Right { width: 100%; .part4Right_title { width: 100%; height: 80px; overflow: hidden; border-bottom: solid 2px #b41c2a; margin-bottom: 20px; box-sizing: border-box; a { display: block; width: 214px; height: 80px; line-height: 80px; background: #b41c2a; text-align: center; color: #fff; font-size: 40px; font-weight: bold; border-top-left-radius: 20px; border-top-right-radius: 20px; } } .part4Right_content { width: 100%; display: flex; justify-content: space-between; .rightContent_img { width: 50%; .rightImg1 { width: 100%; height: 186px; position: relative; margin-bottom: 20px; a { img { width: 100%; height: 186px; } span { display: block; width: 100%; line-height: 60px; overflow: hidden; background: rgba(0, 0, 0, .5); font-size: 30px; color: #fff; padding: 0 20px; box-sizing: border-box; position: absolute; bottom: 0; left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } .rightImg2 { width: 100%; height: 150px; margin-bottom: 20px; box-sizing: border-box; display: flex; justify-content: space-between; div { width: 49%; position: relative; a { img { width: 100%; height: 150px; } span { display: block; width: 100%; line-height: 60px; overflow: hidden; background: rgba(0, 0, 0, .5); font-size: 30px; color: #fff; padding: 0 20px; box-sizing: border-box; position: absolute; bottom: 0; left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } } .rightImg3 { width: 100%; height: 150px; margin-bottom: 20px; display: flex; justify-content: space-between; div { width: 49%; position: relative; a { position: static; img { width: 100%; height: 150px; } span { display: block; width: 100%; line-height: 30PX; overflow: hidden; background: rgba(0, 0, 0, .5); font-size: 15PX; color: #fff; padding: 0 10PX; box-sizing: border-box; position: absolute; bottom: 0; left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } } .rightImg4 { width: 100%; height: 186px; position: relative; a { img { width: 100%; height: 186px; } span { display: block; width: 100%; line-height: 30PX; overflow: hidden; background: rgba(0, 0, 0, .5); font-size: 15PX; color: #fff; padding: 0 10PX; box-sizing: border-box; position: absolute; bottom: 0; left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } } .rightContent_text { width: 45%; .rightContent_text_item { width: 100%; height: 46px; line-height: 46px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; a { font-size: 30px; color: #333; } &:nth-child(5n+1) { margin-top: 20px; a { color: #ff0024; } } &:first-child { margin-top: 0px; } } } } } } } // 第五部分 @media screen and (min-width: 1401px) { .part5 { width: 1400PX; height: auto; margin: 0 auto; margin-top: 20PX; box-sizing: border-box; overflow: hidden; .part5Left { width: 68%; float: left; margin-right: 2%; margin-top: 0PX; .part5Left_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; a { display: inline-block; width: 107PX; height: 40PX; line-height: 40PX; text-align: center; color: #b41c2a; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } .active { background: #b41c2a; color: #fff; } } .part5Left_content { width: 100%; height: auto; overflow: hidden; .part5Left_content_item { width: 100%; height: auto; overflow: hidden; padding: 10PX 0 0; border-bottom: solid 1PX #ccc; a { display: flex; img { min-width: 220PX; height: 100PX; padding-bottom: 10PX; margin-right: 11PX; } .part5LeftContentText { .title { width: 100%; height: 34PX; line-height: 34PX; overflow: hidden; font-size: 16PX; color: #b41c2a; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .desc { width: 100%; height: 66PX; line-height: 22PX; overflow: hidden; font-size: 13PX; color: #333; } } } } } } .part5Right { width: 29%; float: left; .part5_right_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; margin-bottom: 20PX; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part5_right_content { width: 100%; height: auto; overflow: hidden; .part5Right_content_item { width: 100%; height: 40PX; line-height: 40PX; border-bottom: 2PX solid #dcdcdc; a { width: 100%; .textNumber { display: block; width: 40PX; height: 40PX; text-align: center; line-height: 40PX; border-bottom: 2PX solid #b41c2a; font-size: 18PX; color: #b41c2a; font-weight: bold; position: absolute; } .textTitle { display: inline-block; width: 88%; font-size: 16PX; color: #333; padding-left: 50PX; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } } } } } } } @media screen and (min-width: 801px) and (max-width: 1400px) { .part5 { width: 100%; height: auto; margin: 0 auto; margin-top: 20PX; box-sizing: border-box; overflow: hidden; padding: 0 5PX; box-sizing: border-box; .part5Left { width: 68%; float: left; margin-right: 2%; margin-top: 0PX; .part5Left_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; a { display: inline-block; width: 107PX; height: 40PX; line-height: 40PX; text-align: center; color: #b41c2a; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } .active { background: #b41c2a; color: #fff; } } .part5Left_content { width: 100%; height: auto; overflow: hidden; .part5Left_content_item { width: 100%; height: auto; overflow: hidden; padding: 10PX 0 0; border-bottom: solid 1PX #ccc; a { display: flex; img { min-width: 200PX; height: 100PX; padding-bottom: 10PX; margin-right: 11PX; } .part5LeftContentText { width: calc(100% - 200PX); .title { width: 100%; height: 34PX; line-height: 34PX; overflow: hidden; font-size: 16PX; color: #b41c2a; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .desc { width: 100%; height: 66PX; line-height: 22PX; overflow: hidden; font-size: 13PX; color: #333; } } } } } } .part5Right { width: 29%; float: left; .part5_right_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; margin-bottom: 20PX; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part5_right_content { width: 100%; height: auto; overflow: hidden; .part5Right_content_item { width: 100%; height: 40PX; line-height: 40PX; border-bottom: 2PX solid #dcdcdc; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; a { width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; .textNumber { display: block; width: 40PX; height: 40PX; text-align: center; line-height: 40PX; border-bottom: 2PX solid #b41c2a; font-size: 18PX; color: #b41c2a; font-weight: bold; position: absolute; } .textTitle { display: inline-block; width: 85%; font-size: 16PX; color: #333; padding-left: 50PX; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } } } } } } } @media screen and (max-width: 800px) { .part5 { width: 100%; height: auto; margin: 0 auto; margin-top: 40px; padding: 0 20px; box-sizing: border-box; overflow: hidden; .part5Left { width: 100%; margin-top: 0px; margin-bottom: 40px; .part5Left_title { width: 100%; height: 80px; overflow: hidden; border-bottom: solid 2px #b41c2a; a { display: inline-block; width: 214px; height: 80px; line-height: 80px; text-align: center; color: #b41c2a; font-size: 40px; font-weight: bold; border-top-left-radius: 20px; border-top-right-radius: 20px; } .active { background: #b41c2a; color: #fff; } } .part5Left_content { width: 100%; height: auto; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; .part5Left_content_item { width: 48%; height: auto; overflow: hidden; padding: 20px 0 0; border-bottom: solid 2px #ccc; a { img { min-width: 100%; height: 166px; padding-bottom: 20px; } .part5LeftContentText { .title { width: 100%; height: 68px; line-height: 68px; overflow: hidden; font-size: 32px; color: #b41c2a; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .desc { width: 100%; height: 132px; line-height: 44px; overflow: hidden; font-size: 26px; color: #333; } } } } } } .part5Right { width: 100%; .part5_right_title { width: 100%; height: 80px; overflow: hidden; border-bottom: solid 2px #b41c2a; margin-bottom: 20px; a { display: block; width: 214px; height: 80px; line-height: 80px; background: #b41c2a; text-align: center; color: #fff; font-size: 40px; font-weight: bold; border-top-left-radius: 20px; border-top-right-radius: 20px; } } .part5_right_content { width: 100%; height: auto; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; .part5Right_content_item { width: 49%; height: 80px; line-height: 80px; border-bottom: 2px solid #dcdcdc; a { width: 100%; .textNumber { display: block; width: 80px; height: 80px; text-align: center; line-height: 80px; border-bottom: 2px solid #b41c2a; font-size: 32px; color: #b41c2a; font-weight: bold; position: absolute; } .textTitle { width: 88%; font-size: 32px; color: #333; padding-left: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } } } } } } } // 第六部分 @media screen and (min-width: 1401px) { .part6 { width: 1400PX; height: auto; margin: 20PX auto 0; overflow: hidden; display: flex; justify-content: space-between; .part6Left { width: 68%; margin-top: 0PX; .part6_left_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; margin-bottom: 20PX; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part6_left_content { width: 100%; height: auto; overflow: hidden; .part6Left_content_item { width: 100%; height: auto; overflow: hidden; padding: 0PX 0 11PX; margin-bottom: 10PX; border-bottom: 1PX solid #ccc; a { display: flex; justify-content: space-between; img { width: 175PX; height: 92PX; overflow: hidden; margin-right: 11PX; } .part6LeftContentText { width: 760PX; height: auto; overflow: hidden; .title { display: block; width: 100%; line-height: 30PX; overflow: hidden; font-size: 18PX; color: #333; font-weight: bold; } .desc { height: 60PX; line-height: 20PX; font-size: 14PX; color: #666; } } } } } } .part6Right { width: 30%; .part6_right_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; margin-bottom: 10PX; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part6_right_content { .part6Right_content_item { width: 100%; height: auto; overflow: hidden; padding: 10PX 0; border-bottom: 1PX dashed #ccc; box-sizing: border-box; a { .part6contentTitle { display: block; width: 100%; height: 36PX; overflow: hidden; line-height: 36PX; font-size: 18PX; color: #333; font-weight: bold; } .part6contentDesc { display: block; width: 100%; max-height: 66PX; line-height: 22PX; overflow: hidden; font-size: 14PX; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .part6textdetail { float: right; color: #ff0024; font-size: 14PX; } } } } } } } @media screen and (min-width: 801px) and (max-width: 1400px) { .part6 { width: 100%; height: auto; margin: 20PX auto 0; overflow: hidden; display: flex; justify-content: space-between; padding: 0 5PX; box-sizing: border-box; .part6Left { width: 68%; margin-top: 0PX; .part6_left_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; margin-bottom: 20PX; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part6_left_content { width: 100%; height: auto; overflow: hidden; .part6Left_content_item { width: 100%; height: auto; overflow: hidden; padding: 0PX 0 11PX; margin-bottom: 10PX; border-bottom: 1PX solid #ccc; a { display: flex; justify-content: space-between; img { width: 175PX; height: 92PX; overflow: hidden; margin-right: 11PX; } .part6LeftContentText { width: 760PX; height: auto; overflow: hidden; .title { display: block; width: 100%; line-height: 30PX; overflow: hidden; font-size: 18PX; color: #333; font-weight: bold; } .desc { height: 60PX; line-height: 20PX; font-size: 14PX; color: #666; } } } } } } .part6Right { width: 30%; .part6_right_title { width: 100%; height: 40PX; overflow: hidden; border-bottom: solid 2PX #b41c2a; margin-bottom: 10PX; a { display: block; width: 107PX; height: 40PX; line-height: 40PX; background: #b41c2a; text-align: center; color: #fff; font-size: 20PX; font-weight: bold; border-top-left-radius: 10PX; border-top-right-radius: 10PX; } } .part6_right_content { .part6Right_content_item { width: 100%; height: auto; overflow: hidden; padding: 10PX 0; border-bottom: 1PX dashed #ccc; box-sizing: border-box; a { .part6contentTitle { display: block; width: 100%; height: 36PX; overflow: hidden; line-height: 36PX; font-size: 18PX; color: #333; font-weight: bold; } .part6contentDesc { display: block; width: 100%; max-height: 66PX; line-height: 22PX; overflow: hidden; font-size: 14PX; color: #666; } .part6textdetail { float: right; color: #ff0024; font-size: 14PX; } } } } } } } @media screen and (max-width: 800px) { .part6 { width: 100%; height: auto; margin: 40px auto; overflow: hidden; padding: 0 20px; box-sizing: border-box; .part6Left { width: 100%; .part6_left_title { width: 100%; height: 80px; overflow: hidden; border-bottom: solid 2px #b41c2a; margin-bottom: 40px; a { display: block; width: 214px; height: 80px; line-height: 80px; background: #b41c2a; text-align: center; color: #fff; font-size: 40px; font-weight: bold; border-top-left-radius: 20px; border-top-right-radius: 20px; } } .part6_left_content { width: 100%; height: auto; overflow: hidden; .part6Left_content_item { width: 100%; height: auto; overflow: hidden; padding: 0px 0 22px; margin-bottom: 20px; border-bottom: 1px solid #ccc; a { img { width: 100%; height: 260px; overflow: hidden; margin-right: 22px; } .part6LeftContentText { width: 100%; height: auto; overflow: hidden; .title { display: block; width: 100%; line-height: 60px; overflow: hidden; font-size: 32px; color: #333; font-weight: bold; } .desc { height: 120px; line-height: 40px; font-size: 28px; color: #666; } } } } } } .part6Right { width: 100%; .part6_right_title { width: 100%; height: 80px; overflow: hidden; border-bottom: solid 2px #b41c2a; margin-bottom: 20px; a { display: block; width: 214px; height: 80px; line-height: 80px; background: #b41c2a; text-align: center; color: #fff; font-size: 40px; font-weight: bold; border-top-left-radius: 20px; border-top-right-radius: 20px; } } .part6_right_content { .part6Right_content_item { width: 100%; height: auto; overflow: hidden; padding: 20px 0; border-bottom: 1px dashed #ccc; box-sizing: border-box; a { .part6contentTitle { display: block; width: 100%; height: 72px; line-height: 72px; font-size: 32px; color: #333; font-weight: bold; overflow: hidden; } .part6contentDesc { display: block; width: 100%; max-height: 132px; line-height: 44px; overflow: hidden; font-size: 28px; color: #666; } .part6textdetail { float: right; color: #ff0024; font-size: 28px; } } } } } } } .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; }