updata

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

@@ -338,7 +338,7 @@ export const asyncRoutes = [
     children: [
       {
         path: "",
-        component: () => import('../views/customer/orderManagement/index.vue'),
+        component: () => import('@/views/product/productHome/productIndex/index.vue'),
         name: 'ResourceOverview',
         meta: {
           title: "资源概览",

f/web-kboss/src/styles/index.css

@@ -78,17 +78,17 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+  background: #C6D7EB;
   border-radius: 6px;
   border: 1.5px solid #f8faff;
   box-shadow: 0 1px 4px rgba(99, 102, 241, 0.25);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(180deg, #818cf8 0%, #a78bfa 50%, #c084fc 100%);
+  background: #C6D7EB;
   box-shadow: 0 1px 6px rgba(99, 102, 241, 0.35);
 }
 
 ::-webkit-scrollbar-thumb:active {
-  background: linear-gradient(180deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
+  background: #C6D7EB;
 }

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

@@ -1,127 +1,161 @@
 <template>
   <div style="width: 100%;">
     <div class="banner">
-      <span v-if="JSON.stringify(logoInfoNew)!=='{}'" style="font-size: 38px">
+      <div v-if="JSON.stringify(logoInfoNew) !== '{}'" style="font-size: 38px;">
-       {{ logoInfoNew.home.bannerTitle }} <span style="color: #0e0b0b">{{ translations[language].slogan }}</span>
+        <!-- 开元云 标题 -->
-      </span>
+        <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">
-          <img v-if="JSON.stringify(logoInfoNew)!=='{}'"
+          <p class="leftBoxtitle">关于<span class="gradient-text">我们</span></p>
-               :src="logoInfoNew.home.logoImg"
+          <!-- <img v-if="JSON.stringify(logoInfoNew) !== '{}'" :src="logoInfoNew.home.logoImg" alt=""> -->
-               alt="">
         </div>
-        <div v-if="JSON.stringify(logoInfoNew)!=='{}'" class="rightBox">
+        <div v-if="JSON.stringify(logoInfoNew) !== '{}'" class="rightBox">
-          <p v-for="(i,index) in logoInfoNew.about.content" :key="index">
+          <p v-for="(i, index) in logoInfoNew.about.content" :key="index">
             {{ i }}
           </p>
         </div>
       </div>
     </div>
-
+    <!-- 公司资质 -->
     <div class="zizhi">
       <div style="width: 1400px;">
-        <div style="text-align:center;font-size: 26px;font-weight: bold;margin: 55px 0;width: 100%;margin-bottom: 50px">
+        <div style="text-align:center;font-size: 30px;font-weight: bold;margin: 55px 0;width: 100%;margin-bottom: 50px">
-          {{ translations[language].qualifications }}
+          公司<span class="gradient-text">资质</span>
         </div>
         <LogoTwo></LogoTwo>
       </div>
     </div>
-
+    <!-- 企业文化 -->
-    <div class="why">
+    <div class="enterprise">
-      <ul class="whyUl">
+      <div class="enterprise-inner">
-        <li>
+        <div class="left-box">
-          <span class="icon"><img src="./img/1.png" alt=""></span>
+          <div class="left-title">
-          <div class="title">{{ translations[language].mission }}</div>
+            <span>企业<span class="gradient-text">文化</span></span>
-          <div class="description">
+          </div>
-            <span style="color:#222F60;font-weight: bold;margin-bottom: 10px;display: flex;justify-content: center;align-items: center">
+        </div>
-              {{ translations[language].missionContent }}
+        <div class="right-box">
-            </span>
+          <div class="item">
+            <div class="item-img">
+              <img src="./img/sm.png" alt="使命图标">
+            </div>
+            <div class="item-content">
+              <div class="item-tit">
+                <div>使命</div>
+                <div>Mission</div>
+              </div>
+              <div class="item-text">
+                <p>让AI无处不在，让智能如此简单</p>
+              </div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="item-img">
+              <img src="./img/yj.png" alt="愿景图标">
+            </div>
+            <div class="item-content">
+              <div class="item-tit">
+                <div>愿景</div>
+                <div>Vision</div>
+              </div>
+              <div class="item-text">
+                <p>全球领先的AI服务运营商</p>
+              </div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="item-img">
+              <img src="./img/jzg.png" alt="价值观图标">
+            </div>
+            <div class="item-content">
+              <div class="item-tit">
+                <div>价值观</div>
+                <div>Value</div>
+              </div>
+              <div class="item-text">
+                <p>卓越、开放、创新</p>
+              </div>
+            </div>
           </div>
-        </li>
-        <li>
-          <span class="icon"><img src="./img/2.png" alt=""></span>
-          <div class="title">{{ translations[language].vision }}</div>
-          <div class="description">
-            <span style="color:#222F60;font-weight: bold;margin-bottom: 10px;display: flex;justify-content: center;align-items: center">
-              {{ translations[language].visionContent }}
-            </span>
         </div>
-        </li>
-        <li>
-          <span class="icon"><img src="./img/3.png" alt=""></span>
-          <div class="title">{{ translations[language].values }}</div>
-          <div class="description">
-            <span style="color:#222F60;font-weight: bold;margin-bottom: 10px;display: flex;justify-content: center;align-items: center">
-              {{ translations[language].valuesContent }}
-            </span>
       </div>
-        </li>
-      </ul>
     </div>
 
-    <div class="ad">
+    <!-- 优势 -->
-      <div style="text-align:center;font-size: 26px;font-weight: bold;margin: 55px 0;width: 100%;margin-bottom: 50px">
+    <div class="advantage">
-        {{ translations[language].platformAdvantages }}
+      <div class="advantage-tit">
+        <span>平台<span class="gradient-text">优势</span></span>
       </div>
-      <ul class="adUl">
+      <!-- 优势列表 -->
-        <li>
+      <div class="advantage-content">
-          <div class="iconBox">
+        <div class="advantage-grid">
-            <img src="./img/5.png" alt="">
+          <div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage1.png') + ')' }">
+            <div class="content-wrapper">
+              <div class="top-tit">
+                精准定位
               </div>
-          <div class="content">
+              <div class="btm-tit">
-            <span>{{ translations[language].advantage1Title }}</span>
+                专注于为各行业提供专业、高效的人工智能解决方案，助力企业智能化转型。
-            <span class="description">{{ translations[language].advantage1Desc }}</span>
               </div>
-        </li>
-        <li>
-          <div class="iconBox">
-            <img src="./img/6.png" alt="">
             </div>
-          <div class="content">
-            <span>{{ translations[language].advantage2Title }}</span>
-            <span class="description">{{ translations[language].advantage2Desc }}</span>
           </div>
-        </li>
+          <div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage2.png') + ')' }">
-        <li>
+            <div class="content-wrapper">
-          <div class="iconBox">
+              <div class="top-tit">
-            <img src="./img/7.png" alt="">
+                技术服务
               </div>
-          <div class="content">
+              <div class="btm-tit">
-            <span>{{ translations[language].advantage3Title }}</span>
+                提供人工智能相关的技术服务，为企业解决复杂的技术难题。
-            <span class="description">{{ translations[language].advantage3Desc }}</span>
               </div>
-        </li>
-        <li>
-          <div class="iconBox">
-            <img src="./img/4.png" alt="">
             </div>
-          <div class="content">
-            <span>{{ translations[language].advantage4Title }}</span>
-            <span class="description">{{ translations[language].advantage4Desc }}</span>
           </div>
-        </li>
+          <div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage3.png') + ')' }">
-        <li>
+            <div class="content-wrapper">
-          <div class="iconBox">
+              <div class="top-tit">
-            <img src="./img/2.png" alt="">
+                产品定制
               </div>
-          <div class="content">
+              <div class="btm-tit">
-            <span>{{ translations[language].advantage5Title }}</span>
+                根据企业的特定需求，定制开发人工智能产品，满足不同场景的应用需求。
-            <span class="description">{{ translations[language].advantage5Desc }}</span>
               </div>
-        </li>
-        <li>
-          <div class="iconBox">
-            <img src="./img/8.png" alt="">
             </div>
-          <div class="content">
-            <span>{{ translations[language].advantage6Title }}</span>
-            <span class="description">{{ translations[language].advantage6Desc }}</span>
           </div>
-        </li>
+          <div class="advantage-item" :style="{ backgroundImage: 'url(' + require('./img/advantage4.png') + ')' }">
-      </ul>
+            <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>
@@ -129,75 +163,14 @@
 <script>
 import Vue from 'vue'
 import LogoTwo from "@/views/homePage/mainPage/logoG/logoTwo.vue";
-import {mapGetters, mapState} from "vuex";
+import { mapGetters, mapState } from "vuex";
-// 导入语言管理
-import { languageStore, languageBus } from '@/utils/language'
 
 export default Vue.extend({
   name: "about",
-  components: {LogoTwo},
+  components: { LogoTwo },
   data() {
     return {
-      language: 'zh',
+      // 删除了language和translations相关数据
-      languageChangedHandler: null,
-      translations: {
-        zh: {
-          slogan: '全球领先的AI服务运营商',
-          qualifications: '公司资质',
-          mission: '使命',
-          missionContent: '让AI无处不在，让智能如此简单',
-          vision: '愿景',
-          visionContent: '全球领先的AI服务运营商',
-          values: '价值观',
-          valuesContent: '卓越、开放、创新',
-          platformAdvantages: '平台优势',
-          advantage1Title: '精准定位',
-          advantage1Desc: '专注于为各行业提供专业、高效的人工智能解决方案，助力企业智能化转型。',
-          advantage2Title: '技术服务',
-          advantage2Desc: '提供人工智能相关的技术服务，为企业解决复杂的技术难题。',
-          advantage3Title: '产品定制',
-          advantage3Desc: '根据企业的特定需求，定制开发人工智能产品，满足不同场景的应用需求。',
-          advantage4Title: '产业赋能',
-          advantage4Desc: '通过人工智能技术，为传统产业赋能，提升产业的竞争力和创新能力。',
-          advantage5Title: '一站式、本地化服务',
-          advantage5Desc: '从售前、售中到售后提供一站式全方位服务',
-          advantage6Title: '提供AI基础设施与模型服务',
-          advantage6Desc: '提供整体底层技术架构和系统支持及模型服务'
-        },
-        en: {
-          slogan: 'Leading AI Service Operator Worldwide',
-          qualifications: 'Company Qualifications',
-          mission: 'Mission',
-          missionContent: 'Make AI ubiquitous and intelligence so simple',
-          vision: 'Vision',
-          visionContent: 'Global Leading AI Service Operator',
-          values: 'Values',
-          valuesContent: 'Excellence, Openness, Innovation',
-          platformAdvantages: 'Platform Advantages',
-          advantage1Title: 'Precise Positioning',
-          advantage1Desc: 'Focus on providing professional and efficient AI solutions for various industries to help enterprises achieve intelligent transformation.',
-          advantage2Title: 'Technical Services',
-          advantage2Desc: 'Provide AI-related technical services to help enterprises solve complex technical problems.',
-          advantage3Title: 'Product Customization',
-          advantage3Desc: 'Customize AI products according to specific enterprise needs to meet application requirements in different scenarios.',
-          advantage4Title: 'Industry Empowerment',
-          advantage4Desc: 'Empower traditional industries through AI technology, enhancing industry competitiveness and innovation capability.',
-          advantage5Title: 'One-stop, Localized Service',
-          advantage5Desc: 'Provide comprehensive one-stop services from pre-sales to after-sales',
-          advantage6Title: 'AI Infrastructure & Model Services',
-          advantage6Desc: 'Provide overall underlying technical architecture, system support, and model services'
-        }
-      }
-    }
-  },
-  created() {
-    // 修复：确保从共享状态获取当前语言
-    this.initLanguage()
-  },
-  beforeDestroy() {
-    // 移除事件监听
-    if (this.languageChangedHandler) {
-      languageBus.$off('language-changed', this.languageChangedHandler)
     }
   },
   computed: {
@@ -222,41 +195,29 @@ export default Vue.extend({
     },
   },
   methods: {
-    // 初始化语言状态
+    // 删除了initLanguage方法
-    initLanguage() {
-      // 直接从store获取当前语言，确保一致性
-      this.language = languageStore.getLanguage()
-      console.log('about页面初始化语言:', this.language)
-
-      // 保存事件处理函数的引用，以便正确移除
-      this.languageChangedHandler = (lang) => {
-        console.log('about页面接收到语言变化:', lang)
-        this.language = lang
-      }
-
-      // 监听语言变化事件
-      languageBus.$on('language-changed', this.languageChangedHandler)
-    }
   }
 })
 </script>
 
 <style scoped lang="scss">
 .banner {
-  background: url("./img/banner.png") no-repeat center center;
+  background: url("./img/Newbanner.png") no-repeat top center;
   display: flex;
   justify-content: center;
   background-size: cover;
   align-items: center;
-  height: 250px;
+  height: 500px;
   flex-direction: column;
   font-weight: bold;
-  span {
+
+  div {
     background: linear-gradient(to right, #275AFF, #2EBDFA);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     display: inline-block;
+    text-align: center;
   }
 }
 
@@ -266,6 +227,7 @@ export default Vue.extend({
   justify-content: flex-start;
   align-items: center;
   flex-direction: column;
+  background: linear-gradient(180deg, #fff 0%, #f6f8fd 40%, #fff 100%);
 
   .inBox {
     display: flex;
@@ -276,6 +238,14 @@ export default Vue.extend({
     .leftBox {
       width: 25%;
       height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+
+      .leftBoxtitle {
+        font-size: 30px;
+        font-weight: bold;
+      }
 
       img {
         width: 300px;
@@ -290,105 +260,275 @@ export default Vue.extend({
   }
 }
 
-.why {
+/* 企业文化部分样式 */
+.enterprise {
   width: 100%;
+  background: linear-gradient(180deg, #d7e9ff 0%, #fff 100%);
+  padding: 80px 0;
   display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  height: 500px;
-  background: url("./img/jiajiebg.png");
-  background-position: center;
-  background-size: cover;
-
-  .whyUl {
-    padding-top: 90px;
-    width: 1300px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-
-    li {
-      width: 280px;
-      height: 310px;
-      background: white;
-      display: flex;
-      flex-direction: column;
   justify-content: center;
   align-items: center;
-      padding: 0 20px;
 
-      img {
+  .enterprise-inner {
-        width: 47px;
-        height: 45px;
-      }
-
-      .title {
-        margin: 15px 0;
-        font-size: 26px;
-        font-weight: bold;
-      }
-
-      .description {
-        color: #999;
-        font-size: 14px;
-        line-height: 2;
-      }
-    }
-  }
-}
-
-.ad {
-  flex-direction: column;
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-
-  .adUl {
     width: 1400px;
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      margin-bottom: 45px;
-      display: flex;
-      justify-content: flex-start;
     align-items: center;
-      width: 30% !important;
-      max-width: 30%;
-      padding-right: 15px;
 
-      .content {
+    .left-box {
+      width: 25%;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+
+      .left-title {
+        font-size: 30px;
+        font-weight: bold;
+        display: flex;
+        justify-content: center;
+      }
+    }
+
+    .right-box {
+      width: 70%;
       display: flex;
       flex-direction: column;
-        justify-content: space-around;
+      gap: 40px;
-        align-items: flex-start;
-        padding-left: 15px;
-        font-size: 16px;
 
-        .description {
+      .item {
-          margin-top: 8px;
+        display: flex;
-          color: #666;
+        align-items: center;
-          font-size: 14px;
+        border-radius: 12px;
-          line-height: 1.5;
+        padding: 30px;
-        }
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+        transition: all 0.3s ease;
+
+        &:hover {
+          transform: translateY(-5px);
+          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
         }
 
+        .item-img {
+          flex-shrink: 0;
+          margin-right: 25px;
+
           img {
-        width: 50px;
+            width: 70px;
-        height: 50px;
+            height: 70px;
+            object-fit: contain;
+          }
+        }
+
+        .item-content {
+          flex: 1;
+          display: flex;
+          align-items: center;
+
+          .item-tit {
+            margin-bottom: 15px;
+
+            div:first-child {
+              font-size: 24px;
+              font-weight: bold;
+              color: #333;
+              margin-right: 15px;
+            }
+
+            div:last-child {
+              font-size: 16px;
+              color: #666;
+              font-style: italic;
+            }
+          }
+
+          .item-text {
+            margin-left: 40px;
+
+            p {
+              font-size: 18px;
+              line-height: 1.6;
+              color: #444;
+              margin: 0;
+            }
+          }
+        }
       }
     }
   }
 }
 
+
 .zizhi {
+  height: 900px;
   width: 100%;
+  background: url("./img/zizhi.png") no-repeat;
+  background-size: 100% 100%;
   padding-bottom: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
+/* 新增渐变文字样式 */
+.gradient-text {
+  background: linear-gradient(to right, #0066FF, #66CCFF);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  display: inline-block;
+}
+
+// 优势样式
+.advantage {
+  padding: 80px 0;
+  background:#fff;
+
+  .advantage-tit {
+    text-align: center;
+    font-size: 30px;
+    font-weight: bold;
+    margin-bottom: 60px;
+  }
+
+  .advantage-content {
+    display: flex;
+    justify-content: center;
+
+    .advantage-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 30px;
+      width: 1200px;
+
+      .advantage-item {
+        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;
+        flex-direction: column;
+        justify-content: center;
+        overflow: hidden;
+        cursor: pointer;
+
+        /* 背景图设置 */
+        background-size: cover !important;
+        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 {
+          font-size: 22px;
+          font-weight: bold;
+          margin-bottom: 15px;
+          color: #333;
+          transition: all 0.3s ease;
+        }
+
+        .btm-tit {
+          font-size: 16px;
+          line-height: 1.6;
+          color: #666;
+          transition: all 0.3s ease;
+        }
+
+        /* 悬停状态：蓝色半透明遮罩，白色文字 */
+        &:hover {
+          transform: translateY(-5px);
+          box-shadow: 0 8px 25px rgba(0, 102, 255, 0.2);
+
+          &::before {
+            background: rgba(0, 102, 255, 0.9);
+          }
+
+          .top-tit {
+            color: #fff;
+          }
+
+          .btm-tit {
+            color: rgba(255, 255, 255, 0.9);
+          }
+        }
+      }
+    }
+  }
+}
+
+/* 响应式设计 - 适配不同屏幕尺寸 */
+@media (max-width: 1200px) {
+  .mainBox .inBox,
+  .enterprise .enterprise-inner,
+  .advantage-content .advantage-grid {
+    width: 95% !important;
+  }
+
+  .advantage-content .advantage-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .banner {
+    height: 300px;
+    font-size: 28px !important;
+
+    p {
+      font-size: 16px;
+    }
+  }
+
+  .mainBox .inBox {
+    flex-direction: column;
+
+    .leftBox, .rightBox {
+      width: 100% !important;
+    }
+
+    .leftBox {
+      margin-bottom: 30px;
+    }
+  }
+
+  .enterprise .enterprise-inner {
+    flex-direction: column;
+
+    .left-box, .right-box {
+      width: 100% !important;
+    }
+
+    .left-box {
+      margin-bottom: 40px;
+      justify-content: flex-start;
+    }
+  }
+
+  .zizhi {
+    height: auto;
+    padding: 50px 0;
+  }
+
+  .advantage-item {
+    height: 160px !important;
+  }
+}
 </style>

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

@@ -1,13 +1,24 @@
 <template>
   <div class="parent">
     <div class="container-wrapper">
-      <div class="container">
+      <!-- 第一排 - 前8张图片 -->
-        <!-- 第一组图片 -->
+      <div class="container row1">
-        <div v-for="(image, index) in images" :key="index" class="child">
+        <div v-for="(image, index) in firstRowImages" :key="index" class="child">
           <img :src="image" alt="logo"/>
         </div>
-        <!-- 第二组相同的图片（用于无缝衔接） -->
+        <!-- 重复第一组图片（用于无缝衔接） -->
-        <div v-for="(image, index) in images" :key="'dup-'+index" class="child">
+        <div v-for="(image, index) in firstRowImages" :key="'dup-'+index" class="child">
+          <img :src="image" alt="logo"/>
+        </div>
+      </div>
+
+      <!-- 第二排 - 其余图片 -->
+      <div class="container row2">
+        <div v-for="(image, index) in secondRowImages" :key="'second-'+index" class="child">
+          <img :src="image" alt="logo"/>
+        </div>
+        <!-- 重复第二组图片（用于无缝衔接） -->
+        <div v-for="(image, index) in secondRowImages" :key="'second-dup-'+index" class="child">
           <img :src="image" alt="logo"/>
         </div>
       </div>
@@ -19,8 +30,7 @@
 export default {
   name: 'LogoCarousel',
   data() {
-    return {
+    const allImages = [
-      images: [
       require('./img/zizhi/img.png'),
       require('./img/zizhi/img_1.png'),
       require('./img/zizhi/img_2.png'),
@@ -39,7 +49,11 @@ export default {
       require('./img/zizhi/img_16.png'),
       require('./img/zizhi/img_17.png'),
       require('./img/zizhi/img_18.png')
-      ]
+    ];
+
+    return {
+      firstRowImages: allImages.slice(0, 8), // 前8张图片
+      secondRowImages: allImages.slice(8)    // 其余图片
     }
   }
 }
@@ -48,7 +62,7 @@ export default {
 <style scoped>
 .parent {
   width: 100%;
-  height: 280px;
+  height: 400px;
   overflow: hidden;
   position: relative;
 }
@@ -57,15 +71,23 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+    padding: 15px 0;
 }
 
 .container {
   display: inline-flex;
-  height: 100%;
+  height: 50%;
   animation: scroll 45s linear infinite;
   white-space: nowrap;
 }
 
+/* 第二排反向滚动 */
+.row2 {
+  animation: scrollReverse 40s linear infinite;
+}
+
 .child {
   flex: 0 0 auto;
   width: 300px;
@@ -80,7 +102,7 @@ export default {
   width: 100%;
   height: 100%;
   object-fit: contain;
-  padding: 10px; /* 可选内边距 */
+  padding: 10px;
   box-sizing: border-box;
 }
 
@@ -92,4 +114,13 @@ export default {
     transform: translateX(-50%);
   }
 }
+
+@keyframes scrollReverse {
+  0% {
+    transform: translateX(-50%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
 </style>

f/web-kboss/src/views/product/index.vue

@@ -7,12 +7,14 @@
           <el-form :model="form" label-width="100px">
             <el-form-item label="产品区域:">
               <el-radio-group v-model="form.product_area" size="small" @input="searchProduct">
-                <el-radio-button :label="item" :value="item" v-for="(item, index) in product_area" :key="index"></el-radio-button>
+                <el-radio-button :label="item" :value="item" v-for="(item, index) in product_area"
+                  :key="index"></el-radio-button>
               </el-radio-group>
             </el-form-item>
             <el-form-item label="产品类型:">
               <el-radio-group v-model="form.ptype" size="small" @input="searchProduct">
-                <el-radio-button :label="item" :value="item" v-for="(item, index) in ptype" :key="index"></el-radio-button>
+                <el-radio-button :label="item" :value="item" v-for="(item, index) in ptype"
+                  :key="index"></el-radio-button>
               </el-radio-group>
               <el-button type="primary" size="small" style="margin-left: 10px" @click="resetSearch">重置</el-button>
             </el-form-item>
@@ -20,12 +22,13 @@
         </el-card>
       </div>
       <!-- v-infinite-scroll="load" -->
-      <div class="productBig" >
+      <div class="productBig">
         <el-card class="productList" v-for="(item, index) in this.discountProductList" :key="index">
           <div slot="header" class="cardHeader">
             <span>
               {{ item.name }}
-              <el-button style="float: right; margin-left: 5px" type="primary" size="small" @click="payFirst(item)">购买</el-button>
+              <el-button style="float: right; margin-left: 5px" type="primary" size="small"
+                @click="payFirst(item)">购买</el-button>
               <!-- <el-button style="float: right" type="primary" size="small" @click="inShoppingCard(item)">加入购物车</el-button> -->
             </span>
           </div>
@@ -70,7 +73,7 @@
             </el-row>
             <el-row :span="24">
               <el-col :span="12" class="productDiscription">
-                <span >规格说明:</span>
+                <span>规格说明:</span>
                 <div style="width: 80%;display: flex">{{ item.spec_note }}</div>
               </el-col>
               <el-col :span="6" class="productDiscription">
@@ -88,7 +91,8 @@
     </div>
 
     <!-- 立即购买弹窗 -->
-    <el-dialog :title="title + productDetail.name" :visible.sync="dialogVisible" width="30%" class="myDialog" :before-close="close">
+    <el-dialog :title="title + productDetail.name" :visible.sync="dialogVisible" width="30%" class="myDialog"
+      :before-close="close">
       <el-form ref="payForm" :model="productDetail" label-width="100px" :rules="payForm">
         <div style="overflow-y: scroll; height: 400px">
           <el-form-item label="产品描述:">
@@ -106,32 +110,40 @@
 
           <div id="renderMoban" v-if="isShow">
             <el-form-item label="路由数:" prop="route_num">
-              <el-select v-model="productDetail.route_num" placeholder="请选择路由数" @change="searchMoney(productDetail.route_num)">
+              <el-select v-model="productDetail.route_num" placeholder="请选择路由数"
-                <el-option v-for="(item,index) in route_numList" :key="index" :label="item.route_num" :value="item.route_num">
+                @change="searchMoney(productDetail.route_num)">
+                <el-option v-for="(item, index) in route_numList" :key="index" :label="item.route_num"
+                  :value="item.route_num">
                 </el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="带宽:" prop="broadband">
-              <el-select v-model="productDetail.broadband" placeholder="请选择带宽" @change="searchMoney(productDetail.broadband)">
+              <el-select v-model="productDetail.broadband" placeholder="请选择带宽"
-                <el-option v-for="(item,index) in broadbandList" :key="index" :label="item.broadband" :value="item.broadband">
+                @change="searchMoney(productDetail.broadband)">
+                <el-option v-for="(item, index) in broadbandList" :key="index" :label="item.broadband"
+                  :value="item.broadband">
                 </el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="高校:" prop="high_school">
-              <el-select v-model="productDetail.high_school" placeholder="请选择高校" @change="searchMoney(productDetail.high_school)">
+              <el-select v-model="productDetail.high_school" placeholder="请选择高校"
-                <el-option v-for="(item,index) in schoolList" :key="index" :label="item.name" :value="item.name">
+                @change="searchMoney(productDetail.high_school)">
+                <el-option v-for="(item, index) in schoolList" :key="index" :label="item.name" :value="item.name">
                 </el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="超算中心:" prop="chaosuan_center">
-              <el-select v-model="productDetail.chaosuan_center" placeholder="请选择超算中心" @change="searchMoney(productDetail.chaosuan_center)">
+              <el-select v-model="productDetail.chaosuan_center" placeholder="请选择超算中心"
-                <el-option v-for="(item,index) in chaosuan_centerList" :key="index" :label="item.name" :value="item.name">
+                @change="searchMoney(productDetail.chaosuan_center)">
+                <el-option v-for="(item, index) in chaosuan_centerList" :key="index" :label="item.name"
+                  :value="item.name">
                 </el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="距离:" @change="searchMoney(productDetail.distance)">
               <el-select v-model="productDetail.distance" placeholder="请选择距离" disabled>
-                <el-option v-for="(item,index) in distanceList" :key="index" :label="item.distance" :value="item.distance">
+                <el-option v-for="(item, index) in distanceList" :key="index" :label="item.distance"
+                  :value="item.distance">
                 </el-option>
               </el-select>
             </el-form-item>
@@ -191,8 +203,8 @@
                     <el-col :span="21" class="payTypeList">
                       <div class="bigDiv">
                         <div class="divSon" v-for="item in payTypeList" :key="item.index" @mouseenter="changeColor">
-                          <div class="divSonItem" @click="payType(item.index)">{{item.payType}}</div>
+                          <div class="divSonItem" @click="payType(item.index)">{{ item.payType }}</div>
-                          <div class="divSonTitle">{{item.title}}</div>
+                          <div class="divSonTitle">{{ item.title }}</div>
                         </div>
                       </div>
                       <div class="attention">
@@ -216,14 +228,15 @@
                       <!-- <span>如何选择地域</span> -->
                     </el-col>
                     <el-col :span="21" class="aereList">
-                      <el-button size="small" :round="false" @click="DistrictShow">华东1(杭州) <i class="el-icon-caret-bottom"></i></el-button>
+                      <el-button size="small" :round="false" @click="DistrictShow">华东1(杭州) <i
+                          class="el-icon-caret-bottom"></i></el-button>
                       <div class="discrption">不同地域的实例之间内网互不相通；选择靠近您客户的地域，可降低网络时延、提高您客户的访问速度</div>
                       <div class="aereDiv" v-if="isDistrictShow">
                         <div>
                           <span>亚太-中国</span>
                           <el-row :gutter="5" v-for="item in Asia_China" :key="item.RegionId">
                             <el-col :span="8">
-                              <span>{{item.LocalName}}</span>
+                              <span>{{ item.LocalName }}</span>
                             </el-col>
                           </el-row>
                         </div>
@@ -668,21 +681,23 @@ export default {
   // background-color: rgba(240, 241, 244);
   border: 0;
 }
+
 .box {
   height: 100vh;
+
   .product {
     .search {
       // position: fixed;
       top: 10%;
     }
+
     .productBig {
       .productList {
         // height:calc(100vh-300px);
 
         margin-top: 5px;
         padding: 25px;
-        .cardHeader {
+
-        }
            .cardBody {
           font-size: 14px;
           // font-weight: 600;
@@ -699,16 +714,19 @@ export default {
               font-size: 26px;
               font-weight: 600;
             }
+
             .discountPrice {
               color: #f00606;
               font-size: 26px;
               font-weight: 600;
               margin-right: 10px;
             }
+
             .price {
               text-decoration: line-through;
               margin-right: 10px;
             }
+
             .discount {
               height: 30px;
               width: 70px;
@@ -721,44 +739,54 @@ export default {
       }
     }
   }
+
   .aLiDialog {
     // background-color: rgb(99, 100, 100);
     overflow-y: scroll;
+
     .buy {
       font-size: 12px;
       padding-left: 10%;
       padding-right: 10%;
       border: 1px solid red;
+
       .content {
         .left {
           .payType {
             .payTypeTitle {
               padding-top: 15px;
+
               .payTypeItem {
                 font-weight: 600;
+
                 .light {
                   font-size: 12px;
                 }
               }
             }
+
             .payTypeList {
               .bigDiv {
                 display: flex;
+
                 .divSon {
                   display: flex;
                   flex-direction: column;
                   border: 1px solid #cbcbcb;
                   margin-right: 30px;
                   padding: 10px;
+
                   .divSonItem {
                     font-weight: 600;
                     cursor: pointer;
                   }
+
                   .divSonTitle {
                     color: #787e80;
                   }
                 }
               }
+
               .attention {
                 display: flex;
                 padding-top: 5px;
@@ -770,6 +798,7 @@ export default {
                   height: 30px;
                   line-height: 30px;
                 }
+
                 .explain {
                   color: #787e80;
                   height: 30px;
@@ -779,31 +808,34 @@ export default {
               }
             }
           }
+
           .aere {
             .aereCol {
               padding-top: 20px;
+
               .aereSpan {
                 font-weight: 600;
               }
             }
+
             .aereList {
               margin-top: 5px;
+
               .discrption {
                 color: #787e80;
                 padding-top: 3px;
               }
+
               .aereDiv {
                 border: 1px solid #cbcbcb;
               }
             }
-            .network {
+
-              .networkItem {
+
           }
         }
-          }
+
-        }
+
-        .right {
-        }
       }
     }
   }

f/web-kboss/src/views/product/mainPage/index.vue

@@ -5,12 +5,14 @@
         <div class="bigTitle">快捷导航</div>
         <ul class="recUl">
           <li v-for="(item,index) in navList" :key="index" @click="goBaidu(item)">
-            <i :class="item.icon || 'el-icon-link'"></i>
+            <!-- 修改这里：使用img标签替换i标签 -->
+            <img :src="getNavIcon(index)" class="nav-icon" alt="icon" />
             {{ item.name }}
           </li>
         </ul>
       </div>
 
+      <!-- 其他部分保持不变 -->
       <div class="section">
         <div class="bigTitle">资源概览</div>
         <ul class="recUl overView">
@@ -52,6 +54,7 @@
       </div>
     </div>
 
+    <!-- 右侧部分保持不变 -->
     <div class="rightBox">
       <div class="user card">
         <div class="userImg">
@@ -108,7 +111,10 @@ import { reqNewHomeResource, reqNewHomeResourceWarning, reqQuickNav } from "@/ap
 import { editReachargelogAPI } from "@/api/finance/customerRechargeManagement";
 import { getUnreadmsgAPI } from "@/api/login";
 import MessageCenter from '@/components/MessageCenter/MessageCenter.vue';
-
+import icon1 from '@/assets/image/icon1.png';
+import icon2 from '@/assets/image/icon2.png';
+import icon3 from '@/assets/image/icon3.png';
+import icon4 from '@/assets/image/icon4.png';
 export default Vue.extend({
   name: "mainPage",
   components: {
@@ -132,7 +138,9 @@ export default Vue.extend({
         { name: '处理中', count: 7 },
         { name: '站内信', count: 0 }
       ],
-      messageCenterVisible: false
+      messageCenterVisible: false,
+      // 添加图标路径数组
+      navIcons: [icon1, icon2, icon3, icon4]
     }
   },
   created() {
@@ -172,6 +180,12 @@ export default Vue.extend({
         }
       })
     },
+    // 添加获取导航图标的方法
+    getNavIcon(index) {
+      // 如果导航项数量超过图标数量，循环使用图标
+      const iconIndex = index % this.navIcons.length;
+      return this.navIcons[iconIndex];
+    },
     async initMybalance() {
       const res = await editReachargelogAPI()
       if (res.status) {
@@ -202,19 +216,16 @@ export default Vue.extend({
 
         switch(todoName) {
           case '待支付':
-            // 待支付：显示未支付和续费的数据
             query = {
-              filterType: 'processing'  // 使用明确的标识
+              filterType: 'processing'
             };
             break;
           case '待续费':
-            // 待续费：只显示续费的数据
             query = {
               filterType: 'pendingPayment'
             };
             break;
           case '处理中':
-            // 处理中：显示未支付的数据
             query = {
               filterType: 'processing'
             };
@@ -255,7 +266,6 @@ export default Vue.extend({
   text-align: center;
 }
 
-
 .mainBox {
   background: #f5f7fa;
   width: 100%;
@@ -330,12 +340,21 @@ export default Vue.extend({
     justify-content: center;
     min-width: 0;
 
-    i {
+    // 修改这里：为图片添加样式
-      font-size: 24px;
+    .nav-icon {
+      width: 24px;
+      height: 24px;
       margin-bottom: 10px;
-      color: #409eff;
+      object-fit: contain;
     }
 
+    // 移除原来的图标样式
+    // i {
+    //   font-size: 24px;
+    //   margin-bottom: 10px;
+    //   color: #409eff;
+    // }
+
     &:hover {
       transform: translateY(-3px);
       box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);