47 lines
No EOL
1.7 KiB
Vue
47 lines
No EOL
1.7 KiB
Vue
<template>
|
|
<div class="select-car sticky-lg-top py-4">
|
|
<div class="select-car-form overflow-hidden p-3 rounded">
|
|
<div class="car_info text-center">
|
|
<div class="car-image mb-3">
|
|
<img
|
|
class="vehicle-image img-fluid"
|
|
:class="{ blur: blurImg }"
|
|
:src="carImg"
|
|
/>
|
|
</div>
|
|
<div class="current_car_info">
|
|
<transition appear name="fade">
|
|
<div class="current_car_info-text" v-on:click="backFunction ? backFunction() : null">
|
|
<span class="text-center text-secondary fs-5 d-block">{{ this.currentCarInfo }}</span>
|
|
<span v-if="style" class="text-center text-secondary fs-6 mt-2">{{ style }}</span>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
<transition appear :name="slideTransition">
|
|
<div class="needed_car_info d-flex overflow-hidden mt-4 mb-3">
|
|
<span class="text-center fs-6 fw-bold needed_car_info-text">{{ this.neededCarInfo }}</span>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
<transition appear :name="slideTransition">
|
|
<slot></slot>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
|
|
export default {
|
|
name: 'BaseTemplate',
|
|
computed: {
|
|
...mapState(['slideTransition', 'carImg', 'blurImg', 'style'])
|
|
},
|
|
props: {
|
|
currentCarInfo: String,
|
|
neededCarInfo: String,
|
|
backFunction: Function
|
|
}
|
|
}
|
|
</script> |