css 红包打开静态效果

使用的是：uniapp v3  uv-ui 。

　　　　uv-text 可使用 span 替换

　　　　uv-gap 是间隔使用 可用margin替换

　　　　@include flex() 对应flex-direction，justify-content，align-items。　　　

 

效果图：

             

 

代码如下：　

<template>
  <view class="box">
    <!-- 第一层背景 -->
    <view class="one-bg"></view>
    <!-- 第二层背景 -->
    <view class="two-bg">
      <view class="two-content">
        <uv-gap height="34rpx"></uv-gap>
        <uv-text
          text="每邀请一位好友"
          size="28rpx"
          color="#AA3B28"
          align="center"
        ></uv-text>
        <uv-text
          text="可获得8.88元现金积分"
          size="28rpx"
          color="#AA3B28"
          align="center"
        ></uv-text>
        <uv-gap height="46rpx"></uv-gap>
        <view style="padding: 0 10rpx">
          <uv-text
            :text="`${8888.0}积分`"
            size="80rpx"
            color="#AA3B28"
            align="center"
            :lines="5"
          ></uv-text>
        </view>
        <uv-gap height="50rpx"></uv-gap>
      </view>
      <uv-gap height="246rpx"></uv-gap>
    </view>
    <!-- 第三层背景 -->
    <view class="three-bg">
      <view class="three-oval-box">
        <view class="three-oval-content">
          <!-- 椭圆1 -->
          <view class="three-oval-one"></view>
          <!-- 椭圆2 -->
          <view class="three-oval-two"></view>
        </view>
      </view>

      <!-- ￥符号 -->
      <view class="three-money-box">
        <uv-text
          text="￥"
          size="80rpx"
          color="#AA3B28"
          align="center"
        ></uv-text>
      </view>
      <uv-gap height="56rpx"></uv-gap>
      <!-- 邀请按钮 -->
      <view class="three-invite-button">
        <uv-button
          text="邀请好友"
          size="large"
          color=" linear-gradient(180deg, #FAF2DB 0%, #FFDA82 99%)"
          :customTextStyle="{
            fontSize: '36rpx',
            color: '#AA3B28',
            fontFamily: 'PingFang SC',
          }"
          :customStyle="{
            borderRadius: '40rpx',
            height: '82rpx',
            width: '322rpx',
          }"
        ></uv-button>
      </view>
    </view>
  </view>
</template>
<script setup></script>
<style lang="scss" scoped>
.box {
  position: relative;
  @include flex(column, center, center);
}
.one-bg {
  width: 100%;
  @include flex(initial, center, center);
  position: absolute;
  bottom: 0;
  width: 496rpx;
  height: 412rpx;
  background: #c83234;
  border-radius: 74rpx;
  z-index: -1;
}
.two-bg {
  width: 414rpx;
  background: #fbf8f1;
  border-radius: 40rpx 40rpx 76rpx 76rpx;
  padding: 20rpx 18rpx;
}
.two-content {
  background: #fcf8eb;
  border: 1px solid #e4c3a6;
  width: 100%;
  min-height: 346rpx;
  border-radius: 20px;
}

.three-bg {
  height: 316rpx;
  width: 496rpx;
  background: #ea5946;
  position: absolute;
  bottom: 0;
  border-radius: 0 0 74rpx 74rpx;
  background: radial-gradient(
      50% 42rpx at center top,
      transparent 100%,
      #ea5946 0
    )
    center top;
}
.three-money-box {
  position: relative;
  top: -18rpx;
  margin: 0 auto;
  @include flex(initial, center, center);
  width: 120rpx;
  height: 120rpx;
  border: 3px solid #dbbd7a;
  box-shadow: 0px 4px 10.6px 0px rgba(0, 0, 0, 0.25);
  background: linear-gradient(160deg, #faf2db 9%, #f5c95d 114%);
  border-radius: 50%;
}
.three-invite-button {
  width: 100%;
  @include flex(initial, center, center);
}

.three-oval-box {
  position: absolute;
}
.three-oval-content {
  position: relative;
  width: 496rpx;
  height: 80rpx;
  overflow: hidden;
}
.three-oval-one {
  position: absolute;
  left: -252rpx;
  top: -420rpx;
  width: 1000rpx;
  height: 446rpx;
  border: 7px solid #fbdd28;
  border-radius: 50%;
}
.three-oval-two {
  position: absolute;
  left: -252rpx;
  top: -344rpx;
  width: 1000rpx;
  height: 414rpx;
  border: 2px solid #dbbd7a;
  border-radius: 50%;
}
</style>