css实现票据效果

先上效果图

代码实现

吃饭的时候突然想到可以这么实现，哈哈，干饭人的灵感总是来得这么突然。下面展示一些 内联代码片。

<view class="tui-col-12">
	<view class="order-bg">
		<view class="left-circle">
		</view>
		<view class="right-circle">
		</view>
		<view class="order-line">
		</view>
	</view>
</view>

	// bg为有圆角的白布
	.order-bg {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		border-radius: 50rpx;
		position: relative;
	}
	// 用页面背景色的两个圆形直接定位到bg画布上 一左一右实现凹圆角
	.left-circle {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #F2F6FC;
		position: absolute;
		top: 100rpx;
		left: -40rpx;
	}

	.right-circle {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #F2F6FC;
		position: absolute;
		top: 100rpx;
		right: -40rpx;
	}
	// 圆形距top的高度+圆形半径就是虚线所在的位置了
	.order-line {
		border: 1rpx dashed #F2F6FC;
		position: absolute;
		top: 140rpx;
		z-index: 99;
		width: 100%;
	}