<template>
  <view
    class="flex pos-relative wrapper flex-justify-between"
    :class="{
      small: ['small'].includes(type),
      large: ['large'].includes(type),
    }"
  >
    <view
      class="flex flex-items-center flex-justify-center pos-absolute tips"
      v-if="['small'].includes(type)"
      >每日限量50张</view
    >
    <view
      class="amount"
      :style="{ width: ['small'].includes(type) ? '120rpx' : '140rpx' }"
    >
      <view class="icon">￥</view>
      <view class="number">100</view>
    </view>
    <view class="operation" v-if="['small'].includes(type)">
      <view class="name">优酷喵喵年卡适用</view>
      <view class="flex flex-items-center flex-justify-center btn"
        >立即领取</view
      >
    </view>
    <view class="operation-large" v-else>
      <view class="name-tips">
        <view class="name-large">芒果全屏会员年卡适用</view>
        <view class="tips-large">每日限量50张</view>
      </view>
      <view class="flex flex-items-center flex-justify-center btn-large"
        >立即领取</view
      >
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, unref, onMounted } from "vue";

const props = defineProps({
  type: {
    type: String,
    default: "small",
  },
});
</script>
<style scoped lang="scss">
.wrapper {
  height: 136rpx;
}
.small {
  width: 322rpx;
  background: url("@/static/ycysp/ticket-small.webp") no-repeat;
  margin-bottom: 18rpx;
  background-size: cover;
}
.large {
  width: 662rpx;
  background: url("@/static/ycysp/ticket-large.webp") no-repeat;
  background-size: cover;
}
.tips {
  border-radius: 20rpx 0rpx 20rpx 0rpx;
  opacity: 1;
  background: #69c5ff;
  width: 100rpx;
  height: 20rpx;
  width: 100rpx;
  font-size: 12rpx;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0.04em;
  color: #ffffff;
}
.amount {
  display: flex;
  justify-content: center;
  height: 100%;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0.04em;
  color: $price-color;
}
.icon {
  font-size: 18rpx;
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}
.number {
  font-size: 48rpx;
  display: flex;
  align-items: center;
}
.operation {
  width: 180rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 15rpx;
}
.name {
  width: 100%;
  font-size: 22rpx;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;
  color: $text-color;
  overflow: hidden; /*文本超出隐藏*/
  display: -webkit-box; /*盒子模型微弹性伸缩模型*/
  -webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
  -webkit-line-clamp: 2; /*文本显示3行*/
}
.btn {
  margin-top: 10rpx;
  width: 134rpx;
  height: 34rpx;
  background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
  border-radius: 38rpx;
  font-size: 20rpx;
  font-weight: normal;
  line-height: 24rpx;
  color: #ffffff;
}
.operation-large {
  width: 500rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 24rpx 0 10rpx;
}
.name-tips {
  display: flex;
  flex-direction: column;
}
.name-large {
  font-size: 28rpx;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0.04em;
  color: #1f93da;
}
.tips-large {
  font-size: 20rpx;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0.04em;
  color: #8ca1d1;
  margin-top: 4rpx;
}
.btn-large {
  width: 162rpx;
  height: 64rpx;
  background: linear-gradient(270deg, #9ad2ff 0%, #0e9bf2 100%);
  border-radius: 68rpx;
  font-size: 28rpx;
  font-weight: normal;
  line-height: 64rpx;
  color: #ffffff;
}
</style>
