diff --git a/f/web-kboss/src/api/H5/index.js b/f/web-kboss/src/api/H5/index.js
index a9e3cb7..44a6ad7 100644
--- a/f/web-kboss/src/api/H5/index.js
+++ b/f/web-kboss/src/api/H5/index.js
@@ -19,7 +19,7 @@ export const reqNavList = (data) => {
 }
 
 //立即咨询
-export const reqNewHomeConsult = (data) => {
+export const reqProductConsult = (data) => {
   return request({
     url: '/product/add_user_inquiry.dspy',
     method: 'post',
@@ -29,3 +29,4 @@ export const reqNewHomeConsult = (data) => {
     data
   })
 }
+
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..ac858be
--- /dev/null
+++ b/f/web-kboss/src/views/H5/all_less/index.css
@@ -0,0 +1,337 @@
+.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;
+  display: flex;
+  justify-content: space-around;
+  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.2rem;
+  height: 0.4rem;
+  margin-right: 0.667rem;
+}
+.logo-footer img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.content-main ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.content-main li {
+  font-size: 0.16rem;
+  color: #606266;
+  line-height: 1.8;
+  margin-bottom: 0.08rem;
+}
+.content-main li:last-child {
+  margin-bottom: 0;
+}
+.content-main a {
+  color: #409eff;
+  text-decoration: none;
+  font-size: 0.16rem;
+}
+.content-main a:hover {
+  text-decoration: underline;
+}
+.phone-number {
+  margin-left: 0.267rem;
+  font-size: 0.16rem;
+}
+.copyright {
+  margin-left: 0.267rem;
+  font-size: 0.16rem;
+}
+.police-icon {
+  width: 0.227rem;
+  height: 0.227rem;
+  margin-right: 0.01rem;
+}
+.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-box .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;
+}
+.qr-box .qr-code img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.qr-box .qr-content {
+  font-size: 0.16rem;
+  color: #606266;
+}
+.qr-box-margin {
+  margin-left: 0.667rem;
+}
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..1a527c8
--- /dev/null
+++ b/f/web-kboss/src/views/H5/all_less/index.less
@@ -0,0 +1,362 @@
+.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-around;
+  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.2rem;
+  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.01rem;
+  // 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;
+}
diff --git a/f/web-kboss/src/views/H5/calculate/index.vue b/f/web-kboss/src/views/H5/calculate/index.vue
index 0dd8d88..7605718 100644
--- a/f/web-kboss/src/views/H5/calculate/index.vue
+++ b/f/web-kboss/src/views/H5/calculate/index.vue
@@ -6,54 +6,99 @@
     </div>
 
     <!-- 供应商 -->
