vue 递归实现大转盘抽奖 样式需要改一改

vue文件

<template>
<view class="gameBox">
				<!-- :class="`item${i+1}`"  小程序不支持 -->
				<view style="position: relative;width: 230rpx;" class="item1" >
					<view :class="index === 0 ? `li_inner active` : `li_inner`">
						<view style="text-align: center;color: #E5434F;">{
   {
   list[0].prize_name}}</view>
						<view class="img1" style="text-align: center;">
							<image style="width: 70%;height: 100rpx;" :src="list[0].img" mode=""></image>
							<!-- <img :src="list[0].img" alt=""> -->
						</view>
						<view class="prize_info">{
   {
   list[0].prize_info}}</view>
					</view>
				</view>
				<view style="position: relative;width: 230rpx;" class="item2" >
					<view :class="index === 1 ? `li_inner active` : `li_inner`">
						<view style="text-align: center;color: #E5434F;">{
   {
   list[1].prize_name}}</view>
						<view class="img1" style="text-align: center;">
							<image style="width: 70%;height: 100rpx;" :src="list[1].img" mode=""></image>
							<!-- <img :src="list[1].img" alt=""> -->
						</view>
						<view class="prize_info">{
   {
   list[1].prize_info}}</view>
					</view>
				</view>
				<view style="position: relative;width: 230rpx;" class="item3" >
					<view :class="index === 2 ? `li_inner active` : `li_inner`">
						<view style="text-align: center;color: #E5434F;">{
   {
   list[2].prize_name}}</view>
						<view class="img1" style="text-align: center;">
							<image style="width: 70%;height: 100rpx;" :src="list[2].img" mode=""></image>
							<!-- <img :src="list[2].img" alt=""> -->
						</view>
						<view class="prize_info">{
   {
   list[2].prize_info}}</view>
					</view>
				</view>
				<view style="position: relative;width: 230rpx;" class="item4" >
					<view :class="index === 3 ? `li_inner active` : `li_inner`">
						<view style="text-align: center;color: #E5434F;">{
   {
   list[3].prize_name}}</view>
						<view class="img1" style="text-align: center;">
							&l