ziqim/Yangcai365_design/manage/zinc/mobileWorks/css/mobileWorksHome.css

.header{
  width: 100%;
  height: 60px;
  display: flex;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px !important;
  background-color:#54708c;
  z-index: 9999;
}
.header .classify{
  line-height: 60px;
  color: #fff;
  margin: 0 10px;
}
.my-classify{
  line-height: 60px;
  color: #fff;
  margin: 0 10px;
}
.serch {
  flex:1;
  margin-top: 10px;
  position: relative;
}
.serch input{
 height:38px !important;
 width: 100% !important;
 padding-left: 33px !important;
 border-radius: 19px !important;
 font-size: 14px !important;
}
.serch img{
  position: absolute;
  top: 7px;
  left: 3px;
  width: 25px;
  height: 25px;
}
.header-cater{
  width: 100%;
  height: 50px;
  display: flex;
  position: fixed;
  top: 60px;
  line-height: 50px;
  background-color:#fff;
  z-index: 9999;
  border-bottom: 1px solid #ababab;
}
.select{
  width: 100%;
  /* height: 104px; */
  padding: 10px;
  position: fixed;
  top: 110px;
  background-color: #fff;
  z-index: 999;
}
 .text-value{
  display: inline-block;
  line-height: 24px;
  background-color: #f2f2f2;
  color: #999;
  margin: 0 10px 10px 0;
  padding: 4px 15px;
  border-radius: 20px;
  font-size: 12px;
}
.header-cater .header-cater-rigth{
  flex: 1;
  /* color: #54708c; */
  border-bottom: 2px solid #54708c;
  text-align: center;
}
.header-cater .header-cater-left{
  flex: 1;
  /* color: #54708c; */
  /* border-bottom: 2px solid #54708c; */
  text-align: center;
  position: relative;
}
.header-cater-left .dom-arrow{
   position: absolute;
   display: none;
   right: 26px;
   top: 18px;
   width: 30px;
   height: 30px;
   background: url(../images/xjt.png)  no-repeat;
}
.commodity-box{
  width: 100%;
  display: flex;
 
  background-color: #fff;
}
.commodity-box ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.commodity-box ul li {
  width: 48%;
  display: flex;
  position: relative;
  height: 352px;
  margin: 10px 0 0 5px;
}
.son-box{
 width: 100%;
 height: 100%;
 /* background-color: pink; */
}
.son-box .son-box-item{
  width: 100%;
  height: 267px;
  box-sizing: border-box;
  padding: 10px;
  overflow: hidden;
  background: #e1e1e1;
}
.son-box .son-box-item-card{
  width: 100%;
  height: 238px;;
  box-sizing: border-box;
  padding: 10px;
  overflow: hidden;
  background: #e1e1e1;
}
.son-box-item a{
  display: inline-block;
  width: 100%;
  height: 100%;
}
.son-box-item-card a{
  display: inline-block;
  width: 100%;
  height: 100%;
}
.son-box-item a img{
  width: 100%;
  height: 100%;
}
.son-box-item-card a img{
  width: 100%;
  height: 218px;
}
.son-box-item-bottom .idName{
  color: #4a89dc;
  font-size: 14px;
}
.son-box-item-footer{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 10px;
}
.son-box-item-footer .one{
  color: #ababab;
}
.son-box-item-footer .two{
  display: inline-block;
  width: 50px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border: 1px solid #ababab;;
  border-radius: 10px;
  color: #ababab;
}

/* mui样式 */
.mui-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 998;
  background-color: rgba(0,0,0,.3);
}
/* 控制显示隐藏 */
.none{
  display: none;
}
.block{
  display: block;
}
.active{
  background-color: #34495e;
  color: #fff;
}
/* 分类 */
.cates-box{
  display: none;
  position: relative;
}
.box-showdom{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  background-color: rgba(0,0,0,.3);
  transition-duration: .3s;
}
.box-white{
  width: 77%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  background-color: #fff;
  transform: translateX(30%);
  transition-duration: .3s;
}
.catres{
  font-size: 16px !important;
  color: #000 !important;
  margin: 10px 10px;
}
.my-style{
  width: 100%;
  height: 104px;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 220px;
}
.catres-value{
  display: inline-block;
  line-height: 24px;
  background-color: #f2f2f2;
  color: #999;
  margin: 0 10px 10px 0;
  padding: 4px 15px;
  border-radius: 20px;
  font-size: 12px;
}
.my-style-btn{
  position: absolute;
  width: 100%;
  bottom: 0;
  right: 0;
  display: block;
  height: 40px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background: #54708c;
  font-size: 16px;
}
.my-style-btn-template-home{
  position: absolute;
  width: 100%;
  bottom: 0;
  right: 0;
  display: block;
  height: 40px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background: #54708c;
  font-size: 16px;
}
.actives{
  background-color: #34495e;
  color: #fff;
}
/* 返回顶部 */
.top{
  display: inline-block;
  position: fixed;
  right: 10px;
  bottom: 120px;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.8);
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,0,0,.3);
  font-size: .16rem;
  color: #999;
  line-height: .2rem;
  transition-duration: .5s;
  z-index: 10000;
  display: none;
}
.top img{
   margin-top: 3px;
}
.top .top-text{
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}
/* 搜索显示 */
.serch-show{
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 60px;
  font-size: 14px;
  color: #727272;
  width: 100%;
  background: #f5f5f5;
  z-index: 10000;
  display: none;
}

/* 热度红心样式 */
.son-box-item-bottom .heat{
  width: 100%;
  height: 20px;
}
.heat{
    margin: 0 !important;
}
.heat img{
  width: 15px;
  height: 15px;
}