// 公共部分 body { // -webkit-filter: grayscale(100%); // -moz-filter: grayscale(100%); // -ms-filter: grayscale(100%); // -o-filter: grayscale(100%); // filter: grayscale(100%); // filter: gray; letter-spacing: 2px; } .banner{ overflow: hidden; } .list_ul { overflow: hidden; ul { display: flex; flex-wrap: wrap; li { box-sizing: border-box; a { display: block; } } } } @color: #1c4cab; @colorg: #01924b; @font-face { font-family: SiYuanSong; src: url(../font/SiYuanSongTiRegular/SourceHanSerifCN-Bold-2.otf); } .transition { transition: all ease-in-out 0.3s; } .img-transform { -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); } .big_img { .img { overflow: hidden; img, h1, h2, h3, h4, h5 { .transition; } } &:hover img { .img-transform; } &:hover h1, &:hover h2, &:hover h3, &:hover h4 &:hover h5 { color: @color; } } .con1600{ max-width: 1600px; width: 100%; margin: 0 auto; } .con1500 { max-width: 1500px; width: 100%; margin: 0 auto; } .con1400 { max-width: 1400px; width: 100%; margin: 0 auto; } .con1300 { max-width: 1300px; width: 100%; margin: 0 auto; } .con1200 { max-width: 1200px; width: 100%; margin: 0 auto; } // 公共结束 @keyframes lngm { from { transform: rotate(0); } to{ transform: rotate(360deg); } } @keyframes lrani { from { transform: translateX(10px); } to{ transform: translateX(-10px); } } // 头部开始 .head_pc{ display: flex; justify-content: space-between; .logo{ width: 14%; display: flex; align-items: center; justify-content: center; } .nav{ width: 86%; padding:0 54px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; background-color: @color; color: #fff; ul{ display: flex; a{ display: block; font-size: 18px; font-weight: bold; padding:0 25px; line-height: 110px; } } .tock{ font-size: 18px; } .lng{ display: flex; font-size: 18px; a{ display: flex; align-items: center; } img{ animation: lngm 5s linear infinite; margin-right: 10px; } } } } #banner{ position: relative; .down{ width: 100%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; .con1400{ display: flex; position: relative; justify-content: space-between; align-items: center; .banner_left,.banner_rig{ width: 54px; height: 54px; font-size: 26px; border-radius: 50%; border:1px solid #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; } .banner_rig img, .banner_left img{ animation: lrani 2s ease infinite alternate; } } } } .i_type{ padding: 4% 0 2% 0; display: flex; align-items: flex-end; justify-content: space-between; h1{ font-size: 40px; font-weight: bold; } h5{ font-size: 20px; color: @color; text-transform: uppercase; } } // 首页关于我们 // 首页产品展示 .i_pro{ .pro_type_list{ ul{ display: flex; margin: -4px; li{ width: 33.33%; padding: 4px; a{ display: block; .title{ font-size: 22px; font-weight: bold; color: #fff; background-color: @color; padding:0 40px; line-height: 80px; position: relative; .transition; h2{ width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; .transition; } } .icon{ position: absolute; right: 40px; top: -30px; width: 60px; height: 60px; background: url(../images/r_icon2.png) no-repeat center; background-color: #fff; border-radius: 50%; } &:hover{ .title{ background-color: #f5f5f5; } .icon{ background: url(../images/r_icon.png) no-repeat center; background-color: #01924b; } } } } } } } // 首页应用领域 .i_appli{ background:url(../images/i_bj.jpg) no-repeat center; margin-top: 6%; padding:1% 0 4% 0; .appli_list{ position: relative; overflow: hidden; .thumbs_appli{ position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 98%; overflow: hidden; z-index: 333; .swiper-slide{ border-top: 2px solid #fff; } .shadow_box{ position: relative; .shadow{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; color: #fff; i{ font-size: 22px; font-weight: bold; padding:0 10px; } h2{ font-size: 18px; font-weight: bold; } } } .swiper-slide-thumb-active{ .shadow_box{ .shadow{ display: none; } } } } } } // 首页广告条 .i_slog{ background-color: #01924b; .con1400{ display: flex; align-items: center; justify-content: center; padding: 34px 0; font-size: 28px; color: #fff; h2,.icon2{ font-weight: bold; } i{ padding:0 8px; } } } .i_intro{ background: url(../images/ab_bj.jpg) no-repeat center; padding: 6% 0; .con1400{ display: flex; align-items: center; .video{ width: 40%; } .intro{ width: 60%; padding-left: 40px; box-sizing: border-box; .title{ color: #fff; p{ font-size: 20px; margin-bottom: 3%; } h1{ font-size: 50px; font-weight: bold; } h5{ font-size: 26px; } } .sum{ font-size: 16px; color: #a4b8df; padding-top: 6%; margin-top: 6%; border-top:1px solid rgba(255,255,255,0.2) } a{ display: block; width: 60px; height: 60px; border-radius: 50%; background: url(../images/index_icon.png) no-repeat center; background-color: #01924b; box-shadow: 0 0 10px #333; margin-top: 7%; } } } } .i_news{ background: url(../images/i_bj.jpg) no-repeat center; padding-bottom: 4%; .news_list{ display: flex; .news_left{ width:66%; ul{ margin: -4px 0; li{ padding: 4px 0; a{ display: flex; padding: 45px; background-color: #fff; .cont{ width: 100%; } .tit{ padding-top: 5%; } h2{ font-size: 24px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sum{ line-height: 24px; padding-top: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } } .img{ img{ display: block; } } } } .time{ display: flex; align-items: flex-end; color: @color; i{ font-size: 50px; font-weight: bold; line-height: 50px; } p{ font-size: 18px; padding:0 10px; } } } .news_rig{ width: 34%; margin-left: 8px; padding: 45px; box-sizing: border-box; background-color: #fff; display: flex; align-items: center; justify-content: center; .pic{ position: relative; } .box{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; color:#fff; text-align: center; display: flex; align-items: center; justify-content: center; h1{ font-size: 34px; font-weight: bold; } p{ font-size: 20px; padding: 40px 0; } a{ display: block; margin: 0 auto; width: 60px; height: 60px; border-radius: 50%; background: url(../images/index_icon.png) no-repeat center; background-color: #01924b; box-shadow: 0 0 10px #333; margin-top: 7%; } } } } } // 研发中心 .i_rd{ .rd_box{ position: relative; .line{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 16px; height: 412px; background-color: #01924b; } } .rd_box{ display: flex; .img{ width: 50%; img{ width: 100%; } } .num_cont{ width: 50%; background: url(../images/rd_bj.jpg) no-repeat center; background-size: cover; color: #fff; padding: 60px; display: flex; align-items: center; } .top{ P{ font-size: 34px; strong{ font-weight: bold; } } } .bom{ margin-top: 10%; padding-top: 10%; border-top:1px solid rgba(255,255,255,0.4); ul{ display: flex; justify-content: space-between; li{ text-align: center; } p,i{ font-size: 18px; } h5{ font-size: 60px; font-weight: bold; } } } } } .i_com{ background:url(../images/com_bj.jpg) no-repeat center; padding: 4% 0; margin-top: 4%; .con1400{ display: flex; justify-content: space-between; align-items: center; .left{ a{ display: block; font-size: 16px; font-weight: bold; background-color: #fff; // color: #01924b; padding: 30px; margin: 20px 0; } } .center{ h1{ font-size: 26px; font-weight: bold; color: #fff; padding-bottom: 26px; background: url(../images/icon.jpg) no-repeat center bottom; } .sum{ font-size: 18px; color: #a3a3a3; margin-top: 26px; p{ padding: 10px 0; } } } .rig{ padding: 14px; padding-bottom: 0; background-color: #fff; img{ max-width: 164px; } p{ background-color: #fff; text-align: center; line-height: 26px; } } } } // 底部导航 .footer{ background-color: @color; padding: 2% 0; .con1400{ display: flex; justify-content: space-between; align-items: center; } } .foo_nav { ul.uls1 { display: flex; margin:0 -30px; li.lis1 { padding: 0 30px; a.link { display: block; font-size: 16px; color: #fff; position: relative; line-height: 48px; &::before { content: ''; width: 30px; height: 2px; background-color: @color; position: absolute; left: 0; bottom: 0; } } ul { padding-top: 16px; li { a { display: block; color: #b6b6b6; line-height: 30px; } } } } } } .foo_bottom{ display: flex; align-items: center; justify-content: space-between; padding-top: 38px; margin-top: 38px; border-top: 1px solid rgba(255,255,255,0.2); a{ display: block; color: #5875af; } } .banner{ } #scroll_top{ padding: 48px; cursor: pointer; p{ text-align: center; color: #fff; padding: 14px 0; } } // 关于我们 .about{ .company{ } .sum{ font-size: 18px; font-weight: bold; } .content{ font-size: 16px; color: #666666; padding:2% 0; line-height: 30px; } } .ab_type{ h1{ font-size: 36px; font-weight: bold; text-align: center; } .line{ margin: 2% 0 4%; height:1px; background-color: #e4e4e4; position: relative; &::before{ content:''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width:200px; height:4px; background-color: @colorg; } } } .equ{ padding: 3% 0; margin: 6% 0; background: url(../images/a_bj.jpg) no-repeat top center; ul{ margin: -8px; li{ padding: 8px; width: 33.33%; } } } .pub_left{ padding: 4% 0; ul{ display: flex; margin: -1px; li{ flex:1; padding: 1px; a{ line-height: 60px; display: block; text-align: center; background-color: #eff3f5; // color: #fff; font-size: 22px; font-weight: bold; .transition; &.hover, &:hover{ background-color: @color; color: #fff; } } } } } // 企业风采 .culture{ ul{ margin: -2px; li{ width: 25%; padding: 2px; a{ display: block; .img{ display: flex; justify-content: center; position: relative; z-index: 9; } img{ .transition; } .pic{ margin-top: -69px; position: relative; h1{ font-size: 36px; font-weight: bold; } .cont{ position: absolute; left: 0; bottom: 40px; width: 100%; text-align: center; } p{ font-size: 16px; color: #666; } } &:hover .img img{ transform: rotate(360deg); } } } } } .ab_style{ margin: 4% 0; background: url(../images/c_bj.jpg) no-repeat center; padding: 4% 0; ul{ margin: -2px; li{ width: 25%; padding: 2px; } a{ position: relative; .cont{ width: 100%; position: absolute; left: 0; text-align: center; bottom: 30px; } h1{ font-size: 36px; font-weight: bold; } p{ font-size: 16px; color: #666; padding: 10px 0; } } } } .honor{ padding:0 0 4% 0; } .network{ .img{ display: flex; justify-content: center; margin-bottom: 4%; } } .products { margin-bottom: 2%; .list_ul{ } .list_ul ul { margin: -10px; li { width: 33.33%; padding: 10px; a{ display: block; padding: 2px; background-color: @color; color: #fff; } .img { // padding: 10px; background-color: #f5f5f5; } h3 { text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 60px; background-color: @color; color: #fff; } } } } .pro_main { display: flex; padding: 4% 0; justify-content: space-between; .main_left { width: 50%; h1 { font-size: 30px; padding: 4% 0; } .feature { line-height: 28px; h2{ font-size: 20px; } } } .swiper_pro { border: 1px solid #ccc; } .pro_img { width: 44%; overflow: hidden; #thumbs { padding: 14px 0; .swiper-slide-thumb-active img { border: 1px solid @color; } } } } .leave { // padding-top: 4%; .mess_form { width: 870px; // margin: 3% auto; p { display: flex; margin-bottom: 34px; align-items: center; justify-content: space-between; input { width: 46%; padding: 0 8px; line-height: 40px; border: 1px solid #ccc; } } textarea { width: 100%; border: 1px solid #ccc; box-sizing: border-box; padding: 8px; line-height: 40px; height: 200px; } } .submit input { display: block; width: 120px; line-height: 36px; text-align: center; background-color: @color; color: #fff; margin: 20px auto 6% auto; } } // 质量管理 .quality{ padding: 4% 0; ul{ margin: -10px; li{ width: 25%; padding: 10px; a{ display: block; border:1px solid #ccc; } } } } // 研发中心 // @keyframes yfzx_box{ // from{ // transform: scale(0); // } // to{ // transform: scale(0.2); // } // } .yfzx{ .num{ padding: 6% 0; ul{ margin: -15px; li{ width: 33.33%; padding: 15px; display: flex; align-items: center; justify-content: center; .box{ width: 290px; height: 290px; background: rgba(1,146,75,0.1); border-radius: 50%; display: flex; justify-content: center; // animation: yfzx_box 2s linear; } .box_color{ margin-top: 7px; width: 262px; height: 262px; background:@color; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; p{ font-size: 18px; } h2{ font-size: 60px; // padding: 20px 0; } i{ font-size: 18px; display: block; } } } } } .summary{ padding: 4% 0; line-height: 34px; text-align: center; border-top:1px solid #f5f5f5; font-size: 16px; } .pic_list{ margin-bottom: 4%; ul{ margin: -5px; } li{ padding: 5px; width: 25%; margin-bottom: 2%; } } } // 生产环境 .schj{ padding-top: 2%; } .schj_one{ margin: 4% 0; display: flex; position: relative; overflow: hidden; padding-bottom: 100px; .swiper-container{ width: 50%; } .cont{ width: 50%; padding:50px 100px; box-sizing: border-box; i{ font-size: 60px; font-weight: bold; color: @color; } h2{ font-size: 40px; background-color: #fff; margin-top: -36px; position: relative; z-index: 9; } p{ padding-top: 4%; } } .thumbs{ width: 73%; position: absolute; bottom: 0; right: 0; overflow: hidden; img{ padding: 15px; background-color: #fff; } } } // 新闻中心 .news { // padding: 6% 0; .news_list{ padding-top: 2%; ul { li { margin-bottom: 10px; a { display: flex; justify-content: space-between; padding: 30px; // border-bottom: 1px solid #ccc; background-color: #f5f5f5; .img { width: 18%; } .cont { width: 82%; padding-right: 20px; box-sizing: border-box; h1 { font-size: 20px; margin-top: 2%; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .time { display: flex; align-items: flex-end; color: @color; i{ font-size: 50px; font-weight: bold; line-height: 56px;margin-right: 10px; } p{ font-size: 18px; } } .sum { margin-top: 10px; line-height: 28px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } } p.more { width: 124px; line-height: 40px; text-align: center; border: 1px solid #ccc; margin-top: 14px; .transition; } &:hover .more { background-color: @color; color: #fff; } } } } } } .news_read { padding: 4% 0; // background-color: #f7f7f7; } .news_read .news_typename h1 { font-size: 22px; text-align: center; } .news_read .news_typename .time { text-align: center; color: #747474; padding: 14px 0; } .news_read .read_con { padding-bottom: 40px; line-height: 24px; } .news_read .cc_book { padding: 40px 0; margin-top: 20px; border-top: 1px solid #ccc; } // 技术支持 .tech{ padding: 3% 0; ul{ margin: -15px; li{ width: 33.33%; padding: 15px; a{ display: block; .tit{ h1{ font-size: 18px; width: 100%; padding: 14px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sum{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; line-height: 24px; } } } } } } .contact{ padding-top: 4%; .info{ &>div{ background-color: #eff3f5; padding: 40px 60px; margin-bottom: 12px; } h1{ font-size: 24px; font-weight: bold; color: @color; } ul{ display: flex; } .list{ display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 40px; padding-bottom: 10px; border-top:1px solid #e7e7e7; overflow: hidden; } h5{ font-size: 18px; font-weight: bold; line-height: 40px; i{ color: @color; } } ul{ margin: -30px; } li{ padding:0 30px; } } } // .amap-info{ // position: absolute; // left: 158px !important; // top: 198px !important; // } .culture{ padding: 4% 0; .con1400{ overflow: hidden; } iframe{ margin-top: -140px; margin-left: -3px; margin-right: -3px; } .wrap_left{ display: none; } } .head_wap { display: none; } .leave{ display: flex; margin-bottom: 4%; justify-content: center; background:url(../images/message_bj.jpg) no-repeat center; background-size: cover; h1.typename{ font-size: 30px; text-align: center; padding: 4% 0; color: #fff; } } .lng_wap{ position: absolute; left: 14px; top: 20px; z-index: 9999; a{ display: block; background:url(../images/public/en.jpg) no-repeat center left; padding-left: 50px; background-size: contain; color: #fff; } } .investor-list1{ padding:1.5rem 0 2.75rem; position:relative; background:#fff; z-index:1; .tip{ justify-content:flex-start; color:#000; margin-bottom:.75rem; } .line{ width:1.5rem; height:5px; background:#f98561; margin-right:.5rem; } .title{ color:#000; margin-left:2rem; } .leftbox{ width:50%; padding:1rem 1.75rem 0; .tit2{ color:#000; margin-bottom:2rem; width:100%; } .text-l,.text-r{ width:50%; } .tit3{ color:#4c4c4c; margin-bottom:1rem; } .sp1{ color:#1a1a1a; line-height:1; font-family:"DINCOND-BOLD"; margin-bottom:.5rem; } .tipimg{ margin-right:10px; } .spli{ margin-bottom:.75rem; } .sp3{ width:80px; text-align:right; margin-right:1rem; } .num{ color:#333; } } .rightbox{ width:50%; padding:0 1.75rem; .li{ color:#333; width:80px; height:35px; line-height:35px; text-align:center; margin-bottom:.5rem; transition: all .3s ease; } .li.cur,.li:hover{ background:#ed431d; color:#fff; } .sharesimg{ width:80%; } } } @media (max-width:1024px){ .investor-list1 .leftbox{ margin-bottom:1rem; } .investor-list1 .leftbox{ padding-right:0; padding-top:0; } .investor-list1 .leftbox,.investor-list1 .rightbox{ width:100%; } .investor-list1 .leftbox .spli{ width:50%; margin-top:.55rem; } } @media (max-width:767px){ .investor-list1 .line{ height:2px; } .n-subbox .subnav a,.n-banner .n-subbox{ height:45px; line-height:45px; } .investor-list1 .leftbox .tit2{ margin-bottom:.65rem; } .investor-list1 .leftbox{ padding-left:0; } .investor-list1 .leftbox .tit3{ margin-bottom:.5rem; } .n-subbox .subnav a{ margin:0 .3rem; } .investor-list1 .leftbox .text-l, .investor-list1 .leftbox .text-r{ width:100%; } .investor-list1 .leftbox .sp3{ width:60px; margin-right:.3rem; } .investor-list1 .rightbox{ padding:0; } .investor-list1 .rightbox .sharesimg{ width:100%; } } .fl2 { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } .i_pro .pro_type_list ul li:nth-child(4) { display: none; }