arhuako/tayronafoods-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finishing products

Browse Source
This commit is contained in:
José Conde
2023-06-13 21:09:39 +02:00
parent f3e99183ae
commit cc458a43db
10 changed files with 291 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Employee.vue
View File

@ -26,6 +26,7 @@ export default {
font-weight: 700;
font-size: 24px;
line-height: 28px;
padding: 0;
}
.role {
@ -33,5 +34,6 @@ export default {
font-weight: 500;
font-size: 20px;
line-height: 23.44px;
padding: 0;
}
</style>

63
src/components/ProductBox.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<div class="product-box">
<div class="product-box-image">
<img :src="$helper.getImage(product.image_product_1)" alt="">
</div>
<div class="product-box-bottom">
<h1>{{ $t(product.name) }}</h1>
<div class="separator"></div>
<p class="farm">{{ $t(product.farm) }}</p>
<p class="strain">{{ $t(product.strain) }}</p>
</div>
</div>
</template>
<script>
export default {
props: {
product: Object,
}
}
</script>
<style lang="scss" scoped>
.product-box{
display: inline-block;
width: 560px;
height: 573px;
background-image: url('@images/bg_1.png');
background-position: top left;
padding: 24px;
color: #603809;
h1 {
font-weight: 400;
font-size: 44px;
text-align: left;;
}
&-image {
height: 320px;
}
&-bottom {
margin-top: 24px;
padding: 20px;
background-color: #fff;
height: 181px;
p {
font-weight: 400;
line-height: 22px;
margin: 8px 0;
}
.separator {
border-bottom: 2px solid #603809;
margin-right: 20%;
margin-bottom: 24px;
}
}
}
</style>

62
src/components/ProductFlipCard.vue
View File

@ -1,10 +1,4 @@
<script>
const kinds = {
earth: 'common.earth',
water: 'common.water',
air: 'common.air',
fire: 'common.fire',
}
export default {
props: {
product: Object
@ -12,12 +6,14 @@ export default {
data() {
return {
flipped: false,
kinds,
}
},
methods: {
toggle() {
this.flipped = !this.flipped;
},
translate(val) {
console.log('Vue.$t :>> ', Vue.$t);
}
}
}
@ -29,7 +25,7 @@ export default {
<div class="flip-card-front">
<img class="logo" :src="$helper.getImage(product.image)" />
<div>
<h3 class="title">{{ $t(kinds[product.kind])}}</h3>
<h3 class="title">{{ $t(product.kind_localized)}}</h3>
<h3 class="slogan">{{ $t(product.slogan) }}</h3>
</div>
<div class="description">{{ $t(product.description) }}</div>
@ -37,65 +33,75 @@ export default {
<div class="flip-card-back">
<div class="info">
<div class="info-header">
<h3 class="title centered">{{ $t(product.info.name) }}</h3>
<h3>- {{ $t(product.info.farm) }} -</h3>
<p class="strain">{{ $t(product.info.strain) }}</p>
<h3 class="title centered">{{ $t(product.name) }}</h3>
<h3>- {{ $t(product.farm) }} -</h3>
<p class="strain">{{ $t(product.strain) }}</p>
</div>
<div class="info-data">
<div class="info-data-left">
<img class="logo" :src="$helper.getImage(product.image)" />
<p class="kind">{{ $t(kinds[product.kind]) }}</p>
<p class="kind">{{ $t(product.kind_localized) }}</p>
<p class="slogan">{{ $t(product.slogan) }}</p>
</div>
<div class="info-data-right">
<div class="info-data-row">
<div class="info-data-box land">
<div class="info-data-box-label">{{ $t('Land / region') }}</div>
<div class="info-data-box-label">{{ $t('labels.country') }}</div>
<div class="info-data-box-value">
<div class="text-overflow" :title="`${$t('Brasil')} / ${$t('Cerrado, Carmo do paranaiba')}`">{{ $t('Brasil') }}/{{ $t('Cerrado, Carmo do paranaiba') }}</div>
{{ $t(product.country) }}
</div>
</div>
<div class="info-data-box height">
<div class="info-data-box-label">{{ $t('Altura') }}</div>
<div class="info-data-box-label">{{ $t('labels.height') }}</div>
<div class="info-data-box-value">
<div class="text-overflow">{{ $t('1.100 m') }}</div>
<div class="text-overflow">
{{ $t(product.height) }}
</div>
</div>
</div>
</div>
<div class="info-data-row">
<div class="info-data-box revision">
<div class="info-data-box-label">{{ $t('Revisión') }}</div>
<div class="info-data-box-label">{{ $t('labels.revision') }}</div>
<div class="info-data-box-value">
<div class="text-overflow">{{ $t('Secado al sol') }}</div>
<div class="text-overflow">
{{ $t(product.revision) }}
</div>
</div>
</div>
<div class="info-data-box harvest">
<div class="info-data-box-label">{{ $t('Cosecha') }}</div>
<div class="info-data-box-label">{{ $t('labels.harvest') }}</div>
<div class="info-data-box-value">
<div class="text-overflow">{{ $t('Seleccionado') }}</div>
<div class="text-overflow">
{{ $t(product.harvest) }}
</div>
</div>
</div>
<div class="info-data-box profile">
<div class="info-data-box-label">{{ $t('Perfil') }}</div>
<div class="info-data-box-label">{{ $t('labels.profile') }}</div>
<div class="info-data-box-value">
<div class="text-overflow">{{ $t('1/4') }}</div>
<div class="text-overflow">
{{ $t(product.profile) }}
</div>
</div>
</div>
</div>
<div class="info-data-row">
<div class="info-data-box taste">
<div class="info-data-box-label">{{ $t('Sabor') }}</div>
<div class="info-data-box-label">{{ $t('labels.taste') }}</div>
<div class="info-data-box-value">
<div class="text-overflow">
{{ $t('Chocolate, ligero ácido de frutas') }}
{{ $t(product.taste) }}
</div>
</div>
</div>
<div class="info-data-box mouthfeel">
<div class="info-data-box-label">{{ $t('Gusto') }}</div>
<div class="info-data-box-label">{{ $t('labels.texture') }}</div>
<div class="info-data-box-value">
<div class="text-overflow">{{ $t('Ligeramente picante') }}</div>
<div class="text-overflow">
{{ $t(product.texture) }}
</div>
</div>
</div>
</div>
@ -118,6 +124,10 @@ h3 {
text-align: left;
}
.description {
white-space: pre-line;
}
.flip-card {
cursor: pointer;
height: 444px;