125 lines
2.8 KiB
Vue
125 lines
2.8 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>
|
||
金申机械制造有限公司致力于为客户提供优质的产品与服务。针对纸管机、分纸机、纸吸管等产品，我们提供全方位的售后服务，确保客户能够安心地使用我们的产品。
|
||
</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: '我们为用户整理了常见问题的答案，帮助您快速解决疑惑。',
|
||
to: localePath('/support/faq'),
|
||
iconComponent: ElIconQuestionFilled,
|
||
},
|
||
{
|
||
title: $t('navigation.documents'),
|
||
description: '我们为用户整理了常见问题的答案，帮助您快速解决疑惑。',
|
||
to: localePath('/support/documents'),
|
||
iconComponent: ElIconDocumentChecked,
|
||
},
|
||
{
|
||
title: $t('navigation.contact-info'),
|
||
description: '通过电话、邮箱联系我们，我们将现场为您服务。',
|
||
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: flex;
|
||
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;
|
||
}
|
||
</style>
|