dvcp_v2_wxcp_app/components/AiAdd/AiAdd.vue

<template>
  <movable-area class="movableArea">
    <movable-view direction="all" x="300" y="500">
      <div class="AiAdd" @click.stop="add"></div>
    </movable-view>
  </movable-area>
</template>

<script>
export default {
  name: "AiAdd",
  props: {},
  data() {
    return {}
  },
  methods: {
    add() {
      this.$emit("add")
    }
  }
}
</script>

<style lang="scss" scoped>
.movableArea {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;

  uni-movable-view {
    pointer-events: auto;
  }
}

.AiAdd {
  width: 96px;
  height: 96px;
  background: #1365DD;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  &:before, &:after {
    content: "";
    background: #FFFFFF;
    display: block;
    position: absolute;
    border-radius: 4px;
  }

  &:before {
    height: 48px;
    width: 4px;
  }

  &:after {
    height: 4px;
    width: 48px;
  }
}
</style>