61 lines
2.7 KiB
Vue
61 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<div class="template-features">
|
||
|
|
<div v-if="displayType === 'vertical'" class="template-features-vertical-wrapper">
|
||
|
|
<div class="template-features-vertical">
|
||
|
|
<div class="template-features-vertical-col">
|
||
|
|
<template v-for="(data, j) of featuresData.slice(0, Math.ceil(featuresData.length / 2))" :key="j">
|
||
|
|
<div class="template-features-vertical-card">
|
||
|
|
<div class="template-features-vertical-card-image">
|
||
|
|
<img :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
|
||
|
|
</div>
|
||
|
|
<h2>{{ data.title }}</h2>
|
||
|
|
<p>{{ data.description }}</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<div class="template-features-vertical-col">
|
||
|
|
<template v-for="(data, j) of featuresData.slice(Math.ceil(featuresData.length / 2))" :key="j">
|
||
|
|
<div class="template-features-vertical-card">
|
||
|
|
<div class="template-features-vertical-card-image">
|
||
|
|
<img :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
|
||
|
|
</div>
|
||
|
|
<h2>{{ data.title }}</h2>
|
||
|
|
<p>{{ data.description }}</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else class="template-features-horizontal-wrapper">
|
||
|
|
<div class="template-features-horizontal">
|
||
|
|
<template v-for="(data, index) in featuresData" :key="index">
|
||
|
|
<div class="template-features-horizontal-card">
|
||
|
|
<div class="template-features-horizontal-card-top">
|
||
|
|
<img :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
|
||
|
|
</div>
|
||
|
|
<div class="template-features-horizontal-card-bottom">
|
||
|
|
<h5 class="template-features-horizontal-card-bottom-title">{{ data.title }}</h5>
|
||
|
|
<p class="template-features-horizontal-card-bottom-description">{{ data.description }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
featuresData: {
|
||
|
|
type: null,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
displayType: {
|
||
|
|
type: null,
|
||
|
|
default: null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|