html,
body {
height: 100%;
}
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
text-decoration: none;
color: #333;
}
/* 闅愯棌婊氬姩鏉� */
.page-home .content::-webkit-scrollbar {
display: none;
}
/* 涓轰簡鍏煎IE鍜孍dge */
.page-home .content{
-ms-overflow-style: none;
/* IE鍜孍dge */
scrollbar-width: none;
/* Firefox */
}
.page-home {
display: flex;
flex-direction: column;
height: 100%;
}
.topNav{
width: 1200px;
margin:0 auto;
height:90px;
}
.topbox{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.topbox .logo{
width:240px;
margin:0 40px;
}
.topbox .logo img{
max-width: 240px;
height: 80px;
}
.layui-nav .layui-nav-item{
height: 90px;
line-height: 90px;
}
.layui-nav .layui-nav-item a{
padding: 0 23px;
}
.layui-nav * {
font-size: 15px;
font-weight: 500;
}
.page-home .top {
flex-shrink: 0;
}
.page-home .content {
flex: 1;
overflow-y: scroll;
}
.shops {
padding-top: 20px;
padding-bottom: 20px;
}
.shops h2 {
font-size: 30px;
margin-top: 20px;
text-align: center;
}
.shops .desc {
font-size: 18px;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
color: #999;
}
.shops .chanpin{
margin-bottom: 20px;
}
.shops .img {
width: 100%;
height: 240px;
background-color: #fff;
overflow: hidden;
position: relative; /* 鍙互鏍规嵁闇€瑕佽瀹氬畾浣嶆柟寮� */
}
.shops .img img{
width: 100%;
height: auto;
object-fit: cover; /* 鍙€夛紝淇濇寔鍥剧墖姣斾緥骞跺～鍏呯埗瀹瑰櫒 */
}
.chanpin:hover .img img {
transition: transform 0.3s ease-in-out; /* 娣诲姞杩囨浮鏁堟灉锛屾椂闂淬€侀€熷害鏇茬嚎鍙嚜瀹氫箟 */
transform: scale(1.2); /* 鏀惧ぇ姣斾緥锛屽彲鏍规嵁闇€瑕佽皟鏁� */
}
.shaixuan{
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-top:18px;
overflow: hidden;
box-sizing: border-box;
margin-bottom: 16px;
position: relative;
}
.shaixuan .item{
padding: 12px 21px;
margin-right: 30px;
margin-bottom:14px;
color: #666;
cursor: pointer;
line-height: 1;
}
.shaixuan .item.active{
color: #3388ff;
background-color:#f2f7ff;
border-radius: 6px;
}
.shaixuan .item span{
font-size: 18px;
line-height: 1;
}
.shops .name {
text-align: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-moz-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
border-bottom-left-radius: 4px;
border-bottom-right-radius:4px;
font-size: 18px;
box-sizing: border-box;
padding: 16px;
color: #333;
border:#f5f5f5 1px solid;
}
.jieshao {
padding: 10px;
}
.footer {
background-color:#141a24;
padding:30px 0;
}
.footer .box{
width: 1200px;
margin: 0 auto;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.footer .box .con{
padding-top: 32px;
}
.footer .box .con dl{
float: left;
text-align: left;
height: auto;
}
.footer .box .con dl.w140{
width: 140px;
overflow: hidden;
float: left;
/* height: 232px;*/
}
.footer .box .con dl.w260{
width:260px;
overflow: hidden;
float: left;
/* height: 232px;*/
}
.footer .box .con dl.w360{
width:360px;
overflow: hidden;
float: left;
color:rgb(153, 153, 153);
}
.footer .box .con dl.w360 dd{
height: 30px;
line-height: 30px;
}
dd.tel{
font-size: 30px;
font-weight: bold;
color: #ffffff;
margin-bottom: 30px;
}
.footer .box .con dl dt {
font-size: 20px;
color: #fff;
padding-bottom: 18px;
font-weight: 600;
position: relative;
margin-bottom: 8px;
}
.footer .box .con dl dd{
float: left;
text-align: left;
width: 100%;
overflow: hidden;
}
.footer .box .con dl dd a {
display: block;
line-height: 30px;
font-size: 14px;
color: rgb(153, 153, 153);
float: left;
}
.footer .box .con dl:nth-child(2) {
margin-left:40px
}
dd.ewm{
height: 180px!important;
}
dd.ewm .box{
width: 110px;
float: left;
padding: 20px;
}
dd.ewm .box img{
width: 110px;
height: 110px;
}
dd.ewm .box p{
text-align: center;
}
.footer .box .links{
padding: 30px 0;
}
.footer .box .links dl {
/* padding-top: 30px;*/
display: flex;
flex-direction: row;
}
.footer .box .links dt{
color: #f2f2f2;
}
.footer .box .links a{
color: #999;
}
.copyright{
background-color:#141a24;
padding-top: 32px;
border-top: 1px #20252f solid;
}
.copyright .con{
margin: 0 auto;
width: 1200px;
height: 80px;
display: flex;
flex-direction: row;
}
.copyright .con .logo{
width: 240px;
margin: 0 40px;
}
.copyright .con .logo img {
max-width: 240px;
height: 80px;
}
.copyright .con .text{
text-align: center;
flex:1;
color: #999;
}
.copyright .con .text p{
line-height: 36px;
}
.copyright .con .text a{
color: #999;
display: inline-block;
height: 18px;
line-height: 18px;
margin-right: 10px;
}
.copyright .con .text a img{
width: 16px;
margin-right: 6px;
display: inline-block;
vertical-align: middle;
}
.footer .nav {
padding: 20px 0 10px 0;
height: 34px;
line-height: 34px;
font-size: 15px;
text-align: center;
color: #333;
}
.footer .nav li {
display: inline-block;
padding: 0 20px;
}
.footer .links {
text-align: center;
height: 30px;
line-height: 30px;
}
.footer .links a {
padding: 0 12px;
}
.beian {
text-align: center;
color: #333;
}
.footer a {
color: #333;
}
.image{
padding: 0;
margin: 0;
}
.ltop{
padding-top: 10px;
display: flex;
margin-bottom:40px;
}
.ltop .img{
width:421px;
height: 315px;
background-color: #ccc;
margin-right: 20px;
overflow: hidden;
border:1px solid #f2f2f2;
}
.ltop .img img{
width: 100%;
height: auto;
object-fit: cover; /* 鍙€夛紝淇濇寔鍥剧墖姣斾緥骞跺～鍏呯埗瀹瑰櫒 */
}
.ltop .miaoshu{
flex: 1;
}
.ltop .miaoshu h1{
font-size: 30px;
font-weight: bold;
color: #333;
line-height: 45px;
}
.ltop .miaoshu .product{
padding: 36px 20px;
margin-top: 16px;
display: flex;
-webkit-box-align: flex-end;
-webkit-align-items: flex-end;
-moz-box-align: flex-end;
-moz-align-items: flex-end;
-ms-flex-align: flex-end;
align-items: flex-end;
background-color: #f5f5f5;
font-size: 18px;
color: #666;
}
.ltop .yuanjia{
font-size: 20px;
color: #666;
word-wrap: break-word;
}
.ltop .yuanjia span,.ltop .zdjia span{
display: inline-block;
margin-right: 6px;
height: 45px;
line-height: 45px;
}
.ltop .price{
padding-left: 10px;
color:#e6322e;
font-size: 30px;
font-weight: 600;
}
.ltop .unit{
color:#e6322e;
font-size: 20px;
}
.ltop .zdjia{
font-size: 20px;
margin-left: 20px;
color: #999;
}
.ltop .zdjia .zhidao{
text-decoration:line-through;
}
.ltop .ltop .miaoshu{
padding: 10px;
flex: 1;
}
.ltop .miaoshu .desc{
font-size: 16px;
color: #666;
padding: 10px 0;
}
.ltop .tag {
padding: 10px 0;
}
.ltop .tag span{
display: inline-block;
padding: 5px 15px;
border-radius: 2px;
font-size: 16px;
color: #3388ff;
background-color: #f2f7ff;
}
.ltop .lianxi{
padding-top: 20px;
}
.item-page-con{
border:1px solid #f2f2f2;
margin-bottom: 40px;
}
.item-page-con .tapbar{
height:60px; line-height: 60px; background-color: #f5f5f5;
}
.item-page-con .tapbar .name{
height: 56px; line-height: 56px; border-top: 4px solid #3388ff;padding:0 40px;display: inline-block;font-size: 20px;color:#3388ff
}
.item-page-con img{
max-width: 100%!important;
}
/**鍒嗛〉 */
ul.pagination{
text-align: center;
}
ul.pagination li{
display: inline-block;
}
ul.pagination li a,ul.pagination li span{
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 16px;
margin:5px;
border:1px solid #e5e5e5;
}
ul.pagination li.active span{
color:#fff;
background: #ec6100;
border:none;
}
ul.pagination li.disabled span{
color:#d5d5d5;
}
/**鍐呭宸╁浐 */
.left{
width:260px;
margin-right: 16px;
float: left;
}
.cate{
background: #fff;
-webkit-user-select: none;
/* Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+ */
user-select: none;
}
.cate li{
padding:0 32px;
border-bottom: 1px solid #f2f2f2;
}
.cate li a{
font-size: 14px;
color: #444;
height: 44px;
line-height: 44px;
}
.cate li.active a{
color:#ff3300;
font-weight: 500;
}
.cate li.active a::before{
display:inline-block;
content:'';
height: 13px;
width: 2px;
background: #ff3300;
margin-right: 4px;
vertical-align: middle;
}
.contact{
background: #fff;
text-align: center;
padding: 32px;
margin-top: 16px;
}
.left .contact .rexian{
font-size: 18px;
}
.left .contact .tel{
font-size: 24px;
font-weight: bold;
color: #666;
}
.right{
float: left;
background: #fff;
padding: 32px;
width: 820px;
}
.right .head{
display: flex;
flex-direction: row;
padding-bottom: 16px;
border-bottom: 1px solid #f2f2f2;
margin-bottom: 16px;
}
.right .head .title{
flex:1;
}
.border{
border:1px solid #f2f2f2;
}
.rexian{
height: 24px;
line-height: 24px;
}
.rexian img{
width: 20px;
width: 20px;
display: inline-block;
vertical-align: middle;
margin-bottom: 4px;
}
.page-con{
padding-bottom: 10px;
}
.page-con img{
max-width: 100%!important;
}