-    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier">
-      <div class="supplier-title">{{ cloudData.secMenu[0].secTitle }}</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">
-        <template v-for="secMenu in cloudData.secMenu">
-          <template v-for="thrMenu in secMenu.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">
-                  立即咨询
-                </div>
+      <!-- 只显示当前选中的供应商的产品 -->
+      <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>
-          </template>
+          </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() {
@@ -61,15 +106,77 @@ export default {
   },
   methods: {
     async getCloudData() {
-      const res = await reqNavList()
+      const res = await reqNavList({ url_link: window.location.href })
       if (res.status == true) {
         this.cloudData = res.data.product_service[1]
-        console.log(this.cloudData);
+        // 确保有数据时选中第一个
+        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 {
@@ -86,19 +193,43 @@ export default {
   -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 {
-
-  display: flex;
-  padding: .22rem ;
+  flex-shrink: 0; /* 防止收缩 */
 
   .supplier-title {
     font-size: .2rem;
     color: #000;
-    padding: .1rem .16rem;
-    background-color: pink;
-    border-radius: 0.08rem;
+    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);
+    }
   }
 }
 
@@ -115,37 +246,58 @@ export default {
     align-items: self-start;
     border: .02rem solid #f0f0f0;
     border-radius: .2rem;
-    padding: .1rem 0.1rem;
+    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: .14rem;
+      font-size: .16rem;
       color: #000;
+      font-weight: bold;
+      margin-bottom: .1rem;
     }
     .item-detail{
-      color: #737373;
-      font-size: .12rem;
-      margin: .26rem 0;
+      color: #666;
+      font-size: .13rem;
+      margin: .15rem 0;
+      line-height: 1.4;
     }
     .item-desc{
-      color: #acafb3;
-      background-color: #e9edf2;
+      color: #666;
+      background-color: #f8f9fa;
       font-size: .12rem;
-      padding: .06rem .1rem;
-      border-radius: .08rem;
+      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-color: #1f70ff;
+        background: linear-gradient(90deg, #1f70ff, #3a8cff);
         color: #fff;
-        padding: .05rem .1rem;
-        border-radius: .1rem;
-        font-size: 0.16rem;
+        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
index 6a37d7c..23cad08 100644
--- a/f/web-kboss/src/views/H5/cloud/index.vue
+++ b/f/web-kboss/src/views/H5/cloud/index.vue
@@ -11,7 +11,7 @@
         v-for="(value, index) in cloudData.secMenu"
         :key="index"
         class="supplier"
-        @click="toggleSupplier(index)"
+        @click="selectSupplier(index)"
       >
         <div
           class="supplier-title"
@@ -24,49 +24,80 @@
 
     <!-- 云产品 -->
     <div class="box">
-      <!-- 循环所有分类下的产品 -->
-      <template v-if="cloudData.secMenu && cloudData.secMenu.length > 0">
-        <template v-for="secMenu in cloudData.secMenu">
-          <template v-for="thrMenu in secMenu.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">
-                {{ product.label }}
-              </div>
-              <!-- 立即咨询 -->
-              <div class="item-btn">
-                <div class="btn">
-                  立即咨询
-                </div>
+      <!-- 只显示当前选中的供应商的产品 -->
+      <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">
+              {{ product.label }}
+            </div>
+            <!-- 立即咨询 -->
+            <div class="item-btn">
+              <div class="btn" @click="openConsultDialog(product, thrMenu)">
+                立即咨询
               </div>
             </div>
-          </template>
+          </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 // 默认选中第一个供应商
+      activeSupplierIndex: 0, // 默认选中第一个供应商
+
+      // 咨询弹窗相关
+      showConsultDialog: false,
+      platformName: '开元云',
+      qrCode: '',
+      consultFormData: {
+        content: '',
+        custom_type: '1',
+        name: '',
+        phone: '',
+        company: '',
+        email: '',
+        checked: false
+      },
+      currentProduct: null,
+      currentCategory: null
     }
   },
   created() {
@@ -84,19 +115,72 @@ export default {
         }
       }
     },
-    // 切换供应商选中状态
-    toggleSupplier(index) {
-      // 如果点击的是已选中的供应商，则取消选中
-      if (this.activeSupplierIndex === index) {
-        this.activeSupplierIndex = -1
-      } else {
-        // 否则选中点击的供应商
-        this.activeSupplierIndex = index
+
+    // 选择供应商（不允许取消选中）
+    selectSupplier(index) {
+      this.activeSupplierIndex = index
+    },
+
+    // 打开咨询弹窗
+    openConsultDialog(product, category) {
+      this.currentProduct = product
+      this.currentCategory = category
+
+      // 设置咨询表单的预填内容
+      this.consultFormData = {
+        ...this.consultFormData,
+        content: `我想咨询关于【${product.name}】的产品信息\n产品描述：${product.description}\n产品标签：${product.label}`
+      }
+
+      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)
+
+      // 临时返回成功，请替换为实际API调用
+      return { status: true, msg: '咨询提交成功' }
+    },
+
+    // 咨询成功回调
+    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 {
diff --git a/f/web-kboss/src/views/H5/index.vue b/f/web-kboss/src/views/H5/index.vue
index dd66240..2470056 100644
--- a/f/web-kboss/src/views/H5/index.vue
+++ b/f/web-kboss/src/views/H5/index.vue
@@ -97,6 +97,7 @@
 </template>
 
 <script>
+  import './media.js'
 export default {
   name: 'H5HomePage',
   data() {
@@ -156,6 +157,17 @@ export default {
     }
   }
 };
+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>
diff --git a/f/web-kboss/src/views/H5/net/index.vue b/f/web-kboss/src/views/H5/net/index.vue
index 020eabc..a468c8d 100644
--- a/f/web-kboss/src/views/H5/net/index.vue
+++ b/f/web-kboss/src/views/H5/net/index.vue
@@ -6,54 +6,99 @@
     </div>
 
     <!-- 供应商 -->
-    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier">
-      <div class="supplier-title">{{ cloudData.secMenu[0].secTitle }}</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">
-        <template v-for="secMenu in cloudData.secMenu">
-          <template v-for="thrMenu in secMenu.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">
-                  立即咨询
-                </div>
+      <!-- 只显示当前选中的供应商的产品 -->
+      <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>
-          </template>
+          </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() {
@@ -61,15 +106,77 @@ export default {
   },
   methods: {
     async getCloudData() {
-      const res = await reqNavList()
+      const res = await reqNavList({ url_link: window.location.href })
       if (res.status == true) {
         this.cloudData = res.data.product_service[2]
-        console.log(this.cloudData);
+        // 确保有数据时选中第一个
+        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 {
@@ -86,19 +193,43 @@ export default {
   -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 {
-
-  display: flex;
-  padding: .22rem ;
+  flex-shrink: 0; /* 防止收缩 */
 
   .supplier-title {
     font-size: .2rem;
     color: #000;
-    padding: .1rem .16rem;
-    background-color: pink;
-    border-radius: 0.08rem;
+    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);
+    }
   }
 }
 
@@ -115,37 +246,58 @@ export default {
     align-items: self-start;
     border: .02rem solid #f0f0f0;
     border-radius: .2rem;
-    padding: .1rem 0.1rem;
+    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: .14rem;
+      font-size: .16rem;
       color: #000;
+      font-weight: bold;
+      margin-bottom: .1rem;
     }
     .item-detail{
-      color: #737373;
-      font-size: .12rem;
-      margin: .26rem 0;
+      color: #666;
+      font-size: .13rem;
+      margin: .15rem 0;
+      line-height: 1.4;
     }
     .item-desc{
-      color: #acafb3;
-      background-color: #e9edf2;
+      color: #666;
+      background-color: #f8f9fa;
       font-size: .12rem;
-      padding: .06rem .1rem;
-      border-radius: .08rem;
+      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-color: #1f70ff;
+        background: linear-gradient(90deg, #1f70ff, #3a8cff);
         color: #fff;
-        padding: .05rem .1rem;
-        border-radius: .1rem;
-        font-size: 0.16rem;
+        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/official/index.vue b/f/web-kboss/src/views/H5/official/index.vue
index 7b04fe7..f1628ab 100644
--- a/f/web-kboss/src/views/H5/official/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>
@@ -149,13 +144,15 @@
             </li>
             <li>邮箱：Open-computing@kaiyuancloud.cn</li>
             <li>IPC备案号: {{ ICP }}
-              <span class="copyright">版权所有 @kaiyuanyun 2023</span>
             </li>
             <li>
+              版权所有 @kaiyuanyun 2023
+            </li>
+            <li >
               <img src="@/image/login/policeInsignia/policeInsignia.png" alt="公安备案图标" class="police-icon">
               <a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010502054007" rel="noreferrer" target="_blank"
                 class="police-link">京公网安备11010502054007</a>
-              <span>
+                 <span>
                 <router-link tag="a" target="_blank" class="license-link"
                   :to="{ name: 'homePageImage' }">经营许可证:京B2-20232313</router-link>
               </span>
@@ -170,23 +167,34 @@
           </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 +216,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 +315,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 +410,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
index adbd236..2251d91 100644
--- a/f/web-kboss/src/views/H5/use/index.vue
+++ b/f/web-kboss/src/views/H5/use/index.vue
@@ -6,54 +6,99 @@
     </div>
 
     <!-- 供应商 -->
-    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier">
-      <div class="supplier-title">{{ cloudData.secMenu[0].secTitle }}</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">
-        <template v-for="secMenu in cloudData.secMenu">
-          <template v-for="thrMenu in secMenu.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">
-                  立即咨询
-                </div>
+      <!-- 只显示当前选中的供应商的产品 -->
+      <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>
-          </template>
+          </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() {
@@ -61,15 +106,76 @@ export default {
   },
   methods: {
     async getCloudData() {
-      const res = await reqNavList()
+      const res = await reqNavList({ url_link: window.location.href })
       if (res.status == true) {
         this.cloudData = res.data.product_service[3]
-        console.log(this.cloudData);
+        // 确保有数据时选中第一个
+        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 {
@@ -86,17 +192,43 @@ export default {
   -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 {
-  display: flex;
-  padding: .22rem ;
+  flex-shrink: 0; /* 防止收缩 */
+
   .supplier-title {
     font-size: .2rem;
     color: #000;
-    padding: .1rem .16rem;
-    background-color: pink;
-    border-radius: 0.08rem;
+    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);
+    }
   }
 }
 
@@ -113,34 +245,56 @@ export default {
     align-items: self-start;
     border: .02rem solid #f0f0f0;
     border-radius: .2rem;
-    padding: .1rem 0.1rem;
+    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: .14rem;
+      font-size: .16rem;
       color: #000;
+      font-weight: bold;
+      margin-bottom: .1rem;
     }
     .item-detail{
-      color: #737373;
-      font-size: .12rem;
-      margin: .26rem 0;
+      color: #666;
+      font-size: .13rem;
+      margin: .15rem 0;
+      line-height: 1.4;
     }
     .item-desc{
-      color: #acafb3;
-      background-color: #e9edf2;
+      color: #666;
+      background-color: #f8f9fa;
       font-size: .12rem;
-      padding: .06rem .1rem;
-      border-radius: .08rem;
+      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-color: #1f70ff;
+        background: linear-gradient(90deg, #1f70ff, #3a8cff);
         color: #fff;
-        padding: .05rem .1rem;
-        border-radius: .1rem;
-        font-size: 0.16rem;
+        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);
+        }
       }
     }
   }