From a993c55d3f133ecd12d8fcb0f38c9b77a1dc0b34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Mon, 25 Aug 2025 14:08:12 +0800 Subject: [PATCH] 1 --- README.md | 3 +- src/assets/css/common.css | 2 +- src/component.js | 2 - src/components/ihead.vue | 413 +++++--------------- src/components/leftMenu.vue | 76 ---- src/main.js | 2 - src/router.js | 40 +- src/static/config.js | 57 --- src/views/aboutUs/aboutUs.vue | 2 +- src/views/index.vue | 266 ++++++++++--- src/views/ourPlan/aiSolutions.vue | 94 ++++- src/views/ourPlan/estateManagement.vue | 165 +++++++- src/views/ourPlan/facilityManagement.vue | 272 ++++++++++++- src/views/ourPlan/iot.vue | 234 ++++++++++- src/views/ourPlan/ourPlan.vue | 233 ++++++++++- src/views/ourPlan/technologyIntegration.vue | 318 ++++++++++++++- 16 files changed, 1577 insertions(+), 602 deletions(-) delete mode 100644 src/components/leftMenu.vue delete mode 100644 src/static/config.js diff --git a/README.md b/README.md index 4babdd1..86cb8d1 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,6 @@ src/ ├── components/ # 组件目录 │ ├── ihead.vue # 现代化头部组件 │ ├── ifooter.vue # 现代化页脚组件 -│ └── leftMenu.vue # 左侧菜单组件 ├── views/ # 页面目录 │ ├── index.vue # 升级后的首页 │ └── aboutUs/ # 关于我们页面 @@ -123,7 +122,7 @@ npm run build ```css :root { --primary-color: #3498db; - --secondary-color: #9b59b6; + --secondary-color: #3498db; --success-color: #27ae60; --warning-color: #f39c12; --danger-color: #e74c3c; diff --git a/src/assets/css/common.css b/src/assets/css/common.css index fe30cbb..bea54da 100644 --- a/src/assets/css/common.css +++ b/src/assets/css/common.css @@ -2010,7 +2010,7 @@ body { .progress-bar { height: 100%; - background: linear-gradient(90deg, #3498db, #9b59b6); + background: linear-gradient(90deg, #3498db, #2980b9); border-radius: 4px; transition: width 0.3s ease; } diff --git a/src/component.js b/src/component.js index 1c55c4a..59d13c5 100644 --- a/src/component.js +++ b/src/component.js @@ -2,7 +2,6 @@ import Vue from 'vue' import ihead from './components/ihead.vue' import ifooter from './components/ifooter.vue' import icontent from './components/icontent.vue' -import leftMenu from './components/leftMenu.vue' import VueAwesomeSwiper from 'vue-awesome-swiper' class Component { @@ -11,7 +10,6 @@ class Component { Vue.component("ihead", ihead); Vue.component("ifooter", ifooter); Vue.component("icontent", icontent); - Vue.component("leftMenu", leftMenu); // 注册Swiper组件 Vue.use(VueAwesomeSwiper); diff --git a/src/components/ihead.vue b/src/components/ihead.vue index 10202ab..98ce834 100644 --- a/src/components/ihead.vue +++ b/src/components/ihead.vue @@ -2,7 +2,7 @@
- +
@@ -13,17 +13,13 @@
- +
  • - {{menu.name}} - -
      + {{ menu.name }} + +
      • - {{sonMenu.name}} + {{ sonMenu.name }}
      @@ -88,18 +84,18 @@ export default { }, { name: '关于我们', - url: '/aboutUs/aboutUs', + url: '/aboutUs', child: [] }, { name: '我们的方案', - url: '/ourPlan/ourPlan', + url: '/ourPlan', child: [ + { name: 'AI集成', url: '/ourPlan/aiSolutions' }, { name: '智能建筑', url: '/ourPlan/estateManagement' }, { name: '物联网', url: '/ourPlan/iot' }, { name: '设施管理', url: '/ourPlan/facilityManagement' }, - { name: 'AI解决方案', url: '/ourPlan/aiSolutions' }, - { name: '技术集成', url: '/ourPlan/technologyIntegration' } + { name: '系统集成', url: '/ourPlan/technologyIntegration' } ] }, @@ -175,18 +171,18 @@ export default { this.toggle_class("mobileMenu", "active", true); }, true); - // 返回按钮 - this.add_event_listener(".linkGoBack", "click", () => { - this.remove_class("mobileMenu", "active", true); - // 关闭移动端菜单后滚动到顶部 - window.scrollTo({ - top: 0, - left: 0, - behavior: 'smooth' - }); - }); + // 返回按钮 + this.add_event_listener(".linkGoBack", "click", () => { + this.remove_class("mobileMenu", "active", true); + // 关闭移动端菜单后滚动到顶部 + window.scrollTo({ + top: 0, + left: 0, + behavior: 'smooth' + }); + }); }, - + initScrollListener() { window.addEventListener('scroll', () => { if (window.pageYOffset > 200) { @@ -230,7 +226,7 @@ export default { z-index: 1000 !important; background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px) !important; - transition: all var(--transition-speed) ease !important; + transition: all 0.3s ease !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; /* 覆盖旧表格布局 */ display: block !important; @@ -239,68 +235,7 @@ export default { .header.mini { background: rgba(255, 255, 255, 0.98) !important; - box-shadow: var(--shadow-light) !important; -} - -/* 顶部联系信息 - 覆盖旧样式 */ -.top { - background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important; - padding: 8px 0 !important; - /* 覆盖旧表格布局 */ - display: block !important; - height: auto !important; - text-align: left !important; -} - -.contact-info { - display: flex; - justify-content: space-between; - align-items: center; - color: white; -} - -.contact-item { - display: flex; - align-items: center; - gap: 8px; - transition: opacity 0.3s ease; -} - -.contact-item:hover { - opacity: 0.8; -} - -.contact-item a { - color: white; - text-decoration: none; - font-size: 14px; -} - -.inlineTextIcon { - width: 16px; - height: 16px; - filter: brightness(0) invert(1); -} - -/* 搜索框 */ -.search { - background: rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 20px; - padding: 6px 15px; - color: white; - font-size: 14px; - transition: all 0.3s ease; -} - -.search::placeholder { - color: rgba(255, 255, 255, 0.7); -} - -.search:focus { - background: rgba(255, 255, 255, 0.3); - border-color: rgba(255, 255, 255, 0.5); - outline: none; + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important; } /* 主要导航区域 - 覆盖旧样式 */ @@ -313,8 +248,14 @@ export default { .nav-container { display: flex; - justify-content: space-between; + justify-content: flex-start; align-items: center; + width: 100%; +} + +.logoCell { + flex-shrink: 0; + margin-right: 40px; } .logoCell .logo { @@ -326,10 +267,18 @@ export default { transform: scale(1.05); } +.mainMenuCell { + flex: 1; + display: flex; + justify-content: flex-start; +} + /* 主导航菜单 */ .mainMenu { display: flex; gap: 0; + justify-content: flex-start; + align-items: center; } .nav-item { @@ -344,8 +293,9 @@ export default { font-weight: 500; font-size: 16px; transition: all 0.3s ease; - border-radius: var(--border-radius); + border-radius: 8px; position: relative; + white-space: nowrap; } .nav-link:hover { @@ -373,15 +323,16 @@ export default { .dropDown { position: absolute; top: 100%; - left: 0; + left: 50%; + transform: translateX(-50%); background: white; - border-radius: var(--border-radius); - box-shadow: var(--shadow-medium); + border-radius: 8px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); padding: 15px 0; min-width: 200px; opacity: 0; visibility: hidden; - transform: translateY(-10px); + transform: translateX(-50%) translateY(-10px); transition: all 0.3s ease; border: 1px solid rgba(0, 0, 0, 0.1); } @@ -389,7 +340,7 @@ export default { .nav-item:hover .dropDown { opacity: 1; visibility: visible; - transform: translateY(0); + transform: translateX(-50%) translateY(0); } .dropdown-item { @@ -399,6 +350,7 @@ export default { text-decoration: none; transition: all 0.3s ease; border-radius: 0; + text-align: center; } .dropdown-item:hover { @@ -412,6 +364,7 @@ export default { display: inline-block; margin-left: 5px; transition: transform 0.3s ease; + font-size: 12px; } .nav-item:hover .downCaret { @@ -480,8 +433,8 @@ export default { color: #2c3e50; text-decoration: none; font-weight: 500; - border-radius: var(--border-radius); - transition: all var(--transition-speed) ease; + border-radius: 8px; + transition: all 0.3s ease; } .menuContent a:hover, @@ -515,267 +468,77 @@ export default { color: #3498db; } -/* 现代响应式设计 - 使用容器查询和逻辑属性 */ -/* 基础响应式容器 */ -.header { - container-type: inline-size; - container-name: header; -} - -/* 使用容器查询替代媒体查询 */ -@container header (max-width: 768px) { +/* 响应式设计 */ +@media (max-width: 768px) { .desktop { display: none !important; } - + .mobile { display: block !important; } - - .contact-info { - flex-direction: column !important; - gap: 10px !important; - align-items: flex-start !important; - } - - .searchContainer { - width: 100% !important; - margin-top: 10px !important; - } - - .search { - width: 100% !important; - margin-left: 0 !important; - } - - /* 移动端头部高度调整 */ - .header { - height: auto !important; - } - + .header .content { padding: 0 1em !important; } + + body { + padding-top: 100px !important; + } + + .nav-container { + gap: 1rem !important; + } } -@container header (min-width: 769px) { +@media (min-width: 769px) { .mobile { display: none !important; } - + .desktop { display: block !important; } -} -/* 使用逻辑属性实现更好的国际化支持 */ -.header .content { - padding-inline: 3em; - padding-block: 0; -} - -@media (max-width: 768px) { - .header .content { - padding-inline: 1em; + .nav-container { + gap: 2rem; } } -/* 使用 CSS Grid 实现更灵活的布局 */ -.nav-container { - display: grid; - grid-template-columns: auto 1fr; - gap: 2rem; - align-items: center; -} - -@container header (max-width: 768px) { +@media (max-width: 1200px) { .nav-container { - grid-template-columns: 1fr auto; gap: 1rem; } -} -/* 使用 CSS 自定义属性实现主题切换 */ -:root { - --header-bg: rgba(255, 255, 255, 0.95); - --header-border: rgba(0, 0, 0, 0.1); - --nav-hover-bg: rgba(52, 152, 219, 0.1); - --nav-hover-color: #3498db; -} - -/* 深色主题支持 */ -@media (prefers-color-scheme: dark) { - :root { - --header-bg: rgba(30, 30, 30, 0.95); - --header-border: rgba(255, 255, 255, 0.1); - --nav-hover-bg: rgba(52, 152, 219, 0.2); + .nav-link { + padding: 12px 20px; + font-size: 15px; } } -/* 使用 CSS 自定义属性 */ -.header { - background: var(--header-bg) !important; - border-bottom: 1px solid var(--header-border) !important; -} - -.nav-link:hover { - background: var(--nav-hover-bg) !important; - color: var(--nav-hover-color) !important; -} - -/* 现代动画效果 - 使用 CSS 自定义属性和性能优化 */ -@keyframes slideDown { - from { - opacity: 0; - transform: translateY(-20px); +@media (max-width: 1024px) { + .nav-link { + padding: 10px 15px; + font-size: 14px; } - to { - opacity: 1; - transform: translateY(0); + + .logoCell .logo { + height: 45px; } } -/* 使用 will-change 优化动画性能 */ -.nav-item { - will-change: transform, opacity; -} - -/* 使用 CSS 自定义属性控制动画延迟 */ -.nav-item { - animation: slideDown 0.5s ease forwards; - animation-delay: calc(var(--animation-index, 0) * 0.1s); -} - -/* 使用 CSS 计数器自动生成动画延迟 */ -.nav-item:nth-child(1) { --animation-index: 1; } -.nav-item:nth-child(2) { --animation-index: 2; } -.nav-item:nth-child(3) { --animation-index: 3; } -.nav-item:nth-child(4) { --animation-index: 4; } - -/* 使用 CSS 逻辑属性实现更好的动画方向 */ -@keyframes slideInFromStart { - from { - opacity: 0; - transform: translateX(-20px); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -/* 支持 RTL 的动画 */ -[dir="rtl"] .nav-item { - animation: slideInFromStart 0.5s ease forwards; -} - -/* 使用现代 CSS 实现内容间距 */ -/* 使用 CSS 自定义属性定义头部高度 */ -:root { - --header-height: 120px; - --header-height-mobile: 100px; - - /* 添加更多主题变量 */ - --transition-speed: 0.3s; - --border-radius: 8px; - --shadow-light: 0 2px 20px rgba(0, 0, 0, 0.1); - --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.15); -} - -/* 容器查询回退方案 - 为不支持容器查询的浏览器提供媒体查询 */ -@supports not (container-type: inline-size) { - @media (max-width: 768px) { - .desktop { - display: none !important; - } - - .mobile { - display: block !important; - } - - .contact-info { - flex-direction: column !important; - gap: 10px !important; - align-items: flex-start !important; - } - - .searchContainer { - width: 100% !important; - margin-top: 10px !important; - } - - .search { - width: 100% !important; - margin-left: 0 !important; - } - - .header { - height: auto !important; - } - - .header .content { - padding: 0 1em !important; - } - - body { - padding-top: 100px !important; - } - - .nav-container { - grid-template-columns: 1fr auto !important; - gap: 1rem !important; - } - } - - @media (min-width: 769px) { - .mobile { - display: none !important; - } - - .desktop { - display: block !important; - } - } -} - -/* 使用逻辑属性确保内容不被遮挡 */ +/* 确保内容不被遮挡 */ body { - padding-block-start: var(--header-height) !important; -} - -/* 使用容器查询替代媒体查询 */ -@container header (max-width: 768px) { - body { - padding-block-start: var(--header-height-mobile) !important; - } -} - -/* 使用 CSS 逻辑属性实现更好的 RTL 支持 */ -.header { - inset-block-start: 0; - inset-inline: 0; -} - -/* 使用 CSS 逻辑属性实现更好的间距 */ -.contact-info { - gap: 1rem; + padding-top: 120px !important; } +/* 使用逻辑属性实现更好的间距 */ .nav-container { gap: 2rem; } -/* 使用 CSS 逻辑属性实现更好的边框 */ +/* 使用逻辑属性实现更好的边框 */ .header { - border-block-end: 1px solid var(--header-border) !important; + border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; } - -.nav-item { - animation: slideDown 0.5s ease forwards; -} - -.nav-item:nth-child(1) { animation-delay: 0.1s; } -.nav-item:nth-child(2) { animation-delay: 0.2s; } -.nav-item:nth-child(3) { animation-delay: 0.3s; } -.nav-item:nth-child(4) { animation-delay: 0.4s; } diff --git a/src/components/leftMenu.vue b/src/components/leftMenu.vue deleted file mode 100644 index 597b9b2..0000000 --- a/src/components/leftMenu.vue +++ /dev/null @@ -1,76 +0,0 @@ - - - - diff --git a/src/main.js b/src/main.js index b88d9b3..007c551 100644 --- a/src/main.js +++ b/src/main.js @@ -1,9 +1,7 @@ import './assets/css/cookieconsent.min.css' import './assets/css/common.css' import 'swiper/swiper.min.css' -import './static/config.js' import 'es6-promise/auto' - import Vue from 'vue' import App from './App.vue' import Vuex from 'vuex' diff --git a/src/router.js b/src/router.js index 67ba973..be82175 100644 --- a/src/router.js +++ b/src/router.js @@ -2,12 +2,7 @@ import Vue from 'vue' import Router from "vue-router" import index from './views/index' - import aboutUs from './views/aboutUs/aboutUs' - - - - import ourPlan from './views/ourPlan/ourPlan' import estateManagement from './views/ourPlan/estateManagement' import facilityManagement from './views/ourPlan/facilityManagement' @@ -15,9 +10,6 @@ import iot from './views/ourPlan/iot' import aiSolutions from './views/ourPlan/aiSolutions' import technologyIntegration from './views/ourPlan/technologyIntegration' - - - Vue.use(Router); const router = new Router({ @@ -36,19 +28,29 @@ const router = new Router({ path: '/aboutUs', component: aboutUs }, - { path: '/ourPlan', - component: ourPlan, - children: [ - { path: '', redirect: 'ourPlan' }, - { path: 'ourPlan', component: ourPlan }, - { path: 'estateManagement', component: estateManagement }, - { path: 'facilityManagement', component: facilityManagement }, - { path: 'iot', component: iot }, - { path: 'aiSolutions', component: aiSolutions }, - { path: 'technologyIntegration', component: technologyIntegration } - ] + component: ourPlan + }, + { + path: '/ourPlan/estateManagement', + component: estateManagement + }, + { + path: '/ourPlan/facilityManagement', + component: facilityManagement + }, + { + path: '/ourPlan/iot', + component: iot + }, + { + path: '/ourPlan/aiSolutions', + component: aiSolutions + }, + { + path: '/ourPlan/technologyIntegration', + component: technologyIntegration }, { path: '*', diff --git a/src/static/config.js b/src/static/config.js deleted file mode 100644 index e4630bb..0000000 --- a/src/static/config.js +++ /dev/null @@ -1,57 +0,0 @@ -window.config = { - menus: [{ - name: "首页", - url: "/index", - child: [] - }, - { - name: "我们的方案", - url: "/ourPlan", - child: [{ - name: "三维展示", - url: "/ourPlan/reaEstate", - }, - { - name: "房地产和物业管理", - url: "/ourPlan/estateManagement", - }, - { - name: "物联网（iot）", - url: "/ourPlan/iot", - }, - { - name: "技术和集成", - url: "/ourPlan/technologyIntegration", - }, - ] - }, - { - name: "前沿", - url: "/fulEdge", - child: [{ - name: "移动解决方案", - url: "/fulEdge/mobileSolution", - }, - { - name: "其他", - url: "/fulEdge/other", - } - ] - }, - { - name: "关于我们", - url: "/aboutUs", - child: [{ - name: "与我们合作", - url: "/aboutUs/cooperateWithUs", - }, - { - name: "丙维科技", - url: "/aboutUs/propystTechnology", - }, - ] - }, - - ] - -} \ No newline at end of file diff --git a/src/views/aboutUs/aboutUs.vue b/src/views/aboutUs/aboutUs.vue index 44ad81a..250b3aa 100644 --- a/src/views/aboutUs/aboutUs.vue +++ b/src/views/aboutUs/aboutUs.vue @@ -351,7 +351,7 @@ export default { transform: translateX(-50%); width: 80px; height: 4px; - background: linear-gradient(90deg, #3498db, #9b59b6); + background: linear-gradient(90deg, #3498db, #2980b9); border-radius: 2px; } diff --git a/src/views/index.vue b/src/views/index.vue index 15c3e71..4760a8e 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -91,16 +91,37 @@
