@import "./conmon.less"; @-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: absolute; 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%; object-fit: cover; } } } } } } .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: center; li { transition: all 0.3s; margin-bottom: 35px; margin-right: 35px; &:nth-child(1) { .lianimate(#77afee,#1d5595,#1d5595); background: #3170b8; width: 570px; height: 300px; } &:nth-child(2) { width: 300px; height: 300px; background: #22bcac; .lianimate(#64ddd0,#127f74,#127f74); } &:nth-child(3) { width: 300px; height: 300px; background: #f79559; .lianimate(#f1b692,#CA6B31,#CA6B31); margin-right: 0; } &:nth-child(4) { width: 300px; height: 406px; background: #f79559; .lianimate(#f1b692,#CA6B31,#CA6B31); } &:nth-child(5) { .lianimate(#77afee,#1d5595,#1d5595); width: 570px; height: 300px; background: #3170b8; } &:nth-child(6) { width: 300px; height: 300px; background: #22bcac; .lianimate(#64ddd0,#127f74,#127f74); margin-right: 0; } } } .search { width: 920px; height: 90px; background: #ffffff; box-shadow: -13px 0px 24px 13px rgba(46, 46, 46, 0.08); position: absolute; bottom: 15px; right: 70px; display: flex; border-radius: 20px; input { width: 635px; border: none; border-radius: 20px; border-bottom-right-radius: 0; border-top-right-radius: 0; font-size: @f-s24; padding-left: 44px; box-sizing: border-box; } div { flex: 1; display: flex; align-items: center; justify-content: center; background-color: #3170b8; border-radius: 20px; border-bottom-left-radius: 0; border-top-left-radius: 0; color: @fff; font-size: @f-s26; font-weight: bold; img { width: 29px; height: 29px; margin-right: 16px; } } } /* img { position: absolute; bottom: 15px; right: 0; } */ } } } .content2 { width: 100%; padding: 40px 0; box-sizing: border-box; .title { } .bg-edit(); .mySwiper2 { --swiper-pagination-color: #fff; /* 两种都可以 */ .swiper-pagination-bullet { border-radius: 0; opacity: 1; background-color: transparent; border: 1px solid var(--swiper-pagination-color); } .swiper-pagination-bullet-active { background-color: var(--swiper-pagination-color) !important; } .swiper-pagination { text-align: right; bottom: 130px; right: 20px; width: 100px; left: auto; } // width: 947px; margin-top: 38px; margin-bottom: 34px; height: 624px; // height: 586px; .swiper-button-prev { width: 68px; height: 68px; background: @light-blue-color; background-image: url("../images/webp/left.webp"); background-position: center; background-repeat: no-repeat; right: 80px; left: auto; top: auto; bottom: 40px; &::after { content: ""; } } .swiper-button-next { width: 68px; height: 68px; background: @light-blue-color; background-image: url("../images/webp/right.webp"); background-position: center; background-repeat: no-repeat; top: auto; bottom: 40px; &::after { content: ""; } } .swiper-wrapper { .swiper-slide { a { width: 100%; height: 100%; display: block; position: relative; img { width: 100%; height: 507px; border: 2px solid #fff; box-sizing: border-box; object-fit: cover; object-position: center; } .flex { width: 100%; padding: 10px 30px; min-height: 116px; position: absolute; bottom: 0; left: 0; background-color: #2fb3a3; // padding-left: 64px; box-sizing: border-box; .displayflex(row;space-between;center;nowrap); // align-items: start; div { width: 100%; } p { font-size: @f-s30; font-weight: 500; line-height: 48px; color: #fff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; // .ellipsis(); max-width: 660px; /* &:nth-child(2) { font-size: @f-s26; } */ } span { font-size: @f-s20; color: @fff; } } } } } } .tzgg { margin-top: 30px; .flex { font-weight: 400; font-size: 36px; display: flex; .active { background-color: #fff; color: #f79559; } div { cursor: pointer; flex: 1; height: 82px; background-color: #f79559; color: #fff; font-weight: 400; font-size: 28px; display: flex; align-items: center; justify-content: center; text-align: center; &:first-child { border-top-left-radius: 15px; } &:last-child { border-top-right-radius: 15px; } } } .tab-box { .block { display: flex; } ul { padding: 34px 44px; box-sizing: border-box; background: #ffffff; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; display: none; flex-direction: column; li { border-bottom: 1px dashed #c4c4c4; padding: 19px 0; box-sizing: border-box; transition: all 0.3s; &:last-child { border-bottom: none; } a { display: flex; transition: all 0.3s; margin-left: 0; img { width: 36px; height: 40px; margin-right: 26px; } p { font-weight: 400; font-size: 24px; color: #333333; line-height: 36px; transition: all 0.3s; } &:hover { p { color: #f5945e; margin-left: 10px; transition: all 0.3s; } } } } } } /* ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; li { .animate(); width: 49%; margin-bottom: 20px; background: #eaf7ff; a { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 16px 30px 30px; box-sizing: border-box; span { font-size: @f-s24; font-weight: 500; color: #b3b3b3; margin-bottom: 20px; } p { font-size: @f-s30; font-weight: 500; color: @black-color; .ellipsis(); } } } } */ } } .contentrl { padding: 40px 0; box-sizing: border-box; .title { margin: 30px 0; display: block; h1 { color: #b64c0c; font-size: 48px; text-align: center; } } } .content3 { width: 100%; padding: 40px 0; box-sizing: border-box; .title { justify-content: center; margin-bottom: 50px; } img { .animate(); } } .content4 { width: 100%; padding: 70px 0 0; box-sizing: border-box; .w1400 { padding-bottom: 70px; box-sizing: border-box; ul { display: flex; justify-content: space-around !important; li { width: 330px; height: 400px; padding: 20px 0 50px 0; // border: 1px solid #e6e6e6; border-radius: 30px; box-shadow: -14px 0px 39.13px 1.26px rgba(42, 42, 42, 0.25); box-sizing: border-box; transition: all 0.3s; &:hover { a { .div { box-shadow: none; } /* svg { .icon1 { stroke: @black-color; } } */ } } &:nth-child(1) { .lianimate(#77afee,#1d5595,#1d5595,#1d5595); background: #3170b8; &:hover { a { .div { transition: all 0.3s; background: #b5d8ff; } } } a { .div { // c3f4fb background: @fff; } } } &:nth-child(2) { .lianimate(#64ddd0,#127f74,#127f74,#127f74); background: #22bcac; &:hover { a { .div { transition: all 0.3s; background: #99f7ed; } } } a { div { background: @fff; } } } &:nth-child(3) { .lianimate(#f1b692,#CA6B31,#CA6B31,#CA6B31); background: #f79559; &:hover { a { .div { transition: all 0.3s; background: #ffe6d6; } } } a { div { background: @fff; } } } a { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-around !important; align-items: center; div { width: 200px; height: 200px; box-shadow: -4px 0 8.19px 1.2px rgba(42, 42, 42, 0.2); border-radius: 50%; display: flex; justify-content: center; align-items: center; img { width: 77px; } } h3 { font-size: @f-s30; font-weight: bold; color: #606060; opacity: 0.88; } p { font-size: @f-s26; color: #22222250; } } } } } } .content5 { width: 100%; background-size: cover; padding: 40px 0 60px; box-sizing: border-box; .title { justify-content: center; margin-bottom: 50px; } .mtjj { width: 100%; height: 100%; display: flex; .left { width: 660px; height: 455px; position: relative; .box { position: absolute; bottom: 0; left: 0; width: 520px; height: 320px; background-color: #fcdfde; border-radius: 20px; } img { /* width: 860px; height: 570px; position: absolute; top: 0; right: 0; border-radius: 20px; */ width: 606px; height: 418px; // position: absolute; // top: 0; // right: 0; position: relative; z-index: 9; margin-left: 30px; border-radius: 20px; } } .right { flex: 1; margin-left: 95px; position: relative; a { } .titles { /* width: 180px; height: 60px; background: #ffffff; border-radius: 30px; display: flex; */ img { /* width: 50px; margin-right: 12px; */ } span { color: #d60c17; font-weight: 700; } } h1 { font-size: 48px; font-weight: 500; color: #333333; line-height: 72px; /* width: 600px; font-size: @f-s48; font-weight: 500; color: #fff; position: absolute; z-index: 99; right: -80px; top: 50px; background-color: rgba(34, 188, 172, 0.9); padding: 40px 30px; box-sizing: border-box; align-items: center; margin-bottom: 30px; line-height: 72px; */ p { margin-top: 70px; color: #b2b2b2; text-align: right; font-weight: 500; font-size: 36px; /* margin-top: 30px; color: #fff; font-weight: 500; font-size: @f-s36; */ } } .more { display: block; width: 144px; padding: 10px 0; background: rgba(255, 255, 255, 0); border: 2px solid #3a8d84; border-radius: 22px; box-sizing: border-box; font-size: @f-s20; font-weight: bold; color: #3a8d84; text-align: center; letter-spacing: 0.36px; // position: absolute; // left: 0; bottom: 138px; } } } } .content6 { width: 100%; .bg-edit(); padding: 40px 0 100px; box-sizing: border-box; .title { justify-content: center; margin-bottom: 50px; } #boxOne { display: block; } .more { display: block; width: 144px; padding: 10px 0; background: rgba(255, 255, 255, 0); border: 2px solid #3a8d84; border-radius: 22px; box-sizing: border-box; font-size: @f-s20; font-weight: bold; color: #3a8d84; margin: 40px auto 0; text-align: center; letter-spacing: 0.36px; } .tab { margin-bottom: 30px; display: flex; justify-content: center; align-items: center; li { font-size: @f-s24; padding: 4px 34px; line-height: 50px; box-sizing: border-box; background: #5db0a7; color: #a4dcd6; cursor: pointer; &:hover { color: #3d7fbf; background-color: #fff; } /* &:nth-child(2) { } */ } .active { padding: 12px 34px; color: #3d7fbf; font-weight: bold; background-color: #fff; } } .swiper { display: none; } .mySwiper3 { width: 1400px; .swiper-wrapper { .swiper-slide { width: auto; transition: 300ms; transform: scale(0.8); position: relative; img { width: 100%; } p { font-size: @f-s24; color: @fff; position: absolute; bottom: 0; width: 100%; line-height: 50px; background-color: #f8955a; left: 0; padding: 0 20px; box-sizing: border-box; } } .swiper-slide-active, .swiper-slide-duplicate-active { transform: scale(1); } } } .mySwiper4 { width: 1400px; .swiper-wrapper { .swiper-slide { width: auto; transition: 300ms; transform: scale(0.8); position: relative; img { width: 100%; } p { font-size: @f-s24; color: @fff; position: absolute; bottom: 0; width: 100%; line-height: 50px; background-color: #f8955a; left: 0; padding: 0 20px; box-sizing: border-box; } } .swiper-slide-active, .swiper-slide-duplicate-active { transform: scale(1); } } } } } } } 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: 50px; } } } .parent-ul { display: flex; justify-content: space-around; flex: 1; .parent-li { position: relative; box-sizing: border-box; a { display: flex; // align-items: center; cursor: pointer; font-weight: 500; color: @black-color; i { font-style: normal; margin-left: 20px; } .span { font-size: 20px; display: flex; height: 50px; align-items: center; } &:hover { .span { font-size: 22px; font-weight: bold; } } } &: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) { .mask { .subset-ul { li { a { white-space: nowrap; } } } } &: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: 474px; max-width: 450px; // padding: 10px 5px 0; box-sizing: border-box; display: grid; gap: 5px; grid-template-columns: repeat(3, minmax(0, 1fr)); // flex-wrap: wrap; // justify-content: space-between; li { // width: 33%; flex: 1; display: flex; justify-content: center; // align-items: center; margin-bottom: 20px; &:hover { font-size: 22px; font-weight: bold; a { font-weight: bold; font-size: 22px; } } a { color: #252424; text-align: center; font-size: 20px; } } } /* .nav-img { width: 262px; height: 130px; background-image: url(../images/navimg.png); background-size: cover; } */ } } } .mySwiper5 { // width: 1400px; height: 320px; .swiper-slide { background: #eaf7ff; font-size: 18px; display: flex; width: 49% !important; a { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 16px 30px 30px; box-sizing: border-box; text-decoration: none; span { font-size: 24px; font-weight: 500; color: #b3b3b3; margin-bottom: 20px; } p { font-size: 30px; height: auto; font-weight: 500; color: #252525; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } } } option { font-size: 20px; } #rili { .contentrili { width: 1170px; background-color: #fff; padding: 0 20px; box-sizing: border-box; margin: 0 auto; border-radius: 20px; background-color: rgba(255, 255, 255, 0.9); // height: 750px; } } .sc-header { display: flex; height: 70px; justify-content: center; align-items: center; .sc-actions { display: flex; align-items: center; .sc-select-year, .sc-select-month { text-align: center; color: #b64c0c; font-size: 30px; font-weight: 800; } .years { color: #b64c0c; font-size: 30px; font-weight: 800; } .sc-mleft { position: absolute; left: 0; top: 50%; transform: translate(0%, -50%); width: 115px; height: 514px; background: rgba(255, 255, 255, 0.65); border-radius: 0; border-top-left-radius: 20px; border-bottom-left-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; h1 { font-size: 60px; font-weight: 500; text-align: center; color: #b64c0c; } p { font-size: 24px; text-align: center; color: #b64c0c; } img { width: 20px; height: 53px; margin-top: 30px; } } .sc-mright { position: absolute; right: 0; top: 50%; transform: translate(0%, -50%); width: 115px; height: 514px; background: rgba(255, 255, 255, 0.65); border-radius: 20px; border-radius: 0; border-top-right-radius: 20px; border-bottom-right-radius: 20px; display: flex; box-sizing: border-box; flex-direction: column; align-items: center; justify-content: center; h1 { font-size: 60px; font-weight: 500; text-align: center; color: #b64c0c; } p { font-size: 24px; text-align: center; color: #b64c0c; } img { width: 20px; height: 53px; margin-top: 30px; } } } }