技术点解析
CSS overflow 属性用于控制内容溢出元素框时的显示方式，核心属性值包括visible（默认显示）、hidden（隐藏溢出）、scroll（始终显示滚动条）和auto（按需显示滚动条）。
box-shadow 是 CSS3 中用于为 HTML 元素添加阴影效果的属性，可通过设置水平偏移、垂直偏移、模糊半径、扩展半径和颜色等参数来控制阴影的外观
一、完整html
<view class="ticket"><view class="top"><view class="avator"><image src="@/static/images/pet/touxiang.jpeg" mode="scaleToFill"/></view><view class="userInfo"><text class="userName">用****户</text><view class="meritValue"><image src="/static/images/svg/starCircle.svg"></image><text>功德值230</text></view></view></view><view class="top-bottom"><view class="left"/><view class="space"/><view class="center"/><view class="space"/><view class="right"/></view><view class="bottom-top"><view class="left"/><view class="space"/><view class="center"/><view class="space"/><view class="right"/></view><view class="qrCode"><image src="@/static/images/pet/qrCode.png" mode="aspectFill"/></view><view class="tips">长按识别二维码，加入互助计划</view>
</view>
CSS
//票
.ticket {// border: 1px solid green;width: $base-content-width;//头部：头像 + 姓名 + 功德值.top {// border: 1px solid red;border-top-left-radius: 50rpx;border-top-right-radius: 50rpx;background-color: white;display: flex;//头像.avator {width: 100rpx;height: 100rpx;image {width: 100%;height: 100%;border-radius: 50%;}margin-left: 50rpx;margin-top: 30rpx;}//用户信息.userInfo {width: 400rpx;height: 100rpx;margin-left: 20rpx;margin-top: 30rpx;.userName {font-weight: 550;}.meritValue {width: 250rpx;height: 40rpx;border-radius: 50rpx;display: flex;padding-left: 20rpx;color: white;background-image: linear-gradient(to right, #FFA36B, #F87061);image {height: 100%;width: 40rpx;margin-right: 10rpx;}}}}//半圆撕线上半部分.top-bottom {// border: 1px solid blue;width: 100%;height: 20rpx;display: flex;overflow: hidden; /* 关键：裁剪超出圆角的内容 */.left {width: 20rpx;height: 20rpx;border-top-right-radius: 20rpx;background: transparent;box-shadow: 0 0 0 10rpx white; /* 阴影会沿圆角边缘 */}.space {width: 30rpx;height: 100%;background-color: white;}.center {width: 590rpx;height: 100%;background-color: white;/** 虚线 */border-bottom: 1rpx dashed lightgray;}.right {width: 20rpx;height: 20rpx;border-top-left-radius: 20rpx;box-shadow: 0 0 0 10rpx white; /* 阴影会沿圆角边缘 */}}//半圆撕线下半部分.bottom-top {width: 100%;height: 20rpx;display: flex;/** overflow 属性用于控制内容溢出元素框时的显示方式 hidden：内容会被修剪，超出部分不可见且不显示滚动条，常用于隐藏溢出内容或创建 BFC 解决浮动塌陷*/overflow: hidden; /* 关键：裁剪超出圆角的内容 */.left {width: 20rpx;height: 20rpx;border-bottom-right-radius: 20rpx;// background: transparent;box-shadow: 0 0 0 10rpx white; /* 阴影会沿圆角边缘 */}.space {width: 30rpx;height: 100%;background-color: white;}.center {width: 590rpx;height: 100%;background-color: white;}.right {// background-color: aquamarine;width: 20rpx;height: 20rpx;border-bottom-left-radius: 20rpx;box-shadow: 0 0 0 10rpx white; /* 阴影会沿圆角边缘 spread(扩展半径)=10rpx为宽度一半 */}}//二维码.qrCode {width: $base-content-width;height: 460rpx;background-color: white;//div居中display: grid;place-items: center;image {width: 345rpx;height: 345rpx;}}.tips {width: 100%;background-color: white;height: 80rpx;text-align: center;border-bottom-left-radius: 50rpx;border-bottom-right-radius: 50rpx;}
}