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.
54 lines
2.3 KiB
54 lines
2.3 KiB
<template>
|
|
<section class="xl:tw-max-w-[1246px] xl:tw-mx-auto col-span-4-bg tw-px-[30px] xl:tw-px-[60px] tw-py-[50px] md:tw-py-[70px]">
|
|
<div class="tw-flex tw-justify-center tw-w-full tw-leading-10 tw-pb-[50px]">
|
|
<img class="tw-h-[32px] tw-w-[32px] md:tw-h-[42px] xl:tw-h-[48px] md:tw-w-[42px] xl:tw-w-[48px]" :src="require('~/assets/img/edit.png')">
|
|
<div class="tw-text-xl md:tw-text-3xl xl:tw-text-4xl tw-text-center tw-pt-[3px] tw-font-black xl:tw-font-black md:tw-font-black">{{ $t("Blog") }}</div>
|
|
</div>
|
|
<div class="tw-grid tw-grid-cols-1 tw-gap-[30px] md:tw-gap-[40px] xl:tw-grid-cols-2 xl:tw-mx-auto">
|
|
<div class="tw-flex tw-justify-center">
|
|
<div class="tw-flex tw-justify-center tw-w-1/3 md:tw-w-3/7 xl:tw-w-4/5">
|
|
<img class="tw-self-center" src="~/assets/img/strategy.jpg">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div v-for="(item,index) in strategyList" :key="index" class="tw-py-[15px] tw-w-full tw-border-0 tw-border-b-2 tw-border-neutrals-300 tw-border-dashed">
|
|
<a :href="item.url" target="_blank" class="tw-relative tw-w-full tw-h-full tw-text-left tw-content-center">
|
|
<h3
|
|
class="t14 tw-line-clamp-2 tw-text-ellipsis tw-overflow-hidden md:t16 xl:t18 md:tw-line-clamp-none md:tw-h-full md:tw-mt-0 xl:tw-line-clamp-2 tw-font-black xl:tw-font-black md:tw-font-black">
|
|
{{ item.title }}
|
|
</h3>
|
|
<div class="t10 md:t12 xl:t14 tw-text-neutrals-400 md:tw-block tw-my-[15px]">
|
|
{{ item.date}}
|
|
</div>
|
|
<p class="tw-line-clamp-2 tw-text-ellipsis tw-overflow-hidden t12 md:t14 xl:t16 tw-text-neutrals-600">
|
|
{{ item.content}}
|
|
</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
strategyList: {
|
|
type: Array,
|
|
},
|
|
title: {
|
|
type: String,
|
|
},
|
|
},
|
|
created() {
|
|
if (this.$props.strategyList.length > 3) {
|
|
this.$props.strategyList = this.$props.strategyList.slice(0, 3);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.col-span-4-bg{
|
|
background-image: radial-gradient(circle at 118% 118%, rgba(250, 174, 105, 0.15), rgba(250, 174, 105, 0.01) 89%);
|
|
}
|
|
</style>
|