recycle-mobile/src/styles/common.scss

@mixin zj-card {
	background: #FFFFFF;
	border-radius: 20rpx;
	box-shadow: -10rpx 12rpx 96rpx 2rpx rgba(31, 36, 99, 0.1);
	overflow: hidden;
  position: relative;
}

.footer-btn-group {
	padding: 25rpx 30rpx;
	display: flex;
	align-items: center;
	::v-deep .u-button {
		flex-shrink: 0;
		font-size: 32rpx;
		margin-right: 30rpx;
		border-radius: 20rpx !important;
		&:first-child {
			flex: 1;
		}
		&:last-child {
			width: 400rpx !important;
			margin-right: 0;
		}
	}
}

.common-goods-list {
  .item {
    margin-top: 30rpx;
    background: #ffffff;
    padding: 20rpx 30rpx;
    position: relative;
    .soldout {
      position: absolute;
      right: 120rpx;
      top: 50rpx;
      image {
        width: 120rpx;
      }
    }
    .top {
      display: flex;
      align-items: center;
      image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .user {
        margin-left: 20rpx;
        flex: 1;
        .name {
          font-size: 28rpx;
        }
        .time {
          color: $sec-font;
          font-size: 24rpx;
          margin-top: 8rpx;
        }
      }
      .price {
        color: $assist-color;
        font-weight: 500;
      }
    }
    .title {
      font-weight: 500;
      margin-top: 20rpx;
    }
    .des {
      margin-top: 20rpx;
      font-size: 28rpx;
      color: $reg-font;
    }
    .imgs {
      display: flex;
      flex-wrap: wrap;
      image {
        width: 140rpx;
        height: 140rpx;
        margin-right: 20rpx;
        margin-top: 20rpx;
        &:nth-child(4n) {
          margin-right: 0;
        }
      }
    }
    .bottom {
      border-top: 1px solid #eaeaea;
      margin-top: 20rpx;
      padding-top: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left-location {
        font-size: 28rpx;
        color: $sec-font;
        display: flex;
        align-items: center;
        .iconfont {
          margin-right: 4rpx;
        }
      }
      .right-btn {
        .u-button {
          height: 60rpx;
        }
      }
      .right-stats {
        display: flex;
        align-items: center;
        .it {
          display: flex;
          align-items: center;
          margin-left: 30rpx;
          .iconfont {
            font-size: 32rpx;
            color: $sec-font;
          }
          .text {
            font-size: 28rpx;
            margin-left: 6rpx;
            color: $sec-font;
          }
        }
      }
    }
  }
}

.common-order-list {
  .item {
    margin-top: 30rpx;
    background: #ffffff;
    padding: 20rpx 30rpx;
    .top {
      display: flex;
      align-items: center;
      image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .user {
        margin-left: 20rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .name {
          font-size: 28rpx;
        }
        .time {
          color: $sec-font;
          font-size: 24rpx;
          margin-top: 8rpx;
        }
      }
      .status {
        color: $theme-color;
        font-size: 28rpx;
      }
    }
    .goods {
      display: flex;
      padding: 30rpx 0;
      image {
        width: 120rpx;
        height: 120rpx;
      }
      .main {
        flex: 1;
        margin-left: 20rpx;
        .name {
          font-weight: 500;
          font-size: 32rpx;
          text {
            font-size: 28rpx;
            color: $sec-font;
            font-weight: normal;
            margin-left: 12rpx;
          }
        }
        .des {
          margin-top: 12rpx;
          font-size: 28rpx;
          color: $reg-font;
        }
        .price {
          margin-top: 12rpx;
        	color: $assist-color;
        	font-weight: 500;
        	font-size: 32rpx;
        }
      }
    }
    .info {
      border-top: 1px solid #eaeaea;
      padding: 10rpx 0;
      .row {
        display: flex;
        align-items: center;
        margin: 10rpx 0;
        .label {
          font-size: 28rpx;
          color: $sec-font;
          margin-right: 20rpx;
        }
        .value {
          font-size: 28rpx;
        }
        .price {
          color: $assist-color;
          font-weight: 500;
        }
      }
    }

    .bottom {
      border-top: 1px solid #eaeaea;
      padding-top: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left-location {
        font-size: 28rpx;
        color: $sec-font;
        display: flex;
        align-items: center;
        .iconfont {
          margin-right: 4rpx;
        }
      }
      .left-buyer {
        display: flex;
        align-items: center;
        image {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
        }
        .name {
          font-size: 28rpx;
          margin-left: 12rpx;
        }
        .text {
          color: $sec-font;
          font-size: 28rpx;
          margin-left: 16rpx;
        }
      }
      .right-btn {
        display: flex;
        .u-button {
          height: 60rpx;
          margin-left: 12rpx;
        }
      }
    }
  }
}