<template>
  <div class="working-area">
    <img
      class="effect"
      src="@/assets/images/step-6-init.png"
      alt=""
      draggable="false"
    >
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue"
import { toolList, selectedToolNum, workState } from "@/store/index.js"

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()
</script>

<style lang="less" scoped>
.working-area{
  position: absolute;
  left: 50%;
  top: calc(314 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  transform: translate(-50%, -50%);
  width: calc(328 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
  >img.effect{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>