133 lines
2.6 KiB
Vue
133 lines
2.6 KiB
Vue
<template>
|
|
<view class="all-circle">
|
|
<view class="circle-rightup">
|
|
<view @click="clickCircle(`rightup`)" class="solveclick">
|
|
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
|
:src="upmenuIndex==0?`/static/index/keyimg/key1.png`: `/static/index/keyimg/white.png`" />
|
|
<view class="circle-font">
|
|
确认
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="circle-leftbottom">
|
|
<view @click="clickCircle(`leftbottom`)" class="solveclick">
|
|
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
|
:src="upmenuIndex==0?`/static/index/keyimg/key1.png`: `/static/index/keyimg/back.png`" />
|
|
<view class="circle-font">
|
|
取消
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
const emit = defineEmits(['clickdelete']);
|
|
const upmenuIndex = ref(-1)
|
|
|
|
const isClick = ref(true);
|
|
const clickCircle = (type : string) => {
|
|
if (isClick.value) {
|
|
switch (type) {
|
|
case "rightup":
|
|
isClick.value = false;
|
|
setTimeout(() => {
|
|
upmenuIndex.value = -1;
|
|
isClick.value = true;
|
|
emit('clickdelete',0)
|
|
}, 0)
|
|
break;
|
|
case "leftbottom":
|
|
isClick.value = false;
|
|
setTimeout(() => {
|
|
upmenuIndex.value = -1;
|
|
isClick.value = true;
|
|
emit('clickdelete',1)
|
|
}, 0)
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.all-circle {
|
|
position: absolute;
|
|
bottom: 300rpx;
|
|
right: 80rpx;
|
|
width: 330rpx;
|
|
height: 330rpx;
|
|
border-radius: 50%;
|
|
z-index: 9999;
|
|
display: flex;
|
|
|
|
.circle-rightup {
|
|
position: absolute;
|
|
width: 155rpx;
|
|
height: 155rpx;
|
|
right: 0rpx;
|
|
bottom: -30rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid rgb(197, 220, 255);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.circle-leftbottom {
|
|
position: absolute;
|
|
width: 155rpx;
|
|
height: 155rpx;
|
|
left: 0rpx;
|
|
bottom: -30rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid rgb(197, 220, 255);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
|
|
.circle-up-target {
|
|
position: absolute;
|
|
width: 170rpx;
|
|
height: 170rpx;
|
|
top: -60rpx;
|
|
left: 89rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid rgba(110, 149, 217, 0.2);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.circle-img {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
}
|
|
|
|
.circle-img-target {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
}
|
|
|
|
.circle-font {
|
|
position: absolute;
|
|
bottom: 25rpx;
|
|
left: 45rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.solveclick {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style> |