// 公共部分 body { // -webkit-filter: grayscale(100%); // -moz-filter: grayscale(100%); // -ms-filter: grayscale(100%); // -o-filter: grayscale(100%); // filter: grayscale(100%); // filter: gray; } .list_ul { overflow: hidden; ul { display: flex; flex-wrap: wrap; li { box-sizing: border-box; a { display: block; } } } } @color: #045b5b; @font-face { font-family: SiYuanSong; src: url(https://cxtextile.cn/templates/netskin/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; } } .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; } // 公共结束 // 头部开始 .head_pc{ display: flex; .lng{ display: flex; align-items: center;justify-content: space-between; line-height: 50px; a{ display: block; padding-left: 30px; background: url(../image/lng.gif) no-repeat left center; background-size: 24px; } } .logo{ display: block; width: 582px; background-color: #7db3ac; display: flex; justify-content: flex-end; align-items: center; padding:0 50px; box-sizing: border-box; } .nav{ flex:1; padding:0 50px; box-sizing: border-box; max-width: 1135px; &>ul{ display: flex; width: 100%; justify-content: space-between; border-top:1px solid #ccc; &>li{ position: relative; &>a{ display: block; line-height: 90px; .transition; padding:0 24px; &.hover, &:hover{ // color: @color; color: #fff; background-color: @color; } } } } .ul2{ position: absolute; left: 0; top: 90px; width: 100%; background: rgba(0,0,0,0.6); z-index: 888; padding: 14px 5px; display: none; li{ a{ display: block; color: #fff; text-align: center; line-height: 30px; padding: 5px 0; border-bottom: 1px solid #ccc; &:hover{ border-bottom: 1px solid @color; } } } } } } // 公司实力 .i_num{ padding: 4% 0; .con1500{ ul{ display: flex; justify-content: space-between; li{ width: 25%; div{ display: flex; align-items: flex-start; justify-content: center; strong{ font-size: 70px; font-weight: bold; line-height: 64px; } i{ display: block; width: 22px; height: 22px; line-height: 22px; text-align: center; background-color: @color; color: #fff; border-radius: 50%; margin-left: 15px; } } p{ text-align: center; font-size: 16px; padding: 4% 0; } } } } } // 首页产品 .i_type{ padding: 4% 0 1% 0; text-align: center; color: #fff; h1{ font-size: 36px; font-weight: bold; strong{ color:#e3c579; } } h5{ font-size: 20px; margin-top: 0.5%; padding:0 90px; position: relative; display: inline-block; text-transform: uppercase; &::before{ content: ''; position: absolute; width: 58px; height: 1px; left: 0; top: 50%; transform: translateY(-50%); background-color: #fff; } &::after{ content: ''; position: absolute; width: 58px; height: 1px; right: 0; top: 50%; transform: translateY(-50%); background-color: #fff; } } } .index_sum{ text-align: center; color: #fff; margin-bottom: 2%; } .i_pro{ background: no-repeat center; padding-bottom: 4%; .list{ overflow: hidden; ul{ display: flex; li{ width: 375px; // height: 585px; a{ display: block; .img{ height: 100%; img{ height: 100%; width: 750px; max-width: none; } } h5{ background-color: #fff; text-align: center; line-height: 60px; position: relative; display: flex; align-items: center; justify-content: center; .transition; img{ display: block; padding:0 20px; } &::after{ content: ''; width: 1px; height: 20px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-color: #cdcdcd; } } &:hover h5{ background-color: #e3c579; color: #000; } } &:last-child a>h5::after{ display: none; } } } } } // 首页核心优势 .i_advan{ background: no-repeat center; .i_type{ h1{ color: #333; strong{ color: @color; } } h5{ color: @color; &::before{ background-color: @color; } &::after{ background-color: @color; } } } .advan_list{ display: flex; align-items: center; justify-content: center; position: relative; padding: 4% 0; ul{ position: absolute; overflow: hidden; .tit{ display: flex; align-items: center; } h2{ margin:0 16px; border-bottom: 1px solid #ccc; padding: 8px 0; font-size: 18px; font-weight: bold; } i{ display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background-color: @color; color: #fff; font-size: 20px; } p{ padding: 10px 0; padding-left: 68px; max-width: 400px; line-height: 26px; } } .ul1{ left: 0; margin: -30px; li{ padding: 30px; } li:first-child, li:last-child{ padding-left: 100px; } } .ul2{ right: 0; margin: -30px; li{ padding: 30px; } li:nth-child(2){ padding-left: 100px; } } .img{ width: 460px; height: 460px; border-radius: 50%; overflow: hidden; img{ max-width: none; } } } } // 首页关于我们 .index_ab{ background: no-repeat center; padding-bottom: 4%; .index_sum{ line-height: 26px; } .list_ul{ ul{ margin: -20px; li{ width: 50%; padding: 20px; } .box{ background-color: #fff; display: flex; .left{ width: 230px; padding: 34px; box-sizing: border-box; border-right: 1px solid #ccc; display: flex; align-items: center; justify-content: center; .img{ text-align: center; } h2{ font-size: 18px; text-align: center; line-height: 50px; } } .right{ flex:1; padding: 34px; box-sizing: border-box; line-height: 26px; } } a{ display: block; border-top: 1px solid #ccc; line-height: 60px; background-color: #fff; padding-left: 50px; color: #666; .transition; &:hover{ color: @color; padding-left: 60px; } } } } } // 首页新闻中心 .i_news{ background: no-repeat center; padding-bottom: 4%; .i_type_news{ padding: 4% 0 2% 0; display: flex; justify-content: space-between; align-items: center; h1{ font-size: 36px; strong{ color: @color; } } .tit{ display: flex; align-items: flex-end; } h5{ font-size: 20px; color:@color; padding:0 10px; } } .news_list{ display: flex; margin:0 -20px; overflow: hidden; } .news_img{ width: 50%; padding:0 20px; a{ display: block; .tit{ line-height: 70px; background-color: @color; color: #fff; font-size: 18px; padding:0 20px; box-sizing: border-box; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; justify-content: space-between; } } } .news_num{ width: 50%; padding:0 20px; ul{ display: flex; flex-direction: column; height: 100%; } li{ margin-bottom: 10px; &:last-child{ margin-bottom: 0; } } a{ display: flex; align-items: center; padding: 28px 0; background-color: #fff; .time{ width: 140px; text-align: center; border-right: 1px solid #ccc; strong{ font-size: 24px; } p{ color: #999999; } } .cont{ flex:1; padding:0 40px; h2{ font-size: 20px; margin-bottom: 14px; } .sum{ line-height: 24px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } } } } } // 生产车间 .i_shop{ ul{ display: flex; li{ width: 50%; a{ display: block; position: relative; overflow: hidden; img{ .transition; } &:hover{ color: @color; img{ transform: scale(1.02); } } } .tit{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; h1{ font-size: 28px; text-align: center; } p{ text-align: center; } } } } } // 公共底部 .footer{ background-color: #275a53; padding: 4% 0; .con1500{ display: flex; justify-content: space-between; } .qd{ .img{ img{ max-width: 177px; margin-left: 12px; } display: flex; } } } .foo_nav{ .ul1{ display: flex; color: #fff; .li1{ padding:0 56px; border-right: 1px solid rgba(255,255,255,0.2); &:last-child{ border:none; } &>a{ display: block; font-size: 18px; padding: 14px 0; position: relative; &::after{ content: ''; width: 24px; height: 1px; background-color: #fff; position: absolute; left: 0; bottom: 0; } } .ul2{ padding-top: 20px; } .li2{ &>a{ display: block; line-height: 34px; } } } } } .foo_bottom{ background-color: #0e2e2a; .con1500{ display: flex; justify-content: space-between; align-items: center; a{ display: block; line-height: 60px; color: #fff; } } } // 内页公共二级 .pub_left{ padding: 3% 0; ul{ display: flex; background-color: #fff; border:1px solid #ccc; li{ flex:1; position: relative; a{ display: block; font-size: 18px; text-align: center; line-height: 60px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; .transition; position: relative; z-index: 333; &:hover, &.hover{ background-color: @color; color: #fff; } } &::after{ content: ''; width: 1px; height: 30px; background-color: #ccc; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } &:last-child::after{ display: none; } } } } .public{ background-color: #eee; } .about{ line-height: 26px; .sum,.cont{ text-indent: 2em; } .pic_list{ padding: 2% 0; } } .culture{ margin-bottom: 4%; .img{ position: relative; } .cont{ position: absolute; right: 40px; top: 50%; transform: translateY(-50%); width: 100%; max-width: 730px; background: rgba(255,255,255,0.6); padding: 30px; line-height: 28px; clip-path: polygon(40px 0, calc(100%) 0, 100% 0, 100% calc(100%), calc(100%) 100%,0 100%, 0 calc(100%), 0 40px); .sum{ margin-bottom: 14px; } } } // 企业发展 .develop{ padding-bottom: 4%; .list_ul{ ul{ margin: -10px; } li{ width: 50%; padding: 10px; .img{ height: 100%; background-color: #fff; } .cont{ padding:20px 30px; box-sizing: border-box; line-height: 28px; strong{ font-weight: bold; } } } } .deve_t{ padding: 20px 0; li{ .img{ height: 100%; background-color: #fff; } .cont{ padding:20px 30px; box-sizing: border-box; line-height: 28px; strong{ font-weight: bold; } } } } } .equipment, .products{ ul { margin: -14px; li { width: 33.33%; padding: 14px; a { display: block; h3 { text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 50px; background-color: #f5f5f5; } } } } } .pro_read_bj{ padding-bottom: 4%; } .pro_read{ background-color: #fff; padding: 50px; .title{ font-size: 24px; padding: 10px 0; border-bottom: 1px solid #000; } .img{ padding: 2%; text-align: center; } .sum{ line-height: 26px; padding-bottom: 2%; } } .cc_book{ padding: 2%; border-top: 1px solid #000; } .cc_newslist_read{ display: flex; justify-content: space-between; } // 新闻中心 .news { padding: 3% 0; .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; } // 联系我们 .contact{ padding: 4% 0; .info{ ul{ margin: -10px; justify-content: space-between; li{ padding: 10px; width: 33.33%; a{ display: flex; padding: 14px; background-color: #fff; align-items: center; p{ font-size: 16px; padding-left: 14px; } } } } } #amap_container{ border:10px solid @color; } } .i_news{ .i_type{ display: none; } } .i_advan_wap{ display: none; .i_type{ h1{ color: #333; strong{ color: @color; } } h5{ color: #333; &::before, &::after{ background-color: @color; } } } .advan_list{ padding: 10px; ul{ li{ .tit{ display: flex; align-items: center; border-bottom: 1px solid #ccc; padding: 10px 0; } i{ display: block; width: 30px; line-height: 30px; text-align: center; color: #fff; background-color: @color; border-radius: 50%; } h2{ font-size: 18px; padding:0 14px; } p{ padding: 14px 0; line-height: 26px; } } } } } #foo_wap { width: 100%; height: 54px; background: @color; position: fixed; bottom: 0; left: 0; z-index: 102; display: none; z-index: 200; } #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; } // 留言 .leave { display: flex; padding: 4% 0; justify-content: center; h1.typename{ font-size: 30px; text-align: center; padding: 4% 0; } .mess_form { width: 100%; // 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; } } @media(max-width:992px){ .leave .mess_form{ width: 100%; } .leave .mess_form p{ display: block; margin-bottom: 0; } .leave .mess_form p input{ width: 100%; margin-bottom: 10px; } .leave{ padding: 4% 5px 5px 5px; } } .wap_lng{ a{ display: block; color: #fff; padding:20px 10px 20px 0; } }