yiqiuyang/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
yiqiuyang
2026-05-17 23:25:42 +08:00
parent e9a34e3599
commit 61602a736b
12 changed files with 3578 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

522
src/views/about/mobile.vue Normal file
View File

@ -0,0 +1,522 @@
<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>