gxwebsoft/pc-10584
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(home): 重构首页界面并移除文章相关页面

Browse Source 
- 添加公司信息配置文件，包含项目名称、地址、经营范围等
- 实现404页面路由，显示页面建设中提示和导航按钮
- 在首页集成公司信息展示，包括经营范围和资质信息
- 移除文章列表页、文章详情页、栏目页和单页内容相关功能
- 更新Ant Design主题配色为绿色主色调
- 简化首页布局，突出业务板块和服务导向设计
- 删除部署方案和开通流程等临时页面内容
This commit is contained in:
赵忠林
2026-01-27 09:51:14 +08:00
parent 775841eed3
commit a83f2969d8
17 changed files with 423 additions and 1446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

451
app/pages/index.vue
View File

@@ -1,37 +1,95 @@
<template>
<main class="home">
<section class="mx-auto max-w-screen-xl px-4 py-6">
<section class="mx-auto max-w-screen-xl px-4 py-8">
<div class="grid grid-cols-12 gap-6">
<div class="col-span-12 lg:col-span-7">
<div class="panel">
<a-image :src="featured.image" :preview="false" class="featured-image" />
<div class="p-4">
<div class="featured-title">{{ featured.title }}</div>
<div class="featured-meta">{{ featured.date }}</div>
<div class="panel hero">
<div class="hero-inner">
<!-- <div class="hero-badge">OFFICIAL</div>-->
<!-- <div class="hero-title">{{ COMPANY.projectName }}</div>-->
<!-- <div class="hero-sub">生物基材料技术研发 · 技术服务 · 食品与农产品流通</div>-->
<!-- <div class="mt-6 flex flex-wrap gap-3">-->
<!-- <a-button type="primary" size="large" @click="navigateTo('/contact')">-->
<!-- <template #icon><PhoneOutlined /></template>-->
<!-- 合作咨询-->
<!-- </a-button>-->
<!-- <a-button size="large" @click="scrollToCompany">-->
<!-- <template #icon><IdcardOutlined /></template>-->
<!-- 工商信息-->
<!-- </a-button>-->
<!-- </div>-->
<!-- <div class="mt-6 flex flex-wrap gap-2">-->
<!-- <a-tag v-for="t in COMPANY.tags" :key="t" color="green">{{ t }}</a-tag>-->
<!-- </div>-->
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-5">
<div class="panel notice">
<div class="notice-head">
<div class="notice-title">
<NotificationOutlined />
公告
</div>
<a class="notice-more" href="#" @click.prevent>更多</a>
<div class="panel quick">
<div class="login-hero quick-hero">
<div class="login-hero-title">桂乐淘 · 官方网站</div>
<div class="login-hero-sub">QUALITY · SERVICE · COMPLIANCE</div>
</div>
<div class="notice-list">
<a
v-for="n in notices"
:key="n.title"
class="notice-item"
href="#"
@click.prevent
>
<div class="notice-item-title">{{ n.title }}</div>
<div class="notice-item-desc">{{ n.desc }}</div>
</a>
<div class="p-4">
<a-space direction="vertical" class="w-full" size="middle">
<a-button type="primary" block size="large" @click="navigateTo('/products')">
<template #icon><FileTextOutlined /></template>
经营范围与资质信息
</a-button>
<a-button block size="large" @click="navigateTo('/contact')">
<template #icon><PhoneOutlined /></template>
合作咨询 / 联系我们
</a-button>
<div class="flex items-start justify-between gap-3 text-sm text-gray-500">
<span class="leading-6">地址：{{ COMPANY.address }}</span>
<a href="#" class="text-green-600" @click.prevent="scrollToCompany">查看</a>
</div>
</a-space>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-5 hidden">
<div id="company" class="panel company">
<div class="panel-head">
<div class="panel-title">
<IdcardOutlined />
工商信息
</div>
<a class="panel-more" href="#" @click.prevent="navigateTo('/products')">详情</a>
</div>
<div class="p-4">
<a-descriptions bordered size="small" :column="1">
<a-descriptions-item label="项目名称">{{ COMPANY.projectName }}</a-descriptions-item>
<a-descriptions-item label="注册地址">{{ COMPANY.address }}</a-descriptions-item>
</a-descriptions>
<a-divider class="!my-4" />
<a-collapse ghost>
<a-collapse-panel key="general" header="一般项目（经营范围）">
<a-list size="small" :data-source="generalScopeItems">
<template #renderItem="{ item }">
<a-list-item class="scope-item">{{ item }}</a-list-item>
</template>
</a-list>
</a-collapse-panel>
<a-collapse-panel key="licensed" header="许可项目">
<a-list size="small" :data-source="licensedScopeItems">
<template #renderItem="{ item }">
<a-list-item class="scope-item">{{ item }}</a-list-item>
</template>
</a-list>
</a-collapse-panel>
</a-collapse>
<a-alert
class="mt-4"
type="info"
show-icon
message="经营范围展示以工商登记为准（涉及许可项目请以许可文件为准）。"
/>
</div>
</div>
</div>
@@ -42,28 +100,28 @@
<div class="panel">
<div class="section-pill">
<span class="pill-left">
<FileTextOutlined />
申报指南
<AppstoreOutlined />
业务板块
</span>
<span class="pill-right">Declaration Guide</span>
<span class="pill-right">SERVICES</span>
</div>
<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
<a-card
v-for="g in guides"
:key="g.title"
class="guide-card"
v-for="s in services"
:key="s.title"
class="guide-card service-card"
:bordered="true"
hoverable
@click="navigateTo(g.to)"
@click="navigateTo('/products')"
>
<a-space>
<a-avatar :size="44" class="guide-icon">
<component :is="g.icon" />
<a-avatar :size="44" class="guide-icon service-icon">
<component :is="s.icon" />
</a-avatar>
<div>
<div class="guide-title">{{ g.title }}</div>
<div class="guide-desc">{{ g.desc }}</div>
<div class="guide-title">{{ s.title }}</div>
<div class="guide-desc">{{ s.desc }}</div>
</div>
</a-space>
</a-card>
@@ -71,44 +129,20 @@
</div>
</div>
<div class="col-span-12 lg:col-span-5">
<div class="panel login">
<div class="login-hero">
<div class="login-hero-title">破产重整债权申报系统</div>
<div class="login-hero-sub">SUBMIT REQUIREMENTS</div>
</div>
<div class="p-4">
<a-space direction="vertical" class="w-full" size="middle">
<a-button type="primary" block size="large" @click="navigateTo('/login')">
<template #icon><LoginOutlined /></template>
用户登录申报
</a-button>
<a-button block size="large" @click="navigateTo('/create-app')">
<template #icon><UserAddOutlined /></template>
新用户注册申报
</a-button>
<div class="flex items-center justify-between text-sm text-gray-500">
<span>申报审核系统</span>
<a href="#" class="text-red-600" @click.prevent>忘记密码？</a>
</div>
</a-space>
</div>
</div>
</div>
</div>
</section>
<section class="banner">
<div class="mx-auto max-w-screen-xl px-4 py-10">
<div class="banner-title">致力于专业破产事务服务</div>
<div class="banner-title">以合规经营与品质服务为核心</div>
</div>
</section>
<section class="mx-auto max-w-screen-xl px-4 py-10">
<div class="section-title">
<div class="section-title-main">新闻资讯</div>
<div class="section-title-sub">NEWS INFORMATION</div>
<div class="section-title-main">资讯与公告</div>
<div class="section-title-sub">NEWS & UPDATES</div>
</div>
<div class="mt-6 grid grid-cols-12 gap-6">
@@ -135,23 +169,20 @@
<div class="mt-10">
<div class="section-title">
<div class="section-title-main">典型案例</div>
<div class="section-title-sub">CLASSIC CASE</div>
<div class="section-title-main">资质与合作</div>
<div class="section-title-sub">COMPLIANCE</div>
</div>
<div class="mt-6 grid grid-cols-12 gap-6">
<a-card
v-for="c in cases"
v-for="c in compliance"
:key="c.title"
hoverable
class="case-card col-span-12 sm:col-span-6 lg:col-span-3"
@click="navigateTo(c.to)"
>
<template #cover>
<a-image :src="c.image" :preview="false" class="case-image" />
</template>
<a-typography-title :level="5" class="!mb-2 case-title">{{ c.title }}</a-typography-title>
<div class="case-meta">{{ c.date }}</div>
<div class="case-desc">{{ c.desc }}</div>
</a-card>
</div>
</div>
@@ -161,110 +192,119 @@
<script setup lang="ts">
import {
AppstoreOutlined,
FileTextOutlined,
LoginOutlined,
NotificationOutlined,
ProfileOutlined,
IdcardOutlined,
PhoneOutlined,
SafetyCertificateOutlined,
UserAddOutlined
ShopOutlined
} from '@ant-design/icons-vue'
import { usePageSeo } from '@/composables/usePageSeo'
import { COMPANY } from '@/config/company'
const featured = {
image:
'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1400&q=80',
title: '行于思清算公司受指定担任广西民族包装有限公司管理人',
date: '2023-10-11'
usePageSeo({
title: '首页',
description:
'桂乐淘：生物基材料技术研发、技术服务与食品/农产品流通服务。提供经营范围与资质信息查询及合作咨询入口。',
path: '/'
})
function splitScope(text: string) {
return text
.split(/[；;]+/g)
.map((s) => s.trim())
.filter(Boolean)
.map((s) => s.replace(/[。.]$/, '').trim())
}
const notices = [
{
title: '关于公开招募破产清算管理主体框架及维修施工单位的公告',
desc: '南宁市中级人民法院根据有关规定...'
},
{
title: '钦州市王明年丰全仓储有限公司重整投资人招募公告',
desc: '钦州市王明年丰全仓储有限公司...'
},
{
title: '钦州市王明年丰全仓储有限公司 预重整债权申报公告',
desc: '债权申报相关材料及申报途径...'
},
{
title: '钦州市王明年丰全仓储有限公司 预重整债权申报公告（补充）',
desc: '补充说明及常见问题...'
}
]
const generalScopeItems = computed(() => splitScope(COMPANY.scope.general))
const licensedScopeItems = computed(() => splitScope(COMPANY.scope.licensed))
const guides = [
{ title: '线上实名认证指南', desc: '快速完成实名认证', to: '/flow', icon: ProfileOutlined },
{ title: '债权人提交材料指南', desc: '材料清单与提交规范', to: '/articles', icon: FileTextOutlined },
{ title: '债权人网上申报指南', desc: '在线申报流程说明', to: '/login', icon: SafetyCertificateOutlined },
{ title: '公司自主清算债权登记材料范本', desc: '模板下载与填写说明', to: '/deploy', icon: FileTextOutlined }
const services = [
{
title: '生物基材料技术研发',
desc: '面向应用场景开展研发与技术支持',
icon: SafetyCertificateOutlined
},
{
title: '技术服务与技术推广',
desc: '技术开发/咨询/交流/转让/推广',
icon: AppstoreOutlined
},
{
title: '食品销售（预包装）',
desc: '含保健食品（预包装）销售等',
icon: ShopOutlined
},
{
title: '农产品与生鲜流通',
desc: '鲜肉/水产/蔬果/蛋类等零售与批发',
icon: FileTextOutlined
}
]
const columns = [
{
title: '新闻动态',
title: '公司动态',
items: [
'标题新闻标题新闻标题新闻标题新闻标题...',
'标题新闻标题新闻标题新闻标题新闻标题...',
'标题新闻标题新闻标题新闻标题新闻标题...',
'标题新闻标题新闻标题新闻标题新闻标题...',
'标题新闻标题新闻标题新闻标题新闻标题...'
'桂乐淘官方网站上线公告',
'业务范围与资质信息已更新',
'合作咨询：欢迎留言，我们将尽快联系',
'合规提示：涉及许可项目以许可文件为准',
'更多动态敬请期待...'
]
},
{
title: '法律法规',
title: '行业资讯',
items: [
'标题新闻标题新闻标题新闻标题新闻标题...',
'标题新闻标题新闻标题新闻标题新闻标题...',
'标题新闻标题新闻标题新闻标题新闻标题...',
'标题新闻标题新闻标题新闻标题新闻标题...',
'标题新闻标题新闻标题新闻标题新闻标题...'
'生物基材料与绿色低碳趋势速览',
'食品流通与预包装食品合规要点',
'冷链与生鲜品质管理建议',
'更多资讯敬请期待...',
'更多资讯敬请期待...'
]
},
{
title: '权威发布',
title: '合规与公告',
items: [
'标题新闻标题新闻标题新闻标题新闻标题...',
'标题新闻标题新闻标题新闻标题新闻标题...',
'标题新闻标题新闻标题新闻标题新闻标题...',
'标题新闻标题新闻标题新闻标题新闻标题...',
'标题新闻标题新闻标题新闻标题新闻标题...'
'一般项目：凭营业执照依法自主开展经营活动',
'许可项目：依法须经批准的项目，经批准后方可开展',
'具体经营项目以相关部门批准文件或许可证件为准',
'更多公告敬请期待...',
'更多公告敬请期待...'
]
}
]
const cases = [
const compliance = [
{
title: '广西南院审理的印象刘三姐重整案...',
date: '2023-10-17',
to: '/articles',
image:
'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=900&q=80'
title: '经营范围',
desc: '一般项目/许可项目明细与说明',
to: '/products'
},
{
title: '广西南院审理的印象刘三姐重整案...',
date: '2023-10-17',
to: '/articles',
image:
'https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=900&q=80'
title: '注册地址',
desc: '南宁市江南区国凯大道东13号神冠胶原智库项目加工厂房',
to: '/products'
},
{
title: '广西南院审理的印象刘三姐重整案...',
date: '2023-10-17',
to: '/articles',
image:
'https://images.unsplash.com/photo-1521790797524-b2497295b8a0?auto=format&fit=crop&w=900&q=80'
title: '合作咨询',
desc: '提交需求与合作意向，我们尽快联系',
to: '/contact'
},
{
title: '广西南院审理的印象刘三姐重整案...',
date: '2023-10-17',
to: '/articles',
image:
'https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=900&q=80'
title: '更多内容',
desc: '后续可接入资讯、产品与资质展示',
to: '/contact'
}
]
function scrollToCompany() {
if (!import.meta.client) return
const el = document.querySelector('#company')
if (!el) return
el.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
</script>
<style scoped>
@@ -280,76 +320,78 @@ const cases = [
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.featured-image :deep(img) {
width: 100%;
height: 360px;
object-fit: cover;
.hero {
min-height: 360px;
background: url('https://oss.wsdns.cn/20260115/75690dea8f064ceda03246b198a7d710.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.featured-title {
font-size: 16px;
font-weight: 700;
color: rgba(0, 0, 0, 0.88);
.hero-inner {
height: 100%;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: center;
}
.featured-meta {
margin-top: 6px;
.hero-badge {
width: fit-content;
padding: 4px 10px;
border-radius: 9999px;
background: rgba(22, 163, 74, 0.12);
color: rgba(21, 128, 61, 0.95);
font-weight: 800;
letter-spacing: 0.12em;
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
}
.notice {
.hero-title {
margin-top: 14px;
font-size: 42px;
line-height: 1.1;
font-weight: 900;
color: rgba(0, 0, 0, 0.9);
}
.hero-sub {
margin-top: 12px;
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
line-height: 1.7;
}
.company {
height: 100%;
}
.notice-head {
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
background: linear-gradient(90deg, #c30000, #e11d48);
background: linear-gradient(90deg, #16a34a, #22c55e);
color: #fff;
}
.notice-title {
.panel-title {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 800;
}
.notice-more {
.panel-more {
color: rgba(255, 255, 255, 0.9);
font-size: 12px;
}
.notice-list {
padding: 10px 14px 14px;
}
.notice-item {
display: block;
padding: 10px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
text-decoration: none;
}
.notice-item:last-child {
border-bottom: 0;
}
.notice-item-title {
font-size: 13px;
font-weight: 700;
color: rgba(0, 0, 0, 0.85);
line-height: 1.35;
}
.notice-item-desc {
margin-top: 4px;
font-size: 12px;
color: rgba(0, 0, 0, 0.55);
line-height: 1.4;
.scope-item {
padding: 6px 0;
color: rgba(0, 0, 0, 0.75);
line-height: 1.6;
}
.section-pill {
@@ -358,7 +400,7 @@ const cases = [
justify-content: space-between;
padding: 10px 14px;
border-radius: 9999px;
background: linear-gradient(90deg, #c30000, #e11d48);
background: linear-gradient(90deg, #16a34a, #22c55e);
color: #fff;
font-weight: 800;
}
@@ -380,8 +422,13 @@ const cases = [
}
.guide-icon {
background: rgba(195, 0, 0, 0.1);
color: #c30000;
background: rgba(22, 163, 74, 0.12);
color: #16a34a;
}
.service-icon {
background: rgba(22, 163, 74, 0.12);
color: #16a34a;
}
.guide-title {
@@ -400,7 +447,7 @@ const cases = [
padding: 18px 16px;
background:
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22), transparent 55%),
linear-gradient(90deg, #c30000, #e11d48);
linear-gradient(90deg, #16a34a, #22c55e);
color: #fff;
}
@@ -418,7 +465,7 @@ const cases = [
.banner {
background:
radial-gradient(circle at 20% 30%, rgba(195, 0, 0, 0.18), transparent 55%),
radial-gradient(circle at 20% 30%, rgba(22, 163, 74, 0.18), transparent 55%),
linear-gradient(180deg, #ffffff, #f8fafc);
border-top: 1px solid rgba(0, 0, 0, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
@@ -428,7 +475,7 @@ const cases = [
text-align: center;
font-size: 28px;
font-weight: 900;
color: #c30000;
color: #15803d;
}
.section-title {
@@ -463,7 +510,7 @@ const cases = [
.column-more {
font-size: 12px;
color: rgba(195, 0, 0, 0.95);
color: rgba(21, 128, 61, 0.95);
text-decoration: none;
}
@@ -489,19 +536,23 @@ const cases = [
overflow: hidden;
}
.case-image :deep(img) {
width: 100%;
height: 160px;
object-fit: cover;
}
.case-title {
color: rgba(195, 0, 0, 0.95);
color: rgba(21, 128, 61, 0.95);
}
.case-meta {
.case-desc {
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
color: rgba(0, 0, 0, 0.55);
line-height: 1.6;
}
@media (max-width: 640px) {
.hero-inner {
padding: 22px;
}
.hero-title {
font-size: 34px;
}
}
</style>