kmall-pt/wx-mall/pages/catalog/catalog.wxss

page {
  height: 100%;
}

.container {
  background: #f9f9f9;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.search {
  height: 88rpx;
  width: 100%;
  padding: 0 30rpx;
  background: #fff;
  display: flex;
  align-items: center;
}

.search .input {
  width: 690rpx;
  height: 56rpx;
  background: #ededed;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search .icon {
  background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2eOAETvOAAABevWIuCY300.png) center no-repeat;
  background-size: 100%;
  width: 28rpx;
  height: 28rpx;
}

.search .txt {
  height: 42rpx;
  line-height: 42rpx;
  color: #666;
  padding-left: 10rpx;
  font-size: 30rpx;
}

.catalog {
  flex: 1;
  width: 100%;
  background: #fff;
  display: flex;
  border-top: 1px solid #fafafa;
}

.catalog .nav {
  width: 142rpx;
  height: 100%;
}

.catalog .nav .item {
  text-align: center;
  line-height: 90rpx;
  width: 162rpx;
  height: 90rpx;
  color: #333;
  font-size: 28rpx;
  border-left: 6rpx solid #fff;
}

.catalog .nav .item.active {
  color: #ab2b2b;
  font-size: 30rpx;
  border-left: 6rpx solid #ab2b2b;
}

.catalog .cate {
  border-left: 1px solid #fafafa;
  flex: 1;
  height: 100%;
  padding: 0 10rpx 0 10rpx;
}

.banner {
  display: block;
  height: 222rpx;
  width: 100%;
  position: relative;
}

.banner .image {
  position: absolute;
  top: 30rpx;
  left: 0;
  border-radius: 4rpx;
  height: 192rpx;
  width: 100%;
}

.banner .txt {
  position: absolute;
  top: 30rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  left: 0;
  height: 192rpx;
  line-height: 192rpx;
  width: 100%;
}

.catalog .hd {
  height: 108rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.catalog .hd .txt {
  font-size: 24rpx;
  text-align: center;
  color: #333;
  padding: 0 10rpx;
  width: auto;
}

.catalog .hd .line {
  width: 40rpx;
  height: 1px;
  background: #d9d9d9;
}

.catalog .bd {
  height: auto;
  width: 100%;
  overflow: hidden;
}

.catalog .bd .item {
  display: block;
  float: left;
  height: 246rpx;
  /* width: 170rpx; */
  margin-right: 54rpx;
}

.catalog .bd .item.last {
  margin-right: 0;
}

.catalog .bd .item .icon {
  height: 144rpx;
  width: 144rpx;
}

.catalog .bd .item .txt {
  display: block;
  text-align: center;
  font-size: 24rpx;
  color: #333;
  height: 72rpx;
  width: 144rpx;
}

.catalog .nav .contact {
  text-align: center;
  line-height: 90rpx;
  width: 162rpx;
  height: 90rpx;
  color: #333;
  font-size: 28rpx;
  border-left: 6rpx solid #fff;
  filter: alpha(Opacity=100);
  -moz-opacity: 1;
  opacity: 1;
  background: url('http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2f-ATIZ6AAAh9NXovEg111.jpg') center no-repeat;
  background-size: 75rpx 70rpx;
}

.sort {
  position: relative;
  background: #fff;
  width: 100%;
  height: 78rpx;
}

.sort-box {
  background: #fff;
  width: 100%;
  height: 78rpx;
  overflow: hidden;
  padding: 0 30rpx;
  display: flex;
}

.sort-box .item {
  height: 78rpx;
  line-height: 78rpx;
  text-align: center;
  flex: 1;
  color: #333;
  font-size: 26rpx;
}

.sort-box .item .txt {
  display: block;
  width: 100%;
  height: 100%;
  color: #333;
}

.sort-box .item.active .txt {
  color: #b4282d;
}

.sort-box .item.by-price {
  background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2jOAM4X6AAABD1aCMbo590.png) 135rpx center no-repeat;
  background-size: 20rpx 30rpx;
}

.sort-box .item.by-price.active.asc {
  background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2keASXmNAAABHU5MD_M495.png) 135rpx center no-repeat;
  background-size: 20rpx 30rpx;
}

.sort-box .item.by-price.active.desc {
  background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2lKAJ-QhAAABdVcSS6A874.png) 135rpx center no-repeat;
  background-size: 20rpx 30rpx;
}

.sort-box .item.by-sell {
  background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2jOAM4X6AAABD1aCMbo590.png) 135rpx center no-repeat;
  background-size: 20rpx 30rpx;
}

.sort-box .item.by-sell.active.asc {
  background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2keASXmNAAABHU5MD_M495.png) 135rpx center no-repeat;
  background-size: 20rpx 30rpx;
}

.sort-box .item.by-sell.active.desc {
  background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2lKAJ-QhAAABdVcSS6A874.png) 135rpx center no-repeat;
  background-size: 20rpx 30rpx;
}

/*  */

.cate-item {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-top: 1rpx solid #f4f4f4;
  margin-top: 20rpx;
  margin-bottom: 100rpx;
}

