youhuiquan/choujiang/goods/css/goods.css

body{width: 100%;background: #F4F4F4;min-height: 100vh;}
#container{
	/*padding-bottom: 0.25rem;*/
	padding-top: 0.06rem;
}
/* 热门 */
.hot{
  width:3.65rem;
  /*height:2.15rem;*/
  margin:0 auto;
  background:#ffffff;
  border-radius:0.08rem;
  box-shadow:0px 0.015rem 0.035rem 0px rgba(122,121,121,0.19);
  margin-bottom: 0.09rem;
}
.title{
  width: 1.5rem;
  height: 0.405rem;
  color: #58E6FC;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.hot .title img{ 
  width: 0.16rem;
  height: 0.145rem;
  margin: 0 0.075rem;
}
.hot .hot_bottom{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
/*热门商品展示*/
.special{
  width: 1.15rem;
  margin-right: 0.05rem;
  border-radius: 0.04rem;
}
.special .show{
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.04rem 0.04rem 0 0;
}
.special .name{
  color: #333333;
  font-size: 0.14rem;
  padding: 0 0.04rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 0.08rem;
  padding-bottom: 0.1rem;
}
.special .price{
  overflow: hidden;
  padding-bottom: 0.15rem;
}
.special .new_price{
  color: #FF1E00;
  font-size: 0.15rem;
  padding: 0 0.04rem;
}
.special .old_price{
  color: #999999;
  font-size: 0.11rem;
  text-decoration: line-through;
}
.goodsList{
	width: 3.65rem;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
}
.goods_item{
  float: left;
  width:1.8rem;
  /*height:3.025rem;*/
  background:#ffffff;
  border:0.005rem solid #E7E7E7;
  border-radius:0.05rem;
  margin-bottom: 0.0615rem;
}
.goods_img{
  width:100%;
  height:1.8rem;
  background: #CCCCCC;
  border-radius:0.05rem 0.05rem 0 0;
}
.goods_name{
  /* height: 0.69rem; */
  height: 0.32rem;
  font-size: 0.13rem;
  padding: 0 0.06rem;
  padding-top: 0.1rem;
  line-height: 0.18rem;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.goods_name .icon{
  width:0.14rem;
  height:0.14rem;
  margin-top: 0.02rem;
  margin-right: 0.02rem;
  display: inline-block;
  vertical-align: sub;
}
.quan{
    padding: 0 0 0 0.06rem;
    height: 35px;
    display: flex;
    align-items: center;
}
.goods_coupon{
  width: 0.64rem;
  height: 0.14rem;
  color: #ffffff;
  font-size: 0.11rem;
  background: url(../imgs/quan.png) no-repeat ;
  background-size:0.64rem 0.14rem; 
}
.goods_coupon span:nth-child(1){
  display: block;
  float: left;
  width: 0.195rem;
  height: 0.14rem;
  line-height: 0.14rem;
  text-align: center;
}
.goods_coupon span:nth-child(2){
  display: block;
  width: 0.445rem;
  height: 0.14rem;
  float: left;
  line-height: 0.14rem;
  text-align: center;
}
.goods_price{
  font-size: 0.1rem;
  color: #FF014F;
  padding-left: 0.05rem;
  padding-bottom: 0.15rem;
}
.goods_price .new_price{
  font-size: 0.15rem;
  padding-left: 0.03rem;
  padding-right: 0.1rem;
}
.goods_price .old_price{
  color: #BEBDBD;
  text-decoration: line-through;
}

.loading {
  font-size: 0.12rem;
  color: #333;
  text-align: center;
  line-height: 0.3rem;
  cursor: pointer;
  margin: 0.2rem auto 0;
  /*box-shadow: 0 0 0.04rem rgba(0, 0, 0, 0.1);*/
}
.banner img{
    width: 3.65rem;
    margin: auto;
    border-radius: 0.08rem;
    box-shadow: 0px 0.15rem 0.35rem 0px rgba(122,121,121,0.19);
    margin-bottom: 0.09rem;
}