hldy_app/pages/Warehouse/components/equiment.vue

<template>
	<view>
		<view class="zhezhao" v-show="open"
			@click="closeall()">
			<view class="neuro-box" @click.stop v-if="open">
				<view class="button-father">
					<view :class="!buttonposition?`buttontarget button`:`button-white` " @click="open=false">
						取消</view>
					<view :class="buttonposition?`buttontarget button`:`button-white` " @click="config()">确定</view>
				</view>
		
				<view class="card-font">
					{{content}}
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, watch, onUnmounted ,defineEmits } from 'vue';
	const emit = defineEmits(["configdel", "del"])
	const props = defineProps({
		open: {
			type: Boolean,
			required: true,
		},
		propsmove: {
			type: Number
		},
		content: {
			type: String
		},
		isMain: {
			type: Boolean
		}
	});	
	watch(
		() => props.propsmove,
		() => {
			console.log(props.propsmove)
			switch (props.propsmove){
				case 1:
				buttonposition.value = !buttonposition.value
					break;
				case 3:
				buttonposition.value = !buttonposition.value
					break;
				case 4:
					if(buttonposition.value==true){
						emit('del')
					}else{
						emit('configdel')
					}
					break;
					
				case 5:
					emit('configdel')
					break;
						
				default:
					break;
			}
		}
	)
	 const buttonposition = ref(false)
	 const closeall = ()=>{
		 emit('configdel')
	 }
	 const config = ()=>{
		 buttonposition.value = true;
		 emit('del')
	 }
	 const clicktab = (index : number) => {
		 console.log(index)
	 }
</script>

<style scoped lang="less">
	.card-font {
		margin-top: 70rpx;
		width: 600rpx;
		justify-content: center;
		display: flex;
	}
	.button-white {
		width: 40%;
		border: 2rpx solid #c3cacd;
		background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
		border-radius: 30rpx;
	}
	.button {
		width: 40%;
		background-color: #ddf0ff;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #007CFF;
		border: 1rpx solid #007CFF;
		font-size: 25rpx;
		border-radius: 30rpx;
	}
	.button-father {
		position: absolute;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-around;
		padding: 0 50rpx;
	}
	.neuro-box {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		width: 400rpx;
		height: 270rpx;
		border-radius: 30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 21;
		padding: 0 10%;
		z-index: 999;
	}
.zhezhao {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 25;
}
.zerotarget {
		--color: #99C9FD;
		--thick: 2px;
		--radius: 50rpx;
		--outline-offset: 0rpx;
		/* 外扩多少 */
		/* 内层虚线（你现在用的） */
		border-radius: var(--radius);
		background-color: white;
		/* 内部背景 */
		animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1);
		/* 外层虚线：放在 outline（不会影响元素尺寸） */
		outline: var(--thick) dashed var(--color);
		outline-offset: var(--outline-offset);

		/* 保证文本 / 子元素在最上层 */
		position: relative;
		z-index: 0;
	}

	.firsttarget {
		--color: #99C9FD;
		--thick: 2px;
		--radius: 50%;
		--outline-offset: 0rpx;
		/* 外扩多少 */

		/* 内层虚线（你现在用的） */
		border-radius: var(--radius);
		background-color: white;
		/* 内部背景 */
		animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1);
		/* 外层虚线：放在 outline（不会影响元素尺寸） */
		outline: var(--thick) dashed var(--color);
		outline-offset: var(--outline-offset);

		/* 保证文本 / 子元素在最上层 */
		position: relative;
		z-index: 0;
	}

	.buttontarget {
		--color: #99C9FD;
		--thick: 2px;
		--radius: 30rpx;
		--outline-offset: 0rpx;
		/* 外扩多少 */

		/* 内层虚线（你现在用的） */
		border-radius: var(--radius);
		background-color: white;
		/* 内部背景 */
		animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1);
		/* 外层虚线：放在 outline（不会影响元素尺寸） */
		outline: var(--thick) dashed var(--color);
		outline-offset: var(--outline-offset);

		/* 保证文本 / 子元素在最上层 */
		position: relative;
		z-index: 0;
	}

	@keyframes scalePulse {
		0% {
			transform: scale(1);
		}

		25% {
			/* 先收缩一点点 */
			transform: scale(0.94);
		}

		65% {
			/* 再放大到略超出的感觉 */
			transform: scale(1.08);
		}

		100% {
			transform: scale(1);
		}
	}
</style>