FEATURE: 网站的基本前端服务 #2

Merged
remilia merged 41 commits from dev into master 2025-09-06 16:11:23 +08:00
29 changed files with 125 additions and 1168 deletions
Showing only changes of commit 321e990dff - Show all commits

View File

@ -129,12 +129,13 @@ onMounted(() => {
background-color: transparent !important;
}
.header-menu .el-menu-item:active {
border-bottom: 2px solid var(--el-color-primary);
.header-menu .el-menu-item.is-active {
border-bottom: 2.5px solid var(--el-color-primary-dark-2);
color: var(--el-color-primary);
}
.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 {

View File

@ -17,6 +17,8 @@ const contentWithAbsoluteUrls = convertMedia(props.content)
const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls))
// const safeHtml = computed(() => renderMarkdown(props.content))
console.log('Rendered HTML:', safeHtml.value)
</script>
<style>
@ -25,15 +27,47 @@ const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls))
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 {
color: var(--el-color-primary);
font-size: 1.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 {
list-style-type: decimal;
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>

View File

@ -5,7 +5,7 @@ import en from 'element-plus/es/locale/lang/en';
// Strapi本地化映射
export const strapiLocales: Record<string, StrapiLocale> = {
'zh': 'zh-Hans',
'zh': 'zh-CN',
'en': 'en'
}

View File

@ -1,12 +1,51 @@
<template>
<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>
</template>
<style scoped>
.homepage {
padding: 2rem;
.carousel-item {
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 {

View File

@ -16,7 +16,7 @@
<div class="production-header">
<div class="production-image">
<el-image
:src="useStrapiMedia(production?.production_image?.url || '')" :alt="production.title"
:src="useStrapiMedia(production?.cover?.url || '')" :alt="production.title"
fit="contain" />
</div>
<div class="production-info">
@ -84,7 +84,10 @@ onMounted(async () => {
production_specs: {
populate: '*',
},
production_image: {
production_images: {
populate: '*',
},
cover: {
populate: '*',
},
},

View File

@ -20,7 +20,7 @@ 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 || '')"
:image-url="useStrapiMedia(production?.cover?.url || '')"
:name="production.title" :description="production.summary || ''" />
</div>
</el-collapse-item>
@ -62,7 +62,10 @@ onMounted(async () => {
try {
const response = await find<Production>('productions', {
populate: {
production_image: {
cover: {
populate: '*',
},
production_images: {
populate: '*',
},
production_type: {
@ -76,6 +79,7 @@ onMounted(async () => {
},
locale: strapiLocale,
})
console.log('Fetched productions:', response.data)
productions.value = response.data.map((item: Production) => ({
...item,
// 保持 production_type 原始类型,兼容对象或字符串

View 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>

View File

@ -18,7 +18,8 @@ export interface Production extends StrapiEntity {
title: string;
summary: string;
production_type: ProductionType;
production_image: StrapiImage;
cover: StrapiImage;
production_images: StrapiImage[];
production_details: string;
production_specs: ProductionSpecGroup[];
documents: StrapiMedia[];