<template>
  <view class="box">
    <view class="img">
      <img src="https://i.postimg.cc/Vkf063Xd/image.jpg" style="width: 100%; border-radius: 1rem 0 0 1rem" />
      <view class="img-box">
        <view class="img-box-one">测试</view>
        <view class="img-box-tow">满80.00元可用</view>
        <view class="img-box-three">有效期2024.05.29-2024.06.30</view>
      </view>
      <view class="img-button">
        <view class="img-button-one">￥50.00</view>
        <view class="img-button-tow">领取</view>
      </view>
    </view>
  </view>
</template>

<script setup></script>

<style lang="less" scoped>
.img {
  width: 92%;
  margin: 0 auto;
  display: flow-root;
  margin-top: 1rem;
  position: relative;
  .img-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 15rem;
    position: absolute;
    top: 0;
    .img-box-one {
      font-size: 1.2rem;
      color: #fff;
      margin-top: 0.8rem;
    }
    .img-box-tow {
      background-color: #fff;
      margin-top: 0.2rem;
      padding: 0.2rem 0.8rem;
      border-radius: 0.5rem;
      color: red;
    }
    .img-box-three {
      margin-top: 0.8rem;
      font-size: 0.9rem;
      color: #fff;
    }
  }
  .img-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    right: 5%;
    .img-button-one {
      margin-top: 1rem;
      font-size: 1.5rem;
      color: #fff;
    }
    .img-button-tow {
      margin-top: 1.2rem;
      background-color: #ffdecc;
      padding: 0.2rem 1rem;
      font-size: 1.2rem;
      color: red;
      border-radius: 1rem;
    }
  }
}
</style>
