// 公共部分 .list_ul { overflow: hidden; ul { display: flex; flex-wrap: wrap; li { box-sizing: border-box; a { display: block; } } } } @color:#95c752; @font-face{ font-family: fontm; src: url(../font/060-CAI978.ttf); } @font-face{ font-family: helv; src: url(../font/HelveticaObl-Heavy_0.ttf); } .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; } } .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; } // 公共结束 // 头部开始 .head_top{ padding: 0.2% 0; .con1400{ display: flex; align-items: center; justify-content: space-between; a.logo{ display: block; } ul{ display: flex; li{ padding: 5px; a{ width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background-color: #9a9a9a; border-radius: 50%; } } } } } .head{ // background: url(../images/nav_bj.jpg) no-repeat center; background-color: #f5f5f5; .con1400{ display: flex; justify-content: space-between; align-items: center; .nav{ width: 100%; ul{ display: flex; justify-content: space-between; li{ a{ display: block; padding:0 40px; line-height: 54px; font-size: 18px; .transition; &.hover, &:hover{ background-color: @color; color: #fff; } } } } } .pc_tel{ font-size: 18px; color: #fff; padding-left: 30px; letter-spacing: 3px; background:url(../images/tel.png) no-repeat left center; } } } .head_wap{ display: none; } .i_type{ font-size: 40px; padding-bottom: 24px; background: url(../images/icon.jpg) no-repeat center bottom; } a.more{ display: block; width: 148px; line-height: 42px; text-align: center; border:1px solid #ccc; .transition; &:hover{ color: #fff; background-color: @color; } } .i_pro{ padding: 4% 0 2% 0; .con1400{ display: flex; justify-content: space-between; .pro_l{ width: 40%; } .i_type{ background: url(../images/icon.jpg) no-repeat left bottom; } .i_sum{ line-height: 36px; font-size: 18px; color: #5e5e5e; padding-top: 24px; } .more{ margin: 30px 0; } .pro_r{ width: 56%; } } } .i_inno{ padding: 2% 0 2% 0; .con1400{ .i_type{ text-align: center; margin-bottom: 2%; } .list_ul{ li{ width: 33.33%; padding: 18px; a{ display: block; height: 100%; border-bottom: 1px solid #ccc; } .sum{ line-height: 32px; font-size: 16px; color: #5e5e5e; padding: 4% 0; } } } } } .i_about{ .con1400{ .i_type{ text-align: center; margin-bottom: 2%; } .about_con{ display: flex; video{ width: 57%; } .ab_sum{ width: 43%; padding-top: 14px; padding-left: 30px; box-sizing: border-box; color: #5e5e5e; font-size: 16px; line-height: 32px; .more{ margin-top: 6%; } } } } } .xinli{ padding: 4% 0 2% 0; .con1400{ .i_type{ text-align: center; margin-bottom: 2%; } a{ display: block; overflow: hidden; img{ .transition; } &:hover{ img{ transform: scale(1.03); } } } .poct{ display: flex; justify-content: space-between; .poct_r{ .top{ display: flex; justify-content: space-between; margin-bottom: 26px; } } } } } #foo_wap{ display: none; } .footer{ background-color: #f3f3f3; padding:4% 0; .con1400{ display: flex; justify-content: space-between; .foo_nav{ h1{ font-size: 16px; padding-left: 20px; margin-bottom: 20px; } ul{ display: flex; a{ display: block; font-size: 16px; color: #676767; padding:0 20px; } } } .index_cont{ line-height: 30px; h1{ font-size: 16px; margin-bottom: 20px; } } } } .foo_bottom{ border-top:1px solid #ccc; background-color: #f3f3f3; .con1400{ display: flex; justify-content: center; a{ display: block; padding:16px 20px; } } } .pub_type{ padding: 3% 0; h1{ font-size: 40px; text-align: center; padding: 14px 0; background:url(../images/icon.jpg) no-repeat center bottom; } } .products_type{ padding-bottom: 4%; .list_ul{ ul{ margin: -20px; li{ padding: 20px; width: 33.33%; a{ display: block; position: relative; h3{ width: 100%; position: absolute; left: 0; bottom: 0; color: #fff; font-size: 20px; text-align: center; padding: 30px 0; z-index: 666; .transition; } .shadow{ position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; box-shadow: 0 -30px 100px #333 inset; } &:hover h3{ color: #95c752; } } } } } } .products{ padding: 4% 0; .con1400{ display: flex; justify-content: space-between; .pub_left{ width: 22%; h1{ background-color: @color; color: #fff; font-size: 30px; line-height: 50px; padding: 8% 0 4% 0; padding-left: 24px; } ul{ padding: 14px 0; width: 100%; background-color: #f5f5f5; .lis1{ a{ display: block; line-height: 40px; padding-left: 24px; .transition; &:hover, &.hover{ background-color: @color; color: #fff; } } } } } .list_ul{ width: 74%; ul{ margin: -16px; li{ padding: 16px; width: 33.33%; h3{ text-align: center; line-height: 30px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 12px; } } } } } } .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; } } .pro_img{ width: 44%; overflow: hidden; #thumbs{ padding: 14px 0; .swiper-slide-thumb-active img{ border:1px solid @color; } } } } .quality{ .list{ position: relative; margin-bottom: 4%; .box{ display: flex; justify-content: space-between; .img{ width: 56%; } .list_ul{ width: 40%; padding-top: 6%; ul{ margin: -8px; li{ padding: 8px; } } } } .type_cont{ position: absolute; width: 100%; max-width: 720px; right: 0; bottom: 0; background-color: #f6f6f6; padding: 30px; display: flex; align-items: flex-end; .type_l{ h1{ font-size: 28px; padding: 14px 0; } .sum{ color: #5e5e5e; line-height: 28px; font-size: 16px; } } i{ font-size: 60px; color: #d7d7d7; padding-left: 12px; } } .type_contx{ left: 0; } } } .honor{ margin-bottom: 4%; .con1400{ .honor_box{ position: relative; padding:0 4%; } .swiper-button-white{ color: #ccc; } } } .process{ .con1400{ .list_ul{ ul{ margin: -10px; li{ padding: 10px; width: 25%; } } } .cont_s{ padding: 3% 0; line-height: 30px; } } } .yeat{ .con1400{ .list_ul{ ul{ margin: -30px; li{ padding: 30px; width: 50%; a{ display: block; } } .tit_box{ display: flex; align-items: flex-end; justify-content: space-between; padding: 5px 30px; h2{ font-size: 20px; line-height: 46px; } i{ font-size: 48px; color: #7d7d7d; font-weight: bold; } } } } } } .develop{ .con1400{ .list_ul{ ul{ margin: -15px; li{ width: 25%; padding: 15px; a{ display: block; h2{ font-size: 48px; font-weight: bold; color: #7d7d7d; } .sum{ line-height: 30px; color: #6e6e6e; } } } } } .five_ul{ ul{ li{ a{ padding: 4% 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ccc; .img{ width: 32%; } .tit_box{ width: 65%; .tit{ display: flex; justify-content: space-between; align-items: center; h2{ font-size: 48px; color: #7d7d7d; font-weight: bold; } i{ display: block; width: 54px; height: 16px; background-color: @color; } } .sum{ line-height: 30px; color: #6e6e6e; } } } &:nth-child(even) a{ flex-direction: row-reverse; } } } } } } // 新闻中心 .news{ .news_list{ ul{ li{ a{ display: flex; justify-content: space-between; padding: 2% 0; border-bottom: 1px solid #ccc; background-color: #fff; .img{ width: 27%; } .cont{ width: 68%; h1{ font-size: 16px; } .time{ padding: 10px 0; color: #6e6e6e; } .sum{ 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; } .pic_list{ .con1400{ .ab_list{ ul{ margin: -17px; li{ padding: 17px; width:25%; } } } .company{ .cont_s{ line-height: 28px; text-align: center; padding: 3% 0; } } } } .ab_feature{ padding: 4%; background-color: @color; display: flex; align-items: center; .list_ul{ width: 50%; padding-right: 4%; box-sizing: border-box; ul{ li{ width: 50%; } } } .cont_s2{ width: 50%; line-height: 30px; color: #fff; } } .board{ display: flex; padding-top: 4%; .persion{ width: 36%; } .cont{ width: 64%; padding-left: 60px; box-sizing: border-box; h1{ font-size: 36px; color: #95c752; } .sum{ color: #808080; line-height: 32px; padding-top: 2%; } } } .ab_deve{ margin-bottom: 4%; .pub_type{ padding-bottom: 0; } .deve_list{ ul{ background: url(../images/deve_icon.jpg) repeat-y 15px ; } li{ display: flex; align-items: center; justify-content: space-between; .left{ width: 28%; box-sizing: border-box; .tit{ display: flex; align-items: flex-end; padding-left: 50px; background: url(../images/deve_icon.png) no-repeat left center; h1{ font-size: 24px; } i{ font-size: 12px; color: #848484; padding:0 10px; } } .sum{ padding-left: 50px; font-size: 16px; color: #636363; padding-top: 14px; } } .rig{ width: 70%; color: #808080; line-height: 32px; font-size: 16px; padding: 2% 0; border-bottom: 1px solid #ccc; } } } } .contact{ .contact_info{ .info{ display: flex; padding: 3% 0; .cont{ width: 42%; line-height: 28px; h1{ font-size: 30px; line-height: 60px; color: @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; } } #foo_wap { width: 100%; height: 54px; background: @color; position: fixed; bottom: 0; left: 0; z-index: 102; display: none; } #foo_wap a { display: block; padding-top: 8px; width: 25%; height: 54px; float: left; overflow: hidden; border-right:1px solid rgba(255,255,255,0.15) } #foo_wap a img { display: block; height: 18px; margin: 0 auto; } #foo_wap a p { text-align: center; font-size: 13px; color: #fff; line-height: 28px; } .head-wap{ a{ color: #fff; display: block; line-height: 50px; text-indent: 2em; } }