89 lines
1.9 KiB
Vue
89 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
|
||
|
|
<view class="move-circle">
|
||
|
|
<!-- 上 -->
|
||
|
|
<view class="up-container" @click="handleClick('up', 0)">
|
||
|
|
<image :src="icons.up" class="container-img" />
|
||
|
|
</view>
|
||
|
|
<!-- 右 -->
|
||
|
|
<view class="right-container" @click="handleClick('right', 1)">
|
||
|
|
<image :src="icons.right" class="container-img" />
|
||
|
|
</view>
|
||
|
|
<!-- 下 -->
|
||
|
|
<view class="down-container" @click="handleClick('down', 2)">
|
||
|
|
<image :src="icons.down" class="container-img" />
|
||
|
|
</view>
|
||
|
|
<!-- 左 -->
|
||
|
|
<view class="left-container" @click="handleClick('left', 3)">
|
||
|
|
<image :src="icons.left" class="container-img" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { reactive } from 'vue'
|
||
|
|
const emit = defineEmits(['movecard'])
|
||
|
|
|
||
|
|
const icons = reactive({
|
||
|
|
up: '/static/index/movemode/upicon.png',
|
||
|
|
right: '/static/index/movemode/righticon.png',
|
||
|
|
down: '/static/index/movemode/downicon.png',
|
||
|
|
left: '/static/index/movemode/lefticon.png'
|
||
|
|
})
|
||
|
|
|
||
|
|
function handleClick(key, dir) {
|
||
|
|
icons[key] = `/static/index/movemode/blue${key}icon.png`
|
||
|
|
emit('movecard', dir)
|
||
|
|
|
||
|
|
// 延迟一点时间再恢复图标（视觉反馈）
|
||
|
|
setTimeout(() => {
|
||
|
|
icons[key] = `/static/index/movemode/${key}icon.png`
|
||
|
|
}, 150)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.move-circle {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 300rpx;
|
||
|
|
left: -200rpx;
|
||
|
|
width: 350rpx;
|
||
|
|
height: 350rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: rgba(127, 127, 127, 0.3);
|
||
|
|
z-index: 9999;
|
||
|
|
}
|
||
|
|
.container-img {
|
||
|
|
width: 120rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
}
|
||
|
|
.up-container {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 115rpx;
|
||
|
|
width: 120rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
}
|
||
|
|
.down-container {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 115rpx;
|
||
|
|
width: 120rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
}
|
||
|
|
.right-container {
|
||
|
|
position: absolute;
|
||
|
|
top: 115rpx;
|
||
|
|
right: 5rpx;
|
||
|
|
width: 120rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
}
|
||
|
|
.left-container {
|
||
|
|
position: absolute;
|
||
|
|
top: 115rpx;
|
||
|
|
left: 0rpx;
|
||
|
|
width: 120rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
}
|
||
|
|
</style>
|