137 lines
2.7 KiB
Vue
137 lines
2.7 KiB
Vue
<template>
|
|
<div class="page-container">
|
|
<support-tabs />
|
|
<div class="page-header">
|
|
<h1 class="page-title">{{ $t('navigation.support') }}</h1>
|
|
<app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
|
|
</div>
|
|
<div class="page-content">
|
|
<section style="margin-bottom: 2rem">
|
|
<p>
|
|
{{ $t('support-page-desc') }}
|
|
</p>
|
|
</section>
|
|
<div class="card-group">
|
|
<support-card
|
|
v-for="(item, index) in supportItems"
|
|
:key="index"
|
|
:title="item.title"
|
|
:description="item.description"
|
|
:to="item.to"
|
|
:icon-component="item.iconComponent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const localePath = useLocalePath();
|
|
const breadcrumbItems = [
|
|
{ label: $t('navigation.home'), to: localePath('/') },
|
|
{ label: $t('navigation.support') },
|
|
];
|
|
|
|
const supportItems = [
|
|
{
|
|
title: $t('navigation.faq'),
|
|
description: $t('support-card-desc.faq'),
|
|
to: localePath('/support/faq'),
|
|
iconComponent: ElIconQuestionFilled,
|
|
},
|
|
{
|
|
title: $t('navigation.documents'),
|
|
description: $t('support-card-desc.documents'),
|
|
to: localePath('/support/documents'),
|
|
iconComponent: ElIconDocumentChecked,
|
|
},
|
|
{
|
|
title: $t('navigation.contact-info'),
|
|
description: $t('support-card-desc.contact-info'),
|
|
to: localePath('/support/contact-us'),
|
|
iconComponent: ElIconService,
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
padding: 2rem 2rem 0rem;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: var(--el-color-primary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.breadcrumb {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.page-content {
|
|
padding: 1rem 2rem 2rem;
|
|
}
|
|
|
|
section {
|
|
line-height: 1.6;
|
|
width: 60%;
|
|
}
|
|
|
|
.card-group {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 50px;
|
|
justify-content: space-around;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.el-card {
|
|
width: 100%;
|
|
padding: 20px;
|
|
box-shadow: none;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.card-icon {
|
|
color: var(--el-color-primary);
|
|
}
|
|
|
|
.card-title {
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
margin-left: 2rem;
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: var(--el-color-primary);
|
|
}
|
|
|
|
.card-link {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.grid-content {
|
|
border-radius: 4px;
|
|
min-height: 36px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
section {
|
|
width: 100%;
|
|
}
|
|
|
|
.card-group {
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
}
|
|
}
|
|
</style>
|