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

page {
  height: 100%;
  min-height: 100%;
  background: #f4f4f4;
}

.container {
  background: #f4f4f4;
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow: hidden;
}

.service-policy {
  width: 750rpx;
  height: 73rpx;
  background: #f4f4f4;
  padding: 0 31.25rpx;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}

.service-policy .item {
  background: url(http://image.meiping123.com/upload/20180104/104908434dcd64.png) 0 center no-repeat;
  background-size: 10rpx;
  padding-left: 15rpx;
  display: flex;
  align-items: center;
  font-size: 25rpx;
  color: #666;
}

.no-cart {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.no-cart .c {
  width: 100%;
  height: auto;
  margin-top: 200rpx;
}

.no-cart .c image {
  margin: 0 auto;
  display: block;
  text-align: center;
  width: 258rpx;
  height: 258rpx;
}

.no-cart .c text {
  margin: 0 auto;
  display: block;
  width: 258rpx;
  height: 29rpx;
  line-height: 29rpx;
  text-align: center;
  font-size: 29rpx;
  color: #999;
}

.title-box {
  width: 100%;
  padding-top: 330rpx;
  text-align: center;
  font-size: 28rpx;
  color: #999;
  background: url(http://image.meiping123.com/upload/20180104/1055343561cd30.png) no-repeat center 205rpx;
  background-size: 100rpx auto;
  margin-bottom: 50rpx;
}

.to-index-btn {
  color: #fff;
  background: #e64340;
  border-radius: 6px;
  width: 300rpx;
  height: auto;
  line-height: 70rpx;
  text-align: center;
  font-size: 28rpx;
  margin: 0 auto;
  display: block;
}

.cart-view .group-item .header {
  width: 100%;
  height: 94rpx;
  line-height: 94rpx;
  padding: 0 26rpx;
  border-bottom: 1px solid #f4f4f4;
}

.cart-view {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.cart-view .list {
  height: auto;
  width: 100%;
  overflow: hidden;
  /* margin-bottom: 10rpx; */
}

.cart-view .group-item {
  height: auto;
  width: 100%;
  background: #fff;
  margin-bottom: 18rpx;
}

.cart-view .item {
  height: 240rpx;
  width: 100%;
  overflow: hidden;
}

.cart-view .item .checkbox {
  float: left;
  height: 34rpx;
  width: 5%;
  margin: 65rpx 18rpx 65rpx 26rpx;
  background: url(http://image.meiping123.com/upload/20180104/105653607bcb4b.png) no-repeat;
  background-size: 34rpx;
}

.cart-view .item .checkbox.checked {
  background: url(http://image.meiping123.com/upload/20180104/1057387862b4e8.png) no-repeat;
  background-size: 34rpx;
}

.cart-view .item .cart-goods {
  float: left;
  height: 200rpx;
  width: 80%;
  border-bottom: 1px solid #f4f4f4;
  margin-left: 5rpx;
  position: relative;
}

.cart-view .item .img {
  float: left;
  height: 155rpx;
  width: 155rpx;
  background: #f4f4f4;
  margin: 19.5rpx 18rpx 19.5rpx 0;
}

.cart-view .item .info {
  float: left;
  height: 125rpx;
  width: 65%;
  margin: 19.5rpx 26rpx 19.5rpx 0;
}

.cart-view .item .t {
  margin: 8rpx 0;
  font-size: 25rpx;
  color: #333;
}

.cart-view .item .cart-goods .name {
  width: 280rpx;
  font-size: 25rpx;
  color: #333;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-view .item .num {
  height: 28rpx;
  line-height: 28rpx;
  float: right;
}

.cart-view .item .attr {
  margin-bottom: 17rpx;
  height: 24rpx;
  line-height: 24rpx;
  font-size: 22rpx;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cart-view .item .goods-do {
  position: absolute;
  right: 20rpx;
  top: 20rpx;
}

.cart-view .item .goods-do .org-price {
  color: #999;
  font-size: 23rpx;
}

.cart-view .item .open {
  height: 28rpx;
  width: 150rpx;
  display: block;
  float: right;
  background: url(http://image.meiping123.com/upload/20180104/10590387573e4f.png) right center no-repeat;
  background-size: 25rpx;
  font-size: 25rpx;
  color: #333;
}

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

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

.goods .number-item .selnum .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%;
}

.goods .number-item .selnum .number {
  width: 2em;
  text-align: center;
  color: #333;
  margin-top:-2px;
}

.goods .number-item .selnum .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%;
}

.cart-view .item .b {
  height: 28rpx;
  line-height: 28rpx;
  font-size: 25rpx;
  color: #333;
  overflow: hidden;
  display: inline-flex;
  right: 0;
}

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

.cart-view .group-item .handle .del {
  display: block;
  width: 52rpx;
  height: 52rpx;
}

.cart-view .promotion .icon {
  display: inline-block;
  height: 24rpx;
  width: 15rpx;
}

.cart-view .promotion {
  margin-top: 25.5rpx;
  float: left;
  height: 43rpx;
  width: 480rpx;
  /*margin-right: 84rpx;*/
  line-height: 43rpx;
  font-size: 0;
}

.cart-view .promotion .tag {
  border: 1px solid #f48f18;
  height: 37rpx;
  line-height: 31rpx;
  padding: 0 9rpx;
  margin-right: 10rpx;
  color: #f48f18;
  font-size: 24.5rpx;
}

.cart-view .promotion .txt {
  height: 43rpx;
  line-height: 43rpx;
  padding-right: 10rpx;
  color: #333;
  font-size: 29rpx;
  overflow: hidden;
}

.cart-view .get {
  margin-top: 18rpx;
  float: right;
  height: 58rpx;
  padding-left: 14rpx;
  border-left: 1px solid #d9d9d9;
  line-height: 58rpx;
  font-size: 29rpx;
  color: #333;
}

.cart-view .coupon-info .header {
  width: 100%;
  height: 94rpx;
  line-height: 94rpx;
  text-align: center;
}

.cart-view .coupon-info .txt {
  color: #f48f18;
}

.cart-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100rpx;
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  z-index: 499;
}

.cart-bottom .checkbox {
  height: 34rpx;
  padding-left: 60rpx;
  line-height: 34rpx;
  margin: 0 18rpx 0 36rpx;
  background: url(http://image.meiping123.com/upload/20180104/105958509e96.png) no-repeat;
  background-size: 34rpx;
  font-size: 29rpx;
}

.cart-bottom .checkbox.checked {
  background: url(http://image.meiping123.com/upload/20180104/1057387862b4e8.png) no-repeat;
  background-size: 34rpx;
}

.cart-bottom .total {
  height: 34rpx;
  flex: 1;
  font-size: 29rpx;
  color: #b4282d;
  margin-top: -10rpx;
}

.cart-bottom .delete {
  height: 34rpx;
  width: auto;
  margin: 33rpx 18rpx;
  font-size: 29rpx;
}

.cart-bottom .checkout {
  height: 100rpx;
  width: 210rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 29rpx;
  background: #b4282d;
  color: #fff;
}

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

.a-guess {
  width: 750rpx;
  height: auto;
  overflow: hidden;
  background: #fff;
  color: #333;
  margin-top: 0rpx;
  margin-bottom: 150rpx;
}

.a-guess  .h {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  height: 90rpx;
}

.a-guess .h .txt {
  padding-right: 30rpx;
  background: url("http://image.meiping123.com/upload/20180104/104752297a18b9.png") right 4rpx no-repeat;
  background-size: 16.656rpx 27rpx;
  display: inline-block;
  height: 36rpx;
  font-size: 33rpx;
  line-height: 36rpx;
}

.a-guess .b {
  width: 750rpx;
  height: auto;
  overflow: hidden;
  border-top: 1rpx solid #f4f4f4;
  margin-top: 20rpx;
}

.a-guess .b .item {
  float: left;
  background: #fff;
  width: 375rpx;
  padding-bottom: 33.333rpx;
  border-bottom: 1rpx solid #f4f4f4;
  height: auto;
  overflow: hidden;
  text-align: center;
}

.a-guess .b .item-b {
  border-right: 1rpx solid #f4f4f4;
}

.a-guess .item .img2 {
  margin-top: 10rpx;
  width: 302rpx;
  height: 302rpx;
}

.a-guess .item .name {
  display: block;
  width: 365.625rpx;
  height: 80rpx;
  padding: 0 20rpx;
  margin: 11.5rpx 0 22rpx 0;
  text-align: center;
  font-size: 30rpx;
  color: #333;
}

.a-guess .item .price {
  display: block;
  width: 365.625rpx;
  height: 30rpx;
  text-align: center;
  font-size: 30rpx;
  color: #b4282d;
}

.a-guess .item .price .cart {
  margin-left: 20rpx;
  width: 35rpx;
  height: 35rpx;
  vertical-align: -6rpx;
}

/* //////////////////////////////////////////// */

.attr-pop {
  width: 100%;
  height: auto;
  padding: 31.25rpx;
  background: #fff;
  position: fixed;
  bottom: 100rpx;
  z-index: 600;
}

.attr-close {
  float: right;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 50%;
  font-size: 40rpx;
  text-align: center;
  overflow: hidden;
}

.attr-pop .img-info {
  width: 687.5rpx;
  height: 177rpx;
  overflow: hidden;
  margin-bottom: 41.5rpx;
}

.attr-pop .img {
  float: left;
  height: 177rpx;
  width: 177rpx;
  background: #f4f4f4;
  margin-right: 31.25rpx;
}

.attr-pop .info {
  float: left;
  height: 177rpx;
  display: flex;
  align-items: flex-start;
}

.attr-pop .p {
  font-size: 33rpx;
  color: #333;
  height: 33rpx;
  line-height: 33rpx;
  margin-bottom: 10rpx;
}

.attr-pop .a {
  font-size: 29rpx;
  color: #333;
  height: 40rpx;
  line-height: 40rpx;
  width: 260px;
  display: block;
  word-break: break-all;
  word-wrap: break-word;
}

.spec-con {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.spec-con .name {
  height: 32rpx;
  margin-bottom: 22rpx;
  font-size: 29rpx;
  color: #333;
}

.spec-con .values {
  height: auto;
  margin-bottom: 31.25rpx;
  font-size: 0;
}

.spec-con .value {
  display: inline-block;
  height: 62rpx;
  padding: 0 35rpx;
  line-height: 56rpx;
  text-align: center;
  margin-right: 25rpx;
  margin-bottom: 16.5rpx;
  border: 1px solid #333;
  font-size: 25rpx;
  color: #333;
}

.spec-con .value.disable {
  border: 1px solid #ccc;
  color: #ccc;
}

.spec-con .value.selected {
  border: 1px solid #b4282d;
  color: #b4282d;
}

.spec-con .number-item .selnum {
  width: 322rpx;
  height: 71rpx;
  border: 1px solid #ccc;
  display: flex;
}

.spec-con .number-item .cut {
  width: 93.75rpx;
  height: 100%;
  text-align: center;
  line-height: 65rpx;
}

.spec-con .number-item .number {
  flex: 1;
  height: 100%;
  text-align: center;
  line-height: 68.75rpx;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  float: left;
}

.spec-con .number-item .add {
  width: 93.75rpx;
  height: 100%;
  text-align: center;
  line-height: 65rpx;
}

.bottom-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  width: 750rpx;
  height: 100rpx;
  display: flex;
  background: #fff;
}

.bottom-btn .r {
  border: 1px solid #b4282d;
  background: #b4282d;
  float: left;
  height: 100rpx;
  line-height: 96rpx;
  flex: 1;
  text-align: center;
  color: #fff;
}

.title-name {
  width: 100%;
  height: 30rpx;
  text-align: center;
  font-size: 28rpx;
  color: rgba(87, 86, 86, 0.63);
  background:url(http://image.meiping123.com/upload/20180104/1055343561cd30.png) no-repeat center 205rpx;
  background-size: 100rpx 100rpx;
  margin-left: 60rpx;
  font-weight: bolder;
}

.checkbox-biz-type {
  float: left;
  height: 30rpx;
  width: 100%;
  margin-top: 10rpx;
  margin-left: 24rpx;
  background: url(http://image.meiping123.com/upload/20180104/105653607bcb4b.png) no-repeat;
  background-size: 30rpx;
}

.checkbox-biz-type.checked {
  background: url(http://image.meiping123.com/upload/20180104/1057387862b4e8.png) no-repeat;
  background-size: 30rpx;
}