@red: #da0301; @gray3a: #3a3a3a; @grayee: #eeeeee; body{ font-family: "Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif; } .maxW1440 { max-width: 1440px; margin: 0 auto; } .text-ellipsis-1 { text-overflow: ellipsis; -moz-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .text-ellipsis-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .no_line { &:hover, &:focus { text-decoration: none !important; } } //???? .navbar-red { border: 0; border-radius: 0; margin-bottom: 15px; } // search .t-search { position: fixed; left: -1px; right: -1px; top: 0; height: 100vh; margin: 0; padding: 0; padding-top: 100px; z-index: 20; background-color: rgba(51,51,51,0.95); display: flex; justify-content: center; align-items: center; a.search-toggle { height: 23px; right: 20px; top: 12px; width: 23px; position: absolute; z-index: 99; .fs-icon--close { color: #fff; display: flex; justify-content: center; align-items: center; fill: currentColor; } } form { max-width: 60%; width: 100%; margin: 0 auto; align-items: center; border-bottom: 2px solid fade(#fff,80%); display: flex; justify-content: center; position: relative; input { background: none; border: none; color: #fff; font-size: 16px; @media (min-width: 768px) { font-size: 20px; } font-weight: 400; text-align: center; width: 75%; } ::-webkit-input-placeholder { color: fade(#fff, 80%); } :-moz-placeholder { color: fade(#fff, 80%); } ::-moz-placeholder { color: fade(#fff, 80%); } :-ms-input-placeholder { color: fade(#fff, 80%); } button { color: #fff; height: 100%; position: absolute; right: 0; top: 0; fill: currentColor; background: none; border: 0; border-radius: 0; svg { height: 20px; } } } } @media (max-width: 767px) { .navbar-red { background-color: #fff; .m-logo-white { display: none; padding: 0; position: fixed; z-index: 23; top: 12px; left: 12px; text-align: center; } .m-logo i { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background-color: white; display: none; } .navbar-header { margin-right: -3px; margin-left: -3px; display: flex; justify-content: space-between; align-items: center; &:after,&:before{ display: none; } .right-btn{ display: flex; justify-content: space-between; align-items: center; &>div{ height: 23px; } img{ height: 23px; } .search_nav{ margin-right: 15px; } .topsite_btn{ margin-right: 15px; } } .navbar-toggle { position: fixed; right: 15px; top: 15px; margin: 0; padding:0; border-radius: 0; z-index: 23; .icon-bar { transition: all .2s ease-in-out; width: 23px; &:nth-child(2) { margin: 6px 0; } } &[aria-expanded="false"] { position: relative; right: 0; top: 0; z-index: 1; .icon-bar { background-color: #da0301; } & + a.navbar-brand{ position: static; z-index: 100; display: none!important; &.index_navbar{ display: block!important; } .show{ display: block!important; } .hidden{ display: none!important; } } } &[aria-expanded="true"] { .icon-bar { background-color: #fff; &:nth-child(1) { transform-origin: 0; transform: rotate(45deg); } &:nth-child(2) { opacity: 0; } &:nth-child(3) { transform-origin: 0; transform: rotate(-45deg); } } & + a.navbar-brand{ position: fixed; z-index: 100; display: block!important; .show{ display: none!important; } .hidden{ display: block!important; } } } } .navbar-brand { height: 50px; padding: 12px 0; img { width: 204px/2; } } } .navbar-collapse { position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: 0; padding: 0; z-index: 20; background-color: rgba(75, 75, 75, .9); .navbar-nav { margin: 0; margin-top: 75px; li { text-align: center; border-bottom: 1px solid #8a8a8a; margin: 0 50px; a { font-size: 20px; font-weight: 400; line-height: 30px; color: #fff; &:hover, &:focus { background-color: inherit; } } } } } } .topsite { text-align: center; .topsite_con { background-color: #fff; position: fixed; top: 0; z-index: 100; left: 0; right: 0; height: 100vh; h3{ color:@gray3a; font-size: 18px; line-height: 45px; margin: 0; position: relative; display: block; font-weight: normal; &:after{ position: absolute; border-bottom: 1px solid @gray3a; content: ""; width:200%; height: 200%; top:0; left:0; transform: scale(0.5); transform-origin: 0 0; z-index: -1; } a{ position: absolute; right:15px; top:0; z-index: 200; .fs-icon--close{ width:18px; height:18px; fill: @gray3a; } } } h4{ color:@gray3a; margin: 0; padding: 0 15px; font-weight: normal; font-size: 14px; line-height: 45px; text-align: left; } ul{ margin: 0; padding: 0 15px; overflow-y: scroll; height: calc(~"100vh - 90px"); padding-bottom: 90px; /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ &::-webkit-scrollbar { width: 2px; height: 16px; background-color: rgba(255,255,255,0.1); } /*定义滚动条轨道 内阴影+圆角*/ &::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.2); border-radius: 4px; background-color: rgba(255,255,255,0.1); } /*定义滑块 内阴影+圆角*/ &::-webkit-scrollbar-thumb { border-radius: 4px; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.2); background-color: rgba(0,0,0,0.1); } li{ float: left; background-color: @grayee; border-radius:3px; line-height: 34px; display: inline-block; margin: 0 14px 14px 0; a{ color:@gray3a; font-size: 14px; display: inline-block; line-height: 34px; padding: 0 14px; } } } } } .topsite_btn{ margin-right: 15px; img.visible-xs-block{ display: none!important; } img.index{ display: block!important; } img{ height: 20px; } } .search_nav{ cursor: pointer; margin-right: 15px; img.visible-xs-block{ display: none!important; } img.index{ display: block!important; } img{ height: 20px; } } } @media (min-width: 768px) { .navbar-red { background-color: @red; .navbar-nav { background-color: rgba(75, 75, 75, 0); display: flex !important; justify-content: flex-start; width: 100%; li { //margin-right: 20px; &:last-child { display: none !important; } a { font-size: 16px; font-weight: 400; padding: 15px 0; &:hover, &:focus { background-color: inherit; } } a, a.active { color: #fff; } &:hover{ a{ font-weight: bold; } } &.line { color: #fff; text-align: center; padding: 15px 0; line-height: 20px; flex: 1; } } } } .topsite { position: absolute; top: 130px; left: 0; right: 0; width: 100%; max-width: 1440px; z-index: 23; padding: 20px 23px; margin-bottom: 10px; background: rgba(0,0,0,0.8); transition: all .3s; .arrow { margin-top: -16px; position: absolute; left: calc(~"95% - 15px"); top: 0; height: 15px; z-index: 1; img{ height: 15px; } } .sitelink { padding: 0 30px; text-align: center; li { display: inline-block; padding-right: 30px; height: 30px; line-height: 30px; white-space: nowrap; a { color: #fff; font-size: 12px; } } } } .search_nav{ cursor: pointer; } } // 单页面 .page { margin-top: 10px; background-color: #c82b1d; color: #fff; @media (min-width: 768px) { margin-top: 0px; background: none; color: #fff; } .navbar-brand { h1 { font-size: 20px; line-height: 28px; display: inline; font-weight: 400; } h3 { font-size: 15px; line-height: 28px; display: inline; font-weight: 400; } } .icon-bar { background-color: #fff !important; } .navbar-toggle { &[aria-expanded="true"] { top: 24px; } } } .top { padding: 0 33px; .logo { max-width: 75%; } .top-btn { li { float: left; list-style: none; margin: 0 10px; line-height: 55px; &:last-child{ margin-right: 0; } } } } .tip { text-align: center; padding-top: 28px; padding-bottom: 20px; @media (min-width: 768px) { padding-top: 37px; padding-bottom: 12px; } h1 { font-size: 20px; font-weight: 300; color: #000; margin: 0; } h3 { font-size: 15px; font-weight: 400; font-family: "Arial"; color: #dc1413; margin: 0; margin-top: 12px; margin-bottom: 20px; } i { display: inline-block; position: relative; span { display: block; height: 15px; width: 15px; background-color: #d7d7d7; transform: rotate(45deg); } &:before { content: ""; position: absolute; left: -90px; top: 7px; display: block; background-color: #d7d7d7; width: 66px; height: 1px; transform: scaleY(0.5); @media (min-width: 768px) { transform: none; } } &:after { content: ""; position: absolute; right: -90px; top: 7px; background-color: #d7d7d7; width: 66px; height: 1px; transform: scaleY(0.5); @media (min-width: 768px) { transform: none; } } } &.color-white { h1, h3 { color: #fff; } i { &:before, &:after, span { background-color: #fff; } } } } .breadcrumbs { ul { padding: 0 15px; margin-top: 32px; margin-bottom: 15px; li { list-style: none; a { color: #000; font-size: 14px; } } } } .line-red { height: 1px; width: 100%; background-color: #da0302; } .line-gray { height: 1px; width: 100%; background-color: #d8d8d8; } .line-dashed { display: block; width: 100%; border-bottom: 1px dashed #d8d8d8; margin: 38px 0; margin-left: -16px; } .pic-list { ul { margin-top: 30px; padding: 0; display: flex; justify-content: flex-start; flex-wrap: wrap; li { list-style: none; border: 1px solid #ededed; padding: 0; margin-right: 15px; margin-bottom: 30px; width: calc(~'50% - 7.5px'); &:nth-child(2n) { margin-right: 0; } @media (min-width: 768px) { width: calc(~'25% - 25.5px'); margin-right: 30px; &:nth-child(2n) { margin-right: 30px; } &:nth-child(4n) { margin-right: 0; } } .img { width: 100%; } .text { padding: 12px 15px; p { font-size: 13px; font-family: "Arial"; color: #959595; display: flex; justify-content: space-between; align-items: center; a { display: block; height: 22px; width: 30px; background-image: url('../images/index/index03_more.png'); background-position: right calc(~'50% - 2px'); background-repeat: no-repeat; background-size: 14px 7px; } } h4 { border-top: 1px solid #f2f2f2; margin-top: 0; padding-top: 10px; font-size: 14px; color: #000; line-height: 26px; font-weight: 400; } @media (min-width: 768px) { p { font-size: 16px; a { background-size: 17px 8px; } } h4 { font-size: 16px; } } } } } } .pagination { margin:20px 15px; li { margin: 0 2.5px; display: inline-block; a, span { border-radius: 4px !important; border: 0; font-size: 16px; color: #a7a7a7; } @media (min-width: 768px) { a { padding: 11px 18px; } } &.active, &:hover { a, a:hover, a:focus, span, span:hover, span:focus { color: #fff; background-color: #da0302; } } } @media (min-width: 768px) { margin:20px 0; } } //footer { // .copyright { // font-size: 1.17rem; // @media (min-width: 768px) { // font-size: 14px; // } // line-height: 24px; // background-color: #fff; // padding: 20px 0; // a { // color: #000; // } // } //} footer{ background-color: #e7e7e7; font-size: 14px; color: #000; text-align: center; padding: 33px 0; a{ color: #000; &:hover{ text-decoration: none; } } @media (min-width: 768px) { padding: 23px 0; .txt01{ position: relative; display: flex; justify-content: center; align-items: center; &:after{ position: absolute; content: ""; left: 0; right: 0; top: calc(~"50% - 1px"); height: 1px; background-color: #d9d9d9; z-index: 1; } p{ background-color: #e7e7e7; margin: 0; padding-left: 11px; position: relative; z-index: 2; &:first-child{ padding-left: 20px; } &:last-child{ padding-right: 20px; } } } .txt02{ display: flex; justify-content: center; align-items: center; margin-top: 14px; p{ margin: 0; padding-left: 11px; &:first-child{ padding-left: 20px; } &:last-child{ padding-right: 20px; } } } } } //#backtop { // position: fixed; // width: 33px; // height: 33px; // right: 0px; // bottom: 3px; // cursor: pointer; // opacity: 0.9; // display: none; // text-align: center; // line-height: 33px; // background-color: #666; // img { // width: 22px; // height: 13px; // margin: 10px 0; // } //} #backtop{ position: fixed; bottom: 20px; right: 20px; width: 70px; height: 70px; display: flex; justify-content: center; flex-flow: column; align-items: center; border-radius: 50%; background-color: fade(@red,60%); z-index: 18; cursor: pointer; img{ width: 21px; } span{ margin-top: 4px; display: block; color: #ffffff; font-size: 10px; line-height: 15px; } &:hover, &:active{ background-color: fade(@red,80%); } } .d-move{ //height: 100%; //overflow: hidden; height: 100% !important; overflow: hidden !important; position: fixed!important; } #search_mask { background-color: rgba(0,0,0,.7); position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 88; display: none; } #search { position: fixed; width: 100%; top: 120px; z-index: 89; display: none; left: 0; } #search .search_inner { margin: 0 auto; width: 96%; max-width: 1170px; position: relative; background: #fff; padding: 30px 0 120px 0; } .search_box { width: 80%; margin: 5% auto 0 auto; border-bottom: 1px solid #474747; overflow: hidden; } .search_box .search_txt { width: 90%; float: left; height: 44px; line-height: 44px; margin: 12px 0; border: none 0px; font: normal 2em "微软雅黑"; } .search_box .search_btn { background: url('../images/icon/search_btn.png') no-repeat; width: 44px; height: 44px; float: right; border: none 0px; margin: 0px 0 24px 0; } #search .close_btn { right: 15px; position: absolute; top: 15px; right: 25px; font-size: 25px; background: url('../images/icon/i_close_btn.png') no-repeat; width: 30px; height: 30px; text-indent: -9999px; }

map