remilia/jinshen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: 修正部分加载Bug & 调整页面样式

Browse Source
This commit is contained in:
R2m1liA
2025-08-21 15:44:35 +08:00
parent 2fe8797551
commit e9b6409144
10 changed files with 150 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
app/components/JinshenHeader.vue
View File

@ -8,17 +8,17 @@
<!-- 导航菜单 --> <!-- 导航菜单 -->
<el-menu default-active="productions" class="header-menu" mode="horizontal" :ellipsis="false" router> <el-menu :default-active="activeName" class="header-menu" mode="horizontal" :ellipsis="false" :persistent="false" router>
<el-menu-item :index="$localePath('/productions')"> <el-menu-item index="productions" :route="$localePath('/productions')">
<span class="title">{{ $t('navigation.productions') }}</span> <span class="title">{{ $t('navigation.productions') }}</span>
</el-menu-item> </el-menu-item>
<el-menu-item :index="$localePath('/solutions')"> <el-menu-item index="solutions" :route="$localePath('/solutions')">
<span class="title">{{ $t('navigation.solutions') }}</span> <span class="title">{{ $t('navigation.solutions') }}</span>
</el-menu-item> </el-menu-item>
<el-menu-item :index="$localePath('/support')"> <el-menu-item index="support" :route="$localePath('/support')">
<span class="title">{{ $t('navigation.support') }}</span> <span class="title">{{ $t('navigation.support') }}</span>
</el-menu-item> </el-menu-item>
<el-menu-item :index="$localePath('/about')"> <el-menu-item index="about" :route="$localePath('/about')">
<span class="title">{{ $t('navigation.about-us') }}</span> <span class="title">{{ $t('navigation.about-us') }}</span>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
@ -46,10 +46,14 @@ v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder'
<script setup lang="ts"> <script setup lang="ts">
import { Search } from '@element-plus/icons-vue'; import { Search } from '@element-plus/icons-vue';
const router = useRouter();
const { setLocale } = useI18n(); const { setLocale } = useI18n();
const searchQuery = ref('') const searchQuery = ref('')
const activeName = ref('')
const handleSearch = () => { const handleSearch = () => {
if (searchQuery.value.trim()) { if (searchQuery.value.trim()) {
// 这里可以添加搜索逻辑，例如导航到搜索结果页面 // 这里可以添加搜索逻辑，例如导航到搜索结果页面
@ -58,6 +62,22 @@ const handleSearch = () => {
// router.push({ path: '/search', query: { q: searchQuery.value } }); // router.push({ path: '/search', query: { q: searchQuery.value } });
} }
} }
onMounted(() => {
const path = router.currentRoute.value.path;
if (path.startsWith('/productions')) {
activeName.value = 'productions';
} else if (path.startsWith('/solutions')) {
activeName.value = 'solutions';
} else if (path.startsWith('/support')) {
activeName.value = 'support';
} else if (path.startsWith('/about')) {
activeName.value = 'about';
} else {
activeName.value = '';
}
console.log('Current path:', path, 'Active menu:', activeName.value);
})
</script> </script>
<style scoped> <style scoped>
@ -66,7 +86,7 @@ const handleSearch = () => {
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid #e0e0e0; /* border-bottom: 1px solid #e0e0e0; */
} }
.logo-section { .logo-section {
@ -82,7 +102,7 @@ const handleSearch = () => {
} }
.website-logo { .website-logo {
height: 64px; height: 80px;
width: auto; width: auto;
} }
@ -93,7 +113,16 @@ const handleSearch = () => {
} }
.header-menu .el-menu-item { .header-menu .el-menu-item {
border-bottom: none !important; font-size: 16px;
background-color: transparent !important;
}
.header-menu .el-menu-item:active {
border-bottom: 2px solid var(--el-color-primary);
}
.header-menu .el-menu-item:hover {
border-bottom: 2px solid var(--el-color-primary);
} }
.header-actions { .header-actions {

2
app/components/MarkdownRenderer.vue
View File

@ -11,11 +11,11 @@ interface Props {
const props = defineProps<Props>() const props = defineProps<Props>()
const contentWithAbsoluteUrls = convertMedia(props.content) const contentWithAbsoluteUrls = convertMedia(props.content)
// 将 Markdown 转换成 HTML // 将 Markdown 转换成 HTML
const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls)) const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls))
// const safeHtml = computed(() => renderMarkdown(props.content))
</script> </script>

