Fix:修正前后端Bug
This commit is contained in:
@ -129,12 +129,13 @@ onMounted(() => {
|
|||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-menu .el-menu-item:active {
|
.header-menu .el-menu-item.is-active {
|
||||||
border-bottom: 2px solid var(--el-color-primary);
|
border-bottom: 2.5px solid var(--el-color-primary-dark-2);
|
||||||
|
color: var(--el-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-menu .el-menu-item:hover {
|
.header-menu .el-menu-item:hover {
|
||||||
border-bottom: 2px solid var(--el-color-primary);
|
border-bottom: 2.5px solid var(--el-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-actions {
|
.header-actions {
|
||||||
|
|||||||
@ -17,6 +17,8 @@ const contentWithAbsoluteUrls = convertMedia(props.content)
|
|||||||
const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls))
|
const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls))
|
||||||
// const safeHtml = computed(() => renderMarkdown(props.content))
|
// const safeHtml = computed(() => renderMarkdown(props.content))
|
||||||
|
|
||||||
|
console.log('Rendered HTML:', safeHtml.value)
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -25,15 +27,47 @@ const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls))
|
|||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown-body h1,
|
.markdown-body h1 {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.markdown-body h2 {
|
.markdown-body h2 {
|
||||||
color: var(--el-color-primary);
|
color: var(--el-color-primary);
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.markdown-body h3 {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body p {
|
||||||
|
text-indent: 2em;
|
||||||
|
text-align: justify;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
.markdown-body ol {
|
.markdown-body ol {
|
||||||
list-style-type: decimal;
|
list-style-type: decimal;
|
||||||
padding-left: 2em;
|
padding-left: 2em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
padding-left: 2em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-body hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--el-border-color);
|
||||||
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -5,7 +5,7 @@ import en from 'element-plus/es/locale/lang/en';
|
|||||||
|
|
||||||
// Strapi本地化映射
|
// Strapi本地化映射
|
||||||
export const strapiLocales: Record<string, StrapiLocale> = {
|
export const strapiLocales: Record<string, StrapiLocale> = {
|
||||||
'zh': 'zh-Hans',
|
'zh': 'zh-CN',
|
||||||
'en': 'en'
|
'en': 'en'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,12 +1,51 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="homepage">
|
<div class="homepage">
|
||||||
<p>主页还没做^^</p>
|
<div class="carousel">
|
||||||
|
<el-carousel height="auto" :interval="5000" arrow="never" autoplay>
|
||||||
|
<el-carousel-item v-for="(item, index) in 3" :key="index">
|
||||||
|
<div class="carousel-item">
|
||||||
|
<!-- <el-image class="carousel-image" :src="useStrapiMedia('/uploads/201605211508029798_e37af77a48.png')" fit="fill" /> -->
|
||||||
|
<p class="image-label">{{ item }}</p>
|
||||||
|
</div>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.homepage {
|
.carousel-item {
|
||||||
padding: 2rem;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-image {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__item {
|
||||||
|
width: 100%;
|
||||||
|
height: 33vw;
|
||||||
|
/* 16:9 Aspect Ratio */
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__item h3 {
|
||||||
|
display: flex;
|
||||||
|
color: #475669;
|
||||||
|
opacity: 0.8;
|
||||||
|
line-height: 300px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__item:nth-child(2n) {
|
||||||
|
/* background-color: #99a9bf; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__item:nth-child(2n + 1) {
|
||||||
|
/* background-color: #d3dce6; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.section p {
|
.section p {
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
<div class="production-header">
|
<div class="production-header">
|
||||||
<div class="production-image">
|
<div class="production-image">
|
||||||
<el-image
|
<el-image
|
||||||
:src="useStrapiMedia(production?.production_image?.url || '')" :alt="production.title"
|
:src="useStrapiMedia(production?.cover?.url || '')" :alt="production.title"
|
||||||
fit="contain" />
|
fit="contain" />
|
||||||
</div>
|
</div>
|
||||||
<div class="production-info">
|
<div class="production-info">
|
||||||
@ -84,7 +84,10 @@ onMounted(async () => {
|
|||||||
production_specs: {
|
production_specs: {
|
||||||
populate: '*',
|
populate: '*',
|
||||||
},
|
},
|
||||||
production_image: {
|
production_images: {
|
||||||
|
populate: '*',
|
||||||
|
},
|
||||||
|
cover: {
|
||||||
populate: '*',
|
populate: '*',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@ -20,7 +20,7 @@ v-for="(group, type) in groupedProductions" :key="type" :title="type || '未分
|
|||||||
<production-card
|
<production-card
|
||||||
v-for="production in group" :key="production.documentId || production.id"
|
v-for="production in group" :key="production.documentId || production.id"
|
||||||
:slug="production.documentId"
|
:slug="production.documentId"
|
||||||
:image-url="useStrapiMedia(production?.production_image?.url || '')"
|
:image-url="useStrapiMedia(production?.cover?.url || '')"
|
||||||
:name="production.title" :description="production.summary || ''" />
|
:name="production.title" :description="production.summary || ''" />
|
||||||
</div>
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
@ -62,7 +62,10 @@ onMounted(async () => {
|
|||||||
try {
|
try {
|
||||||
const response = await find<Production>('productions', {
|
const response = await find<Production>('productions', {
|
||||||
populate: {
|
populate: {
|
||||||
production_image: {
|
cover: {
|
||||||
|
populate: '*',
|
||||||
|
},
|
||||||
|
production_images: {
|
||||||
populate: '*',
|
populate: '*',
|
||||||
},
|
},
|
||||||
production_type: {
|
production_type: {
|
||||||
@ -76,6 +79,7 @@ onMounted(async () => {
|
|||||||
},
|
},
|
||||||
locale: strapiLocale,
|
locale: strapiLocale,
|
||||||
})
|
})
|
||||||
|
console.log('Fetched productions:', response.data)
|
||||||
productions.value = response.data.map((item: Production) => ({
|
productions.value = response.data.map((item: Production) => ({
|
||||||
...item,
|
...item,
|
||||||
// 保持 production_type 原始类型,兼容对象或字符串
|
// 保持 production_type 原始类型,兼容对象或字符串
|
||||||
|
|||||||
65
app/pages/support/index.vue
Normal file
65
app/pages/support/index.vue
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-container">
|
||||||
|
<div class="page-header">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.page-container {
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
padding: 1rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-divider__text) {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -18,7 +18,8 @@ export interface Production extends StrapiEntity {
|
|||||||
title: string;
|
title: string;
|
||||||
summary: string;
|
summary: string;
|
||||||
production_type: ProductionType;
|
production_type: ProductionType;
|
||||||
production_image: StrapiImage;
|
cover: StrapiImage;
|
||||||
|
production_images: StrapiImage[];
|
||||||
production_details: string;
|
production_details: string;
|
||||||
production_specs: ProductionSpecGroup[];
|
production_specs: ProductionSpecGroup[];
|
||||||
documents: StrapiMedia[];
|
documents: StrapiMedia[];
|
||||||
|
|||||||
Reference in New Issue
Block a user