541 lines
13 KiB
Vue
541 lines
13 KiB
Vue
<template>
|
||
<s-layout :bgStyle="{ color: '#f5f7fa' }" class="about-page" title="关于我们">
|
||
<u-card :show-head="false" margin="20rpx" padding="40rpx" border-radius="24rpx">
|
||
<template #body>
|
||
<view class="hero-content">
|
||
<u-avatar
|
||
v-if="appInfo.logo"
|
||
:src="sheep.$url.cdn(appInfo.logo)"
|
||
size="120"
|
||
bg-color="transparent"
|
||
class="hero-logo"
|
||
/>
|
||
<u-text
|
||
:text="displayName"
|
||
type="primary"
|
||
size="40rpx"
|
||
bold
|
||
color="#fff"
|
||
class="hero-name"
|
||
/>
|
||
<u-text
|
||
:text="`${displayName} 致力于用开源的数字化能力，帮助企业快速构建电商、营销与业务协同平台。`"
|
||
size="28rpx"
|
||
color="rgba(255,255,255,0.9)"
|
||
class="hero-slogan"
|
||
/>
|
||
<view class="hero-tags">
|
||
<u-tag
|
||
v-for="tag in heroTags"
|
||
:key="tag"
|
||
:text="tag"
|
||
bg-color="rgba(255,255,255,0.16)"
|
||
color="#fff"
|
||
size="mini"
|
||
shape="circle"
|
||
plain
|
||
/>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</u-card>
|
||
|
||
<u-row gutter="16" class="metrics-row">
|
||
<u-col span="4" v-for="metric in metrics" :key="metric.title">
|
||
<u-card :show-head="false" margin="0" padding="32rpx 24rpx" border-radius="20rpx">
|
||
<template #body>
|
||
<view class="metric-content">
|
||
<u-text
|
||
:text="metric.value"
|
||
size="48rpx"
|
||
bold
|
||
type="primary"
|
||
class="metric-value"
|
||
/>
|
||
<u-text
|
||
:text="metric.title"
|
||
size="26rpx"
|
||
bold
|
||
color="#303133"
|
||
class="metric-title"
|
||
/>
|
||
<u-text
|
||
:text="metric.desc"
|
||
size="22rpx"
|
||
color="#909399"
|
||
class="metric-desc"
|
||
/>
|
||
</view>
|
||
</template>
|
||
</u-card>
|
||
</u-col>
|
||
</u-row>
|
||
|
||
<u-card :show-head="false" margin="20rpx" padding="32rpx 28rpx" border-radius="24rpx">
|
||
<template #body>
|
||
<u-text text="我们提供什么" size="32rpx" bold color="#303133" class="section-title" />
|
||
<u-text text="围绕企业全链路经营的核心能力" size="24rpx" color="#909399" class="section-subtitle" />
|
||
|
||
<view class="capability-grid">
|
||
<u-card
|
||
v-for="item in capabilities"
|
||
:key="item.title"
|
||
:show-head="false"
|
||
margin="0 0 24rpx 0"
|
||
padding="28rpx"
|
||
border-radius="20rpx"
|
||
bg-color="linear-gradient(135deg, rgba(245, 247, 250, 1), rgba(245, 247, 250, 0.6))"
|
||
>
|
||
<template #body>
|
||
<u-text :text="item.title" size="30rpx" bold color="#2c3e50" class="capability-title" />
|
||
<u-text :text="item.desc" size="24rpx" color="#606266" class="capability-desc" />
|
||
<view class="capability-tags">
|
||
<u-tag
|
||
v-for="tag in item.tags"
|
||
:key="tag"
|
||
:text="tag"
|
||
bg-color="rgba(0, 85, 162, 0.08)"
|
||
color="var(--ui-BG-Main)"
|
||
size="mini"
|
||
shape="circle"
|
||
/>
|
||
</view>
|
||
</template>
|
||
</u-card>
|
||
</view>
|
||
</template>
|
||
</u-card>
|
||
|
||
<u-card :show-head="false" margin="20rpx" padding="32rpx 28rpx" border-radius="24rpx">
|
||
<template #body>
|
||
<u-text text="我们的理念" size="32rpx" bold color="#303133" class="section-title" />
|
||
|
||
<view class="value-list">
|
||
<u-card
|
||
v-for="item in values"
|
||
:key="item.title"
|
||
:show-head="false"
|
||
margin="0 0 24rpx 0"
|
||
padding="24rpx 26rpx"
|
||
border-radius="20rpx"
|
||
bg-color="rgba(0, 85, 162, 0.05)"
|
||
>
|
||
<template #body>
|
||
<u-text :text="item.title" size="28rpx" bold color="#2c3e50" class="value-title" />
|
||
<u-text :text="item.desc" size="24rpx" color="#606266" class="value-desc" />
|
||
</template>
|
||
</u-card>
|
||
</view>
|
||
</template>
|
||
</u-card>
|
||
|
||
<u-card :show-head="false" margin="20rpx" padding="32rpx 28rpx" border-radius="24rpx">
|
||
<template #body>
|
||
<u-text text="发展里程碑" size="32rpx" bold color="#303133" class="section-title" />
|
||
|
||
<view class="timeline">
|
||
<view
|
||
class="timeline-item"
|
||
v-for="(item, index) in milestones"
|
||
:key="item.year"
|
||
>
|
||
<view class="timeline-dot"></view>
|
||
<view class="timeline-content">
|
||
<u-text :text="item.year" size="28rpx" bold color="#2c3e50" class="timeline-year" />
|
||
<u-text :text="item.title" size="26rpx" bold color="#303133" class="timeline-title" />
|
||
<u-text :text="item.desc" size="24rpx" color="#606266" class="timeline-desc" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</u-card>
|
||
|
||
<u-card :show-head="false" margin="20rpx" padding="32rpx 28rpx" border-radius="24rpx">
|
||
<template #body>
|
||
<u-text text="联系与合作" size="32rpx" bold color="#303133" class="section-title" />
|
||
<u-text text="欢迎与我们探讨更多共赢的可能" size="24rpx" color="#909399" class="section-subtitle" />
|
||
|
||
<view class="contact-list">
|
||
<u-cell
|
||
v-for="item in contacts"
|
||
:key="item.label"
|
||
:title="item.label"
|
||
:label="item.value"
|
||
:is-link="true"
|
||
arrow-direction="right"
|
||
bg-color="rgba(245, 247, 250, 0.8)"
|
||
title-style="font-size: 26rpx; font-weight: 600; color: #2c3e50;"
|
||
label-style="font-size: 24rpx; color: #606266; word-break: break-all; line-height: 34rpx;"
|
||
@click="handleContact(item)"
|
||
class="contact-cell"
|
||
/>
|
||
</view>
|
||
</template>
|
||
</u-card>
|
||
|
||
<u-text
|
||
text="移动商城 始终坚持开源共享，与开发者和企业伙伴一起打造可持续的数字化生态。"
|
||
size="24rpx"
|
||
color="#909399"
|
||
align="center"
|
||
class="footer-hint"
|
||
/>
|
||
</s-layout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue';
|
||
import sheep from '@/sheep';
|
||
|
||
const appInfo = computed(() => sheep.$store('app').info || {});
|
||
const displayName = computed(() => appInfo.value.name || '移动商城');
|
||
|
||
const heroTags = [
|
||
'100% 开源可商用',
|
||
'支持多端统一交付',
|
||
'沉淀企业级最佳实践'
|
||
];
|
||
|
||
const metrics = [
|
||
{
|
||
title: '开源历程',
|
||
value: '7+',
|
||
desc: '年持续迭代与社区共建'
|
||
},
|
||
{
|
||
title: '行业方案',
|
||
value: '20+',
|
||
desc: '覆盖零售、制造、政企等场景'
|
||
},
|
||
{
|
||
title: '交付效率',
|
||
value: '30%',
|
||
desc: '平均缩短客户上线周期'
|
||
}
|
||
];
|
||
|
||
const capabilities = [
|
||
{
|
||
title: '产品矩阵',
|
||
desc: '以电商中台为核心，延展直播带货、会员营销、全渠道订单与履约管理。',
|
||
tags: ['商城交易', '营销裂变', '数据运营']
|
||
},
|
||
{
|
||
title: '技术架构',
|
||
desc: '基于 Spring Cloud Alibaba + Vue3 + UniApp，支持多租户、微服务与多端同源。',
|
||
tags: ['微服务', '多端一致', '低代码装修']
|
||
},
|
||
{
|
||
title: '服务体系',
|
||
desc: '提供从咨询、定制、交付到长期运营的全生命周期陪伴式服务。',
|
||
tags: ['数字化顾问', '驻场交付', '持续运营']
|
||
}
|
||
];
|
||
|
||
const values = [
|
||
{
|
||
title: '使命',
|
||
desc: '让每一家企业都能以更低成本、更快速度完成业务数字化升级。'
|
||
},
|
||
{
|
||
title: '愿景',
|
||
desc: '打造开放、可信赖、可持续的企业级数字商业生态。'
|
||
},
|
||
{
|
||
title: '价值观',
|
||
desc: '客户成功、极致体验、持续创新、坦诚协作。'
|
||
}
|
||
];
|
||
|
||
const milestones = [
|
||
{
|
||
year: '2018',
|
||
title: '开源起航',
|
||
desc: '发布首个电商项目原型，与社区开发者共同启动开源计划。'
|
||
},
|
||
{
|
||
year: '2020',
|
||
title: '企业级升级',
|
||
desc: '引入多租户、权限与大促能力，满足成长型企业核心诉求。'
|
||
},
|
||
{
|
||
year: '2022',
|
||
title: '多端一体',
|
||
desc: '统一 H5、App 与小程序技术栈，实现一次开发，多端交付。'
|
||
},
|
||
{
|
||
year: '2024',
|
||
title: '智能加速',
|
||
desc: '引入智能客服、营销推荐等 AI 能力，提升运营效率。'
|
||
},
|
||
{
|
||
year: '2025',
|
||
title: '生态共建',
|
||
desc: '联合生态伙伴共建行业方案，形成开放合作的生态体系。'
|
||
}
|
||
];
|
||
|
||
const contacts = [
|
||
{
|
||
label: '商务合作',
|
||
value: 'business@iocoder.cn',
|
||
type: 'email'
|
||
},
|
||
{
|
||
label: '客服热线',
|
||
value: '400-860-888',
|
||
type: 'phone',
|
||
actionValue: '400860888'
|
||
},
|
||
{
|
||
label: '开源仓库',
|
||
value: 'https://github.com/YunaiV/ruoyi-vue-pro',
|
||
type: 'link'
|
||
},
|
||
{
|
||
label: '文档中心',
|
||
value: 'https://doc.iocoder.cn',
|
||
type: 'link'
|
||
},
|
||
{
|
||
label: '办公地址',
|
||
value: '浙江省杭州市滨江区江南大道 777 号数字产业园',
|
||
type: 'text'
|
||
}
|
||
];
|
||
|
||
function handleContact(item) {
|
||
if (item.type === 'phone') {
|
||
const phoneNumber = item.actionValue || item.value.replace(/[^0-9]/g, '');
|
||
if (!phoneNumber) {
|
||
return;
|
||
}
|
||
uni.makePhoneCall({
|
||
phoneNumber,
|
||
fail: () => {
|
||
uni.setClipboardData({
|
||
data: item.value,
|
||
success: () => {
|
||
uni.showToast({ title: '号码已复制', icon: 'none' });
|
||
}
|
||
});
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (item.type === 'link') {
|
||
sheep.$router.go('/pages/public/webview', {
|
||
title: item.label,
|
||
url: encodeURIComponent(item.value)
|
||
});
|
||
uni.setClipboardData({
|
||
data: item.value,
|
||
success: () => {
|
||
uni.showToast({ title: '链接已复制', icon: 'none' });
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (item.type === 'text') {
|
||
uni.setClipboardData({
|
||
data: item.value,
|
||
success: () => {
|
||
uni.showToast({ title: '地址已复制', icon: 'none' });
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
|
||
uni.setClipboardData({
|
||
data: item.value,
|
||
success: () => {
|
||
uni.showToast({ title: '信息已复制', icon: 'none' });
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.about-page {
|
||
min-height: 100vh;
|
||
padding: 0;
|
||
background: #f5f7fa;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
// Hero card 渐变背景
|
||
:deep(.u-card) {
|
||
&:first-child {
|
||
background: linear-gradient(135deg, rgba(0, 85, 162, 0.95), rgba(0, 85, 162, 0.68));
|
||
box-shadow: 0 16rpx 36rpx rgba(0, 85, 162, 0.25);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.hero-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
text-align: left;
|
||
|
||
.hero-logo {
|
||
margin-bottom: 24rpx;
|
||
border-radius: 24rpx;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
padding: 16rpx;
|
||
}
|
||
|
||
.hero-name {
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.hero-slogan {
|
||
margin-bottom: 28rpx;
|
||
line-height: 42rpx;
|
||
}
|
||
|
||
.hero-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
}
|
||
}
|
||
|
||
.metrics-row {
|
||
margin: 20rpx;
|
||
}
|
||
|
||
.metric-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
text-align: left;
|
||
|
||
.metric-value {
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.metric-title {
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.metric-desc {
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.section-title {
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.section-subtitle {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.capability-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.capability-title {
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.capability-desc {
|
||
margin-bottom: 16rpx;
|
||
line-height: 38rpx;
|
||
}
|
||
|
||
.capability-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.value-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.value-title {
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.value-desc {
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
margin-left: 20rpx;
|
||
padding-left: 20rpx;
|
||
border-left: 2rpx solid rgba(0, 85, 162, 0.2);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 32rpx;
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
|
||
.timeline-dot {
|
||
position: absolute;
|
||
left: -31rpx;
|
||
top: 6rpx;
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
border-radius: 50%;
|
||
background: var(--ui-BG-Main);
|
||
box-shadow: 0 0 0 6rpx rgba(0, 85, 162, 0.15);
|
||
}
|
||
|
||
.timeline-content {
|
||
padding-left: 12rpx;
|
||
|
||
.timeline-year {
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.timeline-title {
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.timeline-desc {
|
||
line-height: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.contact-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.contact-cell {
|
||
border-radius: 18rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.footer-hint {
|
||
padding: 24rpx 36rpx 80rpx;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
@media (min-width: 750px) {
|
||
.metrics-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
|
||
.capability-grid,
|
||
.value-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24rpx;
|
||
}
|
||
}
|
||
</style>
|