Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 61602a736b |
14
src/home.vue
14
src/home.vue
@ -1,9 +1,15 @@
|
||||
<script setup>
|
||||
import Header from './views/layout/pc/header/index.vue'
|
||||
import Footer from './views/layout/pc/footer/index.vue'
|
||||
import {onMounted, ref, watch} from 'vue'
|
||||
import MobileLayout from './views/layout/mobile/index.vue'
|
||||
import {onMounted, ref, watch, computed} from 'vue'
|
||||
import {visit} from '@/api/index'
|
||||
import axios from 'axios'
|
||||
import {useResponsive} from '@/utils/responsive'
|
||||
|
||||
const {isMobile, windowWidth} = useResponsive()
|
||||
|
||||
console.log('isMobile===>', isMobile.value)
|
||||
|
||||
const referrer = ref(document.referrer || '')
|
||||
const ipUrl = ref('')
|
||||
@ -50,7 +56,11 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="app">
|
||||
<!-- APP端布局 -->
|
||||
<MobileLayout v-if="isMobile" />
|
||||
|
||||
<!-- PC端布局（保持不变） -->
|
||||
<div v-else id="app">
|
||||
<Header id="header" />
|
||||
<router-view id="main" v-slot="{Component, title}">
|
||||
<keep-alive include="New">
|
||||
|
||||
@ -1,6 +1,82 @@
|
||||
import {createWebHashHistory, createRouter} from 'vue-router'
|
||||
import {isMobile} from '@/utils/responsive'
|
||||
|
||||
import HomeView from '@/views/homepage/index.vue'
|
||||
// 动态加载首页组件
|
||||
const HomeView = () => {
|
||||
return new Promise((resolve) => {
|
||||
if (isMobile.value) {
|
||||
import('@/views/homepage/mobile.vue').then(resolve)
|
||||
} else {
|
||||
import('@/views/homepage/index.vue').then(resolve)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 动态加载新闻中心组件
|
||||
const NewsView = () => {
|
||||
return new Promise((resolve) => {
|
||||
if (isMobile.value) {
|
||||
import('@/views/news/mobile.vue').then(resolve)
|
||||
} else {
|
||||
import('@/views/news/index.vue').then(resolve)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 动态加载联系我们组件
|
||||
const LinkView = () => {
|
||||
return new Promise((resolve) => {
|
||||
if (isMobile.value) {
|
||||
import('@/views/link/mobile.vue').then(resolve)
|
||||
} else {
|
||||
import('@/views/link/index.vue').then(resolve)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 动态加载关于我们组件
|
||||
const AboutView = () => {
|
||||
return new Promise((resolve) => {
|
||||
if (isMobile.value) {
|
||||
import('@/views/about/mobile.vue').then(resolve)
|
||||
} else {
|
||||
import('@/views/about/index.vue').then(resolve)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 动态加载硬件系统组件
|
||||
const HardwareSystemView = () => {
|
||||
return new Promise((resolve) => {
|
||||
if (isMobile.value) {
|
||||
import('@/views/product/hardwareSystem/mobile.vue').then(resolve)
|
||||
} else {
|
||||
import('@/views/product/hardwareSystem.vue').then(resolve)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 动态加载软件系统组件
|
||||
const SoftwareSystemView = () => {
|
||||
return new Promise((resolve) => {
|
||||
if (isMobile.value) {
|
||||
import('@/views/product/softwareSystem/mobile.vue').then(resolve)
|
||||
} else {
|
||||
import('@/views/product/softwareSystem.vue').then(resolve)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 动态加载产品详情组件
|
||||
const ProductDetailView = () => {
|
||||
return new Promise((resolve) => {
|
||||
if (isMobile.value) {
|
||||
import('@/views/product/detail/mobile.vue').then(resolve)
|
||||
} else {
|
||||
import('@/views/product/detail.vue').then(resolve)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const routes = [
|
||||
// ============================================ 首页 ============================================
|
||||
@ -10,7 +86,7 @@ const routes = [
|
||||
{
|
||||
path: '/product/hardwareSystem',
|
||||
name: 'HardwareSystem',
|
||||
component: () => import('@/views/product/hardwareSystem.vue'),
|
||||
component: HardwareSystemView,
|
||||
meta: {
|
||||
title: '低空监管体系',
|
||||
},
|
||||
@ -18,7 +94,7 @@ const routes = [
|
||||
{
|
||||
path: '/product/softwareSystem',
|
||||
name: 'SoftwareSystem',
|
||||
component: () => import('@/views/product/softwareSystem.vue'),
|
||||
component: SoftwareSystemView,
|
||||
meta: {
|
||||
title: '低空远程识别设备',
|
||||
},
|
||||
@ -26,76 +102,39 @@ const routes = [
|
||||
{
|
||||
path: '/product/detail',
|
||||
name: 'ProductDetail',
|
||||
component: () => import('@/views/product/detail.vue'),
|
||||
component: ProductDetailView,
|
||||
meta: {
|
||||
title: '产品详情',
|
||||
},
|
||||
},
|
||||
|
||||
// ============================================ 服务与支撑 ============================================
|
||||
{
|
||||
path: '/services',
|
||||
name: 'Services',
|
||||
component: () => import('@/views/services/index.vue'),
|
||||
meta: {
|
||||
title: '服务与支撑',
|
||||
},
|
||||
},
|
||||
|
||||
// ============================================ 新闻中心 ============================================
|
||||
{
|
||||
path: '/news',
|
||||
name: 'News',
|
||||
component: () => import('@/views/news/index.vue'),
|
||||
component: NewsView,
|
||||
meta: {
|
||||
title: '新闻中心',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/news/detail',
|
||||
name: 'NewsDetail',
|
||||
component: () => import('@/views/news/detail.vue'),
|
||||
meta: {
|
||||
title: '新闻详情',
|
||||
},
|
||||
},
|
||||
|
||||
// ============================================ 关于我们 ============================================
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
component: () => import('@/views/about/index.vue'),
|
||||
meta: {
|
||||
title: '关于我们',
|
||||
},
|
||||
},
|
||||
|
||||
// ============================================ 联系我们 ============================================
|
||||
{
|
||||
path: '/link',
|
||||
name: 'Link',
|
||||
component: () => import('@/views/link/index.vue'),
|
||||
component: LinkView,
|
||||
meta: {
|
||||
title: '联系我们',
|
||||
},
|
||||
},
|
||||
|
||||
// ============================================ 下载中心 ============================================
|
||||
// ============================================ 关于我们 ============================================
|
||||
{
|
||||
path: '/download',
|
||||
name: 'Download',
|
||||
component: () => import('@/views/download/index.vue'),
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
component: AboutView,
|
||||
meta: {
|
||||
title: '下载中心',
|
||||
},
|
||||
},
|
||||
// ============================================ 管理页面 ============================================
|
||||
{
|
||||
path: '/manager',
|
||||
name: 'Manager',
|
||||
component: () => import('@/views/manager/index.vue'),
|
||||
meta: {
|
||||
title: '管理中心',
|
||||
title: '关于我们',
|
||||
},
|
||||
},
|
||||
]
|
||||
@ -105,20 +144,4 @@ const router = createRouter({
|
||||
routes,
|
||||
})
|
||||
|
||||
// router.beforeEach(async (to, from, next) => {
|
||||
// const {useNavStore} = await import('@/store/nav.js')
|
||||
// const navStore = useNavStore()
|
||||
// navStore.setLoad(true)
|
||||
// next()
|
||||
// })
|
||||
|
||||
router.afterEach((to, from) => {
|
||||
// 只有路径变化时才滚动到顶部
|
||||
if (to.path !== from.path) {
|
||||
requestAnimationFrame(() => {
|
||||
window.scrollTo({top: 0, behavior: 'instant'})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
122
src/utils/rem.js
122
src/utils/rem.js
@ -1,38 +1,136 @@
|
||||
// rem等比适配配置
|
||||
// 基准大小
|
||||
const baseSize = 16
|
||||
// 设计稿宽度
|
||||
const designWidth = 1920
|
||||
// PC端设计稿宽度
|
||||
const pcDesignWidth = 1920
|
||||
// 移动端设计稿宽度
|
||||
const mobileDesignWidth = 375
|
||||
// 最大缩放比例
|
||||
const maxScale = 2
|
||||
// 移动端断点（与 responsive.js 保持一致）
|
||||
const MOBILE_BREAKPOINT = 1000
|
||||
|
||||
// 判断是否为移动端
|
||||
function isMobile() {
|
||||
const result = window.innerWidth < MOBILE_BREAKPOINT
|
||||
console.log('📱 [rem.js] isMobile() 检测:', {
|
||||
windowWidth: window.innerWidth,
|
||||
breakpoint: MOBILE_BREAKPOINT,
|
||||
isMobile: result,
|
||||
timestamp: new Date().toLocaleTimeString()
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
// 设置 rem 函数
|
||||
function setRem() {
|
||||
// 当前页面宽度相对于设计稿宽度的缩放比例
|
||||
const scale = document.documentElement.clientWidth / designWidth
|
||||
// 设置页面根节点字体大小（最高放大比例为maxScale）
|
||||
document.documentElement.style.fontSize = baseSize * Math.min(scale, maxScale) + 'px'
|
||||
const clientWidth = document.documentElement.clientWidth
|
||||
const mobile = isMobile()
|
||||
|
||||
let designWidth, scale, minScale, finalFontSize
|
||||
|
||||
if (mobile) {
|
||||
// 移动端：基于 375px 设计稿
|
||||
designWidth = mobileDesignWidth
|
||||
// 为了避免字体过小，限制最小缩放比例
|
||||
minScale = 0.85
|
||||
scale = Math.max(clientWidth / designWidth, minScale)
|
||||
|
||||
console.log('📱 [rem.js] 移动端模式 setRem():', {
|
||||
clientWidth: `${clientWidth}px`,
|
||||
designWidth: `${designWidth}px (移动端)`,
|
||||
rawScale: (clientWidth / designWidth).toFixed(4),
|
||||
minScale: minScale,
|
||||
finalScale: scale.toFixed(4),
|
||||
baseSize: `${baseSize}px`,
|
||||
calculatedFontSize: `${(baseSize * scale).toFixed(2)}px`,
|
||||
timestamp: new Date().toLocaleTimeString()
|
||||
})
|
||||
} else {
|
||||
// PC端：基于 1920px 设计稿
|
||||
designWidth = pcDesignWidth
|
||||
scale = Math.min(clientWidth / designWidth, maxScale)
|
||||
|
||||
console.log('💻 [rem.js] PC端模式 setRem():', {
|
||||
clientWidth: `${clientWidth}px`,
|
||||
designWidth: `${designWidth}px (PC端)`,
|
||||
rawScale: (clientWidth / designWidth).toFixed(4),
|
||||
maxScale: maxScale,
|
||||
finalScale: scale.toFixed(4),
|
||||
baseSize: `${baseSize}px`,
|
||||
calculatedFontSize: `${(baseSize * scale).toFixed(2)}px`,
|
||||
timestamp: new Date().toLocaleTimeString()
|
||||
})
|
||||
}
|
||||
|
||||
// 设置页面根节点字体大小
|
||||
finalFontSize = baseSize * scale
|
||||
document.documentElement.style.fontSize = finalFontSize + 'px'
|
||||
|
||||
console.log('✅ [rem.js] 最终设置:', {
|
||||
'document.documentElement.style.fontSize': `${finalFontSize.toFixed(2)}px`,
|
||||
'实际计算值': `1rem = ${finalFontSize.toFixed(2)}px`,
|
||||
'示例换算': `10rem = ${(10 * finalFontSize).toFixed(2)}px, 20rem = ${(20 * finalFontSize).toFixed(2)}px`
|
||||
})
|
||||
}
|
||||
|
||||
// 根据设计稿尺寸计算实际尺寸
|
||||
export function fontSize(res) {
|
||||
const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
|
||||
if (!clientWidth) return res
|
||||
const scale = clientWidth / designWidth
|
||||
return res * Math.min(scale, maxScale)
|
||||
|
||||
let designWidth
|
||||
const mobile = isMobile()
|
||||
|
||||
if (mobile) {
|
||||
designWidth = mobileDesignWidth
|
||||
} else {
|
||||
designWidth = pcDesignWidth
|
||||
}
|
||||
|
||||
const rawScale = clientWidth / designWidth
|
||||
const finalScale = mobile ? Math.max(rawScale, 0.85) : Math.min(rawScale, maxScale)
|
||||
const result = res * finalScale
|
||||
|
||||
console.log('📐 [rem.js] fontSize() 计算:', {
|
||||
input: `${res}px`,
|
||||
clientWidth: `${clientWidth}px`,
|
||||
mode: mobile ? '移动端' : 'PC端',
|
||||
designWidth: `${designWidth}px`,
|
||||
rawScale: rawScale.toFixed(4),
|
||||
finalScale: finalScale.toFixed(4),
|
||||
output: `${result.toFixed(2)}px`
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
// 初始化rem配置
|
||||
export function initRem() {
|
||||
console.log('🚀 [rem.js] initRem() 初始化:', {
|
||||
baseSize: `${baseSize}px`,
|
||||
pcDesignWidth: `${pcDesignWidth}px`,
|
||||
mobileDesignWidth: `${mobileDesignWidth}px`,
|
||||
MOBILE_BREAKPOINT: `${MOBILE_BREAKPOINT}px`,
|
||||
maxScale: maxScale,
|
||||
currentWindowWidth: `${window.innerWidth}px`,
|
||||
currentMode: window.innerWidth < MOBILE_BREAKPOINT ? '📱 移动端' : '💻 PC端'
|
||||
})
|
||||
|
||||
setRem()
|
||||
|
||||
// 改变窗口大小时重新设置 rem
|
||||
window.addEventListener('resize', setRem)
|
||||
window.addEventListener('resize', () => {
|
||||
console.log('🔄 [rem.js] 窗口resize事件触发:', {
|
||||
newWidth: `${window.innerWidth}px`,
|
||||
timestamp: new Date().toLocaleTimeString()
|
||||
})
|
||||
setRem()
|
||||
})
|
||||
}
|
||||
|
||||
// 移除rem监听（可选，用于清理）
|
||||
export function removeRemListener() {
|
||||
console.log('❌ [rem.js] removeRemListener() 移除监听')
|
||||
window.removeEventListener('resize', setRem)
|
||||
}
|
||||
|
||||
// 自动初始化（如果需要在导入时自动初始化）
|
||||
// initRem()
|
||||
|
||||
43
src/utils/responsive.js
Normal file
43
src/utils/responsive.js
Normal file
@ -0,0 +1,43 @@
|
||||
import {ref, onMounted, onUnmounted, computed} from 'vue'
|
||||
|
||||
const MOBILE_BREAKPOINT = 1000
|
||||
|
||||
const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1024)
|
||||
|
||||
console.log('windowWidth===>', windowWidth.value)
|
||||
|
||||
const isMobile = computed(() => windowWidth.value < MOBILE_BREAKPOINT)
|
||||
|
||||
function updateWindowSize() {
|
||||
if (typeof window !== 'undefined') {
|
||||
windowWidth.value = window.innerWidth
|
||||
}
|
||||
}
|
||||
|
||||
let listenersCount = 0
|
||||
|
||||
export function useResponsive() {
|
||||
onMounted(() => {
|
||||
if (listenersCount === 0) {
|
||||
updateWindowSize()
|
||||
window.addEventListener('resize', updateWindowSize)
|
||||
}
|
||||
listenersCount++
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
listenersCount--
|
||||
if (listenersCount <= 0) {
|
||||
listenersCount = 0
|
||||
window.removeEventListener('resize', updateWindowSize)
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
isMobile,
|
||||
windowWidth,
|
||||
MOBILE_BREAKPOINT,
|
||||
}
|
||||
}
|
||||
|
||||
export {isMobile, windowWidth, MOBILE_BREAKPOINT}
|
||||
522
src/views/about/mobile.vue
Normal file
522
src/views/about/mobile.vue
Normal 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>
|
||||
341
src/views/homepage/mobile.vue
Normal file
341
src/views/homepage/mobile.vue
Normal file
@ -0,0 +1,341 @@
|
||||
<script setup>
|
||||
import {ref, onMounted} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
import {cryptoEncrypt} from '@/utils/cryptojs'
|
||||
|
||||
const router = useRouter()
|
||||
const videoLoaded = ref(true)
|
||||
const list = [...window.softwareSystemList, ...window.hardwareSystemList]
|
||||
|
||||
onMounted(() => {
|
||||
console.log('当前是手机端===>',)
|
||||
})
|
||||
|
||||
function onVideoLoaded() {
|
||||
videoLoaded.value = false
|
||||
}
|
||||
|
||||
function toUrl(item) {
|
||||
router.push({
|
||||
path: '/product/detail',
|
||||
query: {type: cryptoEncrypt(JSON.stringify(item))},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mobile-homepage" v-loading="videoLoaded">
|
||||
<!-- Banner区域 -->
|
||||
<div class="banner-section">
|
||||
<video autoplay muted loop @loadeddata="onVideoLoaded" class="banner-video">
|
||||
<source src="/static/video/display.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="banner-overlay">
|
||||
<h1 class="banner-title">低空智能监管解决方案</h1>
|
||||
<p class="banner-subtitle">专业 · 创新 · 可靠</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品体系 -->
|
||||
<div class="product-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">产品体系</h2>
|
||||
<p class="section-desc">全方位低空监管产品矩阵</p>
|
||||
</div>
|
||||
|
||||
<div class="product-grid">
|
||||
<div
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
class="product-card"
|
||||
@click="toUrl(item)"
|
||||
>
|
||||
<div class="card-image">
|
||||
<img
|
||||
:src="`./static/images/${item.imgUrl}`"
|
||||
:alt="item.title"
|
||||
:class="item.type === 'hardwareSystem' ? 'm-img' : 'r-img'"
|
||||
/>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<h3 class="card-title">{{ item.title }}</h3>
|
||||
<p class="card-desc">{{ item.desc || '点击查看详情' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 特色优势 -->
|
||||
<div class="feature-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">核心优势</h2>
|
||||
<p class="section-desc">技术领先，服务至上</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card" v-for="i in 4" :key="i">
|
||||
<div class="feature-icon">
|
||||
<el-icon :size="32"><icon-svg :name="'feature' + i" /></el-icon>
|
||||
</div>
|
||||
<h3 class="feature-title">优势 {{ i }}</h3>
|
||||
<p class="feature-desc">专业的技术团队为您提供优质服务</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-homepage {
|
||||
min-height: 100%;
|
||||
background-color: #f0f2f5;
|
||||
|
||||
// Banner区域
|
||||
.banner-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
min-height: 400px;
|
||||
overflow: hidden;
|
||||
|
||||
.banner-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.banner-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.3),
|
||||
rgba(0, 0, 0, 0.6)
|
||||
);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
|
||||
.banner-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 16px;
|
||||
color: #ffffffd9;
|
||||
margin-bottom: 24px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 通用区块标题
|
||||
.section-header {
|
||||
text-align: center;
|
||||
padding: 40px 20px 30px;
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #262626;
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
background: linear-gradient(to right, #1890ff, #096dd9);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 产品体系
|
||||
.product-section {
|
||||
background-color: #ffffff;
|
||||
margin: 16px;
|
||||
border-radius: 12px;
|
||||
padding-bottom: 30px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 0 20px;
|
||||
|
||||
.product-card {
|
||||
background: #fafafa;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #f0f0f0;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #e6f7ff, #bae7ff);
|
||||
padding: 20px;
|
||||
|
||||
img {
|
||||
max-width: 90%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.m-img {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.r-img {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-info {
|
||||
padding: 16px;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 13px;
|
||||
color: #8c8c8c;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 特色优势
|
||||
.feature-section {
|
||||
background-color: #ffffff;
|
||||
margin: 16px;
|
||||
border-radius: 12px;
|
||||
padding-bottom: 30px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
padding: 0 20px;
|
||||
|
||||
.feature-card {
|
||||
padding: 20px 16px;
|
||||
background: linear-gradient(135deg, #f0f5ff, #e6f7ff);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 0 auto 12px;
|
||||
background: linear-gradient(135deg, #1890ff, #096dd9);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式优化
|
||||
@media (max-width: 480px) {
|
||||
.mobile-homepage {
|
||||
.banner-section {
|
||||
height: 45vh;
|
||||
min-height: 350px;
|
||||
|
||||
.banner-overlay {
|
||||
.banner-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-section {
|
||||
.product-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-section {
|
||||
.feature-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
367
src/views/layout/mobile/index.vue
Normal file
367
src/views/layout/mobile/index.vue
Normal file
@ -0,0 +1,367 @@
|
||||
<script setup>
|
||||
import {ref, onMounted} from 'vue'
|
||||
import {useRouter, useRoute} from 'vue-router'
|
||||
import {useNavStore} from '@/store/nav'
|
||||
import {storeToRefs} from 'pinia'
|
||||
import {
|
||||
HomeFilled,
|
||||
Grid,
|
||||
Monitor,
|
||||
Cpu,
|
||||
Document,
|
||||
InfoFilled,
|
||||
Phone,
|
||||
Service,
|
||||
Download,
|
||||
Expand,
|
||||
Fold
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const navStore = useNavStore()
|
||||
const {navIndex} = storeToRefs(navStore)
|
||||
|
||||
const isCollapse = ref(true)
|
||||
const navList = ref([])
|
||||
const activeIndex = ref('/')
|
||||
|
||||
// 图标映射表 - 使用Element Plus内置图标
|
||||
const iconMap = {
|
||||
'首页': 'HomeFilled',
|
||||
'解决方案': 'Grid',
|
||||
'空域感知矩阵': 'Monitor',
|
||||
'低空智控中枢': 'Cpu',
|
||||
'新闻中心': 'Document',
|
||||
'关于我们': 'InfoFilled',
|
||||
'联系我们': 'Phone',
|
||||
'服务与支撑': 'Service',
|
||||
'下载中心': 'Download',
|
||||
}
|
||||
|
||||
// 获取菜单项对应的图标组件
|
||||
const getIconComponent = (label) => {
|
||||
const iconName = iconMap[label] || 'Grid'
|
||||
const iconComponents = {
|
||||
HomeFilled,
|
||||
Grid,
|
||||
Monitor,
|
||||
Cpu,
|
||||
Document,
|
||||
InfoFilled,
|
||||
Phone,
|
||||
Service,
|
||||
Download,
|
||||
}
|
||||
return iconComponents[iconName] || Grid
|
||||
}
|
||||
|
||||
const handleSelect = (key) => {
|
||||
navStore.changeNavIndex(key)
|
||||
router.push(key)
|
||||
}
|
||||
|
||||
const toggleMenu = () => {
|
||||
isCollapse.value = !isCollapse.value
|
||||
|
||||
// 派发侧边栏状态变化事件，让其他组件（如详情页底部栏）能够响应
|
||||
window.dispatchEvent(new CustomEvent('sidebar-toggle', {
|
||||
detail: {
|
||||
collapsed: isCollapse.value
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
navList.value = window.nav?.header || []
|
||||
activeIndex.value = route.path
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-layout">
|
||||
<div class="sidebar" :class="{collapse: isCollapse}">
|
||||
<div class="logo" :class="{collapse: isCollapse}">
|
||||
<img src="/static/images/header/logo.png" alt="logo" />
|
||||
<span v-show="!isCollapse" class="logo-text">燃谷科技</span>
|
||||
</div>
|
||||
|
||||
<el-menu
|
||||
:default-active="activeIndex"
|
||||
:collapse="isCollapse"
|
||||
class="sidebar-menu"
|
||||
@select="handleSelect"
|
||||
background-color="#081314"
|
||||
text-color="#999999"
|
||||
active-text-color="#FFFFFF"
|
||||
:collapse-transition="true"
|
||||
>
|
||||
<template v-for="nav in navList" :key="nav.id">
|
||||
<el-sub-menu
|
||||
v-if="nav.hasChildren || nav?.children?.length > 0"
|
||||
:index="nav.url"
|
||||
>
|
||||
<template #title>
|
||||
<el-icon :size="18">
|
||||
<component :is="getIconComponent(nav.label)" />
|
||||
</el-icon>
|
||||
<span>{{ nav.label }}</span>
|
||||
</template>
|
||||
<el-menu-item
|
||||
v-for="child in nav.children"
|
||||
:key="child.id"
|
||||
:index="child.url"
|
||||
>
|
||||
<el-icon :size="18">
|
||||
<component :is="getIconComponent(child.label)" />
|
||||
</el-icon>
|
||||
<span>{{ child.label }}</span>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<el-menu-item v-else :index="nav.url">
|
||||
<el-icon :size="18">
|
||||
<component :is="getIconComponent(nav.label)" />
|
||||
</el-icon>
|
||||
<span>{{ nav.label }}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-menu>
|
||||
|
||||
<div class="toggle-btn" @click="toggleMenu">
|
||||
<el-icon :size="18">
|
||||
<Expand v-if="isCollapse" />
|
||||
<Fold v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content" :data-collapsed="isCollapse">
|
||||
<router-view v-slot="{Component}">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #f0f2f5;
|
||||
|
||||
.sidebar {
|
||||
width: 160px;
|
||||
height: 100vh;
|
||||
height: 100%; /* no */
|
||||
min-height: 100vh; /* no */
|
||||
background-color: #081314;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width 0.3s ease;
|
||||
overflow: hidden;
|
||||
position: fixed; /* no */
|
||||
left: 0; /* no */
|
||||
top: 0; /* no */
|
||||
bottom: 0; /* no */
|
||||
z-index: 1000;
|
||||
|
||||
&.collapse {
|
||||
width: 54px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.collapse {
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
flex: 1;
|
||||
border-right: none;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 8px 0;
|
||||
|
||||
// 覆盖 Element Plus 默认样式
|
||||
:deep(.el-menu) {
|
||||
border-right: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:deep(.el-menu--collapse) {
|
||||
width: 54px;
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu__title),
|
||||
:deep(.el-menu-item) {
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
padding: 0 12px !important;
|
||||
color: #999999 !important;
|
||||
font-size: 13px !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
color: #FFFFFF !important;
|
||||
border-right: 3px solid #FFFFFF;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 18px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-menu--collapse) {
|
||||
.el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
padding: 0 !important;
|
||||
text-align: center;
|
||||
|
||||
.el-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.el-menu--collapse) {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
// 子菜单展开样式优化
|
||||
:deep(.el-sub-menu) {
|
||||
.el-sub-menu__icon {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-size: 12px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&.is-opened > .el-sub-menu__title .el-sub-menu__icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
// 子菜单列表
|
||||
.el-menu {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
|
||||
.el-menu-item {
|
||||
padding-left: 36px !important;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #666;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover::before,
|
||||
&.is-active::before {
|
||||
background-color: #FFFFFF;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
margin-left: 160px;
|
||||
transition: margin-left 0.3s ease;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh; /* no */
|
||||
width: calc(100% - 160px); /* no */
|
||||
}
|
||||
}
|
||||
|
||||
// 使用 JavaScript 控制主内容区的左边距
|
||||
.main-content[data-collapsed="true"] {
|
||||
margin-left: 54px !important;
|
||||
width: calc(100% - 54px) !important; /* no */
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
376
src/views/link/mobile.vue
Normal file
376
src/views/link/mobile.vue
Normal file
@ -0,0 +1,376 @@
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
// 联系信息
|
||||
const contactInfo = {
|
||||
company: '燃谷科技（南京）有限公司',
|
||||
phone: '13222013393',
|
||||
email: 'company@rangutech.com',
|
||||
address: '江苏省南京市鼓楼区万谷硅巷5F',
|
||||
mapUrl:
|
||||
'https://www.amap.com/search?query=%E7%87%83%E8%B0%B7%E7%A7%91%E6%8A%80(%E5%8D%97%E4%BA%AC)%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8',
|
||||
}
|
||||
|
||||
// 快捷操作
|
||||
const handlePhoneCall = () => {
|
||||
window.location.href = `tel:${contactInfo.phone}`
|
||||
}
|
||||
|
||||
const handleSendEmail = () => {
|
||||
window.location.href = `mailto:${contactInfo.email}`
|
||||
}
|
||||
|
||||
const openMap = () => {
|
||||
window.open(contactInfo.mapUrl)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mobile-link">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">联系我们</h1>
|
||||
<p class="page-subtitle">期待与您的合作交流</p>
|
||||
</div>
|
||||
|
||||
<!-- 公司信息卡片 -->
|
||||
<div class="info-section">
|
||||
<div class="company-card">
|
||||
<div class="company-icon">
|
||||
<el-icon :size="32" color="#081314"><OfficeBuilding /></el-icon>
|
||||
</div>
|
||||
<h2 class="company-name">{{ contactInfo.company }}</h2>
|
||||
<p class="company-desc">专业低空智能监管解决方案提供商</p>
|
||||
</div>
|
||||
|
||||
<!-- 联系方式列表 -->
|
||||
<div class="contact-list">
|
||||
<!-- 电话 -->
|
||||
<div class="contact-item" @click="handlePhoneCall">
|
||||
<div class="contact-icon phone">
|
||||
<el-icon :size="20"><Phone /></el-icon>
|
||||
</div>
|
||||
<div class="contact-content">
|
||||
<div class="contact-label">联系电话</div>
|
||||
<div class="contact-value">{{ contactInfo.phone }}</div>
|
||||
</div>
|
||||
<div class="contact-action">
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 邮箱 -->
|
||||
<div class="contact-item" @click="handleSendEmail">
|
||||
<div class="contact-icon email">
|
||||
<el-icon :size="20"><Message /></el-icon>
|
||||
</div>
|
||||
<div class="contact-content">
|
||||
<div class="contact-label">电子邮箱</div>
|
||||
<div class="contact-value">{{ contactInfo.email }}</div>
|
||||
</div>
|
||||
<div class="contact-action">
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地址 -->
|
||||
<div class="contact-item" @click="openMap">
|
||||
<div class="contact-icon location">
|
||||
<el-icon :size="20"><Location /></el-icon>
|
||||
</div>
|
||||
<div class="contact-content">
|
||||
<div class="contact-label">公司地址</div>
|
||||
<div class="contact-value">{{ contactInfo.address }}</div>
|
||||
</div>
|
||||
<div class="contact-action">
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地图区域 -->
|
||||
<div class="map-section">
|
||||
<div class="section-title">
|
||||
<el-icon :size="18"><MapLocation /></el-icon>
|
||||
<span>位置导航</span>
|
||||
</div>
|
||||
<div class="map-container" @click="openMap">
|
||||
<img src="/static/images/link/map.png" alt="地图" class="map-image" />
|
||||
<div class="map-overlay">
|
||||
<el-icon :size="24"><Position /></el-icon>
|
||||
<span>点击查看详细地图</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷操作栏 -->
|
||||
<div class="action-bar">
|
||||
<button class="action-btn primary" @click="handlePhoneCall">
|
||||
<el-icon :size="18"><Phone /></el-icon>
|
||||
<span>电话咨询</span>
|
||||
</button>
|
||||
<button class="action-btn secondary" @click="handleSendEmail">
|
||||
<el-icon :size="18"><Message /></el-icon>
|
||||
<span>邮件联系</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
OfficeBuilding,
|
||||
Phone,
|
||||
Message,
|
||||
Location,
|
||||
ArrowRight,
|
||||
MapLocation,
|
||||
Position,
|
||||
} from '@element-plus/icons-vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-link {
|
||||
min-height: 100%;
|
||||
background-color: #f5f7fa;
|
||||
padding-bottom: 80px; /* no */
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 16px;
|
||||
|
||||
// 公司信息卡片
|
||||
.company-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px; /* no */
|
||||
padding: 20px; /* no */
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
|
||||
margin-bottom: 16px; /* no */
|
||||
|
||||
.company-icon {
|
||||
width: 64px; /* no */
|
||||
height: 64px; /* no */
|
||||
border-radius: 50%;
|
||||
background-color: #f0f5ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 12px; /* no */
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.company-desc {
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 联系方式列表
|
||||
.contact-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px; /* no */
|
||||
|
||||
.contact-item {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px; /* no */
|
||||
padding: 16px; /* no */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); /* no */
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* no */
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
width: 44px; /* no */
|
||||
height: 44px; /* no */
|
||||
border-radius: 10px; /* no */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px; /* no */
|
||||
flex-shrink: 0;
|
||||
|
||||
&.phone {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
&.email {
|
||||
background-color: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.location {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.contact-label {
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
margin-bottom: 4px; /* no */
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-action {
|
||||
color: #cccccc;
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px; /* no */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 地图区域
|
||||
.map-section {
|
||||
padding: 0 16px 16px; /* no */
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px; /* no */
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 12px; /* no */
|
||||
padding-left: 4px; /* no */
|
||||
}
|
||||
|
||||
.map-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 220px; /* no */
|
||||
border-radius: 10px; /* no */
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* no */
|
||||
cursor: pointer;
|
||||
|
||||
.map-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.map-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
|
||||
padding: 20px 16px 12px; /* no */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px; /* no */
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
|
||||
.el-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:active .map-overlay {
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 底部快捷操作栏
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
padding: 12px 16px; /* no */
|
||||
display: flex;
|
||||
gap: 12px; /* no */
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06); /* no */
|
||||
z-index: 100;
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 48px; /* no */
|
||||
border: none;
|
||||
border-radius: 24px; /* no */
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px; /* no */
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: linear-gradient(135deg, #081314, #1a2634);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(8, 19, 20, 0.3); /* no */
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: #f5f7fa;
|
||||
color: #081314;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
283
src/views/news/mobile.vue
Normal file
283
src/views/news/mobile.vue
Normal file
@ -0,0 +1,283 @@
|
||||
<script setup>
|
||||
import {ref, onMounted} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(true)
|
||||
|
||||
// 假数据 - 新闻列表
|
||||
const newsList = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: '燃谷科技完成A轮融资，加速低空经济布局',
|
||||
cover_image: '/static/images/main/1.png',
|
||||
time: '2025-01-15',
|
||||
category: '公司动态',
|
||||
snapshot: '近日，燃谷科技宣布完成数千万元A轮融资，本轮融资将主要用于技术研发和市场拓展...',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '低空智控中枢系统V3.0版本正式发布',
|
||||
cover_image: '/static/images/main/2.png',
|
||||
time: '2025-01-10',
|
||||
category: '产品更新',
|
||||
snapshot: '燃谷科技正式发布低空智控中枢系统V3.0版本，新增AI智能识别、多源数据融合等核心功能...',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '携手共建智慧城市：燃谷科技与多地政府达成战略合作',
|
||||
cover_image: '/static/images/main/3.png',
|
||||
time: '2025-01-05',
|
||||
category: '行业合作',
|
||||
snapshot: '燃谷科技先后与深圳、成都、杭州等多地政府签署战略合作协议，共同推进低空经济示范区建设...',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '空域感知矩阵系统荣获技术创新奖',
|
||||
cover_image: '/static/images/main/4.png',
|
||||
time: '2024-12-28',
|
||||
category: '荣誉资质',
|
||||
snapshot: '在第十届中国航空航天博览会上，燃谷科技的空域感知矩阵系统凭借卓越的技术创新性荣获年度技术创新奖...',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '低空监管解决方案成功应用于多个无人机物流项目',
|
||||
cover_image: '/static/images/main/5.png',
|
||||
time: '2024-12-20',
|
||||
category: '应用案例',
|
||||
snapshot: '燃谷科技的低空智能监管解决方案已成功应用于京东、顺丰等企业的多个无人机物流配送项目...',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '燃谷科技受邀参加国际低空经济论坛并发表主题演讲',
|
||||
cover_image: '/static/images/main/6.png',
|
||||
time: '2024-12-15',
|
||||
category: '行业活动',
|
||||
snapshot: '燃谷科技CEO张明受邀参加在新加坡举办的国际低空经济论坛，就"低空安全监管技术趋势"发表主题演讲...',
|
||||
},
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 500)
|
||||
})
|
||||
|
||||
const toDetail = (item) => {
|
||||
router.push({
|
||||
path: '/news/detail',
|
||||
query: {
|
||||
id: item.id,
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mobile-news" v-loading="loading">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">新闻中心</h1>
|
||||
<p class="page-subtitle">了解燃谷科技最新动态</p>
|
||||
</div>
|
||||
|
||||
<!-- 新闻列表 -->
|
||||
<div class="news-list">
|
||||
<div
|
||||
v-for="item in newsList"
|
||||
:key="item.id"
|
||||
class="news-card"
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<!-- 封面图 -->
|
||||
<div class="news-image">
|
||||
<img :src="item.cover_image" :alt="item.title" />
|
||||
<span class="news-category">{{ item.category }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="news-content">
|
||||
<h3 class="news-title">{{ item.title }}</h3>
|
||||
<p class="news-desc">{{ item.snapshot }}</p>
|
||||
<div class="news-meta">
|
||||
<span class="news-time">
|
||||
<el-icon><Clock /></el-icon>
|
||||
{{ item.time }}
|
||||
</span>
|
||||
<span class="read-more">
|
||||
阅读更多
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="!loading && newsList.length === 0" class="empty-state">
|
||||
<el-icon :size="64" color="#cccccc"><Document /></el-icon>
|
||||
<p>暂无新闻内容</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Clock, ArrowRight, Document} from '@element-plus/icons-vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-news {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.news-list {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px; /* no */
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* no */
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* no */
|
||||
}
|
||||
|
||||
.news-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 180px; /* no */
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:active img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.news-category {
|
||||
position: absolute;
|
||||
top: 12px; /* no */
|
||||
left: 12px; /* no */
|
||||
padding: 4px 10px; /* no */
|
||||
background-color: rgba(8, 19, 20, 0.85);
|
||||
color: #ffffff;
|
||||
font-size: 11px;
|
||||
border-radius: 12px; /* no */
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.news-content {
|
||||
padding: 14px; /* no */
|
||||
|
||||
.news-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 8px 0;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-desc {
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 12px 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 10px; /* no */
|
||||
|
||||
.news-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px; /* no */
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
|
||||
.el-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.read-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px; /* no */
|
||||
font-size: 12px;
|
||||
color: #081314;
|
||||
font-weight: 500;
|
||||
|
||||
.el-icon {
|
||||
font-size: 14px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:active .el-icon {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px; /* no */
|
||||
color: #999999;
|
||||
|
||||
p {
|
||||
margin-top: 16px; /* no */
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
774
src/views/product/detail/mobile.vue
Normal file
774
src/views/product/detail/mobile.vue
Normal file
@ -0,0 +1,774 @@
|
||||
<script setup>
|
||||
import {ref, onMounted, onUnmounted} from 'vue'
|
||||
import {useRoute, useRouter} from 'vue-router'
|
||||
import {cryptoDecrypt} from '@/utils/cryptojs'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// 解密参数
|
||||
const query = ref({})
|
||||
const loading = ref(true)
|
||||
const isHardware = ref(true) // 是否为硬件类型
|
||||
const advantages = ref('') // 核心优势内容
|
||||
const sidebarCollapsed = ref(false) // 侧边栏是否折叠
|
||||
|
||||
onMounted(() => {
|
||||
try {
|
||||
query.value = JSON.parse(cryptoDecrypt(route.query.type))
|
||||
isHardware.value = query.value.type === 'hardwareSystem'
|
||||
|
||||
// 安全获取核心优势内容（兼容PC端window.advantages）
|
||||
if (typeof window !== 'undefined' && window.advantages) {
|
||||
advantages.value = window.advantages
|
||||
} else if (query.value.advantages) {
|
||||
advantages.value = query.value.advantages
|
||||
} else if (query.value.features && query.value.features.length > 0) {
|
||||
// 如果没有advantages，使用features生成列表
|
||||
advantages.value = '<ul>' +
|
||||
query.value.features.map(f => `<li>${f}</li>`).join('') +
|
||||
'</ul>'
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('参数解析失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// 监听侧边栏状态变化事件
|
||||
window.addEventListener('sidebar-toggle', handleSidebarToggle)
|
||||
|
||||
// 初始化时检查侧边栏状态
|
||||
checkSidebarState()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('sidebar-toggle', handleSidebarToggle)
|
||||
})
|
||||
|
||||
// 处理侧边栏折叠/展开事件
|
||||
const handleSidebarToggle = (event) => {
|
||||
sidebarCollapsed.value = event.detail?.collapsed || false
|
||||
updateFooterPosition()
|
||||
}
|
||||
|
||||
// 检查当前侧边栏状态
|
||||
const checkSidebarState = () => {
|
||||
const sidebar = document.querySelector('.sidebar')
|
||||
if (sidebar) {
|
||||
sidebarCollapsed.value = sidebar.classList.contains('collapse')
|
||||
}
|
||||
updateFooterPosition()
|
||||
}
|
||||
|
||||
// 更新底部操作栏位置
|
||||
const updateFooterPosition = () => {
|
||||
const footer = document.querySelector('.detail-footer')
|
||||
if (footer) {
|
||||
if (sidebarCollapsed.value) {
|
||||
footer.setAttribute('data-sidebar', 'collapsed')
|
||||
} else {
|
||||
footer.removeAttribute('data-sidebar')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mobile-detail" v-loading="loading">
|
||||
<!-- ==================== 顶部导航栏 ==================== -->
|
||||
<nav class="detail-nav">
|
||||
<button class="back-btn" @click="goBack">
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
<h1 class="nav-title">{{ query.title }}{{ query.subTitle ? ' - ' + query.subTitle : '' }}</h1>
|
||||
</nav>
|
||||
|
||||
<!-- ==================== 硬件设备详情布局 ==================== -->
|
||||
<template v-if="isHardware && !loading">
|
||||
<!-- 产品主图 -->
|
||||
<section class="product-hero">
|
||||
<div class="hero-image-wrapper">
|
||||
<img
|
||||
:src="`./static/images/${query.imgUrl}`"
|
||||
:alt="query.title"
|
||||
class="hero-image"
|
||||
/>
|
||||
<span class="image-badge">硬件设备</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心优势 -->
|
||||
<section class="advantages-section" v-if="advantages">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">✨ 核心优势</h2>
|
||||
</div>
|
||||
<div class="advantages-content" v-html="advantages"></div>
|
||||
</section>
|
||||
|
||||
<!-- 详细描述 -->
|
||||
<section class="description-section" v-if="query.description">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">📋 产品介绍</h2>
|
||||
</div>
|
||||
<div class="description-content" v-html="query.description"></div>
|
||||
</section>
|
||||
|
||||
<!-- 技术规格（如果有） -->
|
||||
<section class="specs-section" v-if="query.specs || query.features">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">🔧 技术规格</h2>
|
||||
</div>
|
||||
<div class="specs-list" v-if="query.features">
|
||||
<div v-for="(feature, idx) in query.features" :key="idx" class="spec-item">
|
||||
<el-icon color="#1890ff"><CircleCheck /></el-icon>
|
||||
<span>{{ feature }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!-- ==================== 软件系统详情布局 ==================== -->
|
||||
<template v-if="!isHardware && !loading">
|
||||
<!-- 视频展示区 -->
|
||||
<section class="video-section" v-if="query.video">
|
||||
<div class="video-wrapper">
|
||||
<video
|
||||
autoplay
|
||||
muted
|
||||
loop
|
||||
playsinline
|
||||
:src="`./static/video/${query.video}`"
|
||||
class="demo-video"
|
||||
></video>
|
||||
<div class="video-overlay">
|
||||
<span class="video-badge">系统演示</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 软件截图/图片（如果没有视频） -->
|
||||
<section class="software-hero" v-if="!query.video && query.imgUrl">
|
||||
<div class="software-image-wrapper">
|
||||
<img
|
||||
:src="`./static/images/${query.imgUrl}`"
|
||||
:alt="query.title"
|
||||
class="software-image"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 功能概述 -->
|
||||
<section class="overview-section" v-if="query.description">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">💡 功能概述</h2>
|
||||
</div>
|
||||
<div class="overview-content" v-html="query.description"></div>
|
||||
</section>
|
||||
|
||||
<!-- 功能模块卡片 -->
|
||||
<section class="modules-section" v-if="query.card && query.card.length > 0">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">🎯 核心功能模块</h2>
|
||||
<p class="section-desc">共 {{ query.card.length }} 个功能模块</p>
|
||||
</div>
|
||||
|
||||
<div class="module-list">
|
||||
<div v-for="item in query.card" :key="item.id" class="module-card">
|
||||
<div class="module-header">
|
||||
<el-icon :size="20" color="#1890ff"><Grid /></el-icon>
|
||||
<h3 class="module-title">{{ item.title }}</h3>
|
||||
</div>
|
||||
<div class="module-content">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 应用场景 -->
|
||||
<section class="scenarios-section" v-if="query.scenarios">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">🚀 应用场景</h2>
|
||||
</div>
|
||||
<div class="scenario-tags">
|
||||
<span v-for="(scene, idx) in query.scenarios" :key="idx" class="scenario-tag">
|
||||
{{ scene }}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!-- ==================== 底部操作栏 ==================== -->
|
||||
<footer class="detail-footer">
|
||||
<div class="footer-inner">
|
||||
<button class="footer-btn back-btn" @click="goBack">
|
||||
<div class="btn-icon-wrapper back">
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
</div>
|
||||
<span class="btn-text">返回列表</span>
|
||||
</button>
|
||||
|
||||
<button class="footer-btn contact-btn" @click="$router.push('/link')">
|
||||
<div class="btn-icon-wrapper contact">
|
||||
<el-icon><PhoneFilled /></el-icon>
|
||||
</div>
|
||||
<span class="btn-text">联系我们</span>
|
||||
<span class="btn-badge">立即咨询</span>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
ArrowLeft,
|
||||
CircleCheck,
|
||||
Grid,
|
||||
PhoneFilled
|
||||
} from '@element-plus/icons-vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-detail {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
padding-bottom: 80px; /* no */
|
||||
|
||||
// ==================== 导航栏 ====================
|
||||
.detail-nav {
|
||||
position: sticky;
|
||||
top: 0; /* no */
|
||||
z-index: 100;
|
||||
background: linear-gradient(135deg, #081314 0%, #1a2634 100%);
|
||||
padding: 14px 16px; /* no */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px; /* no */
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* no */
|
||||
|
||||
.back-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px; /* no */
|
||||
padding: 8px 12px; /* no */
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-radius: 20px; /* no */
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 通用区块样式 ====================
|
||||
section {
|
||||
margin: 16px; /* no */
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px; /* no */
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); /* no */
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 16px 16px 12px; /* no */
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 硬件详情样式 ====================
|
||||
.product-hero {
|
||||
margin: 16px; /* no */
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px; /* no */
|
||||
overflow: hidden;
|
||||
|
||||
.hero-image-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, #f0f5ff 0%, #ffffff 50%);
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 280px; /* no */
|
||||
max-height: 400px; /* no */
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
padding: 20px; /* no */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.image-badge {
|
||||
position: absolute;
|
||||
top: 16px; /* no */
|
||||
right: 16px; /* no */
|
||||
padding: 6px 14px; /* no */
|
||||
background: linear-gradient(135deg, #1890ff, #096dd9);
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: 16px; /* no */
|
||||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3); /* no */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advantages-section {
|
||||
.advantages-content {
|
||||
padding: 16px; /* no */
|
||||
line-height: 1.8;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
||||
:deep(h4),
|
||||
:deep(h3),
|
||||
:deep(h2) {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 12px 0 8px 0;
|
||||
}
|
||||
|
||||
:deep(p) {
|
||||
margin: 8px 0;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
:deep(ul),
|
||||
:deep(ol) {
|
||||
padding-left: 20px; /* no */
|
||||
margin: 8px 0;
|
||||
|
||||
li {
|
||||
margin: 6px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description-section {
|
||||
.description-content {
|
||||
padding: 16px; /* no */
|
||||
font-size: 14px;
|
||||
line-height: 1.9;
|
||||
color: #555555;
|
||||
|
||||
:deep(p) {
|
||||
margin: 10px 0;
|
||||
text-indent: 2em;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
:deep(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px; /* no */
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.specs-section {
|
||||
.specs-list {
|
||||
padding: 16px; /* no */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px; /* no */
|
||||
|
||||
.spec-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px; /* no */
|
||||
padding: 12px; /* no */
|
||||
background-color: #fafafa;
|
||||
border-radius: 8px; /* no */
|
||||
border-left: 3px solid #1890ff;
|
||||
|
||||
.el-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 软件详情样式 ====================
|
||||
.video-section {
|
||||
margin: 16px; /* no */
|
||||
background-color: #000000;
|
||||
border-radius: 12px; /* no */
|
||||
overflow: hidden;
|
||||
|
||||
.video-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 220px; /* no */
|
||||
|
||||
.demo-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.video-overlay {
|
||||
position: absolute;
|
||||
bottom: 12px; /* no */
|
||||
right: 12px; /* no */
|
||||
|
||||
.video-badge {
|
||||
padding: 5px 12px; /* no */
|
||||
background-color: rgba(24, 144, 255, 0.9);
|
||||
color: #ffffff;
|
||||
font-size: 11px;
|
||||
border-radius: 12px; /* no */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.software-hero {
|
||||
margin: 16px; /* no */
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px; /* no */
|
||||
overflow: hidden;
|
||||
|
||||
.software-image-wrapper {
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, #e6f7ff 0%, #ffffff 50%);
|
||||
|
||||
.software-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 240px; /* no */
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
padding: 16px; /* no */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overview-section {
|
||||
.overview-content {
|
||||
padding: 16px; /* no */
|
||||
font-size: 14px;
|
||||
line-height: 1.9;
|
||||
color: #555555;
|
||||
|
||||
:deep(p) {
|
||||
margin: 10px 0;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modules-section {
|
||||
.module-list {
|
||||
padding: 12px; /* no */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px; /* no */
|
||||
|
||||
.module-card {
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 10px; /* no */
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* no */
|
||||
}
|
||||
|
||||
.module-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px; /* no */
|
||||
padding: 14px 16px; /* no */
|
||||
background: linear-gradient(135deg, #0389ff, #0066cc);
|
||||
|
||||
.module-title {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.module-content {
|
||||
padding: 14px 16px; /* no */
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
line-height: 1.7;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scenarios-section {
|
||||
.scenario-tags {
|
||||
padding: 16px; /* no */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px; /* no */
|
||||
|
||||
.scenario-tag {
|
||||
padding: 8px 16px; /* no */
|
||||
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
|
||||
color: #16a34a;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border-radius: 16px; /* no */
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 底部操作栏 ====================
|
||||
.detail-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 160px; /* no */ /* 匹配侧边栏展开时的宽度 */
|
||||
right: 0;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, #ffffff 100%);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
padding: 12px 16px; /* no */
|
||||
padding-bottom: calc(12px + env(safe-area-inset-bottom)); /* no */
|
||||
z-index: 99;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
transition: left 0.3s ease;
|
||||
|
||||
// 当侧边栏折叠时
|
||||
&[data-sidebar="collapsed"] {
|
||||
left: 54px; /* no */ /* 匹配侧边栏折叠时的宽度 */
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
display: flex;
|
||||
gap: 12px; /* no */
|
||||
max-width: 600px; /* no */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
flex: 1;
|
||||
height: 52px; /* no */
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px; /* no */
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
border-radius: 14px; /* no */
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0; /* no */
|
||||
height: 0; /* no */
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.4s ease, height 0.4s ease;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:active::before {
|
||||
width: 120px; /* no */
|
||||
height: 120px; /* no */
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.btn-icon-wrapper {
|
||||
width: 36px; /* no */
|
||||
height: 36px; /* no */
|
||||
border-radius: 10px; /* no */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.el-icon {
|
||||
font-size: 20px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn-badge {
|
||||
position: absolute;
|
||||
top: -4px; /* no */
|
||||
right: -2px; /* no */
|
||||
padding: 2px 8px; /* no */
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px; /* no */
|
||||
animation: pulse-badge 2s infinite;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// 返回按钮样式
|
||||
&.back-btn {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e8eaed 100%);
|
||||
color: #555555;
|
||||
border-radius: 14px; /* no */
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.04), /* no */
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8); /* no */
|
||||
|
||||
.btn-icon-wrapper.back {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0f2f5 100%);
|
||||
color: #666666;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* no */
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(135deg, #e8eaed 0%, #dcdfe3 100%);
|
||||
box-shadow:
|
||||
0 1px 4px rgba(0, 0, 0, 0.06), /* no */
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.6); /* no */
|
||||
|
||||
.btn-icon-wrapper.back {
|
||||
transform: scale(0.9);
|
||||
|
||||
.el-icon {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 联系我们按钮样式
|
||||
&.contact-btn {
|
||||
flex: 1.3; /* 稍微宽一点 */
|
||||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 50%, #0050b3 100%);
|
||||
color: #ffffff;
|
||||
border-radius: 14px; /* no */
|
||||
box-shadow:
|
||||
0 4px 16px rgba(24, 144, 255, 0.35), /* no */
|
||||
0 2px 6px rgba(24, 144, 255, 0.2), /* no */
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2); /* no */
|
||||
|
||||
.btn-icon-wrapper.contact {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #ffffff;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.btn-badge {
|
||||
background: linear-gradient(135deg, #ff4d4f, #ff7875);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 2px 6px rgba(255, 77, 79, 0.4); /* no */
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(135deg, #096dd9 0%, #0050b3 50%, #003a8c 100%);
|
||||
box-shadow:
|
||||
0 2px 10px rgba(24, 144, 255, 0.25), /* no */
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.15); /* no */
|
||||
|
||||
.btn-icon-wrapper.contact {
|
||||
transform: scale(0.9);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
|
||||
.el-icon {
|
||||
transform: rotate(-15deg) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-badge {
|
||||
animation: none;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 徽章脉冲动画
|
||||
@keyframes pulse-badge {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
372
src/views/product/hardwareSystem/mobile.vue
Normal file
372
src/views/product/hardwareSystem/mobile.vue
Normal file
@ -0,0 +1,372 @@
|
||||
<script setup>
|
||||
import {ref, onMounted} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
import {cryptoEncrypt} from '@/utils/cryptojs'
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(true)
|
||||
|
||||
// 使用PC端真实数据源
|
||||
const productList = ref([]) // 硬件设备列表
|
||||
|
||||
// 应用案例数据（来自PC端project.vue）
|
||||
const caseList = ref([
|
||||
{
|
||||
id: 1,
|
||||
label: '智慧物流配送',
|
||||
img: '/static/images/product/1.png',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '要地防控',
|
||||
img: '/static/images/product/2.png',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: '关键基础设施守护',
|
||||
img: '/static/images/product/3.png',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: '规模化无人机巡检',
|
||||
img: '/static/images/product/4.png',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: '城市低空交通管理',
|
||||
img: '/static/images/product/5.png',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: '区域低空监管组网',
|
||||
img: '/static/images/product/6.png',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
label: '大型活动保障',
|
||||
img: '/static/images/product/7.png',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
label: '移动式低空安防',
|
||||
img: '/static/images/product/8.png',
|
||||
},
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
// 从window对象获取真实数据
|
||||
productList.value = window.hardwareSystemList || []
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 300)
|
||||
})
|
||||
|
||||
// 跳转详情页（仅硬件设备可用）
|
||||
const toDetail = (item) => {
|
||||
router.push({
|
||||
path: '/product/detail',
|
||||
query: {type: cryptoEncrypt(JSON.stringify(item))},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mobile-hardware" v-loading="loading">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">硬件系统</h1>
|
||||
<p class="page-subtitle">低空监管核心硬件设备</p>
|
||||
</div>
|
||||
|
||||
<!-- 硬件设备列表（可点击） -->
|
||||
<section class="section" v-if="productList.length > 0">
|
||||
<div class="section-title-bar">
|
||||
<span class="title-icon">🔧</span>
|
||||
<h2>核心设备</h2>
|
||||
<span class="subtitle">点击查看详细信息</span>
|
||||
</div>
|
||||
|
||||
<div class="product-list">
|
||||
<div
|
||||
v-for="product in productList"
|
||||
:key="product.id"
|
||||
class="product-card"
|
||||
@click="toDetail(product)"
|
||||
>
|
||||
<!-- 产品图片 -->
|
||||
<div class="product-image">
|
||||
<img :src="`./static/images/${product.imgUrl}`" :alt="product.title" />
|
||||
<span class="click-hint">
|
||||
<el-icon><View /></el-icon>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 产品信息 -->
|
||||
<div class="product-info">
|
||||
<h3 class="product-title">{{ product.title }}</h3>
|
||||
<p class="product-desc" v-if="product.desc || product.description">
|
||||
{{ product.desc || product.description }}
|
||||
</p>
|
||||
|
||||
<!-- 查看详情按钮 -->
|
||||
<div class="action-btn">
|
||||
<span>查看详情</span>
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 应用案例板块（不可点击，纯展示） -->
|
||||
<section class="section case-section" v-if="caseList.length > 0">
|
||||
<div class="section-title-bar alt">
|
||||
<span class="title-icon">📋</span>
|
||||
<h2>应用案例</h2>
|
||||
<span class="subtitle">典型应用场景展示</span>
|
||||
</div>
|
||||
|
||||
<div class="case-grid">
|
||||
<div
|
||||
v-for="caseItem in caseList"
|
||||
:key="caseItem.id"
|
||||
class="case-item"
|
||||
>
|
||||
<!-- 案例图片 -->
|
||||
<div class="case-image-wrapper">
|
||||
<img :src="caseItem.img" :alt="caseItem.label" />
|
||||
</div>
|
||||
|
||||
<!-- 案例名称 -->
|
||||
<div class="case-label">{{ caseItem.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<div v-if="productList.length === 0 && caseList.length === 0" class="empty-state">
|
||||
<el-icon :size="64" color="#cccccc"><Box /></el-icon>
|
||||
<p>暂无产品信息</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ArrowRight, View, Box} from '@element-plus/icons-vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-hardware {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 16px;
|
||||
|
||||
&.case-section {
|
||||
background-color: #ffffff;
|
||||
margin-top: 12px; /* no */
|
||||
border-top: 4px solid #081314; /* no */
|
||||
}
|
||||
}
|
||||
|
||||
.section-title-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px; /* no */
|
||||
margin-bottom: 16px; /* no */
|
||||
padding-bottom: 10px; /* no */
|
||||
border-bottom: 2px solid #e8e8e8;
|
||||
|
||||
&.alt {
|
||||
border-bottom-color: #d6e4ff;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
flex: 1;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 11px;
|
||||
color: #999999;
|
||||
background-color: #f5f5f5;
|
||||
padding: 3px 8px; /* no */
|
||||
border-radius: 10px; /* no */
|
||||
}
|
||||
}
|
||||
|
||||
// 硬件产品列表样式
|
||||
.product-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px; /* no */
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px; /* no */
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* no */
|
||||
}
|
||||
|
||||
.product-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px; /* no */
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
background-color: #fafafa;
|
||||
padding: 10px; /* no */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.click-hint {
|
||||
position: absolute;
|
||||
top: 10px; /* no */
|
||||
right: 10px; /* no */
|
||||
width: 28px; /* no */
|
||||
height: 28px; /* no */
|
||||
background-color: rgba(24, 144, 255, 0.9);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: 14px; /* no */
|
||||
|
||||
.product-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 8px 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 12px 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 10px; /* no */
|
||||
border-top: 1px solid #f0f0f0;
|
||||
color: #1890ff;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
|
||||
.el-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:active .el-icon {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 应用案例网格样式（不可点击）
|
||||
.case-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px; /* no */
|
||||
|
||||
.case-item {
|
||||
background-color: #fafafa;
|
||||
border-radius: 10px; /* no */
|
||||
overflow: hidden;
|
||||
border: 1px solid #e8e8e8;
|
||||
|
||||
.case-image-wrapper {
|
||||
width: 100%;
|
||||
height: 140px; /* no */
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.case-label {
|
||||
padding: 10px; /* no */
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 1.4;
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px; /* no */
|
||||
color: #999999;
|
||||
|
||||
p {
|
||||
margin-top: 16px; /* no */
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
291
src/views/product/softwareSystem/mobile.vue
Normal file
291
src/views/product/softwareSystem/mobile.vue
Normal file
@ -0,0 +1,291 @@
|
||||
<script setup>
|
||||
import {ref, onMounted} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
import {cryptoEncrypt} from '@/utils/cryptojs'
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(true)
|
||||
|
||||
// 使用PC端真实数据源 - 软件系统列表
|
||||
const softwareList = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
// 从window对象获取真实数据
|
||||
softwareList.value = window.softwareSystemList || []
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 300)
|
||||
})
|
||||
|
||||
// 点击图片跳转详情页
|
||||
const toDetail = (item) => {
|
||||
router.push({
|
||||
path: '/product/detail',
|
||||
query: {type: cryptoEncrypt(JSON.stringify(item))},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mobile-software" v-loading="loading">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">软件系统</h1>
|
||||
<p class="page-subtitle">智能化低空监管软件平台</p>
|
||||
</div>
|
||||
|
||||
<!-- 软件系统列表 -->
|
||||
<div class="software-list" v-if="softwareList.length > 0">
|
||||
<div
|
||||
v-for="software in softwareList"
|
||||
:key="software.id"
|
||||
class="software-card"
|
||||
>
|
||||
<!-- 标题栏 -->
|
||||
<div class="card-header-bar">
|
||||
<h3 class="software-title">{{ software.title }}</h3>
|
||||
</div>
|
||||
|
||||
<!-- 图片区域（可点击） -->
|
||||
<div class="image-area" @click="toDetail(software)">
|
||||
<img :src="`./static/images/${software.imgUrl}`" :alt="software.title" class="software-image" />
|
||||
<div class="image-overlay">
|
||||
<span class="view-detail">
|
||||
<el-icon><View /></el-icon>
|
||||
查看详情
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 描述信息 -->
|
||||
<div class="card-body">
|
||||
<!-- 副标题 -->
|
||||
<p class="sub-title" v-if="software.subTitle">{{ software.subTitle }}</p>
|
||||
|
||||
<!-- 详细描述 -->
|
||||
<div class="description" v-if="software.desc || software.description">
|
||||
<p>{{ software.desc || software.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 功能特性标签 -->
|
||||
<div class="features" v-if="software.features && software.features.length > 0">
|
||||
<span v-for="(feat, idx) in software.features" :key="idx" class="feature-tag">
|
||||
{{ feat }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 查看详情按钮 -->
|
||||
<button class="detail-btn" @click="toDetail(software)">
|
||||
<span>了解更多</span>
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<div v-else class="empty-state">
|
||||
<el-icon :size="64" color="#cccccc"><Monitor /></el-icon>
|
||||
<p>暂无软件系统信息</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {View, ArrowRight, Monitor} from '@element-plus/icons-vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-software {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.software-list {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px; /* no */
|
||||
}
|
||||
|
||||
.software-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px; /* no */
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* no */
|
||||
|
||||
.card-header-bar {
|
||||
background: linear-gradient(135deg, #0389ff, #0066cc);
|
||||
padding: 14px 16px; /* no */
|
||||
|
||||
.software-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.image-area {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 240px; /* no */
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
.software-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
background-color: #fafafa;
|
||||
padding: 12px; /* no */
|
||||
box-sizing: border-box;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:active .software-image {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
|
||||
padding: 20px 16px 12px; /* no */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
.view-detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px; /* no */
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active .image-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 16px; /* no */
|
||||
|
||||
.sub-title {
|
||||
font-size: 14px;
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
margin: 0 0 10px 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-bottom: 14px; /* no */
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px; /* no */
|
||||
margin-bottom: 16px; /* no */
|
||||
|
||||
.feature-tag {
|
||||
padding: 5px 12px; /* no */
|
||||
background-color: #e6f7ff;
|
||||
color: #096dd9;
|
||||
font-size: 11px;
|
||||
border-radius: 12px; /* no */
|
||||
border: 1px solid #d6e4ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
width: 100%;
|
||||
height: 42px; /* no */
|
||||
border: none;
|
||||
border-radius: 21px; /* no */
|
||||
background: linear-gradient(135deg, #081314, #1a2634);
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px; /* no */
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(8, 19, 20, 0.25); /* no */
|
||||
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
box-shadow: 0 2px 8px rgba(8, 19, 20, 0.35); /* no */
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:active .el-icon {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px; /* no */
|
||||
color: #999999;
|
||||
|
||||
p {
|
||||
margin-top: 16px; /* no */
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user