@media screen and (min-width: 1401px) { #newsList { width: 100%; overflow: hidden; font-family: "微软雅黑", "microsoft yahei"; } //导航条 .breadcrumb { width: 100%; height: 30PX; line-height: 30PX; margin-top: 20PX; margin-bottom: 10PX; .inner { width: 1400PX; border: 1PX solid #ccc; color: #000; font-size: 16PX; margin: 0 auto; .location { margin-right: 20PX; width: 100PX; height: 22PX; font-family: Microsoft YaHei, Microsoft YaHei; font-weight: 400; font-size: 16PX; color: #000; line-height: 23PX; text-align: left; font-style: normal; text-transform: none; } } :deep(.el-breadcrumb__separator) { color: #000; font-weight: bold; margin: 0 9PX; } :deep(.el-breadcrumb) { display: inline-block; vertical-align: -4PX; } :deep(.el-breadcrumb__inner a), :deep(.el-breadcrumb__inner.is-link) { color: #000; font-weight: 400; text-decoration: none; transition: var(--el-transition-color); } :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner), :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a), :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover), :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover) { color: #000; } span { font-weight: 400; font-size: 16PX; color: #000; line-height: 23PX; text-align: left; font-style: normal; text-transform: none; } } // 资讯列表 .newsList { width: 100%; overflow: hidden; margin-bottom: 10PX; .inner { width: 1400PX; margin: 0 auto; display: flex; justify-content: space-between; // 左侧列表 .innerLeft { width: 68%; margin-right: 28PX; .list { li { width: 100%; height: 150PX; padding: 20PX 0; box-sizing: border-box; border-bottom: 1PX dashed #ccc; a { width: 100%; .hasImg { display: flex; justify-content: flex-start; align-items: center; .itemImg { margin-right: 20PX; img { width: 160PX; height: 109PX; } } .itemText { width: calc(100% - 160PX); height: 109PX; box-sizing: border-box; .title { width: 100%; height: 40PX; line-height: 40PX; overflow: hidden; font-size: 20PX; color: #333; font-weight: 400; } .content { width: 100%; height: 69PX; line-height: 23PX; overflow: hidden; font-size: 14PX; color: #333; } } } .notHasImg { width: 100%; height: 109PX; box-sizing: border-box; .title { width: 100%; height: 40PX; line-height: 40PX; overflow: hidden; font-size: 20PX; color: #333; font-weight: 400; } .content { width: 100%; height: 69PX; line-height: 23PX; overflow: hidden; font-size: 14PX; color: #333; } } } } >li:hover>a { color: #158d9f; .hasImg { .itemText { .title { color: #158d9f; } .content { color: #158d9f; } } } .notHasImg { .title { color: #158d9f; } .content { color: #158d9f; } } } } // 分页器 .pagination { width: 100%; height: 34PX; margin-left: 141PX; display: flex; justify-content: center; margin: 20PX 0; padding: 20PX 0; // 鼠标移入后字体颜色 .el-pagination::v-deep :hover { color: #1aa0f7; } .el-pagination.is-background::v-deep .btn-next, .el-pagination.is-background::v-deep .btn-prev { width: 70PX; height: 34PX; margin: 0PX 10PX; border-radius: 4PX; } .el-pagination.is-background::v-deep .el-pager li { margin: 0PX 10PX; width: 38PX; height: 34PX; border-radius: 4PX; } .el-pagination.is-background::v-deep .btn-next.is-active, .el-pagination.is-background::v-deep .btn-prev.is-active, .el-pagination.is-background::v-deep .el-pager li.is-active { background-color: #1aa0f7; color: #fff; } } .pagination_pc_none { display: none; } } .innerRight { width: 30%; } } } //资讯推荐 .zixuntuijian { width: 100%; height: 290PX; margin-bottom: 70PX; .innerLeft { // 左侧 .zixunLeft { margin-right: 30PX; } .zixunRight, .zixunLeft { float: left; width: 380PX; height: 290PX; // 标题部分 >.title { width: 380PX; } >.title>h3 { height: 36PX; font-family: Source Han Sans, Source Han Sans; font-weight: bold; font-size: 24PX; color: #000000; line-height: 28PX; text-align: left; font-style: normal; text-transform: none; border-bottom: 1PX solid #139602; } >.title>h3>span { float: right; width: 56PX; height: 20PX; line-height: 24PX; font-weight: 400; font-size: 14PX; color: #999999; font-style: normal; text-transform: none; } .photo_text { >li:first-child { width: 380PX; height: 120PX; margin-top: 20PX; margin-bottom: 15PX; position: relative; >img { float: left; width: 160PX; height: 120PX; } >div { float: left; width: 220PX; height: 120PX; padding-left: 15PX; padding-top: 6PX; box-sizing: border-box; background-color: #f6f6f6; >h5 { width: 200PX; height: 54PX; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; font-family: Source Han Sans, Source Han Sans; font-weight: 500; font-size: 18PX; color: #333333; line-height: 26PX; text-align: left; font-style: normal; text-transform: none; } >p { width: 200PX; height: 22PX; line-height: 20PX; position: absolute; bottom: 5PX; right: 0; >span { display: inline-block; // width: 100PX; height: 18PX; font-family: Source Han Sans, Source Han Sans; font-weight: 400; font-size: 12PX; color: #999999; text-align: left; line-height: 14PX; font-style: normal; text-transform: none; } >span:last-child { // width: 90PX; text-align: right; margin-left: 20PX; } } } } >li { width: 380PX; height: 25PX; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 18PX; color: #333333; line-height: 21PX; text-align: left; font-style: normal; text-transform: none; margin-bottom: 10PX; em { display: inline-block; width: 8PX; height: 8PX; border-radius: 8PX; margin-right: 10PX; background-color: #d9d9d9; } } >li:hover { color: #139602; } >li:hover em { background-color: #139602; } } } } .innerRight { width: 381PX; height: 290PX; background-color: #fbfbfb; >.title { width: 380PX; height: 40PX; line-height: 40PX; border-top: 1PX solid #139602; border-bottom: 1PX solid #e7e7e7; >h4 { font-family: Microsoft YaHei, Microsoft YaHei; font-weight: 400; margin-left: 20PX; font-size: 20PX; color: #000000; text-align: left; font-style: normal; text-transform: none; >span { float: right; font-family: Microsoft YaHei, Microsoft YaHei; font-weight: 400; font-size: 14PX; margin-right: 10PX; color: #999999; text-align: left; font-style: normal; text-transform: none; } } } .rightList { height: 540PX; margin-top: 20PX; >li { height: 100PX; margin-bottom: 10PX; >img { width: 150PX; height: 100PX; } >p { width: 219PX; height: 100PX; padding-left: 12PX; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 16PX; color: #333333; line-height: 22PX; text-align: left; font-style: normal; text-transform: none; } >p:hover { box-shadow: 0 0 16PX 1PX rgba(0, 0, 0, 0.1); } } } } } } @media screen and (min-width: 801px) and (max-width: 1400px) { #newsList { width: 100%; overflow: hidden; font-family: "微软雅黑", "microsoft yahei"; } //导航条 .breadcrumb { width: 100%; height: 30PX; line-height: 30PX; margin-top: 20PX; margin-bottom: 10PX; .inner { width: 99%; margin: 0 auto; padding: 0 20PX; border: 1px solid #ccc; color: #000; font-size: 16PX; box-sizing: border-box; .location { margin-right: 20PX; width: 100PX; height: 22PX; font-family: Microsoft YaHei, Microsoft YaHei; font-weight: 400; font-size: 16PX; color: #000; line-height: 23PX; text-align: left; font-style: normal; text-transform: none; } } :deep(.el-breadcrumb__separator) { color: #000; font-weight: bold; margin: 0 9PX; } :deep(.el-breadcrumb) { display: inline-block; vertical-align: -4PX; } :deep(.el-breadcrumb__inner a), :deep(.el-breadcrumb__inner.is-link) { color: #000; font-weight: 400; text-decoration: none; transition: var(--el-transition-color); } :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner), :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a), :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover), :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover) { color: #000; } span { font-weight: 400; font-size: 16PX; color: #000; line-height: 23PX; text-align: left; font-style: normal; text-transform: none; } } // 资讯列表 .newsList { width: 100%; overflow: hidden; margin-bottom: 10PX; .inner { width: 100%; padding: 0 10PX; box-sizing: border-box; display: flex; justify-content: space-between; // 左侧列表 .innerLeft { width: 68%; // margin-right: 28PX; .list { li { width: 100%; height: 150PX; padding: 20PX 0; box-sizing: border-box; border-bottom: 1PX dashed #ccc; a { width: 100%; .hasImg { display: flex; justify-content: flex-start; align-items: center; .itemImg { margin-right: 20PX; img { width: 160PX; height: 109PX; } } .itemText { width: calc(100% - 160px); height: 109PX; box-sizing: border-box; .title { width: 100%; height: 40PX; line-height: 40PX; overflow: hidden; font-size: 20PX; color: #333; font-weight: 400; } .content { width: 100%; height: 69PX; line-height: 23PX; overflow: hidden; font-size: 14PX; color: #333; } } } .notHasImg { width: 100%; height: 109PX; box-sizing: border-box; .title { width: 100%; height: 40PX; line-height: 40PX; overflow: hidden; font-size: 20PX; color: #333; font-weight: 400; } .content { width: 100%; height: 69PX; line-height: 23PX; overflow: hidden; font-size: 14PX; color: #333; } } } } >li:hover>a { color: #158d9f; .hasImg { .itemText { .title { color: #158d9f; } .content { color: #158d9f; } } } .notHasImg { .title { color: #158d9f; } .content { color: #158d9f; } } } } // 分页器 .pagination { width: 100%; height: 34PX; margin-left: 141PX; display: flex; justify-content: center; margin: 20PX 0; padding: 20PX 0; // 鼠标移入后字体颜色 .el-pagination::v-deep :hover { color: #1aa0f7; } .el-pagination.is-background::v-deep .btn-next, .el-pagination.is-background::v-deep .btn-prev { width: 70PX; height: 34PX; margin: 0px 10PX; border-radius: 4PX; } .el-pagination.is-background::v-deep .el-pager li { margin: 0px 10PX; width: 38PX; height: 34PX; border-radius: 4PX; } .el-pagination.is-background::v-deep .btn-next.is-active, .el-pagination.is-background::v-deep .btn-prev.is-active, .el-pagination.is-background::v-deep .el-pager li.is-active { background-color: #1aa0f7; color: #fff; } } .pagination_pc_none { display: none; } } .innerRight { width: 30%; } } } //资讯推荐 .zixuntuijian { width: 100%; height: 290px; margin-bottom: 70px; .innerLeft { // 左侧 .zixunLeft { margin-right: 30px; } .zixunRight, .zixunLeft { float: left; width: 380px; height: 290px; // 标题部分 >.title { width: 380px; } >.title>h3 { height: 36px; font-family: Source Han Sans, Source Han Sans; font-weight: bold; font-size: 24px; color: #000000; line-height: 28px; text-align: left; font-style: normal; text-transform: none; border-bottom: 1px solid #139602; } >.title>h3>span { float: right; width: 56px; height: 20px; line-height: 24px; font-weight: 400; font-size: 14px; color: #999999; font-style: normal; text-transform: none; } .photo_text { >li:first-child { width: 380px; height: 120px; margin-top: 20px; margin-bottom: 15px; position: relative; >img { float: left; width: 160px; height: 120px; } >div { float: left; width: 220px; height: 120px; padding-left: 15px; padding-top: 6px; box-sizing: border-box; background-color: #f6f6f6; >h5 { width: 200px; height: 54px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; font-family: Source Han Sans, Source Han Sans; font-weight: 500; font-size: 18px; color: #333333; line-height: 26px; text-align: left; font-style: normal; text-transform: none; } >p { width: 200px; height: 22px; line-height: 20px; position: absolute; bottom: 5px; right: 0; >span { display: inline-block; // width: 100px; height: 18px; font-family: Source Han Sans, Source Han Sans; font-weight: 400; font-size: 12px; color: #999999; text-align: left; line-height: 14px; font-style: normal; text-transform: none; } >span:last-child { // width: 90px; text-align: right; margin-left: 20px; } } } } >li { width: 380px; height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 18px; color: #333333; line-height: 21px; text-align: left; font-style: normal; text-transform: none; margin-bottom: 10px; em { display: inline-block; width: 8px; height: 8px; border-radius: 8px; margin-right: 10px; background-color: #d9d9d9; } } >li:hover { color: #139602; } >li:hover em { background-color: #139602; } } } } .innerRight { width: 381px; height: 290px; background-color: #fbfbfb; >.title { width: 380px; height: 40px; line-height: 40px; border-top: 1px solid #139602; border-bottom: 1px solid #e7e7e7; >h4 { font-family: Microsoft YaHei, Microsoft YaHei; font-weight: 400; margin-left: 20px; font-size: 20px; color: #000000; text-align: left; font-style: normal; text-transform: none; >span { float: right; font-family: Microsoft YaHei, Microsoft YaHei; font-weight: 400; font-size: 14px; margin-right: 10px; color: #999999; text-align: left; font-style: normal; text-transform: none; } } } .rightList { height: 540px; margin-top: 20px; >li { height: 100px; margin-bottom: 10px; >img { width: 150px; height: 100px; } >p { width: 219px; height: 100px; padding-left: 12px; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 16px; color: #333333; line-height: 22px; text-align: left; font-style: normal; text-transform: none; } >p:hover { box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1); } } } } } } @media screen and (max-width: 800px) { #newsList { width: 100%; overflow: hidden; font-family: "微软雅黑", "microsoft yahei"; } //导航条 .breadcrumb { width: 100%; height: 60px; line-height: 60px; margin-top: 40px; margin-bottom: 20px; .inner { width: 100%; border: 2px solid #C6E9FF; color: #000; font-size: 32px; padding: 0 20px; box-sizing: border-box; .location { margin-right: 40px; width: 200px; height: 22px; font-family: Microsoft YaHei, Microsoft YaHei; font-weight: 400; font-size: 32px; color: #000; line-height: 46px; text-align: left; font-style: normal; text-transform: none; } } :deep(.el-breadcrumb__separator) { color: #000; font-weight: bold; margin: 0 18px; } :deep(.el-breadcrumb) { display: inline-block; vertical-align: -8px; } :deep(.el-breadcrumb__inner a), :deep(.el-breadcrumb__inner.is-link) { color: #000; font-weight: 400; text-decoration: none; transition: var(--el-transition-color); } :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner), :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a), :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover), :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover) { color: #000; } span { font-weight: 400; font-size: 32px; color: #000; line-height: 46px; text-align: left; font-style: normal; text-transform: none; } } // 资讯列表 .newsList { width: 100%; overflow: hidden; margin-bottom: 20px; .inner { width: 100%; padding: 0 20px; box-sizing: border-box; // 左侧列表 .innerLeft { width: 100%; .list { li { width: 100%; // height: 15px; padding: 20px 0; box-sizing: border-box; border-bottom: 2px dashed #ccc; a { width: 100%; .hasImg { // display: flex; // justify-content: flex-start; // align-items: center; .itemImg { width: 100%; // margin-right: 20px; img { width: 100%; height: 220px; } } .itemText { width: 100%; // height: 109px; box-sizing: border-box; .title { width: 100%; height: 80px; line-height: 80px; overflow: hidden; font-size: 40px; color: #333; font-weight: 400; } .content { width: 100%; // height: 140px; line-height: 46px; overflow: hidden; font-size: 28px; color: #333; } } } .notHasImg { width: 100%; // height: 109px; box-sizing: border-box; .title { width: 100%; height: 80px; line-height: 80px; overflow: hidden; font-size: 40px; color: #333; font-weight: 400; } .content { width: 100%; // height: 69px; line-height: 46px; overflow: hidden; font-size: 28px; color: #333; } } } } >li:hover>a { color: #158d9f; .hasImg { .itemText { .title { color: #158d9f; } .content { color: #158d9f; } } } .notHasImg { .title { color: #158d9f; } .content { color: #158d9f; } } } } // 分页器 .pagination { width: 100%; height: 68px; margin-left: 282px; display: flex; justify-content: center; margin: 40px 0; padding: 40px 0; // 鼠标移入后字体颜色 .el-pagination::v-deep :hover { color: #1aa0f7; } .el-pagination.is-background::v-deep .btn-next, .el-pagination.is-background::v-deep .btn-prev { width: 140px; height: 68px; margin: 0px 20px; border-radius: 8px; } .el-pagination.is-background::v-deep .el-pager li { margin: 0px 20px; width: 68px; height: 68px; border-radius: 8px; font-size: 28px; } .el-pagination.is-background::v-deep .btn-next.is-active, .el-pagination.is-background::v-deep .btn-prev.is-active, .el-pagination.is-background::v-deep .el-pager li.is-active { background-color: #1aa0f7; color: #fff; } } .pagination_phone_none { display: none; } } .innerRight { width: 100%; } } } //资讯推荐 .zixuntuijian { width: 100%; height: 290px; margin-bottom: 70px; .innerLeft { // 左侧 .zixunLeft { margin-right: 30px; } .zixunRight, .zixunLeft { float: left; width: 380px; height: 290px; // 标题部分 >.title { width: 380px; } >.title>h3 { height: 36px; font-family: Source Han Sans, Source Han Sans; font-weight: bold; font-size: 24px; color: #000000; line-height: 28px; text-align: left; font-style: normal; text-transform: none; border-bottom: 1px solid #139602; } >.title>h3>span { float: right; width: 56px; height: 20px; line-height: 24px; font-weight: 400; font-size: 14px; color: #999999; font-style: normal; text-transform: none; } .photo_text { >li:first-child { width: 380px; height: 120px; margin-top: 20px; margin-bottom: 15px; position: relative; >img { float: left; width: 160px; height: 120px; } >div { float: left; width: 220px; height: 120px; padding-left: 15px; padding-top: 6px; box-sizing: border-box; background-color: #f6f6f6; >h5 { width: 200px; height: 54px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; font-family: Source Han Sans, Source Han Sans; font-weight: 500; font-size: 18px; color: #333333; line-height: 26px; text-align: left; font-style: normal; text-transform: none; } >p { width: 200px; height: 22px; line-height: 20px; position: absolute; bottom: 5px; right: 0; >span { display: inline-block; // width: 100px; height: 18px; font-family: Source Han Sans, Source Han Sans; font-weight: 400; font-size: 12px; color: #999999; text-align: left; line-height: 14px; font-style: normal; text-transform: none; } >span:last-child { // width: 90px; text-align: right; margin-left: 20px; } } } } >li { width: 380px; height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 18px; color: #333333; line-height: 21px; text-align: left; font-style: normal; text-transform: none; margin-bottom: 10px; em { display: inline-block; width: 8px; height: 8px; border-radius: 8px; margin-right: 10px; background-color: #d9d9d9; } } >li:hover { color: #139602; } >li:hover em { background-color: #139602; } } } } .innerRight { width: 381px; height: 290px; background-color: #fbfbfb; >.title { width: 380px; height: 40px; line-height: 40px; border-top: 1px solid #139602; border-bottom: 1px solid #e7e7e7; >h4 { font-family: Microsoft YaHei, Microsoft YaHei; font-weight: 400; margin-left: 20px; font-size: 20px; color: #000000; text-align: left; font-style: normal; text-transform: none; >span { float: right; font-family: Microsoft YaHei, Microsoft YaHei; font-weight: 400; font-size: 14px; margin-right: 10px; color: #999999; text-align: left; font-style: normal; text-transform: none; } } } .rightList { height: 540px; margin-top: 20px; >li { height: 100px; margin-bottom: 10px; >img { width: 150px; height: 100px; } >p { width: 219px; height: 100px; padding-left: 12px; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 16px; color: #333333; line-height: 22px; text-align: left; font-style: normal; text-transform: none; } >p:hover { box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1); } } } } } } @media screen and (min-width:801px) { /*pc*/ p.introduction span a:hover { color: #139602; } }