Compare commits
2 Commits
0a31a1fa85
...
e9b6409144
| Author | SHA1 | Date | |
|---|---|---|---|
| e9b6409144 | |||
| 2fe8797551 |
@ -20,16 +20,16 @@
|
||||
<NuxtLinkLocale to="/">{{ $t('navigation.home') }}</NuxtLinkLocale>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink :to="$localePath('/productions')">{{ $t('productions') }}</NuxtLink>
|
||||
<NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink :to="$localePath('/solutions')">{{ $t('solutions') }}</NuxtLink>
|
||||
<NuxtLink :to="$localePath('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink :to="$localePath('/support')">{{ $t('support') }}</NuxtLink>
|
||||
<NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink :to="$localePath('/about')">{{ $t('about-us') }}</NuxtLink>
|
||||
<NuxtLink :to="$localePath('/about')">{{ $t('navigation.about-us') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -8,18 +8,18 @@
|
||||
|
||||
|
||||
<!-- 导航菜单 -->
|
||||
<el-menu default-active="productions" class="header-menu" mode="horizontal" :ellipsis="false" router>
|
||||
<el-menu-item :index="$localePath('/productions')">
|
||||
<span class="title">{{ $t('productions') }}</span>
|
||||
<el-menu :default-active="activeName" class="header-menu" mode="horizontal" :ellipsis="false" :persistent="false" router>
|
||||
<el-menu-item index="productions" :route="$localePath('/productions')">
|
||||
<span class="title">{{ $t('navigation.productions') }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item :index="$localePath('/solutions')">
|
||||
<span class="title">{{ $t('solutions') }}</span>
|
||||
<el-menu-item index="solutions" :route="$localePath('/solutions')">
|
||||
<span class="title">{{ $t('navigation.solutions') }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item :index="$localePath('/support')">
|
||||
<span class="title">{{ $t('support') }}</span>
|
||||
<el-menu-item index="support" :route="$localePath('/support')">
|
||||
<span class="title">{{ $t('navigation.support') }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item :index="$localePath('/about')">
|
||||
<span class="title">{{ $t('about-us') }}</span>
|
||||
<el-menu-item index="about" :route="$localePath('/about')">
|
||||
<span class="title">{{ $t('navigation.about-us') }}</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
@ -46,10 +46,14 @@ v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder'
|
||||
<script setup lang="ts">
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { setLocale } = useI18n();
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
const activeName = ref('')
|
||||
|
||||
const handleSearch = () => {
|
||||
if (searchQuery.value.trim()) {
|
||||
// 这里可以添加搜索逻辑，例如导航到搜索结果页面
|
||||
@ -58,6 +62,22 @@ const handleSearch = () => {
|
||||
// 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>
|
||||
|
||||
<style scoped>
|
||||
@ -66,7 +86,7 @@ const handleSearch = () => {
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
/* border-bottom: 1px solid #e0e0e0; */
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
@ -82,7 +102,7 @@ const handleSearch = () => {
|
||||
}
|
||||
|
||||
.website-logo {
|
||||
height: 64px;
|
||||
height: 80px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@ -93,7 +113,16 @@ const handleSearch = () => {
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
@ -11,8 +11,12 @@ interface Props {
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const contentWithAbsoluteUrls = convertMedia(props.content)
|
||||
|
||||
// 将 Markdown 转换成 HTML
|
||||
const safeHtml = computed(() => renderMarkdown(props.content))
|
||||
const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls))
|
||||
// const safeHtml = computed(() => renderMarkdown(props.content))
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-container">
|
||||
<div v-if="content">
|
||||
<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('contact-info') }}
|
||||
{{ $t('navigation.contact-info') }}
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
@ -13,6 +14,10 @@
|
||||
<markdown-renderer :content="content || ''" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="loading">
|
||||
<el-skeleton :rows="5" animated />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -41,6 +46,10 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-container">
|
||||
<div v-if="content">
|
||||
<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') }}
|
||||
{{ $t('navigation.about-us') }}
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
@ -17,13 +18,19 @@
|
||||
<div class="button-group">
|
||||
<NuxtLink :to="$localePath('/about/contact-us')">
|
||||
<el-card class="card-button">
|
||||
<el-icon class="icon" size="80"><ElIconService /></el-icon>
|
||||
<el-icon class="icon" size="80">
|
||||
<ElIconService />
|
||||
</el-icon>
|
||||
<br>
|
||||
联系信息
|
||||
</el-card>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="loading">
|
||||
<el-skeleton :rows="5" animated />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -32,12 +39,11 @@ const { getStrapiLocale } = useLocalizations()
|
||||
|
||||
const strapiLocale = getStrapiLocale()
|
||||
|
||||
const content = ref<string>('')
|
||||
const content = ref<string | null>(null)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await findOne<StrapiCompanyProfile>('company-profile', undefined, {
|
||||
populate: '*',
|
||||
locale: strapiLocale,
|
||||
})
|
||||
if (response.data) {
|
||||
@ -52,6 +58,10 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
@ -99,4 +109,11 @@ onMounted(async () => {
|
||||
.icon {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,29 +1,6 @@
|
||||
<template>
|
||||
<div class="homepage">
|
||||
<div class="hero-section">
|
||||
<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>
|
||||
<p>主页还没做^^</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -32,43 +9,6 @@
|
||||
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 {
|
||||
color: var(--el-text-color-regular);
|
||||
line-height: 1.6;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<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" :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 class="text-sm opactiy-50">{{ production.title }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
@ -1,4 +1,16 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">{{ $t('our-productions') }}</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('/productions')">{{ $t('navigation.productions') }}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="productions-container">
|
||||
<el-collapse v-model="activeNames" class="production-collapse">
|
||||
<el-collapse-item
|
||||
@ -8,12 +20,13 @@ v-for="(group, type) in groupedProductions" :key="type" :title="type || '未分
|
||||
<production-card
|
||||
v-for="production in group" :key="production.documentId || production.id"
|
||||
:slug="production.documentId"
|
||||
:image-url="useStrapiMedia(production?.production_image?.url || '')" :name="production.title"
|
||||
:description="production.summary || ''" />
|
||||
:image-url="useStrapiMedia(production?.production_image?.url || '')"
|
||||
:name="production.title" :description="production.summary || ''" />
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -78,11 +91,29 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--el-color-primary);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.productions-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.production-group {
|
||||
|
||||
35
app/pages/solutions/index.vue
Normal file
35
app/pages/solutions/index.vue
Normal 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>
|
||||
@ -19,3 +19,16 @@ export function renderMarkdown(content: string): string {
|
||||
return dirtyHtml
|
||||
}
|
||||
|
||||
export function convertMedia(content: string): string {
|
||||
// 通过正则表达式替换Markdown中的图片链接
|
||||
//  -> )
|
||||
|
||||
if(!content) return '';
|
||||
|
||||
const contentWithAbsoluteUrls = content.replace(
|
||||
/!\[([^\]]*)\]\((\/uploads\/[^)]+)\)/g,
|
||||
(_, alt, url) => `})`
|
||||
)
|
||||
|
||||
return contentWithAbsoluteUrls;
|
||||
}
|
||||
@ -1,10 +1,6 @@
|
||||
{
|
||||
"back": "Back",
|
||||
"not-found": "Page Not Found",
|
||||
"productions": "Productions",
|
||||
"solutions": "Solutions",
|
||||
"support": "Support",
|
||||
"about-us": "About Us",
|
||||
"search-placeholder": "Search...",
|
||||
"company-name": "Jinshen Machinary Manufacturing Co., Ltd.",
|
||||
"company-description": "We specialize in manufacturing a range of paper tube and can equipment, integrating design, manufacturing, sales, and service.",
|
||||
@ -14,7 +10,12 @@
|
||||
"support-desc": "24/7 professional technical support to ensure stable operation of your business.",
|
||||
"quick-links": "Quick Links",
|
||||
"navigation": {
|
||||
"home": "Home"
|
||||
"home": "Home",
|
||||
"productions": "Productions",
|
||||
"solutions": "Solutions",
|
||||
"support": "Support",
|
||||
"about-us": "About Us",
|
||||
"contact-info": "Contact Info"
|
||||
},
|
||||
"contact-info": "Contact Us",
|
||||
"telephone": "Telephone",
|
||||
@ -31,5 +32,7 @@
|
||||
"product-not-found-desc": "Sorry, the product you are looking for does not exist or has been removed.",
|
||||
"back-to-productions": "Back to Products",
|
||||
"no-content-available": "No detailed information available",
|
||||
"loading": "Loading..."
|
||||
"loading": "Loading...",
|
||||
"our-productions": "Our Productions",
|
||||
"get-our-solutions": "Get Our Solutions"
|
||||
}
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
{
|
||||
"back": "返回",
|
||||
"not-found": "页面不存在",
|
||||
"productions": "产品中心",
|
||||
"solutions": "解决方案",
|
||||
"support": "服务支持",
|
||||
"about-us": "关于我们",
|
||||
"search-placeholder": "搜索...",
|
||||
"company-name": "金申机械制造有限公司",
|
||||
"company-description": "专业生产一系列纸管、纸罐设备，集设计、制造、销售、服务于一体。",
|
||||
@ -14,7 +10,12 @@
|
||||
"support-desc": "7x24小时专业技术支持，确保您的业务稳定运行。",
|
||||
"quick-links": "快速链接",
|
||||
"navigation": {
|
||||
"home": "首页"
|
||||
"home": "主页",
|
||||
"productions": "产品中心",
|
||||
"solutions": "解决方案",
|
||||
"support": "服务支持",
|
||||
"about-us": "关于我们",
|
||||
"contact-info": "联系信息"
|
||||
},
|
||||
"contact-info": "联系我们",
|
||||
"telephone": "电话",
|
||||
@ -31,5 +32,7 @@
|
||||
"product-not-found-desc": "抱歉，您访问的产品不存在或已被删除。",
|
||||
"back-to-productions": "返回产品列表",
|
||||
"no-content-available": "暂无详细信息",
|
||||
"loading": "加载中..."
|
||||
"loading": "加载中...",
|
||||
"our-productions": "我们的产品",
|
||||
"get-our-solutions": "了解我们的解决方案"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user