82 lines
1.2 KiB
Vue
82 lines
1.2 KiB
Vue
<template>
|
|
<button class="reason-block" @click="selectedReason">
|
|
<div class="reason-block__image"><img :src="image" /></div>
|
|
<div class="reason-block__title">{{ title }}</div>
|
|
</button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ReasonBlock",
|
|
props: {
|
|
image: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
selectedReason() {
|
|
this.$emit("reason", this.title);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.reason-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
|
|
border: none;
|
|
background: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
$self: &;
|
|
|
|
&__image {
|
|
img {
|
|
overflow: auto;
|
|
border-radius: 20px;
|
|
transition: 0.3s border;
|
|
border: 2px solid #FFF9EF;
|
|
|
|
transition: 0.3s opacity, 0.3s border-color;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
font-size: 16px;
|
|
font-family: "Poppins";
|
|
font-weight: 400;
|
|
|
|
transition: color 0.3s;
|
|
color: #302823;
|
|
|
|
max-width: 150px;
|
|
}
|
|
|
|
&:hover {
|
|
#{$self}__image {
|
|
img {
|
|
border: 2px solid #D29881;
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
#{$self}__title {
|
|
color: #B87057;
|
|
}
|
|
}
|
|
}
|
|
</style> |