<template>
  <view class="flex coupon-wrapper">
    <view class="flex flex-justify-center flex-items-center left">
      <text>￥</text>
      <text>10</text>
    </view>
    <view class="flex flex-justify-between flex-items-center right">
      <view class="coupon-info">
        <view class="coupon-name">芒果全屏会员年卡适用</view>
        <view class="coupon-time">2024.09.19 -2024.10.31</view>
        <view class="coupon-time">单日限领取1张</view>
      </view>
      <view class="flex flex-justify-center flex-items-center btn"
        >立即领取</view
      >
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, unref, onMounted } from "vue";
</script>
<style scoped lang="scss">
.coupon-wrapper {
  width: 686rpx;
  height: 178rpx;
  box-sizing: border-box;
  background: url("@/static/ycysp/coupon.webp") no-repeat;
  background-size: 100% 100%;
}
.left {
  width: 150rpx;
  height: 100%;
  color: #0e9bf2;
  letter-spacing: 0.04em;
  font-weight: bold;
  line-height: normal;
  margin-right: 20rpx;

  text:first-child {
    font-size: 26rpx;
  }
  text:last-child {
    font-size: 74rpx;
  }
}
.right {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  padding-left: 10rpx;
  padding-right: 20rpx;
  overflow: hidden;
  .coupon-info {
    width: calc(100% - 30rpx - 162rpx);
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0.04em;
  }
  .coupon-name {
    width: 100%;
    font-size: 28rpx;
    color: #1f93da;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .coupon-time {
    font-size: 24rpx;
    color: #78839e;
    margin-top: 6rpx;
  }
  .btn {
    width: 162rpx;
    height: 64rpx;
    border-radius: 27rpx;
    opacity: 1;
    font-size: 28rpx;
    font-weight: normal;
    line-height: 32rpx;
    color: #ffffff;
    background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
  }
}
</style>
