You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
2.4 KiB
55 lines
2.4 KiB
<template>
|
|
<section
|
|
class="other-info tw-px-[30px] tw-mt-[50px] tw-grid tw-grid-cols-1 tw-gap-[30px] md:tw-gap-[20px] md:tw-mt-[65px] xl:tw-mt-[80px] xl:tw-grid-cols-3 xl:tw-gap-[40px] xl:tw-px-[60px] xl:tw-max-w-[1366px] xl:tw-mx-auto">
|
|
<div v-for="n in lengths" :key="n"
|
|
class="tw-border tw-border-solid tw-border-neutrals-200 tw-h-auto tw-overflow-hidden tw-rounded-[20px] tw-px-[30px] tw-py-[20px] tw-flex tw-justify-between md:tw-grid-cols-none md:tw-gap-0 md:tw-px-[60px] md:tw-py-[42px] xl:tw-flex-col-reverse xl:tw-items-center xl:tw-px-[85px] xl:tw-py-[55px]">
|
|
<div class="md:tw-flex md:tw-flex-col md:tw-justify-center xl:tw-items-center xl:tw-mt-[56px]">
|
|
<div class="tw-body-3 tw-mb-[20px] md:tw-body-1">
|
|
{{ $t(titleList[n - 1]) }}
|
|
</div>
|
|
<a v-if=" n == 2" :href="redirectLinkList[n - 1]" target="_blank"
|
|
class="tw-transition tw-block tw-body-4 tw-border tw-border-solid tw-border-black tw-text-black tw-decoration-0 tw-px-[16px] tw-py-[9px] tw-rounded-[12px] md:tw-body-3 hover:tw-bg-neutrals-900 hover:tw-text-white">{{
|
|
$t(btnTitleList[n - 1])
|
|
}}</a>
|
|
<a v-else :href="redirectLinkList[n - 1]"
|
|
class="tw-transition tw-block tw-body-4 tw-border tw-border-solid tw-border-black tw-text-black tw-decoration-0 tw-px-[16px] tw-py-[9px] tw-rounded-[12px] md:tw-body-3 hover:tw-bg-neutrals-900 hover:tw-text-white">{{
|
|
$t(btnTitleList[n - 1])
|
|
}}</a>
|
|
</div>
|
|
<img :src="require(`@/assets/svg/${iconList[n - 1]}.svg`)"
|
|
:class="'tw-max-w-[37%] md:tw-max-w-[30%] xl:tw-max-w-[218px]'" />
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import lazyImg from "@/components/img/img.vue";
|
|
|
|
export default {
|
|
components: {
|
|
lazyImg,
|
|
},
|
|
data() {
|
|
return {
|
|
lengths: 3,
|
|
iconList: ["OtherInfo1", "OtherInfo2", "OtherInfo3"],
|
|
titleList: ["About Us", "Blog", "FAQ"],
|
|
btnTitleList: ["Learn More", "Explore More", "Learn More"],
|
|
redirectLinkList: [this.$i18n.locale == 'en' ? '/aboutUs' : `/aboutUs`, this.$i18n.locale == 'en' ? "https://medium.com/showeasy-eng" : "https://medium.com/showeasy", this.$i18n.locale == 'en' ? '/FAQ' : `/FAQ`],
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.remove-upper {
|
|
text-transform: none !important;
|
|
}
|
|
|
|
.border-r-20px {
|
|
border-radius: 20px !important;
|
|
}
|
|
|
|
.border-r-10px {
|
|
border-radius: 10px !important;
|
|
}
|
|
</style>
|