<template>
	<view class="ljs-turntable" v-if="show">
		<view class="close" @click="close">
			<image class="ico" :src="require('./images/ico_close.png')"></image>
		</view>
		<view class="box">
		</view>
		<view class="box2">
		</view>
		<view class="but" >
		</view>
		<view class="rotateBoard" id="rotateBoard" ref="rotateBoard" :style="transform !== null?'transform:'+ transform:''">
			<view v-for="(item, i) in truntableData" :key="i" class="sector" 
				:style="{'transform': `rotate(${item.start}deg) skewY(${item.scale}deg)`, 'background': color[i]}">
			</view>
			<view class="name" v-for="(item, i) in truntableData" :key="`t${i}`"
			:style="{'transform': `rotate(${item.scaleText}deg)`, 'left': (310 + item.sin) + 'rpx', 'top': (160 - item.cos) +'rpx'}"
			>{{item.name}}
			<img    src="@/assets/img/temporary/national-2024-2.png"></img>
			</view>
		</view>
		
	</view>
</template>

<script>
  import index from './index.js'
  export default index
</script>

<style lang="scss" scoped>
	@import "./style.scss"
</style>
