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

uptada

Browse Source
This commit is contained in:
hrx 2025-09-26 15:50:33 +08:00
parent dc514871b6
commit 92707a8eab
4 changed files with 370 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
f/web-kboss/src/layout/components/Navbar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="navbar" style="height: 48px;background-color: white;color: white!important;"> <div class="navbar" style="background-color: white;color: white!important;">
<div class="logo" v-if="isShowKbossCharge"> <div class="logo" v-if="isShowKbossCharge">
<img @click="$router.push('/product/productHome')" src="./img/img.png" alt="" class="img"> <img @click="$router.push('/product/productHome')" src="./img/img.png" alt="" class="img">
<span style="color: #423f3f;font-size: 20px;margin-left: 15px">平台充值中心</span> <span style="color: #423f3f;font-size: 20px;margin-left: 15px">平台充值中心</span>
@ -1413,7 +1413,7 @@ export default {
.navbar { .navbar {
height: 50px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #fff; background: #fff;

1
f/web-kboss/src/layout/components/Sidebar/index.vue
View File

@ -6,7 +6,6 @@
<Logo v-if="showLogo" :collapse="isCollapse" /> <Logo v-if="showLogo" :collapse="isCollapse" />
<!-- 菜单 --> <!-- 菜单 -->
<happy-scroll color="rgba(0,0,0,0.5)" size="5" class="menu-scroll-container"> <happy-scroll color="rgba(0,0,0,0.5)" size="5" class="menu-scroll-container">
<el-menu <el-menu
:collapse="isCollapse" :collapse="isCollapse"
:background-color="variables.menuBg" :background-color="variables.menuBg"

102
f/web-kboss/src/views/customer/unsubscribe/BaiduNetdisk.vue/index.vue
View File

@ -1,12 +1,31 @@
<template> <template>
<div class="box"> <div class="box">
<!-- 添加全屏加载效果 --> <!-- 使用全屏加载效果 -->
<div v-loading="loading" class="loading-container"> <div v-loading="loading"
<iframe v-if="url" :src="url" frameborder="0" class="baidu-style"> element-loading-text="页面加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.8)"
class="loading-container">
<iframe
v-if="url && !loading"
:src="url"
frameborder="0"
class="baidu-style"
@load="onIframeLoad">
</iframe> </iframe>
<div v-else class="login-prompt">
<p>请先登录百度云账号</p> <div v-if="!url && !loading" class="login-prompt">
<button @click="getToken">重试</button> <el-alert
title="登录提示"
description="请先登录百度云账号"
type="warning"
show-icon
:closable="false">
</el-alert>
<el-button type="primary" @click="getToken" style="margin-top: 20px;">
重新获取登录信息
</el-button>
</div> </div>
</div> </div>
</div> </div>
@ -24,6 +43,7 @@ export default {
url: '', url: '',
loading: true, loading: true,
userid: '', userid: '',
iframeLoading: false // 单独控制iframe加载状态
} }
}, },
async created() { async created() {
@ -40,8 +60,11 @@ export default {
async getToken() { async getToken() {
try { try {
this.loading = true; this.loading = true;
this.url = ''; // 清空url，避免显示旧的iframe
const response = await baiducloudAPI(); const response = await baiducloudAPI();
this.userToken = response.data; this.userToken = response.data;
if (this.userToken) { if (this.userToken) {
const baseUrl = 'https://console.vcp.baidu.com/api/loginvcp/login/securitytoken'; const baseUrl = 'https://console.vcp.baidu.com/api/loginvcp/login/securitytoken';
const redirectUrl = encodeURIComponent('https://console.vcp.baidu.com/billing/#/refund/list'); const redirectUrl = encodeURIComponent('https://console.vcp.baidu.com/billing/#/refund/list');
@ -55,64 +78,68 @@ export default {
console.error('获取百度云Token失败:', error); console.error('获取百度云Token失败:', error);
this.$message.error('网络错误，获取登录信息失败'); this.$message.error('网络错误，获取登录信息失败');
} finally { } finally {
this.loading = false; // 这里不立即关闭loading，等待iframe加载
} }
}, },
// iframe加载完成回调
onIframeLoad() {
console.log('iframe加载完成');
this.loading = false;
this.iframeLoading = false;
},
receiveMessage(event) { receiveMessage(event) {
console.log('接收到消息:', event); console.log('接收到消息:', event);
const data = event.data; const data = event.data;
console.log('接收到的 data 是:', data); console.log('接收到的 data 是:', data);
// 2. 检查是否存在 refundInfo 和 uuidList
if (data && data.refundInfo && Array.isArray(data.refundInfo.uuidList) && data.refundInfo.uuidList.length > 0) { if (data && data.refundInfo && Array.isArray(data.refundInfo.uuidList) && data.refundInfo.uuidList.length > 0) {
const uuidListArray = data.refundInfo.uuidList; // 这是一个数组 const uuidListArray = data.refundInfo.uuidList;
console.log('提取到的订单ID:', uuidListArray); console.log('提取到的订单ID:', uuidListArray);
// 4. 获取用户ID
this.userid = sessionStorage.getItem('userId'); this.userid = sessionStorage.getItem('userId');
if (!this.userid) { if (!this.userid) {
console.error('未获取到用户ID (sessionStorage 中缺少 userId)'); console.error('未获取到用户ID');
this.$message.error('用户信息获取失败，请重新登录'); this.$message.error('用户信息获取失败，请重新登录');
return; return;
} }
// 5. 构造请求参数
const payload = { const payload = {
order_id: uuidListArray, order_id: uuidListArray,
userid: this.userid userid: this.userid
}; };
// 6. 显示加载状态 // 显示退订操作的加载状态
this.loading = true; const loadingInstance = this.$loading({
lock: true,
text: '退订处理中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// 7. 调用退订API
reqConfirmBtn(payload) reqConfirmBtn(payload)
.then((res) => { .then((res) => {
console.log("调用 reqBaiduJudgePrice 接口返回:", res); console.log("退订接口返回:", res);
if (res.status) { // 假设 status 为 true 表示成功 if (res.status) {
this.$message.success('退订成功'); this.$message.success('退订成功');
// 修复页面跳转 - 使用 path 而不是 url
this.$router.push({ this.$router.push({
path: '/BaiduNetdisk', path: '/BaiduNetdisk',
}); });
} else { } else {
// 显示后端返回的错误信息
this.$message.error(res.msg || '退订失败，请稍后重试'); this.$message.error(res.msg || '退订失败，请稍后重试');
} }
}) })
.catch((error) => { .catch((error) => {
// 捕获网络错误或请求异常 (如超时、连接失败) console.error("退订接口调用失败:", error);
console.error("调用退订接口 reqBaiduJudgePrice 失败 (网络/请求错误):", error); this.$message.error('网络请求失败，请检查网络连接后重试');
this.$message.error('网络请求失败或服务异常，请检查网络连接后重试');
}) })
.finally(() => { .finally(() => {
// 无论成功或失败，都结束加载状态 loadingInstance.close();
this.loading = false;
}); });
} else { } else {
console.log('接收到的消息不包含有效的退款信息或 uuidList 为空'); console.log('接收到的消息不包含有效的退款信息');
} }
} }
} }
@ -123,21 +150,44 @@ export default {
.box { .box {
padding: 10px; padding: 10px;
height: 100%; height: 100%;
position: relative;
} }
.loading-container { .loading-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
min-height: 400px;
} }
.login-prompt { .login-prompt {
text-align: center; text-align: center;
padding: 50px; padding: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
} }
.baidu-style { .baidu-style {
width: 100%; width: 100%;
height: calc(100vh - 100px); height: calc(100vh - 100px);
border: none;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
} }
</style>
// 自定义加载样式
::v-deep .el-loading-spinner {
.el-icon-loading {
color: #409EFF;
font-size: 40px;
}
.el-loading-text {
color: #409EFF;
font-size: 16px;
margin-top: 10px;
}
}
</style>

504
f/web-kboss/src/views/homePage/components/topBox/index.vue
View File

@ -1,55 +1,77 @@
<template> <template>
<div class="top-nav"> <div class="top-nav">
<!-- 顶部容器，根据homePath决定布局样式 -->
<div id="topContainer" class="container" :class="{ 'ncmatch-layout': homePath === '/ncmatchHome/index' }"> <div id="topContainer" class="container" :class="{ 'ncmatch-layout': homePath === '/ncmatchHome/index' }">
<!-- 当homePath不等于/ncmatchHome/index时显示logo和导航 --> <!-- 当homePath不等于/ncmatchHome/index时显示logo和导航 -->
<div class="logo" v-if="homePath !== '/ncmatchHome/index'"> <div class="logo" v-if="homePath !== '/ncmatchHome/index'">
<img v-if="JSON.stringify(logoInfoNew) !== '{}'" @click="$router.push(homePath)" <!-- Logo图片，点击跳转首页 -->
style="cursor:pointer;margin-right: 71px" class="logoImg" :src="logoInfoNew.home.logoImg || ''" alt=""> <img v-if="JSON.stringify(logoInfoNew) !== '{}'" @click="$router.push(homePath)" style="cursor:pointer;"
class="logoImg" :src="logoInfoNew.home.logoImg || ''" alt="">
<!-- 主导航菜单 -->
<nav class="main-nav" v-if="!isNcmatchHome"> <nav class="main-nav" v-if="!isNcmatchHome">
<ul> <div class="nav-list">
<li :class="{ active: $route.path.includes('/index') }"> <!-- 首页 -->
<a @click="$router.push(homePath)">首页</a> <p :class="{ active: $route.path.includes('/index') }">
</li> <a @click="$router.push(homePath)">{{ translations[language].home }}</a>
<li @mouseleave="sildeOut" @mouseenter="sildeIn(product_service)"><a>产品与服务</a></li> </p>
<!-- <li :class="{ active: $route.path.includes('/new') }" @mouseleave="sildeOut"--> <!-- 最新活动 -->
<!-- ><a--> <p>
<!-- >政策解读</a></li>--> <a>{{ translations[language].latestActivity }}</a>
<!-- <li :class="{ active: $route.path.includes('/sale') }" @mouseleave="sildeOut"--> </p>
<!-- ><a--> <!-- ai -->
<!-- >促销活动</a></li>--> <p>
<!-- <li @mouseleave="sildeOut" @mouseenter="sildeIn(storageData())"><a href="#">解决方案</a></li>--> <a>AI</a>
<li :class="{ active: $route.path.includes('/about') }" @mouseleave="sildeOut" </p>
@click="$router.push('/homePage/about')"><a>关于我们</a></li> <!-- 融合云 -->
<p>
<a>{{ translations[language].fusionCloud }}</a>
</ul> </p>
<!-- 解决方案 -->
<p>
<a>{{ translations[language].solutions }}</a>
</p>
<!-- 生态与合作：鼠标移入显示子菜单 -->
<p @mouseleave="sildeOut" @mouseenter="sildeIn(product_service)">
<a>{{ translations[language].ecosystem }}</a>
</p>
<!-- 关于我们 -->
<p :class="{ active: $route.path.includes('/about') }" @mouseleave="sildeOut"
@click="$router.push('/homePage/about')">
<a>{{ translations[language].aboutUs }}</a>
</p>
</div>
</nav> </nav>
</div> </div>
<!-- 当homePath等于/ncmatchHome/index时的布局 --> <!-- 当homePath等于/ncmatchHome/index时的布局 -->
<div class="logo" v-else> <div class="logo" v-else>
<!-- 登录状态：用户头像在最左侧 --> <!-- 登录状态下，左侧显示用户信息下拉菜单 -->
<el-dropdown v-if="loginState" @visible-change="handleShow" <el-dropdown v-if="loginState" @visible-change="handleShow"
class="avatar-container left-menu-item hover-effect nick-name-style" style="margin-right: 0" trigger="click"> class="avatar-container left-menu-item hover-effect nick-name-style" style="margin-right: 0" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<!-- 显示用户名首字母头像和用户名 -->
<i <i
style="font-size: 18px; color: #262626;font-weight: 400;cursor: pointer;display: flex;justify-content: flex-start;align-items: center"> style="font-size: 18px; color: #262626;font-weight: 400;cursor: pointer;display: flex;justify-content: flex-start;align-items: center">
<div class="imgUser">{{ nick_name.charAt(0) }}</div> <div class="imgUser">{{ nick_name.charAt(0) }}</div>
{{ nick_name }} {{ nick_name }}
<!-- 下拉箭头图标 -->
<i id="resverIcon" class="el-icon-arrow-up el-icon--right resverIcon"></i> <i id="resverIcon" class="el-icon-arrow-up el-icon--right resverIcon"></i>
</i> </i>
</div> </div>
<!-- 用户信息下拉菜单内容 -->
<el-dropdown-menu slot="dropdown" style="width: 230px;font-size: 16px;" divided> <el-dropdown-menu slot="dropdown" style="width: 230px;font-size: 16px;" divided>
<!-- 用户信息头部 -->
<div style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5"> <div style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5">
<span style="font-weight: bold;font-size: 20px;margin-bottom: 5px;color: #333333">{{ nick_name }}</span> <span style="font-weight: bold;font-size: 20px;margin-bottom: 5px;color: #333333">{{ nick_name }}</span>
<span style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID: <span style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID:
<!-- 用户ID，点击复制按钮可复制 -->
<span ref="contentToCopy"> <span ref="contentToCopy">
{{ {{
userId userId
}} }}
</span> </span>
<!-- 复制按钮 -->
<svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" <svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
width="12" height="12" style="fill: #1019ab;"> width="12" height="12" style="fill: #1019ab;">
<path <path
@ -58,72 +80,97 @@
</svg> </svg>
</span> </span>
</div> </div>
<!-- 分割线 -->
<el-divider style="margin: 0!important;"></el-divider> <el-divider style="margin: 0!important;"></el-divider>
<!-- 客户角色余额和充值按钮 -->
<div v-if="role.includes('客户')" <div v-if="role.includes('客户')"
style="padding: 0 18px; width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center"> style="padding: 0 18px; width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center">
<span style="color:#666;display: block;font-size: 14px;" class="moneyNow"><span <span style="color:#666;display: block;font-size: 14px;" class="moneyNow"><span
style="display: block;margin-bottom: 5px">余额</span>{{ style="display: block;margin-bottom: 5px">{{ translations[language].balance }}</span>{{
mybalance ? mybalance : initMybalance() mybalance ? mybalance : initMybalance()
}} ￥</span> }} ￥</span>
<el-button v-if="!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain <el-button v-if="!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain
style="padding: 8px; "> style="padding: 8px; ">
充值 {{ translations[language].recharge }}
</el-button> </el-button>
</div> </div>
<!-- 个人中心菜单项 -->
<el-dropdown-item v-if="role.includes('客户')" @click.native="$router.push('/customer/customerInformation')"> <el-dropdown-item v-if="role.includes('客户')" @click.native="$router.push('/customer/customerInformation')">
<span style="display: block">个人中心</span> <span style="display: block">{{ translations[language].personalCenter }}</span>
</el-dropdown-item> </el-dropdown-item>
<!-- 退出登录菜单项 -->
<el-dropdown-item @click.native="logout"> <el-dropdown-item @click.native="logout">
<span style="display: block">退出登录</span> <span style="display: block">{{ translations[language].logout }}</span>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<!-- 公司名称在中间 --> <!-- 公司名称居中显示，点击跳转首页 -->
<div class="company-name" @click="$router.push(homePath)" <div class="company-name" @click="$router.push(homePath)"
style="cursor:pointer;font-size: 24px;font-weight: bold;color: #222F60;margin: 0 auto;"> style="cursor:pointer;font-size: 24px;font-weight: bold;color: #222F60;margin: 0 auto;">
{{ (logoInfoNew.home && logoInfoNew.home.orgName) || '' }} {{ (logoInfoNew.home && logoInfoNew.home.orgName) || '' }}
</div> </div>
</div> </div>
<!-- 用户区域：登录/注册按钮和用户下拉菜单 -->
<div class="user-area"> <div class="user-area">
<a @click="goB" v-if="loginState" class="login-btn">控制台</a> <!-- 搜索框 -->
<div class="search-box">
<i class="el-icon-search"></i>
<input type="text" :placeholder="translations[language].searchPlaceholder">
</div>
<!-- 中英互译 -->
<div class="language-toggle " @click="toggleLanguage">
<span class="language-text">{{ language === 'zh' ? 'English' : '中' }}</span>
</div>
<!-- AI -->
<i class="el-icon-s-promotion functions"></i>
<!-- 客服 -->
<i class="el-icon-headset functions"></i>
<!-- 控制台按钮（已登录） -->
<a @click="goB" v-if="loginState" class="login-btn">{{ translations[language].console }}</a>
<!-- 消息 -->
<i class="el-icon-message functions"></i>
<!-- 登录按钮（未登录） -->
<a @click="$router.push({ <a @click="$router.push({
path: '/login', path: '/login',
query: { query: {
fromPath: 'homePage' fromPath: 'homePage'
} }
})" v-if="!loginState" class="login-btn">登录</a> })" v-if="!loginState" class="login-btn">{{ translations[language].login }}</a>
<a @click="$router.push('/registrationPage')" v-if="!loginState" class="register-btn">立即注册</a> <!-- 注册按钮（未登录） -->
<!-- <span style="text-decoration: underline; text-decoration-color: #1b5bff" v-if="!showRegisterButton">{{--> <a @click="$router.push('/registrationPage')" v-if="!loginState" class="register-btn">{{
<!-- username--> translations[language].register }}</a>
<!-- }}</span>-->
<!-- 用户名（注释掉） -->
<!-- <span style="text-decoration: underline; text-decoration-color: #1b5bff" v-if="!showRegisterButton">{{ username }}</span> -->
<!-- 用户下拉菜单（非ncmatchHome页面且已登录） -->
<el-dropdown v-if="loginState && homePath !== '/ncmatchHome/index'" @visible-change="handleShow" <el-dropdown v-if="loginState && homePath !== '/ncmatchHome/index'" @visible-change="handleShow"
class="avatar-container right-menu-item hover-effect nick-name-style" style="margin-right: 0" trigger="click"> class="avatar-container right-menu-item hover-effect nick-name-style" style="margin-right: 0" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<!-- <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> --> <!-- 显示用户名首字母头像和用户名 -->
<i <i
style="font-size: 18px; color: #262626;font-weight: 400;cursor: pointer;display: flex;justify-content: flex-end;align-items: center"> style="font-size: 18px; color: #262626;font-weight: 400;cursor: pointer;display: flex;justify-content: flex-end;align-items: center">
<div class="imgUser">{{ nick_name.charAt(0) }}</div> <div class="imgUser"><img src="/static/img/user.png" alt=""></div>
{{ nick_name }} {{ nick_name }}
<!-- 下拉箭头图标 -->
<i id="resverIcon" class="el-icon-arrow-up el-icon--right resverIcon"></i> <i id="resverIcon" class="el-icon-arrow-up el-icon--right resverIcon"></i>
<!-- <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
</i> </i>
<!-- <div class="block"><el-avatar shape="square" size=small :src="squareUrl"></el-avatar></div> -->
</div> </div>
<!-- 用户信息下拉菜单内容 -->
<el-dropdown-menu slot="dropdown" style="width: 230px;font-size: 16px;" divided> <el-dropdown-menu slot="dropdown" style="width: 230px;font-size: 16px;" divided>
<!-- 用户信息头部 -->
<div style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5"> <div style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5">
<span style="font-weight: bold;font-size: 20px;margin-bottom: 5px;color: #333333">{{ nick_name }}</span> <span style="font-weight: bold;font-size: 20px;margin-bottom: 5px;color: #333333">{{ nick_name }}</span>
<span style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID: <span style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID:
<!-- 用户ID，点击复制按钮可复制 -->
<span ref="contentToCopy"> <span ref="contentToCopy">
{{ {{
userId userId
}} }}
</span> </span>
<!-- 复制按钮 -->
<svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" <svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
width="12" height="12" style="fill: #1019ab;"> width="12" height="12" style="fill: #1019ab;">
<path <path
@ -132,97 +179,81 @@
</svg> </svg>
</span> </span>
</div> </div>
<!-- 分割线 -->
<el-divider style="margin: 0!important;"></el-divider> <el-divider style="margin: 0!important;"></el-divider>
<!-- 客户角色余额和充值按钮 -->
<div v-if="role.includes('客户')" <div v-if="role.includes('客户')"
style="padding: 0 18px; width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center"> style="padding: 0 18px; width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center">
<span style="color:#666;display: block;font-size: 14px;" class="moneyNow"><span <span style="color:#666;display: block;font-size: 14px;" class="moneyNow"><span
style="display: block;margin-bottom: 5px">余额</span>{{ style="display: block;margin-bottom: 5px">{{ translations[language].balance }}</span>{{
mybalance ? mybalance : initMybalance() mybalance ? mybalance : initMybalance()
}} ￥</span> }} ￥</span>
<el-button v-if="!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain <el-button v-if="!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain
style="padding: 8px; "> style="padding: 8px; ">
充值 {{ translations[language].recharge }}
</el-button> </el-button>
</div> </div>
<!-- 个人中心菜单项 -->
<el-dropdown-item v-if="role.includes('客户')" @click.native="$router.push('/customer/customerInformation')"> <el-dropdown-item v-if="role.includes('客户')" @click.native="$router.push('/customer/customerInformation')">
<span style="display: block">个人中心</span> <span style="display: block">{{ translations[language].personalCenter }}</span>
</el-dropdown-item> </el-dropdown-item>
<!-- channelManagementShow=true--> <!-- 退出登录菜单项 -->
<!-- v-if="role.includes('客户')"-->
<!-- <el-dropdown-item v-if="role.includes('客户')"-->
<!-- @click.native="channelFirstBtn">-->
<!-- <span style="display: block">渠道管理</span>-->
<!-- </el-dropdown-item>-->
<!-- <el-dropdown-item v-if="role.includes('客户')">-->
<!-- <span style="display: block" @click="showCode">促销邀请码</span>-->
<!-- </el-dropdown-item>-->
<!-- <el-dropdown-item @click.native="edituserPassword()">-->
<!-- <span style="display: block">修改密码</span>-->
<!-- </el-dropdown-item>-->
<!-- <el-dropdown-item @click.native="personalMessage" v-if="org_type == 2 || org_type == 3">
<span style="display: block">个人信息</span>
</el-dropdown-item> -->
<el-dropdown-item @click.native="logout"> <el-dropdown-item @click.native="logout">
<span style="display: block">退出登录</span> <span style="display: block">{{ translations[language].logout }}</span>
</el-dropdown-item> </el-dropdown-item>
<!-- <el-dropdown-item v-if="isLocalhost" @click.native="logout1">-->
<!-- <span style="display: block">退登</span>-->
<!-- </el-dropdown-item>-->
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<!-- <div @mouseleave="sildeOut" @mouseenter="keepPanel" v-show="isShowPanel" class="panel">--> <!-- 悬浮面板：显示生态与合作的详细子菜单 -->
<div @mouseleave="sildeOut" @mouseenter="keepPanel" v-show="isShowPanel" class="panel"> <div @mouseleave="sildeOut" @mouseenter="keepPanel" v-show="isShowPanel" class="panel">
<div class="inPanel"> <div class="inPanel">
<!-- 左侧面板：一级和二级菜单 -->
<div class="panelLeft"> <div class="panelLeft">
<ul class="outUl"> <ul class="outUl">
<li style="cursor: default" class="outLi" v-for="item in showPanelData" :key="item.firTitle"> <li style="cursor: default" class="outLi" v-for="item in showPanelData" :key="item.firTitle">
<!-- @mouseenter="sildeItemIn(item)"-->
<span style="cursor: default!important;" :class="['tilte', 'activeFir']"> <span style="cursor: default!important;" :class="['tilte', 'activeFir']">
{{ {{
item.firTitle translations[language][item.firTitle] || item.firTitle
}} }}
</span> </span>
<ul class="inUl"> <ul class="inUl">
<li class="inLi" v-for="i in item.secMenu" :key="i.id"> <li class="inLi" v-for="i in item.secMenu" :key="i.id">
<span style="position: relative" @mouseenter="sildeSecMenu(i)" <span style="position: relative" @mouseenter="sildeSecMenu(i)"
:class="['twoMenuStyle', secId === i.id ? 'activeSec' : '']">{{ i.secTitle }}</span> :class="['twoMenuStyle', secId === i.id ? 'activeSec' : '']">{{ translations[language][i.secTitle]
|| i.secTitle }}</span>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </div>
<!-- 分隔线 -->
<span class="ge"></span> <span class="ge"></span>
<!-- 左侧面板：三级菜单（如果存在且不等于二级菜单标题） -->
<div <div
v-if="secMenuData[0].thrMenu[0].thrTitle != null && secMenuData[0].secTitle !== secMenuData[0].thrMenu[0].thrTitle" v-if="secMenuData[0].thrMenu[0].thrTitle != null && secMenuData[0].secTitle !== secMenuData[0].thrMenu[0].thrTitle"
class="panelLeft"> class="panelLeft">
<ul> <ul>
<li style="font-size: 14px!important;" @mouseenter="sildeThrMenu(thr)" v-for="(thr, index) in threeData" <li style="font-size: 14px!important;" @mouseenter="sildeThrMenu(thr)" v-for="(thr, index) in threeData"
:key="index"> :key="index">
{{ thr.thrTitle }} {{ translations[language][thr.thrTitle] || thr.thrTitle }}
</li> </li>
</ul> </ul>
</div> </div>
<!-- 分隔线 -->
<span <span
v-if="secMenuData[0].thrMenu[0].thrTitle != null && secMenuData[0].secTitle !== secMenuData[0].thrMenu[0].thrTitle" v-if="secMenuData[0].thrMenu[0].thrTitle != null && secMenuData[0].secTitle !== secMenuData[0].thrMenu[0].thrTitle"
class="ge"></span> class="ge"></span>
<!-- 右侧面板：最细粒度的菜单项 -->
<div class="panelRight"> <div class="panelRight">
<!-- <span class="subTitle">{{ showPanelRightData[0].thrTitle }}</span>-->
<ul class="leastMenu inBox"> <ul class="leastMenu inBox">
<li class="clickItem" style="font-size: 14px!important;margin: 8px 0;cursor: pointer" <li class="clickItem" style="font-size: 14px!important;margin: 8px 0;cursor: pointer"
v-for="itemR in showPanelRightData[0].value" :key="itemR.id" @click="clickGo(itemR)"> v-for="itemR in showPanelRightData[0].value" :key="itemR.id" @click="clickGo(itemR)">
{{ translations[language][itemR.name] || itemR.name }} <span v-if="itemR.discount" class="zhe">{{
{{ itemR.name }} <span v-if="itemR.discount" class="zhe">{{ itemR.discount }}折</span> itemR.discount }}折</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
@ -231,48 +262,103 @@
<script> <script>
import Vue from 'vue' import Vue from 'vue'
// 导入测试数据（可能用于本地开发或模拟）
import { computingData, networkData, storageData, testData } from "@/views/homePage/components/topBox/testData"; import { computingData, networkData, storageData, testData } from "@/views/homePage/components/topBox/testData";
// 导入API请求函数
import { reqNavList, reqNewHomeFestival, reqNewHomeSync } from "@/api/newHome"; import { reqNavList, reqNewHomeFestival, reqNewHomeSync } from "@/api/newHome";
// 导入Vuex辅助函数
import { mapGetters, mapState } from "vuex"; import { mapGetters, mapState } from "vuex";
// 导入其他API函数
import { getLogoAPI, getUserInfoAPI } from "@/api/login"; import { getLogoAPI, getUserInfoAPI } from "@/api/login";
import { reqApplyChannel } from "@/api/customer/channel"; import { reqApplyChannel } from "@/api/customer/channel";
// 导入store实例
import store from "@/store"; import store from "@/store";
// 导入工具函数
import { getHomePath } from '@/views/setting/tools' import { getHomePath } from '@/views/setting/tools'
export default Vue.extend({ export default Vue.extend({
name: "TopBox", name: "TopBox",
data() { data() {
return { return {
homePath: getHomePath(), homePath: getHomePath(), // 首页路径
isShowKbossCharge: false, isShowKbossCharge: false, // 是否显示Kboss充值按钮
role: sessionStorage.getItem("jueseNew") == "admin" ? [] : sessionStorage.getItem("jueseNew"), role: sessionStorage.getItem("jueseNew") == "admin" ? [] : sessionStorage.getItem("jueseNew"), // 用户角色
userId: sessionStorage.getItem("userId"), userId: sessionStorage.getItem("userId"), // 用户ID
firId: "", firId: "", // 一级菜单ID
secId: "", secId: "", // 二级菜单ID
nick_name: "", // 初始化为空字符串 nick_name: "", // 用户昵称
showTimer: null, showTimer: null, // 显示面板的定时器
hideTimer: null, hideTimer: null, // 藏面板的定时器
showPanelData: [], showPanelData: [], // 展示的面板数据
secMenuData: [], secMenuData: [], // 二级菜单数据
showPanelRightData: [], showPanelRightData: [], // 展示的右侧面板数据
threeData: [], threeData: [], // 三级菜单数据
fourData: [], fourData: [], // 四级菜单数据（未使用）
product_service: [] product_service: [], // 产品服务数据
language: 'zh', // 默认语言
translations: {
zh: {
home: '首页',
latestActivity: '最新活动',
fusionCloud: '融合云',
solutions: '解决方案',
ecosystem: '生态与合作',
aboutUs: '关于我们',
balance: '余额',
recharge: '充值',
personalCenter: '个人中心',
logout: '退出登录',
searchPlaceholder: '搜索',
console: '控制台',
login: '登录',
register: '立即注册',
// 为菜单项添加中文翻译（如果需要）
},
en: {
home: 'Home',
latestActivity: 'Latest Activity',
fusionCloud: 'Fusion Cloud',
solutions: 'Solutions',
ecosystem: 'Ecosystem & Partnership',
aboutUs: 'About Us',
balance: 'Balance',
recharge: 'Recharge',
personalCenter: 'Personal Center',
logout: 'Logout',
searchPlaceholder: 'Search',
console: 'Console',
login: 'Login',
register: 'Register',
// 为菜单项添加英文翻译（如果需要）
}
}
} }
}, },
created() { created() {
// 组件创建时初始化homePath
this.homePath = getHomePath() this.homePath = getHomePath()
// 如果sessionStorage中有userId，则设置登录状态为true
if (sessionStorage.getItem('userId')) { if (sessionStorage.getItem('userId')) {
this.$store.commit('setLoginState', true); // 同步到 Vuex this.$store.commit('setLoginState', true); // 同步到 Vuex
} }
// 如果不需要显示注册按钮，则获取用户信息
!this.showRegisterButton && this.getUserInfo(); !this.showRegisterButton && this.getUserInfo();
// 初始化组件
this.init() this.init()
// 尝试从本地存储获取语言设置
const savedLanguage = localStorage.getItem('language');
if (savedLanguage && (savedLanguage === 'zh' || savedLanguage === 'en')) {
this.language = savedLanguage;
}
}, },
mounted() { mounted() {
// 组件挂载时，从sessionStorage获取用户名
if (sessionStorage.getItem("username")) { if (sessionStorage.getItem("username")) {
this.nick_name = sessionStorage.getItem("username"); this.nick_name = sessionStorage.getItem("username");
} }
// 滚动到顶部容器
this.$nextTick(() => { this.$nextTick(() => {
const topContainer = document.getElementById('topContainer'); const topContainer = document.getElementById('topContainer');
if (topContainer) { if (topContainer) {
@ -283,64 +369,45 @@ export default Vue.extend({
} }
}); });
// 初始化导航数据
this.initData() this.initData()
// this.showPanelData = this.testData()
// this.secMenuData = this.testData()[0].secMenu || []
// this.threeData = this.secMenuData[0].thrMenu || []
// let res = []
// res.push(this.secMenuData[0].thrMenu[0])
// this.showPanelRightData = res || []
}, },
watch: {},
computed: { computed: {
// 判断当前是否为ncmatchHome页面
isNcmatchHome() { isNcmatchHome() {
return window.location.href.includes('ncmatchHome') return window.location.href.includes('ncmatchHome')
}, },
// 映射Vuex中的getters
...mapGetters(["sidebar", "avatar", "device"]), ...mapGetters(["sidebar", "avatar", "device"]),
// 映射Vuex中的state
...mapState({ ...mapState({
isShowPanel: (state) => state.product.showHomeNav, isShowPanel: (state) => state.product.showHomeNav, // 是否显示导航面板
navIndex: (state) => state.product.navIndex, navIndex: (state) => state.product.navIndex, // 导航索引
gridObj: state => state.operationAnalysis.gridObj, gridObj: state => state.operationAnalysis.gridObj, // 未使用
mybalance: state => state.user.mybalance, mybalance: state => state.user.mybalance, // 用户余额
logoutUrl: state => state.login.logoutUrl, logoutUrl: state => state.login.logoutUrl, // 退出登录URL
loginStateVuex: state => state.login.loginState, loginStateVuex: state => state.login.loginState, // Vuex中的登录状态
logoInfoNew: state => state.product.logoInfoNew, logoInfoNew: state => state.product.logoInfoNew, // Logo信息
}), }),
// 计算登录状态：基于Vuex状态或sessionStorage中的userId
loginState() { loginState() {
const userId = sessionStorage.getItem('userId'); const userId = sessionStorage.getItem('userId');
return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== ''); return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '');
}, },
// 计算是否显示注册按钮：基于组织类型和用户登录状态
showRegisterButton() { showRegisterButton() {
const orgType = window.sessionStorage.getItem('org_type'); const orgType = window.sessionStorage.getItem('org_type');
const userId = window.sessionStorage.getItem('userId'); const userId = window.sessionStorage.getItem('userId');
console.log("此时是:", orgType !== '2' && orgType !== '3' && userId !== null) console.log("此时是:", orgType !== '2' && orgType !== '3' && userId !== null)
return orgType !== '2' && orgType !== '3' && userId === null; return orgType !== '2' && orgType !== '3' && userId === null;
}, },
// 计算用户名
username() { username() {
return sessionStorage.getItem('username') || ''; return sessionStorage.getItem('username') || '';
}, },
}, },
// watch: {
// navIndex: {
// immediate: true, // Optional: if you want to run the handler immediately on component creation
// handler(newVal, oldVal) {
// console.log("newValue", newVal)
// if (newVal === 0) {
// this.secId = '10'
// } else if (newVal === 1) {
// this.secId = '12'
// }
// // this.changeData(this.product_service);
// }
// }
// },
methods: { methods: {
// 控制台按钮点击事件：根据角色跳转不同页面
goB() { goB() {
if (sessionStorage.getItem('jueseNew').includes('客户')) { if (sessionStorage.getItem('jueseNew').includes('客户')) {
this.$router.push('/product/productHome') this.$router.push('/product/productHome')
@ -348,11 +415,15 @@ export default Vue.extend({
this.$router.push('/operation/supplierManagement') this.$router.push('/operation/supplierManagement')
} }
}, },
// 切换语言
toggleLanguage() {
this.language = this.language === 'zh' ? 'en' : 'zh';
localStorage.setItem('language', this.language);
},
// 初始化Logo信息
init() { init() {
// let params = {
// url_link: this.GetQueryString(window.location.href)
// }
let remoteUrl = '' let remoteUrl = ''
// 根据环境设置API基础URL
if (window.location.href.includes("dev")) { if (window.location.href.includes("dev")) {
remoteUrl = 'https://www.kaiyuancloud.cn/dev/reseller/get_ipc_logo.dspy' remoteUrl = 'https://www.kaiyuancloud.cn/dev/reseller/get_ipc_logo.dspy'
} else if (window.location.href.includes("localhost")) { } else if (window.location.href.includes("localhost")) {
@ -361,19 +432,14 @@ export default Vue.extend({
remoteUrl = 'https://www.kaiyuancloud.cn/reseller/get_ipc_logo.dspy' remoteUrl = 'https://www.kaiyuancloud.cn/reseller/get_ipc_logo.dspy'
} }
let params = { let params = {
url_link: window.location.href.split("#")[0] url_link: window.location.href.split("#")[0] // 获取当前页面URL
// url_link: 'https://www.baidu.com'
} }
getLogoAPI(params).then((res) => { getLogoAPI(params).then((res) => {
console.log("获取接口触发了") console.log("获取接口触发了")
// if (res.data.status == true && res.data.data && res.data.data.length) {
// this.photosUrl = res.data.data[0];
if (res.status == true && res.data && res.data.length) { if (res.status == true && res.data && res.data.length) {
console.log("res.data[0].additional_msg", res.data[0].additional_msg) console.log("res.data[0].additional_msg", res.data[0].additional_msg)
// this.$store.commit('setLogoInfo', res.data[0]); // 提交Logo信息到Vuex
this.$store.commit('setLogoInfoNew', res.data[0].additional_msg); this.$store.commit('setLogoInfoNew', res.data[0].additional_msg);
this.isShow = true this.isShow = true
if (res.data[0].orgname == '中关村数智人工智能产业联盟') { if (res.data[0].orgname == '中关村数智人工智能产业联盟') {
@ -399,32 +465,11 @@ export default Vue.extend({
} }
}); });
}, },
async logout() {//退出登录 // 退出登录
this.$store.commit('setLoginState', false) async logout() {
// logout() { this.$store.commit('setLoginState', false) // 设置Vuex登录状态为false
// await this.$store.dispatch('auth/removeToken')
// logoutAPI().then((res) => {
// // console.log(res);
// });
//获取当前url // 清除本地存储
let url = window.location.href;
//判断url中是否包含domain_name字段
// if (!url.includes('domain_name')) {
// //跳转到https://www.opencomputing.cn/
// window.location.href = 'https://www.opencomputing.cn/';
//
// } else {
// await this.$router.push(`/homePage?redirect=${this.$route.fullPath}`);
// }
// this.showRegisterButton = fa
// if (this.logoutUrl) {
// window.location.href = this.logoutUrl
// } else {mo
// window.location.href = 'https://www.opencomputing.cn/';
// }
store.commit('tagsView/resetBreadcrumbState'); store.commit('tagsView/resetBreadcrumbState');
sessionStorage.removeItem("auths"); sessionStorage.removeItem("auths");
sessionStorage.removeItem("routes"); sessionStorage.removeItem("routes");
@ -439,13 +484,16 @@ export default Vue.extend({
localStorage.removeItem("org_type") localStorage.removeItem("org_type")
localStorage.removeItem('userId') localStorage.removeItem('userId')
// 如果当前页面不是首页，则跳转到首页
if (!window.location.href.includes('homePage/index')) { if (!window.location.href.includes('homePage/index')) {
await this.$router.push(getHomePath()); await this.$router.push(getHomePath());
} }
}, },
edituserPassword() {//修改密码 // 修改密码（未完全实现）
edituserPassword() {
this.passwordDialog = true; this.passwordDialog = true;
}, },
// 申请渠道管理
channelFirstBtn() { channelFirstBtn() {
reqApplyChannel({ user_id: this.userId }).then(res => { reqApplyChannel({ user_id: this.userId }).then(res => {
if (res.code == "100" || res.code == "210") { if (res.code == "100" || res.code == "210") {
@ -457,20 +505,21 @@ export default Vue.extend({
} }
}) })
}, },
// 初始化余额（从sessionStorage获取）
initMybalance() { initMybalance() {
return sessionStorage.getItem('mybalance') return sessionStorage.getItem('mybalance')
}, },
copyBtn() {//个人信息复制id // 复制用户ID
copyBtn() {
const textToCopy = this.$refs.contentToCopy.innerText; const textToCopy = this.$refs.contentToCopy.innerText;
navigator.clipboard.writeText(textToCopy).then(() => { navigator.clipboard.writeText(textToCopy).then(() => {
this.$message.success('复制成功！') this.$message.success('复制成功！')
}).catch((error) => { }).catch((error) => {
console.error('复制失败', error); console.error('复制失败', error);
}); });
}, },
async getUserInfo() { //获取个人信息 // 获取用户信息
async getUserInfo() {
getUserInfoAPI({ id: this.userId }).then((res) => { getUserInfoAPI({ id: this.userId }).then((res) => {
if (res.status) { if (res.status) {
// this.nick_name = res.data[0].nick_name; // this.nick_name = res.data[0].nick_name;
@ -484,28 +533,30 @@ export default Vue.extend({
} }
}); });
}, },
// 处理下拉菜单显示/隐藏时的图标旋转
handleShow(isShow) { handleShow(isShow) {
let resverNode = document.getElementById('resverIcon') let resverNode = document.getElementById('resverIcon')
if (isShow) { if (isShow) {
if (this.role.includes('客户')) { if (this.role.includes('客户')) {
this.$store.dispatch('user/getCustmoersMoney') this.$store.dispatch('user/getCustmoersMoney') // 获取客户余额
} }
resverNode.style.transform = 'rotate(180deg)' resverNode.style.transform = 'rotate(180deg)' // 旋转图标
} else { } else {
resverNode.style.transform = 'rotate(0)' resverNode.style.transform = 'rotate(0)' // 恢复图标
} }
}, },
// 鼠标进入三级菜单项
sildeThrMenu(item) { sildeThrMenu(item) {
console.log("it", item) console.log("it", item)
let res = [] let res = []
res.push(item) res.push(item)
this.showPanelRightData = res this.showPanelRightData = res
}, },
// 点击菜单项进行跳转或打开新窗口
clickGo(item) { clickGo(item) {
this.$store.commit('setShowHomeNav', false) this.$store.commit('setShowHomeNav', false) // 隐藏导航面板
console.log("电机的item是", item) console.log("电机的item是", item)
let userId = sessionStorage.getItem('userId') let userId = sessionStorage.getItem('userId')
const orgType = window.sessionStorage.getItem('org_type'); const orgType = window.sessionStorage.getItem('org_type');
@ -513,6 +564,7 @@ export default Vue.extend({
console.log("userId", userId) console.log("userId", userId)
if (item.type === '百度云') { if (item.type === '百度云') {
if (this.loginState) { if (this.loginState) {
// 百度云产品跳转逻辑
this.$store.commit('setRedirectUrl', item.url) this.$store.commit('setRedirectUrl', item.url)
localStorage.setItem('redirectUrl', item.url) localStorage.setItem('redirectUrl', item.url)
localStorage.setItem('userRescourseUrl', item.listUrl) localStorage.setItem('userRescourseUrl', item.listUrl)
@ -536,21 +588,20 @@ export default Vue.extend({
} }
} else if (item.type === '阿里云') { } else if (item.type === '阿里云') {
if (this.loginState) { if (this.loginState) {
// 阿里云同步和节日活动逻辑
reqNewHomeSync().then(response => { reqNewHomeSync().then(response => {
if (response.status) { if (response.status) {
reqNewHomeFestival().then(res => { reqNewHomeFestival().then(res => {
if (res.status) { if (res.status) {
window.open(res.data) window.open(res.data) // 打开阿里云页面
} else { } else {
this.$message.warning(res.msg) this.$message.warning(res.msg)
} }
}) })
} else { } else {
this.$message.warning(response.msg) this.$message.warning(response.msg)
} }
}) })
} else { } else {
this.$router.push({ this.$router.push({
path: "/login", path: "/login",
@ -581,13 +632,13 @@ export default Vue.extend({
} }
}) })
} }
} else if (item.name === '灵医智能体') { } else if (item.name === '灵医智能体') {
this.$router.push('/homePage/hospital') this.$router.push('/homePage/hospital')
} else if (item.name === '客悦·智能客服') { } else if (item.name === '客悦·智能客服') {
this.$router.push('/homePage/customerService') this.$router.push('/homePage/customerService')
} }
}, },
// 改变面板数据
changeData(data) { changeData(data) {
this.showPanelData = data this.showPanelData = data
@ -616,11 +667,12 @@ export default Vue.extend({
this.showPanelRightData = [] this.showPanelRightData = []
} }
}, },
// 初始化导航数据
initData() { initData() {
reqNavList({ url_link: window.location.href }).then(res => { reqNavList({ url_link: window.location.href }).then(res => {
console.log("res", res.data.product_service) console.log("res", res.data.product_service)
if (res.status) { if (res.status) {
this.product_service = this.buildData(res.data.product_service) this.product_service = this.buildData(res.data.product_service) // 构建数据结构
this.changeData(this.product_service) this.changeData(this.product_service)
} }
}).catch(error => { }).catch(error => {
@ -628,6 +680,7 @@ export default Vue.extend({
// 可以设置一些默认数据或显示错误信息 // 可以设置一些默认数据或显示错误信息
}) })
}, },
// 构建导航数据结构
buildData(data) { buildData(data) {
let res = []; let res = [];
data.forEach(item => { data.forEach(item => {
@ -646,8 +699,8 @@ export default Vue.extend({
} }
}); });
return data; // 返回修改后的原始数据 return data; // 返回修改后的原始数据
// 或者如果你想返回新的res数组，可以根据需要调整
}, },
// 鼠标进入二级菜单项
sildeSecMenu(item) { sildeSecMenu(item) {
console.log("获取的item时", item) console.log("获取的item时", item)
this.secId = item.id this.secId = item.id
@ -670,6 +723,7 @@ export default Vue.extend({
this.showPanelRightData = this.threeData this.showPanelRightData = this.threeData
}, },
// 返回测试数据（未使用）
networkData() { networkData() {
return networkData return networkData
}, },
@ -679,34 +733,31 @@ export default Vue.extend({
testData() { testData() {
return testData return testData
}, },
// 鼠标进入一级菜单项
sildeItemIn(item) { sildeItemIn(item) {
this.firId = item.id this.firId = item.id
this.secId = item.secMenu[0].id this.secId = item.secMenu[0].id
console.log("获取的item时", item) console.log("获取的item时", item)
this.secMenuData = item.secMenu || [] this.secMenuData = item.secMenu || []
this.showPanelRightData = this.secMenuData[0].thrMenu || [] this.showPanelRightData = this.secMenuData[0].thrMenu || []
}, },
computingData() { computingData() {
return computingData return computingData
}, },
// 鼠标进入生态与合作菜单
sildeIn(item) { sildeIn(item) {
console.log("sildeIn", item) console.log("sildeIn", item)
this.changeData(item) this.changeData(item)
// this.showPanelData = item
// this.showPanelRightData = item[0].subMenu || []
if (this.hideTimer) { if (this.hideTimer) {
clearTimeout(this.hideTimer) clearTimeout(this.hideTimer)
} }
// 延时显示面板，避免鼠标快速移动时面板闪烁 // 延时显示面板，避免鼠标快速移动时面板闪烁
this.showTimer = setTimeout(() => { this.showTimer = setTimeout(() => {
// this.isShowPanel = true
this.$store.commit('setShowHomeNav', true) this.$store.commit('setShowHomeNav', true)
}, 100) }, 100)
}, },
// 鼠标离开导航区域
sildeOut() { sildeOut() {
// return
if (this.showTimer) { if (this.showTimer) {
clearTimeout(this.showTimer) clearTimeout(this.showTimer)
} }
@ -715,8 +766,8 @@ export default Vue.extend({
this.$store.commit('setShowHomeNav', false) this.$store.commit('setShowHomeNav', false)
}, 200) }, 200)
}, },
// 鼠标进入面板区域，取消隐藏
keepPanel() { keepPanel() {
// 鼠标进入面板时取消隐藏
if (this.hideTimer) { if (this.hideTimer) {
clearTimeout(this.hideTimer) clearTimeout(this.hideTimer)
} }
@ -725,7 +776,7 @@ export default Vue.extend({
}) })
</script> </script>
<style scoped lang="scss"> <style scoped lang="less">
.top-nav { .top-nav {
font-size: 18px !important; font-size: 18px !important;
@ -734,10 +785,8 @@ export default Vue.extend({
} }
font-weight: 500; font-weight: 500;
/* 使用数字值代替bold更精确 */
color: #222F60 !important; color: #222F60 !important;
position: relative; position: relative;
height: 84px;
background-color: #fff; background-color: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
width: 100%; width: 100%;
@ -754,32 +803,36 @@ export default Vue.extend({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 18px 30px; padding: 10px 20px;
} }
.logo { .logo {
display: flex; display: flex;
justify-content: flex-start;
align-items: center; align-items: center;
.logoImg {
width: 148px;
}
} }
.main-nav { .main-nav {
margin-left: 44px;
z-index: 10000; z-index: 10000;
ul { .nav-list {
display: flex; display: flex;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
li { p {
height: 100%; height: 100%;
padding: 0 15px; padding-right: 40px;
position: relative; position: relative;
a { a {
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 18px !important;
padding: 5px 0; padding: 5px 0;
transition: all 0.3s; transition: all 0.3s;
@ -792,16 +845,6 @@ export default Vue.extend({
color: #1E6FFF; color: #1E6FFF;
font-weight: bold; font-weight: bold;
} }
//&.active:after {
// content: '';
// position: absolute;
// bottom: -10px;
// left: 0;
// width: 100%;
// height: 2px;
// background: #1E6FFF;
//}
} }
} }
} }
@ -810,16 +853,47 @@ export default Vue.extend({
display: flex; display: flex;
align-items: center; align-items: center;
a { .search-box {
padding: 8px 16px; display: flex;
align-items: center;
border: 2px solid #d2d7e6;
border-radius: 8px;
padding: 8px;
input {
margin-left: 10px;
border: 0;
outline: none;
}
}
.language-toggle {
cursor: pointer;
margin:20px;
width: 60px;
text-align: center;
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
text-decoration: none; text-decoration: none;
margin-left: 10px; transition: all 0.3s;
color: #333;
&:hover {
color: #1E6FFF;
}
}
a {
// padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
text-decoration: none;
// margin-left: 10px;
transition: all 0.3s; transition: all 0.3s;
} }
.login-btn { .login-btn {
margin-right: 20px;
color: #333; color: #333;
&:hover { &:hover {
@ -828,7 +902,7 @@ export default Vue.extend({
} }
.register-btn { .register-btn {
height: 50px; // height: 50px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -840,11 +914,18 @@ export default Vue.extend({
opacity: 0.9; opacity: 0.9;
} }
} }
.functions{
padding-right:20px;
&:hover{
color: #1E6FFF;
}
}
} }
} }
.panel { .panel {
.inPanel { .inPanel {
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
@ -890,7 +971,7 @@ export default Vue.extend({
&:hover { &:hover {
cursor: pointer; cursor: pointer;
color: blue; color:#1E6FFF;
} }
} }
} }
@ -944,7 +1025,6 @@ export default Vue.extend({
} }
.leastMenu { .leastMenu {
overflow-y: auto; overflow-y: auto;
.inBox { .inBox {