93 lines
2.1 KiB
Vue
93 lines
2.1 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/bupicon.png',
|
|
right: '/static/index/movemode/brighticon.png',
|
|
down: '/static/index/movemode/bdownicon.png',
|
|
left: '/static/index/movemode/blefticon.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: 0;
|
|
width: 350rpx;
|
|
height: 350rpx;
|
|
// border-radius: 50%;
|
|
background-image: url('/static/index/movemode/bj.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
// 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>
|