-
-
- -
-
{{product.name}}
-
- - -
-
+ +
+
+

核心解决方案

+

为不同行业提供专业的技术解决方案，助力企业数字化转型

+ +
+
+
+ +
+
+ 了解更多 +
+
+
+ +
+
{{product.name}}
+
{{product.description}}
+
+ {{tag}} +
+
+ + + +
+
+
+
@@ -147,7 +168,6 @@ let boxbg_smartbuildings = require('../assets/img/boxbg_smartbuildings.png') let boxbg_iot = require('../assets/img/boxbg_iot.png') let boxbg_facilitiesmanagement = require('../assets/img/boxbg_facilitiesmanagement.png') let boxbg_errands = require('../assets/img/boxbg_errands.png') -let boxbg_propertyandrealestate = require('../assets/img/boxbg_propertyandrealestate.png') export default { data() { @@ -230,39 +250,48 @@ export default { features: ['系统集成服务', '定制化软件开发', '数字化转型', '技术架构设计'] } ], - productData: [ - { - name: '智能终端', - img: boxbg_cleaning, - url: '/超广角设备.pdf', - isLink: true, - }, - { - name: '智能建筑', - img: boxbg_smartbuildings, - url: '/IntelligentBuild', - }, - { - name: '物联网', - img: boxbg_iot, - url: '/ourPlan/iot', - }, - { - name: '模型管理', - img: boxbg_facilitiesmanagement, - url: 'http://mor.bimwe.com/', - }, - { - name: '三维展示', - img: boxbg_errands, - url: '/ourPlan/reaEstate', - }, - { - name: '智慧系统', - img: boxbg_propertyandrealestate, - url: 'http://soda.bimwe.com/', - }, - ], + productData: [ + { + name: 'AI集成', + img: boxbg_cleaning, + url: '/ourPlan/aiSolutions', + isLink: false, + description: '基于人工智能技术，为企业提供智能化的业务解决方案', + tags: ['机器学习', '深度学习', '智能分析'] + }, + { + name: '智能建筑', + img: boxbg_smartbuildings, + url: '/ourPlan/estateManagement', + isLink: false, + description: '通过先进技术打造智能化建筑环境，提升建筑管理效率', + tags: ['BIM技术', '智能监控', '自动化管理'] + }, + { + name: '物联网', + img: boxbg_iot, + url: '/ourPlan/iot', + isLink: false, + description: '连接万物，智能互联，打造数字化未来', + tags: ['传感器网络', '数据采集', '智能分析'] + }, + { + name: '设施管理', + img: boxbg_facilitiesmanagement, + url: '/ourPlan/facilityManagement', + isLink: false, + description: '智能化设施管理，提升运营效率与用户体验', + tags: ['预防性维护', '智能调度', '成本优化'] + }, + { + name: '系统集成', + img: boxbg_errands, + url: '/ourPlan/technologyIntegration', + isLink: false, + description: '专业系统整合，构建统一的企业级平台', + tags: ['API集成', '数据同步', '统一管理'] + }, + ], } }, @@ -350,7 +379,7 @@ export default { transform: translateX(-50%); width: 80px; height: 4px; - background: linear-gradient(90deg, #3498db, #9b59b6); + background: linear-gradient(90deg, #3498db, #2980b9); border-radius: 2px; } @@ -581,20 +610,155 @@ export default { grid-template-columns: 1fr; } - .company-intro, + .company-intro, .core-advantages, .business-areas, - .contact-section { + .contact-section, + .products-section { padding: 60px 0; } + + .pageBoxes { + grid-template-columns: 1fr; + gap: 20px; + } + + .boxTableHeader { + padding: 20px; + } + + .product-tags { + gap: 6px; + } + + .tag { + font-size: 0.75rem; + padding: 3px 10px; + } } -/* 原有样式保持 */ -.swiper-pagination { - bottom: 10%; + /* 产品展示区域样式 */ +.products-section { + padding: 80px 0; + background: white; } .pageBoxes { - margin-top: 60px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 40px; + margin-top: 50px; } + +.box { + background: white; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0,0,0,0.1); + overflow: hidden; + transition: all 0.3s ease; + position: relative; + cursor: pointer; +} + +.box:hover { + transform: translateY(-10px); + box-shadow: 0 20px 40px rgba(0,0,0,0.15); +} + +.product-image { + position: relative; + overflow: hidden; +} + +.product-image img { + transition: transform 0.3s ease; +} + +.box:hover .product-image img { + transform: scale(1.05); +} + +.product-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(52, 152, 219, 0.8); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s ease; +} + +.box:hover .product-overlay { + opacity: 1; +} + +.overlay-content { + text-align: center; + color: white; +} + +.view-more { + font-size: 1.2rem; + font-weight: 600; + padding: 12px 24px; + border: 2px solid white; + border-radius: 25px; + transition: all 0.3s ease; +} + +.box:hover .view-more { + background: white; + color: #3498db; +} + +.boxTableHeader { + padding: 25px; + text-align: center; +} + +.boxTableHeader .h2 { + font-size: 1.5rem; + font-weight: 600; + color: #2c3e50; + margin-bottom: 15px; +} + +.product-description { + color: #6c757d; + line-height: 1.6; + margin-bottom: 20px; + font-size: 0.95rem; +} + +.product-tags { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; +} + +.tag { + background: #e9ecef; + color: #495057; + padding: 4px 12px; + border-radius: 15px; + font-size: 0.8rem; + font-weight: 500; + transition: all 0.3s ease; +} + +.tag:hover { + background: #3498db; + color: white; + transform: translateY(-2px); +} + + /* 原有样式保持 */ + .swiper-pagination { + bottom: 10%; + } diff --git a/src/views/ourPlan/aiSolutions.vue b/src/views/ourPlan/aiSolutions.vue index 7602439..9c0a8e4 100644 --- a/src/views/ourPlan/aiSolutions.vue +++ b/src/views/ourPlan/aiSolutions.vue @@ -26,18 +26,22 @@

核心AI服务

+
📊

智能数据分析

利用AI算法分析海量数据，挖掘商业价值，为决策提供数据支撑。

+
💬

智能客服系统

基于NLP技术的智能客服，24/7全天候服务，提升客户体验。

+
🔮

预测性维护

通过AI预测设备故障，实现预防性维护，降低维护成本。

+
👁️

智能图像识别

计算机视觉技术，实现自动化检测、质量控制和安防监控。

@@ -50,6 +54,28 @@ AI解决方案广泛应用于制造业、金融、医疗、零售、物流等多个行业，帮助企业实现智能化升级，提升核心竞争力。

+ +
+

技术架构

+
+
+

应用层

+

智能应用、业务系统、用户界面

+
+
+

算法层

+

机器学习、深度学习、自然语言处理

+
+
+

数据层

+

数据存储、数据处理、数据安全

+
+
+

基础设施层

+

云计算、GPU集群、网络通信

+
+
+
@@ -74,6 +100,8 @@ export default { .ai-solutions-page { min-height: 100vh; background: #f8f9fa; + display: flex; + flex-direction: column; } .page-banner { @@ -81,6 +109,7 @@ export default { color: white; padding: 80px 0; text-align: center; + flex-shrink: 0; } .banner-title { @@ -95,6 +124,7 @@ export default { } .main-content { + flex: 1; padding: 60px 0; } @@ -126,7 +156,7 @@ export default { .ai-services { display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 40px; } @@ -134,20 +164,28 @@ export default { .service-item { background: white; padding: 30px; - border-radius: 10px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + border-radius: 15px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); text-align: center; - transition: transform 0.3s ease; + transition: all 0.3s ease; + border: 1px solid rgba(0, 0, 0, 0.05); } .service-item:hover { - transform: translateY(-5px); + transform: translateY(-8px); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); +} + +.service-icon { + font-size: 3rem; + margin-bottom: 1rem; } .service-item h4 { color: #3498db; font-size: 1.3rem; margin-bottom: 1rem; + font-weight: 600; } .service-item p { @@ -155,6 +193,40 @@ export default { line-height: 1.6; } +.tech-architecture { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 25px; + margin-top: 40px; +} + +.tech-layer { + background: white; + padding: 25px; + border-radius: 12px; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); + text-align: center; + border-left: 4px solid #3498db; + transition: transform 0.3s ease; +} + +.tech-layer:hover { + transform: translateY(-5px); +} + +.tech-layer h4 { + color: #2c3e50; + font-size: 1.2rem; + margin-bottom: 0.8rem; + font-weight: 600; +} + +.tech-layer p { + color: #666; + line-height: 1.5; + font-size: 0.95rem; +} + @media (max-width: 768px) { .banner-title { font-size: 2rem; @@ -167,5 +239,17 @@ export default { .ai-services { grid-template-columns: 1fr; } + + .tech-architecture { + grid-template-columns: 1fr; + } + + .main-content { + padding: 40px 0; + } + + .content-section { + margin-bottom: 40px; + } } diff --git a/src/views/ourPlan/estateManagement.vue b/src/views/ourPlan/estateManagement.vue index 94d5804..1d1de59 100644 --- a/src/views/ourPlan/estateManagement.vue +++ b/src/views/ourPlan/estateManagement.vue @@ -1,24 +1,163 @@ diff --git a/src/views/ourPlan/facilityManagement.vue b/src/views/ourPlan/facilityManagement.vue index 65caead..5b4d214 100644 --- a/src/views/ourPlan/facilityManagement.vue +++ b/src/views/ourPlan/facilityManagement.vue @@ -1,20 +1,274 @@ diff --git a/src/views/ourPlan/iot.vue b/src/views/ourPlan/iot.vue index ee9c3b9..5bbc60e 100644 --- a/src/views/ourPlan/iot.vue +++ b/src/views/ourPlan/iot.vue @@ -1,28 +1,228 @@ diff --git a/src/views/ourPlan/ourPlan.vue b/src/views/ourPlan/ourPlan.vue index fe8c986..7ebc6cd 100644 --- a/src/views/ourPlan/ourPlan.vue +++ b/src/views/ourPlan/ourPlan.vue @@ -1,25 +1,236 @@ diff --git a/src/views/ourPlan/technologyIntegration.vue b/src/views/ourPlan/technologyIntegration.vue index eab1481..5967b33 100644 --- a/src/views/ourPlan/technologyIntegration.vue +++ b/src/views/ourPlan/technologyIntegration.vue @@ -1,22 +1,318 @@