uav-uniapp-demo-24-8-18/plugin/toast/index.vue

<template>
	<view class="toast">
		<div class="box">
			<view class="top">
				{{ title }}
			</view>
			<view class="bottom">
				<!-- <u-icon name="checkmark-circle-fill"
				v-if="icon"
				color="#5ac725" size="30px" 
				style="padding-right: 10px;"></u-icon> -->
				<img src="/static/46660.png" 
				v-if="icon"
				alt="" style="margin-right: 10px;"/>
				<text>{{ text }}</text>
			</view>
		</div>
	</view>
</template>
 
<script>
	export default {
		name: 'toast',
		data(){
			return{
				text : "",
				title : "",
				icon : false
			}
		}
	}
</script>
 
<style scoped lang="scss">
	.toast{
		left: 0;
		top: 0;
		position: fixed;
		z-index: 99999999;
		width: 100vw;
		height: 100vh;
		background-color: #000000aa;
		.box{
			top:50%;
			left: 50%;
			transform: translate(-50%, -50%);
			position: fixed;
			border-radius: 10px;
			z-index: 99999999;
			text-align: center;
			width: 500rpx;
			overflow: hidden;
		}
		
		.top{
			width: 100%;
			height: 35px;
			background-color: #000;
			color: #FFFFFF;
			line-height: 35px;
			font-size: 13px;
		}
		.bottom{
			width: 100%;
			height: 60px;
			background-color: #fff;
			color: #333;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>