Feature: 新增界面-公司简介
This commit is contained in:
3
app/pages/about/contact-us.vue
Normal file
3
app/pages/about/contact-us.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<p>还没做</p>
|
||||
</template>
|
||||
102
app/pages/about/index.vue
Normal file
102
app/pages/about/index.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-breadcrumb class="breadcrumb" separator="/">
|
||||
<el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">
|
||||
{{ $t('navigation.home') }}
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-sm opacity-50">
|
||||
{{ $t('about-us') }}
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
<div class="content">
|
||||
<markdown-renderer :content="content || ''" />
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { findOne } = useStrapi()
|
||||
const { getStrapiLocale } = useLocalizations()
|
||||
|
||||
const strapiLocale = getStrapiLocale()
|
||||
|
||||
const content = ref<string>('')
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await findOne<StrapiCompanyProfile>('company-profile', undefined, {
|
||||
populate: '*',
|
||||
locale: strapiLocale,
|
||||
})
|
||||
if (response.data) {
|
||||
content.value = response.data.content || ''
|
||||
} else {
|
||||
console.warn('No company profile data found')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch company profile:', error)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.breadcrumb {
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
:deep(.markdown-body p) {
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
:deep(.markdown-body h2) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.el-divider__text) {
|
||||
color: var(--el-color-info);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
margin-top: 2rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<div class="production-detail">
|
||||
<div>
|
||||
<el-breadcrumb class="breadcrumb" separator="/">
|
||||
<el-breadcrumb-item class="text-sm" :to="{ path: '/' }">
|
||||
{{ $t('navigation.home') }}
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-sm" :to="{ path: '/' }">
|
||||
{{ $t('productions') }}
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-sm" :to="{ path: '/' }">
|
||||
示例
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
|
||||
<div class="production-header">
|
||||
<div class="production-image">
|
||||
<el-empty description="产品图片" class="border" />
|
||||
</div>
|
||||
<div class="production-info">
|
||||
<h1>产品名称</h1>
|
||||
<p class="summary">产品描述...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="production-content">
|
||||
<el-tabs v-model="activeName" class="production-tabs">
|
||||
<el-tab-pane label="产品详情" name="details">
|
||||
<p>这里是产品的详细描述内容...</p>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="技术规格" name="specs">
|
||||
<p>这里是产品的技术规格内容...</p>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="常见问题" name="faq">
|
||||
<p>这里是产品的常见问题内容...</p>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="相关资料" name="resources">
|
||||
<p>这里是产品的相关资料内容...</p>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const activeName = ref('details')
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.production-detail {
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
padding: 0rem 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
color: var(--el-color-info);
|
||||
}
|
||||
|
||||
.production-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.production-image .el-empty {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.production-info h1 {
|
||||
color: var(--el-color-text);
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.production-info p {
|
||||
color: var(--el-color-info);
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.el-tab-pane {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user