Files
jinshen-website/app/pages/support/index.vue
R2m1liA 1ac659cd68 refactor(support): 重构support页面代码
- 将segement tab移至单独的vue组件
- 增添部分i18n文本
2025-09-03 14:06:08 +08:00

92 lines
2.4 KiB
Vue

<template>
<div class="page-container">
<support-tabs />
<div class="page-header">
<h1 class="page-title">{{ $t('navigation.support') }}</h1>
<el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page-content">
<!-- <el-divider content-position="left">选择我们的服务</el-divider>
<div class="button-group">
<NuxtLink :to="$localePath('/about/contact-us')">
<el-card class="card-button">
<el-icon class="icon" size="80">
<ElIconService />
</el-icon>
<br>
联系我们
</el-card>
</NuxtLink>
<NuxtLink :to="$localePath('/about/contact-us')">
<el-card class="card-button">
<el-icon class="icon" size="80">
<ElIconService />
</el-icon>
<br>
联系我们
</el-card>
</NuxtLink>
</div> -->
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.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: 2rem;
}
:deep(.el-divider__text) {
font-size: 1.2rem;
font-weight: bold;
}
.button-group {
display: flex;
justify-content: left;
margin-top: 2rem;
margin-left: 2rem;
gap: 20px;
}
.card-button {
width: 20%;
min-width: 200px;
padding: 20px;
margin: 0 auto;
cursor: pointer;
text-align: center;
font-size: 1.5em;
}
.card-button:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
</style>