AyaoJies-boot/AyaoJies-app/source-mall-master/source-mall/pages/coupon/coupon.vue

<template>
  <view class="u-wrap">
    <view v-if="couponList.length>0" class="jingdong">
      <view class="left">
        <view class="sum">
          ￥
          <text class="num">100</text>
        </view>
        <view class="type">满149元可用</view>
      </view>
      <view class="right">
        <view class="top">
          <text class="tag">新人券</text>
          <view class="title">
            仅可购买个人护理部分商品
          </view>
          <view class="bottom">
            <view class="date u-line-1">2020.01.01-2020.01.31</view>
            <view class="immediate-use">立即使用</view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="empty">
      <image :src="empty" style="width: 200px;height: 200px;"></image>
      <view class="tip">暂时没有优惠卷</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      couponList: [],
      empty: '/static/empty/default.png',
    };
  },
};
</script>

<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.u-wrap {
  padding: 20 rpx;
}

.jingdong {
  width: 700 rpx;
  height: auto;
  background-color: #ffffff;
  display: flex;

  .left {
    padding: 0 30 rpx;
    background-color: $base-color;
    text-align: center;
    font-size: 28 rpx;
    color: #ffffff;

    .sum {
      margin-top: 50 rpx;
      font-weight: bold;
      font-size: 32 rpx;

      .num {
        font-size: 80 rpx;
      }
    }

    .type {
      margin-bottom: 50 rpx;
      font-size: 24 rpx;
    }
  }

  .right {
    padding: 20 rpx 20 rpx 0;
    font-size: 28 rpx;

    .top {
      .tag {
        padding: 4 rpx 20 rpx;
        background-color: $base-color;;
        border-radius: 20 rpx;
        color: #ffffff;
        font-weight: bold;
        font-size: 24 rpx;
        margin-right: 10 rpx;
      }

      .title {
        height: 80 rpx;
        line-height: 80 rpx;
      }

      .bottom {
        border-top: 2 rpx dashed $u-border-color;
        display: flex;
        margin-top: 15 rpx;
        padding-top: 15 rpx;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10 rpx;

        .date {
          font-size: 20 rpx;
          flex: 1;
        }

        .immediate-use {
          margin-left: 20 rpx;
          height: auto;
          padding: 0 20 rpx;
          font-size: 24 rpx;
          border-radius: 40 rpx;
          line-height: 40 rpx;
          color: rgb(117, 142, 165);
          border: 2 rpx solid rgb(117, 142, 165);
        }
      }
    }
  }
}

.empty {
  margin-top: 220 rpx;
  width: 100%;
  text-align: center;

  .title {
    color: $u-main-color;
    margin: 20 rpx 0 10 rpx 0;
    font-weight: 400;
    font-size: 18px;
  }

  .tip {
    color: $u-tips-color;
    font-size: 14px;
  }

  .btn {
    color: #fff;
    background-image: linear-gradient(to left, #ff536f, rgba(#ff536f, 0.6));
    width: 200 rpx;
    padding: 15 rpx 28 rpx;
    border-radius: 130 rpx;
    margin: 80 rpx 0 0 275 rpx;
  }
}
</style>