36 lines
1.6 KiB
Vue
36 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import ResumeComponent from './ResumeComponent.vue';
|
|
import PrintResumeButton from './PrintResumeButton.vue';
|
|
import ResumeNameInput from './ResumeNameInput.vue';
|
|
import { useResumesStore } from '@/stores/resume';
|
|
|
|
const resumeStore = useResumesStore();
|
|
const resume = resumeStore.currentResume;
|
|
const selectedComponent = resumeStore.currentSelectedResumePlacement;
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex-2 flex flex-col gap-3 w-full">
|
|
<div id="tools" class="w-full flex gap-3 justify-between">
|
|
<ResumeNameInput />
|
|
<PrintResumeButton />
|
|
</div>
|
|
<div class="resume aspect-[0.707317073] w-full bg-white text-black">
|
|
<ResumeComponent v-for="componentPlacement in resume?.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" :active="componentPlacement.id === selectedComponent?.id" @click="resumeStore.setSelectedResumePlacementById(componentPlacement.id)" />
|
|
</div>
|
|
<div class="w-[210mm]" style="position: fixed; top:calc(-297mm - 5000px); container-type: inline-size; ">
|
|
<div id="resume" class="aspect-[0.707317073] w-full bg-white text-black" >
|
|
<ResumeComponent v-for="componentPlacement in resume?.components_placements" :key="componentPlacement.id" :componentPlacement="componentPlacement" :active="componentPlacement.id === selectedComponent?.id" @click="resumeStore.setSelectedResumePlacementById(componentPlacement.id)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.resume {
|
|
container-type: inline-size;
|
|
font-size: 1cqw;
|
|
}
|
|
</style>
|