.title{ display: flex; justify-content: space-between; padding: 50px 0; .left{ p{ display: flex; align-items: center; font-weight: bold; font-size: 26px; line-height: 1.75; color: #1a1a1a; &::before{ display: block; content: ''; width: 5px; height: 26px; margin-top: 1px; margin-right: 15px; background: #f08200; border-radius: 3px; } } } } .more{ display: flex; align-items: center; font-size: 16px; line-height: 24px; color: #f08200; img{ margin-left: 7px; } } .contTit{ display: flex; align-items: flex-start; justify-content: space-between; position: relative; .leftCont{ display: flex; align-items: center; width: calc(100% - 85px); overflow-x: auto; overflow-y: hidden; a{ position: relative; margin-left: 40px; padding-bottom: 21px; white-space: nowrap; font-size: 18px; color: #1a1a1a; &::after{ display: block; content: ''; position: absolute; bottom: 0px; z-index: 1; transition: width .5s; width: 0%; height: 3px; background: #f08200; } &.on{ font-weight: bold; &::after{ width: 100%; } } &:first-child{ margin-left: 0; } } } &::after{ display: block; content: ''; position: absolute; bottom: 1px; width: 100%; height: 1px; background: #e6e6e6; } .img{ font-size: 0; } } .layui-laydate .layui-this, .layui-laydate .layui-this>div{ background: #f08200 !important; } .indexBanner{ position: relative; .indexBannerSwiper{ position: relative; .swiper-wrapper .swiper-slide{ height: 650px; font-size: 0; img{ width: 100%; height: 100%; object-fit: cover; } } .swiper-pagination{ width: 100%; font-size: 0; bottom: 200px; span{ transition: width .3s, background .3s; opacity: 1; width: 8px; height: 8px; margin: 0 6px; border-radius: 4px; background: rgba($color: #fff, $alpha: .5); &.swiper-pagination-bullet-active{ width: 28px; background: #fff; } } } } .w1280{ display: flex; position: absolute; left: 50%; bottom: 45px; transform: translateX(-50%); z-index: 1; padding: 10px 25px; background-color: #ffffff; border-radius: 10px; opacity: 0.98; .left{ display: flex; align-items: center; position: relative; padding-right: 35px; .img{ width: 95px; height: 95px; margin-right: 14px; } p{ font-weight: bold; font-size: 16px; color: #212121; } &::after{ display: block; content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 80px; background: #e6e6e6; } } .right{ display: flex; justify-content: space-between; width: calc(100% - 238px); margin-left: 30px; padding-right: 10px; .list{ display: flex; align-items: center; padding-right: 10px; .img{ display: flex; align-items: center; justify-content: center; min-width: 52px; height: 44px; margin-right: 13px; } .text{ p{ font-weight: bold; font-size: 16px; color: #333; } .tips{ margin-top: 5px; font-size: 14px; color: #666; } } } } } &.mob{ display: none; } } .indexBlock2{ padding: 60px 0 0; border-top: 1px solid #f2f2f2; background: #f7f7f7; .w1280{ display: flex; align-items: flex-start; justify-content: space-between; .img{ position: relative; overflow: hidden; width: calc((100% - 50px) / 3); height: 350px; font-size: 0; img{ transition: transform .5s; transform: scale(1); width: 100%; height: 100%; object-fit: cover; } } .right{ display: flex; width: calc(((100% - 50px) / 3)*2 + 25px); height: 350px; .list{ width: calc((100% - 25px) / 2); height: 100%; margin-left: 25px; padding: 28px 30px; background: #fff; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.02); &:first-child{ margin-left: 0; } ul{ padding-top: 6px; li { margin-top: 25px; a{ display: flex; justify-content: space-between; align-items: center; .leftCont{ position: relative; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; width: calc(100% - 45px); padding-left: 16px; font-size: 16px; color: #333; &::after{ display: block; content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 6px; height: 6px; background-color: #cccccc; } } span{ font-size: 14px; color: #999; } } } } } .list1{ ul{ display: none; } } } } } .indexBlock3{ padding: 25px 0 60px; background: #f7f7f7; background-attachment: fixed; .w1280{ display: flex; justify-content: space-between; .left{ width: calc(((100% - 50px) / 3)*2 + 25px); padding: 28px 30px; background: #fff; .content{ ul{ display: none; padding-top: 5px; li { margin-top: 26px; a{ display: flex; justify-content: space-between; align-items: center; .leftCont{ position: relative; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; width: calc(100% - 85px); padding-left: 16px; font-size: 16px; color: #333; &::after{ display: block; content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 6px; height: 6px; background-color: #cccccc; } } span{ font-size: 14px; color: #999; } } } } } } .right{ width: calc((100% - 50px) / 3); padding: 28px 25px 18px; background: #fff; #ID-laydate-static-1{ width: 100%; #layui-laydate1{ width: 100%; border: 0; box-shadow: none; .layui-laydate-main{ width: 100%; .layui-laydate-header{ display: flex; justify-content: space-between; padding: 0; padding-top: 23px; border-bottom: 0; .laydate-set-ym{ span{ padding: 0; font-size: 20px; font-weight: bold; color: #333; } } .laydate-prev-y,.laydate-next-y{ display: none; } i{ top: auto; font-weight: bold; color: #3f3a39; &.laydate-prev-m{ position: initial; } &.laydate-next-m{ position: initial; } } } .layui-laydate-content{ // margin-top: 34px; margin-top: 20px; padding: 0; table{ width: 100%; thead tr,tbody tr{ display: flex; justify-content: space-between; th{ width: 34px; height: auto; font-size: 14px; color: #999; } td{ width: 34px; height: 34px; margin-top: 9px; font-size: 14px; line-height: 34px; color: #333; div{ padding: 0; } &.laydate-day-prev div,&.laydate-day-next div{ color: #ccc; } .laydate-day-mark{ font-size: 14px; line-height: 34px; &::after{ top: 4px; background: #f08200; } } } .layui-this { background: #fff !important; div{ overflow: hidden; border-radius: 50%; background: #f08200 !important; } } } thead tr{ margin-bottom: 10px; } } } } .layui-laydate-footer{ display: none; } } } } } } .indexBlock4{ padding-bottom: 60px; .w1280{ .title{ padding-bottom: 30px; } .content{ display: flex; justify-content: space-between; .left{ width: calc(630/1280*100%); max-width: 630px; a{ display: block; position: relative; overflow: hidden; width: 100%; height: 100%; font-size: 0; img{ transition: transform .5s; transform: scale(1); width: 100%; height: 100%; object-fit: cover; } &::after{ display: block; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 7px; background-color: #ff7a1a; } } } .right{ width: calc(630/1280*100%); max-width: 630px; .list{ display: flex; height: 50%; .img{ display: flex; align-items: flex-end; position: relative; overflow: hidden; width: 50%; font-size: 0; img{ transition: transform .5s; transform: scale(1); } &::after{ display: block; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 7px; background-color: #ff7a1a; } } .text{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 50%; padding: 0 calc(36/630*100%); background: #f5f5f5; .type{ margin-top: -2px; font-weight: bold; font-size: 18px; color: #1a1a1a; } .time{ margin-top: 13px; font-size: 14px; color: #999; } .tit{ margin-top: 21px; font-size: 18px; color: #666; } > a{ display: flex; align-items: center; margin-top: 23px; font-weight: bold; font-size: 15px; line-height: 20px; color: #ff7a1a; img{ margin-right: 8px; } } } &:nth-child(even){ flex-direction: row-reverse; } } } } } } .indexBlock5{ background: #f7f7f7; padding-bottom: 60px; .w1280{ .title{ padding-bottom: 30px; } .content{ display: flex; .list{ width: 300px; margin-left: 26px; background: #fff; .img{ overflow: hidden; font-size: 0; img{ transition: transform .5s; transform: scale(1); } } .text{ padding: 27px 30px 29px; p{ font-weight: bold; font-size: 18px; color: #212121; } .tips{ margin-top: 12px; font-size: 14px; line-height: 1.75; color: #666; } .more{ margin-top: 26px; } } &:first-child{ margin-left: 0; } } } } } .indexBlock6{ position: relative; background: url(../images/indexBlock6Img.jpg) no-repeat center / cover; background-attachment: fixed; min-height: 500px; .w1280{ display: flex; justify-content: space-between; align-items: flex-start; padding-top: 103px; .left{ width: 700px; .tit{ font-weight: bold; font-size: 34px; color: #fff; } .tips{ margin-top: 26px; font-size: 16px; line-height: 30px; color: #fff; } .link{ display: flex; align-items: center; justify-content: center; transition: background .5s,color .5s; width: 150px; height: 44px; margin-top: 46px; border-radius: 22px; border: solid 1px #ffffff; font-size: 16px; color: #fff; } } .right{ display: flex; justify-content: flex-end; max-width: 463px; width: calc(100% - 700px); padding-top: 108px; padding-right: 193px; .player{ font-size: 0; cursor: pointer; } } } } .windowVideo{ display: none; position: fixed; left: 0; top: 0; z-index: 1; width: 100%; height: 100vh; background: rgba($color: #000, $alpha: .4); .content{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 850px; background: #fff; .tit{ padding: 0 20px; background: #fff; border-bottom: 1px solid #eaeaea; font-size: 18px; line-height: 40px; color: #333; } .cont{ font-size: 0; video{ width: 100%; } } .close{ display: flex; align-items: center; justify-content: center; position: absolute; top: -25px; right: -60px; z-index: 1; width: 40px; height: 40px; font-size: 0; cursor: pointer; border-radius: 50%; border: 1px solid #fff; img{ width: 25px; height: 25px; filter: contrast(0) brightness(10); } } } } @media (any-hover:hover) { .more:hover{ color: #f08200; } .indexBlock2 .w1280 { .img:hover img{ transform: scale(1.05); } .right .content .list ul li:hover a{ color: #f08200; } } .indexBlock3 .w1280 { .left{ .content .cont ul { > .first:hover{ .img{ img{ transform: scale(1.1); } } } li:hover a{ color: #f08200; } } } .right #ID-laydate-static-1 #layui-laydate1 .layui-laydate-main .layui-laydate-content table tbody tr td div:hover{ border-radius: 50%; } } .indexBlock4 .w1280 .content { .left a:hover{ img{ transform: scale(1.05); } } .right .list:hover .img img{ transform: scale(1.1); } } .indexBlock5 .w1280 .content .list:hover{ .img img{ transform: scale(1.1); } } .indexBlock6 .w1280 .left .link:hover{ background: #fff; color: #f08200; } } @media (max-width: 1200px){ .contTit .leftCont a{ margin-left: 20px; } .indexBlock4 .w1280 .content .right .list .text .tit { font-size: 14px; line-height: 1.5; } } @media (max-width: 1080px) { .contTit .leftCont a{ font-size: 16px; } .title{ padding: 30px 0; } .indexBanner { display: none; .indexBannerSwiper { .swiper-pagination{ bottom: 40px; } .swiper-wrapper .swiper-slide{ height: auto; } } &.mob{ display: block; } .w1280{ position: initial; transform: translate(0); padding: 20px 0; .left{ display: none; } .right{ flex-wrap: wrap; width: 100%; padding: 0; margin: 0; .list{ padding-right: 0; flex-direction: column; .img{ margin-right: 0; img{ margin: 0 auto; } } .text{ text-align: center; margin-top: 5px; .tips{ display: none; } } } } } } .indexBlock2{ .w1280{ // flex-wrap: wrap; // .img{ // width: auto; // margin: 0 auto; // } } } .indexBlock3{ padding: 25px 0 40px; background-attachment: initial; .w1280{ flex-wrap: wrap; .left{ // width: 100%; .tit{ p{ font-size: 20px; } } .content{ .tab{ overflow-x: auto; &::-webkit-scrollbar{ opacity: 0 !important; } } .cont ul li{ a{ width: 100%; } span{ display: none; } } } } .right{ // margin: 0 auto; // margin-top: 30px; padding-bottom: 20px; max-width: 420px; // width: 100%; .tit{ padding-top: 22px; padding-bottom: 20px; span{ font-size: 20px; } } } } } .indexBlock4 { padding-bottom: 40px; .w1280 { .title { padding: 40px 0 30px; .left p{ font-size: 20px; } } .content { flex-wrap: wrap; .left{ width: 100%; margin: 0 auto; } .right { width: 100%; margin: 0 auto; .list .text { .time{ display: none; } } } } } } .indexBlock5 { .w1280 .title .left p{ font-size: 20px; } } .indexBlock6{ background-attachment: initial; .w1280 { padding-top: 56px; .left{ .tit{ font-size: 20px; } .tips{ font-size: 14px; line-height: 30px; } } .right{ display: none; } } } } @media (max-width: 996px) { .indexBlock2 .w1280{ flex-wrap: wrap; .img{ width: 100%; height: auto; } .right{ flex-wrap: wrap; width: 100%; height: auto; .list{ width: 100%; margin-left: 0; margin-top: 30px; } } } .indexBlock3 .w1280 { flex-wrap: wrap; .left{ width: 100%; } .right{ width: 100%; max-width: 100%; margin-top: 30px; } } .indexBlock5 { padding-bottom: 10px; .w1280 .content{ flex-wrap: wrap; justify-content: space-between; .list{ width: calc((100% - 30px) / 2); margin: 0 0 30px; .img{ img{ width: 100%; } } } } } } @media (max-width: 820px) { .indexBlock4 .w1280 .content { flex-direction: column; .left{ width: 100%; max-width: 100%; margin: 0 auto; } .right{ width: 100%; max-width: 100%; margin-top: 30px; .list{ .img{ img{ width: 100%; } } .text{ padding: 0 20px; } } } } } @media (max-width: 500px){ .more{ font-size: 14px; } .indexBanner { .indexBannerSwiper .swiper-pagination{ bottom: 20px; } .w1280{ .right{ .list{ .img{ height: 35px; img{ max-height: 100%; } } .text p{ font-size: 14px; } } } } } .indexBlock2 { padding-top: 40px; .w1280 .right { .list{ padding: 20px 20px 25px; ul li{ margin-top: 15px; a{ .leftCont{ font-size: 14px; } span{ font-size: 12px; } } } } } } .indexBlock3 .w1280 { .left { .contTit { .leftCont{ width: 100%; } .more{ display: none; } } .content ul { li{ margin-top: 15px; a{ .leftCont{ font-size: 14px; } span{ font-size: 12px; } } } > .first{ margin-bottom: 22px; .text p{ -webkit-line-clamp: 3; font-size: 14px; } } } } .right{ padding: 20px; } } .indexBlock4 .w1280 .content .right { margin-top: 0; .list { flex-direction: column; margin-top: 30px; .img{ width: 100%; } .text{ width: 100%; padding: 20px; .tit{ margin-top: 10px; } > a{ margin-top: 10px; } } &:nth-child(even){ flex-direction: column; } } } .indexBlock5 .w1280 .content { flex-wrap: nowrap; overflow-y: hidden; overflow-x: auto; .list{ min-width: 300px; width: 300px; margin-left: 20px; &:first-child{ margin-left: 0; } } } }