updata

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

@@ -12,7 +12,7 @@ body{
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
   overflow-y:hidden;
- 	
+
 }
 label {
   font-weight: 700;

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

@@ -1,3 +1,4 @@
+让图标始终是对其的状态 让布局规整些
 <template>
   <div class="main-page">
     <!-- banner图 -->
@@ -11,6 +12,7 @@
         </p>
       </div>
     </div>
+
     <!-- 云筑企业基座 -->
     <div class="base-box">
       <div class="text">
@@ -19,33 +21,30 @@
       </div>
       <!-- 内容 -->
       <div class="content">
-        <div class="item-box" v-for="(item, index) in baseData" :key="index">
+        <div class="item-box" v-for="(item, key) in baseData" :key="key">
-          <!-- 标题 -->
+          <div class="item-title">{{ item.title }}</div>
-          <div class="item-title">
+          <div class="item-description">{{ item.description }}</div>
-            {{ item.title }}
-          </div>
-          <!-- 介绍 -->
-          <div class="item-description">
-            {{ item.description }}
-          </div>
-          <!-- 内容 -->
-          <div class="item-content">
-            {{ item.content }}
-          </div>
-          <div class="icon-box">
 
+          <!-- 优势列表 -->
+          <div class="advantage-list" v-if="item.list && item.list.length">
+            <div class="advantage-item" v-for="listItem in item.list" :key="listItem.id">
+              <img v-if="listItem.icon" :src="getIconPath(listItem.icon)" alt="" class="advantage-icon" />
+              <span v-if="listItem.name" class="advantage-name">{{ listItem.name }} : </span>
+              <span class="advantage-content">{{ listItem.content }}</span>
+            </div>
           </div>
-          <!-- 价格 -->
+
           <div class="item-price">
-            <span class="price-icon">￥</span> <span class="price">{{ item.price }}</span> 台/月
+            <span class="price-icon">￥</span>
+            <span class="price">{{ item.price }}</span> {{ item.price_unit }}
           </div>
-          <!-- 按钮 -->
           <div class="item-button">
             <div class="item-button-text">立即咨询</div>
           </div>
         </div>
       </div>
     </div>
+
     <!-- 智算未来征程 -->
     <div class="journey-box">
       <div class="text">
@@ -54,33 +53,30 @@
       </div>
       <!-- 内容 -->
       <div class="content">
-        <div class="item-box" v-for="(item, index) in baseData" :key="index">
+        <div class="item-box" v-for="(item, key) in journeyData" :key="key">
-          <!-- 标题 -->
+          <div class="item-title">{{ item.title }}</div>
-          <div class="item-title">
+          <div class="item-description">{{ item.description }}</div>
-            {{ item.title }}
-          </div>
-          <!-- 介绍 -->
-          <div class="item-description">
-            {{ item.description }}
-          </div>
-          <!-- 内容 -->
-          <div class="item-content">
-            {{ item.content }}
-          </div>
-          <div class="icon-box">
 
+          <!-- 优势列表 -->
+          <div class="advantage-list" v-if="item.list && item.list.length">
+            <div class="advantage-item" v-for="listItem in item.list" :key="listItem.id">
+              <img v-if="listItem.icon" :src="getIconPath(listItem.icon)" alt="" class="advantage-icon" />
+              <span v-if="listItem.name" class="advantage-name">{{ listItem.name }}：</span>
+              <span class="advantage-content">{{ listItem.content }}</span>
+            </div>
           </div>
-          <!-- 价格 -->
+
           <div class="item-price">
-            <span class="price-icon">￥</span> <span class="price">{{ item.price }}</span> 台/月
+            <span class="price-icon">￥</span>
+            <span class="price">{{ item.price }}</span> {{ item.price_unit }}
           </div>
-          <!-- 按钮 -->
           <div class="item-button">
             <div class="item-button-text">立即咨询</div>
           </div>
         </div>
       </div>
     </div>
+
     <!-- 网织智能经纬 -->
     <div class="latitude-box">
       <div class="text">
@@ -89,27 +85,30 @@
       </div>
       <!-- 内容 -->
       <div class="content">
-        <div class="item-box" v-for="(item, index) in baseData" :key="index">
+        <div class="item-box" v-for="(item, key) in latitude" :key="key">
-          <!-- 标题 -->
+          <div class="item-title">{{ item.title }}</div>
-          <div class="item-title">
+          <div class="item-description">{{ item.description }}</div>
-            {{ item.title }}
-          </div>
-          <!-- 介绍 -->
-          <div class="item-description">
-            {{ item.description }}
-          </div>
-          <!-- 内容 -->
-          <div class="item-content">
-            {{ item.content }}
-          </div>
-          <div class="icon-box">
 
+          <!-- 优势列表 -->
+          <div class="advantage-list" v-if="item.advantageList && item.advantageList.length">
+            <div class="advantage-item" v-for="advantage in item.advantageList" :key="advantage.id">
+              <img v-if="advantage.icon" :src="getIconPath(advantage.icon)" alt="" class="advantage-icon" />
+              <span class="advantage-name">{{ advantage.name }}：</span>
+              <span class="advantage-content">{{ advantage.content }}</span>
+            </div>
           </div>
-          <!-- 价格 -->
+
-          <div class="item-price">
+          <!-- 标签列表 - 添加边框 -->
-            <span class="price-icon">￥</span> <span class="price">{{ item.price }}</span> 台/月
+          <div class="tag-list" v-if="item.tagList && item.tagList.length">
+            <span
+              class="tag-item"
+              v-for="tag in item.tagList"
+              :key="tag.id"
+            >
+              {{ tag.name }}
+            </span>
           </div>
-          <!-- 按钮 -->
+
           <div class="item-button">
             <div class="item-button-text">立即咨询</div>
           </div>
@@ -117,7 +116,7 @@
       </div>
     </div>
 
-    <!-- 合作机构 -->
+    <!-- 合作伙伴 -->
     <div class="partner">
       <div class="text">
         <p class="text-top">合作伙伴</p>
@@ -134,18 +133,65 @@
         </div>
       </div>
     </div>
+
+    <!-- footer -->
+    <div class="footer">
+      <div class="left-box">
+        <div class="logo-footer">
+          <img :src="logoImg" alt="公司logo" v-if="logoImg">
+          <img src="@/assets/kyy/LOGO.png" alt="公司logo" class="img" v-else>
+        </div>
+        <div class="content-main">
+          <ul>
+            <li>地址: {{ address }}</li>
+            <li>电话：400-6150805 &nbsp;&nbsp;&nbsp;&nbsp;
+              <span class="phone-number">010-65917875</span>
+            </li>
+            <li>邮箱：Open-computing@kaiyuancloud.cn</li>
+            <li>IPC备案号: {{ ICP }}
+              <span class="copyright">版权所有 @kaiyuanyun 2023</span>
+            </li>
+            <li>
+              <img src="@/image/login/policeInsignia/policeInsignia.png" alt="公安备案图标" class="police-icon">
+              <a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010502054007" rel="noreferrer" target="_blank"
+                class="police-link">京公网安备11010502054007</a>
+              <span>
+                <router-link tag="a" target="_blank" class="license-link"
+                  :to="{ name: 'homePageImage' }">经营许可证:京B2-20232313</router-link>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="qr-box">
+          <div class="qr-code">
+            <img src="@/assets/kyy/客服wechat.png" alt="微信客服二维码">
+          </div>
+          <span class="qr-content">微信客服</span>
+        </div>
+        <div class="qr-box qr-box-margin">
+          <div class="qr-code">
+            <img src="@/assets/kyy/kyy公众号.jpg" alt="公众号二维码">
+          </div>
+          <span class="qr-content">扫描关注二维码</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { reqHotProduct } from '@/api/H5/index.js'
+import { getLogoAPI } from "@/api/login"
 
 export default {
+  name: 'MainPage',
   data() {
     return {
-      baseData: [],
+      baseData: {},
-      journeyData: [],
+      journeyData: {},
-      latitude: [],
+      latitude: {},
       images: [
         require('../images/top/img.png'),
         require('../images/top/img_1.png'),
@@ -156,7 +202,13 @@ export default {
         require('../images/top/img_6.png'),
         require('../images/top/img_8.png'),
         require('../images/top/img_9.png')
-      ]
+      ],
+      logoImg: require("@/assets/logo/colorLogo.png"),
+      logoText: "开元云(北京)科技有限公司",
+      url: window.location.href,
+      photosUrl: [],
+      ICP: "京ICP备2022001945号-1",
+      address: "农业展览馆13号瑞辰国际中心518B(团结湖地铁站c东南口步行420米)"
     }
   },
   computed: {
@@ -165,34 +217,109 @@ export default {
     }
   },
   created() {
-    this.getHotProduct()
+    this.loadData()
   },
   methods: {
+    async loadData() {
+      try {
+        await this.getHotProduct()
+        await this.getCompanyInfo()
+      } catch (error) {
+        console.error('数据加载失败:', error)
+      }
+    },
+
     async getHotProduct() {
       const res = await reqHotProduct()
-      console.log('数据', res);
+      console.log('热门产品数据', res)
-      if (res.status == true) {
+
-        this.baseData = res.data.base
+      if (res.status) {
-        this.journeyData = res.data.suan
+        // 直接使用对象结构
-        this.latitude = res.data.net
+        this.baseData = res.data.base || {}
+        this.journeyData = res.data.suan || {}
+        this.latitude = res.data.net || {}
+      }
+    },
+
+    async getCompanyInfo() {
+      const params = {
+        url_link: this.parseURL(this.url)
+      }
+
+      const res = await getLogoAPI(params)
+
+      if (res.status && res.data && res.data.length) {
+        this.photosUrl = res.data[0]
+
+        if (this.photosUrl.orgname !== '业主机构') {
+          this.logoImg = this.photosUrl.logo || this.logoImg
+          this.logoText = this.photosUrl.orgname || this.logoText
+          this.ICP = this.photosUrl.license_number || this.ICP
+          this.address = this.photosUrl.address || this.address
+        }
+      } else {
+        this.showErrorMessage(res.msg || '获取公司信息失败')
+      }
+    },
+
+    parseURL(url) {
+      if (url.includes("#")) {
+        return url.split("#")[0]
+      }
+      return url
+    },
+
+    showErrorMessage(message) {
+      this.$message({
+        message,
+        type: "error"
+      })
+    },
+
+    // 获取图标路径
+    getIconPath(iconPath) {
+      // 如果图标路径是绝对路径或网络路径，直接返回
+      if (iconPath.startsWith('http') || iconPath.startsWith('//') || iconPath.startsWith('data:')) {
+        return iconPath
+      }
+      // 如果是相对路径，尝试使用 require 加载
+      try {
+        // 注意：这里可能需要根据实际路径调整
+        // 假设图标在 @/views/homePage/mainPage/ 目录下
+        return require(`@/views/homePage/mainPage/${iconPath}`)
+      } catch (e) {
+        console.warn('图标加载失败:', iconPath)
+        return ''
       }
     }
   }
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
-* {
+html, body {
-  margin: 0;
-  padding: 0;
-  font-size: 16px;
   box-sizing: border-box;
-}
-.main-page {
   width: 100%;
   height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+body {
+  overflow-y: auto !important;
   background-color: #f8fafd;
 }
+</style>
+
+<style lang="less" scoped>
+.main-page {
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f8fafd;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
 
 .top-box {
   width: 100%;
@@ -229,7 +356,6 @@ export default {
   }
 }
 
-// 子项标题
 .text {
   display: flex;
   flex-direction: column;
@@ -244,17 +370,14 @@ export default {
   }
 
   .text-btm {
-    margin-top: .14rem;
     font-size: .18rem;
     color: #707070;
   }
 }
 
-// 云筑企业基座
 .base-box,
 .journey-box,
 .latitude-box {
-
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -287,13 +410,37 @@ export default {
         font-size: 0.14rem;
         color: #666;
         margin-bottom: 0.15rem;
+        line-height: 1.4;
       }
 
-      .item-content {
+      .advantage-list {
-        font-size: 0.14rem;
+        margin: 0.1rem 0;
-        color: #333;
+        .advantage-item {
-        line-height: 1.4;
+          display: flex;
-        flex: 1;
+          align-items: flex-start;
+          font-size: 0.12rem;
+          color: #666;
+          margin-bottom: 0.08rem;
+          line-height: 1.4;
+
+          .advantage-icon {
+            width: 0.16rem;
+            height: 0.16rem;
+            margin-right: 0.05rem;
+            flex-shrink: 0;
+          }
+
+          .advantage-name {
+            color: #000;
+            font-weight: 500;
+            white-space: nowrap;
+            margin-right: 0.05rem;
+          }
+
+          .advantage-content {
+            flex: 1;
+          }
+        }
       }
 
       .item-price {
@@ -313,11 +460,30 @@ export default {
         }
       }
 
+      .tag-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.1rem;
+        margin: 0.15rem 0;
+
+        .tag-item {
+          padding: 0.04rem 0.12rem;
+          font-size: 0.12rem;
+          color: #aeb6bf;
+          background-color: #fff;
+          border: .02rem solid #c8d6e7;
+          border-radius: 0.12rem;
+          display: inline-block;
+        }
+      }
+
       .item-button {
         background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
         border-radius: 0.04rem;
         padding: 0.08rem 0;
         text-align: center;
+        cursor: pointer;
+        margin-top: auto;
 
         .item-button-text {
           color: #fff;
@@ -328,7 +494,6 @@ export default {
   }
 }
 
-// 合作伙伴样式
 .partner {
   background-color: #f8f9fd;
   width: 100%;
@@ -389,4 +554,124 @@ export default {
     transform: translateX(-50%);
   }
 }
+
+.footer {
+  width: 100%;
+  background: #f5f7fa;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.4rem;
+  border-top: 0.013rem solid #e4e7ed;
+  margin-top: 0.4rem;
+}
+
+.left-box {
+  display: flex;
+  align-items: flex-start;
+}
+
+.logo-footer {
+  width: 1.333rem;
+  height: 0.4rem;
+  margin-right: 0.667rem;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.content-main {
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    font-size: 0.16rem;
+    color: #606266;
+    line-height: 1.8;
+    margin-bottom: 0.08rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: #409eff;
+    text-decoration: none;
+    font-size: 0.16rem;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.phone-number {
+  margin-left: 0.267rem;
+  font-size: .16rem;
+}
+
+.copyright {
+  margin-left: 0.267rem;
+  font-size: .16rem;
+}
+
+.police-icon {
+  width: 0.227rem;
+  height: 0.227rem;
+  margin-right: 0.027rem;
+  vertical-align: middle;
+}
+
+.police-link {
+  margin-right: 0.4rem;
+}
+
+.license-link {
+  font-size: 0.16rem;
+}
+
+.right-box {
+  display: flex;
+  align-items: center;
+}
+
+.qr-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .qr-code {
+    width: 1.333rem;
+    height: 1.333rem;
+    background: #fff;
+    border-radius: 0.053rem;
+    margin-bottom: 0.133rem;
+    padding: 0.08rem;
+    border: 0.013rem solid #e4e7ed;
+    box-sizing: content-box;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .qr-content {
+    font-size: 0.16rem;
+    color: #606266;
+  }
+}
+
+.qr-box-margin {
+  margin-left: 0.667rem;
+}
 </style>
+

f/web-kboss/src/views/H5/media.js

@@ -0,0 +1,23 @@
+// 修正适配函数
+function adapter() {
+  // 获取布局视口宽度
+  const dpWidth = document.documentElement.clientWidth
+  // 设置最小和最大宽度限制，防止字体过大或过小
+  const minWidth = 375
+  const maxWidth = 1920
+  const constrainedWidth = Math.min(Math.max(dpWidth, minWidth), maxWidth)
+
+  // 计算根字体大小（基于设计稿宽度 1900px）
+  const rootFontSize = (constrainedWidth * 100) / 1900
+
+  // 设置根字体大小，限制在合理范围内
+  document.documentElement.style.fontSize = Math.max(12, Math.min(20, rootFontSize)) + 'px'
+}
+
+// 页面加载时执行
+adapter()
+
+// 监听窗口大小变化 - 修正语法错误
+window.onresize = adapter
+// 或者使用防抖版本，避免频繁触发
+// window.addEventListener('resize', debounce(adapter, 200))

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

@@ -57,7 +57,7 @@
                   续费
                 </el-button>
               </template>
-            </el-table-column>  
+            </el-table-column>
           </el-table>
         </div>
       </div>
@@ -205,9 +205,8 @@ export default Vue.extend({
 
     async initMybalance() {
       const res = await editReachargelogAPI()
-      if (res.status) {
+      if (res.status==true) {
-        // 注意：根据您的 user 模块，这里需要使用 'SETMYBANLANCE' 而不是 'user/setMybalance'
+        this.mybalance = res.data
-        this.$store.commit('SETMYBANLANCE', res.data)
       }
     },
     async getUnreadMsgCount() {
@@ -282,11 +281,7 @@ export default Vue.extend({
       }
     }
   },
-  computed: {
+
-    ...mapState({
-      mybalance: state => state.user.mybalance,
-    })
-  },
 })
 </script>