149 lines
3.0 KiB
Vue
149 lines
3.0 KiB
Vue
<template>
|
|
<view class="move-circle">
|
|
<image v-show="key === 0" src="/static/index/keyimg/where10.png" class="container-img-up" />
|
|
<image v-show="key === 2" src="/static/index/keyimg/where10.png" class="container-img-down" />
|
|
<image v-show="key === 3" src="/static/index/keyimg/where10.png" class="container-img-left" />
|
|
<image v-show="key === 1" src="/static/index/keyimg/where10.png" class="container-img-right" />
|
|
<!-- 上 -->
|
|
<view class="up-container" @click="handleClick(0)">
|
|
<image :src="icons.up" class="container-img" />
|
|
</view>
|
|
<!-- 右 -->
|
|
<view class="right-container" @click="handleClick(1)">
|
|
<image :src="icons.right" class="container-img-shu" />
|
|
</view>
|
|
<!-- 下 -->
|
|
<view class="down-container" @click="handleClick(2)">
|
|
<image :src="icons.down" class="container-img" />
|
|
</view>
|
|
<!-- 左 -->
|
|
<view class="left-container" @click="handleClick(3)">
|
|
<image :src="icons.left" class="container-img-shu" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue'
|
|
const emit = defineEmits(['movecard'])
|
|
|
|
const icons = reactive({
|
|
up: '/static/index/keyimg/up1.png',
|
|
right: '/static/index/keyimg/where2.png',
|
|
down: '/static/index/keyimg/down1.png',
|
|
left: '/static/index/keyimg/where1.png'
|
|
})
|
|
const key = ref(-1)
|
|
|
|
// 保存当前定时器 ID
|
|
let resetTimer = null
|
|
|
|
function handleClick(dir: number) {
|
|
// 清除上一次定时器
|
|
if (resetTimer !== null) {
|
|
clearTimeout(resetTimer)
|
|
}
|
|
|
|
// 显示当前方向
|
|
key.value = dir
|
|
emit('movecard', dir)
|
|
|
|
// 重新开启 800ms 定时器
|
|
resetTimer = setTimeout(() => {
|
|
key.value = -1
|
|
resetTimer = null
|
|
}, 500)
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
.move-circle {
|
|
position: absolute;
|
|
bottom: 300rpx;
|
|
left: 0;
|
|
width: 330rpx;
|
|
height: 330rpx;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at center,
|
|
/* 圆形渐变，中心点在元素正中 */
|
|
rgba(110, 149, 217, 0.2) 0%,
|
|
/* 中心处纯色 */
|
|
rgba(149, 177, 227, 0.2) 100%
|
|
/* 边缘颜色 */
|
|
);
|
|
border: 5rpx rgba(148, 181, 229, 0.5) solid;
|
|
// opacity: 0.1;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.container-img-up {
|
|
position: absolute;
|
|
top: -48rpx;
|
|
left: 50rpx;
|
|
width: 220rpx;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.container-img-down {
|
|
position: absolute;
|
|
bottom: -48rpx;
|
|
left: 50rpx;
|
|
transform: rotate(180deg);
|
|
width: 220rpx;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.container-img-left {
|
|
position: absolute;
|
|
left: -97rpx;
|
|
top: 95rpx;
|
|
transform: rotate(270deg);
|
|
width: 220rpx;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.container-img-right {
|
|
position: absolute;
|
|
right: -97rpx;
|
|
transform: rotate(90deg);
|
|
top: 95rpx;
|
|
width: 220rpx;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.container-img {
|
|
width: 170rpx;
|
|
height: 70rpx;
|
|
}
|
|
|
|
.container-img-shu {
|
|
width: 70rpx;
|
|
height: 170rpx;
|
|
}
|
|
|
|
.up-container {
|
|
position: absolute;
|
|
top: 30rpx;
|
|
left: 75rpx;
|
|
}
|
|
|
|
.down-container {
|
|
position: absolute;
|
|
bottom: 30rpx;
|
|
left: 75rpx;
|
|
}
|
|
|
|
.right-container {
|
|
position: absolute;
|
|
top: 75rpx;
|
|
right: 30rpx;
|
|
}
|
|
|
|
.left-container {
|
|
position: absolute;
|
|
top: 75rpx;
|
|
left: 30rpx;
|
|
}
|
|
</style> |