Fix: 调整页面布局 & 调整页面跳转逻辑
This commit is contained in:
@ -20,7 +20,7 @@
|
||||
|
||||
<el-divider content-position="left">更多信息</el-divider>
|
||||
<div class="button-group">
|
||||
<NuxtLink :to="$localePath('/about/contact-us')">
|
||||
<NuxtLink :to="$localePath('/support/contact-us')">
|
||||
<el-card class="card-button">
|
||||
<el-icon class="icon" size="80">
|
||||
<ElIconService />
|
||||
|
||||
@ -134,6 +134,7 @@ onMounted(async () => {
|
||||
.group-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 1rem;
|
||||
gap: 20px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@ -97,7 +97,7 @@ onMounted(async () => {
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
padding: 2rem 1rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
|
||||
130
app/pages/support/contact-us.vue
Normal file
130
app/pages/support/contact-us.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div v-if="content">
|
||||
<div class="page-tab">
|
||||
<el-segmented v-model="activeTab" class="segmented" :options="options" block size="large" @change="handleSegmentedChange" />
|
||||
</div>
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">{{ $t('navigation.contact-info') }}</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-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/support/contact-us')">
|
||||
{{ $t('navigation.contact-info') }}
|
||||
</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<markdown-renderer :content="content || ''" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="loading">
|
||||
<el-skeleton :rows="5" animated />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { findOne } = useStrapi()
|
||||
const { getStrapiLocale } = useLocalizations()
|
||||
|
||||
const strapiLocale = getStrapiLocale()
|
||||
|
||||
const content = ref<string>('')
|
||||
|
||||
const activeTab = ref('contact-us')
|
||||
const options = [
|
||||
{ label: '服务支持', value: '' },
|
||||
{ label: '常见问题', value: 'faq' },
|
||||
{ label: '联系售后', value: 'contact-us' },
|
||||
{ label: '文档资料', value: 'documents' },
|
||||
]
|
||||
|
||||
const handleSegmentedChange = (value: string) => {
|
||||
const localePath = useLocalePath()
|
||||
navigateTo(localePath(`/support/${value}`))
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await findOne<StrapiContactInfo>('contact-info', undefined, {
|
||||
populate: '*',
|
||||
locale: strapiLocale,
|
||||
})
|
||||
if (response.data) {
|
||||
content.value = response.data.content || ''
|
||||
} else {
|
||||
console.warn('No contact info data found')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch contact info:', error)
|
||||
}
|
||||
})
|
||||
</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;
|
||||
}
|
||||
|
||||
.segmented {
|
||||
--el-segmented-bg-color: transparent;
|
||||
--el-segmented-item-active-color: var(--el-color-primary);
|
||||
--el-segmented-item-color: var(--el-text-color-secondary);
|
||||
--el-segmented-item-hover-color: var(--el-color-primary);
|
||||
--el-segmented-item-border-color: transparent;
|
||||
--el-segmented-item-active-border-color: transparent;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
|
||||
.segmented :deep(.el-segmented__item-selected) {
|
||||
/* --el-border-radius-base: 16px; */
|
||||
transition: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.segmented :deep(.el-segmented__item) {
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
color: var(--el-color-primary-dark-2);
|
||||
border-bottom: 4px solid var(--el-color-primary-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
:deep(.markdown-body ul) {
|
||||
list-style-type: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="page-tab">
|
||||
<el-segmented
|
||||
v-model="activeTab" class="segmented" :options="options" block size="large"
|
||||
@change="handleSegmentedChange" />
|
||||
</div>
|
||||
<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>
|
||||
@ -10,9 +16,6 @@
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="page-tab">
|
||||
<el-segmented v-model="activeTab" class="tab" :options="options" block size="large" />
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<!-- <el-divider content-position="left">选择我们的服务</el-divider>
|
||||
<div class="button-group">
|
||||
@ -35,27 +38,73 @@
|
||||
</el-card>
|
||||
</NuxtLink>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const activeTab = ref('faq')
|
||||
const activeTab = ref('support')
|
||||
const options = [
|
||||
{ label: '服务支持', value: 'support' },
|
||||
{ label: '常见问题', value: 'faq' },
|
||||
{ label: '联系售后', value: 'contact-us' },
|
||||
{ label: '文档资料', value: 'documents' },
|
||||
]
|
||||
|
||||
const handleSegmentedChange = (value: string) => {
|
||||
const localePath = useLocalePath()
|
||||
navigateTo(localePath(`/support/${value}`))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
padding: 2rem 1rem;
|
||||
.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 {
|
||||
padding: 1rem 1rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.segmented {
|
||||
--el-segmented-bg-color: transparent;
|
||||
--el-segmented-item-active-color: var(--el-color-primary);
|
||||
--el-segmented-item-color: var(--el-text-color-secondary);
|
||||
--el-segmented-item-hover-color: var(--el-color-primary);
|
||||
--el-segmented-item-border-color: transparent;
|
||||
--el-segmented-item-active-border-color: transparent;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
|
||||
.segmented :deep(.el-segmented__item-selected) {
|
||||
/* --el-border-radius-base: 16px; */
|
||||
transition: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.segmented :deep(.el-segmented__item) {
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
color: var(--el-color-primary-dark-2);
|
||||
border-bottom: 4px solid var(--el-color-primary-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
:deep(.el-divider__text) {
|
||||
|
||||
@ -5,3 +5,7 @@ export interface StrapiCompanyProfile extends StrapiEntity {
|
||||
export interface StrapiContactInfo extends StrapiEntity {
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface StrapiHomepage extends StrapiEntity {
|
||||
carousel: StrapiImage[];
|
||||
}
|
||||
@ -15,7 +15,8 @@
|
||||
"solutions": "Solutions",
|
||||
"support": "Support",
|
||||
"about-us": "About Us",
|
||||
"contact-info": "Contact Info"
|
||||
"contact-info": "Contact Info",
|
||||
"faq": "FAQ"
|
||||
},
|
||||
"contact-info": "Contact Us",
|
||||
"telephone": "Telephone",
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
"solutions": "解决方案",
|
||||
"support": "服务支持",
|
||||
"about-us": "关于我们",
|
||||
"contact-info": "联系信息"
|
||||
"contact-info": "联系信息",
|
||||
"faq": "常见问题"
|
||||
},
|
||||
"contact-info": "联系我们",
|
||||
"telephone": "电话",
|
||||
|
||||
Reference in New Issue
Block a user