a { color: #333333; } //农民工part1 .farmingPartOne { width: 100%; height: 600px; .inner { height: 600px; .innerLeft { height: 600px; .leftTop { margin-top: 20px; height: 320px; .leftTopPhoto { width: 387px; height: 320px; position: relative; img { width: 387px; height: 320px; } span { display: inline-block; width: 387px; height: 50px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); color: #FFFFFF; position: absolute; bottom: 0; left: 0; font-family: Source Han Sans, Source Han Sans; font-weight: 500; font-size: 20px; line-height: 23px; padding-top: 11px; padding-left: 13px; box-sizing: border-box; white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } } >ul.left { margin-left: 25px; width: 362px; height: 320px; margin-top: 5px; >li { em { display: inline-block; width: 8px; height: 8px; border-radius: 8px; background-color: #d9d9d9; margin-right: 8px; vertical-align: middle; } width: 362px; height: 22px; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 18px; color: #333333; line-height: 22px; text-align: left; font-style: normal; text-transform: none; margin-bottom: 19px; white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } >li:hover { a { color: #088f04; } color: #088f04; } >li:hover>em { background-color: #088f04; } } } .leftBottom { height: 202px; margin-top: 21px; >li { float: left; width: 185px; height: 202px; margin-right: 10px; >a { >img { width: 185px; height: 139px; } } >p { width: 185px; height: 58px; padding: 8px 5px 12px; box-sizing: border-box; background-color: #f5f5f5; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 18px; color: #333333; line-height: 24px; text-align: left; font-style: normal; text-transform: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 限制显示的行数 */ overflow: hidden; text-overflow: ellipsis; } } >li:hover { a { color: #088f04; } } >li:last-child { margin: 0; } } } .innerRight { .rightList { height: 540px; margin-top: 20px; >li { height: 100px; margin-bottom: 10px; img { width: 150px; height: 100px; } >p { width: 219px; height: 100px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; padding-left: 12px; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 16px; color: #333333; line-height: 24px; text-align: left; font-style: normal; text-transform: none; } >p:hover { box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1); a { color: #088f04; } } } } } } } //农民工part2 .farmingPartTwo { width: 100%; height: 600px; .inner { width: 1200px; height: 600px; >.farmer { float: left; width: 380px; height: 600px; margin-right: 29px; // 农民工part2标题 >.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>a { float: right; width: 56px; height: 20px; line-height: 24px; font-weight: 400; font-size: 14px; color: #999999; font-style: normal; text-transform: none; } // 农民工part2图片 .PartTwoPhoto { width: 380px; height: 280px; margin-top: 20px; position: relative; img { width: 380px; height: 280px; } span { display: inline-block; width: 380px; height: 50px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); color: #FFFFFF; position: absolute; bottom: 0; left: 0; font-family: Source Han Sans, Source Han Sans; font-weight: 500; font-size: 20px; line-height: 23px; padding-top: 11px; padding-left: 13px; box-sizing: border-box; white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } } //农民工part2文字列表 .PartTwoList { width: 380px; height: 263px; background-color: #fff; box-shadow: 0px 4px 30px 1px rgba(174, 174, 174, 0.25); padding-top: 20px; box-sizing: border-box; >li { width: 370px; height: 25px; line-height: 25px; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 18px; color: #333333; margin-bottom: 16px; white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ >em { display: inline-block; width: 8px; height: 8px; background-color: #d9d9d9; border-radius: 8px; margin-left: 19px; margin-right: 10px; } } >li:hover { color: #139602; a { color: #088f04; } } >li:hover>em { background-color: #139602; } } } >.farmer:last-child { margin-right: 0; } } } //资讯推荐 .zixuntuijian { width: 100%; height: 600px; .innerLeft { // 左侧的上半部分 .zixunTop { height: 286px; .zixunLeft, .zixunRight { float: left; width: 380px; height: 286px; .towPic { display: flex; width: 380px; height: 116px; margin-top: 20px; .picBox { width: 50%; text-align: center; } .picBox:nth-child(3), .picBox:nth-child(4), .picBox:nth-child(5) { display: none; } img { width: 190px; height: 120px; } .picBox:first-child { margin-right: 5px; } } // 标题部分 >.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 { article { white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ li { white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ a:hover { color: #088f04; } } li:hover { color: #088f04; a { color: #088f04; } } img { width: 100px; } } li { width: 380px; height: 25px; 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: 9px; em { display: inline-block; width: 8px; height: 8px; border-radius: 8px; margin-right: 10px; background-color: #d9d9d9; } } } } // 左侧的资讯推荐的左半部分 .zixunLeft { margin-right: 30px; .photo_text { li:first-child { width: 380px; height: 120px; margin-top: 20px; margin-bottom: 16px; position: relative; overflow: hidden; 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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 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: 75px; 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; } } } } >li { width: 380px; height: 25px; 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: 9px; em { display: inline-block; width: 8px; height: 8px; border-radius: 8px; margin-right: 10px; background-color: #d9d9d9; } } } } // 左侧的资讯推荐的右半部分 .zixunRight { width: 380px; height: 229px; .photo_text { margin-top: 20px; } } } //左侧的下半部分 .zixunBottom { width: 790px; height: 280px; margin-top: 40px; img { width: 498px; height: 280px; } >.leftList { width: 290px; height: 280px; background-color: #f6f6f6; padding: 11px 26px 6px 20px; box-sizing: border-box; >li { width: 296px; height: 35px; line-height: 35px; color: #666666; font-size: 14px; margin-bottom: 18px; h4 { font-family: Source Han Sans, Source Han Sans; height: 35px; line-height: 35px; font-size: 18px; font-weight: 400; white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ color: #333333; width: 260px; em { display: inline-block; width: 8px; height: 8px; background-color: #333333; border-radius: 8px; margin-right: 5px; } } p { width: 249px; height: 48px; line-height: 24px; padding-left: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 限制显示的行数 */ overflow: hidden; text-overflow: ellipsis; } } >li:hover, >li:hover>h4>a, >li:hover>p>a { color: #088f04; } >li:hover>h4>em { background-color: #088f04; } } } } .innerRight { .information { width: 380px; margin-top: 20px; >li { width: 380px; height: 120px; margin-bottom: 21px; img { float: left; width: 160px; height: 120px; } .text { float: left; width: 220px; height: 120px; padding-left: 15px; box-sizing: border-box; >h5 { width: 199px; height: 49px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-top: 6px; font-family: PingFang SC, PingFang SC; font-weight: 600; font-size: 18px; color: #333333; line-height: 26px; text-align: left; font-style: normal; text-transform: none; } >p { width: 198px; height: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; margin-top: 16px; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 14px; color: #666666; line-height: 24px; text-align: left; font-style: normal; text-transform: none; margin-top: 40px; } } .text:hover { box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1); background-color: #fff; h5 { a { color: #088f04; } } p { color: #088f04; } } } } } } // 农民工 .farming { width: 100%; height: 605px; // 左侧 .innerLeft { width: 790px; height: 605px; margin-right: 21px; // background-color: #ccc; .farmer { width: 790px; height: 312px; >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; >span { float: right; width: 56px; height: 20px; line-height: 24px; font-weight: 400; font-size: 14px; color: #999999; font-style: normal; text-transform: none; } } >ul { margin-top: 20px; >li { float: left; width: 362px; height: 22px; font-weight: 500; font-size: 18px; color: #333333; line-height: 21px; text-align: left; margin-bottom: 29px; margin-right: 27px; white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ >em { display: inline-block; width: 8px; height: 8px; background-color: #d9d9d9; border-radius: 4px; margin: 5px 8px 6px; vertical-align: middle; } } >li:hover { color: #139602; a { color: #139602; } } } } .farmerbottom { width: 790px; height: 280px; img { width: 498px; height: 280px; } >.leftList { width: 290px; height: 280px; background-color: #f6f6f6; padding: 11px 26px 6px 20px; box-sizing: border-box; >li { width: 296px; height: 75px; color: #666666; font-size: 14px; margin-bottom: 18px; h4 { font-family: Source Han Sans, Source Han Sans; height: 27px; line-height: 21px; font-size: 18px; color: #333333; em { display: inline-block; width: 8px; height: 8px; background-color: #333333; border-radius: 8px; } } p { width: 249px; height: 48px; line-height: 24px; padding-left: 14px; } } >li:hover, >li:hover>h4 { color: #088f04; } >li:hover>h4>em { background-color: #088f04; } } } } // 右侧 .innerRight { width: 380px; height: 605px; // 标题部分 >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; >span { float: right; width: 56px; height: 20px; line-height: 24px; font-weight: 400; font-size: 14px; color: #999999; font-style: normal; text-transform: none; } } // 轮播图 .banner { width: 380px; height: 214px; margin-top: 20px; } .banner_b_img { // 图片部分 .photo { height: 104px; margin-top: 10px; display: flex; } .photoL, .photoR { float: left; width: 185px; height: 104px; position: relative; img { width: 185px; height: 104px; } span { position: absolute; top: 0; left: 0; display: inline-block; padding-left: 7px; box-sizing: border-box; width: 185px; height: 22px; background-color: rgba(0, 0, 0, 0.5); font-weight: 500px; font-size: 14px; color: #FFFFFF; line-height: 22px; white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } } .photoL { margin-right: 10px; } } .banner_text_list { ul { width: 380px; height: 186px; margin-top: 30px; >li { a { height: 22px; font-size: 16px; &:hover { color: #139609; } } height: 22px; padding-bottom: 16px; white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ >strong { display: inline-block; width: 24px; height: 24px; line-height: 24px; background-color: #cecece; padding-left: 6px; box-sizing: border-box; font-family: Source Han Sans, Source Han Sans; font-weight: 500; font-size: 18px; color: #FFFFFF; font-style: normal; text-transform: none; } >em { display: inline-block; width: 6px; height: 6px; border-radius: 10px; border: 2px solid #8CBA86; margin-right: 10px; } >span { width: 380px; height: 22px; 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; } >span:hover { color: #139609; } } } } } } //三农科教 .scienceEducation { height: 600px; margin-bottom: 76px; .innerLeft, .innerRight { float: left; } // 左侧 .innerLeft { width: 790px; height: 616px; margin-right: 21px; } // 右侧 .innerRight { width: 380px; height: 600px; // 标题部分 >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; >span { float: right; width: 56px; height: 20px; line-height: 24px; font-weight: 400; font-size: 14px; color: #999999; font-style: normal; text-transform: none; } } ul.sannongList { width: 380px; height: 186px; >li { height: 22px; padding-top: 16px; white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ >strong { display: inline-block; width: 24px; height: 24px; line-height: 24px; background-color: #cecece; padding-left: 6px; box-sizing: border-box; font-family: Source Han Sans, Source Han Sans; font-weight: 500; font-size: 18px; color: #FFFFFF; font-style: normal; text-transform: none; } >em { display: inline-block; width: 6px; height: 6px; border-radius: 10px; border: 2px solid #8CBA86; } >span { width: 380px; height: 22px; 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; padding-left: 9px; } >span:hover { color: #139609; a { color: #088f04; } } } } // 轮播图 .banner { width: 380px; height: 214px; margin-top: 45px; } .banner_b_img { // 图片部分 .photo { height: 104px; margin-top: 10px; display: flex; } .photoL, .photoR { float: left; width: 185px; height: 104px; position: relative; img { width: 185px; height: 104px; } span { position: absolute; top: 0; left: 0; display: inline-block; padding-left: 7px; box-sizing: border-box; width: 185px; height: 22px; background-color: rgba(0, 0, 0, 0.5); font-weight: 500px; font-size: 14px; color: #FFFFFF; line-height: 22px; white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ a { color: #fff; } } } .photoL { margin-right: 10px; } } } } // 标题 .scienceTitle { height: 37px; h5 { float: left; width: 96px; height: 34px; font-family: PingFang SC, PingFang SC; font-weight: 600; font-size: 24px; color: #000000; line-height: 28px; text-align: left; font-style: normal; text-transform: none; margin-right: 20px; } >p { float: left; height: 37px; line-height: 30px; display: flex; >span { display: inline-block; //height: 20px; line-height: 20px; text-align: center; margin: 4px 0px 3px; padding: 0 20px; //border-right: 1px solid #ccc; font-weight: 500; font-size: 20px; cursor: pointer; padding-bottom: 11px; // >a { // display: inline-block; // padding-bottom: 11px; // font-family: PingFang SC, PingFang SC; // font-weight: 500; // font-size: 20px; // color: #666666; // line-height: 20px; // font-style: normal; // text-transform: none; // box-sizing: border-box; // } .current { color: #139602; border-bottom: 1px solid #139602; } } >span:nth-child(4) { border-right: none; } >span:hover>a { color: #139602; border-bottom: 1px solid #139602; } } } .box { width: 790px; height: 570px; position: relative; overflow: hidden; } .fade-in { animation: fadeIn 1s ease-in-out; } .fade-enter-from, .fade-leave-to { opacity: 0; } .fade-enter-to, .fade-leave-from { opacity: 1; } .fade-enter-active, .fade-leave-active { transition: opacity 1s ease; } .scienceListBox { width: 3160px; height: 570px; position: absolute; top: 0; left: 0; transition: all 3s linear 0; } // 标题下列表 .scienceList { width: 790px; height: 570px; float: left; margin-top: 17px; >li { width: 250px; height: 276px; float: left; margin-right: 20px; position: relative; img { width: 250px; height: 220px; border-top-left-radius: 40px; border-bottom-right-radius: 40px; } >p { height: 50px; width: 248px; font-family: PingFang SC, PingFang SC; font-weight: 600; font-size: 18px; color: #333333; line-height: 24px; text-align: left; font-style: normal; text-transform: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 限制显示的行数 */ overflow: hidden; text-overflow: ellipsis; } // >p:hover { // color: #139602; // } } >li:hover { color: #088f04; >p:hover { a { color: #088f04; } // color: #139602; } } >li:nth-child(3), >li:nth-child(6) { margin-right: 0; } >li::before { content: ""; display: inline-block; width: 40px; height: 20px; position: absolute; top: 0; right: 0; background-image: url("../../public/images/Component 209.png"); } } .active { border-bottom: 3px solid #139602; height: 36px; display: inline-block; } .noSelect { border-bottom: 3px solid #fff; height: 36px; display: inline-block; }