vue 优惠劵样式

以下是一个简单的 Vue 优惠券样式示例：

<template>
  <div class="coupon">
    <div class="coupon-header">
      <h1>{{ couponTitle }}</h1>
      <p>{{ couponSubtitle }}</p>
    </div>
    <div class="coupon-body">
      <div class="coupon-code">{{ couponCode }}</div>
      <div class="coupon-description">{{ couponDescription }}</div>
      <div class="coupon-expiry">{{ couponExpiry }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Coupon",
  props: {
    couponTitle: String,
    couponSubtitle: String,
    couponCode: String,
    couponDescription: String,
    couponExpiry: String,
  },
};
</script>

<style>
.coupon {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  width: 300px;
}

.coupon-header {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.coupon-header h1 {
  font-size: 24px;
  margin: 0;
}

.coupon-header p {
  font-size: 16px;
  margin: 0;
}

.coupon-code {
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 32px;
  margin-bottom: 20px;
  padding: 10px;
}

.coupon-description {
  font-size: 16px;
  margin-bottom: 20px;
}

.coupon-expiry {
  font-size: 14px;
}
</style>

你可以在父组件中使用 `<Coupon>` 组件，并将相关属性传递给它：

<template>
  <div>
    <Coupon
      couponTitle="20% off your first purchase"
      couponSubtitle="Use code WELCOME20 at checkout"
      couponCode="WELCOME20"
      couponDescription="Valid for new customers only. Minimum order $50."
      couponExpiry="Expires 31/12/2021"
    />
  </div>
</template>

<script>
import Coupon from "./Coupon";

export default {
  components: {
    Coupon,
  },
};
</script>

你可以根据需要自定义样式和属性。