31
app/pages/about/contact-us.vue
View File

@ -1,16 +1,21 @@
<template> <template>
<div> <div class="page-container">
<el-breadcrumb class="breadcrumb" separator="/"> <div v-if="content">
<el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }"> <el-breadcrumb class="breadcrumb" separator="/">
{{ $t('navigation.home') }} <el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">
</el-breadcrumb-item> {{ $t('navigation.home') }}
<el-breadcrumb-item class="text-sm opacity-50"> </el-breadcrumb-item>
{{ $t('contact-info') }} <el-breadcrumb-item class="text-sm opacity-50">
</el-breadcrumb-item> {{ $t('navigation.contact-info') }}
</el-breadcrumb> </el-breadcrumb-item>
</el-breadcrumb>
<div class="content"> <div class="content">
<markdown-renderer :content="content || ''" /> <markdown-renderer :content="content || ''" />
</div>
</div>
<div v-else class="loading">
<el-skeleton :rows="5" animated />
</div> </div>
</div> </div>
</template> </template>
@ -41,6 +46,10 @@ onMounted(async () => {
</script> </script>
<style scoped> <style scoped>
.page-container {
padding: 2rem 1rem;
}
.breadcrumb { .breadcrumb {
padding: 1rem 1rem; padding: 1rem 1rem;
} }

63
app/pages/about/index.vue
View File

@ -1,27 +1,34 @@
<template> <template>
<div> <div class="page-container">
<el-breadcrumb class="breadcrumb" separator="/"> <div v-if="content">
<el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }"> <el-breadcrumb class="breadcrumb" separator="/">
{{ $t('navigation.home') }} <el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">
</el-breadcrumb-item> {{ $t('navigation.home') }}
<el-breadcrumb-item class="text-sm opacity-50"> </el-breadcrumb-item>
{{ $t('about-us') }} <el-breadcrumb-item class="text-sm opacity-50">
</el-breadcrumb-item> {{ $t('navigation.about-us') }}
</el-breadcrumb> </el-breadcrumb-item>
</el-breadcrumb>
<div class="content"> <div class="content">
<markdown-renderer :content="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> </div>
<div v-else class="loading">
<el-divider content-position="left">更多信息</el-divider> <el-skeleton :rows="5" animated />
<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>
</div> </div>
</template> </template>
@ -32,12 +39,11 @@ const { getStrapiLocale } = useLocalizations()
const strapiLocale = getStrapiLocale() const strapiLocale = getStrapiLocale()
const content = ref<string>('') const content = ref<string | null>(null)
onMounted(async () => { onMounted(async () => {
try { try {
const response = await findOne<StrapiCompanyProfile>('company-profile', undefined, { const response = await findOne<StrapiCompanyProfile>('company-profile', undefined, {
populate: '*',
locale: strapiLocale, locale: strapiLocale,
}) })
if (response.data) { if (response.data) {
@ -52,6 +58,10 @@ onMounted(async () => {
</script> </script>
<style scoped> <style scoped>
.page-container {
padding: 2rem 1rem;
}
.breadcrumb { .breadcrumb {
padding: 1rem 1rem; padding: 1rem 1rem;
} }
@ -99,4 +109,11 @@ onMounted(async () => {
.icon { .icon {
padding: 10px; padding: 10px;
} }
.loading {
display: flex;
justify-content: center;
align-items: center;
margin-top: 1rem;
}
</style> </style>

62
app/pages/index.vue
View File

@ -1,29 +1,6 @@
<template> <template>
<div class="homepage"> <div class="homepage">
<div class="hero-section"> <p>主页还没做^^</p>
<h1>{{ $t('company-name') }}</h1>
<p>{{ $t('company-description') }}</p>
<el-button type="primary" size="large">
{{ $t('learn-more') }}
</el-button>
</div>
<div class="content-sections">
<div class="section">
<h2>{{ $t('productions') }}</h2>
<p>{{ $t('productions-desc') }}</p>
</div>
<div class="section">
<h2>{{ $t('solutions') }}</h2>
<p>{{ $t('solutions-desc') }}</p>
</div>
<div class="section">
<h2>{{ $t('support') }}</h2>
<p>{{ $t('support-desc') }}</p>
</div>
</div>
</div> </div>
</template> </template>
@ -32,43 +9,6 @@
padding: 2rem; padding: 2rem;
} }
.hero-section {
text-align: center;
padding: 4rem 0;
background: linear-gradient(135deg, var(--el-color-primary-light-3), var(--el-color-primary));
border-radius: 8px;
margin-bottom: 3rem;
color: white;
}
.hero-section h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
.hero-section p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.content-sections {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.section {
padding: 2rem;
background: var(--el-bg-color);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.section h2 {
color: var(--el-color-primary);
margin-bottom: 1rem;
}
.section p { .section p {
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
line-height: 1.6; line-height: 1.6;

2
app/pages/productions/[...slug].vue
View File

@ -5,7 +5,7 @@
<el-breadcrumb class="breadcrumb" separator="/"> <el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">{{ $t('navigation.home') <el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/') }">{{ $t('navigation.home')
}}</el-breadcrumb-item> }}</el-breadcrumb-item>
<el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/productions') }">{{ $t('productions') <el-breadcrumb-item class="text-sm opacity-50" :to="{ path: $localePath('/productions') }">{{ $t('navigation.productions')
}}</el-breadcrumb-item> }}</el-breadcrumb-item>
<el-breadcrumb-item class="text-sm opactiy-50">{{ production.title }}</el-breadcrumb-item> <el-breadcrumb-item class="text-sm opactiy-50">{{ production.title }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>

11
app/pages/productions/index.vue
View File

@ -3,10 +3,10 @@
<div class="page-header"> <div class="page-header">
<h1 class="page-title">{{ $t('our-productions') }}</h1> <h1 class="page-title">{{ $t('our-productions') }}</h1>
<el-breadcrumb class="breadcrumb"> <el-breadcrumb class="breadcrumb">
<el-breadcrumb-item class="text-sm opacity-50"> <el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink> <NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item class="text-sm opacity-50"> <el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink> <NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink>
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
@ -91,15 +91,19 @@ onMounted(async () => {
</script> </script>
<style scoped> <style scoped>
.page-container {
padding: 2rem 1rem;
}
.page-header { .page-header {
display: flex; display: flex;
padding: 20px;
} }
.page-title { .page-title {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
color: var(--el-color-primary); color: var(--el-color-primary);
margin-bottom: 20px;
} }
.breadcrumb { .breadcrumb {
@ -110,7 +114,6 @@ onMounted(async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 40px; gap: 40px;
padding: 20px;
} }
.production-group { .production-group {

35
app/pages/solutions/index.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="page-container">
<div class="page-header">
<h1 class="page-title">{{ $t('get-our-solutions') }}</h1>
<el-breadcrumb class="breadcrumb">
<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('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
</template>
<style scoped>
.page-container {
padding: 2rem 1rem;
}
.page-header {
display: flex;
}
.page-title {
font-size: 2rem;
font-weight: bold;
color: var(--el-color-primary);
}
.breadcrumb {
margin-left: auto;
}
</style>

6
i18n/locales/en.json
View File

@ -14,7 +14,8 @@
"productions": "Productions", "productions": "Productions",
"solutions": "Solutions", "solutions": "Solutions",
"support": "Support", "support": "Support",
"about-us": "About Us" "about-us": "About Us",
"contact-info": "Contact Info"
}, },
"contact-info": "Contact Us", "contact-info": "Contact Us",
"telephone": "Telephone", "telephone": "Telephone",
@ -32,5 +33,6 @@
"back-to-productions": "Back to Products", "back-to-productions": "Back to Products",
"no-content-available": "No detailed information available", "no-content-available": "No detailed information available",
"loading": "Loading...", "loading": "Loading...",
"our-productions": "Our Productions" "our-productions": "Our Productions",
"get-our-solutions": "Get Our Solutions"
} }

6
i18n/locales/zh.json
View File

@ -14,7 +14,8 @@
"productions": "产品中心", "productions": "产品中心",
"solutions": "解决方案", "solutions": "解决方案",
"support": "服务支持", "support": "服务支持",
"about-us": "关于我们" "about-us": "关于我们",
"contact-info": "联系信息"
}, },
"contact-info": "联系我们", "contact-info": "联系我们",
"telephone": "电话", "telephone": "电话",
@ -32,5 +33,6 @@
"back-to-productions": "返回产品列表", "back-to-productions": "返回产品列表",
"no-content-available": "暂无详细信息", "no-content-available": "暂无详细信息",
"loading": "加载中...", "loading": "加载中...",
"our-productions": "我们的产品" "our-productions": "我们的产品",
"get-our-solutions": "了解我们的解决方案"
} }