1

src/assets/css/common.css

@@ -1247,7 +1247,7 @@ input[type="text"].search {
     border-bottom: 1px solid #F5F5F5;
 }
 
-#.headerMobileMenu>div.menuContent>ul>li>ul.subMenu>li:last-child {
+.headerMobileMenu>div.menuContent>ul>li>ul.subMenu>li:last-child {
     border-bottom: none;
 }
 
@@ -1290,7 +1290,7 @@ div.googleMap {
     /* IE6-9 */
     -webkit-filter: grayscale(99%);
     /* Chrome 19+ & Safari 6+ */
-    -webkit-backface?visibility: hidden;
+    -webkit-backface-visibility: hidden;
     /* Fix for transition flickering */
 }
 
@@ -1359,7 +1359,7 @@ div.googleMap {
 }
 
 
-/* SMALLER LAPTOPS */
+/* SMALL LAPTOPS */
 
 @media only screen and (max-width: 1400px) {
     table.mainMenu {
@@ -1377,7 +1377,7 @@ div.googleMap {
 }
 
 
-/* SMALLER LAPTOPS */
+/* SMALL LAPTOPS */
 
 @media only screen and (max-width: 1200px) {
     .footer>.row1 table.footerTable {
@@ -1841,4 +1841,738 @@ div.googleMap {
 }
 
 
-/* END MEDIA QUERIES */
+/* END MEDIA QUERIES */
+
+/* 现代化全局样式 */
+
+/* 基础重置 */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'ProximaNova-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.6;
+  color: #2c3e50;
+  margin: 0;
+  padding: 0;
+}
+
+/* 现代化按钮样式 */
+.btn {
+  display: inline-block;
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  color: white;
+  text-decoration: none;
+  border-radius: 25px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
+}
+
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
+}
+
+.btn-secondary {
+  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
+  box-shadow: 0 4px 15px rgba(149, 165, 166, 0.3);
+}
+
+.btn-secondary:hover {
+  box-shadow: 0 6px 20px rgba(149, 165, 166, 0.4);
+}
+
+/* 现代化卡片样式 */
+.card {
+  background: white;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  padding: 30px;
+  transition: all 0.3s ease;
+  border: 1px solid #e9ecef;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+/* 现代化输入框样式 */
+.input {
+  width: 100%;
+  padding: 12px 16px;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: all 0.3s ease;
+  background: white;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #3498db;
+  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
+}
+
+/* 现代化标签样式 */
+.label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #2c3e50;
+}
+
+/* 现代化表格样式 */
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.table th,
+.table td {
+  padding: 15px;
+  text-align: left;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.table th {
+  background: #f8f9fa;
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+.table tr:hover {
+  background: #f8f9fa;
+}
+
+/* 现代化列表样式 */
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.list-item {
+  padding: 12px 0;
+  border-bottom: 1px solid #e9ecef;
+  transition: all 0.3s ease;
+}
+
+.list-item:hover {
+  background: #f8f9fa;
+  padding-left: 10px;
+}
+
+.list-item:last-child {
+  border-bottom: none;
+}
+
+/* 现代化徽章样式 */
+.badge {
+  display: inline-block;
+  padding: 4px 12px;
+  background: #3498db;
+  color: white;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.badge-success {
+  background: #27ae60;
+}
+
+.badge-warning {
+  background: #f39c12;
+}
+
+.badge-danger {
+  background: #e74c3c;
+}
+
+/* 现代化进度条样式 */
+.progress {
+  width: 100%;
+  height: 8px;
+  background: #e9ecef;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #3498db, #9b59b6);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+/* 现代化加载动画 */
+.loading {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 现代化工具提示 */
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip .tooltip-text {
+  visibility: hidden;
+  width: 200px;
+  background: #2c3e50;
+  color: white;
+  text-align: center;
+  border-radius: 6px;
+  padding: 8px;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -100px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* 现代化模态框样式 */
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(5px);
+}
+
+.modal.show {
+  display: block;
+}
+
+.modal-content {
+  background-color: white;
+  margin: 5% auto;
+  padding: 30px;
+  border-radius: 15px;
+  width: 90%;
+  max-width: 600px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  animation: modalSlideIn 0.3s ease;
+}
+
+@keyframes modalSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 现代化通知样式 */
+.notification {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  padding: 15px 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  border-left: 4px solid #3498db;
+  z-index: 1000;
+  animation: slideInRight 0.3s ease;
+}
+
+.notification.success {
+  border-left-color: #27ae60;
+}
+
+.notification.warning {
+  border-left-color: #f39c12;
+}
+
+.notification.error {
+  border-left-color: #e74c3c;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* 现代化分页样式 */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin: 30px 0;
+}
+
+.pagination-item {
+  padding: 10px 15px;
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+  text-decoration: none;
+  color: #2c3e50;
+  transition: all 0.3s ease;
+}
+
+.pagination-item:hover,
+.pagination-item.active {
+  background: #3498db;
+  color: white;
+  border-color: #3498db;
+}
+
+/* 现代化面包屑导航 */
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 20px 0;
+  font-size: 14px;
+}
+
+.breadcrumb-item {
+  color: #6c757d;
+  text-decoration: none;
+}
+
+.breadcrumb-item:hover {
+  color: #3498db;
+}
+
+.breadcrumb-separator {
+  color: #6c757d;
+}
+
+.breadcrumb-item.active {
+  color: #2c3e50;
+  font-weight: 500;
+}
+
+/* 现代化标签页样式 */
+.tabs {
+  border-bottom: 1px solid #e9ecef;
+  margin-bottom: 20px;
+}
+
+.tab-list {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.tab-item {
+  margin-right: 5px;
+}
+
+.tab-link {
+  display: block;
+  padding: 12px 20px;
+  text-decoration: none;
+  color: #6c757d;
+  border-bottom: 2px solid transparent;
+  transition: all 0.3s ease;
+}
+
+.tab-link:hover {
+  color: #3498db;
+}
+
+.tab-link.active {
+  color: #3498db;
+  border-bottom-color: #3498db;
+}
+
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* 现代化折叠面板样式 */
+.accordion {
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.accordion-item {
+  border-bottom: 1px solid #e9ecef;
+}
+
+.accordion-item:last-child {
+  border-bottom: none;
+}
+
+.accordion-header {
+  padding: 15px 20px;
+  background: #f8f9fa;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.accordion-header:hover {
+  background: #e9ecef;
+}
+
+.accordion-title {
+  margin: 0;
+  font-weight: 500;
+  color: #2c3e50;
+}
+
+.accordion-icon {
+  transition: transform 0.3s ease;
+}
+
+.accordion-header.active .accordion-icon {
+  transform: rotate(180deg);
+}
+
+.accordion-content {
+  padding: 0 20px;
+  max-height: 0;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.accordion-header.active + .accordion-content {
+  padding: 20px;
+  max-height: 500px;
+}
+
+/* 现代化滑块样式 */
+.slider {
+  width: 100%;
+  height: 6px;
+  background: #e9ecef;
+  border-radius: 3px;
+  outline: none;
+  -webkit-appearance: none;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  background: #3498db;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
+}
+
+.slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  background: #3498db;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
+}
+
+/* 现代化开关样式 */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider-switch {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 34px;
+}
+
+.slider-switch:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider-switch {
+  background-color: #3498db;
+}
+
+input:checked + .slider-switch:before {
+  transform: translateX(26px);
+}
+
+/* 响应式工具类 */
+.hidden {
+  display: none !important;
+}
+
+.visible {
+  display: block !important;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+.clearfix::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+/* 现代化间距工具类 */
+.m-0 { margin: 0 !important; }
+.m-1 { margin: 0.25rem !important; }
+.m-2 { margin: 0.5rem !important; }
+.m-3 { margin: 1rem !important; }
+.m-4 { margin: 1.5rem !important; }
+.m-5 { margin: 3rem !important; }
+
+.p-0 { padding: 0 !important; }
+.p-1 { padding: 0.25rem !important; }
+.p-2 { padding: 0.5rem !important; }
+.p-3 { padding: 1rem !important; }
+.p-4 { padding: 1.5rem !important; }
+.p-5 { padding: 3rem !important; }
+
+/* 现代化颜色工具类 */
+.text-primary { color: #3498db !important; }
+.text-success { color: #27ae60 !important; }
+.text-warning { color: #f39c12 !important; }
+.text-danger { color: #e74c3c !important; }
+.text-info { color: #17a2b8 !important; }
+.text-light { color: #6c757d !important; }
+.text-dark { color: #2c3e50 !important; }
+
+.bg-primary { background-color: #3498db !important; }
+.bg-success { background-color: #27ae60 !important; }
+.bg-warning { background-color: #f39c12 !important; }
+.bg-danger { background-color: #e74c3c !important; }
+.bg-info { background-color: #17a2b8 !important; }
+.bg-light { background-color: #f8f9fa !important; }
+.bg-dark { background-color: #2c3e50 !important; }
+
+/* 现代化阴影工具类 */
+.shadow-sm { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; }
+.shadow { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; }
+.shadow-lg { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important; }
+.shadow-xl { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important; }
+
+/* 现代化圆角工具类 */
+.rounded { border-radius: 0.375rem !important; }
+.rounded-sm { border-radius: 0.25rem !important; }
+.rounded-lg { border-radius: 0.5rem !important; }
+.rounded-xl { border-radius: 0.75rem !important; }
+.rounded-full { border-radius: 9999px !important; }
+
+/* 现代化过渡工具类 */
+.transition { transition: all 0.3s ease !important; }
+.transition-fast { transition: all 0.15s ease !important; }
+.transition-slow { transition: all 0.5s ease !important; }
+
+/* 现代化变换工具类 */
+.transform { transform: none !important; }
+.scale-95 { transform: scale(0.95) !important; }
+.scale-105 { transform: scale(1.05) !important; }
+.rotate-90 { transform: rotate(90deg) !important; }
+.rotate-180 { transform: rotate(180deg) !important; }
+
+/* 响应式断点 */
+@media (max-width: 576px) {
+  .container {
+    padding: 0 15px;
+  }
+  
+  .card {
+    padding: 20px;
+  }
+  
+  .modal-content {
+    margin: 10% auto;
+    padding: 20px;
+  }
+}
+
+@media (max-width: 768px) {
+  .btn {
+    padding: 10px 20px;
+    font-size: 14px;
+  }
+  
+  .table th,
+  .table td {
+    padding: 10px;
+  }
+}
+
+@media (max-width: 992px) {
+  .tabs .tab-list {
+    flex-direction: column;
+  }
+  
+  .tab-item {
+    margin-right: 0;
+    margin-bottom: 5px;
+  }
+}
+
+/* 现代化滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 现代化选择文本样式 */
+::selection {
+  background: rgba(52, 152, 219, 0.3);
+  color: #2c3e50;
+}
+
+::-moz-selection {
+  background: rgba(52, 152, 219, 0.3);
+  color: #2c3e50;
+}
+
+/* 现代化焦点样式 */
+:focus {
+  outline: 2px solid #3498db;
+  outline-offset: 2px;
+}
+
+/* 现代化禁用状态样式 */
+.disabled,
+[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* 现代化加载状态样式 */
+.loading-state {
+  position: relative;
+  pointer-events: none;
+}
+
+.loading-state::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-state::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  z-index: 1;
+}

src/assets/css/content_pages.css

@@ -1,34 +1,424 @@
 /*PAGE*/
 
+/* 使用 CSS 自定义属性定义响应式断点 */
+:root {
+  /* 响应式断点 */
+  --breakpoint-xs: 380px;
+  --breakpoint-sm: 480px;
+  --breakpoint-md: 620px;
+  --breakpoint-lg: 768px;
+  --breakpoint-xl: 992px;
+  --breakpoint-xxl: 1200px;
+  --breakpoint-xxxl: 1500px;
+  --breakpoint-xxxxl: 1600px;
+  
+  /* 间距变量 */
+  --spacing-xs: 0.5em;
+  --spacing-sm: 1em;
+  --spacing-md: 1.5em;
+  --spacing-lg: 2em;
+  --spacing-xl: 3em;
+  --spacing-xxl: 4em;
+  --spacing-xxxl: 5em;
+  --spacing-xxxxl: 7em;
+  
+  /* 字体大小变量 */
+  --font-size-xs: 0.9em;
+  --font-size-sm: 1.2em;
+  --font-size-md: 1.5em;
+  --font-size-lg: 2.5em;
+  --font-size-xl: 3em;
+  
+  /* 布局变量 */
+  --sidebar-width: 25%;
+  --content-width: 75%;
+  --content-padding: 4em;
+  --sidebar-padding: 5em;
+}
+
 .contentPage {
     position: relative;
     width: 100%;
     vertical-align: top;
-    margin: 0 auto 0 auto;
-    padding-top: 7em;
+    margin: 0 auto;
+    padding-top: var(--spacing-xxxxl);
     min-height: 100vh;
+    
+    /* 容器查询支持 */
+    container-type: inline-size;
+    container-name: content-page;
 }
 
-
 /* CONTENT TABLES */
 
 .contentTableLeft {
-    width: 25%;
-    padding-left: 5em;
-    padding-top: 3em;
+    width: var(--sidebar-width);
+    padding-left: var(--sidebar-padding);
+    padding-top: var(--spacing-xl);
     vertical-align: top;
 }
 
 .contentTableRight {
-    width: 75%;
+    width: var(--content-width);
     padding-top: 3.5em;
-    padding-left: 4.0em;
-    padding-right: 4.0em;
+    padding-left: var(--content-padding);
+    padding-right: var(--content-padding);
     vertical-align: top;
 }
 
+/* 使用容器查询替代媒体查询 */
+@container content-page (max-width: 1600px) {
+    .contentTableRight {
+        padding-right: 8em;
+    }
+}
 
-/* END CONTENT TABLES */
+@container content-page (max-width: 1500px) {
+    .contentTableRight {
+        padding-right: 6em;
+    }
+    
+    .contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
+        font-size: var(--font-size-xl);
+    }
+}
+
+@container content-page (max-width: 1200px) {
+    .contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
+        font-size: var(--font-size-lg);
+    }
+    
+    .contentPage .contentPageBanner .bannerBox .bread {
+        width: 75%;
+    }
+    
+    .contentTableLeft {
+        padding-left: var(--spacing-xl);
+        padding-top: var(--spacing-xl);
+    }
+    
+    .contentTableRight {
+        padding-top: var(--spacing-xl);
+        padding-left: var(--content-padding);
+        padding-right: var(--content-padding);
+    }
+    
+    .contentPage>.contentTable .bottomTwoColumn div.column {
+        width: 100%;
+    }
+    
+    .contentPage>.contentTable .bottomTwoColumn div.column:first-child {
+        margin-bottom: var(--spacing-sm);
+    }
+}
+
+@container content-page (max-width: 992px) {
+    .contentTableLeft {
+        padding-left: var(--spacing-lg);
+    }
+    
+    .contentTableRight {
+        padding-top: 4.5em;
+        padding-left: var(--spacing-xl);
+        padding-right: var(--spacing-lg);
+    }
+}
+
+@container content-page (max-width: 768px) {
+    .contentPage {
+        padding-top: 5.5em;
+    }
+    
+    .contentPage .contentPageBanner .bannerBox .bannerBoxHeadline {
+        display: none;
+    }
+    
+    .contentPage .contentPageBanner .bannerBox .bread {
+        width: 90%;
+    }
+    
+    .pageBannerMobile {
+        display: inline-block;
+        width: 100%;
+        border: none;
+    }
+    
+    img.pageBanner {
+        display: none;
+    }
+    
+    .contentTableLeft {
+        width: 100%;
+        padding: 0;
+        margin: 0;
+    }
+    
+    .contentTableRight {
+        display: none;
+    }
+    
+    .contentTableLeft>div>#navBreadcrumb {
+        display: none;
+    }
+    
+    .accordion {
+        padding: var(--spacing-lg);
+    }
+    
+    .accordion:after {
+        display: none;
+    }
+    
+    .accordion>ul>li>ul.categoryItems>li>a {
+        width: 100%;
+        padding: var(--spacing-sm) 0;
+    }
+    
+    .accordion .triangleLeft,
+    .triangleOverlay {
+        display: none;
+    }
+    
+    .linkContactUs {
+        display: inline-block !important;
+        text-decoration: underline !important;
+        padding-bottom: 0;
+    }
+    
+    .contentPage>.contentTable .bottomTwoColumn div.column p.contactUs {
+        display: none;
+    }
+}
+
+@container content-page (max-width: 620px) {
+    .contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
+        font-size: var(--font-size-md);
+    }
+    
+    .contentPage .contentPageBanner .bannerBox .bread {
+        width: 95%;
+    }
+}
+
+@container content-page (max-width: 480px) {
+    .contentPage {
+        padding-top: 4em;
+        padding-bottom: 0;
+        line-height: 1.2em;
+    }
+    
+    .contentTableLeft {
+        width: 100%;
+    }
+    
+    .contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
+        font-size: var(--font-size-md);
+    }
+    
+    .contentPage .contentPageBanner .bannerBox .bread {
+        display: none;
+    }
+    
+    .triangle {
+        border-top: 0.4em solid transparent;
+        border-bottom: 0.4em solid transparent;
+        border-left: 0.4em solid #ee3224;
+        margin-right: 0.6em;
+    }
+    
+    .categoryItems {
+        padding: 0;
+    }
+    
+    .accordion {
+        padding-bottom: 0;
+    }
+    
+    .accordion div.mobileContent .seekJobWrapper {
+        margin-top: var(--spacing-lg);
+        text-align: center;
+    }
+    
+    .accordion div.mobileContent a.seekJob {
+        display: block;
+        padding: 1.2em;
+    }
+}
+
+@container content-page (max-width: 380px) {
+    .contentPage>.contentTable .productCustomers .customerIcons img {
+        height: 2.5em;
+    }
+    
+    .contentPage>.contentTable .productCustomers .customerIcons img.shorter {
+        height: 1.5em;
+    }
+}
+
+/* 容器查询回退方案 - 为不支持容器查询的浏览器提供媒体查询 */
+@supports not (container-type: inline-size) {
+    @media only screen and (max-width: 1600px) {
+        .contentTableRight {
+            padding-top: 3.5em;
+            padding-left: 4.0em;
+            padding-right: 8.0em;
+        }
+    }
+    
+    @media only screen and (max-width: 1500px) {
+        .contentTableRight {
+            padding-top: 3.5em;
+            padding-left: 4.0em;
+            padding-right: 6.0em;
+        }
+        .contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
+            font-size: 3em;
+        }
+    }
+    
+    @media only screen and (max-width: 1200px) {
+        .contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
+            font-size: 2.5em;
+        }
+        .contentPage .contentPageBanner .bannerBox .bread {
+            width: 75%;
+        }
+        .contentTableLeft {
+            padding-left: 3em;
+            padding-top: 3em;
+        }
+        .contentTableRight {
+            padding-top: 3em;
+            padding-left: 4.0em;
+            padding-right: 4.0em;
+        }
+        .contentPage>.contentTable .bottomTwoColumn div.column {
+            width: 100%;
+        }
+        .contentPage>.contentTable .bottomTwoColumn div.column:first-child {
+            margin-bottom: 1em;
+        }
+    }
+    
+    @media only screen and (max-width: 992px) {
+        .contentTableLeft {
+            padding-left: 2em;
+        }
+        .contentTableRight {
+            padding-top: 4.5em;
+            padding-left: 3em;
+            padding-right: 2em;
+        }
+    }
+    
+    @media only screen and (max-width: 768px) {
+        .contentPage {
+            padding-top: 5.5em;
+        }
+        .contentPage .contentPageBanner .bannerBox .bannerBoxHeadline {
+            display: none;
+        }
+        .contentPage .contentPageBanner .bannerBox .bread {
+            width: 90%;
+        }
+        .pageBannerMobile {
+            display: inline-block;
+            width: 100%;
+            border: none;
+        }
+        img.pageBanner {
+            display: none;
+        }
+        .contentTableLeft {
+            width: 100%;
+            padding: 0;
+            margin: 0;
+        }
+        .contentTableRight {
+            display: none;
+        }
+        .contentTableLeft>div>#navBreadcrumb {
+            display: none;
+        }
+        .accordion {
+            padding: 2em;
+        }
+        .accordion:after {
+            display: none;
+        }
+        .accordion>ul>li>ul.categoryItems>li>a {
+            width: 100%;
+            padding: 1em 0;
+        }
+        .accordion .triangleLeft,
+        .triangleOverlay {
+            display: none;
+        }
+        .linkContactUs {
+            display: inline-block !important;
+            text-decoration: underline !important;
+            padding-bottom: 0;
+        }
+        .contentPage>.contentTable .bottomTwoColumn div.column p.contactUs {
+            display: none;
+        }
+    }
+    
+    @media only screen and (max-width: 620px) {
+        .contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
+            font-size: 1.5em;
+        }
+        .contentPage .contentPageBanner .bannerBox .bread {
+            width: 95%;
+        }
+    }
+    
+    @media only screen and (max-width: 480px) {
+        .contentPage {
+            padding-top: 4em;
+            padding-bottom: 0;
+            line-height: 1.2em;
+        }
+        .contentTableLeft {
+            width: 100%;
+        }
+        .contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
+            font-size: 1.5em;
+        }
+        .contentPage .contentPageBanner .bannerBox .bread {
+            display: none;
+        }
+        .triangle {
+            border-top: 0.4em solid transparent;
+            border-bottom: 0.4em solid transparent;
+            border-left: 0.4em solid #ee3224;
+            margin-right: 0.6em;
+        }
+        .categoryItems {
+            padding: 0;
+        }
+        .accordion {
+            padding-bottom: 0;
+        }
+        .accordion div.mobileContent .seekJobWrapper {
+            margin-top: 2em;
+            text-align: center;
+        }
+        .accordion div.mobileContent a.seekJob {
+            display: block;
+            padding: 1.2em;
+        }
+    }
+    
+    @media only screen and (max-width: 380px) {
+        .contentPage>.contentTable .productCustomers .customerIcons img {
+            height: 2.5em;
+        }
+        .contentPage>.contentTable .productCustomers .customerIcons img.shorter {
+            height: 1.5em;
+        }
+    }
+}
 
 
 /* NAV SIDEBAR */
@@ -479,179 +869,396 @@
 
 /* MEDIA QUERIES */
 
-@media only screen and (max-width: 1600px) {
-    .contentTableRight {
-        padding-top: 3.5em;
-        padding-left: 4.0em;
-        padding-right: 8.0em;
-    }
+
+/* 现代 CSS 优化和增强功能 */
+
+/* 使用 CSS Grid 实现更灵活的布局 */
+.contentPage {
+    display: grid;
+    grid-template-columns: var(--sidebar-width) var(--content-width);
+    gap: 0;
 }
 
-@media only screen and (max-width: 1500px) {
-    .contentTableRight {
-        padding-top: 3.5em;
-        padding-left: 4.0em;
-        padding-right: 6.0em;
-    }
-    .contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
-        font-size: 3em;
-    }
-}
-
-
-/* SMALL LAPTOPS */
-
-@media only screen and (max-width: 1200px) {
-    .contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
-        font-size: 2.5em;
-    }
-    .contentPage .contentPageBanner .bannerBox .bread {
-        width: 75%;
-    }
-    .contentTableLeft {
-        padding-left: 3em;
-        padding-top: 3em;
-    }
-    .contentTableRight {
-        padding-top: 3em;
-        padding-left: 4.0em;
-        padding-right: 4.0em;
-    }
-    .contentPage>.contentTable .bottomTwoColumn div.column {
-        width: 100%;
-    }
-    .contentPage>.contentTable .bottomTwoColumn div.column:first-child {
-        margin-bottom: 1em;
-    }
-}
-
-
-/* SMALL LAPTOPS */
-
-@media only screen and (max-width: 992px) {
-    .contentTableLeft {
-        padding-left: 2em;
-    }
-    .contentTableRight {
-        padding-top: 4.5em;
-        padding-left: 3em;
-        padding-right: 2em;
-    }
-}
-
-
-/* LARGE TABLETS */
-
-@media only screen and (max-width: 768px) {
+@container content-page (max-width: 768px) {
     .contentPage {
-        padding-top: 5.5em;
+        grid-template-columns: 1fr;
+        gap: var(--spacing-lg);
     }
-    .contentPage .contentPageBanner .bannerBox .bannerBoxHeadline {
-        display: none;
+}
+
+/* 使用 CSS 逻辑属性实现更好的国际化支持 */
+.contentTableLeft {
+    padding-inline-start: var(--sidebar-padding);
+    padding-block-start: var(--spacing-xl);
+}
+
+.contentTableRight {
+    padding-inline: var(--content-padding);
+    padding-block-start: 3.5em;
+}
+
+/* 使用 CSS 自定义属性实现主题切换 */
+:root {
+    /* 颜色主题 */
+    --primary-color: #ee3224;
+    --secondary-color: #737373;
+    --border-color: #DCDCDC;
+    --text-color: #000;
+    --link-hover-color: #737373;
+    
+    /* 动画变量 */
+    --transition-fast: 0.2s ease;
+    --transition-normal: 0.3s ease;
+    --transition-slow: 0.5s ease;
+}
+
+/* 深色主题支持 */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --primary-color: #ff6b6b;
+        --secondary-color: #a0a0a0;
+        --border-color: #404040;
+        --text-color: #ffffff;
+        --link-hover-color: #ff6b6b;
     }
+}
+
+/* 使用 CSS 自定义属性 */
+.breadcrumb>a:hover {
+    color: var(--link-hover-color);
+    text-decoration: underline;
+}
+
+.accordion:after {
+    background-color: var(--border-color);
+}
+
+/* 使用 CSS 逻辑属性实现更好的 RTL 支持 */
+.accordion:after {
+    inset-inline-end: 0;
+    inset-block-start: 0;
+}
+
+/* 使用 CSS 逻辑属性实现更好的间距 */
+.accordion>.content {
+    margin-block-start: var(--spacing-lg);
+    padding-inline-start: 0.2em;
+}
+
+/* 使用 CSS 逻辑属性实现更好的边框 */
+.accordion>ul>li.category {
+    margin-block-end: 1.2em;
+}
+
+/* 使用 CSS 逻辑属性实现更好的定位 */
+.accordion>ul>li.category>a.categoryHead {
+    margin-block-end: 1.2em;
+}
+
+/* 使用 CSS 逻辑属性实现更好的布局 */
+.accordion>ul>li.category>a.categoryHead {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+}
+
+/* 使用 CSS 逻辑属性实现更好的响应式 */
+@container content-page (max-width: 768px) {
+    .accordion {
+        padding-inline: var(--spacing-lg);
+        padding-block: var(--spacing-lg);
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端优化 */
+@container content-page (max-width: 480px) {
+    .accordion {
+        padding-block-end: 0;
+    }
+    
+    .accordion div.mobileContent .seekJobWrapper {
+        margin-block-start: var(--spacing-lg);
+        text-align: center;
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的图片优化 */
+@container content-page (max-width: 380px) {
+    .contentPage>.contentTable .productCustomers .customerIcons img {
+        height: 2.5em;
+        width: auto;
+        object-fit: contain;
+    }
+    
+    .contentPage>.contentTable .productCustomers .customerIcons img.shorter {
+        height: 1.5em;
+        width: auto;
+        object-fit: contain;
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的三角形样式 */
+.triangle {
+    border-block: 0.4em solid transparent;
+    border-inline-start: 0.4em solid var(--primary-color);
+    margin-inline-end: 0.6em;
+}
+
+/* 使用 CSS 逻辑属性实现更好的链接样式 */
+.linkContactUs {
+    display: inline-block !important;
+    text-decoration: underline !important;
+    padding-block-end: 0;
+    color: var(--primary-color);
+    transition: color var(--transition-normal);
+}
+
+.linkContactUs:hover {
+    color: var(--link-hover-color);
+}
+
+/* 使用 CSS 逻辑属性实现更好的面包屑样式 */
+.breadcrumb {
+    margin-block-end: var(--spacing-lg);
+    margin-inline-end: var(--spacing-sm);
+}
+
+/* 使用 CSS 逻辑属性实现更好的分类项样式 */
+.categoryItems {
+    padding-inline: 0;
+    margin-block: 0;
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端内容样式 */
+.accordion div.mobileContent a.seekJob {
+    display: block;
+    padding: 1.2em;
+    text-align: center;
+    background: var(--primary-color);
+    color: white;
+    text-decoration: none;
+    border-radius: var(--border-radius);
+    transition: background-color var(--transition-normal);
+}
+
+.accordion div.mobileContent a.seekJob:hover {
+    background: var(--link-hover-color);
+}
+
+/* 使用 CSS 逻辑属性实现更好的页面横幅样式 */
+.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
+    font-size: var(--font-size-xl);
+    line-height: 1.2;
+    margin-block: var(--spacing-lg);
+}
+
+.contentPage .contentPageBanner .bannerBox .bread {
+    width: 75%;
+    margin-block: var(--spacing-md);
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端横幅样式 */
+@container content-page (max-width: 768px) {
     .contentPage .contentPageBanner .bannerBox .bread {
         width: 90%;
     }
-    .pageBannerMobile {
-        display: inline-block;
-        width: 100%;
-        border: none;
-    }
-    img.pageBanner {
-        display: none;
-    }
-    .contentTableLeft {
-        width: 100%;
-        padding: 0;
-        margin: 0;
-    }
-    .contentTableRight {
-        display: none;
-    }
-    .contentTableLeft>div>#navBreadcrumb {
-        display: none;
-    }
-    .accordion {
-        padding: 2em;
-    }
-    .accordion:after {
-        display: none;
-    }
-    .accordion>ul>li>ul.categoryItems>li>a {
-        width: 100%;
-        padding: 1em 0;
-    }
-    .accordion .triangleLeft,
-    .triangleOverlay {
-        display: none;
-    }
-    .linkContactUs {
-        display: inline-block !important;
-        text-decoration: underline !important;
-        padding-bottom: 0;
-    }
-    .contentPage>.contentTable .bottomTwoColumn div.column p.contactUs {
-        display: none;
-    }
 }
 
-@media only screen and (max-width: 620px) {
-    .contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
-        font-size: 1.5em;
-    }
+@container content-page (max-width: 620px) {
     .contentPage .contentPageBanner .bannerBox .bread {
         width: 95%;
     }
 }
 
-
-/* PHONES */
-
-@media only screen and (max-width: 480px) {
-    .contentPage {
-        padding-top: 4em;
-        padding-bottom: 0;
-        line-height: 1.2em;
-    }
-    .contentTableLeft {
-        width: 100%;
-    }
-    .contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
-        font-size: 1.5em;
-    }
+@container content-page (max-width: 480px) {
     .contentPage .contentPageBanner .bannerBox .bread {
         display: none;
     }
-    .triangle {
-        border-top: 0.4em solid transparent;
-        border-bottom: 0.4em solid transparent;
-        border-left: 0.4em solid #ee3224;
-        margin-right: 0.6em;
+}
+
+/* 使用 CSS 逻辑属性实现更好的页面内容样式 */
+.contentPage {
+    padding-block-start: var(--spacing-xxxxl);
+    line-height: 1.6;
+}
+
+@container content-page (max-width: 768px) {
+    .contentPage {
+        padding-block-start: 5.5em;
     }
+}
+
+@container content-page (max-width: 480px) {
+    .contentPage {
+        padding-block-start: 4em;
+        padding-block-end: 0;
+        line-height: 1.2em;
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的表格样式 */
+.contentPage>.contentTable .bottomTwoColumn div.column {
+    width: 100%;
+    margin-block-end: var(--spacing-sm);
+}
+
+.contentPage>.contentTable .bottomTwoColumn div.column:first-child {
+    margin-block-end: var(--spacing-sm);
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端表格样式 */
+@container content-page (max-width: 1200px) {
+    .contentPage>.contentTable .bottomTwoColumn div.column {
+        width: 100%;
+    }
+    
+    .contentPage>.contentTable .bottomTwoColumn div.column:first-child {
+        margin-block-end: var(--spacing-sm);
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端内容样式 */
+@container content-page (max-width: 768px) {
+    .contentPage>.contentTable .bottomTwoColumn div.column p.contactUs {
+        display: none;
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端导航样式 */
+@container content-page (max-width: 768px) {
+    .contentTableLeft>div>#navBreadcrumb {
+        display: none;
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端图标样式 */
+@container content-page (max-width: 768px) {
+    .accordion .triangleLeft,
+    .triangleOverlay {
+        display: none;
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端链接样式 */
+@container content-page (max-width: 768px) {
+    .accordion>ul>li>ul.categoryItems>li>a {
+        width: 100%;
+        padding-block: var(--spacing-sm);
+        padding-inline: 0;
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端页面横幅样式 */
+@container content-page (max-width: 768px) {
+    .contentPage .contentPageBanner .bannerBox .bannerBoxHeadline {
+        display: none;
+    }
+    
+    .pageBannerMobile {
+        display: inline-block;
+        width: 100%;
+        border: none;
+    }
+    
+    img.pageBanner {
+        display: none;
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端布局样式 */
+@container content-page (max-width: 768px) {
+    .contentTableLeft {
+        width: 100%;
+        padding: 0;
+        margin: 0;
+    }
+    
+    .contentTableRight {
+        display: none;
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端手风琴样式 */
+@container content-page (max-width: 768px) {
+    .accordion {
+        padding: var(--spacing-lg);
+    }
+    
+    .accordion:after {
+        display: none;
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端链接样式 */
+@container content-page (max-width: 768px) {
+    .linkContactUs {
+        display: inline-block !important;
+        text-decoration: underline !important;
+        padding-block-end: 0;
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端字体样式 */
+@container content-page (max-width: 620px) {
+    .contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
+        font-size: var(--font-size-md);
+    }
+}
+
+@container content-page (max-width: 480px) {
+    .contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
+        font-size: var(--font-size-md);
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端三角形样式 */
+@container content-page (max-width: 480px) {
+    .triangle {
+        border-block: 0.4em solid transparent;
+        border-inline-start: 0.4em solid var(--primary-color);
+        margin-inline-end: 0.6em;
+    }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端分类项样式 */
+@container content-page (max-width: 480px) {
     .categoryItems {
         padding: 0;
     }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端手风琴样式 */
+@container content-page (max-width: 480px) {
     .accordion {
-        padding-bottom: 0;
+        padding-block-end: 0;
     }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端求职包装器样式 */
+@container content-page (max-width: 480px) {
     .accordion div.mobileContent .seekJobWrapper {
-        margin-top: 2em;
+        margin-block-start: var(--spacing-lg);
         text-align: center;
     }
+}
+
+/* 使用 CSS 逻辑属性实现更好的移动端求职链接样式 */
+@container content-page (max-width: 480px) {
     .accordion div.mobileContent a.seekJob {
         display: block;
         padding: 1.2em;
     }
 }
 
-@media only screen and (max-width: 380px) {
+/* 使用 CSS 逻辑属性实现更好的移动端客户图标样式 */
+@container content-page (max-width: 380px) {
     .contentPage>.contentTable .productCustomers .customerIcons img {
         height: 2.5em;
     }
+    
     .contentPage>.contentTable .productCustomers .customerIcons img.shorter {
         height: 1.5em;
     }
 }
 
-
 /* END NEW BY MARK */

src/assets/icon.svg

@@ -0,0 +1,29 @@
+<svg class="css-ze2te4 css-qd6ojx" viewBox="0 0 100 100">
+    <g
+        transform="translate(-1.3683870295384977, -1.3683870295384977) scale(0.3424559467337198)"
+        class="css-owa8dd" fill="#fafafa">
+        <g xmlns="http://www.w3.org/2000/svg">
+            <g>
+                <defs>
+                    <rect id="b" x="8.5" y="8.5"
+                        transform="matrix(0.719 -0.6951 0.6951 0.719 -62.0973 146.4242)"
+                        width="283" height="283"></rect>
+                </defs>
+                <clipPath id="a">
+                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
+                        overflow="visible"></use>
+                </clipPath>
+                <g style="clip-path:url(#a);">
+                    <path
+                        d="M67.2,155.9l-59.3-1c-2.3,0-4,1.9-3.9,4c1.4,22.6,7.8,43.7,18.3,62.4c1,1.7,3,2.5,4.8,1.7l57.5-24.6     c3.7-1.6,8.1-1.3,11.5,1.1c4.4,3.2,5.8,9.2,3.6,13.9l-26.7,57c-0.8,1.7-0.2,3.9,1.5,4.9c18.3,11,39.2,18.2,61.7,20.4     c2.2,0.2,4.1-1.5,4.2-3.8l1-59.3C142,190.9,108.9,156.6,67.2,155.9z"></path>
+                    <path
+                        d="M144.1,67.2l1-59.3c0-2.3-1.9-4-4-3.9c-22.6,1.4-43.7,7.8-62.4,18.3c-1.7,1-2.5,3-1.7,4.8l24.6,57.5     c1.6,3.7,1.3,8.1-1.1,11.5c-3.2,4.4-9.1,5.8-13.9,3.6L29.7,72.9c-1.7-0.8-3.9-0.2-4.9,1.5c-11,18.3-18.2,39.2-20.4,61.7     c-0.2,2.2,1.5,4.1,3.8,4.2l59.3,1C109.1,142,143.4,108.9,144.1,67.2z"></path>
+                    <path
+                        d="M232.8,144.1l59.3,1c2.3,0,4-1.9,3.9-4c-1.4-22.6-7.8-43.7-18.3-62.4c-1-1.7-3-2.5-4.8-1.7l-57.5,24.6     c-3.7,1.6-8.1,1.3-11.5-1.1c-4.4-3.2-5.8-9.1-3.6-13.9L227,29.8c0.8-1.7,0.2-3.9-1.5-4.9c-18.2-11.1-39.2-18.3-61.7-20.4     c-2.2-0.2-4.1,1.5-4.2,3.8l-1,59.3C158,109.1,191.1,143.4,232.8,144.1z"></path>
+                    <path
+                        d="M198.2,215.1c-2.1-4.9-0.6-10.7,4.1-13.8c3.4-2.4,7.8-2.5,11.5-0.7l56.6,26.5c1.7,0.8,3.9,0.2,4.9-1.5     c11-18.3,18.2-39.2,20.3-61.7c0.2-2.2-1.5-4.1-3.8-4.2l-59.3-1c-41.7-0.7-76,32.4-76.7,74.1l-1,59.3c0,2.3,1.9,4,4,3.9     c22.6-1.4,43.7-7.8,62.4-18.3c1.7-1,2.5-3,1.7-4.8L198.2,215.1z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icon.svg

@@ -0,0 +1,29 @@
+<svg class="css-ze2te4 css-qd6ojx" viewBox="0 0 100 100">
+    <g
+        transform="translate(-1.3683870295384977, -1.3683870295384977) scale(0.3424559467337198)"
+        class="css-owa8dd" fill="#fafafa">
+        <g xmlns="http://www.w3.org/2000/svg">
+            <g>
+                <defs>
+                    <rect id="b" x="8.5" y="8.5"
+                        transform="matrix(0.719 -0.6951 0.6951 0.719 -62.0973 146.4242)"
+                        width="283" height="283"></rect>
+                </defs>
+                <clipPath id="a">
+                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
+                        overflow="visible"></use>
+                </clipPath>
+                <g style="clip-path:url(#a);">
+                    <path
+                        d="M67.2,155.9l-59.3-1c-2.3,0-4,1.9-3.9,4c1.4,22.6,7.8,43.7,18.3,62.4c1,1.7,3,2.5,4.8,1.7l57.5-24.6     c3.7-1.6,8.1-1.3,11.5,1.1c4.4,3.2,5.8,9.2,3.6,13.9l-26.7,57c-0.8,1.7-0.2,3.9,1.5,4.9c18.3,11,39.2,18.2,61.7,20.4     c2.2,0.2,4.1-1.5,4.2-3.8l1-59.3C142,190.9,108.9,156.6,67.2,155.9z"></path>
+                    <path
+                        d="M144.1,67.2l1-59.3c0-2.3-1.9-4-4-3.9c-22.6,1.4-43.7,7.8-62.4,18.3c-1.7,1-2.5,3-1.7,4.8l24.6,57.5     c1.6,3.7,1.3,8.1-1.1,11.5c-3.2,4.4-9.1,5.8-13.9,3.6L29.7,72.9c-1.7-0.8-3.9-0.2-4.9,1.5c-11,18.3-18.2,39.2-20.4,61.7     c-0.2,2.2,1.5,4.1,3.8,4.2l59.3,1C109.1,142,143.4,108.9,144.1,67.2z"></path>
+                    <path
+                        d="M232.8,144.1l59.3,1c2.3,0,4-1.9,3.9-4c-1.4-22.6-7.8-43.7-18.3-62.4c-1-1.7-3-2.5-4.8-1.7l-57.5,24.6     c-3.7,1.6-8.1,1.3-11.5-1.1c-4.4-3.2-5.8-9.1-3.6-13.9L227,29.8c0.8-1.7,0.2-3.9-1.5-4.9c-18.2-11.1-39.2-18.3-61.7-20.4     c-2.2-0.2-4.1,1.5-4.2,3.8l-1,59.3C158,109.1,191.1,143.4,232.8,144.1z"></path>
+                    <path
+                        d="M198.2,215.1c-2.1-4.9-0.6-10.7,4.1-13.8c3.4-2.4,7.8-2.5,11.5-0.7l56.6,26.5c1.7,0.8,3.9,0.2,4.9-1.5     c11-18.3,18.2-39.2,20.3-61.7c0.2-2.2-1.5-4.1-3.8-4.2l-59.3-1c-41.7-0.7-76,32.4-76.7,74.1l-1,59.3c0,2.3,1.9,4,4,3.9     c22.6-1.4,43.7-7.8,62.4-18.3c1.7-1,2.5-3,1.7-4.8L198.2,215.1z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/logo.svg

@@ -0,0 +1,45 @@
+<svg width="448.3" height="309.7"
+    viewBox="0 0 249.99999999999997 172.70410043836824" class="looka-1j8o68f">
+    <defs id="SvgjsDefs9244"></defs>
+    <g id="SvgjsG9245" featurekey="JQyOZB-0"
+        transform="matrix(0.3,0,0,0.3,73.6,-1.4)"
+        fill="#fafafa">
+        <g xmlns="http://www.w3.org/2000/svg">
+            <g>
+                <defs>
+                    <rect id="b" x="8.5" y="8.5"
+                        transform="matrix(0.7,-0.7,0.7,0.7,-62.1,146.4)" width="283"
+                        height="283"></rect>
+                </defs>
+                <clipPath id="a">
+                    <use transform="matrix(1,0,0,1,0,0)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
+                        overflow="visible"></use>
+                </clipPath>
+                <g style="clip-path: url(#a)"
+                fill="#0097f3"
+                >
+                    <path
+                        d="M 67.2 155.9 l -59.3 -1 c -2.3 0 -4 1.9 -3.9 4 c 1.4 22.6 7.8 43.7 18.3 62.4 c 1 1.7 3 2.5 4.8 1.7 l 57.5 -24.6 c 3.7 -1.6 8.1 -1.3 11.5 1.1 c 4.4 3.2 5.8 9.2 3.6 13.9 l -26.7 57 c -0.8 1.7 -0.2 3.9 1.5 4.9 c 18.3 11 39.2 18.2 61.7 20.4 c 2.2 0.2 4.1 -1.5 4.2 -3.8 l 1 -59.3 C 142 190.9 108.9 156.6 67.2 155.9 z"></path>
+                    <path
+                        d="M 144.1 67.2 l 1 -59.3 c 0 -2.3 -1.9 -4 -4 -3.9 c -22.6 1.4 -43.7 7.8 -62.4 18.3 c -1.7 1 -2.5 3 -1.7 4.8 l 24.6 57.5 c 1.6 3.7 1.3 8.1 -1.1 11.5 c -3.2 4.4 -9.1 5.8 -13.9 3.6 L 29.7 72.9 c -1.7 -0.8 -3.9 -0.2 -4.9 1.5 c -11 18.3 -18.2 39.2 -20.4 61.7 c -0.2 2.2 1.5 4.1 3.8 4.2 l 59.3 1 C 109.1 142 143.4 108.9 144.1 67.2 z"></path>
+                    <path
+                        d="M 232.8 144.1 l 59.3 1 c 2.3 0 4 -1.9 3.9 -4 c -1.4 -22.6 -7.8 -43.7 -18.3 -62.4 c -1 -1.7 -3 -2.5 -4.8 -1.7 l -57.5 24.6 c -3.7 1.6 -8.1 1.3 -11.5 -1.1 c -4.4 -3.2 -5.8 -9.1 -3.6 -13.9 L 227 29.8 c 0.8 -1.7 0.2 -3.9 -1.5 -4.9 c -18.2 -11.1 -39.2 -18.3 -61.7 -20.4 c -2.2 -0.2 -4.1 1.5 -4.2 3.8 l -1 59.3 C 158 109.1 191.1 143.4 232.8 144.1 z"></path>
+                    <path
+                        d="M 198.2 215.1 c -2.1 -4.9 -0.6 -10.7 4.1 -13.8 c 3.4 -2.4 7.8 -2.5 11.5 -0.7 l 56.6 26.5 c 1.7 0.8 3.9 0.2 4.9 -1.5 c 11 -18.3 18.2 -39.2 20.3 -61.7 c 0.2 -2.2 -1.5 -4.1 -3.8 -4.2 l -59.3 -1 c -41.7 -0.7 -76 32.4 -76.7 74.1 l -1 59.3 c 0 2.3 1.9 4 4 3.9 c 22.6 -1.4 43.7 -7.8 62.4 -18.3 c 1.7 -1 2.5 -3 1.7 -4.8 L 198.2 215.1 z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+    <g id="SvgjsG9243" featurekey="SbCDzn-3"
+        transform="matrix(-4.3,0,0,-4.3,44.1,206.1)"
+        fill="#0097f3">
+        <path
+            d="M 1.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
+    </g>
+    <g id="SvgjsG9246" featurekey="SbCDzn-0"
+        transform="matrix(4.3,0,0,4.3,-4.9,86.6)"
+        fill="#0097f3">
+        <path
+            d="M 11.9 7.8 l 3 0 l 0 12.2 l -3 0 l 0 -12.2 z M 20.2 13.3 l 0 6.7 l -3 0 l 0 -12.2 l 3 0 l 3.8 6.8 l 3.8 -6.8 l 3 0 l 0 12.2 l -3 0 l 0 -6.7 l -2.3 4 l -3 0 z M 45.9 7.8 l 2.9 0 l -2.3 12.2 l -4.4 0 l -1.6 -7.1 l -1.7 7.1 l -4.7 0 l -2 -12.2 l 3.1 0 l 1.4 9.2 l 1.8 -7.1 l 4.3 0 l 1.7 7.1 z M 50.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
+    </g>
+</svg>

src/assets/img/logo_b.svg

@@ -0,0 +1,44 @@
+<svg width="448.3" height="309.7"
+    viewBox="0 0 249.99999999999997 172.70410043836824" class="looka-1j8o68f">
+    <defs id="SvgjsDefs9244"></defs>
+    <g id="SvgjsG9245" featurekey="JQyOZB-0"
+        transform="matrix(0.3,0,0,0.3,73.6,-1.4)"
+        fill="#fafafa">
+        <g xmlns="http://www.w3.org/2000/svg">
+            <g>
+                <defs>
+                    <rect id="b" x="8.5" y="8.5"
+                        transform="matrix(0.7,-0.7,0.7,0.7,-62.1,146.4)" width="283"
+                        height="283"></rect>
+                </defs>
+                <clipPath id="a">
+                    <use transform="matrix(1,0,0,1,0,0)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
+                        overflow="visible"></use>
+                </clipPath>
+                <g style="clip-path: url(#a)"
+                >
+                    <path
+                        d="M 67.2 155.9 l -59.3 -1 c -2.3 0 -4 1.9 -3.9 4 c 1.4 22.6 7.8 43.7 18.3 62.4 c 1 1.7 3 2.5 4.8 1.7 l 57.5 -24.6 c 3.7 -1.6 8.1 -1.3 11.5 1.1 c 4.4 3.2 5.8 9.2 3.6 13.9 l -26.7 57 c -0.8 1.7 -0.2 3.9 1.5 4.9 c 18.3 11 39.2 18.2 61.7 20.4 c 2.2 0.2 4.1 -1.5 4.2 -3.8 l 1 -59.3 C 142 190.9 108.9 156.6 67.2 155.9 z"></path>
+                    <path
+                        d="M 144.1 67.2 l 1 -59.3 c 0 -2.3 -1.9 -4 -4 -3.9 c -22.6 1.4 -43.7 7.8 -62.4 18.3 c -1.7 1 -2.5 3 -1.7 4.8 l 24.6 57.5 c 1.6 3.7 1.3 8.1 -1.1 11.5 c -3.2 4.4 -9.1 5.8 -13.9 3.6 L 29.7 72.9 c -1.7 -0.8 -3.9 -0.2 -4.9 1.5 c -11 18.3 -18.2 39.2 -20.4 61.7 c -0.2 2.2 1.5 4.1 3.8 4.2 l 59.3 1 C 109.1 142 143.4 108.9 144.1 67.2 z"></path>
+                    <path
+                        d="M 232.8 144.1 l 59.3 1 c 2.3 0 4 -1.9 3.9 -4 c -1.4 -22.6 -7.8 -43.7 -18.3 -62.4 c -1 -1.7 -3 -2.5 -4.8 -1.7 l -57.5 24.6 c -3.7 1.6 -8.1 1.3 -11.5 -1.1 c -4.4 -3.2 -5.8 -9.1 -3.6 -13.9 L 227 29.8 c 0.8 -1.7 0.2 -3.9 -1.5 -4.9 c -18.2 -11.1 -39.2 -18.3 -61.7 -20.4 c -2.2 -0.2 -4.1 1.5 -4.2 3.8 l -1 59.3 C 158 109.1 191.1 143.4 232.8 144.1 z"></path>
+                    <path
+                        d="M 198.2 215.1 c -2.1 -4.9 -0.6 -10.7 4.1 -13.8 c 3.4 -2.4 7.8 -2.5 11.5 -0.7 l 56.6 26.5 c 1.7 0.8 3.9 0.2 4.9 -1.5 c 11 -18.3 18.2 -39.2 20.3 -61.7 c 0.2 -2.2 -1.5 -4.1 -3.8 -4.2 l -59.3 -1 c -41.7 -0.7 -76 32.4 -76.7 74.1 l -1 59.3 c 0 2.3 1.9 4 4 3.9 c 22.6 -1.4 43.7 -7.8 62.4 -18.3 c 1.7 -1 2.5 -3 1.7 -4.8 L 198.2 215.1 z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+    <g id="SvgjsG9243" featurekey="SbCDzn-3"
+        transform="matrix(-4.3,0,0,-4.3,44.1,206.1)"
+        fill="#fafafa">
+        <path
+            d="M 1.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
+    </g>
+    <g id="SvgjsG9246" featurekey="SbCDzn-0"
+        transform="matrix(4.3,0,0,4.3,-4.9,86.6)"
+        fill="#fafafa">
+        <path
+            d="M 11.9 7.8 l 3 0 l 0 12.2 l -3 0 l 0 -12.2 z M 20.2 13.3 l 0 6.7 l -3 0 l 0 -12.2 l 3 0 l 3.8 6.8 l 3.8 -6.8 l 3 0 l 0 12.2 l -3 0 l 0 -6.7 l -2.3 4 l -3 0 z M 45.9 7.8 l 2.9 0 l -2.3 12.2 l -4.4 0 l -1.6 -7.1 l -1.7 7.1 l -4.7 0 l -2 -12.2 l 3.1 0 l 1.4 9.2 l 1.8 -7.1 l 4.3 0 l 1.7 7.1 z M 50.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
+    </g>
+</svg>

src/assets/logo.svg

@@ -0,0 +1,45 @@
+<svg width="448.3" height="309.7"
+    viewBox="0 0 249.99999999999997 172.70410043836824" class="looka-1j8o68f">
+    <defs id="SvgjsDefs9244"></defs>
+    <g id="SvgjsG9245" featurekey="JQyOZB-0"
+        transform="matrix(0.3,0,0,0.3,73.6,-1.4)"
+        fill="#fafafa">
+        <g xmlns="http://www.w3.org/2000/svg">
+            <g>
+                <defs>
+                    <rect id="b" x="8.5" y="8.5"
+                        transform="matrix(0.7,-0.7,0.7,0.7,-62.1,146.4)" width="283"
+                        height="283"></rect>
+                </defs>
+                <clipPath id="a">
+                    <use transform="matrix(1,0,0,1,0,0)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
+                        overflow="visible"></use>
+                </clipPath>
+                <g style="clip-path: url(#a)"
+                fill="#0097f3"
+                >
+                    <path
+                        d="M 67.2 155.9 l -59.3 -1 c -2.3 0 -4 1.9 -3.9 4 c 1.4 22.6 7.8 43.7 18.3 62.4 c 1 1.7 3 2.5 4.8 1.7 l 57.5 -24.6 c 3.7 -1.6 8.1 -1.3 11.5 1.1 c 4.4 3.2 5.8 9.2 3.6 13.9 l -26.7 57 c -0.8 1.7 -0.2 3.9 1.5 4.9 c 18.3 11 39.2 18.2 61.7 20.4 c 2.2 0.2 4.1 -1.5 4.2 -3.8 l 1 -59.3 C 142 190.9 108.9 156.6 67.2 155.9 z"></path>
+                    <path
+                        d="M 144.1 67.2 l 1 -59.3 c 0 -2.3 -1.9 -4 -4 -3.9 c -22.6 1.4 -43.7 7.8 -62.4 18.3 c -1.7 1 -2.5 3 -1.7 4.8 l 24.6 57.5 c 1.6 3.7 1.3 8.1 -1.1 11.5 c -3.2 4.4 -9.1 5.8 -13.9 3.6 L 29.7 72.9 c -1.7 -0.8 -3.9 -0.2 -4.9 1.5 c -11 18.3 -18.2 39.2 -20.4 61.7 c -0.2 2.2 1.5 4.1 3.8 4.2 l 59.3 1 C 109.1 142 143.4 108.9 144.1 67.2 z"></path>
+                    <path
+                        d="M 232.8 144.1 l 59.3 1 c 2.3 0 4 -1.9 3.9 -4 c -1.4 -22.6 -7.8 -43.7 -18.3 -62.4 c -1 -1.7 -3 -2.5 -4.8 -1.7 l -57.5 24.6 c -3.7 1.6 -8.1 1.3 -11.5 -1.1 c -4.4 -3.2 -5.8 -9.1 -3.6 -13.9 L 227 29.8 c 0.8 -1.7 0.2 -3.9 -1.5 -4.9 c -18.2 -11.1 -39.2 -18.3 -61.7 -20.4 c -2.2 -0.2 -4.1 1.5 -4.2 3.8 l -1 59.3 C 158 109.1 191.1 143.4 232.8 144.1 z"></path>
+                    <path
+                        d="M 198.2 215.1 c -2.1 -4.9 -0.6 -10.7 4.1 -13.8 c 3.4 -2.4 7.8 -2.5 11.5 -0.7 l 56.6 26.5 c 1.7 0.8 3.9 0.2 4.9 -1.5 c 11 -18.3 18.2 -39.2 20.3 -61.7 c 0.2 -2.2 -1.5 -4.1 -3.8 -4.2 l -59.3 -1 c -41.7 -0.7 -76 32.4 -76.7 74.1 l -1 59.3 c 0 2.3 1.9 4 4 3.9 c 22.6 -1.4 43.7 -7.8 62.4 -18.3 c 1.7 -1 2.5 -3 1.7 -4.8 L 198.2 215.1 z"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+    <g id="SvgjsG9243" featurekey="SbCDzn-3"
+        transform="matrix(-4.3,0,0,-4.3,44.1,206.1)"
+        fill="#0097f3">
+        <path
+            d="M 1.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
+    </g>
+    <g id="SvgjsG9246" featurekey="SbCDzn-0"
+        transform="matrix(4.3,0,0,4.3,-4.9,86.6)"
+        fill="#0097f3">
+        <path
+            d="M 11.9 7.8 l 3 0 l 0 12.2 l -3 0 l 0 -12.2 z M 20.2 13.3 l 0 6.7 l -3 0 l 0 -12.2 l 3 0 l 3.8 6.8 l 3.8 -6.8 l 3 0 l 0 12.2 l -3 0 l 0 -6.7 l -2.3 4 l -3 0 z M 45.9 7.8 l 2.9 0 l -2.3 12.2 l -4.4 0 l -1.6 -7.1 l -1.7 7.1 l -4.7 0 l -2 -12.2 l 3.1 0 l 1.4 9.2 l 1.8 -7.1 l 4.3 0 l 1.7 7.1 z M 50.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
+    </g>
+</svg>

src/component.js

@@ -3,7 +3,7 @@ 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 { swiper, swiperSlide } from 'vue-awesome-swiper'
+import VueAwesomeSwiper from 'vue-awesome-swiper'
 
 class Component {
 
@@ -12,9 +12,9 @@ class Component {
         Vue.component("ifooter", ifooter);
         Vue.component("icontent", icontent);
         Vue.component("leftMenu", leftMenu);
-        Vue.component("swiper", swiper);
-        Vue.component("swiperSlide", swiperSlide);
         
+        // 注册Swiper组件
+        Vue.use(VueAwesomeSwiper);
     }
 
 }

src/components/ifooter.vue

@@ -1,83 +1,370 @@
 <template>
-  <div>
-    <div class="footer">
-      <div class="row1">
-        <div class="pageWidth">
-          <table class="footerTable">
-            <thead class="bread desktop smallDesktop">
-              <tr>
-                <th>我们的办公室</th>
-                <th>快速链接</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td class="stackable">
-                  <ul class="quickLinks bread">
-                    <li v-for="item in contactData" :key="item.name">
-                      <label>{{item.name+"："}}</label>
-                      <label>{{item.value}}</label>
-                    </li>
-                  </ul>
-
-                </td>
-                <td class="quickLinksContainer">
-                  <div class="mobile mobileFooterTitle bread">Snabblänkar</div>
-                  <ul class="quickLinks bread">
-                    <li v-for="menu in menus" :key="menu.name">
-                      <router-link :to="menu.url">{{menu.name}}</router-link>
-                    </li>
-                  </ul>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+  <div class="footer">
+    <div class="footer-content">
+      <div class="container">
+        <!-- 主要页脚信息 -->
+        <div class="footer-main">
+          <div class="footer-section">
+            <div class="footer-logo">
+              <img :src="require('@/assets/img/logo.png')" alt="丙维科技" class="logo">
+              <h3>上海丙维数字科技有限公司</h3>
+              <p class="company-desc">技术驱动未来，服务创造价值</p>
+            </div>
+          </div>
+          
+          <div class="footer-section">
+            <h4>关于我们</h4>
+            <ul class="footer-links">
+              <li><router-link to="/aboutUs/aboutUs">公司简介</router-link></li>
+              <li><router-link to="/aboutUs/propystTechnology">技术优势</router-link></li>
+              <li><router-link to="/aboutUs/cooperateWithUs">合作共赢</router-link></li>
+            </ul>
+          </div>
+          
+          <div class="footer-section">
+            <h4>解决方案</h4>
+            <ul class="footer-links">
+              <li><router-link to="/ourPlan/iot">物联网</router-link></li>
+              <li><router-link to="/ourPlan/smartbuildings">智能建筑</router-link></li>
+              <li><router-link to="/ourPlan/facilityManagement">设施管理</router-link></li>
+              <li><router-link to="/ourPlan/reaEstate">房地产</router-link></li>
+            </ul>
+          </div>
+          
+          <div class="footer-section">
+            <h4>联系我们</h4>
+            <div class="contact-info">
+              <div class="contact-item">
+                <span class="contact-icon">📍</span>
+                <span>上海市宝山区高逸路112-118号3幢6422室</span>
+              </div>
+              <div class="contact-item">
+                <span class="contact-icon">📞</span>
+                <span>13817819452</span>
+              </div>
+              <div class="contact-item">
+                <span class="contact-icon">✉️</span>
+                <span>bimwe@bimwe.com</span>
+              </div>
+              <div class="contact-item">
+                <span class="contact-icon">🌐</span>
+                <span>www.bimwe.com</span>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
-
-      <div class="row2">
-        <div class="contentContainer pageWidth">
-          <div class="bread">Copyright © 2018 Bimwe Technology co. LTD</div>
-
-          <div class="beian-box">
-            <img src="../assets/img/beian_icon.png" style="width:20px;" />
-            <a href="https://beian.miit.gov.cn/" target="_blank">沪ICP备19005870号-1</a>
+        
+        <!-- 页脚底部 -->
+        <div class="footer-bottom">
+          <div class="footer-bottom-content">
+            <div class="copyright">
+              <p>&copy; 2024 上海丙维数字科技有限公司. 保留所有权利.</p>
+            </div>
+            <div class="footer-extra">
+              <div class="beian">
+                <img :src="require('@/assets/img/beian_icon.png')" alt="备案" class="beian-icon">
+                <span>沪ICP备XXXXXXXX号</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-
+    </div>
+    
+    <!-- 返回顶部按钮 -->
+    <div class="back-to-top" @click="scrollToTop" v-show="showBackToTop">
+      <span class="arrow">↑</span>
     </div>
   </div>
 </template>
+
 <script>
 export default {
+  name: 'ifooter',
   data() {
     return {
-      menus: window.config.menus,
-      contactData: [
-        { name: '地址', value: '上海市宝山区' },
-        { name: '手机', value: '13817819452' },
-        { name: '邮箱', value: 'Zhp@bimwe.com' }
-      ]
+      showBackToTop: false
+    }
+  },
+  mounted() {
+    this.initScrollListener()
+  },
+  methods: {
+    initScrollListener() {
+      window.addEventListener('scroll', () => {
+        this.showBackToTop = window.pageYOffset > 300
+      })
+    },
+    
+    scrollToTop() {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      })
     }
   }
 }
 </script>
-<style lang="less" scoped>
-.quickLinks li {
-  float: left;
-  margin: 5px 20px;
+
+<style scoped>
+.footer {
+  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+  color: white;
+  position: relative;
+  margin-top: 80px;
 }
 
-.beian-box {
+.footer-content {
+  padding: 60px 0 0 0;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+/* 主要页脚区域 */
+.footer-main {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 40px;
+  margin-bottom: 50px;
+}
+
+.footer-section h4 {
+  font-size: 1.3rem;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: #ecf0f1;
+  position: relative;
+}
+
+.footer-section h4::after {
+  content: '';
+  position: absolute;
+  bottom: -8px;
+  left: 0;
+  width: 40px;
+  height: 2px;
+  background: #3498db;
+  border-radius: 1px;
+}
+
+/* Logo区域 */
+.footer-logo .logo {
+  height: 50px;
+  margin-bottom: 15px;
+  filter: brightness(0) invert(1);
+}
+
+.footer-logo h3 {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+  color: #ecf0f1;
+}
+
+.company-desc {
+  color: #bdc3c7;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+/* 链接列表 */
+.footer-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-links li {
+  margin-bottom: 12px;
+}
+
+.footer-links a {
+  color: #bdc3c7;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  display: inline-block;
+  position: relative;
+}
+
+.footer-links a:hover {
+  color: #3498db;
+  transform: translateX(5px);
+}
+
+.footer-links a::before {
+  content: '→';
+  position: absolute;
+  left: -20px;
+  opacity: 0;
+  transition: all 0.3s ease;
+}
+
+.footer-links a:hover::before {
+  opacity: 1;
+  left: -15px;
+}
+
+/* 联系信息 */
+.contact-info {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.contact-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #bdc3c7;
+  font-size: 0.95rem;
+}
+
+.contact-icon {
+  font-size: 1.2rem;
+  width: 20px;
+  text-align: center;
+}
+
+/* 页脚底部 */
+.footer-bottom {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 25px 0;
+}
+
+.footer-bottom-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.copyright p {
+  color: #95a5a6;
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+.footer-extra {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.beian {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #95a5a6;
+  font-size: 0.9rem;
+}
+
+.beian-icon {
+  width: 16px;
+  height: 16px;
+  filter: brightness(0) invert(0.6);
+}
+
+/* 返回顶部按钮 */
+.back-to-top {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 5px;
-  a {
-    color: #fff;
-    margin-left: 5px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
+  z-index: 1000;
+}
+
+.back-to-top:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
+}
+
+.back-to-top .arrow {
+  color: white;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .footer-content {
+    padding: 40px 0 0 0;
   }
+  
+  .footer-main {
+    grid-template-columns: 1fr;
+    gap: 30px;
+  }
+  
+  .footer-bottom-content {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .back-to-top {
+    bottom: 20px;
+    right: 20px;
+    width: 45px;
+    height: 45px;
+  }
+  
+  .back-to-top .arrow {
+    font-size: 1.3rem;
+  }
+}
+
+/* 动画效果 */
+.footer-section {
+  animation: fadeInUp 0.6s ease forwards;
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.footer-section:nth-child(1) { animation-delay: 0.1s; }
+.footer-section:nth-child(2) { animation-delay: 0.2s; }
+.footer-section:nth-child(3) { animation-delay: 0.3s; }
+.footer-section:nth-child(4) { animation-delay: 0.4s; }
+
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 悬停效果增强 */
+.footer-section:hover {
+  transform: translateY(-2px);
+  transition: transform 0.3s ease;
+}
+
+.footer-links a:hover {
+  transform: translateX(8px);
+}
+
+/* 渐变背景动画 */
+.footer {
+  background-size: 200% 200%;
+  animation: gradientShift 10s ease infinite;
+}
+
+@keyframes gradientShift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
 }
 </style>
 

src/components/ihead.vue

@@ -1,91 +1,68 @@
 <template>
   <div>
-
-    <div class="header bottomShadow">
+    <div class="header bottomShadow" :class="{ 'mini': isMiniHeader }">
       <div class="content pageWidth">
-        <div class="top">
-          <div class="content bread">
-            <table>
-              <tbody>
-                <tr>
-                  <td class="contact contactLinks">
-                    <img src="../assets/img/svg/mobile.svg" class="inlineTextIcon inlineTextPhoneIcon"><span>
-                      <a href="tel:13817819452">13817819452</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../assets/img/svg/airplane.svg" class="inlineTextIcon">
-                    <span><a href="mailto:bimwe@bimwe.com">bimwe@bimwe.com</a></span>
-                  </td>
-                  <td class="searchContainer desktop">
-                    <input type="text" class="search" placeholder="Sök" style="margin-left:1em;width:10em">
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+        
+        <!-- 主要导航区域 -->
+        <div class="bottom desktop">
+          <div class="nav-container">
+            <div class="logoCell">
+              <img class="logo" :src="image_paths.logo" alt="丙维科技">
+            </div>
+            <div class="mainMenuCell">
+              <nav class="mainMenu">
+                <div class="nav-item" v-for="menu in menus" :key="menu.name">
+                  <router-link :to="menu.url" class="nav-link">
+                    {{menu.name}}
+                    <span v-if="menu.child.length>0" class="downCaret"></span>
+                  </router-link>
+                  <div class="dropDown bottomShadowSegment" v-if="menu.child.length>0">
+                    <router-link 
+                      :to="sonMenu.url" 
+                      v-for="sonMenu in menu.child" 
+                      :key="sonMenu.name"
+                      class="dropdown-item"
+                    >
+                      {{sonMenu.name}}
+                    </router-link>
+                  </div>
+                </div>
+              </nav>
+            </div>
           </div>
         </div>
-        <!-- BOTTOM - DESKTOP -->
-        <div class="bottom desktop">
-          <table>
-            <tbody>
-              <tr>
-                <td class="logoCell">
-                  <img class="logo" src="../assets/img/logo.png">
-                </td>
-                <td class="mainMenuCell">
-                  <table class="mainMenu">
-                    <tbody>
-                      <tr>
-                        <td class="h2" v-for="menu in menus" :key="menu.name">
-                          <router-link :to="menu.url">
-                            {{menu.name}}
-                            <span v-if="menu.child.length>0" class="downCaret"></span>
-                          </router-link>
-                          <div class="dropDown bottomShadowSegment" v-if="menu.child.length>0">
-                            <router-link :to="sonMenu.url" v-for="sonMenu in   menu.child" :key="sonMenu.name">{{sonMenu.name}}</router-link>
-                          </div>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <!-- END BOTTOM - DESKTOP -->
 
+        <!-- 移动端导航 -->
         <div class="bottom headerBottom mobile">
-          <table>
-            <tbody>
-              <tr>
-                <td class="logoCell">
-                  <img class="logo" src="../assets/img/bimwe_logo.png">
-                </td>
-                <td class="mobileIconsCell">
-                  <!-- <img src="../assets/img/svg/ic_search.svg" /> -->
-                  <img src="../assets/img/svg/ic_hamburger.svg" id="hamburger">
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="mobile-nav">
+            <div class="logoCell">
+              <img class="logo" :src="image_paths.mobile_logo" alt="丙维科技">
+            </div>
+            <div class="mobileIconsCell">
+              <img :src="image_paths.hamburger" id="hamburger" alt="菜单">
+            </div>
+          </div>
         </div>
       </div>
+      
+      <!-- 移动端菜单 -->
       <div id="mobileMenu" class="headerMobileMenu bread">
         <div class="menuDummy"></div>
         <div class="menuContent">
           <ul>
             <li v-for="menu in menus" :key="menu.name">
-              <a href="menu.url" v-if="menu.name=='首页'">{{menu.name}}</a>
+              <router-link :to="menu.url" v-if="menu.name=='首页'">{{menu.name}}</router-link>
               <label v-else class="hasSubmenu" style="display:block;">{{menu.name}}</label>
               <ul class="subMenu" v-if="menu.child.length>0">
-                <li v-for="sonMenu in   menu.child" :key="sonMenu.name">
+                <li v-for="sonMenu in menu.child" :key="sonMenu.name">
                   <router-link class="hasSubmenu" :to="sonMenu.url">{{sonMenu.name}}</router-link>
                 </li>
               </ul>
             </li>
-
           </ul>
           <div class="goBack">
             <a href="JavaScript:void()" class="linkGoBack flexVerticalCenter">
-              <img src="../assets/img/svg/ic_arrow_back.svg" alt="返回">
+              <img :src="image_paths.arrow_back" alt="返回">
               <span>返回</span>
             </a>
           </div>
@@ -94,26 +71,711 @@
     </div>
   </div>
 </template>
+
 <script>
 import { common } from '../static/common'
 
 export default {
+  name: 'ihead',
   data() {
     return {
-      menus: window.config.menus
+      isMiniHeader: false,
+      menus: [
+        {
+          name: '首页',
+          url: '/index',
+          child: []
+        },
+        {
+          name: '关于我们',
+          url: '/aboutUs/aboutUs',
+          child: []
+        },
+        {
+          name: '我们的方案',
+          url: '/ourPlan/ourPlan',
+          child: [
+            { name: '智能建筑', url: '/ourPlan/estateManagement' },
+            { name: '物联网', url: '/ourPlan/iot' },
+            { name: '设施管理', url: '/ourPlan/facilityManagement' },
+            { name: 'AI解决方案', url: '/ourPlan/aiSolutions' },
+            { name: '技术集成', url: '/ourPlan/technologyIntegration' }
+          ]
+        },
+
+      ]
     }
   },
-  mounted: function () {
-    common.init()
-    common.initListeners()
-    common.initHeader()
-    common.initForms()
-    common.initMobileMenu()
-    common.adjustElementsForScreen()
+  computed: {
+    // 统一管理图片路径，提高可维护性
+    image_paths() {
+      return {
+        logo: require('@/assets/img/logo.png'),
+        mobile_logo: require('@/assets/img/bimwe_logo.png'),
+        hamburger: require('@/assets/img/svg/ic_hamburger.svg'),
+        arrow_back: require('@/assets/img/svg/ic_arrow_back.svg')
+      }
+    }
+  },
+  mounted() {
+    this.initHeader()
+    this.initScrollListener()
+  },
+  methods: {
+    // 封装事件监听器创建，提高代码复用性
+    add_event_listener(selector, event_type, callback, use_id = false) {
+      const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
+      if (element) {
+        element.addEventListener(event_type, callback);
+        return true;
+      }
+      return false;
+    },
+
+    // 封装类名操作，提高代码复用性
+    toggle_class(selector, class_name, use_id = false) {
+      const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
+      if (element) {
+        element.classList.toggle(class_name);
+        return true;
+      }
+      return false;
+    },
+
+    // 封装类名添加，提高代码复用性
+    add_class(selector, class_name, use_id = false) {
+      const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
+      if (element) {
+        element.classList.add(class_name);
+        return true;
+      }
+      return false;
+    },
+
+    // 封装类名移除，提高代码复用性
+    remove_class(selector, class_name, use_id = false) {
+      const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
+      if (element) {
+        element.classList.remove(class_name);
+        return true;
+      }
+      return false;
+    },
+
+    initHeader() {
+      // 点击logo返回首页
+      this.add_event_listener(".logoCell .logo", "click", () => {
+        if (window.location.href.indexOf("index") === -1) {
+          window.location.href = "#/index";
+        }
+      });
+
+      // 移动端菜单切换
+      this.add_event_listener("hamburger", "click", () => {
+        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'
+         });
+       });
+    },
+    
+    initScrollListener() {
+      window.addEventListener('scroll', () => {
+        if (window.pageYOffset > 200) {
+          if (!this.isMiniHeader) {
+            this.isMiniHeader = true;
+            this.add_class('.header', 'mini');
+          }
+        } else {
+          if (this.isMiniHeader) {
+            this.isMiniHeader = false;
+            this.remove_class('.header', 'mini');
+          }
+        }
+      });
+    }
   }
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+/* 使用更高优先级覆盖 common.css 的样式 */
+/* 重置旧表格布局样式 */
+.header table,
+.header table tbody,
+.header table tbody tr,
+.header table tbody tr td {
+  display: block !important;
+  width: auto !important;
+  height: auto !important;
+  border: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* 头部基础样式 - 使用 !important 覆盖 common.css */
+.header {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  z-index: 1000 !important;
+  background: rgba(255, 255, 255, 0.95) !important;
+  backdrop-filter: blur(10px) !important;
+  transition: all var(--transition-speed) ease !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
+  /* 覆盖旧表格布局 */
+  display: block !important;
+  height: auto !important;
+}
+
+.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;
+}
+
+/* 主要导航区域 - 覆盖旧样式 */
+.bottom {
+  padding: 15px 0 !important;
+  /* 覆盖旧表格布局 */
+  display: block !important;
+  height: auto !important;
+}
+
+.nav-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logoCell .logo {
+  height: 50px;
+  transition: transform 0.3s ease;
+}
+
+.logoCell .logo:hover {
+  transform: scale(1.05);
+}
+
+/* 主导航菜单 */
+.mainMenu {
+  display: flex;
+  gap: 0;
+}
+
+.nav-item {
+  position: relative;
+}
+
+.nav-link {
+  display: block;
+  padding: 15px 25px;
+  color: #2c3e50;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 16px;
+  transition: all 0.3s ease;
+  border-radius: var(--border-radius);
+  position: relative;
+}
+
+.nav-link:hover {
+  color: #3498db;
+  background: rgba(52, 152, 219, 0.1);
+}
+
+.nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background: #3498db;
+  transition: all 0.3s ease;
+  transform: translateX(-50%);
+}
+
+.nav-link:hover::after {
+  width: 80%;
+}
+
+/* 下拉菜单 */
+.dropDown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: white;
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow-medium);
+  padding: 15px 0;
+  min-width: 200px;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: all 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.nav-item:hover .dropDown {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.dropdown-item {
+  display: block;
+  padding: 12px 25px;
+  color: #2c3e50;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  border-radius: 0;
+}
+
+.dropdown-item:hover {
+  background: rgba(52, 152, 219, 0.1);
+  color: #3498db;
+  padding-left: 30px;
+}
+
+/* 下拉箭头 */
+.downCaret {
+  display: inline-block;
+  margin-left: 5px;
+  transition: transform 0.3s ease;
+}
+
+.nav-item:hover .downCaret {
+  transform: rotate(180deg);
+}
+
+/* 移动端导航 */
+.mobile-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.mobile .logo {
+  height: 40px;
+}
+
+#hamburger {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+
+#hamburger:hover {
+  transform: scale(1.1);
+}
+
+/* 移动端菜单 */
+.headerMobileMenu {
+  position: fixed;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.8);
+  transition: left 0.3s ease;
+  z-index: 1001;
+}
+
+.headerMobileMenu.active {
+  left: 0;
+}
+
+.menuContent {
+  background: white;
+  width: 80%;
+  height: 100%;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.menuContent ul {
+  list-style: none;
+  padding: 0;
+}
+
+.menuContent li {
+  margin: 15px 0;
+}
+
+.menuContent a,
+.menuContent label {
+  display: block;
+  padding: 15px;
+  color: #2c3e50;
+  text-decoration: none;
+  font-weight: 500;
+  border-radius: var(--border-radius);
+  transition: all var(--transition-speed) ease;
+}
+
+.menuContent a:hover,
+.menuContent label:hover {
+  background: rgba(52, 152, 219, 0.1);
+  color: #3498db;
+}
+
+.subMenu {
+  margin-left: 20px;
+  border-left: 2px solid #e9ecef;
+  padding-left: 15px;
+}
+
+.goBack {
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px solid #e9ecef;
+}
+
+.linkGoBack {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #6c757d;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.linkGoBack:hover {
+  color: #3498db;
+}
+
+/* 现代响应式设计 - 使用容器查询和逻辑属性 */
+/* 基础响应式容器 */
+.header {
+  container-type: inline-size;
+  container-name: header;
+}
+
+/* 使用容器查询替代媒体查询 */
+@container header (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;
+  }
+}
+
+@container header (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;
+  }
+}
+
+/* 使用 CSS Grid 实现更灵活的布局 */
+.nav-container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 2rem;
+  align-items: center;
+}
+
+@container header (max-width: 768px) {
+  .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);
+  }
+}
+
+/* 使用 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);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 使用 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;
+}
+
+.nav-container {
+  gap: 2rem;
+}
+
+/* 使用 CSS 逻辑属性实现更好的边框 */
+.header {
+  border-block-end: 1px solid var(--header-border) !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; }
 </style>

src/main.js

@@ -1,6 +1,6 @@
 import './assets/css/cookieconsent.min.css'
 import './assets/css/common.css'
-import 'swiper/dist/css/swiper.css'
+import 'swiper/swiper.min.css'
 import './static/config.js'
 import 'es6-promise/auto'
 

src/router.js

@@ -4,19 +4,15 @@ import Router from "vue-router"
 import index from './views/index'
 
 import aboutUs from './views/aboutUs/aboutUs'
-import cooperateWithUs from './views/aboutUs/cooperateWithUs'
-import propystTechnology from './views/aboutUs/propystTechnology'
 
 
-import fulEdge from './views/fulEdge/fulEdge'
-import mobileSolution from './views/fulEdge/mobileSolution'
-import other from './views/fulEdge/other'
+
 
 import ourPlan from './views/ourPlan/ourPlan'
 import estateManagement from './views/ourPlan/estateManagement'
 import facilityManagement from './views/ourPlan/facilityManagement'
 import iot from './views/ourPlan/iot'
-import reaEstate from './views/ourPlan/reaEstate'
+import aiSolutions from './views/ourPlan/aiSolutions'
 import technologyIntegration from './views/ourPlan/technologyIntegration'
 
 
@@ -24,17 +20,13 @@ import technologyIntegration from './views/ourPlan/technologyIntegration'
 
 Vue.use(Router);
 
-export default new Router({
+const router = new Router({
   mode: 'history',
   base: process.env.BASE_URL,
   routes: [
-    {
-      path: '*',
-      component: index
-    },
     {
       path: '/',
-      component: index
+      redirect: '/index'
     },
     {
       path: '/index',
@@ -42,36 +34,39 @@ export default new Router({
     },
     {
       path: '/aboutUs',
-      component: aboutUs,
-      children: [
-        {  path:'/',component:cooperateWithUs,  },
-        { path: 'cooperateWithUs', component: cooperateWithUs },
-        { path: 'propystTechnology', component: propystTechnology },
-
-      ]
+      component: aboutUs
     },
-    {
-      path: '/fulEdge',
-      component: fulEdge,
-      children: [
-        {  path:'/',component:mobileSolution,  },
-        { path: 'mobileSolution', component: mobileSolution },
-        { path: 'other', component: other },
 
-      ]
-    },
     {
       path: '/ourPlan',
       component: ourPlan,
       children: [
-        {  path:'/',component:estateManagement,  },
+        { path: '', redirect: 'ourPlan' },
+        { path: 'ourPlan', component: ourPlan },
         { path: 'estateManagement', component: estateManagement },
         { path: 'facilityManagement', component: facilityManagement },
         { path: 'iot', component: iot },
-        { path: 'reaEstate', component: reaEstate },
+        { path: 'aiSolutions', component: aiSolutions },
         { path: 'technologyIntegration', component: technologyIntegration }
-       
       ]
+    },
+    {
+      path: '*',
+      redirect: '/index'
     }
   ]
 })
+
+// 全局前置守卫 - 路由切换时自动滚动到顶部
+router.beforeEach((to, from, next) => {
+  // 滚动到页面顶部
+  window.scrollTo({
+    top: 0,
+    left: 0,
+    behavior: 'smooth' // 平滑滚动效果
+  });
+  
+  next();
+});
+
+export default router

src/static/common.js

@@ -2,7 +2,7 @@ var isMobile = null;
 var wasMobile = isMobile;
 var isMiniHeader = false;
 
-import $ from 'jquery'
+// 移除 jQuery 导入，使用原生 JavaScript
 
 class Common {
     constructor(name, age) {
@@ -10,66 +10,252 @@ class Common {
         this.age = age;
     }
 
-    init() {
+    // 封装原生 JavaScript 方法，提高代码复用性
+    add_event_listener(selector, event_type, callback, use_id = false) {
+        const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
+        if (element) {
+            element.addEventListener(event_type, callback);
+            return true;
+        }
+        return false;
+    }
 
+    toggle_class(selector, class_name, use_id = false) {
+        const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
+        if (element) {
+            element.classList.toggle(class_name);
+            return true;
+        }
+        return false;
+    }
+
+    add_class(selector, class_name, use_id = false) {
+        const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
+        if (element) {
+            element.classList.add(class_name);
+            return true;
+        }
+        return false;
+    }
+
+    remove_class(selector, class_name, use_id = false) {
+        const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
+        if (element) {
+            element.classList.remove(class_name);
+            return true;
+        }
+        return false;
+    }
+
+    show_element(selector, use_id = false) {
+        const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
+        if (element) {
+            element.style.display = 'block';
+            return true;
+        }
+        return false;
+    }
+
+    hide_element(selector, use_id = false) {
+        const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
+        if (element) {
+            element.style.display = 'none';
+            return true;
+        }
+        return false;
+    }
+
+    get_element_value(selector, use_id = false) {
+        const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
+        return element ? element.value : '';
+    }
+
+    set_element_value(selector, value, use_id = false) {
+        const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
+        if (element) {
+            element.value = value;
+            return true;
+        }
+        return false;
+    }
+
+    // 滚动到页面顶部 - 支持平滑滚动
+    scroll_to_top(behavior = 'smooth') {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: behavior
+        });
+    }
+
+    // 滚动到指定元素 - 支持平滑滚动和偏移
+    scroll_to_element(selector, offset = 0, behavior = 'smooth', use_id = false) {
+        const element = use_id ? document.getElementById(selector) : document.querySelector(selector);
+        if (element) {
+            const elementTop = element.offsetTop - offset;
+            window.scrollTo({
+                top: elementTop,
+                left: 0,
+                behavior: behavior
+            });
+            return true;
+        }
+        return false;
+    }
+
+    // 滚动到指定位置 - 支持平滑滚动
+    scroll_to_position(top = 0, left = 0, behavior = 'smooth') {
+        window.scrollTo({
+            top: top,
+            left: left,
+            behavior: behavior
+        });
+    }
+
+    // 获取当前滚动位置
+    get_scroll_position() {
+        return {
+            top: window.pageYOffset || document.documentElement.scrollTop,
+            left: window.pageXOffset || document.documentElement.scrollLeft
+        };
+    }
+
+    // 检查是否在页面顶部
+    is_at_top() {
+        return window.pageYOffset === 0;
+    }
+
+    // 检查是否在页面底部
+    is_at_bottom() {
+        return window.innerHeight + window.pageYOffset >= document.documentElement.scrollHeight;
+    }
+
+    // 创建返回顶部按钮
+    create_back_to_top_button() {
+        // 检查是否已存在返回顶部按钮
+        if (document.getElementById('backToTopBtn')) {
+            return;
+        }
+
+        const button = document.createElement('button');
+        button.id = 'backToTopBtn';
+        button.innerHTML = '↑';
+        button.title = '返回顶部';
+        button.className = 'back-to-top-btn';
+        
+        // 添加样式
+        button.style.cssText = `
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            width: 50px;
+            height: 50px;
+            background: #3498db;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            font-size: 20px;
+            cursor: pointer;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+            z-index: 1000;
+            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
+        `;
+
+        // 悬停效果
+        button.addEventListener('mouseenter', () => {
+            button.style.background = '#2980b9';
+            button.style.transform = 'scale(1.1)';
+        });
+
+        button.addEventListener('mouseleave', () => {
+            button.style.background = '#3498db';
+            button.style.transform = 'scale(1)';
+        });
+
+        // 点击事件
+        button.addEventListener('click', () => {
+            this.scroll_to_top('smooth');
+        });
+
+        // 添加到页面
+        document.body.appendChild(button);
+
+        // 监听滚动事件，控制按钮显示/隐藏
+        window.addEventListener('scroll', () => {
+            if (window.pageYOffset > 300) {
+                button.style.opacity = '1';
+                button.style.visibility = 'visible';
+            } else {
+                button.style.opacity = '0';
+                button.style.visibility = 'hidden';
+            }
+        });
+
+        return button;
+    }
+
+    init() {
         var self = this;
 
         isMobile = common.isMobile();
 
-        //create trigger to resizeEnd event, called after event is finished
-        $(window).resize(function() {
-            if (this.resizeTO) clearTimeout(this.resizeTO);
-            this.resizeTO = setTimeout(function() {
-                $(this).trigger('resizeEnd');
+        // 创建 resizeEnd 事件触发器，在事件完成后调用
+        let resizeTO;
+        window.addEventListener('resize', function() {
+            if (resizeTO) clearTimeout(resizeTO);
+            resizeTO = setTimeout(function() {
+                // 触发自定义 resizeEnd 事件
+                window.dispatchEvent(new CustomEvent('resizeEnd'));
             }, 100);
         });
 
-        //cdetermine scren type and call style functions after window resize is completed  
-        $(window).on('resizeEnd', function() {
-
+        // 确定屏幕类型并在窗口调整大小完成后调用样式函数
+        window.addEventListener('resizeEnd', function() {
             self.adjustElementsForScreen();
-
         });
 
-        $(window).scroll(function() {
-            if ($(window).scrollTop() > 200) {
+        // 创建返回顶部按钮
+        this.create_back_to_top_button();
+
+        window.addEventListener('scroll', function() {
+            if (window.pageYOffset > 200) {
                 if (isMiniHeader === false && !self.isMobile()) {
-                    $('.header').addClass('mini');
+                    common.add_class('.header', 'mini');
                     isMiniHeader = true;
                 }
             } else {
                 if (isMiniHeader === true) {
-                    $('.header').removeClass('mini');
+                    common.remove_class('.header', 'mini');
                     isMiniHeader = false;
                 }
-
             }
-            //var scroll = $(window).scrollTop();
         });
 
-
-
-        $.scrollToElement = function($element) {
-
-            var adjustment = 0;
-            if (isMiniHeader) {
-                adjustment = 35;
+        // 滚动到元素的原生实现
+        this.scrollToElement = function(selector) {
+            const element = document.querySelector(selector);
+            if (element) {
+                const adjustment = isMiniHeader ? 35 : 0;
+                const header = document.querySelector('.header:first-child');
+                const headerHeight = header ? header.offsetHeight : 0;
+                const targetPosition = element.offsetTop - headerHeight - adjustment;
+                
+                window.scrollTo({
+                    top: targetPosition,
+                    behavior: 'smooth'
+                });
             }
-            var $header = $('.header:first');
-            $('html,body').animate({ scrollTop: $element.offset().top - ($header.length > 0 ? $header.height() : 0) - adjustment }, 'slow');
         };
-
-
-
-
     }
 
     adjustElementsForScreen() {
-
         isMobile = this.isMobile();
 
         if (!this.isMobile()) {
-            $(".mobileContent").hide();
+            const mobileContents = document.querySelectorAll(".mobileContent");
+            mobileContents.forEach(content => content.style.display = 'none');
         }
 
         if (isMobile) wasMobile = true;
@@ -77,293 +263,404 @@ class Common {
         if (wasMobile && !isMobile) location.reload();
 
         if (isMobile && isMiniHeader === true) {
-            $('.header').removeClass('mini');
+            common.remove_class('.header', 'mini');
             isMiniHeader = false;
         }
 
-
         this.adjustContentBannersForScreen();
-
     }
 
-
-
     initHeader() {
-
-        //go to main page if not there on logo click
-        $(".logoCell .logo").on("click", function() {
+        // 点击 logo 返回主页
+        this.add_event_listener(".logoCell .logo", "click", function() {
             if (window.location.href.indexOf("index") === -1) {
                 window.location.href = "#/index";
             }
         });
 
-        //show/hide main menu dropdowns on hover
-        $(".mainMenu > tbody > tr > td")
-            .on("mouseenter", function(e) {
+        // 显示/隐藏主导航下拉菜单（悬停）
+        const mainMenuItems = document.querySelectorAll(".mainMenu > tbody > tr > td");
+        mainMenuItems.forEach(item => {
+            item.addEventListener("mouseenter", function(e) {
                 e.stopPropagation();
-                $(".dropDown").hide();
-                $("table.mainMenu > tbody > tr > td.selected").css("box-shadow", "none");
-                $(this).find(".dropDown").addClass("droppedDown");
-                $(this).find(".dropDown").slideDown();
-            })
-            .on("mouseleave", function(e) {
-                e.stopPropagation();
-                $(this).find(".dropDown").removeClass("droppedDown");
-                $(this).find(".dropDown").hide();
-                $("table.mainMenu > tbody > tr > td.selected").css("box-shadow", "0 -3px 0 #ff0000 inset");
+                const dropDowns = document.querySelectorAll(".dropDown");
+                dropDowns.forEach(dd => dd.style.display = 'none');
+                
+                const selectedItems = document.querySelectorAll("table.mainMenu > tbody > tr > td.selected");
+                selectedItems.forEach(selected => selected.style.boxShadow = 'none');
+                
+                const currentDropDown = this.querySelector(".dropDown");
+                if (currentDropDown) {
+                    currentDropDown.classList.add("droppedDown");
+                    currentDropDown.style.display = 'block';
+                }
             });
 
-
-
+            item.addEventListener("mouseleave", function(e) {
+                e.stopPropagation();
+                const currentDropDown = this.querySelector(".dropDown");
+                if (currentDropDown) {
+                    currentDropDown.classList.remove("droppedDown");
+                    currentDropDown.style.display = 'none';
+                }
+                
+                const selectedItems = document.querySelectorAll("table.mainMenu > tbody > tr > td.selected");
+                selectedItems.forEach(selected => selected.style.boxShadow = '0 -3px 0 #ff0000 inset');
+            });
+        });
     }
 
-
-
     initListeners() {
-
-        $("#hamburger").on("click", function() {
-
-            if ($("#mobileLanguageMenu").hasClass("showing")) {
-                $("#mobileLanguageMenu").hide();
-                $("#mobileLanguageMenu").removeClass("showing");
+        // 汉堡菜单点击事件
+        this.add_event_listener("hamburger", "click", function() {
+            const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
+            if (mobileLanguageMenu && mobileLanguageMenu.classList.contains("showing")) {
+                common.hide_element("mobileLanguageMenu", true);
+                common.remove_class("mobileLanguageMenu", "showing", true);
             }
 
-            if ($("#mobileMenu").hasClass("showing")) {
+            const mobileMenu = document.getElementById("mobileMenu");
+            if (mobileMenu && mobileMenu.classList.contains("showing")) {
                 common.hideMobileMenu();
             } else {
                 common.showMobileMenu();
             }
-        });
+        }, true);
 
-        $("#mobileLanguage").on("click", function() {
-
-            if ($("#mobileMenu").hasClass("showing")) {
-                $("#mobileMenu").hide();
-                $("#mobileMenu").removeClass("showing");
+        // 移动端语言菜单点击事件
+        this.add_event_listener("mobileLanguage", "click", function() {
+            const mobileMenu = document.getElementById("mobileMenu");
+            if (mobileMenu && mobileMenu.classList.contains("showing")) {
+                common.hide_element("mobileMenu", true);
+                common.remove_class("mobileMenu", "showing", true);
             }
 
-            if (!$("#mobileLanguageMenu").hasClass("showing")) {
+            const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
+            if (mobileLanguageMenu && !mobileLanguageMenu.classList.contains("showing")) {
                 common.showMobileLanguageMenu();
             }
+        }, true);
 
-        });
-
-
-        $("#screenOverlayBehindHeader, .linkGoBack").on("click", function() {
-            if ($("#mobileMenu").hasClass("showing")) {
-                common.hideMobileMenu();
+        // 屏幕覆盖层和返回按钮点击事件
+        const screenOverlay = document.getElementById("screenOverlayBehindHeader");
+        const goBackLinks = document.querySelectorAll(".linkGoBack");
+        
+                if (screenOverlay) {
+          screenOverlay.addEventListener("click", function() {
+            const mobileMenu = document.getElementById("mobileMenu");
+            if (mobileMenu && mobileMenu.classList.contains("showing")) {
+              common.hideMobileMenu();
             }
-            if ($("#mobileLanguageMenu").hasClass("showing")) {
-                common.hideMobileLanguageMenu();
+            const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
+            if (mobileLanguageMenu && mobileLanguageMenu.classList.contains("showing")) {
+              common.hideMobileLanguageMenu();
             }
+          });
+        }
+
+                goBackLinks.forEach(link => {
+          link.addEventListener("click", function() {
+            const mobileMenu = document.getElementById("mobileMenu");
+            if (mobileMenu && mobileMenu.classList.contains("showing")) {
+              common.hideMobileMenu();
+            }
+            const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
+            if (mobileLanguageMenu && mobileLanguageMenu.classList.contains("showing")) {
+              common.hideMobileLanguageMenu();
+            }
+          });
         });
 
-        $("#mobileLanguageMenu a").on("click", function(e) {
-            e.preventDefault();
+        // 移动端语言菜单链接点击事件
+        const mobileLanguageMenuLinks = document.querySelectorAll("#mobileLanguageMenu a");
+        mobileLanguageMenuLinks.forEach(link => {
+            link.addEventListener("click", function(e) {
+                e.preventDefault();
+            });
         });
 
-        //show support form
-        $("a.linkSupport").on("click", function(e) {
-            e.preventDefault();
-            common.showForm("support");
+        // 显示支持表单
+        const supportLinks = document.querySelectorAll("a.linkSupport");
+        supportLinks.forEach(link => {
+            link.addEventListener("click", function(e) {
+                e.preventDefault();
+                common.showForm("support");
+            });
         });
 
-        //show contact form
-        $("a.linkContactUs").on("click", function(e) {
-            e.preventDefault();
-            common.showForm("contact");
+        // 显示联系表单
+        const contactLinks = document.querySelectorAll("a.linkContactUs");
+        contactLinks.forEach(link => {
+            link.addEventListener("click", function(e) {
+                e.preventDefault();
+                common.showForm("contact");
+            });
         });
 
-        $("#scrollToBoxes").on("click", function(e) {
-            e.preventDefault();
-            $.scrollToElement($("#pageBoxesContainer"));
+        // 滚动到盒子容器
+        const scrollToBoxes = document.getElementById("scrollToBoxes");
+        if (scrollToBoxes) {
+            scrollToBoxes.addEventListener("click", function(e) {
+                e.preventDefault();
+                common.scrollToElement("#pageBoxesContainer");
+            });
+        }
+
+        // Cookie 信息按钮点击事件
+        const cookieButtons = document.querySelectorAll('.cookiesInfo input[type="button"]');
+        cookieButtons.forEach(button => {
+            button.addEventListener("click", function() {
+                const parent = this.parentElement;
+                if (parent) {
+                    parent.remove();
+                }
+            });
         });
-
-
-        $('.cookiesInfo').children('input[type=button]').on('click', function() {
-            $(this).parent().remove();
-        });
-
     }
 
     initMobileMenu() {
-        $("#mobileMenu label").on("click", function(e) {
-            e.preventDefault();
-            $("#mobileMenu .subMenu").not($(this).siblings()).slideUp();
-            $(".hasSubmenu").not($(this)).css("font-weight", "normal");
-            $(this).css("font-weight", "bold");
-            //$(this).parent().css("border-bottom", "none");
-            $(this).parent().find(".subMenu").slideDown();
+        // 移动端菜单标签点击事件
+        const mobileMenuLabels = document.querySelectorAll("#mobileMenu label");
+        mobileMenuLabels.forEach(label => {
+            label.addEventListener("click", function(e) {
+                e.preventDefault();
+                const subMenus = document.querySelectorAll("#mobileMenu .subMenu");
+                subMenus.forEach(subMenu => {
+                    if (subMenu !== this.nextElementSibling) {
+                        subMenu.style.display = 'none';
+                    }
+                });
+                
+                const hasSubmenuElements = document.querySelectorAll(".hasSubmenu");
+                hasSubmenuElements.forEach(element => {
+                    if (element !== this) {
+                        element.style.fontWeight = "normal";
+                    }
+                });
+                
+                this.style.fontWeight = "bold";
+                const currentSubMenu = this.parentElement.querySelector(".subMenu");
+                if (currentSubMenu) {
+                    currentSubMenu.style.display = 'block';
+                }
+            });
         });
 
-        $("#mobileMenu a").on("click", function() {
-            common.hideMobileMenu();
-
+        // 移动端菜单链接点击事件
+        const mobileMenuLinks = document.querySelectorAll("#mobileMenu a");
+        mobileMenuLinks.forEach(link => {
+            link.addEventListener("click", function() {
+                common.hideMobileMenu();
+            });
         });
-
-
     }
 
-
     initForms() {
-
-
-        $(".btnQuitForm").on("click", function() {
-            $("#forms").hide();
-            $("#screenOverlay").hide();
-            $("#formContactContainer").hide();
-            $("#formSupportContainer").hide();
+        // 退出表单按钮
+        const quitButtons = document.querySelectorAll(".btnQuitForm");
+        quitButtons.forEach(button => {
+            button.addEventListener("click", function() {
+                common.hide_element("#forms", true);
+                common.hide_element("#screenOverlay", true);
+                common.hide_element("#formContactContainer", true);
+                common.hide_element("#formSupportContainer", true);
+            });
         });
 
-        $("#formSupport").on("submit", function(e) {
-            e.preventDefault();
-            common.submitSupportForm($(this));
-        });
+        // 支持表单提交
+        const supportForm = document.getElementById("formSupport");
+        if (supportForm) {
+            supportForm.addEventListener("submit", function(e) {
+                e.preventDefault();
+                common.submitSupportForm(this);
+            });
+        }
 
-        $("#formContact").on("submit", function(e) {
-            e.preventDefault();
-            common.submitContactForm($(this));
-        });
+        // 联系表单提交
+        const contactForm = document.getElementById("formContact");
+        if (contactForm) {
+            contactForm.addEventListener("submit", function(e) {
+                e.preventDefault();
+                common.submitContactForm(this);
+            });
+        }
     }
 
-
     showForm(formName) {
+        common.show_element("#forms", true);
+        common.show_element("#screenOverlay", true);
 
-        $("#forms").show();
-        $("#screenOverlay").show();
-
-        $(".contactTable").show();
-        $(".formInputContainer").show();
-        $(".formResultContainer").hide();
+        const contactTable = document.querySelector(".contactTable");
+        const formInputContainer = document.querySelector(".formInputContainer");
+        const formResultContainer = document.querySelector(".formResultContainer");
+        
+        if (contactTable) contactTable.style.display = 'table';
+        if (formInputContainer) formInputContainer.style.display = 'block';
+        if (formResultContainer) formResultContainer.style.display = 'none';
 
         if (formName === "contact") {
-            var $conCommentsTitle = $("label[for='conComments']");
-
-            if ($(".contentTableRight").find("[data-contact-link]").length) {
-                $conCommentsTitle.html("Berätta vad du vill veta mer om gällande " +
-                    $(".contentTableRight").find("[data-contact-link]").data("contact-link") + ": *");
-            } else {
-                $conCommentsTitle.html("Vad vill du veta mer om: ");
+            const conCommentsTitle = document.querySelector("label[for='conComments']");
+            if (conCommentsTitle) {
+                const contactLinkElement = document.querySelector(".contentTableRight [data-contact-link]");
+                if (contactLinkElement && contactLinkElement.dataset.contactLink) {
+                    conCommentsTitle.innerHTML = "Berätta vad du vill veta mer om gällande " +
+                        contactLinkElement.dataset.contactLink + ": *";
+                } else {
+                    conCommentsTitle.innerHTML = "Vad vill du veta mer om: ";
+                }
             }
-            $("#formContactContainer").show();
+            common.show_element("#formContactContainer", true);
         } else if (formName === "support") {
-            $("#formSupportContainer").show();
+            common.show_element("#formSupportContainer", true);
         }
 
         common.scrollToTop();
-
     }
 
-
     submitSupportForm() {
+        // 使用原生 fetch API 替代 jQuery.post
+        const formData = {
+            subject: common.get_element_value("#supSubject", true),
+            company: common.get_element_value("#supCompany", true),
+            name: common.get_element_value("#supName", true),
+            email: common.get_element_value("#supEmail", true),
+            phone: common.get_element_value("#supPhone", true),
+            product: common.get_element_value("#supProduct", true),
+            comments: common.get_element_value("#supComments", true)
+        };
 
-        $.post("http://biz199.inmotionhosting.com/~rustyt6/pythagoras/php/submit_support_form.php", {
-                subject: $("#supSubject").val(),
-                company: $("#supCompany").val(),
-                name: $("#supName").val(),
-                email: $("#supEmail").val(),
-                phone: $("#supPhone").val(),
-                product: $("#supProduct").val(),
-                comments: $("#supComments").val()
+        fetch("http://biz199.inmotionhosting.com/~rustyt6/pythagoras/php/submit_support_form.php", {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
             },
-            function(data) {
-                console.log(data);
-            }
-        );
+            body: JSON.stringify(formData)
+        })
+        .then(response => response.text())
+        .then(data => {
+            console.log(data);
+        })
+        .catch(error => {
+            console.error('Error:', error);
+        });
 
-        $(".formInputContainer").hide();
-        $(".formResultContainer").show();
+        common.hide_element("#formInputContainer", true);
+        common.show_element("#formResultContainer", true);
         common.scrollToTop();
 
-        $("#supSubject").val("");
-        $("#supCompany").val("");
-        $("#supName").val("");
-        $("#supEmail").val("");
-        $("#supPhone").val("");
-        $("#supProduct").val("");
-        $("#supComments").val("");
+        // 清空表单
+        common.set_element_value("#supSubject", "", true);
+        common.set_element_value("#supCompany", "", true);
+        common.set_element_value("#supName", "", true);
+        common.set_element_value("#supEmail", "", true);
+        common.set_element_value("#supPhone", "", true);
+        common.set_element_value("#supProduct", "", true);
+        common.set_element_value("#supComments", "", true);
     }
 
-
     submitContactForm() {
+        // 使用原生 fetch API 替代 jQuery.post
+        const formData = {
+            name: common.get_element_value("#conName", true),
+            email: common.get_element_value("#conEmail", true),
+            phone: common.get_element_value("#conPhone", true),
+            comments: common.get_element_value("#conComments", true)
+        };
 
-        $.post("http://biz199.inmotionhosting.com/~rustyt6/pythagoras/php/submit_contact_form.php", {
-                name: $("#conName").val(),
-                email: $("#conEmail").val(),
-                phone: $("#conPhone").val(),
-                comments: $("#conComments").val()
+        fetch("http://biz199.inmotionhosting.com/~rustyt6/pythagoras/php/submit_contact_form.php", {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
             },
-            function(data) {
-                console.log(data);
-            }
-        );
+            body: JSON.stringify(formData)
+        })
+        .then(response => response.text())
+        .then(data => {
+            console.log(data);
+        })
+        .catch(error => {
+            console.error('Error:', error);
+        });
 
-        $(".contactTable").hide();
-        $(".formResultContainer").show();
+        common.hide_element(".contactTable");
+        common.show_element("#formResultContainer", true);
         common.scrollToTop();
 
-        $("#conName").val("");
-        $("#conEmail").val("");
-        $("#conPhone").val("");
-        $("#conComments").val("");
+        // 清空表单
+        common.set_element_value("#conName", "", true);
+        common.set_element_value("#conEmail", "", true);
+        common.set_element_value("#conPhone", "", true);
+        common.set_element_value("#conComments", "", true);
     }
 
-
     adjustContentBannersForScreen() {
-
         if (this.isMobile()) {
-            $("#pageBannerImage1").attr("src", "images/banner_page_mobile_solutions_mobile.jpg");
-            $("#pageBannerImage2").attr("src", "images/banner_page_ifrs16_mobile.jpg");
-            $("#pageBannerImage3").attr("src", "images/banner_page_gdpr_mobile.jpg");
+            const banner1 = document.getElementById("pageBannerImage1");
+            const banner2 = document.getElementById("pageBannerImage2");
+            const banner3 = document.getElementById("pageBannerImage3");
+            
+            if (banner1) banner1.src = "images/banner_page_mobile_solutions_mobile.jpg";
+            if (banner2) banner2.src = "images/banner_page_ifrs16_mobile.jpg";
+            if (banner3) banner3.src = "images/banner_page_gdpr_mobile.jpg";
         } else {
-            $("#pageBannerImage1").attr("src", "images/banner_page_mobile_solutions.jpg");
-            $("#pageBannerImage2").attr("src", "images/banner_page_ifrs16.jpg");
-            $("#pageBannerImage3").attr("src", "images/banner_page_gdpr.jpg");
+            const banner1 = document.getElementById("pageBannerImage1");
+            const banner2 = document.getElementById("pageBannerImage2");
+            const banner3 = document.getElementById("pageBannerImage3");
+            
+            if (banner1) banner1.src = "images/banner_page_mobile_solutions.jpg";
+            if (banner2) banner2.src = "images/banner_page_ifrs16.jpg";
+            if (banner3) banner3.src = "images/banner_page_gdpr.jpg";
         }
     }
 
     showMobileMenu() {
-        $("#screenOverlayBehindHeader").show();
-
-        $("#mobileMenu").slideDown();
-        $("#mobileMenu").addClass("showing");
+        common.show_element("#screenOverlayBehindHeader", true);
+        const mobileMenu = document.getElementById("mobileMenu");
+        if (mobileMenu) {
+            mobileMenu.style.display = 'block';
+            common.add_class("mobileMenu", "showing", true);
+        }
     }
 
-
     hideMobileMenu() {
-        $("#mobileMenu").slideUp(function() {
-            $("#screenOverlayBehindHeader").hide();
-        });
-        $("#mobileMenu").removeClass("showing");
+        const mobileMenu = document.getElementById("mobileMenu");
+        if (mobileMenu) {
+            mobileMenu.style.display = 'none';
+            common.hide_element("#screenOverlayBehindHeader", true);
+            common.remove_class("mobileMenu", "showing", true);
+        }
     }
 
     showMobileLanguageMenu() {
-        $("#screenOverlayBehindHeader").show();
-
-        $("#mobileLanguageMenu").slideDown();
-        $("#mobileLanguageMenu").addClass("showing");
+        common.show_element("#screenOverlayBehindHeader", true);
+        const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
+        if (mobileLanguageMenu) {
+            mobileLanguageMenu.style.display = 'block';
+            common.add_class("mobileLanguageMenu", "showing", true);
+        }
     }
 
     hideMobileLanguageMenu() {
-        $("#mobileLanguageMenu").slideUp(function() {
-            $("#screenOverlayBehindHeader").hide();
-        });
-        $("#mobileLanguageMenu").removeClass("showing");
+        const mobileLanguageMenu = document.getElementById("mobileLanguageMenu");
+        if (mobileLanguageMenu) {
+            mobileLanguageMenu.style.display = 'none';
+            common.hide_element("#screenOverlayBehindHeader", true);
+            common.remove_class("mobileLanguageMenu", "showing", true);
+        }
     }
 
     scrollToTop() {
-        $("body,html").animate({ scrollTop: 0 }, "slow");
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
     }
 
     isMobile() {
-
         var ua = navigator.userAgent;
         var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
-
             isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
-
             isAndroid = ua.match(/(Android)\s+([\d.]+)/),
-
             isMobile = isIphone || isAndroid;
 
         return isMobile;
@@ -377,5 +674,4 @@ class Common {
     }
 }
 
-
 export const common = new Common();

src/views/aboutUs/aboutUs.vue

@@ -1,27 +1,801 @@
 <template>
-  <div>
-    	<ihead></ihead>
-<div class="contentPage">
+  <div class="about-us-page">
+    <ihead></ihead>
+    
+    <!-- 页面横幅 -->
+    <div class="page-banner">
+      <div class="banner-content">
+        <div class="container">
+          <h1 class="banner-title">关于丙维科技</h1>
+          <p class="banner-subtitle">技术驱动未来，服务创造价值</p>
+          <div class="banner-stats">
+            <div class="stat-item">
+              <div class="stat-number">2018</div>
+              <div class="stat-label">成立年份</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">600万</div>
+              <div class="stat-label">注册资本</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">AI</div>
+              <div class="stat-label">核心业务</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
-		<div class="contentTable">
-         <router-view></router-view>
-	</div>
-	</div>
-  	<ifooter></ifooter>
+    <!-- 公司概况 -->
+    <div class="company-overview">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">公司概况</h2>
+          <p class="section-subtitle">专注于AI交付内容，为客户提供高质量的数字化解决方案</p>
+        </div>
+        
+        <div class="overview-content">
+          <div class="overview-text">
+            <p>上海丙维数字科技有限公司成立于2018年10月22日，总部位于上海市宝山区高逸路112-118号3幢6422室，注册资本600万元人民币。</p>
+            <p>公司致力于计算机软硬件、网络科技、信息科技领域的技术开发、技术咨询、技术转让和技术服务，以及计算机软件开发和计算机信息系统集成。</p>
+            <p>自2022年起，公司成功转型专注于AI交付内容，围绕客户需求提供智能应用解决方案，服务于多家知名大型企业，赢得了广泛的行业认可。</p>
+          </div>
+          <div class="overview-image">
+            <div class="image-placeholder">
+              <span class="placeholder-icon">🏢</span>
+              <p>公司总部</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 核心优势 -->
+    <div class="core-advantages">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">核心优势</h2>
+          <p class="section-subtitle">我们拥有顶尖的技术团队和丰富的行业经验</p>
+        </div>
+        
+        <div class="advantages-grid">
+          <div class="advantage-card" v-for="advantage in advantages" :key="advantage.title">
+            <div class="advantage-icon">{{advantage.icon}}</div>
+            <h3>{{advantage.title}}</h3>
+            <p>{{advantage.description}}</p>
+            <ul class="advantage-features">
+              <li v-for="feature in advantage.features" :key="feature">{{feature}}</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 发展历程 -->
+    <div class="development-timeline">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">发展历程</h2>
+          <p class="section-subtitle">从创立到AI转型的成长之路</p>
+        </div>
+        
+        <div class="timeline">
+          <div class="timeline-item" v-for="(milestone, index) in milestones" :key="index">
+            <div class="timeline-marker"></div>
+            <div class="timeline-content">
+              <div class="timeline-date">{{milestone.year}}</div>
+              <h3>{{milestone.title}}</h3>
+              <p>{{milestone.description}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 业务领域 -->
+    <div class="business-areas">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">业务领域</h2>
+          <p class="section-subtitle">三大核心业务，全方位满足客户数字化需求</p>
+        </div>
+        
+        <div class="areas-grid">
+          <div class="area-card" v-for="area in businessAreas" :key="area.name">
+            <div class="area-header">
+              <div class="area-icon">{{area.icon}}</div>
+              <h3>{{area.name}}</h3>
+            </div>
+            <p class="area-description">{{area.description}}</p>
+            <div class="area-services">
+              <h4>服务内容</h4>
+              <ul>
+                <li v-for="service in area.services" :key="service">{{service}}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 企业愿景 -->
+    <div class="company-vision">
+      <div class="container">
+        <div class="vision-content">
+          <div class="vision-text">
+            <h2>企业愿景</h2>
+            <h3>技术驱动未来，服务创造价值</h3>
+            <p>以客户需求为导向，将持续创新作为企业发展的基石，深入理解客户在数字化转型过程中的挑战与机遇。</p>
+            <p>追求技术与服务的完美结合，通过不断的技术探索和应用优化，为客户提供技术领先且高度契合业务需求的解决方案。</p>
+            <p>致力于运用前沿技术，为客户提供卓越的数字化解决方案，助力客户在激烈的市场竞争中实现业务突破和持续增长。</p>
+          </div>
+          <div class="vision-image">
+            <div class="image-placeholder">
+              <span class="placeholder-icon">🚀</span>
+              <p>未来愿景</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 联系我们 -->
+    <div class="contact-section">
+      <div class="container">
+        <div class="section-header">
+          <h2 class="section-title">联系我们</h2>
+          <p class="section-subtitle">期待与您携手，共同开启智能数字化的新篇章</p>
+        </div>
+        
+        <div class="contact-grid">
+          <div class="contact-card">
+            <div class="contact-icon">📍</div>
+            <h4>注册地址</h4>
+            <p>上海市宝山区高逸路112-118号3幢6422室</p>
+          </div>
+          <div class="contact-card">
+            <div class="contact-icon">📞</div>
+            <h4>联系电话</h4>
+            <p>13817819452</p>
+          </div>
+          <div class="contact-card">
+            <div class="contact-icon">✉️</div>
+            <h4>电子邮箱</h4>
+            <p>bimwe@bimwe.com</p>
+          </div>
+          <div class="contact-card">
+            <div class="contact-icon">🌐</div>
+            <h4>官方网站</h4>
+            <p>www.bimwe.com</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ifooter></ifooter>
   </div>
-
 </template>
 
 <script>
-
 export default {
+  name: 'AboutUs',
   data() {
     return {
-      msg: "Welcome to Your Vue.js App"
-    };
+      advantages: [
+        {
+          icon: '👥',
+          title: '顶尖技术团队',
+          description: '由阿里、字节、腾讯等顶尖互联网公司资深开发人员组成，技术积累深厚，项目经验丰富。',
+          features: [
+            '纯技术团队，专注于计算机软硬件、网络科技及信息科技领域',
+            '技术积累深厚，项目经验丰富',
+            '来自顶尖互联网公司的技术精英'
+          ]
+        },
+        {
+          icon: '🤖',
+          title: 'AI领域战略转型',
+          description: '2022年成功转型，将业务重心聚焦于AI交付领域，围绕客户需求提供定制化智能应用解决方案。',
+          features: [
+            '成功转型AI交付领域',
+            '定制化智能应用解决方案',
+            '数据分析、智能推荐、自动化流程等高效解决方案'
+          ]
+        },
+        {
+          icon: '🏆',
+          title: '客户广泛认可',
+          description: '为金融、制造、零售等多个行业的国内外知名企业提供服务，在行业内树立了可靠、专业的品牌形象。',
+          features: [
+            '服务多个行业知名企业',
+            '金融、制造、零售等行业经验',
+            '可靠的品牌形象和专业的服务'
+          ]
+        }
+      ],
+      milestones: [
+        {
+          year: '2018年10月',
+          title: '公司成立',
+          description: '开始在计算机软硬件、网络科技、信息科技等领域提供技术服务'
+        },
+        {
+          year: '2022年',
+          title: 'AI战略转型',
+          description: '成功转型，将业务重心聚焦于AI交付领域，围绕客户需求提供智能应用解决方案'
+        },
+        {
+          year: '现今',
+          title: '行业领先',
+          description: '已为多家国内外知名大型企业提供服务，业务范围覆盖多个行业，赢得了广泛的行业认可'
+        }
+      ],
+      businessAreas: [
+        {
+          icon: '💻',
+          name: '技术开发与服务',
+          description: '从事计算机软硬件、网络科技、信息科技领域的技术开发、咨询、转让和服务，致力于推动行业技术进步。',
+          services: [
+            '系统优化与性能提升',
+            '网络架构设计',
+            '信息安全解决方案',
+            '技术咨询与培训'
+          ]
+        },
+        {
+          icon: '🧠',
+          name: 'AI智能应用',
+          description: '专注于人工智能技术，为客户提供定制化的智能解决方案，涵盖数据分析、智能推荐、自动化流程等多个领域。',
+          services: [
+            '数据分析与挖掘',
+            '智能推荐系统',
+            '自动化流程',
+            '机器学习模型'
+          ]
+        },
+        {
+          icon: '🔧',
+          name: '系统集成与软件开发',
+          description: '提供高效的计算机信息系统集成服务，以及创新的软件开发，助力企业数字化转型。',
+          services: [
+            '系统集成服务',
+            '定制化软件开发',
+            '数字化转型',
+            '技术架构设计'
+          ]
+        }
+      ]
+    }
   }
-};
+}
 </script>
 
 <style scoped>
+/* 页面基础样式 */
+.about-us-page {
+  padding-top: 80px;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+/* 页面横幅 */
+.page-banner {
+  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+  color: white;
+  padding: 80px 0;
+  text-align: center;
+}
+
+.banner-title {
+  font-size: 3.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  animation: fadeInUp 1s ease-out;
+}
+
+.banner-subtitle {
+  font-size: 1.5rem;
+  font-weight: 300;
+  margin-bottom: 3rem;
+  opacity: 0.9;
+  animation: fadeInUp 1s ease-out 0.3s both;
+}
+
+.banner-stats {
+  display: flex;
+  justify-content: center;
+  gap: 60px;
+  margin-top: 3rem;
+}
+
+.stat-item {
+  text-align: center;
+  animation: fadeInUp 1s ease-out 0.6s both;
+}
+
+.stat-number {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #3498db;
+  margin-bottom: 0.5rem;
+}
+
+.stat-label {
+  font-size: 1rem;
+  opacity: 0.8;
+}
+
+/* 通用区域样式 */
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #2c3e50;
+  margin-bottom: 1rem;
+  position: relative;
+}
+
+.section-title::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(90deg, #3498db, #9b59b6);
+  border-radius: 2px;
+}
+
+.section-subtitle {
+  font-size: 1.2rem;
+  color: #6c757d;
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+/* 公司概况 */
+.company-overview {
+  padding: 80px 0;
+  background: #f8f9fa;
+}
+
+.overview-content {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 60px;
+  align-items: center;
+}
+
+.overview-text p {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #495057;
+  margin-bottom: 1.5rem;
+}
+
+.overview-image {
+  text-align: center;
+}
+
+.image-placeholder {
+  background: white;
+  padding: 60px 40px;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.placeholder-icon {
+  font-size: 4rem;
+  display: block;
+  margin-bottom: 1rem;
+}
+
+.image-placeholder p {
+  color: #6c757d;
+  font-size: 1.1rem;
+  margin: 0;
+}
+
+/* 核心优势 */
+.core-advantages {
+  padding: 80px 0;
+  background: white;
+}
+
+.advantages-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 40px;
+}
+
+.advantage-card {
+  background: white;
+  padding: 40px 30px;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  border: 1px solid #e9ecef;
+}
+
+.advantage-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+}
+
+.advantage-icon {
+  font-size: 3rem;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.advantage-card h3 {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.advantage-card p {
+  color: #6c757d;
+  line-height: 1.6;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.advantage-features {
+  list-style: none;
+  padding: 0;
+}
+
+.advantage-features li {
+  color: #495057;
+  padding: 8px 0;
+  border-bottom: 1px solid #e9ecef;
+  position: relative;
+  padding-left: 25px;
+}
+
+.advantage-features li::before {
+  content: '✓';
+  position: absolute;
+  left: 0;
+  color: #28a745;
+  font-weight: bold;
+}
+
+/* 发展历程 */
+.development-timeline {
+  padding: 80px 0;
+  background: #f8f9fa;
+}
+
+.timeline {
+  position: relative;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: #3498db;
+  transform: translateX(-50%);
+}
+
+.timeline-item {
+  position: relative;
+  margin-bottom: 60px;
+  display: flex;
+  align-items: center;
+}
+
+.timeline-item:nth-child(odd) {
+  flex-direction: row;
+}
+
+.timeline-item:nth-child(even) {
+  flex-direction: row-reverse;
+}
+
+.timeline-marker {
+  position: absolute;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  background: #3498db;
+  border: 4px solid white;
+  border-radius: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+
+.timeline-content {
+  width: 45%;
+  padding: 30px;
+  background: white;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  position: relative;
+}
+
+.timeline-item:nth-child(odd) .timeline-content {
+  margin-right: 55%;
+}
+
+.timeline-item:nth-child(even) .timeline-content {
+  margin-left: 55%;
+}
+
+.timeline-date {
+  color: #3498db;
+  font-weight: 600;
+  font-size: 1.1rem;
+  margin-bottom: 10px;
+}
+
+.timeline-content h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 15px;
+}
+
+.timeline-content p {
+  color: #6c757d;
+  line-height: 1.6;
+}
+
+/* 业务领域 */
+.business-areas {
+  padding: 80px 0;
+  background: white;
+}
+
+.areas-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 40px;
+}
+
+.area-card {
+  background: white;
+  padding: 40px 30px;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  border: 1px solid #e9ecef;
+}
+
+.area-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
+}
+
+.area-header {
+  text-align: center;
+  margin-bottom: 25px;
+}
+
+.area-icon {
+  font-size: 3rem;
+  margin-bottom: 15px;
+}
+
+.area-header h3 {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin: 0;
+}
+
+.area-description {
+  color: #6c757d;
+  line-height: 1.6;
+  margin-bottom: 25px;
+  text-align: center;
+}
+
+.area-services h4 {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 15px;
+}
+
+.area-services ul {
+  list-style: none;
+  padding: 0;
+}
+
+.area-services li {
+  color: #495057;
+  padding: 8px 0;
+  border-bottom: 1px solid #e9ecef;
+  position: relative;
+  padding-left: 25px;
+}
+
+.area-services li::before {
+  content: '→';
+  position: absolute;
+  left: 0;
+  color: #3498db;
+  font-weight: bold;
+}
+
+/* 企业愿景 */
+.company-vision {
+  padding: 80px 0;
+  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+  color: white;
+}
+
+.vision-content {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 60px;
+  align-items: center;
+}
+
+.vision-text h2 {
+  font-size: 2rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: #ecf0f1;
+}
+
+.vision-text h3 {
+  font-size: 1.8rem;
+  font-weight: 700;
+  margin-bottom: 2rem;
+  color: #3498db;
+}
+
+.vision-text p {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  margin-bottom: 1.5rem;
+  color: #bdc3c7;
+}
+
+.vision-image .image-placeholder {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.vision-image .placeholder-icon {
+  color: #3498db;
+}
+
+.vision-image .image-placeholder p {
+  color: #ecf0f1;
+}
+
+/* 联系我们 */
+.contact-section {
+  padding: 80px 0;
+  background: #f8f9fa;
+}
+
+.contact-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 30px;
+}
+
+.contact-card {
+  background: white;
+  padding: 30px;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+
+.contact-card:hover {
+  transform: translateY(-5px);
+}
+
+.contact-icon {
+  font-size: 2.5rem;
+  margin-bottom: 15px;
+}
+
+.contact-card h4 {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 10px;
+}
+
+.contact-card p {
+  color: #6c757d;
+  margin: 0;
+}
+
+/* 动画效果 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .banner-title {
+    font-size: 2.5rem;
+  }
+  
+  .banner-subtitle {
+    font-size: 1.2rem;
+  }
+  
+  .banner-stats {
+    flex-direction: column;
+    gap: 30px;
+  }
+  
+  .section-title {
+    font-size: 2rem;
+  }
+  
+  .overview-content,
+  .vision-content {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+  
+  .timeline::before {
+    left: 20px;
+  }
+  
+  .timeline-item {
+    flex-direction: row !important;
+  }
+  
+  .timeline-marker {
+    left: 20px;
+  }
+  
+  .timeline-content {
+    width: calc(100% - 60px);
+    margin-left: 60px !important;
+    margin-right: 0 !important;
+  }
+  
+  .advantages-grid,
+  .areas-grid,
+  .contact-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .company-overview,
+  .core-advantages,
+  .development-timeline,
+  .business-areas,
+  .company-vision,
+  .contact-section {
+    padding: 60px 0;
+  }
+}
 </style>

src/views/aboutUs/cooperateWithUs.vue

@@ -1,70 +0,0 @@
-<template>
-  <div>
-    <leftMenu> </leftMenu>
-    <icontent>
-      <h3 data-v-7630ff5e="" data-v-41de0e1c=""> 我们是谁？</h3>
-      <p data-v-7630ff5e="" data-v-41de0e1c="">
-        我们是一家员工所有的公司，其业务围绕着许多核心价值观。可持续性，平等和合作是其中的一部分。我们业务的很大一部分是基于与客户共同寻找创新解决方案，使客户能够降低能耗。我们有很多技巧。通过将我们的技能与客户技能相结合，我们帮助客户简化其物业，房地产和设施管理流程。
-      </p>
-      <h3 data-v-7630ff5e="" data-v-41de0e1c="">我们做什么</h3>
-      <p data-v-7630ff5e="" data-v-41de0e1c="">
-        我们开发IT解决方案和服务，用于管理房地产，房地产和设施管理中的战略信息。我们还在智能建筑和物业及设施管理领域从事商业咨询。借助最新技术，我们可以创建解决方案和平台，帮助客户将其业务数字化。
-      </p>
-      <h3 data-v-7630ff5e="" data-v-41de0e1c="">
-        我们的愿景和经营理念
-      </h3>
-      <p data-v-7630ff5e="" data-v-41de0e1c="">
-        我们将在物业，房地产和设施管理方面提供最好的服务和解决方案。我们决心拥有传统和保守的部门，以了解持续和自动数据收集和分析的必要性。
-
-      </p>
-
-    </icontent>
-
-  </div>
-
-</template>
-
-<script>
-export default {
-    data() {
-        return {};
-    },
-    mounted: function () {},
-};
-</script>
-
-<style scoped>
-.nav_div {
-    font-size: 25px;
-    color: #333333;
-}
-
-.cav_contact_div1 {
-    margin-bottom: 40px;
-    font-size: 14px;
-    line-height: 28px;
-    text-align: left;
-}
-
-.left {
-    display: inline-block;
-    vertical-align: top;
-    width: 60%;
-}
-
-.right {
-    position: left;
-    display: inline-block;
-    margin: 1em;
-    width: 35%;
-    vertical-align: top;
-}
-
-.cav_contact_ul > li {
-    list-style: none;
-    padding-top: 14px;
-    font-family: 'Microsoft YaHei';
-    font-size: 14px;
-    color: #333333;
-}
-</style>

src/views/aboutUs/propystTechnology.vue

@@ -1,22 +0,0 @@
-<template>
-  <div>
-    <leftMenu> </leftMenu>
-    <icontent>
-      <p> 丙维科技一直致力于成为一个有吸引力的雇主。</p>
-      <p> 我们是一家信奉环境和性别平等的公司。有了我们，您始终有机会成长和发展。我们一直在寻找新员工。如果您有兴趣加入我们的团队，请随时与我们联系。</p>
-    </icontent>
-  </div>
-
-</template>
-
-<script>
-export default {
-    data() {
-        return {};
-    },
-    mounted: function () {},
-};
-</script>
-
-<style scoped>
-</style>

src/views/fulEdge/fulEdge.vue

@@ -1,27 +0,0 @@
-<template>
-  <div>
-    	<ihead></ihead>
-<div class="contentPage">
-
-		<div class="contentTable">
-              <router-view></router-view>
-	</div>
-	</div>
-  	<ifooter></ifooter>
-  </div>
-
-</template>
-
-<script>
-
-export default {
-  data() {
-    return {
-    
-    };
-  }
-};
-</script>
-
-<style scoped>
-</style>

src/views/fulEdge/mobileSolution.vue

@@ -1,26 +0,0 @@
-<template>
-  <div>
-    <leftMenu> </leftMenu>
-    <icontent>
-
-      <p> 我们的解决方案是比亚迪解决方案（自带设备解决方案）。</p>
-
-      <p> 我们开发了可用于管理设施管理中日常工作的应用程序。</p>
-
-      <p> 通过我们的解决方案，您可以随时随地履行职责。</p>
-    </icontent>
-
-  </div>
-
-</template>
-
-<script>
-export default {
-    data() {
-        return {};
-    },
-};
-</script>
-
-<style scoped>
-</style>

src/views/fulEdge/other.vue

@@ -1,18 +0,0 @@
-<template>
-  <div>
-    <leftMenu> </leftMenu>
-    <icontent></icontent>
-  </div>
-
-</template>
-
-<script>
-export default {
-    data() {
-        return {};
-    },
-};
-</script>
-
-<style scoped>
-</style>

src/views/index.vue

@@ -1,19 +1,90 @@
 <template>
   <div>
     <ihead></ihead>
+    
+    <!-- 现代化横幅区域 -->
     <div class="banner">
       <swiper ref="swiper" :options="swiperOption">
         <swiper-slide v-for="banner in banners" :key="banner.img">
-          <img :src="banner.img" width="100%" />
+          <div class="banner-content">
+            <img :src="banner.img" width="100%" />
+            <div class="banner-overlay">
+              <div class="banner-text">
+                <h1 class="banner-title">{{banner.title}}</h1>
+                <p class="banner-subtitle">{{banner.subtitle}}</p>
+              </div>
+            </div>
+          </div>
         </swiper-slide>
 
-        <div class="directionControl  swiper-button-prev" slot="button-prev"> </div>
-        <div class="directionControl  swiper-button-next" slot="button-next"> </div>
+        <div class="directionControl swiper-button-prev" slot="button-prev"> </div>
+        <div class="directionControl swiper-button-next" slot="button-next"> </div>
         <div class="swiper-pagination" slot="pagination"> </div>
       </swiper>
-
     </div>
 
+    <!-- 公司介绍区域 -->
+    <div class="company-intro">
+      <div class="container">
+        <div class="intro-header">
+          <h2 class="section-title">技术驱动未来，服务创造价值</h2>
+          <p class="section-subtitle">上海丙维数字科技有限公司成立于2018年，专注于AI交付内容，为客户提供高质量的数字化解决方案</p>
+        </div>
+        
+        <div class="intro-content">
+          <div class="intro-card">
+            <div class="card-icon">🏢</div>
+            <h3>公司概况</h3>
+            <p>成立于2018年10月22日，注册资本600万元人民币，总部位于上海市宝山区高逸路112-118号3幢6422室</p>
+          </div>
+          
+          <div class="intro-card">
+            <div class="card-icon">🎯</div>
+            <h3>核心使命</h3>
+            <p>致力于计算机软硬件、网络科技、信息科技领域的技术开发、咨询、转让和服务</p>
+          </div>
+          
+          <div class="intro-card">
+            <div class="card-icon">🚀</div>
+            <h3>AI转型</h3>
+            <p>2022年成功转型AI交付领域，围绕客户需求提供智能应用解决方案</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 核心优势展示 -->
+    <div class="core-advantages">
+      <div class="container">
+        <h2 class="section-title">核心优势</h2>
+        <div class="advantages-grid">
+          <div class="advantage-item" v-for="advantage in advantages" :key="advantage.title">
+            <div class="advantage-icon">{{advantage.icon}}</div>
+            <h3>{{advantage.title}}</h3>
+            <p>{{advantage.description}}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 业务领域展示 -->
+    <div class="business-areas">
+      <div class="container">
+        <h2 class="section-title">业务领域</h2>
+        <div class="areas-grid">
+          <div class="area-item" v-for="area in businessAreas" :key="area.name">
+            <div class="area-icon">{{area.icon}}</div>
+            <h3>{{area.name}}</h3>
+            <p>{{area.description}}</p>
+            <ul class="area-features">
+              <li v-for="feature in area.features" :key="feature">{{feature}}</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 原有产品展示区域 -->
     <div class="scrollToContentWrapper">
       <a href="javascript:void(0)" id="scrollToBoxes" class="scrollToContent bottomShadowSegmentLight">
         <img src="../assets/img/svg/ic_caret.svg" alt="">
@@ -21,8 +92,7 @@
     </div>
 
     <div id="pageBoxesContainer" class="page pageBoxes">
-
-      <div class="box" v-for="product in  productData" :key="product.name">
+      <div class="box" v-for="product in productData" :key="product.name">
         <img width="100%" :src="product.img" />
         <div class="boxTableHeader">
           <div class="h2">{{product.name}}</div>
@@ -31,9 +101,39 @@
         <router-link v-else :to="product.url"> </router-link>
       </div>
     </div>
+
+    <!-- 联系我们区域 -->
+    <div class="contact-section">
+      <div class="container">
+        <h2 class="section-title">联系我们</h2>
+        <div class="contact-info">
+          <div class="contact-item">
+            <div class="contact-icon">📍</div>
+            <div>
+              <h4>注册地址</h4>
+              <p>上海市宝山区高逸路112-118号3幢6422室</p>
+            </div>
+          </div>
+          <div class="contact-item">
+            <div class="contact-icon">📞</div>
+            <div>
+              <h4>联系电话</h4>
+              <p>13817819452</p>
+            </div>
+          </div>
+          <div class="contact-item">
+            <div class="contact-icon">🌐</div>
+            <div>
+              <h4>官方网站</h4>
+              <p>www.bimwe.com</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <ifooter></ifooter>
   </div>
-
 </template>
 
 <script>
@@ -53,12 +153,16 @@ export default {
   data() {
     return {
       swiperOption: {
-        autoplay: 2000,
+        autoplay: 3000,
         speed: 1000,
         loop: true,
+        effect: 'fade',
+        fadeEffect: {
+          crossFade: true
+        },
         navigation: {
-          nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
-          prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
         },
         pagination: {
           el: '.swiper-pagination',
@@ -68,10 +172,63 @@ export default {
         },
       },
       banners: [
-        { img: banner_index0 },
-        { img: banner_index1 },
-        { img: banner_index2 },
-        { img: banner_index3 },
+        { 
+          img: banner_index0,
+          title: '智能数字化解决方案',
+          subtitle: '技术驱动未来，服务创造价值'
+        },
+        { 
+          img: banner_index1,
+          title: 'AI技术引领者',
+          subtitle: '专注AI交付，助力企业数字化转型'
+        },
+        { 
+          img: banner_index2,
+          title: '顶尖技术团队',
+          subtitle: '阿里、字节、腾讯技术精英汇聚'
+        },
+        { 
+          img: banner_index3,
+          title: '行业解决方案专家',
+          subtitle: '金融、制造、零售多行业服务经验'
+        },
+      ],
+      advantages: [
+        {
+          icon: '👥',
+          title: '顶尖技术团队',
+          description: '由阿里、字节、腾讯等顶尖互联网公司资深开发人员组成，技术积累深厚，项目经验丰富'
+        },
+        {
+          icon: '🤖',
+          title: 'AI领域战略转型',
+          description: '2022年成功转型，将业务重心聚焦于AI交付领域，围绕客户需求提供定制化智能应用解决方案'
+        },
+        {
+          icon: '🏆',
+          title: '客户广泛认可',
+          description: '为金融、制造、零售等多个行业的国内外知名企业提供服务，在行业内树立了可靠、专业的品牌形象'
+        }
+      ],
+      businessAreas: [
+        {
+          icon: '💻',
+          name: '技术开发与服务',
+          description: '从事计算机软硬件、网络科技、信息科技领域的技术开发、咨询、转让和服务',
+          features: ['系统优化与性能提升', '网络架构设计', '信息安全解决方案', '技术咨询与培训']
+        },
+        {
+          icon: '🧠',
+          name: 'AI智能应用',
+          description: '专注于人工智能技术，为客户提供定制化的智能解决方案',
+          features: ['数据分析与挖掘', '智能推荐系统', '自动化流程', '机器学习模型']
+        },
+        {
+          icon: '🔧',
+          name: '系统集成与软件开发',
+          description: '提供高效的计算机信息系统集成服务，以及创新的软件开发',
+          features: ['系统集成服务', '定制化软件开发', '数字化转型', '技术架构设计']
+        }
       ],
       productData: [
         {
@@ -85,7 +242,6 @@ export default {
           img: boxbg_smartbuildings,
           url: '/IntelligentBuild',
         },
-
         {
           name: '物联网',
           img: boxbg_iot,
@@ -101,7 +257,6 @@ export default {
           img: boxbg_errands,
           url: '/ourPlan/reaEstate',
         },
-
         {
           name: '智慧系统',
           img: boxbg_propertyandrealestate,
@@ -116,7 +271,330 @@ export default {
 </script>
 
 <style scoped>
+/* 横幅样式升级 */
+.banner {
+  position: relative;
+  height: 80vh;
+  min-height: 500px;
+}
+
+.banner-content {
+  position: relative;
+  height: 100%;
+}
+
+.banner-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: white;
+}
+
+.banner-text {
+  max-width: 800px;
+  padding: 0 20px;
+}
+
+.banner-title {
+  font-size: 3.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+  animation: fadeInUp 1s ease-out;
+}
+
+.banner-subtitle {
+  font-size: 1.5rem;
+  font-weight: 300;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+  animation: fadeInUp 1s ease-out 0.3s both;
+}
+
+/* 公司介绍区域 */
+.company-intro {
+  padding: 80px 0;
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.intro-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #2c3e50;
+  margin-bottom: 1rem;
+  position: relative;
+}
+
+.section-title::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(90deg, #3498db, #9b59b6);
+  border-radius: 2px;
+}
+
+.section-subtitle {
+  font-size: 1.2rem;
+  color: #6c757d;
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.intro-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 30px;
+  margin-top: 50px;
+}
+
+.intro-card {
+  background: white;
+  padding: 40px 30px;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  text-align: center;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.intro-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+}
+
+.card-icon {
+  font-size: 3rem;
+  margin-bottom: 20px;
+}
+
+.intro-card h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 15px;
+}
+
+.intro-card p {
+  color: #6c757d;
+  line-height: 1.6;
+}
+
+/* 核心优势区域 */
+.core-advantages {
+  padding: 80px 0;
+  background: white;
+}
+
+.advantages-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 40px;
+  margin-top: 50px;
+}
+
+.advantage-item {
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.advantage-icon {
+  font-size: 4rem;
+  margin-bottom: 20px;
+}
+
+.advantage-item h3 {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 15px;
+}
+
+.advantage-item p {
+  color: #6c757d;
+  line-height: 1.6;
+  font-size: 1.1rem;
+}
+
+/* 业务领域区域 */
+.business-areas {
+  padding: 80px 0;
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+}
+
+.areas-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 40px;
+  margin-top: 50px;
+}
+
+.area-item {
+  background: white;
+  padding: 40px 30px;
+  border-radius: 15px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.area-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
+}
+
+.area-icon {
+  font-size: 3rem;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.area-item h3 {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.area-item p {
+  color: #6c757d;
+  line-height: 1.6;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.area-features {
+  list-style: none;
+  padding: 0;
+}
+
+.area-features li {
+  color: #495057;
+  padding: 8px 0;
+  border-bottom: 1px solid #e9ecef;
+  position: relative;
+  padding-left: 25px;
+}
+
+.area-features li::before {
+  content: '✓';
+  position: absolute;
+  left: 0;
+  color: #28a745;
+  font-weight: bold;
+}
+
+/* 联系我们区域 */
+.contact-section {
+  padding: 80px 0;
+  background: white;
+}
+
+.contact-info {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 40px;
+  margin-top: 50px;
+}
+
+.contact-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 30px;
+  background: #f8f9fa;
+  border-radius: 15px;
+  transition: transform 0.3s ease;
+}
+
+.contact-item:hover {
+  transform: translateY(-5px);
+}
+
+.contact-icon {
+  font-size: 2.5rem;
+  margin-right: 20px;
+  flex-shrink: 0;
+}
+
+.contact-item h4 {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 8px;
+}
+
+.contact-item p {
+  color: #6c757d;
+  margin: 0;
+}
+
+/* 动画效果 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .banner-title {
+    font-size: 2.5rem;
+  }
+  
+  .banner-subtitle {
+    font-size: 1.2rem;
+  }
+  
+  .section-title {
+    font-size: 2rem;
+  }
+  
+  .intro-content,
+  .advantages-grid,
+  .areas-grid,
+  .contact-info {
+    grid-template-columns: 1fr;
+  }
+  
+  .company-intro,
+  .core-advantages,
+  .business-areas,
+  .contact-section {
+    padding: 60px 0;
+  }
+}
+
+/* 原有样式保持 */
 .swiper-pagination {
   bottom: 10%;
 }
+
+.pageBoxes {
+  margin-top: 60px;
+}
 </style>