使用的是：uniapp v3 uv-ui 。
uv-text 可使用 span 替换
uv-gap 是间隔使用 可用margin替换
@include flex() 对应flex-direction，justify-content，align-items。
效果图：
代码如下：
1 <template>
2 <view class="box">
3 <!-- 第一层背景 -->
4 <view class="one-bg"></view>
5 <!-- 第二层背景 -->
6 <view class="two-bg">
7 <view class="two-content">
8 <uv-gap height="34rpx"></uv-gap>
9 <uv-text
10 text="每邀请一位好友"
11 size="28rpx"
12 color="#AA3B28"
13 align="center"
14 ></uv-text>
15 <uv-text
16 text="可获得8.88元现金积分"
17 size="28rpx"
18 color="#AA3B28"
19 align="center"
20 ></uv-text>
21 <uv-gap height="46rpx"></uv-gap>
22 <view style="padding: 0 10rpx">
23 <uv-text
24 :text="`${8888.0}积分`"
25 size="80rpx"
26 color="#AA3B28"
27 align="center"
28 :lines="5"
29 ></uv-text>
30 </view>
31 <uv-gap height="50rpx"></uv-gap>
32 </view>
33 <uv-gap height="246rpx"></uv-gap>
34 </view>
35 <!-- 第三层背景 -->
36 <view class="three-bg">
37 <view class="three-oval-box">
38 <view class="three-oval-content">
39 <!-- 椭圆1 -->
40 <view class="three-oval-one"></view>
41 <!-- 椭圆2 -->
42 <view class="three-oval-two"></view>
43 </view>
44 </view>
45
46 <!-- ￥符号 -->
47 <view class="three-money-box">
48 <uv-text
49 text="￥"
50 size="80rpx"
51 color="#AA3B28"
52 align="center"
53 ></uv-text>
54 </view>
55 <uv-gap height="56rpx"></uv-gap>
56 <!-- 邀请按钮 -->
57 <view class="three-invite-button">
58 <uv-button
59 text="邀请好友"
60 size="large"
61 color=" linear-gradient(180deg, #FAF2DB 0%, #FFDA82 99%)"
62 :customTextStyle="{
63 fontSize: '36rpx',
64 color: '#AA3B28',
65 fontFamily: 'PingFang SC',
66 }"
67 :customStyle="{
68 borderRadius: '40rpx',
69 height: '82rpx',
70 width: '322rpx',
71 }"
72 ></uv-button>
73 </view>
74 </view>
75 </view>
76 </template>
77 <script setup></script>
78 <style lang="scss" scoped>
79 .box {
80 position: relative;
81 @include flex(column, center, center);
82 }
83 .one-bg {
84 width: 100%;
85 @include flex(initial, center, center);
86 position: absolute;
87 bottom: 0;
88 width: 496rpx;
89 height: 412rpx;
90 background: #c83234;
91 border-radius: 74rpx;
92 z-index: -1;
93 }
94 .two-bg {
95 width: 414rpx;
96 background: #fbf8f1;
97 border-radius: 40rpx 40rpx 76rpx 76rpx;
98 padding: 20rpx 18rpx;
99 }
100 .two-content {
101 background: #fcf8eb;
102 border: 1px solid #e4c3a6;
103 width: 100%;
104 min-height: 346rpx;
105 border-radius: 20px;
106 }
107
108 .three-bg {
109 height: 316rpx;
110 width: 496rpx;
111 background: #ea5946;
112 position: absolute;
113 bottom: 0;
114 border-radius: 0 0 74rpx 74rpx;
115 background: radial-gradient(
116 50% 42rpx at center top,
117 transparent 100%,
118 #ea5946 0
119 )
120 center top;
121 }
122 .three-money-box {
123 position: relative;
124 top: -18rpx;
125 margin: 0 auto;
126 @include flex(initial, center, center);
127 width: 120rpx;
128 height: 120rpx;
129 border: 3px solid #dbbd7a;
130 box-shadow: 0px 4px 10.6px 0px rgba(0, 0, 0, 0.25);
131 background: linear-gradient(160deg, #faf2db 9%, #f5c95d 114%);
132 border-radius: 50%;
133 }
134 .three-invite-button {
135 width: 100%;
136 @include flex(initial, center, center);
137 }
138
139 .three-oval-box {
140 position: absolute;
141 }
142 .three-oval-content {
143 position: relative;
144 width: 496rpx;
145 height: 80rpx;
146 overflow: hidden;
147 }
148 .three-oval-one {
149 position: absolute;
150 left: -252rpx;
151 top: -420rpx;
152 width: 1000rpx;
153 height: 446rpx;
154 border: 7px solid #fbdd28;
155 border-radius: 50%;
156 }
157 .three-oval-two {
158 position: absolute;
159 left: -252rpx;
160 top: -344rpx;
161 width: 1000rpx;
162 height: 414rpx;
163 border: 2px solid #dbbd7a;
164 border-radius: 50%;
165 }
166 </style>
