1、首先新建个Page类之后，在wxml里面放置底层背景视图，wxss里使用flex弹性布局，并设置好颜色，如下：
2、在背景里面实现一个带圆角的白色矩形框，使用flex弹性布局方便子视图约束，位置放置于界面底层容器的正中间，根据自己的标注图设置好相应大小和背景，如下：
3、在白色背景里面放置一个圆形视图，设置好合适的背景颜色，如下：
4、调整红色圆形视图的margin-top属性为负值（采用rpx进行适配），将其往上移动，如下：
5、设置白色视图的overflow: hidden;将超过白色区域的红色区域剪切掉（overflow表示溢出），如下：
6、然后根据标注图的标注调整红色区域的显示范围，适当调整红色区域的width、height和margin-top，如下：
7、最终实现代码如下：wxml实现：&盟敢势袂lt;view class='view-container-bg'>稆糨孝汶;<view class='view-bg-white'><view class='view-bg-arc'></view></view></view>wxss实现：.view-container-bg {background-color: #20C6B7;width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;}.view-bg-white {background-color: white;width: 600rpx;height: 800rpx;border-radius: 10rpx;display: flex;flex-direction: column;align-items: center;overflow: hidden;}.view-bg-arc {background-color: red;width: 660rpx;height: 660rpx;border-radius: 330rpx;margin-top: -350rpx;}
