|
|
@@ -20,32 +20,52 @@
|
|
|
mode="out-in"
|
|
|
>
|
|
|
<img
|
|
|
- v-if="currentStepIdx === 0 || currentStepIdx === 1"
|
|
|
+ v-if="currentStepIdx === 0"
|
|
|
class="tree"
|
|
|
:style="{
|
|
|
- width: `calc(108 / ${windowSizeWhenDesignForRef} * ${windowSizeInCssForRef})`,
|
|
|
+ width: `calc(121 / ${windowSizeWhenDesignForRef} * ${windowSizeInCssForRef})`,
|
|
|
}"
|
|
|
src="@/assets/images/plant-tree-tree-1.png"
|
|
|
alt=""
|
|
|
draggable="false"
|
|
|
>
|
|
|
<img
|
|
|
- v-else-if="currentStepIdx === 2 || currentStepIdx === 3"
|
|
|
+ v-else-if="currentStepIdx === 1"
|
|
|
class="tree"
|
|
|
:style="{
|
|
|
- width: `calc(242 / ${windowSizeWhenDesignForRef} * ${windowSizeInCssForRef})`,
|
|
|
+ width: `calc(108 / ${windowSizeWhenDesignForRef} * ${windowSizeInCssForRef})`,
|
|
|
}"
|
|
|
src="@/assets/images/plant-tree-tree-2.png"
|
|
|
alt=""
|
|
|
draggable="false"
|
|
|
>
|
|
|
<img
|
|
|
+ v-else-if="currentStepIdx === 2"
|
|
|
+ class="tree"
|
|
|
+ :style="{
|
|
|
+ width: `calc(242 / ${windowSizeWhenDesignForRef} * ${windowSizeInCssForRef})`,
|
|
|
+ }"
|
|
|
+ src="@/assets/images/plant-tree-tree-3.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-else-if="currentStepIdx === 3"
|
|
|
+ class="tree"
|
|
|
+ :style="{
|
|
|
+ width: `calc(242 / ${windowSizeWhenDesignForRef} * ${windowSizeInCssForRef})`,
|
|
|
+ }"
|
|
|
+ src="@/assets/images/plant-tree-tree-4.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ <img
|
|
|
v-else-if="currentStepIdx === 4"
|
|
|
class="tree"
|
|
|
:style="{
|
|
|
width: `calc(380 / ${windowSizeWhenDesignForRef} * ${windowSizeInCssForRef})`,
|
|
|
}"
|
|
|
- :src="require(`@/assets/images/plant-tree-tree-3.png`)"
|
|
|
+ :src="require(`@/assets/images/plant-tree-tree-5.png`)"
|
|
|
alt=""
|
|
|
draggable="false"
|
|
|
>
|