@line_clamp: 2;// 文字默认截取行数 @onehundred: 100%; //整体百分百 @small-size:12px; @font-size-base:14px;// 新闻简介字号 @titlesize:16px;// 新闻标题字号 @large-size:18px; @large-two-size:24px; @title-color: #333; //标题颜色 @hover-color: #2671DE; //文字滑过颜色跟随当前主体色,也有可能滑过的和高亮的不是一种颜色这个主要作为文字颜色 @active-color: #2671DE; //高亮颜色跟随当前主体色,也有可能滑过的和高亮的不是一种颜色这个主要作为背景颜色 @text-color:#666; //简介颜色 @textinfo-color:#999;// 不重要的文字颜色比如时间 @forminputjianju: 10px;// 输入框左内间距 @white:#fff; //白色 @black:#000; @e5:#e5e5e5; @dc:#dcdcdc; @family:"Microsoft YaHei"; @left:left; @right:right; @center:center; @display-block:block; @display-flex:flex; @display-table:table; @display-inline-block:inline-block; @display-none:none; /************************************** 以上是默认设置除了高亮和滑过别的不要动,想到可以随时添加 *******************************************/ /**************************************** css文件不要改,要改同名的less文件并重新生成css文件!!!!!!****************************************/ .header{ .header-top{ height: 40px; line-height: 40px; background: #E8F4FF; .w1200{ display: flex; justify-content: space-between; .welcome { color: @text-color; font-size: 14px; } .header-top-right{ .nav-link { float: @left; margin-right: 25px; font-size: @font-size-base; color: @text-color; &:hover{ color: @active-color; } } .dropdown { float: @left; position: relative; cursor: pointer; font-size: @font-size-base; border: 1px solid transparent; &::after{ content: ""; position: absolute; left: 0; right: 1px; bottom: 0; width: @onehundred; height: 1px; background: @white; z-index: 99; } .dropdown-title { line-height: 38px; padding: 0 20px 2px 5px; display: @display-block; color: @text-color; text-indent: 5px; background: url(../images/icon1.png) 93% center no-repeat; } .dropdown-content { display: none; position: absolute; top: 39px; right: -1px; padding: 10px; min-width: 120px; border: 1px solid #ccc; background: @white; z-index: 99; a { display: block; font-size: @small-size; color: @text-color; line-height: 30px; white-space: nowrap; &:hover{ color: @active-color; } } } &:hover { background: @white; border-color:#ccc; .dropdown-content { display: block; } } } } } } .header-main { padding: 30px 0; .w1200 { display: @display-flex; justify-content: space-between; align-items: center; .header-right{ .search-box{ float: @left; width: 300px; height: 38px; border: 1px solid @active-color; border-radius: 4px; overflow: hidden; input{ float: @left; width: calc(100% - 40px); height: 36px; font-size: @font-size-base; color: @text-color; border: 0; } button{ width: 40px; height: 36px; background: @active-color; border: 0; } } } } } } .nav{ background: @active-color; ul{ padding: 0; list-style: none; } &>ul{ display: @display-table; &>li{ display: table-cell; position: relative; transition: all 0.3s ease; a{ display: @display-block; } &>a{ padding: 0 10px; font-size: @font-size-base; color: @white; text-align: @center; line-height: 50px; } &:hover,&.active{ background:#145DC7; } .menu-nav{ display: @display-none; position: absolute; top: @onehundred; left: 0; min-width: @onehundred; background:#145DC7; box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.09); z-index: 999; ul{ li{ font-size: @font-size-base; color: @white; white-space: nowrap; a{ padding: 8px 15px; } &:hover{ background: @active-color; } } } } } } } .banner{ width: @onehundred; overflow: hidden; .swiper-slide{ img{ width: @onehundred; } } .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 16px; } } .swiper-pagination-bullet{ width: 12px; height: 12px; background: @white; opacity: 1; } .swiper-pagination-bullet-active{ background: @active-color; } .content{ .section{ width: @onehundred; &.section1{ margin-top: 32px; margin-bottom: 23px; } &.section2{ margin-bottom: 40px; .section2-left{ float: @left; width: 800px; .news-tab{ margin-bottom: 20px; &:last-child{ margin-bottom: 0; } } .news-list{ li{ line-height: 35px; } } } .section2-right{ float: @right; padding: 20px 19px; padding-bottom: 10px; width: 370px; background: #F8F8F8; border-top: 3px solid @active-color; overflow: hidden; .adve-list2{ padding: 0; list-style: none; overflow: hidden; li{ margin-bottom: 10px; height:95px; overflow: hidden; img{ width: @onehundred; height: @onehundred; object-fit: cover; transition: all 0.6s; } &:hover{ img{ transform: scale(1.1); -ms-transform: scale(1.1); /* IE 9 */ -moz-transform: scale(1.1); /* Firefox */ -webkit-transform: scale(1.1); /* Safari 和 Chrome */ -o-transform: scale(1.1); } } } } } } &.section3{ margin-bottom: 35px; padding-top: 40px; padding-bottom: 50px; background: url(../images/bg3.jpg) top center no-repeat; overflow: hidden; .timeline-section { margin-top: 40px; padding: 0 70px; position: relative; &::before { content: ''; position: absolute; left: 0; right:0; top: 50%; height: 2px; background:@white; transform: translateY(-50%); } .timeline-swiper { position: relative; .swiper-wrapper { align-items: center; } } .swiper-slide{ height: 345px; .timeline-item { position: relative; height: @onehundred; .timeline-dot { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto 0; margin-left: 2em; width: 40px; height: 40px; background:@textinfo-color; border-radius: 50%; z-index: 2; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 30px; height:30px; background: @white; border-radius: 50%; } &::after{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 12px; height: 12px; border-radius: 50%; background: @textinfo-color; } } .timeline-content { position: absolute; top: 210px; left: 0; right: 0; h6,p{ font-size: @titlesize; color: @title-color; line-height: 24px; } h6{ margin-bottom: 5px; } p{ margin-bottom: 5px; &:last-child{ margin-bottom: 0; } } } } &:nth-child(2n){ .timeline-content{ top: inherit; bottom:219px; h6{ margin-bottom: 0; } } } &:nth-child(2n){ height: 375px; } &.swiper-slide-active{ .timeline-item { .timeline-dot{ background: @active-color; &::after{ background: @active-color; } } .timeline-content{ h6{ color: @active-color; } } } } } // 按钮样式 .swiper-button-prev, .swiper-button-next { width: 40px; height: 40px; background: @white; border-radius: 50%; box-shadow: 0px 0px 9px 0px rgba(38, 113, 222, .3); outline: none; &::after { font-size: @titlesize; color: #9f9f9f; font-weight: bold; } &:hover { &::after { color: @active-color; } } &.swiper-button-disabled{ opacity: 1; } } .swiper-button-prev, .swiper-rtl .swiper-button-next{ left: 0; } .swiper-button-next, .swiper-rtl .swiper-button-prev{ right: 0; } } } &.section4{ margin-bottom: 40px; .meeting-table{ margin-top: 12px; overflow: hidden; table{ width: @onehundred; thead{ th{ padding: 17px 15px; font-size: @titlesize; color: @white; border-right: 1px solid @white; background: @active-color; } } tbody{ tr{ td{ padding: 17px 30px; font-size: @titlesize; color: @title-color; border-right: 1px solid @white; background: #F7F7F7; &:not(:first-child){ text-align: @center; } a{ &:hover{ color: @active-color; text-decoration: underline; } } } &:nth-child(2n){ td{ background: @white; } } } } } } } .news-tab{ float: @left; width: 800px; .hd{ height: 60px; ul{ position: relative; padding-right: 12px; padding: 0; list-style: none; height: 46px; background: #F8F8F8; li{ float: @left; padding-left: 20px; width: 122px; height: 60px; font-size: @large-size; color: @title-color; font-weight: bold; line-height: 46px; cursor: pointer; .more{ display: @display-none; position: absolute; top: 0; right: 12px; font-size: @font-size-base; color: @textinfo-color; line-height: 46px; font-weight: normal; &:hover{ color: @active-color; } } &.on{ color: @white; background: url(../images/titbg.png) no-repeat; .more{ display: @display-block; } } &:not(:first-child){ &.on{ background: url(../images/titbg2.png) no-repeat; } } } } } } .memberlogin-section{ float: @right; width: 370px; overflow: hidden; .memberlogin-form{ margin-top: 20px; padding-bottom: 15px; background: url(../images/bg2.png) right bottom no-repeat; overflow: hidden; .form-group{ position: relative; margin-bottom: 12px; overflow: hidden; input{ padding-left: 20px; width: @onehundred; height: 42px; font-size: @font-size-base; color: @text-color; border-radius: 5px; border: 1px solid #DEDEDE; } .img-box{ position: absolute; top: 1px; right: 1px; bottom: 1px; width: 77px; display: @display-flex; align-items: @center; justify-content: @center; img{ max-width: @onehundred; max-height: @onehundred; } } } .btn-group{ margin-top: 18px; overflow: hidden; a,button{ display: @display-block; width: 180px; height: 42px; font-size: @titlesize; text-align: @center; line-height: 40px; border-radius: 5px; border: 1px solid @active-color; } a{ float: @right; color: @active-color; background: @white; } button{ float: @left; color: @white; background: @active-color; transition: all 0.3s ease; &:hover{ opacity: .85; } } } } } .section-title{ height: 46px; background: #F8F8F8; overflow: hidden; h6{ float: @left; width: 110px; font-size: @large-size; color: @white; line-height: 46px; text-align: @center; background: @active-color; } } .section-title2{ overflow: hidden; h6{ float: @left; font-size: @large-size; color: @title-color; img{ margin-right: 10px; } } .more{ float: right; font-size: @font-size-base; color: @textinfo-color; line-height: 24px; &:hover{ color: @active-color; } } } .news-list{ padding: 0; list-style: none; overflow: hidden; li{ position: relative; padding-left: 15px; font-size: @titlesize; line-height: 40px; overflow: hidden; &::before{ content: ""; position: absolute; top: 0; left: 0; bottom: 0; margin: auto 0; width: 4px; height: 4px; border-radius: 50%; background: @active-color; } a{ display: @display-block; float: @left; max-width: 80%; color: @title-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &:hover{ color: @active-color; } } .time{ float: @right; color: @textinfo-color; } &.first{ padding-left: 0; margin-top: 9px; margin-bottom: 5px; overflow: hidden; &::before{ display: @display-none; } a{ max-width: @onehundred; white-space: inherit; .img-box{ float: @left; width: 222px; height: 132px; overflow: hidden; img{ width: @onehundred; height: @onehundred; transition: all 0.6s; } } .item-cont{ margin-left: 242px; overflow: hidden; h6{ font-size: @large-size; color: @title-color; transition: all 0.3s ease; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-text{ margin-top: 4px; font-size: @font-size-base; color: @text-color; line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @line_clamp; /*要显示的行数*/ overflow: hidden; } .item-time{ margin-top: 15px; font-size: @font-size-base; color: @textinfo-color; line-height: 24px; } } } &:hover{ .img-box{ img{ transform: scale(1.1); -ms-transform: scale(1.1); /* IE 9 */ -moz-transform: scale(1.1); /* Firefox */ -webkit-transform: scale(1.1); /* Safari 和 Chrome */ -o-transform: scale(1.1); } } .item-cont{ h6{ color: @active-color; } } } } } } } .adve-list{ margin-bottom: 40px; overflow: hidden; ul{ padding: 0; list-style: none; overflow: hidden; li{ float: @left; margin-right: 26px; width: 587px; height: 122px; overflow: hidden; img{ width: @onehundred; height: @onehundred; object-fit: cover; transition: all 0.6s; } &:hover{ img{ transform: scale(1.1); -ms-transform: scale(1.1); /* IE 9 */ -moz-transform: scale(1.1); /* Firefox */ -webkit-transform: scale(1.1); /* Safari 和 Chrome */ -o-transform: scale(1.1); } } &:last-child{ margin-right: 0; } } } } .adve-section{ margin-bottom: 40px; overflow: hidden; img{ width: @onehundred; transition: all 0.6s; } &:hover{ img{ transform: scale(1.1); -ms-transform: scale(1.1); /* IE 9 */ -moz-transform: scale(1.1); /* Firefox */ -webkit-transform: scale(1.1); /* Safari 和 Chrome */ -o-transform: scale(1.1); } } } .adve-list3,.adve-list4{ margin-bottom: 30px; ul{ padding: 0; list-style: none; li{ float: @left; margin-right: 19px; width: 387px; height: 132px; overflow: hidden; img{ width: @onehundred; height: @onehundred; object-fit: cover; transition: all 0.6s; } &:last-child{ margin-right: 0; } &:hover{ img{ transform: scale(1.1); -ms-transform: scale(1.1); /* IE 9 */ -moz-transform: scale(1.1); /* Firefox */ -webkit-transform: scale(1.1); /* Safari 和 Chrome */ -o-transform: scale(1.1); } } } } } .adve-list4{ margin-bottom: 50px; ul{ li{ width: 585px; height: 100px; margin-right: 30px; } } } } .footer{ padding: 25px 0; padding-bottom: 22px; background: #0134A9; overflow: hidden; .footer-top{ display: @display-flex; justify-content: space-between; .footer-text{ h6,p{ font-size: @titlesize; color: @white; } h6{ margin-bottom: 10px; } } .footer-wechat{ display: inline-block; img{ width: 120px; height: 120px; } p{ margin-top: 10px; font-size: @font-size-base; color: @white; text-align: @center; } &:last-child{ margin-left: 20px; } } } .footer-bottom{ margin-top: 35px; font-size: @titlesize; color: @white; text-align: @center; } } .scroll-up{ display:@display-none; position: fixed; right: 13%; bottom: 313px; margin-right: 10px; width: 54px; height: 54px; text-align: @center; background: #fff; z-index: 999; box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.05); overflow: hidden; a{ display: @display-flex; align-items: @center; justify-content:@center; width: 100%; height: 54px; } } .page-content{ padding-top: 8px; padding-bottom: 20px; min-height: calc(100vh - 483px); background: #f3f6f9 url(../images/bg4.jpg) top center no-repeat; .page-banner{ overflow: hidden; img{ width: @onehundred; } } .page-content-box{ margin-top: 20px; .sidenav{ float: @left; width: 260px; .sidenav-title{ padding: 0 20px; display: @display-flex; align-items: @center; font-size: @large-size; color: @white; font-weight: bold; height: 60px; background: @active-color; } .sidenav-list{ padding: 0 20px; list-style: none; padding-bottom: 20px; max-height: 565px; background: @white; overflow: hidden; overflow-y: auto; &>li{ position: relative; border-bottom: 1px dashed #ccc; overflow: hidden; a{ position: relative; display: block; } &>a{ padding: 17px 0; padding-left: 15px; font-size: 16px; color: #444; &::after{ content: ""; position: absolute; top: 25px; left: 0; bottom: 0; width: 6px; height: 6px; background: @active-color; } } &:hover, &.active{ &>a{ color: @active-color; font-weight: bold; } } &.more{ position: relative; &>a{ margin-right: 20px; } .icon{ position: absolute; top: 18px; right: 0; width: 15px; height: 15px; background: url(../images/icon8.png) center no-repeat; cursor: pointer; } &.active{ .icon{ background: url(../images/icon8_2.png) center no-repeat; } } } ul{ display: @display-none; padding: 0; position: relative; margin-bottom: 20px; list-style: none; &::before{ content: ""; position: absolute; top: -17px; left: 2px; bottom: 0; width: 2px; background: #E6E8EE; } li{ margin-bottom: 15px; a{ padding: 0 15px; font-size: 15px; color: @text-color; } &:hover,&.active{ a{ font-weight: bold; color: @active-color; &::before { content: ""; position: absolute; top: 0; left: 2px; bottom: 0; width: 2px; height: 100%; background: @active-color; } } } } } &.active{ ul{ display: @display-block; } } } } } .cont-right{ float: @right; width: 920px; } .cont-right-box{ padding: 0 30px; padding-bottom: 30px; background: @white; .page-title{ height: 55px; border-bottom: 2px solid #E3E5EA; h6{ position: relative; float: @left; height: 53px; font-size: @large-size; color: @active-color; line-height: 53px; &::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -2px; width: @onehundred; height: 2px; background: @active-color; } } .breadcrumb{ float: @right; a,span{ display: @display-block; float: @left; font-size: @font-size-base; color: @textinfo-color; line-height: 53px; } span{ margin: 0 5px; } a{ &:hover, &.active{ color: @active-color; } } } } .introduction-section{ margin-top: 25px; overflow: hidden; .introduction-title{ font-size: @large-two-size; color: @title-color; text-align: @center; } } .introduction-text{ margin-top: 20px; overflow: hidden; &,*{ font-size:@titlesize; color: @title-color; line-height: 2; } } .first-list{ padding: 0; list-style: none; li{ position: relative; padding: 18px 0; padding-left: 15px; font-size: @titlesize; border-bottom: 1px dashed #DEE2E6; overflow: hidden; &::before{ content: ""; position: absolute; top: 0; left: 0; bottom: 0; margin: auto 0; width: 5px; height: 5px; border-radius: 50%; background: @active-color; } a{ display: @display-block; float: @left; max-width: 83%; color: @title-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &:hover{ color: @active-color; } } .time{ float: @right; color: @textinfo-color; } } &.two{ border-top: 1px dashed #DEE2E6; } } .institution-search{ margin: 20px 0; text-align: @center; overflow: hidden; & *{ display: @display-inline-block; } .item-tit{ font-size: @titlesize; color: @title-color; line-height: 34px; } input{ margin-right: 8px; width: 300px; height: 34px; font-size: @titlesize; color: @text-color; border-radius: 3px; border: 1px solid #DEDEDE; } button{ margin-left: -3px; width: 60px; height: 34px; font-size: @titlesize; color: @white; border: 0; background: @active-color; border-radius: 3px; } } .institution-table{ overflow: hidden; table{ width: @onehundred; thead{ th{ padding: 15px 20px; padding-bottom: 14px; font-size: @titlesize; color: @title-color; text-align: @left; background: rgba(38, 113, 222, .1); } } tbody{ td{ padding: 10px 20px; width: 37.33%; font-size: @font-size-base; color: @title-color; line-height: 24px; a{ &:hover{ color: @active-color; text-decoration: underline; } } } tr{ &:nth-child(2n){ td{ background: rgba(243, 246, 249, .8); } } } } } } .institution-text{ margin-top: 28px; overflow: hidden; &,p{ font-size:@titlesize; color: @title-color; line-height: 2; } } .two-list{ padding: 0; list-style: none; overflow: hidden; li{ padding: 25px 0; border-bottom: 1px dashed #DEE2E6; overflow: hidden; a{ display: @display-flex; align-items: @center; } .img-box{ display: @display-flex; align-items: @center; justify-content: @center; width: 180px; height: 90px; border: 1px solid #EFEFEF; img{ max-width: 90%; max-height: 85px; } } .item-cont{ margin-left: 20px; width: calc(100% - 200px); h6{ font-size: @titlesize; color: #444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } p{ margin-top: 15px; font-size: @font-size-base; color: @active-color; } } } } .three-list{ padding: 0; margin: 0 2em; margin-top: 20px; list-style: none; overflow: hidden; li{ padding: 10px 0; font-size: @large-size; color: @title-color; overflow: hidden; a{ display: @display-flex; align-items: @center; justify-content: space-between; .item-year{ width: 110px; } .item-cont{ width: calc(100% - 110px); } } } } .meet-form{ margin-top: 20px; .el-form--inline .el-form-item{ margin-right: 17px; } .el-form-item__label{ padding-right: 0; font-size: @titlesize; color: @title-color; line-height: 34px; } .el-form-item{ margin-bottom: 20px; } .el-form-item__content{ width: 280px; line-height: 34px; .el-input__inner{ height: 34px; line-height: 34px; border-color: #DEDEDE; } .el-select, .el-date-editor.el-input, .el-date-editor.el-input__inner{ width: @onehundred; } .el-input__icon{ line-height: 34px; color: @text-color; } .code-box{ float: @left; width: calc(100% - 120px); } .code-img{ float: @right; display: @display-flex; align-items: @center; justify-content: @center; width: 100px; height: 34px; border:1px solid #DEDEDE; img{ max-width: 90%; max-height: 30px; } } } .btn-group{ margin-bottom: 20px; text-align: @center; .el-button--default{ padding: 8px 13px; font-size: @titlesize; &:hover{ color: @white; background-color: @active-color; border-color: @active-color; } } .submit-btn{ padding: 8px 13px; font-size: @titlesize; &.el-button--primary{ background-color: @active-color; border-color: @active-color; } } } } .agreement-btn{ margin-top: 25px; margin-bottom: 20px; text-align: @center; overflow: hidden; a{ display: @display-inline-block; margin: 0 10px; width: 130px; height: 38px; font-size: 15px; color: @white; line-height: 34px; border-radius: 5px; &.btn1{ background: @active-color; } &.btn2{ background: #bbb; } } } .about-section{ margin-top: 20px; overflow: hidden; .img-box{ overflow: hidden; img{ width: @onehundred; } } } } } } .m-search-btn, .m-nav-btn, .m-nav-pop, .submenu-bar, .mobile-cover { display: @display-none; } /** 党建工作 **/ .wrap-party{ .header { .header-top{ background: #FFEFEF; .w1200{ .header-top-right{ .dropdown{ .dropdown-content{ a{ &:hover{ color: #D7383C; } } } } } } } .header-main { .w1200 { .header-right { .search-box{ border-color: #D7383C; button{ background: #D7383C; } } } } } } .nav, .nav > ul > li .menu-nav ul li:hover, .page-content .page-content-box .cont-right-box .page-title h6::after, .page-content .page-content-box .cont-right-box .first-list li::before, .pages .pagination li.active, .pages .pagination li:hover, .footer{ background: #C50C11; } .nav > ul > li:hover, .nav > ul > li.active, .nav > ul > li .menu-nav{ background: #D7383C; } .page-content{ background: #f3f6f9 url(../images/bg4_2.jpg) top center no-repeat; .page-content-box .cont-right-box .page-title h6, .page-content-box .cont-right-box .page-title .breadcrumb a:hover, .page-content-box .cont-right-box .page-title .breadcrumb a.active, .page-content-box .cont-right-box .first-list li a:hover, .pages .pagination li, .pages .pagination li a{ color: #C50C11; } .pages .pagination li.active a, .pages .pagination li:hover a{ color: @white; } } } @media screen and (min-width:0px) and (max-width:1340px) { .w1200{ width: 90%; } .nav{ &>ul{ &>li{ &>a{ padding: 0 6px; } } } } .content{ .section{ &.section2 { .section2-left{ width: 66%; .news-tab{ width: @onehundred; } .news-list li{ line-height: 31px; } } .section2-right{ width: 30%; .adve-list2{ li{ height: 89px; } } } } .news-tab{ width: 66%; } .news-list{ li{ line-height: 37px; } } .memberlogin-section{ width: 30%; .memberlogin-form { .btn-group{ a,button{ width: 49%; } } } } } .adve-list{ ul{ li{ margin-right: 15px; width: 563px; height: 117px; } } } .adve-list3{ ul{ li{ margin-right: 15px; width: 370px; height: 127px; } } } .adve-list4{ ul{ li{ margin-right: 15px; width: 563px; height: 96px; } } } } .page-content { .page-content-box { .cont-right{ width: calc(100% - 290px); } .cont-right-box{ .meet-form { .el-form-item__content{ width: 255px; } } } } } .scroll-up{ right: 0; margin-right: 0; } } @media screen and (min-width:0px) and (max-width:768px) { .w1200 { width: calc(100% - 30px); } .header { position: relative; .header-main{ padding: 15px 0; .w1200{ .header-right { .search-box{ display: @display-none; position: absolute; top: @onehundred; left: 0; right: 0; width: @onehundred; z-index: 999; } } } } } .m-search-btn,.m-nav-btn{ display: @display-inline-block; margin-left: 10px; width: 20px; height: 20px; } .m-search-btn{ background: url(../images/icon2_2.png) center no-repeat; background-size: 20px; } .m-nav-btn { background: url(../images/icon3.png) center no-repeat; background-size: 20px; } .nav{ display: @display-none; } .m-nav-pop{ width: @onehundred; height: @onehundred; position: fixed; z-index: 102; left: @onehundred; top: 0; display:@display-block; transition: left 0.3s; background: @white; z-index: 99999; overflow-y: auto; .m-nav-close { position: absolute; top: 15px; right: 15px; width: 18px; img { width: @onehundred; } } .m-nav-list { padding: 0; list-style: none; position: relative; margin-top: 45px; ul { padding: 0; list-style: none; } li { padding: 0 20px; font-size: @titlesize; color: @text-color; border-bottom: 1px solid #dcdcdc; a{ display: @display-block; padding: 14px 0; } &.more{ background: url(../images/icon5.png) 95% 20px no-repeat; background-size:@titlesize; &.active { border-bottom: 0; background: url(../images/icon5_2.png) 95% 20px no-repeat; background-size:@titlesize; } } .menu-nav { display:@display-none; } } } } .content{ .section { &.section1{ margin-top: 30px; margin-bottom: 15px; } &.section2 { .section2-left{ float: none; width: @onehundred; .news-tab{ float: none; width: @onehundred; } } .section2-right{ margin-top: 20px; float: none; width: @onehundred; .adve-list2{ li{ float: @left; margin-right: 10px; width: calc((100% - 20px) / 3); height: 59px; &:nth-child(3n){ margin-right: 0; } } } } } &.section3 { padding-bottom: 45px; .timeline-section{ margin-top: 30px; padding: 0 50px; .swiper-slide { .timeline-item { .timeline-content{ h6,p{ font-size: @font-size-base; line-height: 18px; } } } } } } &.section4{ margin-bottom: 30px; } .news-tab{ width: 55%; } .memberlogin-section{ width: 42%; } .news-list { li{ a{ max-width: 71%; } } } } .adve-list { margin-bottom: 25px; ul { li{ margin-right: 10px; width: calc((100% - 10px) / 2); height: 76px; } } } .adve-list3 { margin-bottom: 10px; ul{ li{ margin-right: 10px; margin-bottom: 15px; width: calc((100% - 10px) / 2); height: 124px; &:nth-child(2n){ margin-right: 0; } } } } .adve-list4 { margin-bottom: 30px; ul{ li{ margin-right: 10px; margin-bottom: 15px; width: calc((100% - 10px) / 2); height: 60px; &:nth-child(2n){ margin-right: 0; } } } } } .page-content { background-size: @onehundred !important; .page-content-box { .submenu-bar { display: block; padding-left: 30px; margin-bottom: 20px; font-size: @titlesize; color: @title-color; background: url(../images/icon3.png) left center no-repeat; background-size: 20px; } .mobile-cover { position: fixed; top: 0; left: 0; bottom: 0; width: @onehundred; height: @onehundred; background: rgba(0, 0, 0, .5); z-index: 999; } .sidenav{ position: fixed; z-index: 2000; top: 0; left: -60%; width: 60%; bottom: 0; overflow-y: auto; background-color: #fff; transition: left 0.6s; .sidenav-list{ max-height: inherit; max-height: initial; } } .cont-right{ float: none; width: @onehundred; } } } } @media screen and (min-width:0px) and (max-width:640px) { .header { .header-top { height: 35px; line-height: 35px; .w1200 { .welcome{ display: @display-none; } .header-top-right { .nav-link,.dropdown{ font-size: @small-size; } .nav-link{ margin-right: 15px; } .dropdown{ .dropdown-content{ top: 34px; } } } } } .header-main{ padding: 10px 0; .logo{ img{ height: 30px; } } } } .banner{ .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 8px; } .swiper-pagination-bullet{ width: 8px; height: 8px; } } .content { .section{ &.section1{ margin-top: 25px; } &.section2 { margin-bottom: 25px; .section2-right{ padding: 10px 15px; padding-bottom: 5px; .adve-list2 li{ width: calc((100% - 10px) / 2); &:nth-child(2n){ margin-right: 0; } &:nth-child(3n){ margin-right: 10px; } } } } &.section3{ padding: 25px 0; .timeline-section{ margin-top: 10px; .swiper-slide{ .timeline-item { .timeline-content{ top: 203px; } } &:nth-child(2n){ height: 345px; .timeline-content{ top: inherit; bottom: 203px; } } } } } &.section4{ margin-bottom: 25px; .meeting-table{ overflow: hidden; overflow-x: auto; table { thead{ th{ padding: 8px 10px; font-size: @font-size-base; } } tbody { tr{ td{ padding: 8px 10px; font-size: @font-size-base; } } } } } } .section-title2{ h6{ font-size: @titlesize; } } .news-tab{ float: none; width: @onehundred; .hd{ height: 46px; ul{ height: 40px; li{ padding-left: 15px; width: 102px; height: 46px; font-size: @titlesize; line-height: 40px; &.on{ background-size: @onehundred @onehundred !important; } &:not(:first-child).on{ height: 40px; } .more{ line-height: 40px; } } } } } .news-list{ li{ font-size: @font-size-base; line-height: 32px; &.first { a{ .img-box{ width: 130px; height: 77px; } .item-cont{ margin-left: 140px; h6{ font-size: @font-size-base; line-height: 25px; } .item-text{ font-size: @small-size; line-height: 20px; } .item-time{ display: @display-none; } } } } } } .memberlogin-section{ float: none; margin-top: 15px; width: @onehundred; } .section-title{ height: 40px; h6{ padding: 0 15px; width: auto; height: 40px; font-size: @titlesize; line-height: 40px; } } } .adve-list { margin-bottom: 10px; ul{ li{ float: none; margin-right: 0; margin-bottom: 15px; width: @onehundred; height: 72px; } } } .adve-section{ margin-bottom: 25px; } .adve-list3{ margin-bottom: 10px; ul{ li{ float: none; margin-right: 0; width: 100%; height: auto; } } } .adve-list4{ margin-bottom: 20px; ul{ li{ float: none; margin-right: 0; width: 100%; height: auto; } } } } .page-content{ .page-content-box { .cont-right-box{ padding: 0 15px; padding-bottom: 15px; .page-title{ padding-top: 5px; height: 37px; h6{ float: none; display: @display-inline-block; height: 30px; font-size: @titlesize; line-height: 30px; } .breadcrumb{ display: @display-none; } } .introduction-section{ margin-top: 20px; .introduction-title{ font-size: @large-size; } .institution-text{ margin-top: 15px; &,*{ font-size: @font-size-base; line-height: 1.75; } } } .first-list{ li{ padding: 12px 0; padding-left: 12px; font-size: @font-size-base; a{ max-width: 72%; } } } .three-list{ margin: 0 1em; margin-top: 10px; li{ font-size: @font-size-base; a{ .item-year{ width: 90px; } .item-cont{ width: calc(100% - 100px); } } } } .introduction-text{ margin-top: 15px; &,*{ font-size: @font-size-base; line-height: 1.75; } } .meet-form{ margin-bottom: 20px; .el-form-item{ margin-bottom: 15px; } .el-form--inline { .el-form-item{ display: @display-block; margin-right: 0; width: @onehundred; } } .el-form-item__label{ font-size: @font-size-base; text-align: @left; line-height: 25px; } .el-form-item__content{ width: @onehundred; } .btn-group{ text-align: @center; } } .institution-search{ margin: 15px 0; text-align: @left; *{ display: @display-block; } .item-tit{ margin-bottom: 3px; font-size: @font-size-base; line-height: 25px; } input{ margin-right: 0; width: @onehundred; font-size: @font-size-base; } button{ margin: 0 auto; margin-top: 15px; img{ margin: 0 auto; } } } .institution-table{ overflow-x: auto; table { thead{ th{ padding: 8px 10px; font-size: @font-size-base; white-space: nowrap; } } tbody { td{ width: auto; padding: 8px 10px; font-size: @font-size-base; } } } } } } } .pages{ margin-top: 15px; .pagination li{ &.first,&.last{ display: @display-none; } } } .TextTitle{ padding: 15px 0; h5{ font-size: @large-size; } h6{ font-size: @titlesize; } .shar{ font-size: @small-size; } } .NewsText{ &,*{ font-size: @font-size-base; line-height: 1.75; } } .footer{ padding: 15px 0; .footer-top{ display: @display-block; .footer-text{ margin-bottom: 10px; h6,p{ font-size: @font-size-base; } h6{ margin-bottom: 5px; } p{ line-height: 1.75; } } .footer-wechat{ margin-top: 20px; text-align: @center; p{ margin-top: 5px; line-height: 1.75; } } } .footer-bottom{ margin-top: 20px; font-size: @font-size-base; line-height: 1.75; } } .scroll-up{ right: 15px; bottom: 15px; width: 40px; height: 40px; a{ height: 40px; } } }