feat: 分模块组件与调接口等
This commit is contained in:
zhangrun
parent
26e14936db
commit
f7c7a334d3
@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>乐望云</title>
|
<title>四川明君科技</title>
|
||||||
<meta name="keywords">
|
<meta name="keywords">
|
||||||
<meta name="description">
|
<meta name="description">
|
||||||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 115 KiB |
@ -1 +1 @@
|
|||||||
window.APP_BASEURL='https://www.byhah.com/api'
|
window.APP_BASEURL='https://www.byhah.com'
|
||||||
@ -2,6 +2,37 @@ import type { Model, Partner, Solution, SystemInfo } from "@/type";
|
|||||||
import http from "./index";
|
import http from "./index";
|
||||||
|
|
||||||
export default class Website {
|
export default class Website {
|
||||||
|
// 获取成功案例数据
|
||||||
|
async toSaveConsult (params: any): Promise<{ data: SystemInfo }> {
|
||||||
|
return http({
|
||||||
|
url: '/test/anon/website/saveConsult',
|
||||||
|
method: 'post',
|
||||||
|
data: params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 获取成功案例数据
|
||||||
|
async getCommentPage (params: any): Promise<{ data: SystemInfo }> {
|
||||||
|
return http({
|
||||||
|
url: '/test/anon/website/commentPage',
|
||||||
|
method: 'get',
|
||||||
|
params: params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 获取成功案例数据
|
||||||
|
async getCasePage (params: any): Promise<{ data: SystemInfo }> {
|
||||||
|
return http({
|
||||||
|
url: '/test/anon/website/casePage',
|
||||||
|
method: 'get',
|
||||||
|
params: params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// new获取系统网站信息
|
||||||
|
async getWebInfo (): Promise<{ data: SystemInfo }> {
|
||||||
|
return http({
|
||||||
|
url: '/test/anon/website/info',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
// 获取系统基本信息
|
// 获取系统基本信息
|
||||||
async getSystemInfo (): Promise<{ data: SystemInfo }> {
|
async getSystemInfo (): Promise<{ data: SystemInfo }> {
|
||||||
return http({
|
return http({
|
||||||
|
|||||||
85
src/views/components/About.vue
Normal file
85
src/views/components/About.vue
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
<template>
|
||||||
|
<section id="about" class="section-padding bg-gradient-to-b from-dark to-dark/95 relative">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||||
|
<div class="text-center max-w-3xl mx-auto mb-16">
|
||||||
|
<div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
|
||||||
|
关于我们
|
||||||
|
</div>
|
||||||
|
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">四川明君科技有限公司</h2>
|
||||||
|
<p class="text-gray-400 text-lg">{{aboutData.aboutUsInfo?.remark || ''}}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8" v-if="aboutData.targets">
|
||||||
|
<div class="bg-dark border border-primary/20 rounded-xl p-8 card-hover" v-for="(item,index) in aboutData.targets" :key="'targets' + index">
|
||||||
|
<div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 neon-border">
|
||||||
|
<i class="fa text-secondary text-2xl" :class="item.name.includes('使命')?'fa-bullseye': item.name.includes('愿景')? 'fa-eye':'fa-balance-scale'"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3 text-secondary">{{item.name || ''}}</h3>
|
||||||
|
<p class="text-gray-400">
|
||||||
|
{{item.remark || ''}}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="bg-dark border border-primary/20 rounded-xl p-8 card-hover">
|
||||||
|
<div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 neon-border">
|
||||||
|
<i class="fa fa-eye text-secondary text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3 text-secondary">我们的愿景</h3>
|
||||||
|
<p class="text-gray-400">
|
||||||
|
成为西南地区领先的智能科技解决方案提供商，打造行业标杆，引领产业创新发展方向。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-dark border border-primary/20 rounded-xl p-8 card-hover">
|
||||||
|
<div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 neon-border">
|
||||||
|
<i class="fa fa-balance-scale text-secondary text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3 text-secondary">核心价值观</h3>
|
||||||
|
<p class="text-gray-400">
|
||||||
|
创新驱动、客户至上、诚信正直、合作共赢，以专业技术和卓越服务赢得客户信赖。
|
||||||
|
</p>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 数据统计 -->
|
||||||
|
<div class="mt-20 grid grid-cols-2 md:grid-cols-4 gap-6" v-if="aboutData.aboutUsInfo && aboutData.aboutUsInfo.items">
|
||||||
|
<div class="bg-dark/50 border border-primary/10 rounded-xl p-6 text-center card-hover" v-for="(item,index) in aboutData.aboutUsInfo.items" :key="'item' + index">
|
||||||
|
<div class="text-4xl md:text-5xl font-bold text-accent mb-2 counter" data-target="12">{{item.num}}</div>
|
||||||
|
<p class="text-gray-400">{{item.title}}</p>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="bg-dark/50 border border-primary/10 rounded-xl p-6 text-center card-hover">
|
||||||
|
<div class="text-4xl md:text-5xl font-bold text-accent mb-2 counter" data-target="600">0</div>
|
||||||
|
<p class="text-gray-400">成功案例</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-dark/50 border border-primary/10 rounded-xl p-6 text-center card-hover">
|
||||||
|
<div class="text-4xl md:text-5xl font-bold text-accent mb-2 counter" data-target="350">0</div>
|
||||||
|
<p class="text-gray-400">合作伙伴</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-dark/50 border border-primary/10 rounded-xl p-6 text-center card-hover">
|
||||||
|
<div class="text-4xl md:text-5xl font-bold text-accent mb-2 counter" data-target="80">0</div>
|
||||||
|
<p class="text-gray-400">技术专家</p>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { computed, onMounted, ref, watch } from 'vue';
|
||||||
|
const props = defineProps({
|
||||||
|
aboutData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
})
|
||||||
|
watch(() => props.aboutData, (val) => {
|
||||||
|
console.log(props.aboutData,'2')
|
||||||
|
}, {
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
195
src/views/components/Case.vue
Normal file
195
src/views/components/Case.vue
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
<template>
|
||||||
|
<section id="cases" class="section-padding bg-dark relative bg-grid">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||||
|
<div class="text-center max-w-3xl mx-auto mb-16">
|
||||||
|
<div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
|
||||||
|
成功案例
|
||||||
|
</div>
|
||||||
|
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">客户成功案例展示</h2>
|
||||||
|
<p class="text-gray-400 text-lg">{{caseData.successInfo?.remark || ''}}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 案例筛选 -->
|
||||||
|
<div class="flex flex-wrap justify-center gap-4 mb-10">
|
||||||
|
<button class="case-filter px-5 py-2 rounded-full"
|
||||||
|
v-for="item in typeList" :key="'type'+ item.type"
|
||||||
|
:class="currentType == item.type? 'active bg-primary text-white font-medium': 'bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors'"
|
||||||
|
@click="changeType(item)"
|
||||||
|
>{{item.name}}</button>
|
||||||
|
<!-- <button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">智慧园区</button>
|
||||||
|
<button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">应急管理</button>
|
||||||
|
<button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">乡村治理</button>
|
||||||
|
<button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">智慧教育</button> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 案例展示 -->
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
<!-- 案例1 -->
|
||||||
|
<div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group" v-for="(item,index) in caseList" :key="'caseitem' + index">
|
||||||
|
<div class="h-56 overflow-hidden relative">
|
||||||
|
<img :src="item.pic" :alt="item.typeName" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||||
|
<div class="absolute top-4 left-4 bg-primary text-white text-sm px-3 py-1 rounded-full" v-if="item.typeId == 1">{{item.typeName}}</div>
|
||||||
|
<div class="absolute top-4 left-4 bg-secondary text-white text-sm px-3 py-1 rounded-full" v-if="item.typeId == 2">{{item.typeName}}</div>
|
||||||
|
<div class="absolute top-4 left-4 bg-green-500 text-white text-sm px-3 py-1 rounded-full" v-if="item.typeId == 3">{{item.typeName}}</div>
|
||||||
|
<div class="absolute top-4 left-4 bg-purple-500 text-white text-sm px-3 py-1 rounded-full" v-if="item.typeId == 4">{{item.typeName}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">{{item.name}}</h3>
|
||||||
|
<p class="text-gray-400 mb-4 line-clamp-2">
|
||||||
|
{{item.remark}}
|
||||||
|
</p>
|
||||||
|
<a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
|
||||||
|
查看详情 <i class="fa fa-arrow-right ml-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 案例2 -->
|
||||||
|
<!-- <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
|
||||||
|
<div class="h-56 overflow-hidden relative">
|
||||||
|
<img src="https://picsum.photos/id/26/600/400" alt="应急管理案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||||
|
<div class="absolute top-4 left-4 bg-secondary text-dark text-sm px-3 py-1 rounded-full">应急管理</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某市应急指挥系统</h3>
|
||||||
|
<p class="text-gray-400 mb-4 line-clamp-2">
|
||||||
|
为某市应急管理局开发了应急指挥系统，实现了突发事件的快速响应和高效指挥调度。
|
||||||
|
</p>
|
||||||
|
<a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
|
||||||
|
查看详情 <i class="fa fa-arrow-right ml-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- 案例3 -->
|
||||||
|
<!-- <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
|
||||||
|
<div class="h-56 overflow-hidden relative">
|
||||||
|
<img src="https://picsum.photos/id/164/600/400" alt="乡村治理案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||||
|
<div class="absolute top-4 left-4 bg-green-500 text-dark text-sm px-3 py-1 rounded-full">乡村治理</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某县乡村治理平台</h3>
|
||||||
|
<p class="text-gray-400 mb-4 line-clamp-2">
|
||||||
|
为某县200多个行政村建设了乡村治理平台，实现了村务公开、平安乡村、便民服务等功能。
|
||||||
|
</p>
|
||||||
|
<a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
|
||||||
|
查看详情 <i class="fa fa-arrow-right ml-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- 案例4 -->
|
||||||
|
<!-- <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
|
||||||
|
<div class="h-56 overflow-hidden relative">
|
||||||
|
<img src="https://picsum.photos/id/20/600/400" alt="智慧教育案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||||
|
<div class="absolute top-4 left-4 bg-purple-500 text-white text-sm px-3 py-1 rounded-full">智慧教育</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某大学智慧校园建设</h3>
|
||||||
|
<p class="text-gray-400 mb-4 line-clamp-2">
|
||||||
|
为某大学建设了智慧校园平台，整合了教学管理、校园安防、后勤服务等系统，提升了管理效率。
|
||||||
|
</p>
|
||||||
|
<a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
|
||||||
|
查看详情 <i class="fa fa-arrow-right ml-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- 案例5 -->
|
||||||
|
<!-- <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
|
||||||
|
<div class="h-56 overflow-hidden relative">
|
||||||
|
<img src="https://picsum.photos/id/48/600/400" alt="智慧园区案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||||
|
<div class="absolute top-4 left-4 bg-primary text-white text-sm px-3 py-1 rounded-full">智慧园区</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某工业园区智能安防系统</h3>
|
||||||
|
<p class="text-gray-400 mb-4 line-clamp-2">
|
||||||
|
为大型工业园区部署了智能安防系统，包括高清监控、周界防范、智能巡检等功能模块。
|
||||||
|
</p>
|
||||||
|
<a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
|
||||||
|
查看详情 <i class="fa fa-arrow-right ml-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- 案例6 -->
|
||||||
|
<!-- <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
|
||||||
|
<div class="h-56 overflow-hidden relative">
|
||||||
|
<img src="https://picsum.photos/id/91/600/400" alt="应急管理案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||||
|
<div class="absolute top-4 left-4 bg-secondary text-dark text-sm px-3 py-1 rounded-full">应急管理</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某景区应急广播系统</h3>
|
||||||
|
<p class="text-gray-400 mb-4 line-clamp-2">
|
||||||
|
为5A级景区部署了智能应急广播系统，覆盖面积达10平方公里，支持分区控制和应急播报。
|
||||||
|
</p>
|
||||||
|
<a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
|
||||||
|
查看详情 <i class="fa fa-arrow-right ml-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center mt-12">
|
||||||
|
<a href="#contact" class="btn-secondary inline-flex items-center">
|
||||||
|
查看更多案例 <i class="fa fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import Website from "@/api/api";
|
||||||
|
import { computed, onMounted, ref, watch } from 'vue';
|
||||||
|
const props = defineProps({
|
||||||
|
caseData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
getCaseData()
|
||||||
|
})
|
||||||
|
const typeList = ref([
|
||||||
|
{type: '0',name: '全部案例',id: 'all000'},
|
||||||
|
])
|
||||||
|
const caseList = ref([])
|
||||||
|
watch(() => props.caseData, (val) => {
|
||||||
|
console.log(props.caseData,'5')
|
||||||
|
props.caseData.caseTypes?.forEach((itm,idx) => {
|
||||||
|
itm.type = idx + 1
|
||||||
|
typeList.value.push(itm)
|
||||||
|
});
|
||||||
|
}, {
|
||||||
|
deep: false
|
||||||
|
})
|
||||||
|
const currentType = ref('0')
|
||||||
|
|
||||||
|
const getCaseData = async () => {
|
||||||
|
console.log('88')
|
||||||
|
const website = new Website()
|
||||||
|
const res = await website.getCasePage({typeId: '0',pageNum: 1,pageSize: 10})
|
||||||
|
console.log('66',res)
|
||||||
|
if(res.code == 200){
|
||||||
|
let resLs = res.data?.records || []
|
||||||
|
if(resLs.length > 0){
|
||||||
|
caseList.value = resLs
|
||||||
|
} else {
|
||||||
|
caseList.value = [
|
||||||
|
{
|
||||||
|
name: '某科技园区智能管理系统',pic: 'https://picsum.photos/id/42/600/400',
|
||||||
|
remark: '为占地500亩的科技园区提供了全套智能管理解决方案，包括智能安防、停车管理、能源监控等系统。',
|
||||||
|
typeName: '智慧园区',typeId: 1
|
||||||
|
} // 测试数据
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const changeType = (item) => {
|
||||||
|
currentType.value = item.type
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
291
src/views/components/Contact.vue
Normal file
291
src/views/components/Contact.vue
Normal file
@ -0,0 +1,291 @@
|
|||||||
|
<template>
|
||||||
|
<section id="contact" class="section-padding bg-dark relative bg-grid">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||||
|
<div class="text-center max-w-3xl mx-auto mb-16">
|
||||||
|
<div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
|
||||||
|
联系我们
|
||||||
|
</div>
|
||||||
|
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">咨询解决方案</h2>
|
||||||
|
<p class="text-gray-400 text-lg">填写下方表单或通过以下方式联系我们，我们将尽快为您提供专业的解决方案</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<div class="space-y-8">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-semibold mb-6 text-secondary">联系方式</h3>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 neon-border">
|
||||||
|
<i class="fa fa-map-marker text-secondary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-medium mb-1">公司地址</h4>
|
||||||
|
<p class="text-gray-400">{{contactData.contactInfo?.address || ''}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start" v-if="contactData.contactInfo?.phone">
|
||||||
|
<div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 neon-border">
|
||||||
|
<i class="fa fa-phone text-secondary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-medium mb-1">联系电话</h4>
|
||||||
|
<p class="text-gray-400" v-for="pitem,pindex in contactData.contactInfo.phoneArr" :key="'phone' + pindex">{{pitem}}</p>
|
||||||
|
<!-- <p class="text-gray-400">138-8888-7777</p> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start" v-if="contactData.contactInfo?.email">
|
||||||
|
<div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 neon-border">
|
||||||
|
<i class="fa fa-envelope text-secondary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-medium mb-1">电子邮箱</h4>
|
||||||
|
<p class="text-gray-400" v-for="eitem,eindex in contactData.contactInfo.emailArr" :key="'email' + eindex">{{eitem}}</p>
|
||||||
|
<!-- <p class="text-gray-400">service@mingjuntech.com</p> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start" v-if="contactData.contactInfo?.workInfo">
|
||||||
|
<div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 neon-border">
|
||||||
|
<i class="fa fa-clock-o text-secondary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-medium mb-1">工作时间</h4>
|
||||||
|
<p class="text-gray-400" v-for="titem,tindex in contactData.contactInfo.workInfoArr" :key="'time' + tindex">{{titem}}</p>
|
||||||
|
<!-- <p class="text-gray-400">周六: 9:00 - 12:00</p> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-secondary">关注我们</h3>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center hover:bg-primary/40 transition-colors neon-border">
|
||||||
|
<i class="fa fa-weixin text-secondary text-xl"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center hover:bg-primary/40 transition-colors neon-border">
|
||||||
|
<i class="fa fa-weibo text-secondary text-xl"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center hover:bg-primary/40 transition-colors neon-border">
|
||||||
|
<i class="fa fa-linkedin text-secondary text-xl"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center hover:bg-primary/40 transition-colors neon-border">
|
||||||
|
<i class="fa fa-youtube-play text-secondary text-xl"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover">
|
||||||
|
<h3 class="text-2xl font-semibold mb-6 text-secondary">咨询表单</h3>
|
||||||
|
<!-- <form> -->
|
||||||
|
<div class="grid md:grid-cols-2 gap-6 mb-6">
|
||||||
|
<div>
|
||||||
|
<label for="name" class="block text-gray-400 mb-2">姓名</label>
|
||||||
|
<input type="text" id="name" v-model="formData.name" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="请输入您的姓名">
|
||||||
|
<div class="formErrorTips text-sm" v-if="errors.name">{{ errors.name }}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="phone" class="block text-gray-400 mb-2">电话</label>
|
||||||
|
<input type="tel" id="phone" v-model="formData.phone" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="请输入您的电话">
|
||||||
|
<div class="formErrorTips text-sm" v-if="errors.phone">{{ errors.phone }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-6">
|
||||||
|
<label for="email" class="block text-gray-400 mb-2">邮箱</label>
|
||||||
|
<input type="email" id="email" v-model="formData.email" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="请输入您的邮箱">
|
||||||
|
<div class="formErrorTips text-sm" v-if="errors.email">{{ errors.email }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-6">
|
||||||
|
<label for="service" class="block text-gray-400 mb-2">咨询服务</label>
|
||||||
|
<select id="service" v-model="formData.service" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors">
|
||||||
|
<option value="">请选择咨询服务类型</option>
|
||||||
|
<option :value="item.id" v-for="(item,index) in serviceOption" :key="'serviceOption' + index">{{item.name}}</option>
|
||||||
|
<!-- <option value="software-park">智慧园区解决方案</option>
|
||||||
|
<option value="software-emergency">应急管理系统</option>
|
||||||
|
<option value="software-village">乡村治理平台</option>
|
||||||
|
<option value="software-education">智慧教育解决方案</option>
|
||||||
|
<option value="other">其他服务咨询</option> -->
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-6">
|
||||||
|
<label for="message" class="block text-gray-400 mb-2">留言内容</label>
|
||||||
|
<textarea id="message" v-model="formData.message" rows="4" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="请输入您的需求或问题"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="w-full btn-primary flex items-center justify-center" :disabled="isSubmitting" @click.stop="toDoSubmit">
|
||||||
|
<i class="fa fa-paper-plane mr-2"></i> {{ isSubmitting ? '提交中...' : '提交咨询' }}
|
||||||
|
</button>
|
||||||
|
<div v-if="submitSuccess" class="success-message">
|
||||||
|
<i class="fa fa-check-circle"></i>
|
||||||
|
<span>提交成功！我们会尽快与您联系。</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="submitError" class="error-message">
|
||||||
|
<i class="fa fa-exclamation-circle"></i> {{ submitError }}
|
||||||
|
</div>
|
||||||
|
<!-- </form> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import Website from "@/api/api";
|
||||||
|
import { computed, onMounted, ref, watch } from 'vue';
|
||||||
|
const props = defineProps({
|
||||||
|
contactData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const serviceOption = ref([])
|
||||||
|
watch(() => props.contactData, (val) => {
|
||||||
|
console.log(props.contactData,'7')
|
||||||
|
serviceOption.value = val.consultTypes || []
|
||||||
|
if(val.contactInfo){
|
||||||
|
val.contactInfo.phoneArr = val.contactInfo.phone.split('\n')
|
||||||
|
val.contactInfo.emailArr = val.contactInfo.email.split('\n')
|
||||||
|
val.contactInfo.workInfoArr = val.contactInfo.workInfo.split('\n')
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
deep: false
|
||||||
|
})
|
||||||
|
const formData = ref({
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
service: '',
|
||||||
|
message: ''
|
||||||
|
});
|
||||||
|
const errors = ref({
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
service: ''
|
||||||
|
});
|
||||||
|
const isSubmitting = ref(false);
|
||||||
|
const submitSuccess = ref(false);
|
||||||
|
const submitError = ref('')
|
||||||
|
const toDoSubmit = async () => {
|
||||||
|
console.log(formData.value.name,'1')
|
||||||
|
console.log(formData.value.phone,'2')
|
||||||
|
console.log(formData.value.email,'3')
|
||||||
|
console.log(formData.value.service,'4')
|
||||||
|
console.log(formData.value.message,'5')
|
||||||
|
// 重置状态
|
||||||
|
submitSuccess.value = false;
|
||||||
|
submitError.value = '';
|
||||||
|
// 验证表单
|
||||||
|
if (!validateForm()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log('可以发请求了')
|
||||||
|
isSubmitting.value = true;
|
||||||
|
let params = {
|
||||||
|
"name": formData.value.name,
|
||||||
|
"phone": formData.value.phone,
|
||||||
|
"email": formData.value.email,
|
||||||
|
"typeId": formData.value.service,
|
||||||
|
"content": formData.value.message
|
||||||
|
}
|
||||||
|
const website = new Website()
|
||||||
|
try {
|
||||||
|
const res = await website.toSaveConsult(params)
|
||||||
|
if(res.code === 200){
|
||||||
|
submitSuccess.value = true
|
||||||
|
formData.value = {
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
service: '',
|
||||||
|
message: ''
|
||||||
|
};
|
||||||
|
isSubmitting.value = false;
|
||||||
|
} else {
|
||||||
|
isSubmitting.value = false;
|
||||||
|
submitError.value = '提交失败，请稍后再试。'
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
isSubmitting.value = false;
|
||||||
|
submitError.value = '提交失败，请稍后再试。'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const validateField = (fieldName, value) => {
|
||||||
|
let isValid = true;
|
||||||
|
|
||||||
|
switch(fieldName) {
|
||||||
|
case 'name':
|
||||||
|
if (!value.trim()) {
|
||||||
|
errors.value.name = '姓名是必填项';
|
||||||
|
isValid = false;
|
||||||
|
} else {
|
||||||
|
errors.value.name = '';
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'phone':
|
||||||
|
if (!value.trim()) {
|
||||||
|
errors.value.phone = '电话是必填项';
|
||||||
|
isValid = false;
|
||||||
|
} else if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||||
|
errors.value.phone = '请输入有效的手机号码';
|
||||||
|
isValid = false;
|
||||||
|
} else {
|
||||||
|
errors.value.phone = '';
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'email':
|
||||||
|
if (!value.trim()) {
|
||||||
|
errors.value.email = '邮箱是必填项';
|
||||||
|
isValid = false;
|
||||||
|
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
|
||||||
|
errors.value.email = '请输入有效的邮箱地址';
|
||||||
|
isValid = false;
|
||||||
|
} else {
|
||||||
|
errors.value.email = '';
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'service':
|
||||||
|
if (!value) {
|
||||||
|
errors.value.service = '请选择咨询服务类型';
|
||||||
|
isValid = false;
|
||||||
|
} else {
|
||||||
|
errors.value.service = '';
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return isValid;
|
||||||
|
};
|
||||||
|
|
||||||
|
const validateForm = () => {
|
||||||
|
let isValid = true;
|
||||||
|
|
||||||
|
isValid = validateField('name', formData.value.name) && isValid;
|
||||||
|
isValid = validateField('phone', formData.value.phone) && isValid;
|
||||||
|
isValid = validateField('email', formData.value.email) && isValid;
|
||||||
|
// isValid = validateField('service', formData.value.service) && isValid;
|
||||||
|
|
||||||
|
return isValid;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.success-message{
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
.error-message{
|
||||||
|
text-align: center;
|
||||||
|
color: #f00;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
129
src/views/components/Evaluate.vue
Normal file
129
src/views/components/Evaluate.vue
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
<template>
|
||||||
|
<section class="section-padding bg-gradient-to-b from-dark to-dark/95 relative">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||||
|
<div class="text-center max-w-3xl mx-auto mb-16">
|
||||||
|
<div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
|
||||||
|
客户评价
|
||||||
|
</div>
|
||||||
|
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">客户对我们的评价</h2>
|
||||||
|
<p class="text-gray-400 text-lg">听听我们的客户怎么说，他们的满意是我们前进的动力</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<!-- 评价1 -->
|
||||||
|
<div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover" v-for="(item,index) in commentList" :key="'commentitem' + index">
|
||||||
|
<div class="flex items-center mb-6">
|
||||||
|
<img :src="item.avatar" alt="客户头像" class="w-14 h-14 rounded-full object-cover mr-4 border-2 border-secondary">
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-secondary">{{item.name}}</h4>
|
||||||
|
<p class="text-gray-400 text-sm">某科技园区</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-yellow-400 mb-4">
|
||||||
|
<i class="fa fa-star mgr" v-for="(starit,sindex) in item.starShow" :key="'stat' + item.id + sindex"></i>
|
||||||
|
<i class="fa fa-star-half-o mgr" v-if="item.starShowHalf"></i>
|
||||||
|
<!-- <i class="fa fa-star mgr"></i>
|
||||||
|
<i class="fa fa-star mgr"></i>
|
||||||
|
<i class="fa fa-star mgr"></i>
|
||||||
|
<i class="fa fa-star mgr"></i> -->
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-400 italic">
|
||||||
|
{{item.content}}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 评价2 -->
|
||||||
|
<!-- <div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover">
|
||||||
|
<div class="flex items-center mb-6">
|
||||||
|
<img src="https://picsum.photos/id/65/100/100" alt="客户头像" class="w-14 h-14 rounded-full object-cover mr-4 border-2 border-secondary">
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-secondary">李局长</h4>
|
||||||
|
<p class="text-gray-400 text-sm">某应急管理局</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-yellow-400 mb-4">
|
||||||
|
<i class="fa fa-star mgr"></i>
|
||||||
|
<i class="fa fa-star mgr"></i>
|
||||||
|
<i class="fa fa-star mgr"></i>
|
||||||
|
<i class="fa fa-star mgr"></i>
|
||||||
|
<i class="fa fa-star-half-o mgr"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-400 italic">
|
||||||
|
"应急指挥系统在几次突发事件中发挥了关键作用，反应迅速，调度高效。明君科技的技术支持也非常及时，解决问题能力强，是可靠的合作伙伴。"
|
||||||
|
</p>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- 评价3 -->
|
||||||
|
<!-- <div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover">
|
||||||
|
<div class="flex items-center mb-6">
|
||||||
|
<img src="https://picsum.photos/id/91/100/100" alt="客户头像" class="w-14 h-14 rounded-full object-cover mr-4 border-2 border-secondary">
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-secondary">王校长</h4>
|
||||||
|
<p class="text-gray-400 text-sm">某大学</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-yellow-400 mb-4">
|
||||||
|
<i class="fa fa-star mgr"></i>
|
||||||
|
<i class="fa fa-star mgr"></i>
|
||||||
|
<i class="fa fa-star mgr"></i>
|
||||||
|
<i class="fa fa-star mgr"></i>
|
||||||
|
<i class="fa fa-star mgr"></i>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-400 italic">
|
||||||
|
"智慧校园平台极大地提升了我们的管理效率和教学质量，学生和老师的反馈都非常好。明君科技的定制化能力很强，能够根据我们的需求提供个性化解决方案。"
|
||||||
|
</p>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import Website from "@/api/api";
|
||||||
|
import { computed, onMounted, ref, watch } from 'vue';
|
||||||
|
onMounted(() => {
|
||||||
|
getCommentData()
|
||||||
|
})
|
||||||
|
const commentList = ref([])
|
||||||
|
|
||||||
|
const getCommentData = async () => {
|
||||||
|
console.log('00')
|
||||||
|
const website = new Website()
|
||||||
|
const res = await website.getCommentPage({pageNum: 1,pageSize: 10})
|
||||||
|
console.log('77',res)
|
||||||
|
if(res.code == 200){
|
||||||
|
let resLs = res.data?.records || []
|
||||||
|
if(resLs.length > 0){
|
||||||
|
resLs.forEach(element => {
|
||||||
|
let star = Number(element.star)
|
||||||
|
if(!star){
|
||||||
|
element.starShow = 0
|
||||||
|
element.starShowHalf = false
|
||||||
|
} else {
|
||||||
|
if(Number.isInteger(star)){
|
||||||
|
element.starShow = star
|
||||||
|
element.starShowHalf = false
|
||||||
|
} else {
|
||||||
|
element.starShow = Math.trunc(star)
|
||||||
|
element.starShowHalf = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
commentList.value = resLs
|
||||||
|
} else {
|
||||||
|
commentList.value = [
|
||||||
|
{
|
||||||
|
id: 1790,
|
||||||
|
name: '张经理',avatar: 'https://picsum.photos/id/64/100/100',
|
||||||
|
remark: '某科技园区',
|
||||||
|
starShow: 5,
|
||||||
|
starShowHalf: false,
|
||||||
|
content: '"明君科技为我们园区提供的智能管理系统非常出色，不仅提升了管理效率，也为入驻企业提供了更好的服务体验。他们的技术团队专业且负责，值得信赖。"',star: 4.5
|
||||||
|
} // 测试数据
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
125
src/views/components/Hardware.vue
Normal file
125
src/views/components/Hardware.vue
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
<template>
|
||||||
|
<section id="hardware" class="section-padding bg-dark relative bg-grid">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||||
|
<div class="text-center max-w-3xl mx-auto mb-16">
|
||||||
|
<div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
|
||||||
|
硬件产品
|
||||||
|
</div>
|
||||||
|
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">智能硬件解决方案</h2>
|
||||||
|
<p class="text-gray-400 text-lg">{{hardwareData.productInfo?.remark || ''}}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8" v-if="hardwareData.products">
|
||||||
|
<!-- 摄像头 -->
|
||||||
|
<div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover" v-for="(item,index) in hardwareData.products" :key="'products' + index">
|
||||||
|
<div class="h-56 overflow-hidden relative">
|
||||||
|
<img :src="item.pic || 'https://picsum.photos/id/96/600/400'" :alt="item.name" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
|
||||||
|
<div class="absolute top-4 left-4 text-dark px-3 py-1 rounded-full text-sm font-medium" :class="item.tag.includes('热销')?'bg-secondary': item.tag.includes('新品')? 'bg-accent': 'bg-green-500'">
|
||||||
|
{{item.tag}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="text-xl font-semibold mb-3 text-secondary">{{item.name}}</h3>
|
||||||
|
<p class="text-gray-400 mb-4">
|
||||||
|
{{item.remark}}
|
||||||
|
</p>
|
||||||
|
<ul class="space-y-2 mb-6" v-if="item.extra && item.extra.advantages">
|
||||||
|
<li class="flex items-center text-sm text-gray-400" v-for="(sitem,sindex) in item.extra.advantages" :key="'advantages' + sindex">
|
||||||
|
<i class="fa fa-check-circle text-accent mr-2"></i> {{sitem.name}}
|
||||||
|
</li>
|
||||||
|
<!-- <li class="flex items-center text-sm text-gray-400">
|
||||||
|
<i class="fa fa-check-circle text-accent mr-2"></i> 支持IP66防水等级
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center text-sm text-gray-400">
|
||||||
|
<i class="fa fa-check-circle text-accent mr-2"></i> 内置AI智能算法
|
||||||
|
</li> -->
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="block text-center btn-primary">了解详情</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 应急广播 -->
|
||||||
|
<!-- <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover">
|
||||||
|
<div class="h-56 overflow-hidden relative">
|
||||||
|
<img src="https://picsum.photos/id/119/600/400" alt="智能应急广播系统" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
|
||||||
|
<div class="absolute top-4 left-4 bg-accent text-dark px-3 py-1 rounded-full text-sm font-medium">
|
||||||
|
新品上市
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="text-xl font-semibold mb-3 text-secondary">智能应急广播系统</h3>
|
||||||
|
<p class="text-gray-400 mb-4">
|
||||||
|
支持多区域控制，IP网络传输，远程管理，适用于校园、社区、景区等场所的应急通知和日常广播。
|
||||||
|
</p>
|
||||||
|
<ul class="space-y-2 mb-6">
|
||||||
|
<li class="flex items-center text-sm text-gray-400">
|
||||||
|
<i class="fa fa-check-circle text-accent mr-2"></i> 应急响应时间<1秒
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center text-sm text-gray-400">
|
||||||
|
<i class="fa fa-check-circle text-accent mr-2"></i> 支持多种触发方式
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center text-sm text-gray-400">
|
||||||
|
<i class="fa fa-check-circle text-accent mr-2"></i> 覆盖半径可达1公里
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="block text-center btn-primary">了解详情</a>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- 服务器 -->
|
||||||
|
<!-- <div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover">
|
||||||
|
<div class="h-56 overflow-hidden relative">
|
||||||
|
<img src="https://picsum.photos/id/180/600/400" alt="高性能服务器" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
|
||||||
|
<div class="absolute top-4 left-4 bg-green-500 text-dark px-3 py-1 rounded-full text-sm font-medium">
|
||||||
|
稳定可靠
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="text-xl font-semibold mb-3 text-secondary">高性能服务器</h3>
|
||||||
|
<p class="text-gray-400 mb-4">
|
||||||
|
企业级高性能服务器，支持虚拟化技术，高可靠性，适用于数据中心、云计算平台、大型企业应用。
|
||||||
|
</p>
|
||||||
|
<ul class="space-y-2 mb-6">
|
||||||
|
<li class="flex items-center text-sm text-gray-400">
|
||||||
|
<i class="fa fa-check-circle text-accent mr-2"></i> 支持24小时不间断运行
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center text-sm text-gray-400">
|
||||||
|
<i class="fa fa-check-circle text-accent mr-2"></i> 冗余电源设计
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center text-sm text-gray-400">
|
||||||
|
<i class="fa fa-check-circle text-accent mr-2"></i> 可扩展性强
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#contact" class="block text-center btn-primary">了解详情</a>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center mt-12">
|
||||||
|
<a href="#contact" class="btn-secondary inline-flex items-center">
|
||||||
|
查看全部产品 <i class="fa fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { computed, onMounted, ref, watch } from 'vue';
|
||||||
|
const props = defineProps({
|
||||||
|
hardwareData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
})
|
||||||
|
watch(() => props.hardwareData, (val) => {
|
||||||
|
console.log(props.hardwareData,'3')
|
||||||
|
}, {
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
102
src/views/components/Home.vue
Normal file
102
src/views/components/Home.vue
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<section id="home" class="pt-32 pb-20 md:pt-40 md:pb-32 relative bg-grid overflow-hidden">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<div class="space-y-6 max-w-xl">
|
||||||
|
<div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-2">
|
||||||
|
智慧科技解决方案提供商
|
||||||
|
</div>
|
||||||
|
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-glow">
|
||||||
|
创新科技<br><span class="bg-clip-text text-transparent bg-gradient-to-r from-secondary to-accent">引领未来</span>
|
||||||
|
</h1>
|
||||||
|
<p class="text-gray-300 text-lg md:text-xl">
|
||||||
|
{{homeData.remark || ''}}
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 pt-4">
|
||||||
|
<a href="#contact" class="btn-primary text-center flex items-center justify-center">
|
||||||
|
<i class="fa fa-rocket mr-2"></i> 立即咨询
|
||||||
|
</a>
|
||||||
|
<a href="#cases" class="btn-secondary text-center flex items-center justify-center">
|
||||||
|
<i class="fa fa-play-circle mr-2"></i> 案例展示
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 技术优势 -->
|
||||||
|
<div class="pt-8 grid grid-cols-2 gap-4" v-if="homeData.services">
|
||||||
|
<div class="flex items-center" v-for="(item,index) in homeData.services" :key="'services' + index">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary/30 flex items-center justify-center mr-3">
|
||||||
|
<i class="fa fa-check text-accent"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm">{{item || '-'}}</span>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="flex items-center">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary/30 flex items-center justify-center mr-3">
|
||||||
|
<i class="fa fa-check text-accent"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm">定制化解决方案</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary/30 flex items-center justify-center mr-3">
|
||||||
|
<i class="fa fa-check text-accent"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm">专业技术团队</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-8 h-8 rounded-full bg-primary/30 flex items-center justify-center mr-3">
|
||||||
|
<i class="fa fa-check text-accent"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm">完善售后服务</span>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div class="relative z-10 rounded-2xl overflow-hidden transform md:rotate-1 transition-transform hover:rotate-0 duration-500 neon-border">
|
||||||
|
<img :src="homeData.sloganUrl || 'https://picsum.photos/id/1/800/600'" alt="智能科技解决方案展示" class="w-full h-auto homePic">
|
||||||
|
<!-- 悬浮数据指标 -->
|
||||||
|
<div class="absolute top-4 right-4 bg-dark/80 backdrop-blur-sm px-3 py-2 rounded-lg border border-secondary/30">
|
||||||
|
<div class="text-accent font-mono text-lg">99.9% 可靠性</div>
|
||||||
|
<div class="text-xs text-gray-400">系统稳定性</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 装饰元素 -->
|
||||||
|
<div class="absolute -bottom-6 -left-6 w-40 h-40 bg-secondary/20 rounded-full blur-3xl"></div>
|
||||||
|
<div class="absolute -top-6 -right-6 w-40 h-40 bg-primary/20 rounded-full blur-3xl"></div>
|
||||||
|
<!-- 几何装饰 -->
|
||||||
|
<div class="absolute top-1/4 -left-10 w-16 h-16 border border-accent/30 rotate-45"></div>
|
||||||
|
<div class="absolute bottom-1/3 -right-8 w-12 h-12 rounded-full border border-secondary/50"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 波浪分隔线 -->
|
||||||
|
<div class="absolute bottom-0 left-0 right-0">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" class="w-full h-auto">
|
||||||
|
<path fill="#0A1128" fill-opacity="1" d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,100L1360,100C1280,100,1120,100,960,100C800,100,640,100,480,100C320,100,160,100,80,100L0,100Z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { computed, onMounted, ref, watch } from 'vue';
|
||||||
|
const props = defineProps({
|
||||||
|
homeData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
console.log(props.homeData)
|
||||||
|
})
|
||||||
|
watch(() => props.homeData, (val) => {
|
||||||
|
console.log(props.homeData,'1')
|
||||||
|
}, {
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.homePic{
|
||||||
|
max-height: 534px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
143
src/views/components/Software.vue
Normal file
143
src/views/components/Software.vue
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
<template>
|
||||||
|
<section id="software" class="section-padding bg-gradient-to-b from-dark to-dark/95 relative">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||||
|
<div class="text-center max-w-3xl mx-auto mb-16">
|
||||||
|
<div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
|
||||||
|
软件服务
|
||||||
|
</div>
|
||||||
|
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">定制化软件解决方案</h2>
|
||||||
|
<p class="text-gray-400 text-lg">{{softwareData.softwareInfo?.remark || ''}}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-8 lg:gap-12" v-if="softwareData.plans">
|
||||||
|
<!-- 智慧园区 -->
|
||||||
|
<div class="flex gap-6 items-center bg-dark/40 border border-primary/10 rounded-xl p-6 md:p-8 card-hover" v-for="(item,index) in softwareData.plans" :key="'plans' + index">
|
||||||
|
<div class="w-20 h-20 flex-shrink-0 bg-primary/20 rounded-xl flex items-center justify-center neon-border">
|
||||||
|
<i class="fa fa-ambulance text-secondary text-3xl" v-if="item.name.includes('应急管理')"></i>
|
||||||
|
<i class="fa fa-home text-secondary text-3xl" v-else-if="item.name.includes('乡村治理')"></i>
|
||||||
|
<i class="fa fa-graduation-cap text-secondary text-3xl" v-else-if="item.name.includes('智慧教育')"></i>
|
||||||
|
<i class="fa fa-building-o text-secondary text-3xl" v-else></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3 text-secondary">{{item.name || ''}}</h3>
|
||||||
|
<p class="text-gray-400 mb-4">
|
||||||
|
{{item.remark || ''}}
|
||||||
|
</p>
|
||||||
|
<a href="#contact" class="text-accent font-medium inline-flex items-center hover:underline">
|
||||||
|
了解更多 <i class="fa fa-angle-right ml-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 应急管理 -->
|
||||||
|
<!-- <div class="flex gap-6 items-center bg-dark/40 border border-primary/10 rounded-xl p-6 md:p-8 card-hover">
|
||||||
|
<div class="w-20 h-20 flex-shrink-0 bg-primary/20 rounded-xl flex items-center justify-center neon-border">
|
||||||
|
<i class="fa fa-ambulance text-secondary text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3 text-secondary">应急管理系统</h3>
|
||||||
|
<p class="text-gray-400 mb-4">
|
||||||
|
实现突发事件的快速响应、指挥调度、资源调配和事后评估，提升应急处理能力和效率。
|
||||||
|
</p>
|
||||||
|
<a href="#contact" class="text-accent font-medium inline-flex items-center hover:underline">
|
||||||
|
了解更多 <i class="fa fa-angle-right ml-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- 乡村治理 -->
|
||||||
|
<!-- <div class="flex gap-6 items-center bg-dark/40 border border-primary/10 rounded-xl p-6 md:p-8 card-hover">
|
||||||
|
<div class="w-20 h-20 flex-shrink-0 bg-primary/20 rounded-xl flex items-center justify-center neon-border">
|
||||||
|
<i class="fa fa-home text-secondary text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3 text-secondary">乡村治理平台</h3>
|
||||||
|
<p class="text-gray-400 mb-4">
|
||||||
|
整合村务管理、平安乡村、便民服务等功能，提升乡村治理数字化水平，助力乡村振兴。
|
||||||
|
</p>
|
||||||
|
<a href="#contact" class="text-accent font-medium inline-flex items-center hover:underline">
|
||||||
|
了解更多 <i class="fa fa-angle-right ml-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- 智慧教育 -->
|
||||||
|
<!-- <div class="flex gap-6 items-center bg-dark/40 border border-primary/10 rounded-xl p-6 md:p-8 card-hover">
|
||||||
|
<div class="w-20 h-20 flex-shrink-0 bg-primary/20 rounded-xl flex items-center justify-center neon-border">
|
||||||
|
<i class="fa fa-graduation-cap text-secondary text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3 text-secondary">智慧教育解决方案</h3>
|
||||||
|
<p class="text-gray-400 mb-4">
|
||||||
|
构建智慧教学、校园管理、家校互动一体化平台，提升教学质量和管理效率，打造智慧校园。
|
||||||
|
</p>
|
||||||
|
<a href="#contact" class="text-accent font-medium inline-flex items-center hover:underline">
|
||||||
|
了解更多 <i class="fa fa-angle-right ml-1"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 服务流程 -->
|
||||||
|
<div class="mt-20">
|
||||||
|
<h3 class="text-2xl font-bold text-center mb-12 text-secondary">我们的服务流程</h3>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 relative">
|
||||||
|
<!-- 连接线 - 仅在中等屏幕以上显示 -->
|
||||||
|
<div class="hidden md:block absolute top-1/4 left-0 right-0 h-1 bg-gradient-to-r from-primary to-secondary -translate-y-1/2 z-0"></div>
|
||||||
|
|
||||||
|
<div class="relative z-10 bg-dark/60 border border-primary/20 rounded-xl p-6 text-center card-hover">
|
||||||
|
<div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 neon-border">
|
||||||
|
<span class="font-bold">1</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-semibold mb-2 text-secondary">需求分析</h4>
|
||||||
|
<p class="text-gray-400 text-sm">深入了解客户需求，进行详细分析和评估</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative z-10 bg-dark/60 border border-primary/20 rounded-xl p-6 text-center card-hover">
|
||||||
|
<div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 neon-border">
|
||||||
|
<span class="font-bold">2</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-semibold mb-2 text-secondary">方案设计</h4>
|
||||||
|
<p class="text-gray-400 text-sm">根据需求制定个性化解决方案和实施计划</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative z-10 bg-dark/60 border border-primary/20 rounded-xl p-6 text-center card-hover">
|
||||||
|
<div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 neon-border">
|
||||||
|
<span class="font-bold">3</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-semibold mb-2 text-secondary">开发实施</h4>
|
||||||
|
<p class="text-gray-400 text-sm">专业团队进行开发、部署和系统集成</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative z-10 bg-dark/60 border border-primary/20 rounded-xl p-6 text-center card-hover">
|
||||||
|
<div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 neon-border">
|
||||||
|
<span class="font-bold">4</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-semibold mb-2 text-secondary">运维支持</h4>
|
||||||
|
<p class="text-gray-400 text-sm">提供持续的技术支持和系统维护服务</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { computed, onMounted, ref, watch } from 'vue';
|
||||||
|
const props = defineProps({
|
||||||
|
softwareData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
})
|
||||||
|
watch(() => props.softwareData, (val) => {
|
||||||
|
console.log(props.softwareData,'4')
|
||||||
|
}, {
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -28,14 +28,14 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 移动端菜单按钮 -->
|
<!-- 移动端菜单按钮 -->
|
||||||
<button id="menu-toggle" class="md:hidden text-light hover:text-secondary">
|
<button id="menu-toggle" class="md:hidden text-light hover:text-secondary" @click="showMobilMenu">
|
||||||
<i class="fa fa-bars text-2xl"></i>
|
<i class="fa fa-bars text-2xl"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 移动端导航菜单 -->
|
<!-- 移动端导航菜单 -->
|
||||||
<div id="mobile-menu" class="md:hidden hidden bg-dark/95 backdrop-blur-md border-t border-primary/20">
|
<div id="mobile-menu" class="md:hidden bg-dark/95 backdrop-blur-md border-t border-primary/20" :class="showMobilMenuFlag?'':'hidden'">
|
||||||
<div class="container mx-auto px-4 py-3 space-y-3">
|
<div class="container mx-auto px-4 py-3 space-y-3">
|
||||||
<a href="#home" class="block py-2 text-light hover:text-secondary font-medium">首页</a>
|
<a href="#home" class="block py-2 text-light hover:text-secondary font-medium">首页</a>
|
||||||
<a href="#hardware" class="block py-2 text-light hover:text-secondary font-medium">硬件产品</a>
|
<a href="#hardware" class="block py-2 text-light hover:text-secondary font-medium">硬件产品</a>
|
||||||
@ -50,712 +50,30 @@
|
|||||||
|
|
||||||
<main>
|
<main>
|
||||||
<!-- 英雄区域 -->
|
<!-- 英雄区域 -->
|
||||||
<section id="home" class="pt-32 pb-20 md:pt-40 md:pb-32 relative bg-grid overflow-hidden">
|
<Home :home-data="homeData"></Home>
|
||||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div class="space-y-6 max-w-xl">
|
|
||||||
<div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-2">
|
|
||||||
智慧科技解决方案提供商
|
|
||||||
</div>
|
|
||||||
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-glow">
|
|
||||||
创新科技<br><span class="bg-clip-text text-transparent bg-gradient-to-r from-secondary to-accent">引领未来</span>
|
|
||||||
</h1>
|
|
||||||
<p class="text-gray-300 text-lg md:text-xl">
|
|
||||||
四川明君科技专注于智能硬件销售与定制化软件服务，为智慧园区、应急管理、乡村治理、智慧教育等领域提供一体化解决方案。
|
|
||||||
</p>
|
|
||||||
<div class="flex flex-col sm:flex-row gap-4 pt-4">
|
|
||||||
<a href="#contact" class="btn-primary text-center flex items-center justify-center">
|
|
||||||
<i class="fa fa-rocket mr-2"></i> 立即咨询
|
|
||||||
</a>
|
|
||||||
<a href="#cases" class="btn-secondary text-center flex items-center justify-center">
|
|
||||||
<i class="fa fa-play-circle mr-2"></i> 案例展示
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 技术优势 -->
|
|
||||||
<div class="pt-8 grid grid-cols-2 gap-4">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-primary/30 flex items-center justify-center mr-3">
|
|
||||||
<i class="fa fa-check text-accent"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm">10年+行业经验</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-primary/30 flex items-center justify-center mr-3">
|
|
||||||
<i class="fa fa-check text-accent"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm">定制化解决方案</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-primary/30 flex items-center justify-center mr-3">
|
|
||||||
<i class="fa fa-check text-accent"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm">专业技术团队</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-primary/30 flex items-center justify-center mr-3">
|
|
||||||
<i class="fa fa-check text-accent"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm">完善售后服务</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="relative">
|
|
||||||
<div class="relative z-10 rounded-2xl overflow-hidden transform md:rotate-1 transition-transform hover:rotate-0 duration-500 neon-border">
|
|
||||||
<img src="https://picsum.photos/id/1/800/600" alt="智能科技解决方案展示" class="w-full h-auto">
|
|
||||||
<!-- 悬浮数据指标 -->
|
|
||||||
<div class="absolute top-4 right-4 bg-dark/80 backdrop-blur-sm px-3 py-2 rounded-lg border border-secondary/30">
|
|
||||||
<div class="text-accent font-mono text-lg">99.9% 可靠性</div>
|
|
||||||
<div class="text-xs text-gray-400">系统稳定性</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 装饰元素 -->
|
|
||||||
<div class="absolute -bottom-6 -left-6 w-40 h-40 bg-secondary/20 rounded-full blur-3xl"></div>
|
|
||||||
<div class="absolute -top-6 -right-6 w-40 h-40 bg-primary/20 rounded-full blur-3xl"></div>
|
|
||||||
<!-- 几何装饰 -->
|
|
||||||
<div class="absolute top-1/4 -left-10 w-16 h-16 border border-accent/30 rotate-45"></div>
|
|
||||||
<div class="absolute bottom-1/3 -right-8 w-12 h-12 rounded-full border border-secondary/50"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 波浪分隔线 -->
|
|
||||||
<div class="absolute bottom-0 left-0 right-0">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" class="w-full h-auto">
|
|
||||||
<path fill="#0A1128" fill-opacity="1" d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,100L1360,100C1280,100,1120,100,960,100C800,100,640,100,480,100C320,100,160,100,80,100L0,100Z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 公司简介 -->
|
<!-- 公司简介 -->
|
||||||
<section id="about" class="section-padding bg-gradient-to-b from-dark to-dark/95 relative">
|
<About :about-data="aboutData"></About>
|
||||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
||||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
|
||||||
<div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
|
|
||||||
关于我们
|
|
||||||
</div>
|
|
||||||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">四川明君科技有限公司</h2>
|
|
||||||
<p class="text-gray-400 text-lg">我们致力于通过科技创新，为各行业提供专业的智能硬件与软件解决方案，推动数字化转型</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<div class="bg-dark border border-primary/20 rounded-xl p-8 card-hover">
|
|
||||||
<div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 neon-border">
|
|
||||||
<i class="fa fa-bullseye text-secondary text-2xl"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3 text-secondary">我们的使命</h3>
|
|
||||||
<p class="text-gray-400">
|
|
||||||
以科技赋能产业升级，通过持续创新和优质服务，为客户创造最大价值，助力社会智能化发展。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-dark border border-primary/20 rounded-xl p-8 card-hover">
|
|
||||||
<div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 neon-border">
|
|
||||||
<i class="fa fa-eye text-secondary text-2xl"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3 text-secondary">我们的愿景</h3>
|
|
||||||
<p class="text-gray-400">
|
|
||||||
成为西南地区领先的智能科技解决方案提供商，打造行业标杆，引领产业创新发展方向。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-dark border border-primary/20 rounded-xl p-8 card-hover">
|
|
||||||
<div class="w-14 h-14 bg-primary/20 rounded-lg flex items-center justify-center mb-6 neon-border">
|
|
||||||
<i class="fa fa-balance-scale text-secondary text-2xl"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3 text-secondary">核心价值观</h3>
|
|
||||||
<p class="text-gray-400">
|
|
||||||
创新驱动、客户至上、诚信正直、合作共赢，以专业技术和卓越服务赢得客户信赖。
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 数据统计 -->
|
|
||||||
<div class="mt-20 grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
||||||
<div class="bg-dark/50 border border-primary/10 rounded-xl p-6 text-center card-hover">
|
|
||||||
<div class="text-4xl md:text-5xl font-bold text-accent mb-2 counter" data-target="12">{{number1}}</div>
|
|
||||||
<p class="text-gray-400">年行业经验</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-dark/50 border border-primary/10 rounded-xl p-6 text-center card-hover">
|
|
||||||
<div class="text-4xl md:text-5xl font-bold text-accent mb-2 counter" data-target="600">0</div>
|
|
||||||
<p class="text-gray-400">成功案例</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-dark/50 border border-primary/10 rounded-xl p-6 text-center card-hover">
|
|
||||||
<div class="text-4xl md:text-5xl font-bold text-accent mb-2 counter" data-target="350">0</div>
|
|
||||||
<p class="text-gray-400">合作伙伴</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-dark/50 border border-primary/10 rounded-xl p-6 text-center card-hover">
|
|
||||||
<div class="text-4xl md:text-5xl font-bold text-accent mb-2 counter" data-target="80">0</div>
|
|
||||||
<p class="text-gray-400">技术专家</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 硬件产品 -->
|
<!-- 硬件产品 -->
|
||||||
<section id="hardware" class="section-padding bg-dark relative bg-grid">
|
<Hardware :hardware-data="hardwareData"></Hardware>
|
||||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
||||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
|
||||||
<div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
|
|
||||||
硬件产品
|
|
||||||
</div>
|
|
||||||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">智能硬件解决方案</h2>
|
|
||||||
<p class="text-gray-400 text-lg">我们提供高品质的智能硬件产品，为各行业智能化建设提供坚实的硬件基础</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<!-- 摄像头 -->
|
|
||||||
<div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover">
|
|
||||||
<div class="h-56 overflow-hidden relative">
|
|
||||||
<img src="https://picsum.photos/id/96/600/400" alt="高清智能摄像头" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
|
|
||||||
<div class="absolute top-4 left-4 bg-secondary text-dark px-3 py-1 rounded-full text-sm font-medium">
|
|
||||||
热销产品
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-6">
|
|
||||||
<h3 class="text-xl font-semibold mb-3 text-secondary">高清智能摄像头</h3>
|
|
||||||
<p class="text-gray-400 mb-4">
|
|
||||||
4K超高清分辨率，AI智能分析，支持人脸识别、行为分析，适用于安防监控、智慧园区等场景。
|
|
||||||
</p>
|
|
||||||
<ul class="space-y-2 mb-6">
|
|
||||||
<li class="flex items-center text-sm text-gray-400">
|
|
||||||
<i class="fa fa-check-circle text-accent mr-2"></i> 夜视距离可达50米
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center text-sm text-gray-400">
|
|
||||||
<i class="fa fa-check-circle text-accent mr-2"></i> 支持IP66防水等级
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center text-sm text-gray-400">
|
|
||||||
<i class="fa fa-check-circle text-accent mr-2"></i> 内置AI智能算法
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<a href="#contact" class="block text-center btn-primary">了解详情</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 应急广播 -->
|
|
||||||
<div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover">
|
|
||||||
<div class="h-56 overflow-hidden relative">
|
|
||||||
<img src="https://picsum.photos/id/119/600/400" alt="智能应急广播系统" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
|
|
||||||
<div class="absolute top-4 left-4 bg-accent text-dark px-3 py-1 rounded-full text-sm font-medium">
|
|
||||||
新品上市
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-6">
|
|
||||||
<h3 class="text-xl font-semibold mb-3 text-secondary">智能应急广播系统</h3>
|
|
||||||
<p class="text-gray-400 mb-4">
|
|
||||||
支持多区域控制，IP网络传输，远程管理，适用于校园、社区、景区等场所的应急通知和日常广播。
|
|
||||||
</p>
|
|
||||||
<ul class="space-y-2 mb-6">
|
|
||||||
<li class="flex items-center text-sm text-gray-400">
|
|
||||||
<i class="fa fa-check-circle text-accent mr-2"></i> 应急响应时间<1秒
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center text-sm text-gray-400">
|
|
||||||
<i class="fa fa-check-circle text-accent mr-2"></i> 支持多种触发方式
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center text-sm text-gray-400">
|
|
||||||
<i class="fa fa-check-circle text-accent mr-2"></i> 覆盖半径可达1公里
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<a href="#contact" class="block text-center btn-primary">了解详情</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 服务器 -->
|
|
||||||
<div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover">
|
|
||||||
<div class="h-56 overflow-hidden relative">
|
|
||||||
<img src="https://picsum.photos/id/180/600/400" alt="高性能服务器" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
|
|
||||||
<div class="absolute top-4 left-4 bg-green-500 text-dark px-3 py-1 rounded-full text-sm font-medium">
|
|
||||||
稳定可靠
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-6">
|
|
||||||
<h3 class="text-xl font-semibold mb-3 text-secondary">高性能服务器</h3>
|
|
||||||
<p class="text-gray-400 mb-4">
|
|
||||||
企业级高性能服务器，支持虚拟化技术，高可靠性，适用于数据中心、云计算平台、大型企业应用。
|
|
||||||
</p>
|
|
||||||
<ul class="space-y-2 mb-6">
|
|
||||||
<li class="flex items-center text-sm text-gray-400">
|
|
||||||
<i class="fa fa-check-circle text-accent mr-2"></i> 支持24小时不间断运行
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center text-sm text-gray-400">
|
|
||||||
<i class="fa fa-check-circle text-accent mr-2"></i> 冗余电源设计
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center text-sm text-gray-400">
|
|
||||||
<i class="fa fa-check-circle text-accent mr-2"></i> 可扩展性强
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<a href="#contact" class="block text-center btn-primary">了解详情</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-center mt-12">
|
|
||||||
<a href="#contact" class="btn-secondary inline-flex items-center">
|
|
||||||
查看全部产品 <i class="fa fa-arrow-right ml-2"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 软件服务 -->
|
<!-- 软件服务 -->
|
||||||
<section id="software" class="section-padding bg-gradient-to-b from-dark to-dark/95 relative">
|
<Software :software-data="softwareData"></Software>
|
||||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
||||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
|
||||||
<div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
|
|
||||||
软件服务
|
|
||||||
</div>
|
|
||||||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">定制化软件解决方案</h2>
|
|
||||||
<p class="text-gray-400 text-lg">根据客户需求提供定制化软件开发服务，为不同行业打造专属的智能解决方案</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-8 lg:gap-12">
|
|
||||||
<!-- 智慧园区 -->
|
|
||||||
<div class="flex gap-6 items-center bg-dark/40 border border-primary/10 rounded-xl p-6 md:p-8 card-hover">
|
|
||||||
<div class="w-20 h-20 flex-shrink-0 bg-primary/20 rounded-xl flex items-center justify-center neon-border">
|
|
||||||
<i class="fa fa-building-o text-secondary text-3xl"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3 text-secondary">智慧园区解决方案</h3>
|
|
||||||
<p class="text-gray-400 mb-4">
|
|
||||||
整合安防监控、智能停车、能源管理、人员管理等系统，打造安全、高效、节能的智慧园区管理平台。
|
|
||||||
</p>
|
|
||||||
<a href="#contact" class="text-accent font-medium inline-flex items-center hover:underline">
|
|
||||||
了解更多 <i class="fa fa-angle-right ml-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 应急管理 -->
|
|
||||||
<div class="flex gap-6 items-center bg-dark/40 border border-primary/10 rounded-xl p-6 md:p-8 card-hover">
|
|
||||||
<div class="w-20 h-20 flex-shrink-0 bg-primary/20 rounded-xl flex items-center justify-center neon-border">
|
|
||||||
<i class="fa fa-ambulance text-secondary text-3xl"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3 text-secondary">应急管理系统</h3>
|
|
||||||
<p class="text-gray-400 mb-4">
|
|
||||||
实现突发事件的快速响应、指挥调度、资源调配和事后评估，提升应急处理能力和效率。
|
|
||||||
</p>
|
|
||||||
<a href="#contact" class="text-accent font-medium inline-flex items-center hover:underline">
|
|
||||||
了解更多 <i class="fa fa-angle-right ml-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 乡村治理 -->
|
|
||||||
<div class="flex gap-6 items-center bg-dark/40 border border-primary/10 rounded-xl p-6 md:p-8 card-hover">
|
|
||||||
<div class="w-20 h-20 flex-shrink-0 bg-primary/20 rounded-xl flex items-center justify-center neon-border">
|
|
||||||
<i class="fa fa-home text-secondary text-3xl"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3 text-secondary">乡村治理平台</h3>
|
|
||||||
<p class="text-gray-400 mb-4">
|
|
||||||
整合村务管理、平安乡村、便民服务等功能，提升乡村治理数字化水平，助力乡村振兴。
|
|
||||||
</p>
|
|
||||||
<a href="#contact" class="text-accent font-medium inline-flex items-center hover:underline">
|
|
||||||
了解更多 <i class="fa fa-angle-right ml-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 智慧教育 -->
|
|
||||||
<div class="flex gap-6 items-center bg-dark/40 border border-primary/10 rounded-xl p-6 md:p-8 card-hover">
|
|
||||||
<div class="w-20 h-20 flex-shrink-0 bg-primary/20 rounded-xl flex items-center justify-center neon-border">
|
|
||||||
<i class="fa fa-graduation-cap text-secondary text-3xl"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-xl font-semibold mb-3 text-secondary">智慧教育解决方案</h3>
|
|
||||||
<p class="text-gray-400 mb-4">
|
|
||||||
构建智慧教学、校园管理、家校互动一体化平台，提升教学质量和管理效率，打造智慧校园。
|
|
||||||
</p>
|
|
||||||
<a href="#contact" class="text-accent font-medium inline-flex items-center hover:underline">
|
|
||||||
了解更多 <i class="fa fa-angle-right ml-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 服务流程 -->
|
|
||||||
<div class="mt-20">
|
|
||||||
<h3 class="text-2xl font-bold text-center mb-12 text-secondary">我们的服务流程</h3>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 relative">
|
|
||||||
<!-- 连接线 - 仅在中等屏幕以上显示 -->
|
|
||||||
<div class="hidden md:block absolute top-1/4 left-0 right-0 h-1 bg-gradient-to-r from-primary to-secondary -translate-y-1/2 z-0"></div>
|
|
||||||
|
|
||||||
<div class="relative z-10 bg-dark/60 border border-primary/20 rounded-xl p-6 text-center card-hover">
|
|
||||||
<div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 neon-border">
|
|
||||||
<span class="font-bold">1</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-semibold mb-2 text-secondary">需求分析</h4>
|
|
||||||
<p class="text-gray-400 text-sm">深入了解客户需求，进行详细分析和评估</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="relative z-10 bg-dark/60 border border-primary/20 rounded-xl p-6 text-center card-hover">
|
|
||||||
<div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 neon-border">
|
|
||||||
<span class="font-bold">2</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-semibold mb-2 text-secondary">方案设计</h4>
|
|
||||||
<p class="text-gray-400 text-sm">根据需求制定个性化解决方案和实施计划</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="relative z-10 bg-dark/60 border border-primary/20 rounded-xl p-6 text-center card-hover">
|
|
||||||
<div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 neon-border">
|
|
||||||
<span class="font-bold">3</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-semibold mb-2 text-secondary">开发实施</h4>
|
|
||||||
<p class="text-gray-400 text-sm">专业团队进行开发、部署和系统集成</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="relative z-10 bg-dark/60 border border-primary/20 rounded-xl p-6 text-center card-hover">
|
|
||||||
<div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 neon-border">
|
|
||||||
<span class="font-bold">4</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="font-semibold mb-2 text-secondary">运维支持</h4>
|
|
||||||
<p class="text-gray-400 text-sm">提供持续的技术支持和系统维护服务</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 成功案例 -->
|
<!-- 成功案例 -->
|
||||||
<section id="cases" class="section-padding bg-dark relative bg-grid">
|
<Case :case-data="caseData"></Case>
|
||||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
||||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
|
||||||
<div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
|
|
||||||
成功案例
|
|
||||||
</div>
|
|
||||||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">客户成功案例展示</h2>
|
|
||||||
<p class="text-gray-400 text-lg">我们为各行业客户提供了优质的产品和服务，以下是部分成功案例</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 案例筛选 -->
|
|
||||||
<div class="flex flex-wrap justify-center gap-4 mb-10">
|
|
||||||
<button class="case-filter active px-5 py-2 rounded-full bg-primary text-white font-medium">全部案例</button>
|
|
||||||
<button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">智慧园区</button>
|
|
||||||
<button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">应急管理</button>
|
|
||||||
<button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">乡村治理</button>
|
|
||||||
<button class="case-filter px-5 py-2 rounded-full bg-dark/60 border border-primary/20 text-light font-medium hover:bg-primary/20 transition-colors">智慧教育</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 案例展示 -->
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
||||||
<!-- 案例1 -->
|
|
||||||
<div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
|
|
||||||
<div class="h-56 overflow-hidden relative">
|
|
||||||
<img src="https://picsum.photos/id/42/600/400" alt="智慧园区案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
|
||||||
<div class="absolute top-4 left-4 bg-primary text-white text-sm px-3 py-1 rounded-full">智慧园区</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-6">
|
|
||||||
<h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某科技园区智能管理系统</h3>
|
|
||||||
<p class="text-gray-400 mb-4 line-clamp-2">
|
|
||||||
为占地500亩的科技园区提供了全套智能管理解决方案，包括智能安防、停车管理、能源监控等系统。
|
|
||||||
</p>
|
|
||||||
<a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
|
|
||||||
查看详情 <i class="fa fa-arrow-right ml-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 案例2 -->
|
|
||||||
<div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
|
|
||||||
<div class="h-56 overflow-hidden relative">
|
|
||||||
<img src="https://picsum.photos/id/26/600/400" alt="应急管理案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
|
||||||
<div class="absolute top-4 left-4 bg-secondary text-dark text-sm px-3 py-1 rounded-full">应急管理</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-6">
|
|
||||||
<h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某市应急指挥系统</h3>
|
|
||||||
<p class="text-gray-400 mb-4 line-clamp-2">
|
|
||||||
为某市应急管理局开发了应急指挥系统，实现了突发事件的快速响应和高效指挥调度。
|
|
||||||
</p>
|
|
||||||
<a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
|
|
||||||
查看详情 <i class="fa fa-arrow-right ml-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 案例3 -->
|
|
||||||
<div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
|
|
||||||
<div class="h-56 overflow-hidden relative">
|
|
||||||
<img src="https://picsum.photos/id/164/600/400" alt="乡村治理案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
|
||||||
<div class="absolute top-4 left-4 bg-green-500 text-dark text-sm px-3 py-1 rounded-full">乡村治理</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-6">
|
|
||||||
<h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某县乡村治理平台</h3>
|
|
||||||
<p class="text-gray-400 mb-4 line-clamp-2">
|
|
||||||
为某县200多个行政村建设了乡村治理平台，实现了村务公开、平安乡村、便民服务等功能。
|
|
||||||
</p>
|
|
||||||
<a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
|
|
||||||
查看详情 <i class="fa fa-arrow-right ml-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 案例4 -->
|
|
||||||
<div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
|
|
||||||
<div class="h-56 overflow-hidden relative">
|
|
||||||
<img src="https://picsum.photos/id/20/600/400" alt="智慧教育案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
|
||||||
<div class="absolute top-4 left-4 bg-purple-500 text-white text-sm px-3 py-1 rounded-full">智慧教育</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-6">
|
|
||||||
<h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某大学智慧校园建设</h3>
|
|
||||||
<p class="text-gray-400 mb-4 line-clamp-2">
|
|
||||||
为某大学建设了智慧校园平台，整合了教学管理、校园安防、后勤服务等系统，提升了管理效率。
|
|
||||||
</p>
|
|
||||||
<a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
|
|
||||||
查看详情 <i class="fa fa-arrow-right ml-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 案例5 -->
|
|
||||||
<div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
|
|
||||||
<div class="h-56 overflow-hidden relative">
|
|
||||||
<img src="https://picsum.photos/id/48/600/400" alt="智慧园区案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
|
||||||
<div class="absolute top-4 left-4 bg-primary text-white text-sm px-3 py-1 rounded-full">智慧园区</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-6">
|
|
||||||
<h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某工业园区智能安防系统</h3>
|
|
||||||
<p class="text-gray-400 mb-4 line-clamp-2">
|
|
||||||
为大型工业园区部署了智能安防系统，包括高清监控、周界防范、智能巡检等功能模块。
|
|
||||||
</p>
|
|
||||||
<a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
|
|
||||||
查看详情 <i class="fa fa-arrow-right ml-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 案例6 -->
|
|
||||||
<div class="bg-dark/60 border border-primary/20 rounded-xl overflow-hidden card-hover group">
|
|
||||||
<div class="h-56 overflow-hidden relative">
|
|
||||||
<img src="https://picsum.photos/id/91/600/400" alt="应急管理案例" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
|
||||||
<div class="absolute top-4 left-4 bg-secondary text-dark text-sm px-3 py-1 rounded-full">应急管理</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-6">
|
|
||||||
<h3 class="text-xl font-semibold mb-2 group-hover:text-secondary transition-colors">某景区应急广播系统</h3>
|
|
||||||
<p class="text-gray-400 mb-4 line-clamp-2">
|
|
||||||
为5A级景区部署了智能应急广播系统，覆盖面积达10平方公里，支持分区控制和应急播报。
|
|
||||||
</p>
|
|
||||||
<a href="#" class="text-accent font-medium inline-flex items-center hover:underline">
|
|
||||||
查看详情 <i class="fa fa-arrow-right ml-1"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-center mt-12">
|
|
||||||
<a href="#contact" class="btn-secondary inline-flex items-center">
|
|
||||||
查看更多案例 <i class="fa fa-arrow-right ml-2"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 客户评价 -->
|
<!-- 客户评价 -->
|
||||||
<section class="section-padding bg-gradient-to-b from-dark to-dark/95 relative">
|
<Evaluate></Evaluate>
|
||||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
||||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
|
||||||
<div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
|
|
||||||
客户评价
|
|
||||||
</div>
|
|
||||||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">客户对我们的评价</h2>
|
|
||||||
<p class="text-gray-400 text-lg">听听我们的客户怎么说，他们的满意是我们前进的动力</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8">
|
|
||||||
<!-- 评价1 -->
|
|
||||||
<div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover">
|
|
||||||
<div class="flex items-center mb-6">
|
|
||||||
<img src="https://picsum.photos/id/64/100/100" alt="客户头像" class="w-14 h-14 rounded-full object-cover mr-4 border-2 border-secondary">
|
|
||||||
<div>
|
|
||||||
<h4 class="font-semibold text-secondary">张经理</h4>
|
|
||||||
<p class="text-gray-400 text-sm">某科技园区</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-yellow-400 mb-4">
|
|
||||||
<i class="fa fa-star mgr"></i>
|
|
||||||
<i class="fa fa-star mgr"></i>
|
|
||||||
<i class="fa fa-star mgr"></i>
|
|
||||||
<i class="fa fa-star mgr"></i>
|
|
||||||
<i class="fa fa-star mgr"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-gray-400 italic">
|
|
||||||
"明君科技为我们园区提供的智能管理系统非常出色，不仅提升了管理效率，也为入驻企业提供了更好的服务体验。他们的技术团队专业且负责，值得信赖。"
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 评价2 -->
|
|
||||||
<div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover">
|
|
||||||
<div class="flex items-center mb-6">
|
|
||||||
<img src="https://picsum.photos/id/65/100/100" alt="客户头像" class="w-14 h-14 rounded-full object-cover mr-4 border-2 border-secondary">
|
|
||||||
<div>
|
|
||||||
<h4 class="font-semibold text-secondary">李局长</h4>
|
|
||||||
<p class="text-gray-400 text-sm">某应急管理局</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-yellow-400 mb-4">
|
|
||||||
<i class="fa fa-star"></i>
|
|
||||||
<i class="fa fa-star"></i>
|
|
||||||
<i class="fa fa-star"></i>
|
|
||||||
<i class="fa fa-star"></i>
|
|
||||||
<i class="fa fa-star-half-o"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-gray-400 italic">
|
|
||||||
"应急指挥系统在几次突发事件中发挥了关键作用，反应迅速，调度高效。明君科技的技术支持也非常及时，解决问题能力强，是可靠的合作伙伴。"
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 评价3 -->
|
|
||||||
<div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover">
|
|
||||||
<div class="flex items-center mb-6">
|
|
||||||
<img src="https://picsum.photos/id/91/100/100" alt="客户头像" class="w-14 h-14 rounded-full object-cover mr-4 border-2 border-secondary">
|
|
||||||
<div>
|
|
||||||
<h4 class="font-semibold text-secondary">王校长</h4>
|
|
||||||
<p class="text-gray-400 text-sm">某大学</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-yellow-400 mb-4">
|
|
||||||
<i class="fa fa-star"></i>
|
|
||||||
<i class="fa fa-star"></i>
|
|
||||||
<i class="fa fa-star"></i>
|
|
||||||
<i class="fa fa-star"></i>
|
|
||||||
<i class="fa fa-star"></i>
|
|
||||||
</div>
|
|
||||||
<p class="text-gray-400 italic">
|
|
||||||
"智慧校园平台极大地提升了我们的管理效率和教学质量，学生和老师的反馈都非常好。明君科技的定制化能力很强，能够根据我们的需求提供个性化解决方案。"
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 咨询联系 -->
|
<!-- 咨询联系 -->
|
||||||
<section id="contact" class="section-padding bg-dark relative bg-grid">
|
<Contact :contact-data="contactData"></Contact>
|
||||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
||||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
|
||||||
<div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
|
|
||||||
联系我们
|
|
||||||
</div>
|
|
||||||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">咨询解决方案</h2>
|
|
||||||
<p class="text-gray-400 text-lg">填写下方表单或通过以下方式联系我们，我们将尽快为您提供专业的解决方案</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
||||||
<div class="space-y-8">
|
|
||||||
<div>
|
|
||||||
<h3 class="text-2xl font-semibold mb-6 text-secondary">联系方式</h3>
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="flex items-start">
|
|
||||||
<div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 neon-border">
|
|
||||||
<i class="fa fa-map-marker text-secondary text-xl"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-medium mb-1">公司地址</h4>
|
|
||||||
<p class="text-gray-400">四川省成都市高新区天府大道中段1388号</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-start">
|
|
||||||
<div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 neon-border">
|
|
||||||
<i class="fa fa-phone text-secondary text-xl"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-medium mb-1">联系电话</h4>
|
|
||||||
<p class="text-gray-400">028-8888-7777</p>
|
|
||||||
<p class="text-gray-400">138-8888-7777</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-start">
|
|
||||||
<div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 neon-border">
|
|
||||||
<i class="fa fa-envelope text-secondary text-xl"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-medium mb-1">电子邮箱</h4>
|
|
||||||
<p class="text-gray-400">info@mingjuntech.com</p>
|
|
||||||
<p class="text-gray-400">service@mingjuntech.com</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-start">
|
|
||||||
<div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 neon-border">
|
|
||||||
<i class="fa fa-clock-o text-secondary text-xl"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-medium mb-1">工作时间</h4>
|
|
||||||
<p class="text-gray-400">周一至周五: 9:00 - 18:00</p>
|
|
||||||
<p class="text-gray-400">周六: 9:00 - 12:00</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 class="text-xl font-semibold mb-4 text-secondary">关注我们</h3>
|
|
||||||
<div class="flex space-x-4">
|
|
||||||
<a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center hover:bg-primary/40 transition-colors neon-border">
|
|
||||||
<i class="fa fa-weixin text-secondary text-xl"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center hover:bg-primary/40 transition-colors neon-border">
|
|
||||||
<i class="fa fa-weibo text-secondary text-xl"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center hover:bg-primary/40 transition-colors neon-border">
|
|
||||||
<i class="fa fa-linkedin text-secondary text-xl"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center hover:bg-primary/40 transition-colors neon-border">
|
|
||||||
<i class="fa fa-youtube-play text-secondary text-xl"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover">
|
|
||||||
<h3 class="text-2xl font-semibold mb-6 text-secondary">咨询表单</h3>
|
|
||||||
<form>
|
|
||||||
<div class="grid md:grid-cols-2 gap-6 mb-6">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="block text-gray-400 mb-2">姓名</label>
|
|
||||||
<input type="text" id="name" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="请输入您的姓名">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="phone" class="block text-gray-400 mb-2">电话</label>
|
|
||||||
<input type="tel" id="phone" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="请输入您的电话">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-6">
|
|
||||||
<label for="email" class="block text-gray-400 mb-2">邮箱</label>
|
|
||||||
<input type="email" id="email" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="请输入您的邮箱">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-6">
|
|
||||||
<label for="service" class="block text-gray-400 mb-2">咨询服务</label>
|
|
||||||
<select id="service" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors">
|
|
||||||
<option value="">请选择咨询服务类型</option>
|
|
||||||
<option value="hardware">硬件产品咨询</option>
|
|
||||||
<option value="software-park">智慧园区解决方案</option>
|
|
||||||
<option value="software-emergency">应急管理系统</option>
|
|
||||||
<option value="software-village">乡村治理平台</option>
|
|
||||||
<option value="software-education">智慧教育解决方案</option>
|
|
||||||
<option value="other">其他服务咨询</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-6">
|
|
||||||
<label for="message" class="block text-gray-400 mb-2">留言内容</label>
|
|
||||||
<textarea id="message" rows="4" class="w-full bg-dark/40 border border-primary/30 rounded-lg px-4 py-3 text-light focus:outline-none focus:border-secondary transition-colors" placeholder="请输入您的需求或问题"></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="w-full btn-primary flex items-center justify-center">
|
|
||||||
<i class="fa fa-paper-plane mr-2"></i> 提交咨询
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- 页脚 -->
|
<!-- 页脚 -->
|
||||||
@ -831,15 +149,29 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script setup>
|
||||||
|
import Website from "@/api/api";
|
||||||
import { computed, onMounted, ref } from 'vue';
|
import { computed, onMounted, ref } from 'vue';
|
||||||
|
import Home from './components/Home.vue';
|
||||||
|
import About from './components/About.vue';
|
||||||
|
import Hardware from './components/Hardware.vue';
|
||||||
|
import Software from './components/Software.vue';
|
||||||
|
import Case from './components/Case.vue';
|
||||||
|
import Evaluate from './components/Evaluate.vue';
|
||||||
|
import Contact from './components/Contact.vue';
|
||||||
|
|
||||||
const showToTop = ref(false)
|
const showToTop = ref(false)
|
||||||
const number1 = ref(100)
|
const showMobilMenuFlag = ref(false)
|
||||||
|
const homeData = ref({})
|
||||||
|
const aboutData = ref({})
|
||||||
|
const hardwareData = ref({})
|
||||||
|
const softwareData = ref({})
|
||||||
|
const caseData = ref({})
|
||||||
|
const contactData = ref({})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
window.onscroll = () => {
|
window.onscroll = () => {
|
||||||
console.log(window.scrollY,'滚动了')
|
// console.log(window.scrollY,'滚动了')
|
||||||
if (window.scrollY > 50) {
|
if (window.scrollY > 50) {
|
||||||
showToTop.value = true
|
showToTop.value = true
|
||||||
} else {
|
} else {
|
||||||
@ -847,6 +179,23 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const showMobilMenu = () => {
|
||||||
|
showMobilMenuFlag.value = !showMobilMenuFlag.value
|
||||||
|
}
|
||||||
|
const getWebData = async () => {
|
||||||
|
console.log('999')
|
||||||
|
const website = new Website()
|
||||||
|
const res = await website.getWebInfo()
|
||||||
|
console.log('123456')
|
||||||
|
homeData.value = res.data.indexInfo || {}
|
||||||
|
aboutData.value = {aboutUsInfo: res.data?.aboutUsInfo || {},targets: res.data?.targets || []}
|
||||||
|
hardwareData.value = {productInfo: res.data?.productInfo || {},products: res.data?.products || []}
|
||||||
|
softwareData.value = {softwareInfo: res.data?.softwareInfo || {},plans: res.data?.plans || []}
|
||||||
|
caseData.value = {caseTypes: res.data?.caseTypes || [],successInfo: res.data?.successInfo || {}}
|
||||||
|
contactData.value = {consultTypes: res.data?.consultTypes || [],contactInfo: res.data?.contactInfo || {}}
|
||||||
|
}
|
||||||
|
getWebData()
|
||||||
const toTop = () => {
|
const toTop = () => {
|
||||||
window.scrollTo({
|
window.scrollTo({
|
||||||
top: 0,
|
top: 0,
|
||||||
@ -854,21 +203,13 @@ const toTop = () => {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const phone = ref(false)
|
|
||||||
window.onresize = () => {
|
|
||||||
judgeWidth()
|
|
||||||
}
|
|
||||||
judgeWidth()
|
|
||||||
function judgeWidth () {
|
|
||||||
if (window.innerWidth <= 992) {
|
|
||||||
phone.value = true
|
|
||||||
} else {
|
|
||||||
phone.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.mgr{
|
.mgr{
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
.formErrorTips{
|
||||||
|
padding-top: 4px;
|
||||||
|
color: rgb(236, 40, 40);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user