@import "common.less"; @media (max-width: 767px) { header{ height: 68px; z-index: 5; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; .header-top{ .logo{ padding: 0; width: 100%; margin: 0; img.visible-xs-block{ display: none!important; } img.index{ display: block!important; height: 51px; } } } .navbar { background: none; width: auto; padding: 0; .navbar-header{ .navbar-toggle{ margin: 0; &[aria-expanded="false"] { .icon-bar { background-color: @red; } } &[aria-expanded="true"] { .icon-bar { background-color: @white; } } } } .header_right{ width: 100%; height: 50px; .navbar-header{ justify-self: flex-end; order: 3; } .topsite_btn{ justify-self: flex-end; order: 2; margin-right: 15px; img.visible-xs-block{ display: none!important; } img.index{ display: block!important; } img{ height: 23px; } } .search_nav{ justify-self: flex-end; order: 1; img.visible-xs-block{ display: none!important; } img.index{ display: block!important; } img{ height: 23px; } } } } } } .index-banner{ background-color: @f6f6f6; } #swiper-banner { margin: 0 auto; border-bottom: 5px solid @red; a{ display: block; width: 100%; height: 100%; text-decoration: none; .banner_img{ width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; img { max-width: none; height: 210px; } } } .swiper-pagination{ bottom: 3px; } .swiper-pagination .swiper-pagination-bullet { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; background: @white; opacity: 1; width: 10px; height: 10px; margin: 0 4px; } .swiper-pagination .swiper-pagination-bullet-active { background: @red !important; width: 10px; border-radius: 50%; } @media (min-width: @min_width) { position: relative; border-bottom: 6px solid @red; a{ .banner_img{ width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; img { max-width: none; height: 470px; } } .banner_txt { position: absolute; left: 0; right: 0; z-index: 1; bottom: 0; background-color: rgba(0,0,0,0.8); height: 68px; line-height: 68px; padding-left: 10%; span{ color: @white; font-size: 26px; } } } .swiper-pagination{ bottom: 22px; width: auto; left: auto; right: 10%; } .swiper-pagination .swiper-pagination-bullet{ margin: 0 8px; width: 13px; height: 13px; } } } .wrap{ .head{ margin: 0px auto; padding: 25px 0 20px 0; text-align: center; .head-title { width: 100%; a{ display: flex; justify-content: center; align-items: center; line-height: 20px; text-decoration: none; .ch { font-size: 20px; color: @020202; text-align: right; flex: 1; width: 50%; margin-right: 10px; } .en { font-family: Arial; font-size: 20px; color: @red; margin-left: 10px; flex: 1; width: 50%; text-align: left; } } } .head-bottom { width: 100%; height: 6px; display: flex; justify-content: center; align-items: center; margin-top: 10px; img{ height: 6px; display: flex; margin: 0; padding: 0; } } } @media (min-width: @min_width) { .head{ margin: 0px auto; padding: 35px 0 30px 0; } } } .box{ .title{ display: flex; justify-content: flex-start; align-items: center; padding: 25px 0; margin-left: 15px; position: relative; &:before{ position: absolute; content: ''; left: 0; bottom: 0; z-index: 1; width: 100%; height: 1px; background-color: @dcdcdc; transform: scaleY(0.5); @media (min-width: @min_width) { transform: scaleY(1); } } &:after{ position: absolute; content: ''; left: 0; bottom: 0; z-index: 2; background-color: @red; height: 2px; width: 20px; } a{ display: block; width: 100%; } .tip{ display: flex; justify-content: flex-start; align-items: flex-end; h1{ margin: 0; font-size: 20px; line-height: 20px; font-weight: bold; color: @020202; } h3{ margin: 0 0 0 6px; font-size: 12px; line-height: 12px; color: @aeaeae; font-weight: @font_weight; } img{ height: 12px; margin-left: 20px; } } } .con{ padding: 14px 15px; } @media (min-width: @min_width) { .title{ padding: 20px 0; margin-left: 0; } .con{ padding: 28px 0; } } } .index-01{ .con{ padding: 0 15px; .swiper-pagination{ bottom: 14px; } .swiper-pagination .swiper-pagination-bullet { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; background: @c7c7cf; opacity: 1; width: 32px; height: 5px; margin: 0 7px; border-radius: 0; position: relative; } .swiper-pagination .swiper-pagination-bullet-active { background: @red !important; } .swiper-slide{ a{ text-decoration: none; .img{ display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 2px 2px 0 0; img{ height: 215px; max-width: none; min-width: 100%; width: auto; } } .txt{ position: relative; padding: 20px 15px 0 15px; height: 222px; &:after{ z-index: -1; position: absolute; content: ""; border: 1px solid @e5e5e5; border-top: 0; transform: scale(0.5); transform-origin: 0 0; width: 200%; height: 200%; top: 0; left: 0; } .top{ display: flex; justify-content: space-between; align-items: center; .date{ font-size: 14px; color: @747474; line-height: 100%; } .views{ font-size: 13px; color: @747474; line-height: 100%; display: flex; justify-content: space-between; align-items: center; img{ width: 10px; height: 12px; margin-left: 6px; } } } h3{ margin: 34px 0 0 0; font-size: 15px; color: @black; line-height: 100%; } p{ margin: 24px 0 0 0; font-size: 14px; color: @747474; line-height: 25px; } } } } } @media (min-width: @min_width) { .con{ padding: 0; margin-top: 18px; .swiper-container{ padding-bottom: 50px; } .swiper-slide{ //width: 360px; //&:nth-child(2){ // margin: 0 30px; //} a{ text-decoration: none; .img{ border-radius: 5px 5px 0 0; img{ height: 225px; } } .txt{ padding: 22px 20px 0px 20px; height: 203px; &:after{ transform: scale(1); width: 100%; height: 100%; transition: all .3s; } .top{ .date{ font-size: 14px; color: @cdced2; line-height: 100%; } .views{ font-size: 13px; color: @cdced2; line-height: 100%; img{ width: 10px; height: 12px; margin-left: 6px; } } } h3{ margin: 35px 0 0 0; font-size: 16px; color: @black; line-height: 100%; } p{ margin: 24px 0 0 0; font-size: 14px; color: @c7c7cf; line-height: 25px; } } &:hover{ .txt{ &:after{ border: 1px solid @red; border-bottom-width: 5px; border-top: 0; } } } } } } } } .index01{ .index01-tip{ .tip{ display: flex; justify-content: center; align-items: center; flex-flow: column; h1{ margin: 0; margin-top: 25px; color: @020202; font-size: 20px; line-height: 20px; font-weight: bold; } h3{ margin: 0; margin-top: 6px; color: @aeaeae; font-size: 12px; line-height: 12px; } } .tip_tab{ margin: 25px 15px 0 15px; display: flex; justify-content: space-between; align-items: center; a{ text-decoration: none; background-color: @white; flex: 1; display: flex; justify-content: center; align-items: center; height: 40px; font-size: 16px; position: relative; color: @black; &:after{ position: absolute; content: ''; left: 0; top: 0; z-index: 1; width: 200%; height: 200%; border: 1px solid @graye1; transform: scale(0.5); transform-origin: 0 0; } &:first-child{ margin-right: 6px; } &.active{ color: @white; background-color: @red; &:after{ display: none; } } } } } .index01-con{ margin-top: 20px; &>div{ display: none; .swiper-slide{ width: 64%; margin-right: 25px; a{ text-decoration: none; .img{ display: flex; justify-content: center; align-items: center; overflow: hidden; img{ height: 150px; max-width: none; } } .text{ display: flex; justify-content: center; align-items: flex-end; padding: 22px 0; img{ height: 16px; } h1{ margin: 0; margin-left: 10px; color: @0e0e0d; font-size: 16px; line-height: 16px; font-weight: normal; max-width: 75%; } } &:active,&:hover{ .text{ h1{ color: @red; } } } } } } } @media (min-width: @min_width) { padding: 60px 0 30px 0; .index01-tip{ display: flex; justify-content: center; align-items: center; .tip{ margin-top: 0px; h1{ font-size: 20px; margin-top: 0; } h3{ font-size: 12px; margin-top: 6px; } } .tip_tab{ margin: 0px 0 0 28px; a{ font-size: 16px; min-width: 170px; width: auto; height: 40px; &:after{ width: 100%; height: 100%; border: 1px solid @graye1; transform: scale(1); } &:first-child{ margin-right: 6px; } } } } .index01-con{ margin-top: 30px; &>div{ .swiper-slide{ width: 274px; margin-right: 14px; &:last-child{ margin-right: 0; } a{ .img{ img{ height: 170px; } } .text{ padding: 13px 0; img{ height: 14px; } h1{ margin: 0; margin-left: 12px; color: @0e0e0d; font-size: 16px; line-height: 16px; } } } } } } } } .index02{ padding: 25px 0 5px 0; .l{ background-color: @f6f6f6; .con{ ul{ padding: 0; margin: 0; li{ line-height: 35px; list-style: none; height: 35px; position: relative; padding-left: 16px; &:before{ position: absolute; content: ""; display: inline-block; width: 5px; height: 5px; left: 0; top: calc(~"50% - 3px"); border-radius: 50%; background-color: @red; } a{ color: @black; font-size: 15px; font-weight: @font_weight; text-overflow: ellipsis; -moz-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; -webkit-box-orient: vertical; } span{ color: @c7c7c7; font-size: 15px; margin-left: 25px; min-width: 90px; } img{ margin-left: 23px; width: 15px; } } } } } .r{ .title{ margin: 0 15px; &:before,&:after{ display: none; } } .con{ padding: 0 15px; #swiper-index02 { margin: 0 auto; a{ width: 100%; height: 100%; text-decoration: none; display: flex; justify-content: center; align-items: center; overflow: hidden; img { max-width: none; min-width: 100%; max-height: 210px; display: block; } } .swiper-pagination{ bottom: 3px; } .swiper-pagination .swiper-pagination-bullet { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; background: @white; opacity: 1; width: 10px; height: 10px; margin: 0 4px; } .swiper-pagination .swiper-pagination-bullet-active { background: @red !important; width: 10px; border-radius: 50%; } @media (min-width: @min_width) { position: relative; a{ img { max-width: none; min-width: 100%; max-height: 230px; display: block; } } .swiper-pagination{ bottom: 22px; } .swiper-pagination .swiper-pagination-bullet{ margin: 0 5px; } } } } } @media (min-width: @min_width) { padding: 18px 0 0 0; &>div{ display: flex; justify-content: space-between; align-items: flex-start; } .l{ background: none; flex: 1; min-width: 50%; .con{ ul{ li{ display: flex; justify-content: flex-start; align-items: center; } } } } .r{ width: 370px; margin-left: 30px; .title{ margin: 0; } .con{ padding: 0; margin: 0; #swiper-index02 { a{ img { max-height: 230px; } } .swiper-pagination{ bottom: 6px; } } } } } } .index03{ padding: 0; background-color: @f6f6f6; .l{ .con{ padding: 19px 15px 0 15px; .txt{ font-size: 15px; color: @black; line-height: 30px; text-align: justify; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; } ul{ margin: 20px 0 0 0; padding: 0; display: flex; justify-content: space-between; align-items: center; li{ list-style: none; flex: 1; &:first-child{ margin-right: 13px; } a{ .img{ display: flex; overflow: hidden; justify-content: center; align-items: center; width: 100%; img{ height: 115px; max-width: none; min-width: 100%; display: block; } } h1{ padding: 0; margin: 0; line-height: 100%; margin-top: 12px; font-size: 16px; font-weight: bold; color: @black; display: flex; justify-content: center; align-items: center; img{ margin-left: 10px; } } } } } } } .r{ .con{ padding: 20px 15px; ul{ margin: 0; padding: 0; li{ line-height: 30px; height: 30px; list-style: none; position: relative; font-size: 15px; } } } } @media (min-width: @min_width) { background-color: @f6f6f6; padding: 18px 0 10px 0; &>div{ display: flex; justify-content: space-between; align-items: flex-start; } .l{ flex: 1; min-width: 50%; .con{ padding: 38px 0; display: flex; justify-content: space-between; align-items: flex-start; .txt{ flex: 1; line-height: 25px; } ul{ margin: 5px 0 0 41px; li{ } } } } .r{ width: 370px; margin-left: 30px; .title{ margin: 0; } .con{ margin: 0; padding: 34px 0; ul{ li{ padding-left: 16px; line-height: 30px; height: 30px; &:before{ position: absolute; content: url("@{images}common/round.svg"); display: inline-block; left: 0; top: 0; z-index: 1; } } } } } } }

map