/* -----------------------------共公部分:包括有元素的共公样式以及页头、页脚 ------------------- */ /* 说明: pc端: 设计稿1440*900 所有尺寸基本按px来即可; 正文 16px; 移动端: 设计稿宽800px,按逻辑尺寸的两倍制作。因此真实尺寸需要除2; 如设计稿字体大小28px,则实真字体大小为28px/2=14px; 或使用vw 字体大小:28/800*10 = 3.5vw 正文 14px 或 3.5vw */ @import "/dev/static/font/cavan.css"; @import "/dev/static/font/iconfont.css"; html, body, h1, h2, h3, div, span, header, footer, nav, section, input { margin: 0; padding: 0; } input:focus { outline: none; } html, body { width: 100%; height: 100%; font-size: 16px; color: #231f20; font-family: 'MyFont2'; } a{ text-decoration: none; color: #231f20; } img{ width: 100%; } /* 没图片是不显示 */ img[src=""], img:not([src]) { opacity: 0; } .btn{ position: relative; min-width: 200px; height: 50px; margin: 0px auto; background: #B81C25; box-sizing: border-box; color: #ffffff; display: inline-block; text-align: center; line-height: 50px; font-size: 14px; transition: all .3s ease-in-out; cursor: pointer; border-radius: 8px; &>span{ position: relative; top: 0px; transition: all .3s ease-in-out; } &:hover{ // background: #48A038; // border-color: #48A038; &>span{ top: -1px; } } } .btnBlack{ color: #000; border: 1px solid #000; &:hover{ color: #ffffff; } } .btn2{ position: relative; z-index: 2; box-sizing: border-box; color: #000; display: inline-block; text-align: center; font-size: 14px; transition: all .3s ease-in-out; cursor: pointer; &:hover{ color: #48A038; } } .btn3{ position: relative; width: 240px; height: 60px; box-sizing: border-box; color: #000; display: flex; text-align: center; line-height: 60px; font-size: 18px; transition: all .3s ease-in-out; cursor: pointer; border-radius: 50px; box-sizing: border-box; border: 1px solid #000; justify-content: center; align-items: center; overflow: hidden; &::before{ content: ''; width: 10px; height: 10px; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: #B81C25; border-radius: 50%; transition: all .3s ease-in-out; z-index: -1; } &>span{ // transition: all .3s ease-in-out; transform: rotate(90deg); font-size: 30px; margin-left: 8px; } &:hover{ color: #fff; border: 1px solid #B81C25; &::before{ transform: translateX(-50%) scale(30); } } } .btnW{ color: #fff; &:hover{ color: #48A038; } } //公共文本样式,默认是加粗,后面加R表示不加粗,正文文本样式用text .title{ font-size: 56px; font-family: 'MyFont1',sans-serif; font-weight: bold; } // 正文文本样式 .text{ font-size: 20px; line-height: 44px; } .goTop{ position: absolute; bottom: 360px; right:140px; transform: rotate(-90deg); display: none; .goTopBtn{ width: 84px; height: 84px; background: #B2B5B7; border-radius: 42px; position: relative; transition: all .3s ease-in-out; a{ padding: 0px; width: 100%; height: 100%; } .btnShow{ .btnIcon{ background-color: #fff; } } &:hover{ background:#48A038; } } } .aniTxtUp{ &>div{ display: inline-block; } } header{ width: 100%; position: fixed; z-index: 9; transition: all .3s ease-in-out; .headCon{ width: 100%; margin: 0 auto; max-width: 1920px; // box-shadow: 0px 0px 34px 9px rgba(0,0,0,0.1); background: #ffffff; // border-bottom: 1px solid rgba(0,0,0,0.1); box-shadow: 6px 8px 10px 0px rgba(159,176,191,0.13); } .menuType{ background: #ffffff12; border-bottom: 0px solid rgba(0,0,0,0); box-shadow: none; .logo{ } .headerPC{ .menu{ &>div{ &>a{ color: #ffffff; } } .menuClicked{ &::before{ background: #fff; } } } .logo{ background: url("../images/logoW.png") no-repeat; background-size: 180px 40px; } .logos{ background: url("../images/logoW.png") no-repeat; background-size: 180px 40px; } .language{ .btn2{ color: #ffffff; &:hover{ color: #B81C25; &.aborder{ border: 1px solid #B81C25; background: #B81C25; color: #ffffff; } } } .aborder{ border: 1px solid #ffffff; } .line{ background: #ffffff; } } } .headerMobile{ .logo{ background: url("../images/logoW.png") no-repeat; background-size: contain; } .logos{ background: url("../images/logoW.png") no-repeat; background-size: contain; } } } } .hideHeader{ transform: translateY(-100%); } .headerPC{ width: 100%; box-sizing: border-box; padding: 0px 100px; height: 70px; display: flex; color: #000; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 400; position: relative; .logo{ width: 180px; height: 40px; background: url("../images/logoB.png") no-repeat; background-size: 180px 40px; cursor: pointer; position: absolute; left: 100px; } .logos{ width: 180px; height: 40px; background: url("../images/logoB.png") no-repeat; background-size: 180px 40px; cursor: pointer; position: absolute; left: 100px; } .menu{ display: flex; position: relative; height: 70px; align-items: center; margin: 0 auto; &>div{ display: inline-block; padding: 0 30px; position: relative; height: 70px; cursor: pointer; &>a{ line-height: 70px; z-index: 11; transition: all .3s ease; font-size: 18px; } &:hover{ &>a{color: #B81C25;} } } .menuClicked{ &::before{ content: ''; width: calc(100% - 40px); height: 2px; position: absolute; bottom: 0px; left: 20px; background: #B81C25; } &>a{ color: #B81C25; } } } .menuSon{ position: absolute; top: 70px; padding: 15px 0px 15px; background: #fff; box-shadow: 0px 2px 6px 0px rgba(183,183,183,0.43); // border-radius: 8px; z-index: 10; width: auto; width: 260px; white-space: nowrap; left: 50%; transform: translateX(-50%) translateY(0%); // transition: all 0.3s cubic-bezier(0.04, 1.21, 0, 1.13); box-sizing: border-box; // opacity: 1; display: none; text-align: center; font-size: 18px; .menuUp{ width: 100%; height: 2px; background: #00000000; position: absolute; left:0; top: -2px; &::before{ content: ''; width: 0; height: 0; position: absolute; display: block; bottom: -2px; left: 50%; transform: translateX(-50%); border-top:15px solid transparent; border-left:15px solid transparent; border-right:15px solid transparent; border-bottom:15px solid #fff ; } } a{ display: block; padding: 9px 0; transition: all .3s ease; span{ transition: all .3s ease; display: inline-block; } &:hover{ background: #B81C25; span{ color: #fff; transform: translateY(-3px); } } &:last-child { margin-bottom: 0; } } } .open{ display: block; } .language{ height: 70px; display: flex; align-items: center; width: auto; white-space: nowrap; cursor: pointer; position: absolute; right: 100px; .btn2{ display: inline-block; color: #000000; transition: all .3s ease; &:hover{ color: #B81C25; &.aborder{ border: 1px solid #B81C25; background: #B81C25; color: #fff; } } } .aborder{ border: 1px solid #000000; text-align: center; width: 100px; height: 30px; font-size: 12px; box-sizing: border-box; border-radius: 6px; display: flex; align-items: center; justify-content: center; } .line{ display: inline-block; width: 1px; height: 13px; background: #000000; opacity: 0.5; margin: 0px 20px; } } } .headerMobile{ display: none; width: 100%; height: 60px; padding: 14px 15px 0px; box-sizing: border-box; position: relative; .logo{ width: 136px; height: 30px; position: relative; z-index: 6; background: url("../images/logoB.png") no-repeat; background-size: contain; cursor: pointer; top: 2px; } .logos{ width: 136px; height: 30px; position: relative; z-index: 6; background: url("../images/logoB.png") no-repeat; background-size: contain; cursor: pointer; top: 2px; } .navFlagBtn { position: absolute; top: 12px; right: 6px; width: 40px; height: 40px; z-index: 8; .lineCenter { top: 50%; margin-top: -1px; } .nav_btn_small { width: 20px; height: 16px; position: absolute; left: 10px; top: 12px; } .lineTop { top: 0; } .lineBottom { bottom: 0; } .nav_btn_small > div { border-radius: 1px; width: 100%; height: 2px; background-color: #ffffff; position: absolute; } .arrowDirBase { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .arrowDirectionDown { transform: rotate(45deg) translate(5px, 5px); -webkit-transform: rotate(45deg) translate(5px, 5px); } .arrowDirectionUp { transform: rotate(-45deg) translate(5px, -5px); -webkit-transform: rotate(-45deg) translate(5px, -5px); } .arrowDirectionCenter { opacity: 0; } } .navFlag{ width: 100%; height: calc(100vh - 60px); position: absolute; top: 60px; left: 0; background-color: #ffffff; display: none; z-index: 6; .navBg{ width: 100%; height: 60px; position: absolute; top: -60px; left: 0px; background-color: #ffffff; background-image: url("../images/logoB.png"); background-size: 89px 22px; background-repeat: no-repeat; // border-bottom: 1px solid #0000001b; background-position: 15px center; } .navMenu{ width: 100%; height: 100%; box-sizing: border-box; overflow-y: auto; &>div{ width: 100%; padding: 25px 15px; box-sizing: border-box; border-bottom: 1px solid #ACACAC80; .title{ font-size: 18px; line-height: 18px; color: #231F20; padding-left: 13px; padding-right: 6px; font-weight: 100; font-family: 'MyFont2'; span{ float: right; font-size: 14px; transform: rotate(-90deg); transition: all .3s ease; } } .menuSon{ width: 100%; overflow: hidden; height: 0px; clip-path: inset(0 0 100% 0); transition: all 0.3s ease; a{ font-size: 16px; display: block; color: #666666; padding: 20px 14px; border-bottom: 1px solid #ACACAC80; &:first-child{ margin-top: 10px; } &:last-child{ border-bottom: none; padding-bottom: 0px; } } } } .menuShow{ .title{ .iconfont{ transform: rotate(0deg); } } .menuSon{ height: 100%; clip-path: inset(0 0 0% 0); } } } .language{ display: flex; justify-content: center; align-items: center; padding: 20px 0px; a{ font-size: 16px; display: inline-block; } .light{ color: #48A038; } div{ width: 1px; height: 14px; background: #000000; display: inline-block; margin: 0 20px; } } } .FlagOpen{ display: block; } } footer{ width: 100%; max-width: 1920px; margin: 0 auto; background-color: #f8f8f8; padding-top: 80px; position: relative; .footer{ width: 100%; max-width: 1300px; margin: 0px auto; font-size: 16px; display: flex; justify-content: space-between; .footerLeft{ width: 340px; text-align: left; color: #333333; .footerLogo{ width: 291px; height: 64px; background: url('../images/logoB2.png') no-repeat; background-size: 100% 100%; margin-bottom: 50px; } .footerLCon1{ width: 100%; display: flex; margin-top: 50px; justify-content: space-between; &>div{ display: inline-block; font-size: 16px; font-weight: bold; span{ opacity: 0.7; font-size: 16px; font-weight: 100; } } } .footerLCon2{ width: 100%; font-size: 16px; // font-weight: bold; margin-top: 20px; span{ // opacity: 0.7; font-weight: 100; } .txt16{ font-size: 16px; } } } .footerRight{ width: 176px; .btnDown{ width: 100%; height: 40px; border-radius: 8px; border: 1px solid #FFFFFF; position: relative; .btnDownTitle{ width: 100%; height: 40px; line-height: 40px; box-sizing: border-box; padding: 0px 20px; color: #fff; cursor: pointer; .tit{ opacity: 0.5; } .iconfont{ font-size: 14px; float: right; transition: all .3s ease; } } .btnDownMenu{ position: absolute; top: 42px; left: 0px; width: 100%; min-height: 120px; max-height: 280px; overflow-y: auto; background: #fff; color: #000; border-radius: 8px; clip-path: inset(0% 0% 100% 0%); transition: all 0.3s ease-in-out; a{ width: 100%; line-height: 20px; padding: 10px 20px; display: block; box-sizing: border-box; transition: all .3s ease-in-out; &:hover{ color: #B81C25; } } } } .imgWx{ text-align: center; span{ margin-top: 10px; display: block; } } .btnShow{ .btnDownTitle{ .iconfont{ transform: rotate(-180deg); } } .btnDownMenu{ clip-path: inset(0% 0% 0% 0%); } } .btnUp,.footerLConM{ display: none; } } .footerCenter{ box-sizing: border-box; margin-bottom: 10px; display: flex; color: #333333; justify-content: flex-start; font-size: 16px; .h4{ margin-bottom: 20px; } .h5R{ margin-top: 15px; } &>div{ margin-right: 58px; a{ color: #333; display: block; span{ display: inline-block; position: relative; &::before{ content: ''; position: absolute; bottom: -5px; left: 0px; width: 0%; height: 1px; background: #333; transition: all .3s ease-in-out; } } &:hover{ span{ &::before{ width: 100%; } } } } &>.h7{ font-size: 18px; } .h7{ margin-bottom: 20px; font-weight: bold; font-family: 'MyFont1'; } .h7R{ margin-bottom: 20px; opacity: 0.7; } &>span{ display: none; } .footerShow{ display: flex; flex-direction: column; a{ &:hover{ color: #000; } } } } } .footerCenterM{ display: none; } } .footerIcon{ width: 100%; max-width: 1300px; margin: 0px auto; display: flex; flex-direction: row; justify-content: flex-end; padding-bottom: 20px; border-bottom: 1px solid #ffffff21; color: #fff; &>div{ margin-left: 40px; cursor: pointer; position: relative; &>div{ width: 187px; height: 186px; position: absolute; bottom:40px; right: -82px; // background: url('../images/weixin.png') no-repeat; // background-size: 100%; opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity 0.3s ease-in-out; img{ width: 100%; display: block; } } &:hover{ &>div{ opacity: 1; clip-path: inset(0 0 0 0); } } } .wxShow{ div{ opacity: 1; clip-path: inset(0 0 0 0); } } .iconfont{ font-size: 24px; transition: all 0.3s ease; } } .footerText{ width: 100%; max-width: 1300px; margin: 30px auto 0px; border-top: 1px solid #dfdfdf; text-align: center; color: #605f5f; font-size: 12px; box-sizing: border-box; padding:20px 15px; opacity: 0.7; a{ color: #605f5f; } br,&>span{ display: none; } } } .searchCon{ width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,0.4); display: flex; top: 0px; left: 0px; z-index: -1; justify-content: center; align-items: center; transition: all .6s ease-in-out; opacity: 0; transform: translateY(-100%); .searchConIn{ width: 70%; max-width: 1300px; // height: 100%; max-height: 80%; background: #fff; .searchUp{ width: 100%; border-bottom: 1px solid #dbdbdb; height: 60px; line-height: 60px; text-align: left; box-sizing: border-box; padding: 0px 30px; .searchInput{ padding-left: 20px; border: 0px; width: calc(100% - 60px); font-size: 20px; font-family: 'MyFont2'; } .icon-search{ color: #B81C25; } .searchClose{ float: right; cursor: pointer; .iconfont{ transform: rotate(0deg); transition: all .3s ease-in-out; display: inline-block; } &:hover{ .iconfont{ transform: rotate(180deg); color: #B81C25; } } } } .searchDw{ width: 100%; height: calc(80vh - 60px); overflow-y: auto; box-sizing: border-box; padding: 20px 30px 20px; display: none; &::-webkit-scrollbar { width: 3px; } &::-webkit-scrollbar-thumb { background-color: #b5b5b5; } } .searchShow{ display: block; } } .newsType{ width: 100%; height: 100%; .newsLi{ width: 100%; display: flex; justify-content: space-between; border-bottom: 1px solid #acacac5e; box-sizing: border-box; padding: 30px 15px; &:last-child{ border-bottom: 0px solid #ACACAC; } .newsLiCon{ width: 100%; font-size: 18px; text-align: left; &>div{ overflow: hidden; white-space: nowrap; width: 100%; height: 24px; text-overflow: ellipsis; } .liTitle{ color: #231F20; font-weight: 500; span{ color: #B81C25; } } } transition: all 0.3s ease-in-out; &:hover{ background: rgba(184, 28, 37, 0.05); .newsLiCon{ .liTitle{ color: #B81C25; } } } } } } .searchConShow{ opacity: 1; z-index: 33; transform: translateY(0%); } .chooseM{ display: none; } @media screen and (min-width: 1080px) and (max-width: 1480px) { footer { .footerIcon{ .weixin{ div{ right: 0px; } } } } } @media screen and (min-width: 1080px) and (max-width: 1390px) { .headerPC{ padding: 0px 50px; .logo{ position: relative; left: 0px; } .logos{ position: relative; left: 0px; } .language{ position: relative; right: 0px; } } footer { padding: 60px 30px 0px; box-sizing: border-box; .footer{ justify-content: space-between; &>div{ margin-right: 10px; } } .footerIcon{ &>div{ &>div{ right: 0px; } } } } } /* 移动端样式 */ @media screen and (max-width: 1080px) { // html, // body { // font-size: 14px; // } .title{ font-size: 32px; line-height: 48px; } // 正文文本样式 .text{ font-size: 16px; line-height: 32px; } .btn{ width: 175px; height: 35px; line-height: 35px; border-radius: 4px; min-width: 175px; } .btn2 { transform: scale(1); .btnCon{ font-size: 12px; line-height: 42px; } .btnBg{ // width: 42px; // height: 42px; // right: 10px; // top: 6px; -webkit-clip-path: inset(10px 10px 10px calc( 100% - 46px) round 18px); clip-path: inset(10px 10px 10px calc( 100% - 46px) round 18px); } .btnShow{ width: 20px; height: 42px; right: 17px; top: 6px; .btnMove{ width: 40px; height: 42px; transform: translateX(-20px); } .btnIcon{ width: 20px; height: 42px; &>span{ margin-right: 2px; } .dot{ width: 2px; height: 2px; border-radius: 2px; } .arrow{ width: 8px; height:8px; &>span{ width: 8px; height: 2px; border-radius: 2px; } .arrowR{ width: 2px; height: 8px; top: 0px; right: 0px; } .arrowL{ width: 10px; top: 4px; left: -2px; } } } } &>a{ border-radius: 27px; padding: 6px 80px 6px 25px; box-sizing: border-box; &:hover{ .btnCon{ .btnBg{ // width: 100%; // height: 100%; // right: 0px; // top: 0px; // border-radius: 27px; } &>div{ color: #ffffff; } } .btnMove{ transform: translateX(0px); } } } } .btn3{ width: 190px; height: 40px; line-height: 40px; font-size: 14px; border-radius: 50px; &>span{ font-size: 20px; } } .headerPC{ display: none; } .headerMobile{ width: 100%; display: block; .navFlagBtn{ .nav_btn_small{ &>div{ background-color: #000000; } } } } .menuType{ .headerMobile{ .navFlagBtn{ .nav_btn_small{ &>div{ background-color: #ffffff; } } } .btnOpen{ .nav_btn_small{ &>div{ background-color: #000000; } } } } } footer{ width: 100%; box-sizing: border-box; padding: 45px 15px 0px 15px; position: relative; .footer{ margin-bottom: 0px; justify-content: space-between; flex-wrap: wrap; padding: 0px; .footerLeft{ width: 100%; margin-right: 0px; text-align: center; .footerLogo{ width: 190px; height: 40px; margin: 0px auto; background-size: auto 100%; } .footerLCon1,.footerLCon2{ display: none; } } .footerCenter{ width: 100%; margin-top: 55px; margin-bottom: 30px; margin-right: 0px; justify-content: flex-start; flex-wrap: wrap; display: none; &>div{ margin-right: 0px; display: flex; flex-wrap: wrap; justify-content: space-between; width: 55px; margin-bottom: 0px; padding: 15px 0px; .h7{ margin-bottom: 0px; line-height: 17px; font-weight: normal; } .h7R{ margin-bottom: 0px; } &>a{ width: 50%; span{ &::before{ display: none; } } } &>span{ font-size: 17px; width: 17px; height: 17px; line-height: 17px; display: inline-block; &::before{ transform: rotate(90deg); display: inline-block; transition: all 0.5s ease-in-out; } } .footerShow{ width: 100%; display: flex; flex-wrap: wrap; height: 0px; overflow: hidden; transition: all 0.5s ease-in-out; padding-top: 0px; box-sizing: border-box; flex-direction: row; align-items: center; a{ width: 100%; box-sizing: border-box; display: inline-block; } } } } .footerCenterM{ display: flex; justify-content: space-between; width: 100%; margin-top: 40px; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid #dfdfdf; a{ width: 60px; color: #333333; font-size: 14px; display: inline-block; padding: 15px 0px; } div{ width: 1px; height: 8px; background: #fff; opacity: 0.2; display: inline-block; margin: 0px 13px; } } .footerRight{ width: 100%; color: #333333; .btnUp{ display: block; width: 100%; font-size: 14px; margin-bottom: 20px; } .footerLConM{ display: block; font-size: 14px; margin-bottom: 60px; a{ color: #333333; display: block; width: 100%; } .footerLCon2{ margin-top: 30px; } div{ color: #333333; } } .imgWx{ padding-bottom: 30px; img{ width: 90px; display: inline-block; } span{ margin-top: 5px; } } } .ckShow{ &>span{ &::before{ transform: rotate(-90deg); } } .footerShow{ padding-top: 10px; } .show1{ height: 172px; } .show2{ height: 172px; } .show3{ height: 210px; } .show4{ height: 90px; } .show5{ height: 172px; } } } .footerIcon{ width: 100%; justify-content: space-evenly; padding-bottom: 45px; padding-top: 60px; &>div{ margin-left: 0px; } } .footerText{ font-size: 12px; padding:18px 0px 25px 0px; line-height: 22px; margin: 10px auto 0px; &>span{ width: 30px; display: inline-block; } br{ display: block; } } } .chooseM{ display: flex; font-size: 14px; width: 100%; height: 55px; line-height: 55px; position: fixed; bottom: 0; left: 0; background: #ffffffe0; z-index: 2; align-items: center; justify-content: space-evenly; a{ display: inline-block; text-align: center; color: #000000; width: 30%; text-align: center; } span{ display: inline-block; width: 1px; height: 15px; background: #000; } } .searchCon{ .newsType{ .newsLi{ padding-bottom: 20px; margin-top: 20px; .newsLiCon{ font-size: 16px; padding-top: 4px; &>div{ height: 20px; } .liTitle{ margin-bottom: 8px; } } } } } }