diff --git a/f/web-kboss/src/api/H5/index.js b/f/web-kboss/src/api/H5/index.js
index 6704d81..44a6ad7 100644
--- a/f/web-kboss/src/api/H5/index.js
+++ b/f/web-kboss/src/api/H5/index.js
@@ -1,9 +1,32 @@
 import request from "@/utils/request";
-
+// 获取首页产品
 export const reqHotProduct = () => {
   return request({
     url: '/product/get_firstpage_jizuonet.dspy',
     method: 'post',
   })
 }
+// 获取云，算，网，用数据
+export const reqNavList = (data) => {
+  return request({
+    url: '/product/get_firstpage_product_tree.dspy',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    data
+  })
+}
+
+//立即咨询
+export const reqProductConsult = (data) => {
+  return request({
+    url: '/product/add_user_inquiry.dspy',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    data
+  })
+}
 
diff --git a/f/web-kboss/src/router/index.js b/f/web-kboss/src/router/index.js
index d155c42..bec29a7 100644
--- a/f/web-kboss/src/router/index.js
+++ b/f/web-kboss/src/router/index.js
@@ -85,8 +85,51 @@ export const constantRoutes = [
     path: '/h5HomePage',
     name: 'H5HomePage',
     title: 'H5首页',
-    component: () => import('@/views/H5/indexPage/index.vue'),
+    component: () => import('@/views/H5/index.vue'),
     hidden: true,
+    redirect:"/h5HomePage/index",
+     children: [
+      {
+        path: "index",
+        title: 'H5首页',
+        component: () => import('@/views/H5/official/index.vue'),
+        meta: {
+          title: "H5首页", fullPath: "/h5HomePage/index",
+        },
+      },
+      {
+        path: "cloud",
+        title: '云',
+        component: () => import('@/views/H5/cloud/index.vue'),
+        meta: {
+          title: "云", fullPath: "/h5HomePage/cloud",
+        },
+      },
+      {
+        path: "calculate",
+        title: '算',
+        component: () => import('@/views/H5/calculate/index.vue'),
+        meta: {
+          title: "算", fullPath: "/h5HomePage/calculate",
+        },
+      },
+      {
+        path: "net",
+        title: '网',
+        component: () => import('@/views/H5/net/index.vue'),
+        meta: {
+          title: "网", fullPath: "/h5HomePage/net",
+        },
+      },
+      {
+        path: "use",
+        title: '用',
+        component: () => import('@/views/H5/use/index.vue'),
+        meta: {
+          title: "用", fullPath: "/h5HomePage/use",
+        },
+      },
+     ]
   },
 
   {
diff --git a/f/web-kboss/src/views/H5/H5_dialog/index.vue b/f/web-kboss/src/views/H5/H5_dialog/index.vue
new file mode 100644
index 0000000..1e1c13e
--- /dev/null
+++ b/f/web-kboss/src/views/H5/H5_dialog/index.vue
@@ -0,0 +1,536 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogVisible"
+    :width="responsiveWidth"
+    :center="center"
+    :top="responsiveTop"
+    @close="handleClose"
+    custom-class="product-consult-dialog"
+  >
+    <el-form
+      ref="ruleForm"
+      :rules="rules"
+      label-position="top"
+      :model="formData"
+      :disabled="loading"
+    >
+      <el-form-item label="需求描述">
+        <el-input
+          :autosize="{ minRows: 3, maxRows: 3 }"
+          type="textarea"
+          size="mini"
+          v-model="formData.content"
+          placeholder="请输入您的具体需求"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="客户类型">
+        <el-radio v-model="formData.custom_type" label="1">企业</el-radio>
+        <el-radio v-model="formData.custom_type" label="0">个人</el-radio>
+      </el-form-item>
+
+      <el-form-item prop="name" label="联系人姓名">
+        <el-input
+          size="mini"
+          v-model="formData.name"
+          placeholder="请输入联系人姓名"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item prop="phone" label="联系人手机">
+        <el-input
+          size="mini"
+          v-model="formData.phone"
+          placeholder="请输入联系人手机"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item
+        v-show="formData.custom_type === '1'"
+        label="公司名称"
+      >
+        <el-input
+          size="mini"
+          v-model="formData.company"
+          placeholder="请输入公司名称"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="联系人邮箱">
+        <el-input
+          size="mini"
+          v-model="formData.email"
+          placeholder="请输入联系人邮箱"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+
+    <el-checkbox v-model="formData.checked" class="agreement-checkbox">
+      勾选表示：您同意
+      <span v-if="platformName">{{ platformName }}</span>
+      及其授权的合作伙伴通过您填写的联系方式联系您，且数据仅用于与您沟通。当您注销平台账号后，您的数据会被销毁。
+    </el-checkbox>
+
+    <div v-if="qrCode" class="qrcode-section">
+      <img :src="qrCode" alt="客服二维码">
+      <span>扫码添加官方客服</span>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button
+        size="mini"
+        type="primary"
+        :loading="loading"
+        @click="handleSubmit"
+      >
+        提 交
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'ProductConsultDialog',
+
+  props: {
+    // 控制弹窗显示
+    visible: {
+      type: Boolean,
+      default: false
+    },
+
+    // 弹窗标题
+    title: {
+      type: String,
+      default: '产品咨询'
+    },
+
+    // 弹窗宽度（使用响应式默认值）
+    width: {
+      type: String,
+      default: '' // 留空使用响应式计算
+    },
+
+    // 弹窗位置
+    top: {
+      type: String,
+      default: '' // 留空使用响应式计算
+    },
+
+    // 是否居中
+    center: {
+      type: Boolean,
+      default: true
+    },
+
+    // 平台名称（用于协议文本）
+    platformName: {
+      type: String,
+      default: ''
+    },
+
+    // 客服二维码
+    qrCode: {
+      type: String,
+      default: ''
+    },
+
+    // 提交接口函数
+    submitApi: {
+      type: Function,
+      default: null
+    },
+
+    // 当前页面URL
+    currentUrl: {
+      type: String,
+      default: ''
+    },
+
+    // 默认表单数据
+    defaultFormData: {
+      type: Object,
+      default: () => ({
+        content: '',
+        custom_type: '1',
+        name: '',
+        phone: '',
+        company: '',
+        email: '',
+        checked: false
+      })
+    }
+  },
+
+  data() {
+    // 手机号验证规则
+    const validatePhone = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入手机号'))
+      } else if (!/^1[3-9]\d{9}$/.test(value)) {
+        callback(new Error('请输入正确的手机号码'))
+      } else {
+        callback()
+      }
+    }
+
+    return {
+      loading: false,
+      rules: {
+        name: [
+          { required: true, message: '请输入姓名', trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, validator: validatePhone, trigger: 'blur' }
+        ]
+      },
+      formData: { ...this.defaultFormData }
+    }
+  },
+
+  computed: {
+    // 控制弹窗显示的计算属性
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(value) {
+        this.$emit('update:visible', value)
+      }
+    },
+
+    // 响应式宽度计算
+    responsiveWidth() {
+      if (this.width) return this.width
+
+      // 根据屏幕宽度动态计算
+      const screenWidth = window.innerWidth || document.documentElement.clientWidth
+      if (screenWidth <= 750) {
+        return '90%' // 移动端
+      } else if (screenWidth <= 1200) {
+        return '70%' // 平板
+      } else {
+        return '6rem' // 桌面端（原50rem太大）
+      }
+    },
+
+    // 响应式位置计算
+    responsiveTop() {
+      if (this.top) return this.top
+
+      const screenHeight = window.innerHeight || document.documentElement.clientHeight
+      if (screenHeight <= 667) {
+        return '10vh' // 小屏幕
+      } else {
+        return '15vh' // 正常屏幕
+      }
+    }
+  },
+
+  watch: {
+    // 监听visible变化
+    visible: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          // 显示时重置表单
+          this.resetForm()
+        }
+      }
+    },
+
+    // 监听defaultFormData变化
+    defaultFormData: {
+      deep: true,
+      handler(newVal) {
+        this.resetForm()
+      }
+    }
+  },
+
+  methods: {
+    // 重置表单
+    resetForm() {
+      this.formData = {
+        content: '',
+        custom_type: '1',
+        name: '',
+        phone: '',
+        company: '',
+        email: '',
+        checked: false,
+        ...this.defaultFormData
+      }
+
+      // 清除表单验证
+      if (this.$refs.ruleForm) {
+        this.$refs.ruleForm.clearValidate()
+      }
+    },
+
+    // 关闭弹窗
+    handleClose() {
+      this.dialogVisible = false
+      this.$emit('close')
+    },
+
+    // 提交表单
+    handleSubmit() {
+      // 验证是否勾选协议
+      if (!this.formData.checked) {
+        this.$message.warning('请勾选同意协议后再提交！')
+        return
+      }
+
+      // 验证表单
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.submitForm()
+        } else {
+          this.$message.error('请完善表单信息')
+        }
+      })
+    },
+
+    // 提交表单数据
+    async submitForm() {
+      this.loading = true
+
+      try {
+        const submitData = {
+          ...this.formData,
+          url_link: this.currentUrl || window.location.href
+        }
+
+        // 如果有自定义提交函数，使用自定义函数
+        if (this.submitApi) {
+          const response = await this.submitApi(submitData)
+          this.handleResponse(response)
+        } else {
+          // 否则使用默认提交方式
+          const response = await this.defaultSubmitApi(submitData)
+          this.handleResponse(response)
+        }
+      } catch (error) {
+        console.error('提交咨询失败:', error)
+        this.$message.error('提交失败，请稍后再试！')
+      } finally {
+        this.loading = false
+      }
+    },
+
+    // 默认提交接口（如果没有传入自定义函数）
+    async defaultSubmitApi(data) {
+
+    },
+
+    // 处理响应结果
+    handleResponse(response) {
+      if (response.status) {
+
+        this.handleClose()
+        this.$emit('success', response)
+      } else {
+        this.$message.error(response.msg || '提交失败，请稍后再试！')
+        this.$emit('error', response)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+// 弹窗样式优化
+::v-deep .product-consult-dialog {
+  &.el-dialog {
+    width: var(--dialog-width, 6rem) !important;
+    max-width: 90%;
+    border-radius: .08rem;
+
+    .el-dialog__header {
+      padding: .2rem .3rem .1rem;
+      border-bottom: 1px solid #eee;
+
+      .el-dialog__title {
+        font-size: .18rem;
+        font-weight: 600;
+        color: #333;
+      }
+    }
+
+    .el-dialog__body {
+      padding: .2rem .3rem;
+      max-height: 65vh;
+      overflow-y: auto;
+    }
+
+    .el-dialog__footer {
+      padding: .15rem .3rem .2rem;
+      border-top: 1px solid #eee;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+
+// 表单样式优化
+::v-deep .el-form {
+  .el-form-item {
+    margin-bottom: .18rem;
+
+    &:last-child {
+      margin-bottom: .1rem;
+    }
+
+    .el-form-item__label {
+      padding-bottom: .06rem;
+      font-size: .14rem;
+      font-weight: 500;
+      color: #333;
+      line-height: 1.4;
+    }
+
+    .el-input,
+    .el-textarea {
+      .el-input__inner,
+      .el-textarea__inner {
+        font-size: .14rem;
+        border: 1px solid #dcdfe6;
+        border-radius: .04rem;
+        transition: border-color 0.2s;
+
+        &:focus {
+          border-color: #409eff;
+        }
+      }
+    }
+
+    .el-textarea__inner {
+      min-height: .9rem !important;
+      resize: vertical;
+      padding: .08rem .12rem;
+    }
+
+    .el-radio {
+      margin-right: .2rem;
+
+      .el-radio__label {
+        font-size: .14rem;
+      }
+    }
+  }
+}
+
+// 协议复选框样式
+.agreement-checkbox {
+  margin-top: .15rem;
+  display: block;
+  font-size: .12rem;
+  line-height: 1.6;
+  color: #666;
+
+  ::v-deep .el-checkbox__label {
+    font-size: .12rem;
+    line-height: 1.6;
+    color: #666;
+  }
+
+  span {
+    color: #275aff;
+    font-weight: 500;
+  }
+}
+
+// 二维码区域样式
+.qrcode-section {
+  margin-top: .2rem;
+  padding: .15rem;
+  background: #f8f9fa;
+  border-radius: .06rem;
+  border: 1px solid #eee;
+  display: flex;
+  align-items: center;
+
+  img {
+    width: 1.2rem;
+    height: 1.2rem;
+    object-fit: contain;
+    margin-right: .15rem;
+  }
+
+  span {
+    font-size: .13rem;
+    color: #666;
+    line-height: 1.5;
+  }
+}
+
+// 提交按钮样式
+.dialog-footer {
+  ::v-deep .el-button {
+    min-width: 1rem;
+    height: .36rem;
+    font-size: .14rem;
+    border-radius: .04rem;
+  }
+}
+
+// 响应式适配
+@media screen and (max-width: 750px) {
+  ::v-deep .product-consult-dialog {
+    &.el-dialog {
+      width: 90% !important;
+      margin-top: 10vh !important;
+
+      .el-dialog__header {
+        padding: .15rem .2rem .08rem;
+      }
+
+      .el-dialog__body {
+        padding: .15rem .2rem;
+        max-height: 60vh;
+      }
+    }
+  }
+
+  .qrcode-section {
+    flex-direction: column;
+    text-align: center;
+
+    img {
+      margin-right: 0;
+      margin-bottom: .1rem;
+    }
+  }
+}
+:deep(.el-message) {
+  font-size: .16rem !important; /* 调整大小 */
+  min-width: auto !important;
+  padding: .12rem .2rem !important;
+  border-radius: .08rem !important;
+}
+
+:deep(.el-message__content) {
+  font-size: .16rem !important;
+  line-height: 1.4 !important;
+}
+
+:deep(.el-message--success) {
+  background-color: #f0f9eb !important;
+  border-color: #e1f3d8 !important;
+}
+
+:deep(.el-message--success .el-message__content) {
+  color: #67c23a !important;
+}
+
+@media screen and (min-width: 751px) and (max-width: 1200px) {
+  ::v-deep .product-consult-dialog {
+    &.el-dialog {
+      width: 70% !important;
+    }
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/H5/all_less/index.css b/f/web-kboss/src/views/H5/all_less/index.css
new file mode 100644
index 0000000..6ebd3ae
--- /dev/null
+++ b/f/web-kboss/src/views/H5/all_less/index.css
@@ -0,0 +1,656 @@
+.main-page {
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f8fafd;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.top-box {
+  width: 100%;
+  height: 50vh;
+  background: url("../images/banner.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+}
+.title {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #222f60;
+}
+.title .name {
+  background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-size: 0.55rem;
+}
+.title .title-top {
+  font-size: 0.55rem;
+}
+.title .title-btm {
+  font-size: 0.26rem;
+  margin-top: 0.98rem;
+}
+.text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0.14rem 0;
+  width: 100%;
+}
+.text .text-top {
+  font-size: 0.26rem;
+  color: #000;
+}
+.text .text-btm {
+  font-size: 0.18rem;
+  color: #707070;
+}
+.base-box,
+.journey-box,
+.latitude-box {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0.3rem 0.4rem;
+}
+.base-box .content,
+.journey-box .content,
+.latitude-box .content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 0.2rem;
+}
+.base-box .content .item-box,
+.journey-box .content .item-box,
+.latitude-box .content .item-box {
+  width: 48%;
+  background-color: #fff;
+  border-radius: 0.1rem;
+  padding: 0.2rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  margin-bottom: 0.2rem;
+  display: flex;
+  flex-direction: column;
+}
+.base-box .content .item-box .item-title,
+.journey-box .content .item-box .item-title,
+.latitude-box .content .item-box .item-title {
+  font-size: 0.2rem;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 0.1rem;
+}
+.base-box .content .item-box .item-description,
+.journey-box .content .item-box .item-description,
+.latitude-box .content .item-box .item-description {
+  font-size: 0.14rem;
+  color: #666;
+  margin-bottom: 0.15rem;
+  line-height: 1.4;
+}
+.base-box .content .item-box .advantage-list,
+.journey-box .content .item-box .advantage-list,
+.latitude-box .content .item-box .advantage-list {
+  margin: 0.1rem 0;
+}
+.base-box .content .item-box .advantage-list .advantage-item,
+.journey-box .content .item-box .advantage-list .advantage-item,
+.latitude-box .content .item-box .advantage-list .advantage-item {
+  display: flex;
+  align-items: flex-start;
+  font-size: 0.12rem;
+  color: #666;
+  margin-bottom: 0.08rem;
+  line-height: 1.4;
+}
+.base-box .content .item-box .advantage-list .advantage-item .advantage-icon,
+.journey-box .content .item-box .advantage-list .advantage-item .advantage-icon,
+.latitude-box .content .item-box .advantage-list .advantage-item .advantage-icon {
+  width: 0.16rem;
+  height: 0.16rem;
+  margin-right: 0.05rem;
+  flex-shrink: 0;
+}
+.base-box .content .item-box .advantage-list .advantage-item .advantage-name,
+.journey-box .content .item-box .advantage-list .advantage-item .advantage-name,
+.latitude-box .content .item-box .advantage-list .advantage-item .advantage-name {
+  color: #000;
+  font-weight: 500;
+  white-space: nowrap;
+  margin-right: 0.05rem;
+}
+.base-box .content .item-box .advantage-list .advantage-item .advantage-content,
+.journey-box .content .item-box .advantage-list .advantage-item .advantage-content,
+.latitude-box .content .item-box .advantage-list .advantage-item .advantage-content {
+  flex: 1;
+}
+.base-box .content .item-box .item-price,
+.journey-box .content .item-box .item-price,
+.latitude-box .content .item-box .item-price {
+  font-size: 0.1rem;
+  font-weight: bold;
+  color: #d4d6e1;
+  margin: 0.15rem 0;
+}
+.base-box .content .item-box .item-price .price,
+.journey-box .content .item-box .item-price .price,
+.latitude-box .content .item-box .item-price .price {
+  font-size: 0.22rem;
+  color: #f52220;
+}
+.base-box .content .item-box .item-price .price-icon,
+.journey-box .content .item-box .item-price .price-icon,
+.latitude-box .content .item-box .item-price .price-icon {
+  color: #f52220;
+  font-size: 0.1rem;
+}
+.base-box .content .item-box .tag-list,
+.journey-box .content .item-box .tag-list,
+.latitude-box .content .item-box .tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.1rem;
+  margin: 0.15rem 0;
+}
+.base-box .content .item-box .tag-list .tag-item,
+.journey-box .content .item-box .tag-list .tag-item,
+.latitude-box .content .item-box .tag-list .tag-item {
+  padding: 0.04rem 0.12rem;
+  font-size: 0.12rem;
+  color: #aeb6bf;
+  background-color: #fff;
+  border: 0.02rem solid #c8d6e7;
+  border-radius: 0.12rem;
+  display: inline-block;
+}
+.base-box .content .item-box .item-button,
+.journey-box .content .item-box .item-button,
+.latitude-box .content .item-box .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;
+}
+.base-box .content .item-box .item-button .item-button-text,
+.journey-box .content .item-box .item-button .item-button-text,
+.latitude-box .content .item-box .item-button .item-button-text {
+  color: #fff;
+  font-size: 0.14rem;
+}
+.partner {
+  background-color: #f8f9fd;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0.3rem 0.4rem;
+}
+.partner .partner-scroll {
+  width: 100%;
+  max-width: 14rem;
+  margin: 0 auto;
+  padding: 0.15rem;
+  background: #fff;
+  border-radius: 0.16rem;
+  margin-bottom: 0.3rem;
+}
+.partner .partner-scroll .logo-scroll-wrapper {
+  width: 100%;
+  height: 0.85rem;
+  overflow: hidden;
+  position: relative;
+}
+.partner .partner-scroll .logo-scroll-container {
+  display: flex;
+  height: 100%;
+  animation: scroll 15s linear infinite;
+  white-space: nowrap;
+}
+.partner .partner-scroll .logo-item {
+  flex: 0 0 auto;
+  width: 1.68rem;
+  height: 100%;
+  margin-right: 0.2rem;
+  background: #fff;
+  border-radius: 0.04rem;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.partner .partner-scroll .logo-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+.footer {
+  width: 100%;
+  background: #f5f7fa;
+  color: #fff;
+  padding: 0.4rem 0.2rem;
+  margin-top: 0.8rem;
+}
+.footer-content {
+  max-width: 12rem;
+  margin: 0 auto;
+}
+.footer {
+  width: 100%;
+  background: #f6f8fd;
+  color: #333;
+  padding: 0.6rem 0.2rem 0.4rem;
+  margin-top: 1rem;
+  position: relative;
+  overflow: hidden;
+  border-top: 1px solid #e8edf5;
+}
+.footer:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.footer-content {
+  max-width: 12.8rem;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+/* 顶部信息区域 */
+.footer-top {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-bottom: 0.4rem;
+  margin-bottom: 0.4rem;
+}
+.logo-footer {
+  width: 2.4rem;
+  height: 0.8rem;
+  margin-bottom: 0.4rem;
+  border-radius: 0.12rem;
+}
+.logo-footer img {
+  width: 100%;
+  height: 100%;
+}
+.contact-info {
+  flex: 1;
+  font-size: 0.16rem;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.24rem;
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .contact-info {
+    grid-template-columns: 1fr 1fr;
+    gap: 0.3rem 0.6rem;
+  }
+}
+.contact-info .contact-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 0.16rem 0.2rem;
+  background: #fff;
+  border-radius: 0.12rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: 1px solid #eef2f9;
+}
+.contact-info .contact-item:hover {
+  background: #fff;
+  border-color: #2ebdfa;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(39, 90, 255, 0.12);
+}
+.contact-info .contact-item .iconfont {
+  width: 0.2rem;
+  height: 0.2rem;
+  margin-right: 0.12rem;
+  margin-top: 0.02rem;
+  color: #275AFF;
+  flex-shrink: 0;
+  font-size: 0.2rem;
+}
+.contact-info .contact-item .label {
+  color: #666;
+  flex-shrink: 0;
+  font-weight: 500;
+  margin-right: 0.08rem;
+  font-size: 0.14rem;
+}
+.contact-info .contact-item .value {
+  color: #444;
+  flex: 1;
+  line-height: 1.5;
+}
+.contact-info .contact-item .phone-numbers {
+  display: flex;
+  flex-direction: column;
+  gap: 0.08rem;
+}
+@media (min-width: 768px) {
+  .contact-info .contact-item .phone-numbers {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.16rem;
+  }
+}
+.contact-info .contact-item .phone-link {
+  color: #333;
+  text-decoration: none;
+  transition: all 0.3s;
+  font-weight: 500;
+  font-size: 0.16rem;
+}
+.contact-info .contact-item .phone-link:hover {
+  color: #275AFF;
+  text-decoration: underline;
+}
+.contact-info .contact-item .phone-separator {
+  color: #999;
+  font-weight: 300;
+}
+@media (max-width: 768px) {
+  .contact-info .contact-item .phone-separator {
+    display: none;
+  }
+}
+.contact-info .contact-item .email-link {
+  color: #275AFF;
+  text-decoration: none;
+  word-break: break-all;
+  font-weight: 500;
+  font-size: 0.16rem;
+}
+.contact-info .contact-item .email-link:hover {
+  color: #2ebdfa;
+  text-decoration: underline;
+}
+.code-img {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 0.4rem;
+}
+@media (min-width: 768px) {
+  .code-img {
+    width: auto;
+    margin-top: 0;
+  }
+}
+.code-img .qr-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #fff;
+  border-radius: 0.16rem;
+  padding: 0.24rem;
+  box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08);
+  border: 1px solid #eef2f9;
+  transition: all 0.3s ease;
+}
+.code-img .qr-box:hover {
+  background: #fff;
+  border-color: #2ebdfa;
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(39, 90, 255, 0.15);
+}
+.code-img .qr-box .qr-code {
+  width: 1.8rem;
+  height: 1.8rem;
+  background: #fff;
+  border-radius: 0.12rem;
+  padding: 0.12rem;
+  border: 1px solid #eef2f9;
+  margin-bottom: 0.16rem;
+  overflow: hidden;
+}
+.code-img .qr-box .qr-code img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 0.04rem;
+}
+.code-img .qr-box .qr-content {
+  color: #333;
+  font-size: 0.14rem;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+/* 底部信息区域 */
+.footer-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 0.3rem 0.2rem;
+  background: #fff;
+  border-radius: 0.16rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  margin-top: 0.4rem;
+  border: 1px solid #eef2f9;
+}
+@media (min-width: 768px) {
+  .footer-bottom {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    text-align: left;
+    padding: 0.3rem 0.4rem;
+  }
+}
+.icp-info {
+  margin-bottom: 0.24rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+@media (min-width: 768px) {
+  .icp-info {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.6rem;
+    margin-bottom: 0;
+  }
+}
+.icp-info .icp-item {
+  display: flex;
+  align-items: center;
+  gap: 0.08rem;
+  margin-bottom: 0.12rem;
+}
+@media (min-width: 768px) {
+  .icp-info .icp-item {
+    margin-bottom: 0;
+  }
+}
+.icp-info .icp-item .icp-text {
+  color: #888;
+  font-size: 0.14rem;
+}
+.icp-info .icp-item .icp-number {
+  color: #444;
+  font-weight: 500;
+  font-size: 0.14rem;
+}
+.icp-info .copyright {
+  color: #888;
+  font-size: 0.14rem;
+  font-weight: 300;
+}
+.record-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.16rem;
+  margin-bottom: 0.24rem;
+}
+@media (min-width: 768px) {
+  .record-info {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.6rem;
+    margin-bottom: 0;
+  }
+}
+.police-record {
+  display: flex;
+  align-items: center;
+  gap: 0.1rem;
+  padding: 0.08rem 0.16rem;
+  background: #f9fafc;
+  border-radius: 0.24rem;
+  transition: all 0.3s;
+  border: 1px solid #eef2f9;
+}
+.police-record:hover {
+  background: #f0f5ff;
+  border-color: #275AFF;
+  transform: translateY(-2px);
+}
+.police-record .police-icon {
+  width: 0.18rem;
+  height: 0.18rem;
+}
+.police-record .police-link {
+  color: #666;
+  text-decoration: none;
+  font-size: 0.14rem;
+}
+.police-record .police-link:hover {
+  color: #275AFF;
+  text-decoration: underline;
+}
+.license-record .license-link {
+  color: #666;
+  text-decoration: none;
+  font-size: 0.14rem;
+  padding: 0.08rem 0.16rem;
+  background: #f9fafc;
+  border-radius: 0.24rem;
+  transition: all 0.3s;
+  border: 1px solid #eef2f9;
+}
+.license-record .license-link:hover {
+  background: #f0f5ff;
+  color: #275AFF;
+  text-decoration: underline;
+  transform: translateY(-2px);
+  border-color: #275AFF;
+}
+/* 移动端二维码 */
+.mobile-qr {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 0.4rem;
+}
+@media (min-width: 768px) {
+  .mobile-qr {
+    display: none;
+  }
+}
+.mobile-qr .qr-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #fff;
+  border-radius: 0.16rem;
+  padding: 0.24rem;
+  box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08);
+  border: 1px solid #eef2f9;
+  width: 100%;
+  max-width: 2.4rem;
+  margin-right: 0.4rem;
+}
+.mobile-qr .qr-item .qr-code {
+  width: 1.6rem;
+  height: 1.6rem;
+  background: #fff;
+  border-radius: 0.12rem;
+  padding: 0.12rem;
+  border: 1px solid #eef2f9;
+  margin-bottom: 0.16rem;
+}
+.mobile-qr .qr-item .qr-code img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 0.04rem;
+}
+.mobile-qr .qr-item .qr-desc {
+  color: #333;
+  font-size: 0.16rem;
+  font-weight: 500;
+}
+/* PC端二维码 */
+.pc-qr {
+  position: absolute;
+  right: 0.4rem;
+  bottom: 0.4rem;
+  display: none;
+}
+@media (min-width: 768px) {
+  .pc-qr {
+    display: block;
+  }
+}
+.pc-qr .qr-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #fff;
+  border-radius: 0.16rem;
+  padding: 0.24rem;
+  box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08);
+  border: 1px solid #eef2f9;
+  transition: all 0.3s ease;
+}
+.pc-qr .qr-box:hover {
+  background: #fff;
+  border-color: #2ebdfa;
+  transform: translateY(-4px) scale(1.05);
+  box-shadow: 0 8px 24px rgba(39, 90, 255, 0.15);
+}
+.pc-qr .qr-box .qr-code {
+  width: 1.6rem;
+  height: 1.6rem;
+  background: #fff;
+  border-radius: 0.12rem;
+  padding: 0.12rem;
+  border: 1px solid #eef2f9;
+  margin-bottom: 0.16rem;
+}
+.pc-qr .qr-box .qr-code img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 0.04rem;
+}
+.pc-qr .qr-box .qr-content {
+  color: #333;
+  font-size: 0.14rem;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+/* 响应式调整 */
diff --git a/f/web-kboss/src/views/H5/all_less/index.less b/f/web-kboss/src/views/H5/all_less/index.less
new file mode 100644
index 0000000..db89084
--- /dev/null
+++ b/f/web-kboss/src/views/H5/all_less/index.less
@@ -0,0 +1,757 @@
+.main-page {
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f8fafd;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.top-box {
+  width: 100%;
+  height: 50vh;
+  background: url("../images/banner.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #222f60;
+
+  .name {
+    background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-size: .55rem;
+  }
+
+  .title-top {
+    font-size: .55rem;
+  }
+
+  .title-btm {
+    font-size: .26rem;
+    margin-top: .98rem;
+  }
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: .14rem 0;
+  width: 100%;
+
+  .text-top {
+    font-size: .26rem;
+    color: #000;
+  }
+
+  .text-btm {
+    font-size: .18rem;
+    color: #707070;
+  }
+}
+
+.base-box,
+.journey-box,
+.latitude-box {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0.3rem 0.4rem;
+
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0.2rem;
+
+    .item-box {
+      width: 48%;
+      background-color: #fff;
+      border-radius: 0.1rem;
+      padding: 0.2rem;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+      margin-bottom: 0.2rem;
+      display: flex;
+      flex-direction: column;
+
+      .item-title {
+        font-size: 0.2rem;
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 0.1rem;
+      }
+
+      .item-description {
+        font-size: 0.14rem;
+        color: #666;
+        margin-bottom: 0.15rem;
+        line-height: 1.4;
+      }
+
+      .advantage-list {
+        margin: 0.1rem 0;
+
+        .advantage-item {
+          display: flex;
+          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 {
+        font-size: 0.1rem;
+        font-weight: bold;
+        color: #d4d6e1;
+        margin: 0.15rem 0;
+
+        .price {
+          font-size: .22rem;
+          color: #f52220;
+        }
+
+        .price-icon {
+          color: #f52220;
+          font-size: .1rem;
+        }
+      }
+
+      .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;
+          font-size: 0.14rem;
+        }
+      }
+    }
+  }
+}
+
+.partner {
+  background-color: #f8f9fd;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0.3rem 0.4rem;
+
+  .partner-scroll {
+    width: 100%;
+    max-width: 14rem;
+    margin: 0 auto;
+    padding: .15rem;
+    background: #fff;
+    border-radius: .16rem;
+    margin-bottom: .3rem;
+
+    .logo-scroll-wrapper {
+      width: 100%;
+      height: .85rem;
+      overflow: hidden;
+      position: relative;
+    }
+
+    .logo-scroll-container {
+      display: flex;
+      height: 100%;
+      animation: scroll 15s linear infinite;
+      white-space: nowrap;
+    }
+
+    .logo-item {
+      flex: 0 0 auto;
+      width: 1.68rem;
+      height: 100%;
+      margin-right: .2rem;
+      background: #fff;
+      border-radius: .04rem;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+.footer {
+  width: 100%;
+  background: #f5f7fa;
+  color: #fff;
+  padding: 0.4rem 0.2rem;
+  margin-top: 0.8rem;
+}
+
+.footer-content {
+  max-width: 12rem;
+  margin: 0 auto;
+}
+
+.footer {
+  width: 100%;
+  background: #f6f8fd;
+  color: #333;
+  padding: 0.6rem 0.2rem 0.4rem;
+  margin-top: 1rem;
+  position: relative;
+  overflow: hidden;
+  border-top: 1px solid #e8edf5;
+}
+
+.footer:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+
+}
+
+.footer-content {
+  max-width: 12.8rem;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+/* 顶部信息区域 */
+.footer-top {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-bottom: 0.4rem;
+  margin-bottom: 0.4rem;
+
+}
+
+.logo-footer {
+  width: 2.4rem;
+  height: .8rem;
+  margin-bottom: 0.4rem;
+  border-radius: 0.12rem;
+  // padding: 0.2rem;
+  // background: #fff;
+  // box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08);
+
+
+
+  img {
+    width: 100%;
+    height: 100%;
+    // object-fit: contain;
+  }
+}
+
+.contact-info {
+  flex: 1;
+  font-size: 0.16rem;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.24rem;
+  width: 100%;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+    gap: 0.3rem 0.6rem;
+  }
+
+  .contact-item {
+    display: flex;
+    align-items: flex-start;
+    padding: 0.16rem 0.2rem;
+    background: #fff;
+    border-radius: 0.12rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+    cursor: pointer;
+    border: 1px solid #eef2f9;
+
+    &:hover {
+      background: #fff;
+      border-color: #2ebdfa;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 16px rgba(39, 90, 255, 0.12);
+    }
+
+    .iconfont {
+      width: 0.2rem;
+      height: 0.2rem;
+      margin-right: 0.12rem;
+      margin-top: 0.02rem;
+      color: #275AFF;
+      flex-shrink: 0;
+      font-size: 0.2rem;
+    }
+
+    .label {
+      color: #666;
+      flex-shrink: 0;
+      font-weight: 500;
+      margin-right: 0.08rem;
+      font-size: 0.14rem;
+    }
+
+    .value {
+      color: #444;
+      flex: 1;
+      line-height: 1.5;
+    }
+
+    .phone-numbers {
+      display: flex;
+      flex-direction: column;
+      gap: 0.08rem;
+
+      @media (min-width: 768px) {
+        flex-direction: row;
+        align-items: center;
+        gap: 0.16rem;
+      }
+    }
+
+    .phone-link {
+      color: #333;
+      text-decoration: none;
+      transition: all 0.3s;
+      font-weight: 500;
+      font-size: 0.16rem;
+
+      &:hover {
+        color: #275AFF;
+        text-decoration: underline;
+      }
+    }
+
+    .phone-separator {
+      color: #999;
+      font-weight: 300;
+
+      @media (max-width: 768px) {
+        display: none;
+      }
+    }
+
+    .email-link {
+      color: #275AFF;
+      text-decoration: none;
+      word-break: break-all;
+      font-weight: 500;
+      font-size: 0.16rem;
+
+      &:hover {
+        color: #2ebdfa;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.code-img {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 0.4rem;
+
+  @media (min-width: 768px) {
+    width: auto;
+    margin-top: 0;
+  }
+
+  .qr-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #fff;
+    border-radius: 0.16rem;
+    padding: 0.24rem;
+    box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08);
+    border: 1px solid #eef2f9;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: #fff;
+      border-color: #2ebdfa;
+      transform: translateY(-4px);
+      box-shadow: 0 8px 24px rgba(39, 90, 255, 0.15);
+    }
+
+    .qr-code {
+      width: 1.8rem;
+      height: 1.8rem;
+      background: #fff;
+      border-radius: 0.12rem;
+      padding: 0.12rem;
+      border: 1px solid #eef2f9;
+      margin-bottom: 0.16rem;
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        border-radius: 0.04rem;
+      }
+    }
+
+    .qr-content {
+      color: #333;
+      font-size: 0.14rem;
+      font-weight: 500;
+      letter-spacing: 0.5px;
+    }
+  }
+}
+
+/* 底部信息区域 */
+.footer-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 0.3rem 0.2rem;
+  background: #fff;
+  border-radius: 0.16rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  margin-top: 0.4rem;
+  border: 1px solid #eef2f9;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    text-align: left;
+    padding: 0.3rem 0.4rem;
+  }
+}
+
+.icp-info {
+  margin-bottom: 0.24rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.6rem;
+    margin-bottom: 0;
+  }
+
+  .icp-item {
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+    margin-bottom: 0.12rem;
+
+    @media (min-width: 768px) {
+      margin-bottom: 0;
+    }
+
+    .icp-text {
+      color: #888;
+      font-size: 0.14rem;
+    }
+
+    .icp-number {
+      color: #444;
+      font-weight: 500;
+      font-size: 0.14rem;
+    }
+  }
+
+  .copyright {
+    color: #888;
+    font-size: 0.14rem;
+    font-weight: 300;
+  }
+}
+
+.record-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.16rem;
+  margin-bottom: 0.24rem;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.6rem;
+    margin-bottom: 0;
+  }
+}
+
+.police-record {
+  display: flex;
+  align-items: center;
+  gap: 0.1rem;
+  padding: 0.08rem 0.16rem;
+  background: #f9fafc;
+  border-radius: 0.24rem;
+  transition: all 0.3s;
+  border: 1px solid #eef2f9;
+
+  &:hover {
+    background: #f0f5ff;
+    border-color: #275AFF;
+    transform: translateY(-2px);
+  }
+
+  .police-icon {
+    width: 0.18rem;
+    height: 0.18rem;
+  }
+
+  .police-link {
+    color: #666;
+    text-decoration: none;
+    font-size: 0.14rem;
+
+    &:hover {
+      color: #275AFF;
+      text-decoration: underline;
+    }
+  }
+}
+
+.license-record {
+  .license-link {
+    color: #666;
+    text-decoration: none;
+    font-size: 0.14rem;
+    padding: 0.08rem 0.16rem;
+    background: #f9fafc;
+    border-radius: 0.24rem;
+    transition: all 0.3s;
+    border: 1px solid #eef2f9;
+
+    &:hover {
+      background: #f0f5ff;
+      color: #275AFF;
+      text-decoration: underline;
+      transform: translateY(-2px);
+      border-color: #275AFF;
+    }
+  }
+}
+
+/* 移动端二维码 */
+.mobile-qr {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 0.4rem;
+
+  @media (min-width: 768px) {
+    display: none;
+  }
+
+  .qr-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #fff;
+    border-radius: 0.16rem;
+    padding: 0.24rem;
+    box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08);
+    border: 1px solid #eef2f9;
+    width: 100%;
+    max-width: 2.4rem;
+    margin-right: 0.4rem;
+
+    .qr-code {
+      width: 1.6rem;
+      height: 1.6rem;
+      background: #fff;
+      border-radius: 0.12rem;
+      padding: 0.12rem;
+      border: 1px solid #eef2f9;
+      margin-bottom: 0.16rem;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        border-radius: 0.04rem;
+      }
+    }
+
+    .qr-desc {
+      color: #333;
+      font-size: 0.16rem;
+      font-weight: 500;
+    }
+  }
+}
+
+/* PC端二维码 */
+.pc-qr {
+  position: absolute;
+  right: 0.4rem;
+  bottom: 0.4rem;
+  display: none;
+
+  @media (min-width: 768px) {
+    display: block;
+  }
+
+  .qr-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #fff;
+    border-radius: 0.16rem;
+    padding: 0.24rem;
+    box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08);
+    border: 1px solid #eef2f9;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: #fff;
+      border-color: #2ebdfa;
+      transform: translateY(-4px) scale(1.05);
+      box-shadow: 0 8px 24px rgba(39, 90, 255, 0.15);
+    }
+
+    .qr-code {
+      width: 1.6rem;
+      height: 1.6rem;
+      background: #fff;
+      border-radius: 0.12rem;
+      padding: 0.12rem;
+      border: 1px solid #eef2f9;
+      margin-bottom: 0.16rem;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        border-radius: 0.04rem;
+      }
+    }
+
+    .qr-content {
+      color: #333;
+      font-size: 0.14rem;
+      font-weight: 500;
+      letter-spacing: 0.5px;
+    }
+  }
+}
+
+/* 响应式调整 */
+// @media (max-width: 768px) {
+//   .footer {
+//     padding: 0.4rem 0.2rem 0.3rem;
+//   }
+
+//   .footer-top {
+//     padding-bottom: 0.3rem;
+//     margin-bottom: 0.3rem;
+//   }
+
+//     // .logo-footer {
+//     //   width: 2rem;
+//     //   height: 0.5rem;
+//     // }
+
+//   .contact-info {
+//     .contact-item {
+//       font-size: 0.14rem;
+//       padding: 0.14rem 0.16rem;
+//     }
+//   }
+
+//   .footer-bottom {
+//     padding: 0.24rem 0.16rem;
+//     font-size: 0.13rem;
+//   }
+// }
+
+// @media (max-width: 480px) {
+//   .footer {
+//     padding: 0.3rem 0.15rem 0.2rem;
+//   }
+
+//   .contact-info {
+//     grid-template-columns: 1fr;
+//     gap: 0.16rem;
+
+//     .contact-item {
+//       font-size: 0.13rem;
+//       padding: 0.12rem 0.14rem;
+//     }
+//   }
+
+//   .record-info {
+//     flex-direction: column;
+//     gap: 0.12rem;
+//   }
+// }
diff --git a/f/web-kboss/src/views/H5/calculate/index.vue b/f/web-kboss/src/views/H5/calculate/index.vue
new file mode 100644
index 0000000..7605718
--- /dev/null
+++ b/f/web-kboss/src/views/H5/calculate/index.vue
@@ -0,0 +1,303 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="top-tit">
+      开元云
+    </div>
+
+    <!-- 供应商 -->
+    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier-container">
+      <div
+        v-for="(value, index) in cloudData.secMenu"
+        :key="index"
+        class="supplier"
+        @click="selectSupplier(index)"
+      >
+        <div
+          class="supplier-title"
+          :class="{ 'active': activeSupplierIndex === index }"
+        >
+          {{ value.secTitle }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 产品 -->
+    <div class="box">
+      <!-- 只显示当前选中的供应商的产品 -->
+      <template v-if="cloudData.secMenu && cloudData.secMenu.length > 0 && activeSupplierIndex >= 0">
+        <template v-for="thrMenu in cloudData.secMenu[activeSupplierIndex].thrMenu">
+          <!-- 循环每个分类下的产品 -->
+          <div
+            v-for="product in thrMenu.value"
+            :key="product.id"
+            class="box-item"
+          >
+            <!-- 标题 -->
+            <div class="item-tit">
+              {{ product.name }}
+            </div>
+            <!-- 详情 -->
+            <div class="item-detail">
+              {{ product.description }}
+            </div>
+            <!-- 描述 -->
+            <div class="item-desc">
+              智算
+            </div>
+            <!-- 立即咨询 -->
+            <div class="item-btn">
+              <div class="btn" @click="openConsultDialog(product, thrMenu)">
+                立即咨询
+              </div>
+            </div>
+          </div>
+        </template>
+      </template>
+    </div>
+
+    <!-- 产品咨询弹窗 -->
+    <ProductConsultDialog
+      :visible.sync="showConsultDialog"
+      :platform-name="platformName"
+      :qr-code="qrCode"
+      :default-form-data="consultFormData"
+      :submit-api="submitConsultApi"
+      @success="handleConsultSuccess"
+      @close="handleDialogClose"
+    />
+  </div>
+</template>
+
+<script>
+import { reqNavList } from '@/api/H5/index'
+import ProductConsultDialog from '../H5_dialog/index.vue'
+import { reqProductConsult } from '@/api/H5/index'
+
+export default {
+  components: {
+    ProductConsultDialog
+  },
+
+  data() {
+    return {
+      cloudData: {},
+      activeSupplierIndex: 0, // 默认选中第一个供应商
+
+      // 咨询弹窗相关
+      showConsultDialog: false,
+      platformName: '开元云',
+      qrCode: '',
+      consultFormData: {
+        content: '',
+        custom_type: '1',
+        name: '',
+        phone: '',
+        company: '',
+        email: '',
+        checked: false
+      },
+      currentProduct: null,
+      currentCategory: null
+    }
+  },
+  created() {
+    this.getCloudData()
+  },
+  methods: {
+    async getCloudData() {
+      const res = await reqNavList({ url_link: window.location.href })
+      if (res.status == true) {
+        this.cloudData = res.data.product_service[1]
+        // 确保有数据时选中第一个
+        if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
+          this.activeSupplierIndex = 0
+        }
+      }
+    },
+
+    // 选择供应商
+    selectSupplier(index) {
+      this.activeSupplierIndex = index
+    },
+
+    // 打开咨询弹窗
+    openConsultDialog(product, category) {
+      this.currentProduct = product
+      this.currentCategory = category
+
+      // 设置咨询表单的预填内容
+      this.consultFormData = {
+        ...this.consultFormData,
+        content: `我想咨询关于【${product.name}】的产品信息\n产品分类：智算`
+      }
+
+      this.showConsultDialog = true
+    },
+
+    // 提交咨询API
+    async submitConsultApi(data) {
+      // 如果有额外的产品信息，可以添加到提交数据中
+      const submitData = {
+        ...data,
+        product_name: this.currentProduct?.name || '',
+        product_description: this.currentProduct?.description || '',
+        product_label: '智算',
+        product_category: this.currentCategory?.thrTitle || '',
+        supplier_name: this.cloudData.secMenu[this.activeSupplierIndex]?.secTitle || '',
+        page_type: 'product_list'
+      }
+
+      return await reqProductConsult(submitData)
+    },
+
+    // 咨询成功回调
+    handleConsultSuccess(response) {
+      console.log('咨询提交成功:', response)
+      // 显示成功提示
+      this.$message.success('咨询提交成功，我们将尽快联系您！')
+    },
+
+    // 弹窗关闭回调
+    handleDialogClose() {
+      this.currentProduct = null
+      this.currentCategory = null
+      // 重置表单数据
+      this.consultFormData = {
+        content: '',
+        custom_type: '1',
+        name: '',
+        phone: '',
+        company: '',
+        email: '',
+        checked: false
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  html,
+  body {
+    height: 100%;
+    overflow-y: auto;
+  }
+</style>
+<style lang="less" scoped>
+.top-tit {
+  display: flex;
+  justify-content: center;
+  background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-size: .3rem;
+  font-weight: bold;
+  margin-bottom: .3rem;
+}
+
+.supplier-container {
+  display: flex;
+  flex-wrap: wrap; /* 允许换行 */
+  padding: .2rem .22rem;
+  gap: .15rem; /* 使用gap控制间距 */
+}
+
+.supplier {
+  flex-shrink: 0; /* 防止收缩 */
+
+  .supplier-title {
+    font-size: .2rem;
+    color: #000;
+    padding: .12rem .2rem;
+    background-color: #f5f5f5;
+    border-radius: 0.12rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    white-space: nowrap; /* 防止文字换行 */
+
+    &:hover {
+      background-color: #e0e0e0;
+      transform: translateY(-0.02rem);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    &.active {
+      background: linear-gradient(90deg, #275aff, #2ebdfa);
+      color: #fff;
+      box-shadow: 0 .04rem .12rem rgba(39, 90, 255, 0.3);
+      transform: translateY(-0.02rem);
+    }
+  }
+}
+
+.box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 0 .3rem;
+  .box-item {
+    display: flex;
+    width: 48%;
+    flex-direction: column;
+    align-items: self-start;
+    border: .02rem solid #f0f0f0;
+    border-radius: .2rem;
+    padding: .15rem .2rem;
+    margin: .34rem 0;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-0.05rem);
+      box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.1);
+      border-color: #1f70ff;
+    }
+
+    .item-tit{
+      font-size: .16rem;
+      color: #000;
+      font-weight: bold;
+      margin-bottom: .1rem;
+    }
+    .item-detail{
+      color: #666;
+      font-size: .13rem;
+      margin: .15rem 0;
+      line-height: 1.4;
+    }
+    .item-desc{
+      color: #666;
+      background-color: #f8f9fa;
+      font-size: .12rem;
+      padding: .08rem .12rem;
+      border-radius: .1rem;
+      margin-bottom: .15rem;
+      border: .01rem solid #e9ecef;
+    }
+    .item-btn{
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      .btn{
+        background: linear-gradient(90deg, #1f70ff, #3a8cff);
+        color: #fff;
+        padding: .08rem .2rem;
+        border-radius: .15rem;
+        font-size: 0.14rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: none;
+
+        &:hover {
+          background: linear-gradient(90deg, #0d5aff, #2a7aff);
+          transform: translateY(-0.02rem);
+          box-shadow: 0 .04rem .1rem rgba(31, 112, 255, 0.3);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/H5/cloud/index.vue b/f/web-kboss/src/views/H5/cloud/index.vue
new file mode 100644
index 0000000..b88d954
--- /dev/null
+++ b/f/web-kboss/src/views/H5/cloud/index.vue
@@ -0,0 +1,382 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="top-tit">
+      开元云
+    </div>
+
+    <!-- 供应商 -->
+    <div class="supplier-container">
+      <div v-for="(value, index) in cloudData.secMenu" :key="index" class="supplier" @click="selectSupplier(index)">
+        <div class="supplier-title" :class="{ 'active': activeSupplierIndex === index }">
+          {{ value.secTitle }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 云产品 -->
+    <div class="box">
+      <!-- 只显示当前选中的供应商的产品 -->
+      <template v-if="cloudData.secMenu && cloudData.secMenu.length > 0 && activeSupplierIndex >= 0">
+        <template v-for="thrMenu in cloudData.secMenu[activeSupplierIndex].thrMenu">
+          <div v-for="product in thrMenu.value" :key="product.id" class="box-item">
+            <!-- 标题 -->
+            <div class="item-tit">
+              {{ product.name }}
+            </div>
+
+            <!-- 产品描述（如果有） -->
+            <div class="item-detail" v-if="product.description">
+              {{ product.description }}
+            </div>
+
+            <!-- 供应商标签 -->
+            <div class="item-desc" v-if="showProductDesc(product)">
+              {{ getProductDesc(product) }}
+            </div>
+
+            <!-- 立即咨询 -->
+            <div class="item-btn">
+              <div class="btn" @click="openConsultDialog(product, thrMenu)">
+                立即咨询
+              </div>
+            </div>
+          </div>
+        </template>
+      </template>
+    </div>
+
+    <!-- 产品咨询弹窗 -->
+    <ProductConsultDialog :visible.sync="showConsultDialog" :platform-name="platformName" :qr-code="qrCode"
+      :default-form-data="consultFormData" :submit-api="submitConsultApi" @success="handleConsultSuccess"
+      @close="handleDialogClose" />
+  </div>
+</template>
+
+<script>
+import { reqNavList } from '@/api/H5/index'
+import ProductConsultDialog from '../H5_dialog/index.vue'
+import { reqProductConsult } from '@/api/H5/index'
+
+export default {
+  components: {
+    ProductConsultDialog
+  },
+
+  data() {
+    return {
+      cloudData: {},
+      activeSupplierIndex: 0, // 默认选中第一个供应商
+
+      // 咨询弹窗相关
+      showConsultDialog: false,
+      platformName: '开元云',
+      qrCode: '',
+      consultFormData: {
+        content: '',
+        custom_type: '1',
+        name: '',
+        phone: '',
+        company: '',
+        email: '',
+        checked: false
+      },
+      currentProduct: null,
+      currentCategory: null
+    }
+  },
+  created() {
+    this.getCloudData()
+  },
+  computed: {
+    // 当前选中的供应商标题
+    currentSupplierTitle() {
+      if (this.cloudData.secMenu && this.cloudData.secMenu[this.activeSupplierIndex]) {
+        return this.cloudData.secMenu[this.activeSupplierIndex].secTitle
+      }
+      return ''
+    }
+  },
+  methods: {
+    // 判断是否显示供应商标签
+    showProductDesc(product) {
+      // 如果是百度云且有label字段
+      if (this.currentSupplierTitle === '百度云' && product.label) {
+        return true
+      }
+
+      // 如果是阿里云，总是显示（因为阿里云数据中没有label字段）
+      if (this.currentSupplierTitle === '阿里云') {
+        return true
+      }
+
+      // 其他情况
+      return false
+    },
+
+    // 获取供应商标签内容
+    getProductDesc(product) {
+      // 获取当前供应商标题
+      const supplierTitle = this.currentSupplierTitle
+
+      // 处理百度云
+      if (supplierTitle === '百度云') {
+        // 如果product有ssecTitle字段（虽然你的数据中没有），使用它
+        if (product.ssecTitle && product.ssecTitle.trim() !== '') {
+          return product.ssecTitle
+        }
+        // 否则使用label字段
+        return product.label || '百度云'
+      }
+
+      // 处理阿里云 - 阿里云数据中没有ssecTitle和label字段，所以直接显示供应商名称
+      if (supplierTitle === '阿里云') {
+        // 如果阿里云的数据结构中有ssecTitle字段，使用它
+        if (product.ssecTitle && product.ssecTitle.trim() !== '') {
+          return product.ssecTitle
+        }
+        // 如果阿里云的数据结构中有label字段，使用它
+        if (product.label && product.label.trim() !== '') {
+          return product.label
+        }
+        // 否则显示"阿里云"
+        return '阿里云'
+      }
+
+      // 默认返回供应商标题
+      return supplierTitle
+    },
+
+    // 获取云数据
+    async getCloudData() {
+      const res = await reqNavList({ url_link: window.location.href })
+      if (res.status == true) {
+        this.cloudData = res.data.product_service[0]
+        console.log('云产品数据:', this.cloudData)
+
+        // 确保有数据时选中第一个
+        if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
+          this.activeSupplierIndex = 0
+
+          // 打印数据结构以帮助调试
+          this.cloudData.secMenu.forEach((supplier, index) => {
+            console.log(`供应商 ${index} (${supplier.secTitle}):`)
+            if (supplier.thrMenu && supplier.thrMenu.length > 0) {
+              supplier.thrMenu.forEach((category, catIndex) => {
+                console.log(`  分类 ${catIndex} (${category.thrTitle}):`)
+                if (category.value && category.value.length > 0) {
+                  // 只打印第一个产品作为示例
+                  const firstProduct = category.value[0]
+                  console.log(`    第一个产品:`, {
+                    name: firstProduct.name,
+                    description: firstProduct.description,
+                    label: firstProduct.label,
+                    ssecTitle: firstProduct.ssecTitle,
+                    source: firstProduct.source
+                  })
+                }
+              })
+            }
+          })
+        }
+      }
+    },
+
+    // 选择供应商（不允许取消选中）
+    selectSupplier(index) {
+      this.activeSupplierIndex = index
+    },
+
+    // 打开咨询弹窗
+    openConsultDialog(product, category) {
+      this.currentProduct = product
+      this.currentCategory = category
+
+      // 设置咨询表单的预填内容
+      this.consultFormData = {
+        ...this.consultFormData,
+        content: `我想咨询关于【${product.name}】的产品信息`
+      }
+
+      this.showConsultDialog = true
+    },
+
+    // 提交咨询API
+    async submitConsultApi(data) {
+      // 如果有额外的产品信息，可以添加到提交数据中
+      const submitData = {
+        ...data,
+        product_name: this.currentProduct?.name || '',
+        product_description: this.currentProduct?.description || '',
+        product_label: this.currentProduct?.label || '',
+        product_category: this.currentCategory?.thrTitle || '',
+        supplier_name: this.cloudData.secMenu[this.activeSupplierIndex]?.secTitle || '',
+        page_type: 'product_list'
+      }
+
+      return await reqProductConsult(submitData)
+    },
+
+    // 咨询成功回调
+    handleConsultSuccess(response) {
+      console.log('咨询提交成功:', response)
+      // 可以在这里添加后续逻辑，比如记录咨询历史等
+      this.$message.success('咨询提交成功，我们将尽快联系您！')
+    },
+
+    // 弹窗关闭回调
+    handleDialogClose() {
+      this.currentProduct = null
+      this.currentCategory = null
+      // 重置表单数据
+      this.consultFormData = {
+        content: '',
+        custom_type: '1',
+        name: '',
+        phone: '',
+        company: '',
+        email: '',
+        checked: false
+      }
+    }
+  }
+}
+</script>
+
+<style>
+html,
+body {
+  height: 100%;
+  overflow-y: auto;
+}
+</style>
+<style lang="less" scoped>
+.top-tit {
+  display: flex;
+  justify-content: center;
+  background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-size: .3rem;
+  font-weight: bold;
+  margin-bottom: .3rem;
+}
+
+.supplier-container {
+  display: flex;
+  flex-wrap: wrap;
+  /* 允许换行 */
+  padding: .2rem .22rem;
+  gap: .15rem;
+  /* 使用gap控制间距 */
+}
+
+.supplier {
+  flex-shrink: 0;
+  /* 防止收缩 */
+
+  .supplier-title {
+    font-size: .2rem;
+    color: #000;
+    padding: .12rem .2rem;
+    background-color: #f5f5f5;
+    border-radius: 0.12rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    white-space: nowrap;
+    /* 防止文字换行 */
+
+    &:hover {
+      background-color: #e0e0e0;
+      transform: translateY(-0.02rem);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    &.active {
+      background: linear-gradient(90deg, #275aff, #2ebdfa);
+      color: #fff;
+      box-shadow: 0 .04rem .12rem rgba(39, 90, 255, 0.3);
+      transform: translateY(-0.02rem);
+    }
+  }
+}
+
+.box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 0 .3rem;
+
+  .box-item {
+    display: flex;
+    width: 48%;
+    flex-direction: column;
+    align-items: self-start;
+    border: .02rem solid #f0f0f0;
+    border-radius: .2rem;
+    padding: .15rem .2rem;
+    margin: .34rem 0;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-0.05rem);
+      box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.1);
+      border-color: #1f70ff;
+    }
+
+    .item-tit {
+      font-size: .16rem;
+      color: #000;
+      font-weight: bold;
+      margin-bottom: .1rem;
+    }
+
+    .item-detail {
+      color: #666;
+      font-size: .13rem;
+      margin: .15rem 0;
+      line-height: 1.4;
+      min-height: .4rem; // 确保有最小高度
+    }
+
+    .item-desc {
+      color: #666;
+      background-color: #f8f9fa;
+      font-size: .12rem;
+      padding: .08rem .12rem;
+      border-radius: .1rem;
+      margin-bottom: .15rem;
+      border: .01rem solid #e9ecef;
+      min-height: .32rem; // 确保有最小高度
+      display: flex;
+      align-items: center;
+    }
+
+    .item-btn {
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+
+      .btn {
+        background: linear-gradient(90deg, #1f70ff, #3a8cff);
+        color: #fff;
+        padding: .08rem .2rem;
+        border-radius: .15rem;
+        font-size: 0.14rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: none;
+
+        &:hover {
+          background: linear-gradient(90deg, #0d5aff, #2a7aff);
+          transform: translateY(-0.02rem);
+          box-shadow: 0 .04rem .1rem rgba(31, 112, 255, 0.3);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/H5/images/tabBar/calculate.png b/f/web-kboss/src/views/H5/images/tabBar/calculate.png
new file mode 100644
index 0000000..2d85206
Binary files /dev/null and b/f/web-kboss/src/views/H5/images/tabBar/calculate.png differ
diff --git a/f/web-kboss/src/views/H5/images/tabBar/calculateColor.png b/f/web-kboss/src/views/H5/images/tabBar/calculateColor.png
new file mode 100644
index 0000000..09ca9fa
Binary files /dev/null and b/f/web-kboss/src/views/H5/images/tabBar/calculateColor.png differ
diff --git a/f/web-kboss/src/views/H5/images/tabBar/cloud.png b/f/web-kboss/src/views/H5/images/tabBar/cloud.png
new file mode 100644
index 0000000..d452a89
Binary files /dev/null and b/f/web-kboss/src/views/H5/images/tabBar/cloud.png differ
diff --git a/f/web-kboss/src/views/H5/images/tabBar/cloudColor.png b/f/web-kboss/src/views/H5/images/tabBar/cloudColor.png
new file mode 100644
index 0000000..d158c7a
Binary files /dev/null and b/f/web-kboss/src/views/H5/images/tabBar/cloudColor.png differ
diff --git a/f/web-kboss/src/views/H5/images/tabBar/home.png b/f/web-kboss/src/views/H5/images/tabBar/home.png
new file mode 100644
index 0000000..134d588
Binary files /dev/null and b/f/web-kboss/src/views/H5/images/tabBar/home.png differ
diff --git a/f/web-kboss/src/views/H5/images/tabBar/homeColor.png b/f/web-kboss/src/views/H5/images/tabBar/homeColor.png
new file mode 100644
index 0000000..34d2b36
Binary files /dev/null and b/f/web-kboss/src/views/H5/images/tabBar/homeColor.png differ
diff --git a/f/web-kboss/src/views/H5/images/tabBar/net.png b/f/web-kboss/src/views/H5/images/tabBar/net.png
new file mode 100644
index 0000000..8b41bf5
Binary files /dev/null and b/f/web-kboss/src/views/H5/images/tabBar/net.png differ
diff --git a/f/web-kboss/src/views/H5/images/tabBar/netColor.png b/f/web-kboss/src/views/H5/images/tabBar/netColor.png
new file mode 100644
index 0000000..dd348ad
Binary files /dev/null and b/f/web-kboss/src/views/H5/images/tabBar/netColor.png differ
diff --git a/f/web-kboss/src/views/H5/images/tabBar/user.png b/f/web-kboss/src/views/H5/images/tabBar/user.png
new file mode 100644
index 0000000..c4f9066
Binary files /dev/null and b/f/web-kboss/src/views/H5/images/tabBar/user.png differ
diff --git a/f/web-kboss/src/views/H5/images/tabBar/userColor.png b/f/web-kboss/src/views/H5/images/tabBar/userColor.png
new file mode 100644
index 0000000..51aa648
Binary files /dev/null and b/f/web-kboss/src/views/H5/images/tabBar/userColor.png differ
diff --git a/f/web-kboss/src/views/H5/index.vue b/f/web-kboss/src/views/H5/index.vue
new file mode 100644
index 0000000..2470056
--- /dev/null
+++ b/f/web-kboss/src/views/H5/index.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="h5-container">
+    <!-- 主要内容区域 -->
+    <div class="main">
+      <router-view></router-view>
+    </div>
+    <div style="height: 0.8rem;">
+    </div>
+    <!-- 底部导航栏 -->
+    <div class="tabBar">
+      <!-- 首页 -->
+      <div
+        class="tabBar-item"
+        :class="{ active: activeTab === 'index' }"
+        @click="switchTab('index')"
+      >
+        <div class="item-img">
+          <img
+            :src="activeTab === 'index' ? require('./images/tabBar/homeColor.png') : require('./images/tabBar/home.png')"
+            alt="首页"
+          />
+        </div>
+        <div class="item-text">
+          首页
+        </div>
+      </div>
+
+      <!-- 云 -->
+      <div
+        class="tabBar-item"
+        :class="{ active: activeTab === 'cloud' }"
+        @click="switchTab('cloud')"
+      >
+        <div class="item-img">
+          <img
+            :src="activeTab === 'cloud' ? require('./images/tabBar/cloudColor.png') : require('./images/tabBar/cloud.png')"
+            alt="云"
+          />
+        </div>
+        <div class="item-text">
+          云
+        </div>
+      </div>
+
+      <!-- 算 -->
+      <div
+        class="tabBar-item"
+        :class="{ active: activeTab === 'calculate' }"
+        @click="switchTab('calculate')"
+      >
+        <div class="item-img">
+          <img
+            :src="activeTab === 'calculate' ? require('./images/tabBar/calculateColor.png') : require('./images/tabBar/calculate.png')"
+            alt="算"
+          />
+        </div>
+        <div class="item-text">
+          算
+        </div>
+      </div>
+
+      <!-- 网 -->
+      <div
+        class="tabBar-item"
+        :class="{ active: activeTab === 'net' }"
+        @click="switchTab('net')"
+      >
+        <div class="item-img">
+          <img
+            :src="activeTab === 'net' ? require('./images/tabBar/netColor.png') : require('./images/tabBar/net.png')"
+            alt="网"
+          />
+        </div>
+        <div class="item-text">
+          网
+        </div>
+      </div>
+
+      <!-- 用 -->
+      <div
+        class="tabBar-item"
+        :class="{ active: activeTab === 'use' }"
+        @click="switchTab('use')"
+      >
+        <div class="item-img">
+          <img
+            :src="activeTab === 'use' ? require('./images/tabBar/userColor.png') : require('./images/tabBar/user.png')"
+            alt="用"
+          />
+        </div>
+        <div class="item-text">
+          用
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import './media.js'
+export default {
+  name: 'H5HomePage',
+  data() {
+    return {
+      activeTab: 'index', // 当前激活的标签
+      tabList: [
+        { id: 'index', name: '首页', path: '/h5HomePage/index' },
+        { id: 'cloud', name: '云', path: '/h5HomePage/cloud' },
+        { id: 'calculate', name: '算', path: '/h5HomePage/calculate' },
+        { id: 'net', name: '网', path: '/h5HomePage/net' },
+        { id: 'use', name: '用', path: '/h5HomePage/use' }
+      ]
+    };
+  },
+  watch: {
+    // 监听路由变化，更新激活的标签
+    '$route'(to) {
+      this.updateActiveTab(to.path);
+    }
+  },
+  mounted() {
+    // 初始化时根据当前路由设置激活状态
+    this.updateActiveTab(this.$route.path);
+  },
+  methods: {
+    /**
+     * 切换标签页
+     * @param {string} tabId - 标签ID
+     */
+    switchTab(tabId) {
+      // 如果点击的是当前已激活的标签，不进行操作
+      if (this.activeTab === tabId) return;
+
+      // 更新激活状态
+      this.activeTab = tabId;
+
+      // 根据tabId跳转到对应的路由
+      const tab = this.tabList.find(item => item.id === tabId);
+      if (tab) {
+        this.$router.push(tab.path);
+      }
+    },
+
+    /**
+     * 根据路由路径更新激活的标签
+     * @param {string} path - 当前路由路径
+     */
+    updateActiveTab(path) {
+      // 从路径中提取tabId
+      const pathParts = path.split('/');
+      const tabId = pathParts[pathParts.length - 1];
+
+      // 如果提取的tabId在tabList中存在，则更新activeTab
+      if (this.tabList.some(item => item.id === tabId)) {
+        this.activeTab = tabId;
+      }
+    }
+  }
+};
+function adapter() {
+  //获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
+  const dpWidth = document.documentElement.clientWidth
+  //计算根字体大小
+  const rootFonstSize = (dpWidth * 100) / 750
+  //设置根字体大小
+  document.documentElement.style.fontSize = rootFonstSize + 'px'
+}
+adapter()
+window.onresize = adapter()
+
+</script>
+
+<style lang="less" scoped>
+.h5-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.main {
+  flex: 1;
+  overflow-y: auto;/* 为底部导航栏留出空间 */
+}
+
+.tabBar {
+  height:.8rem;
+  // padding: .1rem 0;
+  background-color: #fff;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  box-shadow: 0 -0.02rem .1rem rgba(0, 0, 0, 0.1);
+
+  .tabBar-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &.active {
+      .item-text {
+        color: #1890ff; /* 激活状态的颜色 */
+        font-weight: bold;
+      }
+    }
+  }
+
+  .item-img {
+    margin-bottom: .05rem;
+
+    img {
+      width: .24rem;
+      height: .24rem;
+      display: block;
+      transition: transform 0.3s ease;
+    }
+  }
+
+  .item-text {
+    font-size: .12rem;
+    color: #666;
+    transition: color 0.3s ease;
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/H5/media.js b/f/web-kboss/src/views/H5/media.js
index f8fc27e..4f55b34 100644
--- a/f/web-kboss/src/views/H5/media.js
+++ b/f/web-kboss/src/views/H5/media.js
@@ -1,23 +1,10 @@
-// 修正适配函数
 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'
+  //计算根字体大小
+  const rootFonstSize = (dpWidth * 100) / 750
+  //设置根字体大小
+  document.documentElement.style.fontSize = rootFonstSize + 'px'
 }
-
-// 页面加载时执行
 adapter()
-
-// 监听窗口大小变化 - 修正语法错误
-window.onresize = adapter
-// 或者使用防抖版本，避免频繁触发
-// window.addEventListener('resize', debounce(adapter, 200))
+window.onresize = adapter()
diff --git a/f/web-kboss/src/views/H5/net/index.vue b/f/web-kboss/src/views/H5/net/index.vue
new file mode 100644
index 0000000..a468c8d
--- /dev/null
+++ b/f/web-kboss/src/views/H5/net/index.vue
@@ -0,0 +1,303 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="top-tit">
+      开元云
+    </div>
+
+    <!-- 供应商 -->
+    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier-container">
+      <div
+        v-for="(value, index) in cloudData.secMenu"
+        :key="index"
+        class="supplier"
+        @click="selectSupplier(index)"
+      >
+        <div
+          class="supplier-title"
+          :class="{ 'active': activeSupplierIndex === index }"
+        >
+          {{ value.secTitle }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 云产品 -->
+    <div class="box">
+      <!-- 只显示当前选中的供应商的产品 -->
+      <template v-if="cloudData.secMenu && cloudData.secMenu.length > 0 && activeSupplierIndex >= 0">
+        <template v-for="thrMenu in cloudData.secMenu[activeSupplierIndex].thrMenu">
+          <!-- 循环每个分类下的产品 -->
+          <div
+            v-for="product in thrMenu.value"
+            :key="product.id"
+            class="box-item"
+          >
+            <!-- 标题 -->
+            <div class="item-tit">
+              {{ product.name }}
+            </div>
+            <!-- 详情 -->
+            <div class="item-detail">
+              {{ product.description }}
+            </div>
+            <!-- 描述 -->
+            <div class="item-desc">
+              算力网络
+            </div>
+            <!-- 立即咨询 -->
+            <div class="item-btn">
+              <div class="btn" @click="openConsultDialog(product, thrMenu)">
+                立即咨询
+              </div>
+            </div>
+          </div>
+        </template>
+      </template>
+    </div>
+
+    <!-- 产品咨询弹窗 -->
+    <ProductConsultDialog
+      :visible.sync="showConsultDialog"
+      :platform-name="platformName"
+      :qr-code="qrCode"
+      :default-form-data="consultFormData"
+      :submit-api="submitConsultApi"
+      @success="handleConsultSuccess"
+      @close="handleDialogClose"
+    />
+  </div>
+</template>
+
+<script>
+import { reqNavList } from '@/api/H5/index'
+import ProductConsultDialog from '../H5_dialog/index.vue'
+import { reqProductConsult } from '@/api/H5/index'
+
+export default {
+  components: {
+    ProductConsultDialog
+  },
+
+  data() {
+    return {
+      cloudData: {},
+      activeSupplierIndex: 0, // 默认选中第一个供应商
+
+      // 咨询弹窗相关
+      showConsultDialog: false,
+      platformName: '开元云',
+      qrCode: '',
+      consultFormData: {
+        content: '',
+        custom_type: '1',
+        name: '',
+        phone: '',
+        company: '',
+        email: '',
+        checked: false
+      },
+      currentProduct: null,
+      currentCategory: null
+    }
+  },
+  created() {
+    this.getCloudData()
+  },
+  methods: {
+    async getCloudData() {
+      const res = await reqNavList({ url_link: window.location.href })
+      if (res.status == true) {
+        this.cloudData = res.data.product_service[2]
+        // 确保有数据时选中第一个
+        if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
+          this.activeSupplierIndex = 0
+        }
+      }
+    },
+
+    // 选择供应商
+    selectSupplier(index) {
+      this.activeSupplierIndex = index
+    },
+
+    // 打开咨询弹窗
+    openConsultDialog(product, category) {
+      this.currentProduct = product
+      this.currentCategory = category
+
+      // 设置咨询表单的预填内容
+      this.consultFormData = {
+        ...this.consultFormData,
+        content: `我想咨询关于【${product.name}】的产品信息\n产品分类：算力网络`
+      }
+
+      this.showConsultDialog = true
+    },
+
+    // 提交咨询API
+    async submitConsultApi(data) {
+      // 如果有额外的产品信息，可以添加到提交数据中
+      const submitData = {
+        ...data,
+        product_name: this.currentProduct?.name || '',
+        product_description: this.currentProduct?.description || '',
+        product_label: '算力网络',
+        product_category: this.currentCategory?.thrTitle || '',
+        supplier_name: this.cloudData.secMenu[this.activeSupplierIndex]?.secTitle || '',
+        page_type: 'product_list'
+      }
+
+      return await reqProductConsult(submitData)
+    },
+
+    // 咨询成功回调
+    handleConsultSuccess(response) {
+      console.log('咨询提交成功:', response)
+      // 显示成功提示
+      this.$message.success('咨询提交成功，我们将尽快联系您！')
+    },
+
+    // 弹窗关闭回调
+    handleDialogClose() {
+      this.currentProduct = null
+      this.currentCategory = null
+      // 重置表单数据
+      this.consultFormData = {
+        content: '',
+        custom_type: '1',
+        name: '',
+        phone: '',
+        company: '',
+        email: '',
+        checked: false
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  html,
+  body {
+    height: 100%;
+    overflow-y: auto;
+  }
+</style>
+<style lang="less" scoped>
+.top-tit {
+  display: flex;
+  justify-content: center;
+  background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-size: .3rem;
+  font-weight: bold;
+  margin-bottom: .3rem;
+}
+
+.supplier-container {
+  display: flex;
+  flex-wrap: wrap; /* 允许换行 */
+  padding: .2rem .22rem;
+  gap: .15rem; /* 使用gap控制间距 */
+}
+
+.supplier {
+  flex-shrink: 0; /* 防止收缩 */
+
+  .supplier-title {
+    font-size: .2rem;
+    color: #000;
+    padding: .12rem .2rem;
+    background-color: #f5f5f5;
+    border-radius: 0.12rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    white-space: nowrap; /* 防止文字换行 */
+
+    &:hover {
+      background-color: #e0e0e0;
+      transform: translateY(-0.02rem);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    &.active {
+      background: linear-gradient(90deg, #275aff, #2ebdfa);
+      color: #fff;
+      box-shadow: 0 .04rem .12rem rgba(39, 90, 255, 0.3);
+      transform: translateY(-0.02rem);
+    }
+  }
+}
+
+.box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 0 .3rem;
+  .box-item {
+    display: flex;
+    width: 48%;
+    flex-direction: column;
+    align-items: self-start;
+    border: .02rem solid #f0f0f0;
+    border-radius: .2rem;
+    padding: .15rem .2rem;
+    margin: .34rem 0;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-0.05rem);
+      box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.1);
+      border-color: #1f70ff;
+    }
+
+    .item-tit{
+      font-size: .16rem;
+      color: #000;
+      font-weight: bold;
+      margin-bottom: .1rem;
+    }
+    .item-detail{
+      color: #666;
+      font-size: .13rem;
+      margin: .15rem 0;
+      line-height: 1.4;
+    }
+    .item-desc{
+      color: #666;
+      background-color: #f8f9fa;
+      font-size: .12rem;
+      padding: .08rem .12rem;
+      border-radius: .1rem;
+      margin-bottom: .15rem;
+      border: .01rem solid #e9ecef;
+    }
+    .item-btn{
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      .btn{
+        background: linear-gradient(90deg, #1f70ff, #3a8cff);
+        color: #fff;
+        padding: .08rem .2rem;
+        border-radius: .15rem;
+        font-size: 0.14rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: none;
+
+        &:hover {
+          background: linear-gradient(90deg, #0d5aff, #2a7aff);
+          transform: translateY(-0.02rem);
+          box-shadow: 0 .04rem .1rem rgba(31, 112, 255, 0.3);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/H5/indexPage/index.vue b/f/web-kboss/src/views/H5/official/index.vue
similarity index 52%
rename from f/web-kboss/src/views/H5/indexPage/index.vue
rename to f/web-kboss/src/views/H5/official/index.vue
index 7b04fe7..01088f3 100644
--- a/f/web-kboss/src/views/H5/indexPage/index.vue
+++ b/f/web-kboss/src/views/H5/official/index.vue
@@ -1,4 +1,3 @@
-让图标始终是对其的状态 让布局规整些
 <template>
   <div class="main-page">
     <!-- banner图 -->
@@ -39,7 +38,7 @@
             <span class="price">{{ item.price }}</span> {{ item.price_unit }}
           </div>
           <div class="item-button">
-            <div class="item-button-text">立即咨询</div>
+            <div class="item-button-text" @click="openConsultDialog(item, '云筑企业基座')">立即咨询</div>
           </div>
         </div>
       </div>
@@ -71,7 +70,7 @@
             <span class="price">{{ item.price }}</span> {{ item.price_unit }}
           </div>
           <div class="item-button">
-            <div class="item-button-text">立即咨询</div>
+            <div class="item-button-text" @click="openConsultDialog(item, '智算未来征程')">立即咨询</div>
           </div>
         </div>
       </div>
@@ -100,17 +99,13 @@
 
           <!-- 标签列表 - 添加边框 -->
           <div class="tag-list" v-if="item.tagList && item.tagList.length">
-            <span
-              class="tag-item"
-              v-for="tag in item.tagList"
-              :key="tag.id"
-            >
+            <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 class="item-button-text" @click="openConsultDialog(item, '网织智能经纬')">立即咨询</div>
           </div>
         </div>
       </div>
@@ -134,59 +129,115 @@
       </div>
     </div>
 
-    <!-- footer -->
+    <!-- 修改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 class="footer-content">
+        <!-- 顶部信息 -->
+        <div class="footer-top">
+          <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="contact-info">
+            <div class="contact-item">
+              <i class="iconfont icon-dizhi"></i>
+              <span class="label">地址：</span>
+              <span class="value">{{ address }}</span>
+            </div>
+            <div class="contact-item">
+              <i class="iconfont icon-dianhua"></i>
+              <span class="label">电话：</span>
+              <div class="phone-numbers">
+                <a href="tel:400-6150805" class="phone-link">400-6150805</a>
+                <span class="phone-separator">/</span>
+                <a href="tel:010-65917875" class="phone-link">010-65917875</a>
+              </div>
+            </div>
+            <div class="contact-item">
+              <i class="iconfont icon-youxiang"></i>
+              <span class="label">邮箱：</span>
+              <a href="mailto:Open-computing@kaiyuancloud.cn" class="email-link">
+                Open-computing@kaiyuancloud.cn
+              </a>
+            </div>
+          </div>
+
         </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>
+
+        <!-- 备案信息 -->
+        <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">
               <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>
+                class="police-link">
+                京公网安备 11010502054007号
+              </a>
+            </div>
+            <div class="license-record">
+              <router-link tag="a" target="_blank" class="license-link" :to="{ name: 'homePageImage' }">
+                经营许可证：京B2-20232313
+              </router-link>
+            </div>
+          </div>
+
+          <!-- 移动端显示的二维码 -->
+          <div class="mobile-qr">
+            <div class="qr-item">
+              <div class="qr-code">
+                <img src="@/assets/kyy/kyy公众号.jpg" alt="微信客服二维码">
+              </div>
+              <span class="qr-desc">扫描关注二维码</span>
+            </div>
+             <div class="qr-item">
+              <div class="qr-code">
+                <img src="@/assets/kyy/客服wechat.png" alt="微信客服二维码">
+              </div>
+              <span class="qr-desc">微信客服</span>
+            </div>
+          </div>
         </div>
       </div>
-      <div class="right-box">
+
+      <!-- PC端显示的二维码（移动端隐藏） -->
+      <div class="pc-qr">
         <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>
+    <!-- 产品咨询弹窗 -->
+    <ProductConsultDialog :visible.sync="showConsultDialog" :platform-name="platformName" :qr-code="qrCode"
+      :default-form-data="consultFormData" :submit-api="submitConsultApi" @success="handleConsultSuccess"
+      @close="handleDialogClose" />
   </div>
 </template>
 
 <script>
 import { reqHotProduct } from '@/api/H5/index.js'
 import { getLogoAPI } from "@/api/login"
+import ProductConsultDialog from '../H5_dialog/index.vue'
+import { reqProductConsult } from '@/api/H5/index'
 
 export default {
   name: 'MainPage',
+  components: {
+    ProductConsultDialog
+  },
+
   data() {
     return {
       baseData: {},
@@ -208,7 +259,23 @@ export default {
       url: window.location.href,
       photosUrl: [],
       ICP: "京ICP备2022001945号-1",
-      address: "农业展览馆13号瑞辰国际中心518B(团结湖地铁站c东南口步行420米)"
+      address: "农业展览馆13号瑞辰国际中心518B(团结湖地铁站c东南口步行420米)",
+
+      // 咨询弹窗相关
+      showConsultDialog: false,
+      platformName: '开元云',
+      qrCode: '',
+      consultFormData: {
+        content: '',
+        custom_type: '1',
+        name: '',
+        phone: '',
+        company: '',
+        email: '',
+        checked: false
+      },
+      currentItem: null,
+      currentCategory: null
     }
   },
   computed: {
@@ -291,13 +358,86 @@ export default {
         console.warn('图标加载失败:', iconPath)
         return ''
       }
+    },
+
+    // 打开咨询弹窗
+    openConsultDialog(item, category) {
+      this.currentItem = item
+      this.currentCategory = category
+
+      // 构建优势列表文本
+      let advantageText = ''
+      if (item.list && item.list.length) {
+        advantageText = item.list.map(listItem => {
+          return listItem.name ? `${listItem.name}：${listItem.content}` : listItem.content
+        }).join('\n')
+      } else if (item.advantageList && item.advantageList.length) {
+        advantageText = item.advantageList.map(advantage => {
+          return advantage.name ? `${advantage.name}：${advantage.content}` : advantage.content
+        }).join('\n')
+      }
+
+      // 构建标签列表文本
+      let tagText = ''
+      if (item.tagList && item.tagList.length) {
+        tagText = item.tagList.map(tag => tag.name).join('、')
+      }
+
+      // 设置咨询表单的预填内容
+      this.consultFormData = {
+        ...this.consultFormData,
+        content: `我想咨询关于【${item.title}】（${category}）的产品信息\n产品描述：${item.description}\n${advantageText ? '产品优势：\n' + advantageText : ''}${tagText ? '\n产品标签：' + tagText : ''}${item.price ? '\n参考价格：' + item.price + (item.price_unit || '') : ''}`
+      }
+
+      this.showConsultDialog = true
+    },
+
+    // 提交咨询API
+    async submitConsultApi(data) {
+      // 如果有额外的产品信息，可以添加到提交数据中
+      const submitData = {
+        ...data,
+        product_name: this.currentItem?.title || '',
+        product_description: this.currentItem?.description || '',
+        product_category: this.currentCategory || '',
+        product_price: this.currentItem?.price || '',
+        product_price_unit: this.currentItem?.price_unit || '',
+        page_type: 'main_page'
+      }
+
+      return await reqProductConsult(submitData)
+
+    },
+
+    // 咨询成功回调
+    handleConsultSuccess(response) {
+      console.log('咨询提交成功:', response)
+      // 可以在这里添加后续逻辑，比如记录咨询历史等
+      this.$message.success('咨询提交成功，我们将尽快联系您！')
+    },
+
+    // 弹窗关闭回调
+    handleDialogClose() {
+      this.currentItem = null
+      this.currentCategory = null
+      // 重置表单数据
+      this.consultFormData = {
+        content: '',
+        custom_type: '1',
+        name: '',
+        phone: '',
+        company: '',
+        email: '',
+        checked: false
+      }
     }
   }
 }
 </script>
 
 <style lang="less">
-html, body {
+html,
+body {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
@@ -313,365 +453,5 @@ body {
 </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%;
-  height: 50vh;
-  background: url("../images/banner.png") no-repeat;
-  background-size: 100% 100%;
-  display: flex;
-  align-items: center;
-}
-
-.title {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #222f60;
-
-  .name {
-    background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    font-size: .55rem;
-  }
-
-  .title-top {
-    font-size: .55rem;
-  }
-
-  .title-btm {
-    font-size: .26rem;
-    margin-top: .98rem;
-  }
-}
-
-.text {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: .14rem 0;
-  width: 100%;
-
-  .text-top {
-    font-size: .26rem;
-    color: #000;
-  }
-
-  .text-btm {
-    font-size: .18rem;
-    color: #707070;
-  }
-}
-
-.base-box,
-.journey-box,
-.latitude-box {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 0.3rem 0.4rem;
-
-  .content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    gap: 0.2rem;
-
-    .item-box {
-      width: 48%;
-      background-color: #fff;
-      border-radius: 0.1rem;
-      padding: 0.2rem;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-      margin-bottom: 0.2rem;
-      display: flex;
-      flex-direction: column;
-
-      .item-title {
-        font-size: 0.2rem;
-        font-weight: bold;
-        color: #333;
-        margin-bottom: 0.1rem;
-      }
-
-      .item-description {
-        font-size: 0.14rem;
-        color: #666;
-        margin-bottom: 0.15rem;
-        line-height: 1.4;
-      }
-
-      .advantage-list {
-        margin: 0.1rem 0;
-        .advantage-item {
-          display: flex;
-          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 {
-        font-size: 0.1rem;
-        font-weight: bold;
-        color: #d4d6e1;
-        margin: 0.15rem 0;
-
-        .price {
-          font-size: .22rem;
-          color: #f52220;
-        }
-
-        .price-icon {
-          color: #f52220;
-          font-size: .1rem;
-        }
-      }
-
-      .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;
-          font-size: 0.14rem;
-        }
-      }
-    }
-  }
-}
-
-.partner {
-  background-color: #f8f9fd;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 0.3rem 0.4rem;
-
-  .partner-scroll {
-    width: 100%;
-    max-width: 14rem;
-    margin: 0 auto;
-    padding: .15rem;
-    background: #fff;
-    border-radius: .16rem;
-    margin-bottom: .3rem;
-
-    .logo-scroll-wrapper {
-      width: 100%;
-      height: .85rem;
-      overflow: hidden;
-      position: relative;
-    }
-
-    .logo-scroll-container {
-      display: flex;
-      height: 100%;
-      animation: scroll 15s linear infinite;
-      white-space: nowrap;
-    }
-
-    .logo-item {
-      flex: 0 0 auto;
-      width: 1.68rem;
-      height: 100%;
-      margin-right: .2rem;
-      background: #fff;
-      border-radius: .04rem;
-      overflow: hidden;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-    }
-  }
-}
-
-@keyframes scroll {
-  0% {
-    transform: translateX(0);
-  }
-
-  100% {
-    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;
-}
+@import url('../all_less/index.less');
 </style>
-
diff --git a/f/web-kboss/src/views/H5/use/index.vue b/f/web-kboss/src/views/H5/use/index.vue
new file mode 100644
index 0000000..2251d91
--- /dev/null
+++ b/f/web-kboss/src/views/H5/use/index.vue
@@ -0,0 +1,302 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="top-tit">
+      开元云
+    </div>
+
+    <!-- 供应商 -->
+    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier-container">
+      <div
+        v-for="(value, index) in cloudData.secMenu"
+        :key="index"
+        class="supplier"
+        @click="selectSupplier(index)"
+      >
+        <div
+          class="supplier-title"
+          :class="{ 'active': activeSupplierIndex === index }"
+        >
+          {{ value.secTitle }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 云产品 -->
+    <div class="box">
+      <!-- 只显示当前选中的供应商的产品 -->
+      <template v-if="cloudData.secMenu && cloudData.secMenu.length > 0 && activeSupplierIndex >= 0">
+        <template v-for="thrMenu in cloudData.secMenu[activeSupplierIndex].thrMenu">
+          <!-- 循环每个分类下的产品 -->
+          <div
+            v-for="product in thrMenu.value"
+            :key="product.id"
+            class="box-item"
+          >
+            <!-- 标题 -->
+            <div class="item-tit">
+              {{ product.name }}
+            </div>
+            <!-- 详情 -->
+            <div class="item-detail">
+              {{ thrMenu.thrTitle }}
+            </div>
+            <!-- 描述 -->
+            <div class="item-desc">
+              AI应用
+            </div>
+            <!-- 立即咨询 -->
+            <div class="item-btn">
+              <div class="btn" @click="openConsultDialog(product, thrMenu)">
+                立即咨询
+              </div>
+            </div>
+          </div>
+        </template>
+      </template>
+    </div>
+
+    <!-- 产品咨询弹窗 -->
+    <ProductConsultDialog
+      :visible.sync="showConsultDialog"
+      :platform-name="platformName"
+      :qr-code="qrCode"
+      :default-form-data="consultFormData"
+      :submit-api="submitConsultApi"
+      @success="handleConsultSuccess"
+      @close="handleDialogClose"
+    />
+  </div>
+</template>
+
+<script>
+import { reqNavList } from '@/api/H5/index'
+import ProductConsultDialog from '../H5_dialog/index.vue'
+import { reqProductConsult } from '@/api/H5/index'
+
+export default {
+  components: {
+    ProductConsultDialog
+  },
+
+  data() {
+    return {
+      cloudData: {},
+      activeSupplierIndex: 0, // 默认选中第一个供应商
+
+      // 咨询弹窗相关
+      showConsultDialog: false,
+      platformName: '开元云',
+      qrCode: '',
+      consultFormData: {
+        content: '',
+        custom_type: '1',
+        name: '',
+        phone: '',
+        company: '',
+        email: '',
+        checked: false
+      },
+      currentProduct: null,
+      currentCategory: null
+    }
+  },
+  created() {
+    this.getCloudData()
+  },
+  methods: {
+    async getCloudData() {
+      const res = await reqNavList({ url_link: window.location.href })
+      if (res.status == true) {
+        this.cloudData = res.data.product_service[3]
+        // 确保有数据时选中第一个
+        if (this.cloudData.secMenu && this.cloudData.secMenu.length > 0) {
+          this.activeSupplierIndex = 0
+        }
+      }
+    },
+
+    // 选择供应商
+    selectSupplier(index) {
+      this.activeSupplierIndex = index
+    },
+
+    // 打开咨询弹窗
+    openConsultDialog(product, category) {
+      this.currentProduct = product
+      this.currentCategory = category
+
+      // 设置咨询表单的预填内容
+      this.consultFormData = {
+        ...this.consultFormData,
+        content: `我想咨询关于【${product.name}】的产品信息\n产品分类：${category.thrTitle}\n产品类型：AI应用`
+      }
+
+      this.showConsultDialog = true
+    },
+
+    // 提交咨询API
+    async submitConsultApi(data) {
+      // 如果有额外的产品信息，可以添加到提交数据中
+      const submitData = {
+        ...data,
+        product_name: this.currentProduct?.name || '',
+        product_category: this.currentCategory?.thrTitle || '',
+        product_label: 'AI应用',
+        supplier_name: this.cloudData.secMenu[this.activeSupplierIndex]?.secTitle || '',
+        page_type: 'product_list'
+      }
+
+      return await reqProductConsult(submitData)
+    },
+
+    // 咨询成功回调
+    handleConsultSuccess(response) {
+      console.log('咨询提交成功:', response)
+      // 显示成功提示
+      this.$message.success('咨询提交成功，我们将尽快联系您！')
+    },
+
+    // 弹窗关闭回调
+    handleDialogClose() {
+      this.currentProduct = null
+      this.currentCategory = null
+      // 重置表单数据
+      this.consultFormData = {
+        content: '',
+        custom_type: '1',
+        name: '',
+        phone: '',
+        company: '',
+        email: '',
+        checked: false
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  html,
+  body {
+    height: 100%;
+    overflow-y: auto;
+  }
+</style>
+<style lang="less" scoped>
+.top-tit {
+  display: flex;
+  justify-content: center;
+  background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-size: .3rem;
+  font-weight: bold;
+  margin-bottom: .3rem;
+}
+
+.supplier-container {
+  display: flex;
+  flex-wrap: wrap; /* 允许换行 */
+  padding: .2rem .22rem;
+  gap: .15rem; /* 使用gap控制间距 */
+}
+
+.supplier {
+  flex-shrink: 0; /* 防止收缩 */
+
+  .supplier-title {
+    font-size: .2rem;
+    color: #000;
+    padding: .12rem .2rem;
+    background-color: #f5f5f5;
+    border-radius: 0.12rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    white-space: nowrap; /* 防止文字换行 */
+
+    &:hover {
+      background-color: #e0e0e0;
+      transform: translateY(-0.02rem);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    &.active {
+      background: linear-gradient(90deg, #275aff, #2ebdfa);
+      color: #fff;
+      box-shadow: 0 .04rem .12rem rgba(39, 90, 255, 0.3);
+      transform: translateY(-0.02rem);
+    }
+  }
+}
+
+.box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 0 .3rem;
+  .box-item {
+    display: flex;
+    width: 48%;
+    flex-direction: column;
+    align-items: self-start;
+    border: .02rem solid #f0f0f0;
+    border-radius: .2rem;
+    padding: .15rem .2rem;
+    margin: .34rem 0;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-0.05rem);
+      box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.1);
+      border-color: #1f70ff;
+    }
+
+    .item-tit{
+      font-size: .16rem;
+      color: #000;
+      font-weight: bold;
+      margin-bottom: .1rem;
+    }
+    .item-detail{
+      color: #666;
+      font-size: .13rem;
+      margin: .15rem 0;
+      line-height: 1.4;
+    }
+    .item-desc{
+      color: #666;
+      background-color: #f8f9fa;
+      font-size: .12rem;
+      padding: .08rem .12rem;
+      border-radius: .1rem;
+      margin-bottom: .15rem;
+      border: .01rem solid #e9ecef;
+    }
+    .item-btn{
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      .btn{
+        background: linear-gradient(90deg, #1f70ff, #3a8cff);
+        color: #fff;
+        padding: .08rem .2rem;
+        border-radius: .15rem;
+        font-size: 0.14rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: none;
+
+        &:hover {
+          background: linear-gradient(90deg, #0d5aff, #2a7aff);
+          transform: translateY(-0.02rem);
+          box-shadow: 0 .04rem .1rem rgba(31, 112, 255, 0.3);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/f/web-kboss/src/views/product/mainPage/index.vue b/f/web-kboss/src/views/product/mainPage/index.vue
index 1477331..a1b85ac 100644
--- a/f/web-kboss/src/views/product/mainPage/index.vue
+++ b/f/web-kboss/src/views/product/mainPage/index.vue
@@ -207,6 +207,8 @@ export default Vue.extend({
       const res = await editReachargelogAPI()
       if (res.status==true) {
         this.mybalance = res.data
+      }else{
+        this.mybalance = res.data
       }
     },
     async getUnreadMsgCount() {
diff --git a/f/web-kboss/src/views/registrationPage/indexNew.vue b/f/web-kboss/src/views/registrationPage/indexNew.vue
index 268bb58..31982f4 100644
--- a/f/web-kboss/src/views/registrationPage/indexNew.vue
+++ b/f/web-kboss/src/views/registrationPage/indexNew.vue
@@ -298,8 +298,6 @@ export default {
             message: "验证码已发送",
             type: "success",
           });
-
-          // 修复：安全地获取 codeid，处理不同的响应结构
           let codeid = '';
 
           // 尝试从不同的响应结构获取 codeid
@@ -328,16 +326,13 @@ export default {
           this.startCountdown();
         } else {
           this.$message({
-            message: res.message || "验证码发送失败",
+            message: res.msg,
             type: "error",
           });
         }
       } catch (error) {
         console.error('发送验证码失败:', error);
-        this.$message({
-          message: "验证码发送失败，请重试",
-          type: "error",
-        });
+        
       }
     },