226 lines
4.5 KiB
Vue
226 lines
4.5 KiB
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>
|