56 lines
1.6 KiB
Vue
56 lines
1.6 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>
|