赵忠林
1d01294f93
- 移除首页业务板块服务卡片区域 - 为面板组件添加固定高度样式 - 更新底部关注我们区域的小程序二维码图片 - 将小程序描述从公众号/小程序调整为仅小程序 - 集成CMS系统获取网站备案号信息 - 优化头部品牌栏布局，使用固定Logo图片替换动态内容 - 移除品牌标题和副标题的显示 - 调整Logo样式移除宽度限制仅保留高度约束
560 lines
14 KiB
Vue
560 lines
14 KiB
Vue
<template>
|
||
<main class="home">
|
||
<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 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 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="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>
|
||
</div>
|
||
|
||
<!-- <div class="mt-6 grid grid-cols-12 gap-6">-->
|
||
<!-- <div class="col-span-12 lg:col-span-7">-->
|
||
<!-- <div class="panel">-->
|
||
<!-- <div class="section-pill">-->
|
||
<!-- <span class="pill-left">-->
|
||
<!-- <AppstoreOutlined />-->
|
||
<!-- 业务板块-->
|
||
<!-- </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="s in services"-->
|
||
<!-- :key="s.title"-->
|
||
<!-- class="guide-card service-card"-->
|
||
<!-- :bordered="true"-->
|
||
<!-- hoverable-->
|
||
<!-- @click="navigateTo('/products')"-->
|
||
<!-- >-->
|
||
<!-- <a-space>-->
|
||
<!-- <a-avatar :size="44" class="guide-icon service-icon">-->
|
||
<!-- <component :is="s.icon" />-->
|
||
<!-- </a-avatar>-->
|
||
<!-- <div>-->
|
||
<!-- <div class="guide-title">{{ s.title }}</div>-->
|
||
<!-- <div class="guide-desc">{{ s.desc }}</div>-->
|
||
<!-- </div>-->
|
||
<!-- </a-space>-->
|
||
<!-- </a-card>-->
|
||
<!-- </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>
|
||
</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 & UPDATES</div>
|
||
</div>
|
||
|
||
<div class="mt-6 grid grid-cols-12 gap-6">
|
||
<div v-for="c in columns" :key="c.title" class="col-span-12 lg:col-span-4">
|
||
<div class="panel">
|
||
<div class="column-head">
|
||
<div class="column-title">{{ c.title }}</div>
|
||
<a href="#" class="column-more" @click.prevent>更多 +</a>
|
||
</div>
|
||
<div class="column-list">
|
||
<a
|
||
v-for="it in c.items"
|
||
:key="it"
|
||
class="column-item"
|
||
href="#"
|
||
@click.prevent
|
||
>
|
||
{{ it }}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-10">
|
||
<div class="section-title">
|
||
<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 compliance"
|
||
:key="c.title"
|
||
hoverable
|
||
class="case-card col-span-12 sm:col-span-6 lg:col-span-3"
|
||
@click="navigateTo(c.to)"
|
||
>
|
||
<a-typography-title :level="5" class="!mb-2 case-title">{{ c.title }}</a-typography-title>
|
||
<div class="case-desc">{{ c.desc }}</div>
|
||
</a-card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {
|
||
AppstoreOutlined,
|
||
FileTextOutlined,
|
||
IdcardOutlined,
|
||
PhoneOutlined,
|
||
SafetyCertificateOutlined,
|
||
ShopOutlined
|
||
} from '@ant-design/icons-vue'
|
||
import { usePageSeo } from '@/composables/usePageSeo'
|
||
import { COMPANY } from '@/config/company'
|
||
|
||
usePageSeo({
|
||
title: '首页',
|
||
description:
|
||
'桂乐淘：生物基材料技术研发、技术服务与食品/农产品流通服务。提供经营范围与资质信息查询及合作咨询入口。',
|
||
path: '/'
|
||
})
|
||
|
||
function splitScope(text: string) {
|
||
return text
|
||
.split(/[；;]+/g)
|
||
.map((s) => s.trim())
|
||
.filter(Boolean)
|
||
.map((s) => s.replace(/[。.]$/, '').trim())
|
||
}
|
||
|
||
const generalScopeItems = computed(() => splitScope(COMPANY.scope.general))
|
||
const licensedScopeItems = computed(() => splitScope(COMPANY.scope.licensed))
|
||
|
||
const services = [
|
||
{
|
||
title: '生物基材料技术研发',
|
||
desc: '面向应用场景开展研发与技术支持',
|
||
icon: SafetyCertificateOutlined
|
||
},
|
||
{
|
||
title: '技术服务与技术推广',
|
||
desc: '技术开发/咨询/交流/转让/推广',
|
||
icon: AppstoreOutlined
|
||
},
|
||
{
|
||
title: '食品销售（预包装）',
|
||
desc: '含保健食品（预包装）销售等',
|
||
icon: ShopOutlined
|
||
},
|
||
{
|
||
title: '农产品与生鲜流通',
|
||
desc: '鲜肉/水产/蔬果/蛋类等零售与批发',
|
||
icon: FileTextOutlined
|
||
}
|
||
]
|
||
|
||
const columns = [
|
||
{
|
||
title: '公司动态',
|
||
items: [
|
||
'桂乐淘官方网站上线公告',
|
||
'业务范围与资质信息已更新',
|
||
'合作咨询：欢迎留言，我们将尽快联系',
|
||
'合规提示：涉及许可项目以许可文件为准',
|
||
'更多动态敬请期待...'
|
||
]
|
||
},
|
||
{
|
||
title: '行业资讯',
|
||
items: [
|
||
'生物基材料与绿色低碳趋势速览',
|
||
'食品流通与预包装食品合规要点',
|
||
'冷链与生鲜品质管理建议',
|
||
'更多资讯敬请期待...',
|
||
'更多资讯敬请期待...'
|
||
]
|
||
},
|
||
{
|
||
title: '合规与公告',
|
||
items: [
|
||
'一般项目：凭营业执照依法自主开展经营活动',
|
||
'许可项目：依法须经批准的项目，经批准后方可开展',
|
||
'具体经营项目以相关部门批准文件或许可证件为准',
|
||
'更多公告敬请期待...',
|
||
'更多公告敬请期待...'
|
||
]
|
||
}
|
||
]
|
||
|
||
const compliance = [
|
||
{
|
||
title: '经营范围',
|
||
desc: '一般项目/许可项目明细与说明',
|
||
to: '/products'
|
||
},
|
||
{
|
||
title: '注册地址',
|
||
desc: '南宁市江南区国凯大道东13号神冠胶原智库项目加工厂房',
|
||
to: '/products'
|
||
},
|
||
{
|
||
title: '合作咨询',
|
||
desc: '提交需求与合作意向，我们尽快联系',
|
||
to: '/contact'
|
||
},
|
||
{
|
||
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>
|
||
.home {
|
||
background: #f4f6f8;
|
||
}
|
||
|
||
.panel {
|
||
background: #fff;
|
||
height: 360px;
|
||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.hero {
|
||
min-height: 360px;
|
||
background: url('https://oss.wsdns.cn/20260115/75690dea8f064ceda03246b198a7d710.jpg');
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.hero-inner {
|
||
height: 100%;
|
||
padding: 28px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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%;
|
||
}
|
||
|
||
.panel-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 14px;
|
||
background: linear-gradient(90deg, #16a34a, #22c55e);
|
||
color: #fff;
|
||
}
|
||
|
||
.panel-title {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.panel-more {
|
||
color: rgba(255, 255, 255, 0.9);
|
||
font-size: 12px;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.scope-item {
|
||
padding: 6px 0;
|
||
color: rgba(0, 0, 0, 0.75);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.section-pill {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 14px;
|
||
border-radius: 9999px;
|
||
background: linear-gradient(90deg, #16a34a, #22c55e);
|
||
color: #fff;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.pill-left {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.pill-right {
|
||
font-weight: 700;
|
||
font-size: 12px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.guide-card {
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.guide-icon {
|
||
background: rgba(22, 163, 74, 0.12);
|
||
color: #16a34a;
|
||
}
|
||
|
||
.service-icon {
|
||
background: rgba(22, 163, 74, 0.12);
|
||
color: #16a34a;
|
||
}
|
||
|
||
.guide-title {
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
color: rgba(0, 0, 0, 0.88);
|
||
}
|
||
|
||
.guide-desc {
|
||
margin-top: 3px;
|
||
font-size: 12px;
|
||
color: rgba(0, 0, 0, 0.55);
|
||
}
|
||
|
||
.login-hero {
|
||
padding: 18px 16px;
|
||
background:
|
||
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22), transparent 55%),
|
||
linear-gradient(90deg, #16a34a, #22c55e);
|
||
color: #fff;
|
||
}
|
||
|
||
.login-hero-title {
|
||
font-size: 18px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.login-hero-sub {
|
||
margin-top: 6px;
|
||
font-size: 12px;
|
||
letter-spacing: 0.12em;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.banner {
|
||
background:
|
||
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);
|
||
}
|
||
|
||
.banner-title {
|
||
text-align: center;
|
||
font-size: 28px;
|
||
font-weight: 900;
|
||
color: #15803d;
|
||
}
|
||
|
||
.section-title {
|
||
text-align: center;
|
||
}
|
||
|
||
.section-title-main {
|
||
font-size: 18px;
|
||
font-weight: 900;
|
||
color: rgba(0, 0, 0, 0.88);
|
||
}
|
||
|
||
.section-title-sub {
|
||
margin-top: 4px;
|
||
font-size: 12px;
|
||
letter-spacing: 0.12em;
|
||
color: rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
.column-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 14px 14px 10px;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.column-title {
|
||
font-weight: 900;
|
||
color: rgba(0, 0, 0, 0.88);
|
||
}
|
||
|
||
.column-more {
|
||
font-size: 12px;
|
||
color: rgba(21, 128, 61, 0.95);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.column-list {
|
||
padding: 10px 14px 14px;
|
||
}
|
||
|
||
.column-item {
|
||
display: block;
|
||
padding: 8px 0;
|
||
font-size: 13px;
|
||
color: rgba(0, 0, 0, 0.78);
|
||
text-decoration: none;
|
||
border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.column-item:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.case-card {
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.case-title {
|
||
color: rgba(21, 128, 61, 0.95);
|
||
}
|
||
|
||
.case-desc {
|
||
font-size: 12px;
|
||
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>
|