79 lines
1.4 KiB
Vue
79 lines
1.4 KiB
Vue
<template>
|
|
<div class="footer-info-block">
|
|
<div class="footer-info-block__left">
|
|
<UiIconAskForDiscountFilled class="footer-info-block__icon" />
|
|
<div>
|
|
<h3 class="footer-info-block__title">
|
|
{{ title }}
|
|
</h3>
|
|
<p class="footer-info-block__text">
|
|
{{ text }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-info-block__right">
|
|
<UiButton
|
|
color="secondary"
|
|
right-icon="s-chevron-right"
|
|
>
|
|
{{ action }}
|
|
</UiButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
title: { type: String, required: true },
|
|
text: { type: String, required: true },
|
|
action: { type: String, required: true },
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.footer-info-block {
|
|
display: flex;
|
|
|
|
&__title {
|
|
color: $clr-grey-600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
&__text {
|
|
color: $clr-grey-500;
|
|
width: 512px;
|
|
}
|
|
|
|
&__icon {
|
|
color: $clr-market-500 !important;
|
|
margin-right: 32px;
|
|
padding: 9px;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
&__left {
|
|
display: flex;
|
|
flex: 1;
|
|
|
|
border-bottom-left-radius: 12px;
|
|
border-top-left-radius: 12px;
|
|
|
|
background-color: $clr-grey-200;
|
|
padding: 24px 20px;
|
|
}
|
|
|
|
&__right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
border-bottom-right-radius: 12px;
|
|
border-top-right-radius: 12px;
|
|
background-color: $clr-grey-300;
|
|
|
|
width: 286px;
|
|
}
|
|
}
|
|
</style>
|