1.實現(xiàn)效果

在這里插入圖片描述

2.實現(xiàn)原理

半圓+偽元素
虛線和半圓是連在一起的，且高度不定，將虛線設為border-bottom，dashed，以這個view為基準，設置偽元素的定位。

3.實現(xiàn)代碼

<view class="card">
  <view class="top">
    <view class="title">
      <span></span>
      <text>卡券定義</text>
      <span></span>
    </view>
  </view>
  <view class="bottom"></view>
</view>

page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #57D4F4;
}

.card {
  width: 683rpx;
  height: 856rpx;
  background: #FFFFFF;
  border-radius: 40rpx;
  box-sizing: border-box;
  padding: 0 24rpx;
}

.top {
  box-sizing: border-box;
  height: 475rpx;
  padding-top: 40rpx;
  border-bottom: 1px dashed #66E0FE;
  position: relative;
}

.top::before {
  content: '';
  position: absolute;
  width: 22rpx;
  height: 44rpx;
  background: #57D4F4;
  left: -24rpx;
  bottom: -24rpx;
  border-radius: 0 22rpx 22rpx 0;
  /* 左上、右上、右下、左下 */
}

.top::after {
  content: '';
  position: absolute;
  width: 22rpx;
  height: 44rpx;
  background: #57D4F4;
  right: -24rpx;
  bottom: -24rpx;
  border-radius: 22rpx 0 0 22rpx;
  /* 左上、右上、右下、左下 */
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;

}

.title text {
  font-size: 30rpx;
  font-weight: 600;
  color: #147ABE;
  padding: 0 13rpx 0 20rpx;
}

.title span {
  width: 21rpx;
  height: 21rpx;
  background: #7FE0F7;
  border-radius: 50%;
  position: relative;
}

.title span::after {
  content: '';
  position: absolute;
  width: 14rpx;
  height: 14rpx;
  background: rgba(255, 190, 85, 0.58);
  border-radius: 50%;
  bottom: 0;
  right: -7rpx;
}

4.更多小程序源碼可關注蘇蘇的碼云