523 lines
13 KiB
Vue
523 lines
13 KiB
Vue
<script setup>
|
||
import {ref, onMounted} from 'vue'
|
||
|
||
const loading = ref(true)
|
||
|
||
// 公司介绍
|
||
const companyInfo = {
|
||
name: '燃谷科技',
|
||
fullName: '燃谷科技（南京）有限公司',
|
||
founded: '2023年',
|
||
location: '南京鼓楼万谷硅巷',
|
||
introduction:
|
||
'燃谷科技成立于2023年，位于南京鼓楼万谷硅巷，秉承创新、质量和合作精神的低空领域技术创新公司，专注于低空安全监管、城市飞行服务和空间数据应用的企业。公司依托低空大数据、低空物联网、智能算法引擎、空间计算模型四个核心组件，自主研发数智底座，致力于物联网、空间计算领域，助力低空经济蓬勃发展。',
|
||
}
|
||
|
||
// 核心优势
|
||
const advantages = [
|
||
{
|
||
icon: 'DataAnalysis',
|
||
title: '低空大数据',
|
||
desc: '海量数据采集与分析能力',
|
||
color: '#1890ff',
|
||
},
|
||
{
|
||
icon: 'Connection',
|
||
title: '低空物联网',
|
||
desc: '全方位设备连接与管理',
|
||
color: '#52c41a',
|
||
},
|
||
{
|
||
icon: 'Cpu',
|
||
title: '智能算法引擎',
|
||
desc: 'AI驱动的智能决策系统',
|
||
color: '#fa8c16',
|
||
},
|
||
{
|
||
icon: 'Monitor',
|
||
title: '空间计算模型',
|
||
desc: '高精度空间数据处理',
|
||
color: '#722ed1',
|
||
},
|
||
]
|
||
|
||
// 资质证书
|
||
const certificates = [
|
||
{id: 1, name: '营业执照', image: '/static/images/main/1.png'},
|
||
{id: 2, name: 'ISO9001认证', image: '/static/images/main/2.png'},
|
||
{id: 3, name: '高新技术企业', image: '/static/images/main/3.png'},
|
||
{id: 4, name: '软件著作权', image: '/static/images/main/4.png'},
|
||
{id: 5, name: '专利证书1', image: '/static/images/main/5.png'},
|
||
{id: 6, name: '专利证书2', image: '/static/images/main/6.png'},
|
||
{id: 7, name: '专利证书3', image: '/static/images/main/7.png'},
|
||
{id: 8, name: '专利证书4', image: '/static/images/main/8.png'},
|
||
{id: 9, name: '专利证书5', image: '/static/images/main/9.png'},
|
||
{id: 10, name: '荣誉证书1', image: '/static/images/main/10.png'},
|
||
{id: 11, name: '荣誉证书2', image: '/static/images/main/11.png'},
|
||
{id: 12, name: '荣誉证书3', image: '/static/images/main/12.png'},
|
||
]
|
||
|
||
onMounted(() => {
|
||
setTimeout(() => {
|
||
loading.value = false
|
||
}, 500)
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="mobile-about" v-loading="loading">
|
||
<!-- 页面标题 -->
|
||
<div class="page-header">
|
||
<h1 class="page-title">关于我们</h1>
|
||
<p class="page-subtitle">了解燃谷科技</p>
|
||
</div>
|
||
|
||
<!-- 公司简介 -->
|
||
<div class="intro-section">
|
||
<div class="company-card">
|
||
<!-- Logo区域 -->
|
||
<div class="logo-area">
|
||
<img src="/static/images/main/rangu.png" alt="燃谷科技" class="company-logo" />
|
||
</div>
|
||
|
||
<!-- 公司信息 -->
|
||
<div class="info-area">
|
||
<h2 class="company-name">{{ companyInfo.fullName }}</h2>
|
||
|
||
<div class="info-tags">
|
||
<span class="tag">📅 {{ companyInfo.founded }}成立</span>
|
||
<span class="tag">📍 {{ companyInfo.location }}</span>
|
||
</div>
|
||
|
||
<div class="company-intro">
|
||
<p>{{ companyInfo.introduction }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心优势 -->
|
||
<div class="advantages-section">
|
||
<div class="section-header">
|
||
<h3 class="section-title">核心优势</h3>
|
||
<p class="section-desc">四大核心技术组件</p>
|
||
</div>
|
||
|
||
<div class="advantages-grid">
|
||
<div
|
||
v-for="(item, index) in advantages"
|
||
:key="index"
|
||
class="advantage-card"
|
||
:style="{borderLeftColor: item.color}"
|
||
>
|
||
<div class="advantage-icon" :style="{backgroundColor: item.color + '15'}">
|
||
<el-icon :size="24" :style="{color: item.color}">
|
||
<component :is="item.icon" />
|
||
</el-icon>
|
||
</div>
|
||
<div class="advantage-content">
|
||
<h4 class="advantage-title">{{ item.title }}</h4>
|
||
<p class="advantage-desc">{{ item.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 资质证书 -->
|
||
<div class="certificate-section">
|
||
<div class="section-header">
|
||
<h3 class="section-title">资质证书</h3>
|
||
<p class="section-desc">权威认证 · 实力见证</p>
|
||
</div>
|
||
|
||
<div class="certificate-grid">
|
||
<div
|
||
v-for="cert in certificates"
|
||
:key="cert.id"
|
||
class="certificate-item"
|
||
@click="$viewer.api({images: [cert.image]})"
|
||
>
|
||
<img :src="cert.image" :alt="cert.name" class="certificate-img" />
|
||
<div class="certificate-name">{{ cert.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 企业文化 -->
|
||
<div class="culture-section">
|
||
<div class="section-header">
|
||
<h3 class="section-title">企业文化</h3>
|
||
<p class="section-desc">创新 · 质量 · 合作</p>
|
||
</div>
|
||
|
||
<div class="culture-cards">
|
||
<div class="culture-card innovation">
|
||
<div class="culture-icon">💡</div>
|
||
<h4>创新</h4>
|
||
<p>持续技术创新<br />引领行业发展</p>
|
||
</div>
|
||
|
||
<div class="culture-card quality">
|
||
<div class="culture-icon">⭐</div>
|
||
<h4>质量</h4>
|
||
<p>精益求精<br />追求卓越品质</p>
|
||
</div>
|
||
|
||
<div class="culture-card cooperation">
|
||
<div class="culture-icon">🤝</div>
|
||
<h4>合作</h4>
|
||
<p>开放共赢<br />携手共创未来</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部CTA -->
|
||
<div class="cta-section">
|
||
<div class="cta-content">
|
||
<h3>携手共进，共创低空经济新未来</h3>
|
||
<p>期待与您的合作交流</p>
|
||
<el-button type="primary" round size="large" @click="$router.push('/link')">
|
||
联系我们
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {DataAnalysis, Connection, Cpu, Monitor} from '@element-plus/icons-vue'
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mobile-about {
|
||
min-height: 100%;
|
||
background-color: #f5f7fa;
|
||
padding-bottom: 20px;
|
||
|
||
.page-header {
|
||
background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
|
||
padding: 24px 16px;
|
||
color: #ffffff;
|
||
|
||
.page-title {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
margin: 0 0 8px 0;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.page-subtitle {
|
||
font-size: 13px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
// 公司简介
|
||
.intro-section {
|
||
padding: 16px;
|
||
|
||
.company-card {
|
||
background-color: #ffffff;
|
||
border-radius: 12px; /* no */
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
|
||
|
||
.logo-area {
|
||
width: 100%;
|
||
height: 200px; /* no */
|
||
background: linear-gradient(135deg, #f0f5ff 0%, #e6f7ff 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px; /* no */
|
||
|
||
.company-logo {
|
||
max-width: 80%;
|
||
max-height: 160px; /* no */
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
|
||
.info-area {
|
||
padding: 20px; /* no */
|
||
|
||
.company-name {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
margin: 0 0 12px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.info-tags {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 10px; /* no */
|
||
margin-bottom: 16px; /* no */
|
||
flex-wrap: wrap;
|
||
|
||
.tag {
|
||
display: inline-block;
|
||
padding: 4px 12px; /* no */
|
||
background-color: #f5f7fa;
|
||
color: #666666;
|
||
font-size: 12px;
|
||
border-radius: 14px; /* no */
|
||
}
|
||
}
|
||
|
||
.company-intro {
|
||
p {
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
color: #555555;
|
||
text-indent: 2em;
|
||
margin: 0;
|
||
text-align: justify;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 核心优势
|
||
.advantages-section {
|
||
padding: 0 16px 16px;
|
||
|
||
.section-header {
|
||
margin-bottom: 16px; /* no */
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
margin: 0 0 6px 0;
|
||
}
|
||
|
||
.section-desc {
|
||
font-size: 13px;
|
||
color: #999999;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.advantages-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px; /* no */
|
||
|
||
.advantage-card {
|
||
background-color: #ffffff;
|
||
border-radius: 10px; /* no */
|
||
padding: 16px; /* no */
|
||
border-left: 3px solid;
|
||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* no */
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.97);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* no */
|
||
}
|
||
|
||
.advantage-icon {
|
||
width: 48px; /* no */
|
||
height: 48px; /* no */
|
||
border-radius: 10px; /* no */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10px; /* no */
|
||
}
|
||
|
||
.advantage-content {
|
||
.advantage-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
margin: 0 0 6px 0;
|
||
}
|
||
|
||
.advantage-desc {
|
||
font-size: 12px;
|
||
color: #666666;
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 资质证书
|
||
.certificate-section {
|
||
padding: 0 16px 16px;
|
||
|
||
.section-header {
|
||
margin-bottom: 16px; /* no */
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
margin: 0 0 6px 0;
|
||
}
|
||
|
||
.section-desc {
|
||
font-size: 13px;
|
||
color: #999999;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.certificate-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px; /* no */
|
||
|
||
.certificate-item {
|
||
background-color: #ffffff;
|
||
border-radius: 8px; /* no */
|
||
overflow: hidden;
|
||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); /* no */
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* no */
|
||
}
|
||
|
||
.certificate-img {
|
||
width: 100%;
|
||
height: 200px; /* no */
|
||
object-fit: contain;
|
||
background-color: #fafafa;
|
||
padding: 8px; /* no */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.certificate-name {
|
||
padding: 8px; /* no */
|
||
font-size: 11px;
|
||
color: #666666;
|
||
text-align: center;
|
||
background-color: #fafafa;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 企业文化
|
||
.culture-section {
|
||
padding: 0 16px 16px;
|
||
|
||
.section-header {
|
||
margin-bottom: 16px; /* no */
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
margin: 0 0 6px 0;
|
||
}
|
||
|
||
.section-desc {
|
||
font-size: 13px;
|
||
color: #999999;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.culture-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 10px; /* no */
|
||
|
||
.culture-card {
|
||
background-color: #ffffff;
|
||
border-radius: 10px; /* no */
|
||
padding: 16px 12px; /* no */
|
||
text-align: center;
|
||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* no */
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* no */
|
||
}
|
||
|
||
.culture-icon {
|
||
font-size: 32px;
|
||
margin-bottom: 8px; /* no */
|
||
}
|
||
|
||
h4 {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
margin: 0 0 6px 0;
|
||
}
|
||
|
||
p {
|
||
font-size: 11px;
|
||
color: #666666;
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
}
|
||
|
||
&.innovation {
|
||
border-top: 3px solid #1890ff;
|
||
}
|
||
|
||
&.quality {
|
||
border-top: 3px solid #faad14;
|
||
}
|
||
|
||
&.cooperation {
|
||
border-top: 3px solid #52c41a;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 底部CTA
|
||
.cta-section {
|
||
margin: 16px; /* no */
|
||
background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
|
||
border-radius: 12px; /* no */
|
||
padding: 32px 20px; /* no */
|
||
text-align: center;
|
||
|
||
.cta-content {
|
||
h3 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
margin: 0 0 10px 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
p {
|
||
font-size: 13px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
margin: 0 0 20px 0;
|
||
}
|
||
|
||
.el-button {
|
||
width: 180px; /* no */
|
||
height: 44px; /* no */
|
||
font-size: 15px;
|
||
background-color: #ffffff !important;
|
||
color: #081314 !important;
|
||
border: none !important;
|
||
|
||
&:active {
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|