kailin_mp/pages/redPacket/index.vue

<template>
  <view class="red_packet" catchtouchmove="true">
    <image src="../../static/icon/red_packet_background.jpg" class="read_packet_background" />
    <view class="rule">活动规则</view>
    <view class="get_content">
      <view class="custom_button"> 立即领取 </view>
      <text>点击领取后，红包将自动到账余额</text>
    </view>
  </view>
</template>

<script></script>

<style lang="less" scoped>
.red_packet {
  width: 100vw;
  height: 100vh;
  position: relative;
  .read_packet_background {
    width: 100%;
    height: 100%;
  }
  .rule {
    position: absolute;
    right: 0;
    top: 26%;
    color: #846100;
    padding: 15rpx 35rpx;
    background-color: #ffedad;
    border-radius: 60rpx;
    text-align: center;
    font-size: 28rpx;
  }

  .get_content {
    position: absolute;
    bottom: 18%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    > text {
      color: #fff;
      font-size: 26rpx;
      margin-top: 20rpx;
    }
  }
  .custom_button {
    display: inline-block;
    background-color: #fbe6a0;
    color: #9c6c11;
    font-size: 18px;
    padding: 6px 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    position: relative;
  }

  .custom_button:before,
  .custom_button:after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: #fbe6a0;
    border: 2px solid #fbe6a0;
    border-radius: 10rpx;
    top: 50%;
    transform: translateY(-50%);
  }

  .custom_button:before {
    left: -6px;
  }

  .custom_button:after {
    right: -6px;
  }
}
</style>