<template>
    <view class="suspension-btn">
    	<button @click="emits('clickMsg')">
			<image src="@/assets/images/icon/msg-box.png"></image>
		</button>
		<button @click="emits('ClickTop')">
			<image src="@/assets/images/icon/top.png"></image>
		</button>
    </view>
</template>

<script setup>
	import { ref } from 'vue';
	
	const emits = defineEmits(['clickMsg','ClickTop'])
	
</script>

<style lang="scss" scoped>
.suspension-btn {
	width: 96rpx;
	height: min-content;
	position: fixed;
	right: 26rpx;
	bottom: 130rpx;
	button {
		width: 100%;
		height: 96rpx;
		margin-bottom: 20rpx !important;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		&:first-child {
			background: linear-gradient( 180deg, #FFC157 0%, #FC8815 100%);
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(165,93,31,0.25);
			image {
				width: 42rpx;
				height: 38rpx;
			}
		}
		&:last-child {
			background: linear-gradient( 180deg, #53B0FF 0%, #3573FF 100%);
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(76,109,176,0.25);
			image {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
}
</style>