實現優(yōu)惠券效果：

實現思路：

1. 需要三個盒子元素，使用 css 剪裁，利用 ellipse 屬性，將兩個盒子分別裁剪成兩個半圓，位置固定在另一個盒子元素左右兩邊適當位置上。
2. 為另一個盒子設置想要的樣式，圓角、背景顏色和中間的橫虛線等，此處使用的是 uView 。

<template><view class="pages"><view class="clip1" /><view class="clip2" /><view class="pageChild"><view class="header"/><view class="line"><u-line dashed color="#fff" direction="row" length="96%" /></view><view class="body"/></view></view>
</template><script>
export default {data() {return {};},methods: {},
};
</script><style scoped lang="scss">
.pages {width: 95vw;position: relative;.clip1 {width: 100%;height: 100%;background-color: #fff;position: absolute;clip-path: ellipse(2% 6% at 0% 38%);}.clip2 {width: 100%;height: 100%;background-color: #fff;position: absolute;clip-path: ellipse(2% 6% at 100% 38%);}.pageChild {background-color: rgba($color: #ff0000, $alpha: 0.6);border-radius: 10rpx;.header {height: 85rpx;display: flex;justify-content:flex-start;align-items: center; }.line {display: flex;justify-content:center;align-items: center; }.body {height: 137rpx;display: flex;flex-direction: row;flex-wrap:wrap;}}
}
</style>