<template>
	<view class="all-circle">
		<view class="move-circle" @click="confirm">
			确认
		</view>
		<view v-show="clickstauts" class="delete-circle" @click="back">
			返回
		</view>
		<view v-show="!clickstauts" class="delete-circle-bad" @click="back">
			关闭
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref
	} from 'vue'
	const emit = defineEmits(['clickcircle']);
	const props = defineProps({
		clickstauts: {
			type: Number,
			required: true,
		},

	});
	const confirm = () =>{
		emit('clickcircle',0)
	}
	const back = () =>{
		emit('clickcircle',1)
	}
</script>

<style scoped lang="less">
	.all-circle{
		position: absolute;
		bottom: 300rpx;
		right: 50rpx;
		width: 500rpx;
		height: 500rpx;
	}
	.move-circle{
		position: absolute;
		bottom: 200rpx;
		right: 40rpx;
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background: linear-gradient(to right, #00c9ff, #0076ff);
		// opacity:0.5;
		z-index: 9999;
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 35rpx;
		justify-content: center;
	}
	.delete-circle{
		position: absolute;
		bottom: 50rpx;
		right: 150rpx;
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background: linear-gradient(to right, #00c9ff, #0076ff);
		// opacity:0.5;
		z-index: 9999;
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 35rpx;
		justify-content: center;
	}
	.delete-circle-bad{
		position: absolute;
		bottom: 50rpx;
		right: 150rpx;
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background-color: #c2c9d3;
		z-index: 9999;
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 35rpx;
		justify-content: center;
	}
</style>