yumoqing/kboss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updata

Browse Source
This commit is contained in:
hrx 2025-12-10 11:24:25 +08:00
parent 2c8d447116
commit 9914ded40a
3 changed files with 192 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
f/web-kboss/src/router/index.js
View File

@ -85,9 +85,51 @@ export const constantRoutes = [
path: '/h5HomePage',
name: 'H5HomePage',
title: 'H5首页',
component: () => import('@/views/H5/calculate/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",
},
},
]
},
{

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

@ -10,7 +10,7 @@
<div class="supplier-title">{{ cloudData.secMenu[0].secTitle }}</div>
</div>
<!-- 云产品 -->
<!-- 产品 -->
<div class="box">
<!-- 循环所有分类下的产品 -->
<template v-if="cloudData.secMenu && cloudData.secMenu.length > 0">

169
f/web-kboss/src/views/H5/index.vue
View File

@ -1,49 +1,92 @@
<template>
<div>
<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">
<div
class="tabBar-item"
:class="{ active: activeTab === 'index' }"
@click="switchTab('index')"
>
<div class="item-img">
<img src="./images/tabBar/home.png" alt="" />
<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">
<div
class="tabBar-item"
:class="{ active: activeTab === 'cloud' }"
@click="switchTab('cloud')"
>
<div class="item-img">
<img src="./images/tabBar/cloud.png" alt="" />
<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">
<div
class="tabBar-item"
:class="{ active: activeTab === 'calculate' }"
@click="switchTab('calculate')"
>
<div class="item-img">
<img src="./images/tabBar/calculate.png" alt="" />
<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">
<div
class="tabBar-item"
:class="{ active: activeTab === 'net' }"
@click="switchTab('net')"
>
<div class="item-img">
<img src="./images/tabBar/net.png" alt="" />
<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">
<div
class="tabBar-item"
:class="{ active: activeTab === 'use' }"
@click="switchTab('use')"
>
<div class="item-img">
<img src="./images/tabBar/user.png" alt="" />
<img
:src="activeTab === 'use' ? require('./images/tabBar/userColor.png') : require('./images/tabBar/user.png')"
alt="用"
/>
</div>
<div class="item-text">
用
@ -54,48 +97,130 @@
</template>
<script>
import './media'
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);
}
},
methods: {
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;
}
}
}
};
</script>
<style lang="less" scoped>
.h5-container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.main {
flex: 1;
overflow-y: auto;/* 为底部导航栏留出空间 */
}
.tabBar {
padding: .1rem 0;
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: .1rem;
margin-bottom: .05rem;
img {
width: .3rem;
height: .3rem;
width: .24rem;
height: .24rem;
display: block;
transition: transform 0.3s ease;
}
}
.item-text {
font-size: .14rem;
font-size: .12rem;
color: #666;
transition: color 0.3s ease;
}
}
</style>