updata

f/web-kboss/src/api/H5/index.js

@@ -1,9 +1,31 @@
 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 reqNewHomeConsult = (data) => {
+  return request({
+    url: '/product/add_user_inquiry.dspy',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    data
+  })
+}

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

@@ -85,7 +85,7 @@ export const constantRoutes = [
     path: '/h5HomePage',
     name: 'H5HomePage',
     title: 'H5首页',
-    component: () => import('@/views/H5/indexPage/index.vue'),
+    component: () => import('@/views/H5/calculate/index.vue'),
     hidden: true,
   },
 

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

@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="top-tit">
+      开元云
+    </div>
+
+    <!-- 供应商 -->
+    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier">
+      <div class="supplier-title">{{ cloudData.secMenu[0].secTitle }}</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>
+              </div>
+            </div>
+          </template>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reqNavList } from '@/api/H5/index'
+export default {
+  data() {
+    return {
+      cloudData: {},
+    }
+  },
+  created() {
+    this.getCloudData()
+  },
+  methods: {
+    async getCloudData() {
+      const res = await reqNavList()
+      if (res.status == true) {
+        this.cloudData = res.data.product_service[1]
+        console.log(this.cloudData);
+      }
+    }
+  }
+}
+</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;
+}
+
+.supplier {
+
+  display: flex;
+  padding: .22rem ;
+
+  .supplier-title {
+    font-size: .2rem;
+    color: #000;
+    padding: .1rem .16rem;
+    background-color: pink;
+    border-radius: 0.08rem;
+  }
+}
+
+.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: .1rem 0.1rem;
+    margin: .34rem 0;
+    .item-tit{
+      font-size: .14rem;
+      color: #000;
+    }
+    .item-detail{
+      color: #737373;
+      font-size: .12rem;
+      margin: .26rem 0;
+    }
+    .item-desc{
+      color: #acafb3;
+      background-color: #e9edf2;
+      font-size: .12rem;
+      padding: .06rem .1rem;
+      border-radius: .08rem;
+    }
+    .item-btn{
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      .btn{
+        background-color: #1f70ff;
+        color: #fff;
+        padding: .05rem .1rem;
+        border-radius: .1rem;
+        font-size: 0.16rem;
+      }
+    }
+  }
+}
+</style>
+

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

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="top-tit">
+      开元云
+    </div>
+
+    <!-- 供应商 -->
+    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier">
+      <div class="supplier-title">{{ cloudData.secMenu[0].secTitle }}</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">
+                {{ product.label }}
+              </div>
+              <!-- 立即咨询 -->
+              <div class="item-btn">
+                <div class="btn">
+                  立即咨询
+                </div>
+              </div>
+            </div>
+          </template>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reqNavList } from '@/api/H5/index'
+export default {
+  data() {
+    return {
+      cloudData: {},
+    }
+  },
+  created() {
+    this.getCloudData()
+  },
+  methods: {
+    async getCloudData() {
+      const res = await reqNavList()
+      if (res.status == true) {
+        this.cloudData = res.data.product_service[0]
+        console.log(this.cloudData);
+      }
+    }
+  }
+}
+</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;
+}
+
+.supplier {
+
+  display: flex;
+  padding: .22rem ;
+
+  .supplier-title {
+    font-size: .2rem;
+    color: #000;
+    padding: .1rem .16rem;
+    background-color: pink;
+    border-radius: 0.08rem;
+  }
+}
+
+.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: .1rem 0.1rem;
+    margin: .34rem 0;
+    .item-tit{
+      font-size: .14rem;
+      color: #000;
+    }
+    .item-detail{
+      color: #737373;
+      font-size: .12rem;
+      margin: .26rem 0;
+    }
+    .item-desc{
+      color: #acafb3;
+      background-color: #e9edf2;
+      font-size: .12rem;
+      padding: .06rem .1rem;
+      border-radius: .08rem;
+    }
+    .item-btn{
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      .btn{
+        background-color: #1f70ff;
+        color: #fff;
+        padding: .05rem .1rem;
+        border-radius: .1rem;
+        font-size: 0.16rem;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="main">
+      
+    </div>
+    <div class="tabBar">
+      <!-- 首页 -->
+      <div class="tabBar-item">
+        <div class="item-img">
+          <img src="./images/tabBar/home.png" alt="" />
+        </div>
+        <div class="item-text">
+          首页
+        </div>
+      </div>
+      <!-- 云 -->
+      <div class="tabBar-item">
+        <div class="item-img">
+          <img src="./images/tabBar/cloud.png" alt="" />
+        </div>
+        <div class="item-text">
+          云
+        </div>
+      </div>
+      <!-- 算 -->
+      <div class="tabBar-item">
+        <div class="item-img">
+          <img src="./images/tabBar/calculate.png" alt="" />
+        </div>
+        <div class="item-text">
+          算
+        </div>
+      </div>
+      <!-- 网 -->
+      <div class="tabBar-item">
+        <div class="item-img">
+          <img src="./images/tabBar/net.png" alt="" />
+        </div>
+        <div class="item-text">
+          网
+        </div>
+      </div>
+      <!-- 用 -->
+      <div class="tabBar-item">
+        <div class="item-img">
+          <img src="./images/tabBar/user.png" alt="" />
+        </div>
+        <div class="item-text">
+          用
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import './media'
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+
+  },
+
+
+}
+</script>
+
+<style lang="less" scoped>
+.tabBar {
+  padding: .1rem 0;
+  background-color: #fff;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  position: fixed;
+  bottom: 0;
+  .tabBar-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .item-img {
+    margin-bottom: .1rem;
+    img {
+      width: .3rem;
+      height: .3rem;
+      display: block;
+    }
+  }
+
+  .item-text {
+    font-size: .14rem;
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="top-tit">
+      开元云
+    </div>
+
+    <!-- 供应商 -->
+    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier">
+      <div class="supplier-title">{{ cloudData.secMenu[0].secTitle }}</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>
+              </div>
+            </div>
+          </template>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reqNavList } from '@/api/H5/index'
+export default {
+  data() {
+    return {
+      cloudData: {},
+    }
+  },
+  created() {
+    this.getCloudData()
+  },
+  methods: {
+    async getCloudData() {
+      const res = await reqNavList()
+      if (res.status == true) {
+        this.cloudData = res.data.product_service[2]
+        console.log(this.cloudData);
+      }
+    }
+  }
+}
+</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;
+}
+
+.supplier {
+
+  display: flex;
+  padding: .22rem ;
+
+  .supplier-title {
+    font-size: .2rem;
+    color: #000;
+    padding: .1rem .16rem;
+    background-color: pink;
+    border-radius: 0.08rem;
+  }
+}
+
+.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: .1rem 0.1rem;
+    margin: .34rem 0;
+    .item-tit{
+      font-size: .14rem;
+      color: #000;
+    }
+    .item-detail{
+      color: #737373;
+      font-size: .12rem;
+      margin: .26rem 0;
+    }
+    .item-desc{
+      color: #acafb3;
+      background-color: #e9edf2;
+      font-size: .12rem;
+      padding: .06rem .1rem;
+      border-radius: .08rem;
+    }
+    .item-btn{
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      .btn{
+        background-color: #1f70ff;
+        color: #fff;
+        padding: .05rem .1rem;
+        border-radius: .1rem;
+        font-size: 0.16rem;
+      }
+    }
+  }
+}
+</style>
+

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

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <!-- 标题 -->
+    <div class="top-tit">
+      开元云
+    </div>
+
+    <!-- 供应商 -->
+    <div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier">
+      <div class="supplier-title">{{ cloudData.secMenu[0].secTitle }}</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>
+              </div>
+            </div>
+          </template>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reqNavList } from '@/api/H5/index'
+export default {
+  data() {
+    return {
+      cloudData: {},
+    }
+  },
+  created() {
+    this.getCloudData()
+  },
+  methods: {
+    async getCloudData() {
+      const res = await reqNavList()
+      if (res.status == true) {
+        this.cloudData = res.data.product_service[3]
+        console.log(this.cloudData);
+      }
+    }
+  }
+}
+</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;
+}
+
+.supplier {
+  display: flex;
+  padding: .22rem ;
+  .supplier-title {
+    font-size: .2rem;
+    color: #000;
+    padding: .1rem .16rem;
+    background-color: pink;
+    border-radius: 0.08rem;
+  }
+}
+
+.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: .1rem 0.1rem;
+    margin: .34rem 0;
+    .item-tit{
+      font-size: .14rem;
+      color: #000;
+    }
+    .item-detail{
+      color: #737373;
+      font-size: .12rem;
+      margin: .26rem 0;
+    }
+    .item-desc{
+      color: #acafb3;
+      background-color: #e9edf2;
+      font-size: .12rem;
+      padding: .06rem .1rem;
+      border-radius: .08rem;
+    }
+    .item-btn{
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      .btn{
+        background-color: #1f70ff;
+        color: #fff;
+        padding: .05rem .1rem;
+        border-radius: .1rem;
+        font-size: 0.16rem;
+      }
+    }
+  }
+}
+</style>