```vue
<!-- 轮盘（一级圆盘 + 二级左半弧滚动盘）-->
<template>
	<view class="draw-all">
		<view class="button-father">
			<view v-for="(item,index) in ballarray" :key="index" class="white-ball" @click="clickball(index)">
				<image style="width: 50%;height: 50%;" v-if="item.url" :src="item.url" />
				<view v-else >
					{{ index===5?  changerightbottom : item.name }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted, computed, nextTick, watch, onBeforeUnmount,defineProps } from 'vue'
	
	
	// 接收父组件传入的宽度百分比
	const props = defineProps({
		changerightbottom: {
			type: String,
			default: "标准"
		}
	})
	const ballarray = ref([
		{
			name:'返回',
			url:""
		},
		{
			name:'详情',
			url:""
		},
		{
			name:'周期',
			url:""
		},
		{
			name:'放大',
			url:"/static/index/getbig.png"
		},
		{
			name:'日常',
			url:""
		},
		{
			name:'缩小',
			url:"/static/index/getsmall.png"
		},
		{
			name:'全部',
			url:""
		},
		{
			name:'标准',
			url:""
		},
		
	])

	const emit = defineEmits(["clickball"])

	const clickball = (index:number) => {
		emit("clickball",index)
	}
	
</script>

<style lang="less" scoped>
	.draw-all {
		width: 100%;
		height: 100%;
		// background-color: #eff0f4;
		overflow: hidden;
		position: relative;
		.button-father{
			position: absolute;
			bottom: 150rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			height: 600rpx;
			// background-color: red;
			display: flex;
			flex-wrap: wrap;
		}
	}
	.white-ball{
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 120rpx;
		height: 120rpx;
		margin: 30rpx;
		border-radius: 50%;
	}
	
</style>
```