70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
<template>
|
|
|
|
<div class="plant-wrapper">
|
|
<img :src="plantStateStore.imageBase64" alt="">
|
|
<div class="loose">
|
|
<h2>Talk to us about your plant</h2>
|
|
<text-description></text-description>
|
|
</div>
|
|
<div class="precise">
|
|
<plant-details></plant-details>
|
|
</div>
|
|
<div class="footer">
|
|
<Button label="Simulate your plant" icon="pi pi-chart-line" size="large" @click="$router.push('/setEnvironment')"/>
|
|
<Button label="Get care suggestions" icon="pi pi-heart" size="large" @click="$router.push('/cure')"/>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import ImageScan from '@/components/imageScan.vue'
|
|
import textDescription from "@/components/textDescription.vue";
|
|
import plantDetails from '@/components/plantDetails.vue';
|
|
import Button from 'primevue/button';
|
|
|
|
import { usePlantStateStore } from "@/stores/plantState.js";
|
|
const plantStateStore = usePlantStateStore();
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playwrite+HU:wght@100..400&family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
|
|
|
|
h2 {
|
|
font-family: 'Playwrite HU', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.plant-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: start;
|
|
gap: 2rem;
|
|
overflow-y: scroll;
|
|
width: 100%;
|
|
}
|
|
|
|
.loose {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
justify-content: stretch;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
img {
|
|
max-height: 5rem;
|
|
border-radius: 4px;
|
|
object-fit: cover;
|
|
}
|
|
</style>
|