jiangchengfeiyi-xiaochengxu/pages/store-home/agentBubble/agentBubble.vue

<template>
<view class="content">
		<movable-area class="movableArea">
			<movable-view class="movableView" :x="x" :y="y" direction="all" @tap="onTouchend">
				<image :src="doll" mode="widthFix" class="iconImage"></image>
				<view class="fontBubble">非遗助手</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue'
import { storeHomeUrl } from '../../../common/globalImagesUrl';

const doll = ref(storeHomeUrl + '/main/antiquedoll.png')

const x = ref(375)
const y = ref(378)
// const old = ref({
//   x: 30,
//   y: 30
// })

onMounted(()=>{
	
})

const onTouchend =()=> {   //点击的方法
	console.log('按钮被触发');
	uni.navigateTo({
		url: '/pages/subPack/agentAI/agentAI'
	})
}

const onChange = (e) => {   //移动时的方法
  // old.value.x = e.detail.x
  // old.value.y = e.detail.y
	// console.log('x---->',e.detail.x);
	console.log('y---->',e.detail.y);
}
</script>


<style scoped>
	.content {
		position: relative;
		top: 40;
		left: 40;
		/* height: 100vh; */
	}

	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 999;
		text-align: center;
	}

	.movableView {
		pointer-events: auto;
		width: 100rpx;
		height: 100rpx;
		padding: 10rpx;
		border-radius: 100%;
		/* border: 2px solid #33A3DC; */
		background-color: #FFFFFF;
	}

	.iconImage {
		display: block;
		width: 70rpx;
		height: 70rpx;
		margin-left: 14rpx;
	}

	.contact {
		width: 60px;
		height: 60px;
		overflow: hidden;
		position: absolute;
		left: 0px;
		top: 0px;
		border-radius: 100%;
		opacity: 0;
	}
	
	.fontBubble {
		font-size: 20rpx;
	}
</style>