<template>
	<view>
	  <movable-area class="movable-area">
		<movable-view class="movable-view" :x="x" :y="y" direction="all" :style="{opacity: showButton ? 1 : 0}">
		  <view class="newProblem" @click="newProblem">
			<uni-icons type="map-pin-ellipse" size="32" color="#667eea"></uni-icons>
		  </view>
		</movable-view>
	  </movable-area>
	</view>
  </template>

  <script>
  export default {
	data() {
	  return {
		x: 600,
		y: 800,
		showButton: false
	  };
	},
	mounted() {
	  setTimeout(() => {
		this.showButton = true;
	  }, 100);
	},
	computed: {

	},
	methods: {
	  // 意见反馈
	  newProblem() {
		uni.switchTab({url: `/pages/health/index`})
	  }
	}
  };
  </script>

  <style lang="less">
  .movable-area {
	// 保持在右下角
	margin-top: 230rpx;
	margin-left: 100rpx;
	height: calc(100vh - 300rpx);
	width: calc(100vw - 150rpx);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	z-index: 99999999;
	pointer-events: none; //此处要加，鼠标事件可以渗透
	.movable-view {
	  width: 88rpx;
	  height: 88rpx;
	  pointer-events: auto; //恢复鼠标事件
	  .newProblem {
		width: 88rpx;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffffff;
		border-radius: 50%;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		
		&:active {
		  transform: scale(0.92);
		  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		}
	  }
	}
  }
  </style>

