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.
68 lines
3.7 KiB
68 lines
3.7 KiB
<template>
|
|
<section class="xl:tw-max-w-[1246px] xl:tw-mx-auto">
|
|
<div class="tw-relative tw-px-[30px] xl:tw-px-[30px] tw-mt-[40px] md:tw-mt-[50px]">
|
|
<div class="tw-absolute tw-top-0 tw-right-0 tw-left-0 tw-bottom-0 md:tw-block xl:tw-block">
|
|
<div class="tw-grid tw-grid-cols-10 tw-gap-[20px] md:tw-gap-[30px] xl:tw-grid-cols-10" style="height:100%;">
|
|
<div class="tw-col-span-10 md:tw-col-span-6 xl:tw-col-span-6 col-span-4-bg tw-rounded-r-[50px]"></div>
|
|
<div class="tw-col-span-0 md:tw-col-span-4 xl:tw-col-span-4 tw-hidden">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tw-relative tw-py-20">
|
|
<div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-7 xl:tw-grid-cols-7 xl:tw-mx-auto">
|
|
<!-- <div class="tw-col-span-2 tw-h-16"></div> -->
|
|
<div class="tw-col-span-7 xl:tw-col-span-3 md:tw-col-span-7">
|
|
<div class="tw-flex tw-flex-col tw-justify-center tw-pb-[30px]">
|
|
<div class="tw-flex tw-justify-center">
|
|
<div class="tw-flex tw-justify-center tw-flex-col tw-w-11/12">
|
|
<h1 class="tw-text-2xl tw-text-left tw-font-black tw-text-primary-default tw-mt-[5px] md:tw-mt-[15px] xl:tw-mt-[25px] md:tw-text-3xl xl:tw-text-4xl">
|
|
{{$t("Four reasons for choosing ShowEasy")}}
|
|
</h1>
|
|
<p class="t14 tw-text-left tw-font-medium tw-text-neutrals-600 tw-py-[5px] md:tw-py-[10px] xl:tw-py-[10px] md:t16 xl:t18">{{$t("ShowEasy is an online exhibition service business platform, where you can find exhibition information and related services from around the world.")}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="tw-flex tw-justify-center tw-w-full">
|
|
<img class="tw-self-center tw-w-1/3 md:tw-w-1/3 xl:tw-w-4/6" src="~/assets/svg/reason.svg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tw-col-span-7 xl:tw-col-span-4 md:tw-col-span-7">
|
|
<div class="tw-grid tw-grid-cols-1 tw-gap-[15px] md:tw-gap-[30px] xl:tw-grid-cols-2">
|
|
<div class="tw-relative card tw-rounded-[20px] tw-overflow-hidden tw-h-full tw-shadow-md tw-bg-white tw-px-5 tw-py-1" v-for="(item,index) in reasons" :key="index">
|
|
<div :class="['tw-absolute tw-left-0 tw-top-0 tw-w-full tw-h-[6px] tw-rounded-t',(index === 0 || index === 3) ? 'tw-bg-[#3f3d56]' : 'tw-bg-[#e68000]']"></div>
|
|
<a :href="item.url" class="tw-relative tw-w-full tw-h-full tw-text-center tw-content-center">
|
|
<div class="tw-content-center tw-mb-3 tw-mt-5"><img class="tw-h-[42px] tw-w-[42px] md:tw-h-[64px] xl:tw-h-[64px] md:tw-w-[64px] xl:tw-w-[64px]" :src="item.image"></div>
|
|
<div class="t14 tw-text-center tw-mt-[5px] md:tw-mt-[15px] xl:tw-mt-[25px] md:t16 xl:t18 tw-text-black tw-font-black tw-mb-3">{{ item.name }}</div>
|
|
<div class="t12 tw-text-center tw-text-neutral-700 tw-mt-[5px] md:tw-mt-[15px] xl:tw-mt-[25px] tw-mb-[15px] md:t14 xl:t16 tw-text-left tw-font-medium">{{ item.content }}</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
reasons: {
|
|
type: Array,
|
|
},
|
|
title: {
|
|
type: String,
|
|
},
|
|
},
|
|
created() {
|
|
if (this.$props.reasons.length > 4) {
|
|
this.$props.reasons = this.$props.reasons.slice(0, 4);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.col-span-4-bg{
|
|
background-image: radial-gradient(circle at 118% 118%, rgba(250, 174, 105, 0.2), rgba(250, 174, 105, 0.03) 89%);
|
|
}
|
|
</style>
|