hldy_app_mini/component/public/errorshow.vue

<!-- 使用示例 已经全局暴露了，直接用-->
<!-- <errorshow :show="openerror" font="确定将本次请领清单中的所有物料都移除吗？" @close="openerror=false"  /> -->
<template>
	<view>
		<view class="addall" v-if="show">
			<image class="addallimge" src="/static/error.png" mode="aspectFill"></image>
			<view class="addallfont">{{ font }}</view>
			<view class="qd" @click="onClose">确定</view>
		</view>

		<view class="mengban" v-if="show" @click="onClose"></view>
	</view>
</template>

<script setup>
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		font: {
			type: String,
			default: ''
		}
	})

	const emit = defineEmits(['close'])

	function onClose() {
		emit('close')
	}

</script>

<style scoped lang="less">
	.addall {
		width: 30vw;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163, 167, 182, 0.16);
		border-radius: 1.9vw;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 3vw 4vw;
		z-index: 9120;
		display: flex;
		flex-direction: column;

		.addallimge {
			width: 4.3vw;
			height: 4.3vw;
			margin: 1vw auto 1.5vw auto;
		}

		.addallfont {
			width: 23vw;
			font-weight: 400;
			font-size: 1.3vw;
			color: #888888;
			line-height: 1.7vw;
			flex-wrap: wrap;
			margin-bottom: 4vw;
		}

		.qd {
			background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
			border: 1px solid rgba(3, 133, 250, 0.34);
			color: #0385FA;
			position: absolute;
			right: 3vw;
			bottom: 2vw;
			width: 6.3vw;
			height: 3vw;
			border-radius: 1.6vw;
			font-weight: 400;
			font-size: 1.4vw;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.mengban {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9100;
		background: rgba(239, 240, 244, 0.55);
	}
</style>