// 页面主容器 .main{ padding-top: 80px; } // 面包屑 .crumbsContent{ padding: 0; background: #EFF1F3; padding-top: 19px; padding-bottom: 19px; .txt{ font-size: 16px; line-height: 22px; color: #515356; text-decoration: none; } .arrow{ width: 12px; height: 16px; margin-left: 12px; margin-right: 12px; } } // 导航 #menu{ position: fixed; width: 100%; height: 80px; background: #FFFFFF; top: 0; z-index: 100; .menuContent{ height: 100%; padding-left: 40px; padding-right: 20px; display: flex; justify-content: space-between; align-items: center; .flexBox{ display: flex; align-items: center; } .logo{ height: 52px; } .region{ width: 58px; height: 28px; display: flex; align-items: center; justify-content: center; border: solid 2px rgba(114, 116, 118, 0.5); border-radius: 14px; margin-left: 20px; box-sizing: border-box; cursor: pointer; .text{ font-size: 12px; line-height: 20px; color: #515356; } .arrow{ display: block; width: 6px; height: 6px; margin-left: 3px; } } .menuList{ position: relative; height: 100%; display: flex; justify-content: space-between; .btn{ position: relative; display: block; height: 100%; font-size: 16px; line-height: 80px; color: #ffffff; font-weight: 400; padding: 0; padding-left: 10px; padding-right: 10px; border: 0; margin: 0; margin-right: 25px; border-radius: 0; overflow: hidden; word-wrap: normal; .txt{ color: #222325; text-decoration: none; } &:last-child{ margin-right: 0; } .navs{ position: absolute; width: 180px; top: 0px; left: 50%; margin-left: -90px; text-align: center; line-height: 48px; padding-top: 20px; font-size: 16px; opacity: 0; // display: none; .nav{ color: #333436; text-decoration: none; display: block; } } &:hover{ overflow: inherit; background: #F6F8FA; .navs{ top: 80px; opacity: 1; // display: block; transition: all 0.3s ease-out; } } } } .language{ font-size: 13px; line-height: 32px; color: rgba(114, 116, 118, 0.5); margin-right: 6px; cursor: pointer; .active{ color: #727476; } } .tel{ display: flex; align-items: center; font-size: 13px; line-height: 32px; color: #222325; margin-left: 6px; margin-right: 6px; .icon{ width: 26px; height: 26px; display: block; } } .search{ width: 32px; height: 32px; cursor: pointer; .icon{ display: block; width: 32px; height: 32px; } } } } // 导航下拉区 .menuDown{ position: fixed; width: 100%; height: 100%; display: none; z-index: 99; .infoBox{ position: fixed; width: 100%; // height: 100%; top: 80px; z-index: 99; .infoContent{ background: #F6F8FA; padding-top: 40px; padding-bottom: 40px; &.search{ position: absolute; top: 0; width: 100%; text-align: center; opacity: 0; .title{ font-size: 22px; color: #333436; margin-bottom: 20px; } .searchInput{ position: relative; width: 500px; height: 48px; border-radius: 8px; background: #ffffff; margin: auto; .input{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: 0; background: none; padding-left: 15px; font-size: 16px; color: #707579; font-weight: 300; outline: none; } .icon{ position: absolute; width: 32px; height: 32px; right: 8px; top: 8px; } } } &.region{ position: absolute; width: 100%; height: 0; display: none; opacity: 0; left: 0px; top: 0; // justify-content: space-between; padding-left: 280px; padding-right: 280px; overflow: hidden; .regionContainer{ display: flex; justify-content: space-between; } .regionBox{ .regionLabel{ font-size: 13px; line-height: 17px; color: #727476; margin-bottom: 21px; } .regionBtn{ font-size: 16px; line-height: 38px; color: #333436; cursor: pointer; text-decoration: none; display: block; &.active{ border-bottom: solid 2px #333436; } } } } &.menuHover{ position: absolute; width: 100%; height: 0; opacity: 0; } } } .mobileMenu{ position: fixed; width: 100%; height: 0; top: 0; padding-left: 30px; padding-right: 30px; padding-top: 50px; background: #F6F8FA; z-index: 99; opacity: 0; overflow: hidden; .searchInput{ position: relative; // width: 330px; height: 40px; border-radius: 6px; background: #ffffff; margin: auto; margin-bottom: 30px; margin-top: 30px; .input{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: 0; background: none; padding-left: 15px; font-size: 14px; color: #707579; font-weight: 300; outline: none; } .icon{ position: absolute; width: 32px; height: 32px; right: 4px; top: 4px; } } .bar{ height: 1px; background: rgba(0, 0, 0, 0.1); opacity: 0.3; margin-bottom: 30px; } .menuBtns{ .menuBtn{ display: block; font-size: 18px; line-height: 40px; color: #333436; margin-bottom: 20px; transition: all 0.5s; font-weight: bold; text-decoration: none; &:hover{ font-size: 20px; } } } .flexBox{ position: absolute; width: 100%; bottom: 50px; left: 0; display: flex; justify-content: center; .language{ font-size: 13px; line-height: 32px; color: rgba(114, 116, 118, 0.5); margin-right: 10px; cursor: pointer; .active{ color: #727476; } } .tel{ display: flex; align-items: center; font-size: 13px; line-height: 32px; color: #727476; margin-left: 6px; margin-right: 6px; .icon{ width: 26px; height: 26px; display: block; } } } } .bg{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.3); z-index: 99; opacity: 0; } } // banner #banner{ position: relative; .pic{ width: 100%; } .titleBox{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center; justify-content: center; } .title{ font-size: 66px; color: #fff; font-weight: bold; text-align: center; } .bannerSwiper{ position: relative; height: auto; } .swiperBtn{ position: absolute; bottom: 42px; left: 153px; z-index: 1; } .left, .right{ width: 40px; height: 16px; cursor: pointer; transition: all 0.3s ease-out; } .left{ &:hover{ transform: translateX(-10px); } } .right{ margin-left: 20px; &:hover{ transform: translateX(10px); } } .pagination{ position: absolute; right: 135px; left: auto; text-align: right; z-index: 1; } .swiper-pagination-bullet{ background: #fff; opacity: 1; border-radius: 3px; width: 10px; height: 10px; } .swiper-pagination-bullet-active{ background: #E60012; } } // 内容块标题 .titleContainer{ position: relative; width: 100%; display: flex; justify-content: space-between; align-items: end; } .titleBox{ .bar{ width: 52px; height: 6px; background: #E60012; border-radius: 3px; } .text{ font-size: 40px; color: #222326; font-weight: bold; margin-top: 14px; line-height: 52px; .sml{ font-size: 15px; line-height: 24px; } } } .button_v2{ position: relative; display: flex; align-items: center; justify-content: center; background: #E9463F; height: 42px; cursor: pointer; text-decoration: none; .text{ font-size: 14px; line-height: 24px; color: #fff; } .arrow{ position: absolute; width: 20px; height: 20px; right: 11px; top: 50%; margin-top: -10px; } &:hover{ text-decoration: none; } } // 按钮 .button{ display: block; height: 40px; // background: #E9463F; display: flex; align-items: center; cursor: pointer; .txt{ font-size: 18px; color: #333436; font-weight: bold; line-height: 40px; } .arrow{ width: 24px; height: 12px; display: block; margin-left: 10px; transition: all 0.3s ease-out; } &:hover{ text-decoration: none; .arrow{ transform: translateX(10px); } } } // loading .loading{ position: relative; .icon{ width: 30px; display: block; margin: auto; } } // 报道 .newsCellBox{ position: relative; width: 100%; padding: 18px 20px; padding-bottom: 16px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); margin-bottom: 12px; text-decoration: none; display: block; background: #fff; .title{ font-size: 19px; line-height: 28px; color: #333436; font-weight: 500; &.ml10{ margin-left: 10px; } } .date{ font-size: 13px; line-height: 18px; color: #727476; margin-top: 6px; font-weight: 300; margin-left: 10px; } .arrow{ position: absolute; right: 20px; top: 50%; width: 20px; margin-top: -10px; } &:hover{ text-decoration: none; } } // 新闻 .newsBox{ cursor: pointer; width: 32%; display: block; text-decoration: none !important; .pic{ width: 100%; } .title{ font-size: 18px; color: #333436; line-height: 26px; font-weight: bold; margin-top: 20px; margin-bottom: 12px; } .desc{ font-size: 13px; line-height: 24px; color: #727476; font-weight: 300; } } // tabs导航 #tabs{ position: relative; height: 60px; display: flex; align-items: center; justify-content: center; background: #F5F8FA; .swiper-container{ margin: 0; } .tab{ position: relative; padding: 19px 29px; width: 122px; width: auto; white-space: nowrap; text-decoration: none; cursor: pointer; .txt{ font-size: 16px; color: #222326; line-height: 22px; text-decoration: none; } .bar{ position: absolute; width: 50%; height: 4px; left: 25%; // margin-left: -31px; bottom: 0; background: #E60012; display: none; } &.curr{ .bar{ display: block; } } } } // 页尾 #footer{ background: #505558; .mapInfo{ display: flex; justify-content: space-between; padding-top: 60px; padding-bottom: 51px; overflow: initial; .logo{ height: 79px; display: block; } .maps{ display: flex; justify-content: space-between; .navBox{ width: 80px; margin-right: 20px; &:last-child{ margin-right: 0; } .nav{ font-size: 14px; color: #ffffff; font-weight: 400; margin-bottom: 10px; display: block; } .navBtn{ font-size: 13px; color: #ffffff; opacity: 0.6; font-weight: 300; line-height: 23px; display: block; } } } .qrcodeInfo{ .title{ font-size: 14px; color: #ffffff; opacity: 0.6; margin-bottom: 15px; text-align: center; } .qrcodes{ position: relative; display: flex; .qrcodeBox{ position: relative; margin-right: 15px; cursor: pointer; &:last-child{ margin-right: 0; } .weixin{ width: 60px; } .qrcode{ width: 100px; } .name{ font-size: 11px; color: #ffffff; opacity: 0.6; line-height: 23px; margin-top: 2px; } .hoverBox{ position: absolute; left: -50px; bottom: 120px; opacity: 0; transition: all 0.3s ease-out; .hoverCode{ width: 160px; padding: 20px; padding-bottom: 12px; background: #fff; border-radius: 5px; .img{ display: block; width: 120px; } .txt{ font-size: 14px; color: #333436; margin-top: 5px; text-align: center; } } .arrow{ width: 10px; height: 4px; display: block; margin: auto; } } &:hover{ .hoverBox{ opacity: 1; bottom: 90px; } } } } } } .copyright{ background: #484E52; text-align: center; padding-top: 15px; padding-bottom: 15px; .txt{ font-size: 12px; color: #868C92; line-height: 20px; } .linkBtn{ font-size: 12px; color: #AEB3B8; line-height: 20px; a{ color: #AEB3B8; } } } } // 右侧悬浮按钮 .floatBtnBox{ position: fixed; top: 310px; right: 0; border-radius: 5px 0 0 5px; // overflow: hidden; box-shadow: 0 0 32px rgba(0, 0, 0, 0.05); // background: #FAFAFA; z-index: 1; .floatBtn{ position: relative; display: block; width: 60px; cursor: pointer; .btnIcon{ position: relative; width: 60px; border-bottom: solid 1px #FAFAFA; } &:first-child{ .btnIcon{ border-radius: 5px 0 0 0; } } &:last-child{ .btnIcon{ border-radius: 0 0 0 5px; border-bottom: 0; } } &:hover{ .infoBox{ right: 60px; opacity: 1; } } } .infoBox{ position: absolute; display: flex; justify-content: right; // right: 60px; right: -326px; padding-right: 2px; opacity: 0; top: 0; transition: all 0.3s ease-out; .arrow{ width: 4px; height: 10px; margin-top: 25px; } .info{ border-radius: 5px; box-shadow: 0 0 32px rgba(0, 0, 0, 0.05); background: #ffffff; } &.dianhua{ .info{ width: 229px; height: 60px; display: flex; justify-content: center; align-items: center; .txt{ font-size: 14px; color: #333436; span{ font-size: 16px; color: #E9463F; } } } } &.weixin{ .info{ width: 320px; height: 180px; display: flex; justify-content: center; align-items: center; .qrcodeBox{ .qecode{ width: 120px; height: 120px; display: block; } .txt{ font-size: 14px; color: #333436; text-align: center; margin-top: 8px; } } .bar{ position: relative; width: 1px; height: 100px; margin-left: 20px; margin-right: 20px; background: rgba(0, 0, 0, 0.08); } } } } } .inputBox{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; .text{ min-width: 100px; margin-left: 25px; font-size: 13px; color: #333436; } .input{ width: 100%; height: 36px; background: #F1F3F5; border: 0; margin-right: 25px; outline: none; padding: 8px 9px; border-radius: 3px; } .yzmBox{ display: flex; justify-content: space-between; margin-right: 25px; .input{ margin-right: 0; } .yzm{ width: 90px; height: 36px; margin-left: 5px; } } } .err{ color: #E60012; &::-webkit-input-placeholder { color: #E60012; } &::-moz-placeholder { color: #E60012; } input:-ms-input-placeholder { color: #E60012; } &::-webkit-input-placeholder { color: #E60012; } &::placeholder { color: #E60012; } } // 浮层弹窗 .floatPage{ display: none; .bg{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.3); z-index: 102; opacity: 0; } .floatInfo{ position: fixed; width: 360px; left: 50%; top: 70%; margin-left: -180px; margin-top: -237px; z-index: 103; opacity: 0; .infoBox{ position: relative; width: 100%; background: #fff; border-radius: 5px; overflow: hidden; padding-bottom: 25px; .tab{ display: flex; justify-content: space-between; margin-bottom: 25px; .tabBtn{ width: 50%; text-align: center; line-height: 44px; font-size: 14px; color: #333436; background: #F1F3F5; cursor: pointer; &.curr{ background: #fff; } } } .button1{ position: relative; background: #E9463F; width: 200px; height: 42px; margin: auto; margin-top: 15px; cursor: pointer; .txt{ font-size: 14px; color: #fff; text-align: center; line-height: 42px; } .arrow{ position: absolute; width: 20px; height: 20px; top: 11px; right: 11px; } } } .floatClose{ position: absolute; width: 32px; height: 32px; left:50%; margin-left: -16px; bottom: -47px; cursor: pointer; } .titleBar{ display: flex; align-items: center; justify-content: space-between; background: linear-gradient(#fff, #F2F5F8); padding: 15px 20px; padding-right: 11px; .title{ font-size: 15px; line-height: 20px; font-weight: bold; color: #333436; } .close{ width: 28px; height: 28px; display: block; opacity: 1; } } } } #productNameFloat{ .floatInfo{ width: 664px; margin-left: -332px; overflow: hidden; border-radius: 5px; .infoBox{ border-radius: 0; padding: 30px 60px; .text{ font-size: 14px; line-height: 26px; color: #333436; margin-bottom: 20px; span{ color: #E9463F; font-weight: bold; } } .productNameList{ display: flex; flex-wrap: wrap; .productName{ font-size: 13px; line-height: 20px; color: #333436; padding: 10px 18px; background: #F1F3F5; border-radius: 3; margin-right: 10px; margin-bottom: 10px; } } .inputBox{ width: 422px; margin-top: 10px; .text{ min-width: 62px; margin-left: 0; margin: 0; } .input{ margin-right: 0; } } } } } @media (max-width: 1199px) { #menu{ .menuContent{ .menuList{ .btn{ font-size: 14px; margin-right: 10px; } } } } #footer{ position: relative; padding-top: 20px; .mapInfo{ padding-top: 120px; .logo{ position: absolute; top: 30px; left: 50%; margin-left: -53px; } .maps{ .navBox{ margin-right: 20px; } } } } } // 小屏幕 @media (max-width: 991px) { #footer{ padding-top: 20px; position: relative; .mapInfo{ .logo{ position: absolute; top: 30px; left: 50%; margin-left: -53px; } .maps{ .navBox{ margin-right: 10px; } } } } } @media (max-width: 767px) { .main{ padding-top: 56px; } #menu{ height: 56px; .menuContent{ padding-left: 20px; padding-right: 15px; .logo{ // width: 70px; height: 40px; } .menuList{ .btn{ font-size: 15px; padding-left: 6px; padding-right: 6px; } } .mobileIcon{ .openMenu{ width: 32px; height: 32px; } .closeMenu{ width: 32px; height: 32px; display: none; } } } } #banner{ .pagination{ text-align: left; right: auto; left: 0; padding-left: 25px; margin: 0; } .swiper-pagination-bullet{ height: 6px; width: 6px; border-radius: 2px; } .titleBox{ .title{ font-size: 32px; } } } .button{ .txt{ font-size: 16px; } .arrow{ width: 20px; } } .titleBox{ .bar{ width: 30px; height: 4px; } .text{ font-size: 25px; line-height: 33px; } } .newsCellBox{ margin-bottom: 8px; .title{ font-size: 15px; line-height: 22px; } .date{ margin-top: 5px; font-size: 12px; line-height: 17px; margin-left: 0; } } .newsBox{ width: 100% !important; margin-bottom: 25px !important; .title{ font-size: 17px; margin-top: 15px; line-height: 24px; } } #tabs{ height: 48px; .tab{ // width: 90px; padding: 12px 15px; .txt{ font-size: 15px; line-height: 24px; } } } #footer{ padding-top: 0; .mapInfo{ flex-wrap: wrap; padding-top: 50px; padding-bottom: 50px; .logo{ position: relative; // width: 106px; height: 70px; left: auto; top: auto; margin: auto; } .qrcodeInfo{ width: 100%; margin-top: 20px; .title{ text-align: center; } .qrcodes{ justify-content: center; margin-top: 10px; .qrcodeBox{ .qrcode{ width: 100px; height: 100px; } .name{ text-align: center; font-size: 13px; line-height: 23px; margin-top: 5px; } &:hover{ .hoverBox{ display: none; } } } } } } .copyright{ .txt{ font-size: 12px; line-height: 20px; font-weight: 300; } } } .floatBtnBox{ top: 290px; .floatBtn{ width: 50px; .btnIcon{ width: 50px; } .weixin{ .info{ padding-top: 10px; width: 140px; height: auto; display: block; margin-top: -60px; padding-bottom: 10px; .qrcodeBox{ .qecode{ margin: auto; } .txt{ margin-top: 0; } } .bar{ width: 100px; height: 1px; margin-top: 9px; margin-bottom: 10px; } } } } } .menuDown{ .infoBox{ top: 50px; // height: 100%; .infoContent{ height: 100%; &.region{ position: relative; overflow: scroll; display: block; width: 100%; padding: 0; .regionContainer{ display: flex; flex-wrap: wrap; height: max-content; padding: 30px; } // overflow: auto; .regionBox{ width: 50%; margin-bottom: 40px; .regionLabel{ margin-bottom: 10px; } } .region1{ width: 100%; .regionBtn{ display: inline-block; } } } } } } .floatPage{ .floatInfo{ .titleBar{ padding: 11px 20px; padding-right: 11px; } } } #productNameFloat{ .floatInfo{ width: 96%; left: 2%; margin-left: 0; margin-top: -290px; .infoBox{ padding: 20px; .text{ font-size: 12px; line-height: 26px; margin-top: -5px; margin-bottom: 19px; } .productNameList{ .productName{ font-size: 12px; line-height: 20px; padding: 8px 10px; } } .inputBox{ width: 100%; } } } } }