@import "./conmon.less"; #neibanner { height: 380px; background-position: top center; background-size: cover !important; } @-webkit-keyframes move { 0% { stroke-dasharray: 0, 600px; } 100% { stroke-dasharray: 600px, 0; } } // 动态svg动画 .btn-s a:hover { animation: move 1s; transition: all 1s; } .content4 ul li a:hover div { animation: move 1s; transition: all 1s; } // 首页 .container { width: 100%; min-width: @w1400; position: relative; .index_header { position: relative; /* .logo { width: @w1400; position: absolute; top: 42px; left: 50%; transform: translate(-50%, 0); margin: @m-auto; display: flex; justify-content: space-between; align-items: center; z-index: 99; } */ // 导航菜单 nav { position: fixed; z-index: 999; } .banner { .mySwiper { // height: 780px; // --swiper-theme-color: #ff6600; --swiper-pagination-color: #fff; /* 两种都可以 */ .swiper-pagination-bullet { border-radius: 0; opacity: 1; background-color: transparent; border: #fff 1px solid; } .swiper-pagination-bullet-active { background-color: #fff !important; } .swiper-wrapper { .swiper-slide { img { width: 100%; transition: 1s linear 2s; transform: scale(1.1, 1.1); object-fit: cover; } } .swiper-slide-active img, .swiper-slide-duplicate-active img { transition: 6s linear; transform: scale(1, 1); } } } } } .index_main { width: 100%; section { .content1 { width: 100%; .bg-edit(); padding: 70px 0; box-sizing: border-box; position: relative; .w1400 { .content { ul { display: flex; flex-wrap: wrap; justify-content: space-between; border-radius: 20px; border-bottom-left-radius: 0; border-top-left-radius: 0; // box-shadow: -13px 0px 24px 13px rgba(46, 46, 46, 0.13); box-sizing: border-box; li { transition: all 0.3s; // width: calc(100% / 3); flex: 1; &:nth-child(1) { .lianimate(#3170b8,#1d5595,#1d5595); background: #77afee; height: 212px; border-bottom-left-radius: 20px; border-top-left-radius: 20px; } &:nth-child(2) { height: 212px; background: #64ddd0; .lianimate(#22bcac,#127f74,#127f74); } &:nth-child(3) { height: 212px; background: #f1b692; .lianimate(#F79559,#CA6B31,#CA6B31); border-bottom-right-radius: 20px; border-top-right-radius: 20px; } svg { margin-bottom: 30px; } } } /* img { position: absolute; bottom: 15px; right: 0; } */ } .contactus { margin-top: 134px; display: flex; // height: 620px; .map-text { width: calc(100% - 940px); h1 { width: 351px; font-family: Poppins; font-weight: 600; font-size: 72px; color: #000000; line-height: 100px; } ul { li { margin-bottom: 24px; h4 { color: #313131; font-size: @f-s30; line-height: 48px; } p { color: #959595; font-size: @f-s24; line-height: 32px; } &:last-child { margin-bottom: 0; } } } } .map { object-fit: cover; width: 940px; height: 100%; box-sizing: border-box; // background: #81d8cf; // box-shadow: 0px 7px 36px 4px rgba(0, 0, 0, 0.18); border-radius: 20px; } } } } .content2 { width: 100%; padding: 40px 0; box-sizing: border-box; .bg-edit(); .title { display: flex; justify-content: space-between; margin-bottom: 50px; h1 { font-weight: 600; font-size: 72px; color: #ffffff; flex: 1; } .more { width: 247px; height: 67px; background: #81d8cf; border-radius: 34px; display: flex; justify-content: center; align-items: center; font-size: 24px; color: #22847a; transition: all 0.4s; &:hover { background: #fff; transition: all 0.4s; } } } .context { ul { display: flex; justify-content: space-between; li { // 100减去30并除以2 width: calc(100% / 2 - 30px); a { img { width: 100%; height: 427px; margin-bottom: 38px; } p { font-size: 30px; color: #28615b; line-height: 48px; } } } } } } .content3 { width: 100%; padding: 40px 0; box-sizing: border-box; .title { display: flex; justify-content: space-between; margin-bottom: 50px; h1 { font-weight: 600; font-size: 72px; color: #000000; flex: 1; } .more { width: 247px; height: 67px; background: #e2e2e2; border-radius: 34px; display: flex; justify-content: center; align-items: center; font-size: 24px; color: #6e6e6e; transition: all 0.4s; &:hover { background: #fff; transition: all 0.4s; } } } .mySwiper2 { width: 100%; height: 605px; .swiper-button-next { width: 75px; height: 76px; bottom: 57px; right: 273px; top: auto; left: auto; &::after { content: ""; } } .swiper-button-prev { width: 75px; height: 76px; bottom: 57px; right: 352px; top: auto; left: auto; &::after { content: ""; } } .swiper-wrapper { .swiper-slide { box-sizing: border-box; display: flex; .left { flex: 1; border-bottom-left-radius: 20px; border-top-left-radius: 20px; } .right { overflow: hidden; position: relative; width: 500px; height: 100%; background: #f1b692; padding: 77px; box-sizing: border-box; border-bottom-right-radius: 20px; border-top-right-radius: 20px; img { position: absolute; width: 275px; height: 275px; bottom: -16px; right: -34px; } a { display: block; font-size: 36px; color: #313131; line-height: 60px; margin-bottom: 100px; } p { font-size: 30px; color: #fff; } } } } } } } } } footer { width: 100%; img { width: 100%; object-fit: cover; } } .header_nav { height: 90px; width: 100%; background-color: #fff; top: 0; left: 0; .flex { height: 100%; display: flex; align-items: center; .logo { margin-right: 100px; } } } .parent-ul { display: flex; justify-content: space-around; flex: 1; .parent-li { position: relative; a { display: flex; align-items: center; cursor: pointer; font-weight: 700; color: @black-color; i { font-style: normal; margin-left: 20px; } .span { display: flex; height: 50px; align-items: center; font-size: 24px; text-transform: uppercase; } } &:last-child { margin-right: 20px; &:hover { .mask { left: -522px; .subset-ul { li { width: 50%; a { // white-space: nowrap; } } } } } i { display: none; } } &:nth-last-child(2) { &:hover .mask { left: -400px; } } &:nth-child(6) { &:hover .mask { left: -310px; } } &:nth-child(even) { .mask { .nav-img { background-image: url(../images/16982835493880.jpg); } } } &:nth-child(7) { &:hover .mask { .subset-ul { min-width: 305px; } } } &:hover .mask { transition: all 0.5s; cursor: auto; display: flex; position: absolute; top: 50px; left: -100px; padding: 20px; background: #ffffff; background-image: url(../images/nlogo.png); background-repeat: no-repeat; background-position: 4px 15px; border-radius: 6px; box-shadow: -2px 0px 5px 5px rgba(0, 0, 0, 0.1); box-sizing: border-box; } &:hover .span { // border-bottom: 2px solid #fff; } .mask { transition: all 0.5s; display: none; .subset-ul { // width: 500px; min-width: 400px; max-width: 450px; padding: 20px 30px 0; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; li { width: 33%; margin-bottom: 20px; a { color: #252424; font-size: 16px; } } } .nav-img { width: 262px; height: 130px; background-image: url(../images/navimg.png); background-size: cover; } } } } .zyfeilei { height: 80px; width: 100%; margin: 0 auto; border-bottom: 1px solid #dddddd; box-shadow: 0px 5px 10px 0px #ddd; margin-bottom: 30px; ul { margin-top: 15px; position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: start; align-items: center; min-width: 60%; float: left; li { margin: 0 4px; a { padding: 0 15px; display: block; height: 45px; color: #373737; font-size: @f-s16; text-align: center; line-height: 45px; transition: all 0.3s; position: relative; border-radius: 2px; } &:hover > a { color: @fff; background: @light-blue-color; } } .li_on a { background: @light-blue-color; color: @fff; } } .newactive { overflow: hidden; line-height: 73px; flex: 1; float: right; h3 { line-height: 73px; font-size: @f-s22; overflow: hidden; font-weight: normal; color: @light-blue-color; text-align: right; } } } .notice-list { margin-top: 30px; ul { .displayflex(row; space-between; stretch; wrap); li { // height: 180px; width: 46%; box-shadow: 10px 10px 0px 1px #f2f4f9; box-sizing: border-box; border: 1px solid @light-blue-color; margin-bottom: 35px; a { display: block; padding: 40px 30px; box-sizing: border-box; h1 { .ellipsis(); font-weight: bold; font-size: 24px; color: @light-blue-color; margin-bottom: 10px; } h2 { // .displaybox(); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; line-height: 25px; color: #000; font-size: @w18; // max-height: 50px; } span { display: block; color: #808080; font-size: @f-s16; margin-top: 10px; } } } } } /*分页*/ .black2 { padding: 10px; margin: 40px auto; text-align: center; overflow: hidden; a { border: #757575 1px solid; padding: 5px 10px; color: #000000; text-decoration: none; margin: 2px; &:hover { border: @light-blue-color 1px solid; background: @light-blue-color; padding: 5px 10px; color: #fff; text-decoration: none; margin: 2px; } } span.current { border: @light-blue-color 1px solid; background: @light-blue-color; padding: 5px 10px; color: #fff; text-decoration: none; margin: 2px; } span.disabled { border: #ccc 1px solid; padding: 5px 10px; color: #ccc; text-decoration: none; margin: 2px; } } .connewslist { margin-top: 30px; ul { .displayflex(row; space-between; center; wrap); li { width: 48%; padding: 30px 10px; box-sizing: border-box; border-bottom: 1px solid #ebebeb; transition: all 0.3s; &:hover { background: #fff; box-shadow: 0 6px 16px rgba(43, 43, 43, 0.2); a { h3 { color: #003277; } } } a { display: block; height: 80px; width: 100%; .displayflex(row; start; center); span { width: 90px; height: 90px; float: left; display: block; background-color: #cbf7f7; text-align: center; line-height: 90px; border-radius: 10px; img { width: 50%; display: inline-block; vertical-align: middle; } h5 { font-size: 24px; margin: 0 auto; height: 40px; line-height: 40px; margin-top: 8px; color: #38c8c8; text-align: center; width: 85%; border-bottom: 1px solid #ccc; font-weight: normal; } h6 { font-size: 14px; height: 20px; line-height: 20px; color: #8c8c8c; font-weight: normal; text-align: center; margin-top: 8px; } } .newscontent1 { float: left; margin-left: 30px; overflow: hidden; flex: 1; h3 { height: 25px; line-height: 25px; font-size: @f-s20; color: #202020; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: all 0.3s; } p { height: 50px; line-height: 25px; margin: 0 auto; margin-top: 8px; font-size: 16px; color: #252525; .displaybox(); } } } } } } /*图片新闻3*/ .newslist3 { overflow: hidden; margin-bottom: 60px; ul { margin-bottom: 20px; li { width: 97%; margin: 0 auto; overflow: hidden; padding: 30px 10px; transition: all 0.5s; border-bottom: 1px solid #f0f0f0; a { height: 160px; .displayflex(row; space-between; center); .news_pic { width: 225px; height: 152px; overflow: hidden; background-size: cover !important; } .news_font { flex: 1; height: 160px; max-width: 900px; transition: all 0.3s; margin-left: 50px; margin-right: 60px; h3 { font-size: 16px; height: 50px; line-height: 50px; color: #000; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #202020; transition: all 0.3s; width: 100%; } p { font-size: 14px; height: 52px; line-height: 26px; color: #959393; .displaybox(); } i { display: block; width: 75px; height: 15px; border-bottom: 1px solid #8c8c8c; } .news3date { h2 { height: 60px; line-height: 60px; font-size: @f-s26; color: #8c8c8c; display: inline-block; font-weight: bold; } em { font-size: 14px; color: #8c8c8c; display: inline-block; font-style: normal; font-weight: normal; } } } .news3more { width: 110px; height: 35px; border: 1px solid #eeeeee; line-height: 35px; text-align: center; transition: all 0.5s; color: #666; } } &:hover { background: #fff; box-shadow: 0 6px 16px rgba(43, 43, 43, 0.2); .news_font { h3 { color: @light-blue-color; } } .news3more { border: 1px solid @light-blue-color; color: @light-blue-color; } } } } } /* 新闻内容页 */ .content-container { .content-title { margin: 0 auto; border-bottom: 1px solid #dddddd; padding-bottom: 30px; padding-top: 25px; margin-bottom: 30px; h1 { font-size: 24px; color: #444545; text-align: center; padding: 15px 0; padding-bottom: 10px; line-height: 40px; } h2 { font-size: 16px; color: #a1a2a2; text-align: center; height: 25px; line-height: 25px; } } .content-main { color: #484848; line-height: 30px; margin: 15px 0; font-size: 20px; p { color: #484848; line-height: 30px; margin: 20px 0; font-size: 20px !important; text-indent: 2em; span { font-size: 20px !important; b { font-size: 20px !important; } } } img { max-width: 100%; margin: 0 auto; display: block; } video { max-width: 100%; } } } .ks-search { width: 1400px; margin: 0 auto; position: relative; padding: 20px 0; box-sizing: border-box; // .bg-img-size-nor-center(); .top-search { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; h1 { width: 95px; font-size: 22px; font-weight: 500; color: #003277; margin-right: 20px; } input { flex: 1; padding-left: 36px; box-sizing: border-box; height: 60px; background: #ffffff; border: 1px solid #dddddd; // border-radius: 30px; border-bottom-left-radius: 30px; border-top-left-radius: 30px; } a { display: block; width: 170px; height: 60px; background: #0155c8; border-radius: 0px 29px 29px 0px; font-size: 18px; color: #ffffff; line-height: 60px; text-align: center; } } .search-result { width: 100%; border-top: 1px solid #ababba; padding: 50px 0; box-sizing: border-box; .flex-nw { display: flex; align-items: end; h2 { font-size: 30px; margin-right: 20px; font-weight: bold; } p { font-size: 18px; span { font-size: 18px; color: #2268cd; } } } } }