思路：

1.一个原型的外壳包裹

2.使用要分配的个数，计算出角度，利用正切函数tan计算出角度对应对边长度

3.使用clip-path画出一个扇形

4.使用v-for循环出对应的份数，依次使用transform rotate旋转对应的角度。

注意：这列之所以要使用三角函数计算对边的长度是因为要在扇形区域添加元素，最后能够一起随着旋转到指定的角度。没有要添加的元素则相对简单了。

<template>
	<CustomNav mode="normal" :navStyle="{color:'#fff','z-index':2}" bg-color="transparent" :backArrow="true">
	</CustomNav>
	<image class="position-absolute w-100% h-100% top-0" src="../../../static/pics/drawBack.png" mode=""></image>
	<view class="position-absolute top-50% transform-translate-y--50% transform-translate-x--50% left-50%">
		<view class="commom-center  flex flex-items-center flex-justify-center">
			<!-- 添加对应的元素 -->
            <image class="position-absolute w-640rpx h-640rpx" src="../../../static/pics/pan.png" mode=""></image>
			<view
				:class="'position-relative border-rd-50% w-540rpx h-540rpx overflow-hidden transition-all transition-duration-500 transition-ease transition-property-all  '+ start">
				<view v-for="(item,index) of 8" :key="index" class="position-absolute left-50% top-0 bg-blue h-270rpx"
					:style="{width:width,transformOrigin:'center bottom',transform:`translateX(-50%) rotate(${degree*index}deg)`,'clip-path': 'polygon(0% 0%, 100% 0%, 50% 100%)',backgroundColor:(index%2==0)?'#FFE7BA':'#FFD096'}">
					<view class="text-center mt-20rpx font-size-24rpx color-#B84B2B mb-20rpx">
						<text>优惠券8元</text>
					</view>
					<view class="text-center">
						<image v-show="index%2==0" class="w-72rpx h-72rpx" src="@/static/pics/face.png" mode=""></image>
						<image v-show="index%2!=0" class="w-72rpx h-60rpx" src="@/static/pics/quan.png" mode=""></image>
					</view>
				</view>
			</view>
			<image
				class="w-168rpx h-210rpx position-absolute top-50% left-50% transform-translate-x--50% transform-translate-y--60%"
				src="@/static/pics/pin.png" mode=""></image>
		</view>
	</view>
	<view class="position-absolute bottom-214rpx pl-100rpx pr-100rpx w-100% box-border">
		<view @click="takedraw"
			class="mt-100rpx text-center color-#C03D00 mb-60rpx line-height-112rpx border-rd-56rpx w-100% font-bold"
			style="background: linear-gradient(180deg, #FFB683 0%, #FFC373 50%, #FFFFD4 100%);">
			立即抽奖
		</view>
		<view class="flex flex-items-center font-600 flex-justify-between font-size-28rpx color-#FFFDD1">
			<text>剩余机会 1 次</text>
			<text>活动说明</text>
		</view>
	</view>

</template>

<script setup lang="ts">
	const degree = ref(45)
	const width = ref(0)
	const { screenRate } = getApp().globalData as GlobalData
	const start = ref("")
	const calculate = () => {
		width.value = Math.tan((degree.value / 2) * Math.PI / 180) * 135 * 2 * (1 / screenRate) + 'rpx'
	}
	const takedraw = () => {
		start.value = "spin"
		setTimeout(() => {
			start.value = "stop"
		}, 3000)
	}
	calculate()
</script>

<style lang="scss">
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.spin {
		transform-origin: center center;
		animation: rotate 1s linear infinite;
	}

	.stop {
		animation: none;
	}
</style>

实现效果：