.cate-item .item {
  border-top: 1px solid #d9d9d9;
  margin: 0 10rpx;
  height: 272rpx;
  width: 100%;
}
.item-text{
  margin-top: 10rpx;
  height: 100rpx;
  width: 100%;
  color: #a8a6a6;
  text-align: center;
}
.cate-item .item .left {
  width: 190rpx;
  height: 272rpx;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cate-item .item .left .img {
  width: 180rpx; 
  height: 180rpx;
}

.cate-item .item .right {
  /* float: left; */
  height: 264rpx;
  width: 350rpx;
  display: flex;
  flex-flow: row nowrap;
  padding-left: 15rpx;
}

.cate-item .item .right .text {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  height: 264rpx;
  width: 456rpx;
}

.cate-item .item .right .name {
  display: block;
  color: #333;
  line-height: 50rpx;
  font-size: 26rpx;
}

.cate-item .item .right .desc {
  width: 456rpx;
  display: block;
  color: #999;
  line-height: 50rpx;
  font-size: 23rpx;
}

.cate-item .item .right .goods-do {
  display: inline;
}

.cate-item .item .right .goods-do .price {
  width: 50rpx;
  display: block;
  color: #b4282d;
  line-height: 50rpx;
  font-size: 27rpx;
  display: inline;
}

.cate-item .item .right .goods-do .org-price {
  width: 40rpx;
  display: block;
  color: #333;
  line-height: 50rpx;
  font-size: 23rpx;
  display: inline;
  padding-left: 10rpx;
}

.number-item {
  display: inline-flex;
  -webkit-box-pack: justify;
  align-items: center;
  position: absolute;
  right: 0;
  margin-right: 17rpx;
}

.number-item .selnum {
  height: 71rpx;
  display: flex;
}

.number-item .cut {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAMAAADypuvZAAAAM1BMVEX////Z296wsLD6+vvo6evi5Obe3+Lr7O709fb5+fr3+Pjb3eDw8fLu7/Hl5+nk5ui5ubmS1nTyAAABG0lEQVRIx52WWXLEIAxEeUGSGeNl7n/aME6lUmQWm+5f+5l2A5LSC+XFPCrUcFtyuqDbFHSK6XaCzE7TvpZ8LFnWnSafPyB5g2oldSpWYXvrcgKmkQdNDpbfWDDwVwEE8cH6HMRTIAX8Y7rZofxbByydyKBfKx7MORV9Bn4CPL82EfkKlOMv+QxzuqQZfr++YemijK3Dz9Sb8mb0sib8Z4tqGlDldrA2AtnhKygjUCGOX0tDesS2sI9BO0vzuI5BK5acMgYVPAV5DMpEy71P9P71pHu/J9REDzXmBdVDSJBkTwpCilzaXOkYSQdWuRrSJZSuu1JYpBKmFEupLCsNQGk1SlOT2qfSqJWRQBg+lDFHG6j00U0fEqVx9BvALAkNabHL3QAAAABJRU5ErkJggg==);
  box-sizing: border-box;
  width: 25px;
  border: none;
  border-radius: 50%;
  height: 25px;
  background-size: 100% 100%;
}

.number-item .number {
  width: 2em;
  text-align: center;
  color: #333;

}

.number-item .add {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAANlBMVEX/0WH///8zMzP/02b//fb/+u7/5qj/45z/3oz/1W1KRDj/8c//78j/7L7/6rX/2HfEo1P/3IXeVLZ3AAAA70lEQVRIx52WWQ7DIAxEJzFrNpL7X7ZIbdUUnITh/aIngW1sY6gwiwspisQU3GLq81KxaxCckLDaW8V6KHh7qRgnUBFndGWOuCTOmrLhlq1WPB7wpXLgkeNf8WjAn5UNTWw/ZUYj81cxEY1E81EcmnFvxQqaEZuVi2jt07TrUcuKhcY0jhM0bFZWaIwZaKxZCZwSBhjhFDFYwClZcKziEFglILFKQiwyOFYUOY0QnFGMMqfSo/AX63k+H+SeVPIF01OWfPHzX6zrI/Ptgm9KfOvjGyzfxvlhwY8kfvDx45Uf4vyqwC8kvWtP/3LFr3AvL0kJEWHNe5sAAAAASUVORK5CYII=);
  box-sizing: border-box;
  width: 25px;
  border: none;
  border-radius: 50%;
  height: 25px;
  background-size: 100% 100%;
}


.line-through {
  text-decoration: line-through;
}

/* activity */

.activity {
  position: relative;
  background: #fff;
  width: 100%;
  height: 78rpx;
}

.activity-box {
  background: #fff;
  width: 100%;
  height: 78rpx;
  overflow: hidden;
  padding: 0 30rpx;
  display: flex;
}

.activity-box .item {
  height: 78rpx;
  line-height: 78rpx;
  text-align: center;
  flex: 1;
  color: #333;
  font-size: 26rpx;
}

.activity-box .item .txt {
  display: block;
  width: 100%;
  height: 100%;
  color: #333;
}

.activity-box .item.active .txt {
  color: #b4282d;
}

.attr-close{
    position: absolute;
    text-align: center;
    top:130rpx;
    right:20rpx;
}

.coupon .img  {
    left: 5%;
    position: absolute;
    top: 10%;
    height:80%;
    width:90%;
    z-index: 999;
    background: #FFFFFF;
    filter:alpha(opacity=10);
    -moz-opacity:10;
    opacity:10;
}
.add2 {
  box-sizing:border-box;
  width:25px;
  border:none;
  border-radius:50%;
  height:25px;
}