master
Lee 2021-12-20 15:41:47 +08:00
parent e43bb6d950
commit 9172fbb3e8
2 changed files with 203 additions and 30 deletions

View File

@ -24,8 +24,8 @@ i {
} }
/* 去掉li 的小圆点 */ /* 去掉li 的小圆点 */
ul, ul,
ol, ol,
li { li {
list-style: none; list-style: none;
} }
@ -49,7 +49,7 @@ a {
text-decoration: none; text-decoration: none;
/* 手机端去除a标签点击时的背景样式 */ /* 手机端去除a标签点击时的背景样式 */
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
/* 去除边距 */ /* 去除边距 */
display: inline-block; display: inline-block;
} }
/* a:hover { /* a:hover {
@ -96,24 +96,17 @@ textarea {
.logo h1 a { .logo h1 a {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.w100{ width: 100%; margin: auto;} .w100{ width: 100%; margin: auto;}
.w1200{ width: 1280px; margin: auto;} .w1200{ width: 1280px; margin: auto;}
.clips1{ .clips1{
/* 弹性伸缩盒子模型显示 */ display: inline-block;
display: -webkit-box; white-space: nowrap;
/* 用省略号代替 */ width: 100%;
text-overflow: ellipsis; overflow: hidden;
/* 设置或检索伸缩盒对象的子元素的排列方式 */ text-overflow:ellipsis;
-webkit-box-orient: vertical;
/* 禁止数字和英文换行 */
word-break: break-all;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 1;
/* 溢出隐藏 */
overflow: hidden;
} }
.clips2{display: -webkit-box;-webkit-line-clamp: 2;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;} .clips2{display: -webkit-box;-webkit-line-clamp: 2;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
.clips3{display: -webkit-box;-webkit-line-clamp: 3;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;} .clips3{display: -webkit-box;-webkit-line-clamp: 3;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}

View File

@ -473,6 +473,7 @@
background: #FFFFFF; background: #FFFFFF;
width: 48.28%; width: 48.28%;
padding-bottom: 20px; padding-bottom: 20px;
position: relative;
} }
.index-news .left span{ .index-news .left span{
@ -497,6 +498,28 @@
font-size: 18px; font-size: 18px;
opacity: 1; opacity: 1;
} }
.index-news .left .news-time{
width: 82px;
height: 82px;
background-color: #e73f7c;
text-align: center;
color: #FFFFFF;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.index-news .left .news-time>strong{
padding-top: 10px;
display: block;
font-size: 24px;
line-height: 1.5;
}
.index-news .left .news-time>em{
display: block;
font-size: 14px;
line-height: 1.5;
}
/* 右侧 */ /* 右侧 */
.index-news .right{ .index-news .right{
width: 50%; width: 50%;
@ -864,10 +887,17 @@
} }
.memorabili-txt .swiper-slide{ .memorabili-txt .swiper-slide{
width: 46.6% !important; width: 46.6% !important;
height: 255px;
margin: 30px 0; margin: 30px 0;
padding: 0 0 50px; padding: 0 0 50px;
margin-left: -21.6%; margin-left: -21.6%;
opacity: 1;
cursor: pointer; cursor: pointer;
transition: all .6s;
}
.memorabili-txt .swiper-slide:nth-of-type(5){
opacity: 0;
transition: all .6s;
} }
.memorabili-txt .swiper-slide strong{ .memorabili-txt .swiper-slide strong{
display: block; display: block;
@ -1003,7 +1033,7 @@
} }
.classify-list ul li .product-img{ .classify-list ul li .product-img{
width: 50%; width: 50%;
/* height: 480px; */ height: 480px;
overflow: hidden; overflow: hidden;
} }
.classify-list ul li .product-img a{ .classify-list ul li .product-img a{
@ -1024,7 +1054,9 @@
/* font-family: "SourceHanSansCN-Regular"; */ /* font-family: "SourceHanSansCN-Regular"; */
position: relative; position: relative;
} }
.classify-list ul li .product-txt>a{
display: block;
}
.product-txt span, .product-txt span,
.product-detail-txt span{ .product-detail-txt span{
font-size: 18px; font-size: 18px;
@ -1034,17 +1066,28 @@
.product-detail-txt h3{ .product-detail-txt h3{
font-size: 32px; font-size: 32px;
line-height: 1.5; line-height: 1.5;
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
} }
.product-txt h4, .product-txt h4,
.product-detail-txt h4{ .product-detail-txt h4{
font-size: 22px; font-size: 22px;
line-height: 1.8; line-height: 1.8;
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
} }
.product-txt p, .product-txt p,
.product-detail-txt p{ .product-detail-txt p{
font-size: 15px; font-size: 15px;
line-height: 2; line-height: 2;
color: #585858; color: #585858;
display: -webkit-box;-webkit-line-clamp: 2;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;
} }
.product-txt em, .product-txt em,
.product-detail-txt em{ .product-detail-txt em{
@ -1205,6 +1248,11 @@
} }
.idea>div{ .idea>div{
width: 50%; width: 50%;
height: 426px;
}
.idea>div img{
width: 100%;
height: 100%;
} }
.idea .idea-content{ .idea .idea-content{
padding: 30px; padding: 30px;
@ -1251,6 +1299,13 @@
line-height: 70px; line-height: 70px;
padding: 0 30px; padding: 0 30px;
} }
.join-list li .join-title h4{
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
}
.join-list li .join-title h4, .join-list li .join-title h4,
.join-list li .join-title span{ .join-list li .join-title span{
display: block; display: block;
@ -1309,6 +1364,7 @@
margin: 35px auto 65px; margin: 35px auto 65px;
} }
.contact-left{ .contact-left{
width: 50%; width: 50%;
} }
@ -1356,6 +1412,11 @@
height: 500px; height: 500px;
position: relative; position: relative;
} }
.product-swiper .swiper-slide{
width: 100%;
height: 100%;
background-color: #F4F5F6;
}
.product-swiper img{ .product-swiper img{
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
@ -1426,6 +1487,7 @@
.product-content .detail img{ .product-content .detail img{
margin: 50px auto; margin: 50px auto;
max-width: 100%;
} }
/* 上下篇 */ /* 上下篇 */
@ -1660,6 +1722,9 @@
.pull-banner{ .pull-banner{
height: 420px; height: 420px;
} }
.product-swiper{
height: 470px;
}
} }
@media screen and (max-width:1360px){ @media screen and (max-width:1360px){
@ -1708,6 +1773,12 @@
.sub-nav dl dt>span p>a{ .sub-nav dl dt>span p>a{
line-height: 68px; line-height: 68px;
} }
.classify-list ul li .product-img{
height: 440px;
}
.product-swiper{
height: 460px;
}
} }
@media screen and (max-width:1280px){ @media screen and (max-width:1280px){
@ -1811,6 +1882,12 @@
.news-main .news-right .section .more{ .news-main .news-right .section .more{
font-size: 14px; font-size: 14px;
} }
.classify-list ul li .product-img{
height: 425px;
}
.product-swiper{
height: 450px;
}
} }
@media screen and (max-width:1200px){ @media screen and (max-width:1200px){
@ -1859,6 +1936,15 @@
.sub-nav dl dt>span p>a{ .sub-nav dl dt>span p>a{
line-height: 64px; line-height: 64px;
} }
.idea .idea-txt p{
line-height: 1.8;
}
.classify-list ul li .product-img{
height: 400px;
}
.product-swiper{
height: 440px;
}
} }
@media screen and (max-width:1080px){ @media screen and (max-width:1080px){
.classify-list ul li .product-txt{ .classify-list ul li .product-txt{
@ -1883,6 +1969,19 @@
.sub-nav dl dt>span p>a{ .sub-nav dl dt>span p>a{
line-height: 62px; line-height: 62px;
} }
.idea .idea-txt p{
font-size: 13px;
line-height: 2;
}
.join-list li .join-title{
font-size: 15px;
}
.classify-list ul li .product-img{
height: 350px;
}
.product-swiper{
height: 430px;
}
} }
@media screen and (max-width:980px){ @media screen and (max-width:980px){
@ -1915,7 +2014,48 @@
.sub-nav dl dt>span p>a{ .sub-nav dl dt>span p>a{
line-height: 60px; line-height: 60px;
} }
.idea .idea-txt p{
font-size: 13px;
}
.classify-list ul li .product-img{
height: 320px;
}
.product-swiper{
height: 420px;
}
} }
@media screen and (max-width:900px){
.idea .idea-txt p{
font-size: 12px;
line-height: 2;
}
.join-list li .join-title{
font-size: 14px;
}
.classify-list ul li .product-img{
height: 280px;
}
.classify-list ul li .product-txt{
height: 260px;
}
.product-txt h3, .product-detail-txt h3{
font-size: 24px;
}
.product-txt h4, .product-detail-txt h4{
font-size: 17px;
}
.product-txt em, .product-detail-txt em{
margin: 10px 0;
}
.product-txt p, .product-detail-txt p{
font-size: 14px;
}
.product-swiper{
height: 410px;
}
}
@media screen and (max-width:768px){ @media screen and (max-width:768px){
.w1200{ .w1200{
@ -1966,13 +2106,13 @@
.header-content .head-btn{ display: block; margin: 0;} .header-content .head-btn{ display: block; margin: 0;}
.header-content .nav ul{ box-sizing: content-box; width: 100%; padding: 30vh 0; height: 40vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;} .header-content .nav ul{ box-sizing: content-box; width: 100%; padding: 30vh 0; height: 40vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.header-content .nav ul li{ width: 100%; float: left; margin: auto; text-align: center;} .header-content .nav ul li{ width: 100%; float: left; margin: auto; text-align: center;}
.header-content .nav ul li a{ width: 100%; font-size: 18px; color: #FFFFFF; line-height: 35px; margin: 10px 0;} .header-content .nav ul li a{ width: 100%; font-size: 16px; color: #FFFFFF; line-height: 35px; margin: 10px 0;}
.header-content .nav.active{ transform: translate(0,0); opacity: 1;} .header-content .nav.active{ transform: translate(0,0); opacity: 1;}
.header-content .nav ul li.active a{ .header-content .nav ul li.active a{
background-color: rgb(0,0,0,0); background-color: rgb(0,0,0,0);
color: #E73F7C; color: #E73F7C;
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 16px;
} }
.header-content .sub-nav{ .header-content .sub-nav{
display: none; display: none;
@ -2047,7 +2187,6 @@
height: auto; height: auto;
font-size: 13px; font-size: 13px;
line-height: 28px; line-height: 28px;
margin-top: -28px;
background:none; background:none;
color: #E73F7C; color: #E73F7C;
text-align: right; text-align: right;
@ -2100,7 +2239,7 @@
height: 80px; height: 80px;
} }
.product-classify>li.active ins, .classify-item>li.active ins{ .product-classify>li.active ins, .classify-item>li.active ins{
opacity: 0; opacity: 1;
} }
.index-product>.middle{ .index-product>.middle{
margin: 20px 0; margin: 20px 0;
@ -2114,7 +2253,7 @@
} }
.index-product .product-list .product-item .img{ .index-product .product-list .product-item .img{
width: 100%; width: 100%;
height: auto; height: 230px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.index-product .product-list .product-item .img img{ .index-product .product-list .product-item .img img{
@ -2181,6 +2320,17 @@
font-size: 13px; font-size: 13px;
margin: 6px 0; margin: 6px 0;
} }
.index-news .left .news-time{
width: 60px;
height: 60px;
}
.index-news .left .news-time>strong{
font-size: 20px;
padding-top: 3px;
}
.index-news .left .news-time>em{
font-size: 12px;
}
/* 联系我们 */ /* 联系我们 */
.index-contact-bg{ .index-contact-bg{
@ -2401,7 +2551,7 @@
overflow: hidden; overflow: hidden;
} }
.classify-list ul li .product-img{ .classify-list ul li .product-img{
/* height: 240px; */ height: 240px;
width: 100%; width: 100%;
} }
.classify-list ul li .product-txt{ .classify-list ul li .product-txt{
@ -2441,7 +2591,7 @@
margin: 15px 0; margin: 15px 0;
} }
.product-txt .more, .news-content ul>li .news-txt .more{ .product-txt .more, .news-content ul>li .news-txt .more{
display: none; display: none !important;
width: 100px; width: 100px;
line-height: 26px; line-height: 26px;
background-color: #007EC0; background-color: #007EC0;
@ -2468,7 +2618,7 @@
} }
.product-swiper{ .product-swiper{
width: 100%; width: 100%;
height: auto; height: 230px;
} }
.product-detail-txt{ .product-detail-txt{
margin: 15px 0; margin: 15px 0;
@ -2535,6 +2685,7 @@
.news-content ul>li .news-txt h3{ .news-content ul>li .news-txt h3{
font-size: 13px; font-size: 13px;
text-align: justify; text-align: justify;
display: -webkit-box;-webkit-line-clamp: 2;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;
} }
.news-content ul>li .news-img{ .news-content ul>li .news-img{
width: 120px; width: 120px;
@ -2591,7 +2742,7 @@
display: none; display: none;
} }
.news-main .news-left h1{ .news-main .news-left h1{
font-size: 22px; font-size: 20px;
line-height: 1.5; line-height: 1.5;
} }
.news-main .news-left .news-number{ .news-main .news-left .news-number{
@ -2625,9 +2776,11 @@
} }
.idea>div{ .idea>div{
width: 100%; width: 100%;
height: auto;
} }
.idea .idea-content{ .idea .idea-content{
padding: 0; padding: 0;
height: auto;
} }
.idea .idea-content h3{ .idea .idea-content h3{
font-size: 22px; font-size: 22px;
@ -2650,10 +2803,13 @@
} }
.join-list li .join-title{ .join-list li .join-title{
font-size: 14px; font-size: 13px;
line-height: 40px; line-height: 40px;
padding: 0 10px; padding: 0 10px;
} }
.join-list li .join-title h4{
max-width: 60%;
}
.join-list li .join-title h4, .join-list li .join-title span{ .join-list li .join-title h4, .join-list li .join-title span{
width: auto; width: auto;
} }
@ -2697,6 +2853,30 @@
min-height: auto; min-height: auto;
} }
} }
@media screen and (max-width:768px){
.page-product>div .page-txt strong{
font-size: 12px;
}
.page-product span img{
height: 6px;
}
.sub-nav dl dt, .product-classify>li, .classify-item>li{
width: 50%;
}
.index-product .product-list .product-items li.active{
flex-wrap: wrap;
}
.index-product .product-list .product-item .img{
height: 220px;
}
.product-swiper{
height: 220px;
}
.news-main .news-left h1{
font-size: 18px;
}
}