185 lines
3.9 KiB
Vue
185 lines
3.9 KiB
Vue
<template>
|
||
<view>
|
||
<view class="zhezhao" v-show="open" @click="emit('back')">
|
||
<view class="neuro-box" @click.stop v-if="open">
|
||
<view class="button-father">
|
||
<view :class="buttonposition?`buttontarget button`:`button-white` " @click="emit('back')">
|
||
取消</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(["back", "del"])
|
||
const props = defineProps({
|
||
open: {
|
||
type: Boolean,
|
||
required: true,
|
||
},
|
||
content: {
|
||
type: String
|
||
},
|
||
});
|
||
const buttonposition = ref(false)
|
||
const config = ()=>{
|
||
emit('del')
|
||
}
|
||
</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;
|
||
border: 1px solid #999;
|
||
}
|
||
.zhezhao {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
z-index: 1125;
|
||
}
|
||
.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>
|