updata

f/web-kboss/src/router/index.js

@@ -19,6 +19,7 @@ import ShowGpu from "@/views/product/productHome/capitalOnline/productItem/GpuPr
 import ShowEip from "@/views/product/productHome/capitalOnline/Net/Eip/showEip/index.vue";
 import CreateEip from "@/views/product/productHome/capitalOnline/Net/Eip/createEip/index.vue";
 import { getHomePath } from '@/views/setting/tools'
+import { h } from "vue";
 
 Vue.use(Router);
 
@@ -139,8 +140,10 @@ export const constantRoutes = [
     ]
   },
   {
+    name: 'H5about',
     path: "/H5about",
     title: 'H5关于我们',
+    hidden: true,
     component: () => import('@/views/H5/about/index.vue'),
     meta: {
       title: "H5关于我们", fullPath: "/h5about/index",

f/web-kboss/src/views/H5/about/index.vue

@@ -17,7 +17,7 @@
       <div class="right">
         <div class="content">
           <div class="text">
-            <div v-for="(item, index) in companyData" :key="index">
+            <div v-for="(item, index) in companyData" :key="index" style="margin-bottom: .2rem;">
               {{ item }}
             </div>
           </div>
@@ -69,7 +69,6 @@
       <div class="culture-content">
         <div class="culture-item">
           <div class="culture-icon">
-            <!-- 这里可以放图标 -->
             <div class="icon-placeholder">
               <img src="./img/sm.png" alt="">
             </div>
@@ -128,7 +127,12 @@
       </div>
       <!-- 列表 -->
       <div class="advantages-content">
-        <div class="advantages-item" v-for="items in advantagesList" :key="index">
+        <div
+          class="advantages-item"
+          v-for="(items, index) in advantagesList"
+          :key="index"
+          :class="'advantage-item-' + (index + 1)"
+        >
           <div class="toptit">
             {{ items.title }}
           </div>
@@ -136,18 +140,21 @@
             {{ items.desc }}
           </div>
         </div>
-
       </div>
     </div>
+    <Footer />
   </div>
 </template>
 
 <script>
 import { reqCompany } from '@/api/H5/index.js';
 import '../media'
-
+import Footer from '../components/footer/footer.vue';
 export default {
   name: 'AboutPage',
+  components: {
+    Footer
+  },
   data() {
     return {
       companyData: {},
@@ -198,6 +205,14 @@ export default {
           title: '提供AI基础设施与模型服务',
           desc: '提供整体底层技术架构和系统支持及模型服务'
         }
+      ],
+      advantageBgImages: [
+        require('./img/advantage1.png'),
+        require('./img/advantage2.png'),
+        require('./img/advantage3.png'),
+        require('./img/advantage4.png'),
+        require('./img/advantage5.png'),
+        require('./img/advantage6.png')
       ]
     }
   },
@@ -251,7 +266,7 @@ export default {
   justify-content: center;
 
   .title {
-    font-size: .5rem;
+    font-size: .3rem;
     background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -267,17 +282,18 @@ export default {
 }
 
 .introduce {
-  padding: 0 .2rem;
   width: 100%;
   display: flex;
   align-items: center;
-  margin-top: .3rem;
+  flex-direction: column;
   background: linear-gradient(180deg, #fff 0%, #f6f8fd 40%, #fff 100%);
 
   .left {
     width: 20%;
     font-size: .3rem;
     font-weight: 600;
+    text-align: center;
+    margin-bottom: .3rem;
 
     .color {
       background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
@@ -288,7 +304,7 @@ export default {
   }
 
   .right {
-    width: 80%;
+    width: 90%;
     font-size: .2rem;
     color: #000;
     line-height: 1.6;
@@ -297,7 +313,6 @@ export default {
 
 // 公司资质样式
 .qualifications {
-  // padding: 0 .2rem;
   margin-top: .4rem;
   background: url('./img/footer.png') no-repeat;
   background-size: 100% 100%;
@@ -318,7 +333,6 @@ export default {
   }
 
   .img-list {
-    // height: calc(100% - .8rem);
     overflow: hidden;
     position: relative;
 
@@ -351,10 +365,8 @@ export default {
       width: 120px;
       height: 100%;
       margin: 0 10px;
-      // background: rgba(255, 255, 255, 0.9);
       border-radius: 8px;
       overflow: hidden;
-      // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     }
 
     .scroll-item img {
@@ -476,25 +488,56 @@ export default {
     flex-wrap: wrap;
 
     .advantages-item {
-      background: linear-gradient(125deg, #ffffff 0%, #70caf1 100%);
       margin-bottom: .2rem;
       width: 48%;
       padding: .2rem;
       box-shadow: 0 .05rem .15rem rgba(0, 0, 0, 0.05);
       border-radius: .12rem;
+      background-size: 180% 100%;
+      background-repeat: no-repeat;
+      background-position:right;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
 
       .toptit {
         font-weight: 600;
         color: #000;
         font-size: .28rem;
+        margin-bottom: .1rem;
       }
 
       .btm-text {
         font-size: .16rem;
         color: #666;
-        margin: .2rem 0;
+        line-height: 1.4;
       }
     }
+
+    // 为每个优势项设置不同的背景图片
+    .advantage-item-1 {
+      background-image: url('./img/advantage1.png');
+    }
+
+    .advantage-item-2 {
+      background-image: url('./img/advantage2.png');
+    }
+
+    .advantage-item-3 {
+      background-image: url('./img/advantage3.png');
+    }
+
+    .advantage-item-4 {
+      background-image: url('./img/advantage4.png');
+    }
+
+    .advantage-item-5 {
+      background-image: url('./img/advantage5.png');
+    }
+
+    .advantage-item-6 {
+      background-image: url('./img/advantage6.png');
+    }
   }
 }
 
@@ -518,4 +561,20 @@ export default {
     transform: translateX(0);
   }
 }
+
+// 响应式调整
+@media (max-width: 375px) {
+  .advantages-content .advantages-item {
+    width: 100%;
+    margin-bottom: .15rem;
+
+    .toptit {
+      font-size: .26rem;
+    }
+
+    .btm-text {
+      font-size: .15rem;
+    }
+  }
+}
 </style>

f/web-kboss/src/views/H5/components/footer/footer.vue

@@ -35,8 +35,14 @@
                 Open-computing@kaiyuancloud.cn
               </a>
             </div>
+            <div class="contact-item">
+              <i class="iconfont icon-dianhua"></i>
+              <span class="label">ICP备案号：</span>
+              <div class="phone-numbers">
+                <span class="icp-number">{{ ICP }}</span>
+              </div>
+            </div>
           </div>
-
           <div class="mobile-qr">
             <div class="qr-item">
               <div class="qr-code">
@@ -55,15 +61,7 @@
 
         <!-- 备案信息 -->
         <!-- <div class="footer-bottom">
-          <div class="icp-info">
+
-            <div class="icp-item">
-              <span class="icp-text">ICP备案号：</span>
-              <span class="icp-number">{{ ICP }}</span>
-            </div>
-            <div class="copyright">
-              版权所有 © kaiyuanyun 2023
-            </div>
-          </div>
 
           <div class="record-info">
             <div class="police-record">

f/web-kboss/src/views/homePage/about/index.vue

@@ -1,18 +1,18 @@
 <template>
   <div style="width: 100%;">
+    <!-- Banner部分 -->
     <div class="banner">
       <div v-if="JSON.stringify(logoInfoNew) !== '{}'" style="font-size: 38px;">
-        <!-- 开元云 标题 -->
         <div>{{ logoInfoNew.home.bannerTitle }}</div>
         <p style="color: #0e0b0b">全球领先的AI服务运营商</p>
       </div>
     </div>
 
+    <!-- 关于我们部分 -->
     <div class="mainBox" style="padding-top: 35px">
       <div class="inBox">
         <div class="leftBox">
           <p class="leftBoxtitle">关于<span class="gradient-text">我们</span></p>
-          <!-- <img v-if="JSON.stringify(logoInfoNew) !== '{}'" :src="logoInfoNew.home.logoImg" alt=""> -->
         </div>
         <div v-if="JSON.stringify(logoInfoNew) !== '{}'" class="rightBox">
           <p v-for="(i, index) in logoInfoNew.about.content" :key="index">
@@ -21,6 +21,7 @@
         </div>
       </div>
     </div>
+
     <!-- 公司资质 -->
     <div class="zizhi">
       <div style="width: 1400px;">
@@ -30,6 +31,7 @@
         <LogoTwo></LogoTwo>
       </div>
     </div>
+
     <!-- 企业文化 -->
     <div class="enterprise">
       <div class="enterprise-inner">
@@ -85,7 +87,7 @@
       </div>
     </div>
 
-    <!-- 优势 -->
+    <!-- 优势部分 - 使用动态绑定 -->
     <div class="advantage">
       <div class="advantage-tit">
         <span>平台<span class="gradient-text">优势</span></span>
@@ -93,69 +95,31 @@
       <!-- 优势列表 -->
       <div class="advantage-content">
         <div class="advantage-grid">
-          <div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage1.png') + ')' }">
+          <div
+            v-for="(item, index) in advantageItems"
+            :key="index"
+            class="advantage-item"
+            :class="{
+              'hovered': hoveredIndex === index && item.hasHoverEffect,
+              'no-hover-effect': !item.hasHoverEffect
+            }"
+            @mouseenter="hoveredIndex = index"
+            @mouseleave="hoveredIndex = null"
+            :style="{
+              backgroundImage: `url(${getBackgroundImage(index)})`
+            }"
+          >
             <div class="content-wrapper">
               <div class="top-tit">
-                精准定位
+                {{ item.title }}
               </div>
               <div class="btm-tit">
-                专注于为各行业提供专业、高效的人工智能解决方案，助力企业智能化转型。
+                {{ item.description }}
-              </div>
-            </div>
-          </div>
-          <div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage2.png') + ')' }">
-            <div class="content-wrapper">
-              <div class="top-tit">
-                技术服务
-              </div>
-              <div class="btm-tit">
-                提供人工智能相关的技术服务，为企业解决复杂的技术难题。
-              </div>
-            </div>
-          </div>
-          <div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage3.png') + ')' }">
-            <div class="content-wrapper">
-              <div class="top-tit">
-                产品定制
-              </div>
-              <div class="btm-tit">
-                根据企业的特定需求，定制开发人工智能产品，满足不同场景的应用需求。
-              </div>
-            </div>
-          </div>
-          <div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage4.png') + ')' }">
-            <div class="content-wrapper">
-              <div class="top-tit">
-                产业赋能
-              </div>
-              <div class="btm-tit">
-                通过人工智能技术，为传统产业赋能，提升产业的竞争力和创新能力。
-              </div>
-            </div>
-          </div>
-          <div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage5.png') + ')' }">
-            <div class="content-wrapper">
-              <div class="top-tit">
-                一站式、本地化服务
-              </div>
-              <div class="btm-tit">
-                从售前、售中到售后提供一站式全方位服务
-              </div>
-            </div>
-          </div>
-          <div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage6.png') + ')' }">
-            <div class="content-wrapper">
-              <div class="top-tit">
-                提供AI基础设施与模型服务
-              </div>
-              <div class="btm-tit">
-                提供整体底层技术架构和系统支持及模型服务
               </div>
             </div>
           </div>
         </div>
       </div>
-      <!-- 优势列表完 -->
     </div>
   </div>
 </template>
@@ -170,7 +134,51 @@ export default Vue.extend({
   components: { LogoTwo },
   data() {
     return {
-      // 删除了language和translations相关数据
+      hoveredIndex: null,
+      advantageItems: [
+        {
+          title: '精准定位',
+          description: '专注于为各行业提供专业、高效的人工智能解决方案，助力企业智能化转型。',
+          normalImage: 'advantage1.png',
+          hoverImage: 'advantageColor1.png', // 第一张没有彩色版本，使用同一张图片
+          hasHoverEffect: true // 标记没有悬停效果
+        },
+        {
+          title: '技术服务',
+          description: '提供人工智能相关的技术服务，为企业解决复杂的技术难题。',
+          normalImage: 'advantage2.png',
+          hoverImage: 'advantageColor2.png',
+          hasHoverEffect: true
+        },
+        {
+          title: '产品定制',
+          description: '根据企业的特定需求，定制开发人工智能产品，满足不同场景的应用需求。',
+          normalImage: 'advantage3.png',
+          hoverImage: 'advantageColor3.png',
+          hasHoverEffect: true
+        },
+        {
+          title: '产业赋能',
+          description: '通过人工智能技术，为传统产业赋能，提升产业的竞争力和创新能力。',
+          normalImage: 'advantage4.png',
+          hoverImage: 'advantageColor4.png',
+          hasHoverEffect: true
+        },
+        {
+          title: '一站式、本地化服务',
+          description: '从售前、售中到售后提供一站式全方位服务',
+          normalImage: 'advantage5.png',
+          hoverImage: 'advantageColor5.png',
+          hasHoverEffect: true
+        },
+        {
+          title: '提供AI基础设施与模型服务',
+          description: '提供整体底层技术架构和系统支持及模型服务',
+          normalImage: 'advantage6.png',
+          hoverImage: 'advantageColor6.png',
+          hasHoverEffect: true
+        }
+      ]
     }
   },
   computed: {
@@ -195,7 +203,17 @@ export default Vue.extend({
     },
   },
   methods: {
-    // 删除了initLanguage方法
+    getBackgroundImage(index) {
+      const item = this.advantageItems[index];
+
+      // 如果有悬停效果且当前被悬停，使用悬停图片
+      if (this.hoveredIndex === index && item.hasHoverEffect) {
+        return require(`./img/${item.hoverImage}`);
+      } else {
+        // 正常状态或没有悬停效果
+        return require(`./img/${item.normalImage}`);
+      }
+    }
   }
 })
 </script>
@@ -356,7 +374,6 @@ export default Vue.extend({
   }
 }
 
-
 .zizhi {
   height: 900px;
   width: 100%;
@@ -403,7 +420,6 @@ export default Vue.extend({
         position: relative;
         border-radius: 12px;
         padding: 40px 30px;
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
         transition: all 0.3s ease;
         height: 140px;
         display: flex;
@@ -417,24 +433,9 @@ export default Vue.extend({
         background-position: center !important;
         background-repeat: no-repeat !important;
 
-        /* 默认状态：白色半透明遮罩，黑色文字 */
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background: rgba(255, 255, 255, 0.85);
-          border-radius: 12px;
-          z-index: 1;
-          transition: all 0.3s ease;
-        }
-
         .content-wrapper {
           position: relative;
           z-index: 2;
-          transition: all 0.3s ease;
         }
 
         .top-tit {
@@ -452,21 +453,33 @@ export default Vue.extend({
           transition: all 0.3s ease;
         }
 
-        /* 悬停状态：蓝色半透明遮罩，白色文字 */
+        /* 有悬停效果的卡片 */
-        &:hover {
+        &:not(.no-hover-effect) {
-          transform: translateY(-5px);
+          &.hovered {
-          box-shadow: 0 8px 25px rgba(0, 102, 255, 0.2);
+            transform: translateY(-5px);
+            box-shadow: 0 8px 25px rgba(0, 102, 255, 0.2);
 
-          &::before {
+            .top-tit {
-            background: rgba(0, 102, 255, 0.9);
+              color: #fff;
+            }
+
+            .btm-tit {
+              color: rgba(255, 255, 255, 0.9);
+            }
+          }
+        }
+
+        /* 没有悬停效果的卡片（第一张） */
+        &.no-hover-effect {
+          cursor: default;
+
+          &:hover {
+            transform: none;
+            box-shadow: none;
           }
 
-          .top-tit {
+          .top-tit, .btm-tit {
-            color: #fff;
+            color: #333;
-          }
-
-          .btm-tit {
-            color: rgba(255, 255, 255, 0.9);
           }
         }
       }
@@ -532,4 +545,3 @@ export default Vue.extend({
   }
 }
 </style>
-

f/web-kboss/src/views/homePage/mainPage/logoG/logoTwo.vue

@@ -86,6 +86,7 @@ export default {
 /* 第二排反向滚动 */
 .row2 {
   animation: scrollReverse 40s linear infinite;
+  margin-top: 10px;
 }
 
 .child {
@@ -94,7 +95,7 @@ export default {
   height: 100%;
   margin-right: 20px;
   background: #fff;
-  border-radius: 4px;
+  border-radius: 10px;
   overflow: hidden;
 }