|
|
|
@ -32,98 +32,73 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 顶部浮动导航栏 - 重新设计 --> |
|
|
|
<div class="floating-header blue-theme"> |
|
|
|
<!-- 左侧：Logo和系统名称 --> |
|
|
|
<!-- 顶部浮动导航栏 - 最终优化设计 --> |
|
|
|
<div class="floating-header"> |
|
|
|
<div class="header-left"> |
|
|
|
<div class="system-logo"> |
|
|
|
<i class="el-icon-s-promotion logo-icon"></i> |
|
|
|
<span class="system-name">联合作战筹划系统</span> |
|
|
|
<div class="system-title"> |
|
|
|
<i class="el-icon-s-promotion mr-2 logo-icon"></i> |
|
|
|
<span class="title-text blue-title">联合任务筹划系统</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 导航菜单 --> |
|
|
|
<div class="nav-menu"> |
|
|
|
<!-- 顶部导航菜单 --> |
|
|
|
<div class="top-nav-menu"> |
|
|
|
<div |
|
|
|
v-for="item in navMenuItems" |
|
|
|
v-for="item in topNavItems" |
|
|
|
:key="item.id" |
|
|
|
class="nav-menu-item" |
|
|
|
:class="{ active: activeNavMenu === item.id }" |
|
|
|
@click="selectNavMenu(item)" |
|
|
|
class="top-nav-item" |
|
|
|
:class="{ active: activeTopNav === item.id }" |
|
|
|
@click="selectTopNav(item)" |
|
|
|
> |
|
|
|
<i :class="item.icon" class="nav-icon"></i> |
|
|
|
<span class="nav-text">{{ item.name }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 右侧：作战信息和用户状态 --> |
|
|
|
<div class="header-right"> |
|
|
|
<!-- 作战信息 --> |
|
|
|
<div class="combat-info"> |
|
|
|
<div class="info-item"> |
|
|
|
<i class="el-icon-time info-icon"></i> |
|
|
|
<!-- 作战信息区域 --> |
|
|
|
<div class="combat-info-group"> |
|
|
|
<!-- 房间编号 --> |
|
|
|
<div class="info-box"> |
|
|
|
<i class="el-icon-office-building info-icon"></i> |
|
|
|
<div class="info-content"> |
|
|
|
<div class="info-label">作战时间</div> |
|
|
|
<div class="info-value">{{ combatTime }}</div> |
|
|
|
<div class="info-label">房间编号</div> |
|
|
|
<div class="info-value">{{ roomCode }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="info-item"> |
|
|
|
<i class="el-icon-sunny info-icon"></i> |
|
|
|
<!-- 在线人数 --> |
|
|
|
<div class="info-box"> |
|
|
|
<i class="el-icon-user info-icon"></i> |
|
|
|
<div class="info-content"> |
|
|
|
<div class="info-label">天文时间</div> |
|
|
|
<div class="info-value">{{ astroTime }}</div> |
|
|
|
<div class="info-label">在线人数</div> |
|
|
|
<div class="info-value">{{ onlineCount }}人</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="info-item"> |
|
|
|
<i class="el-icon-office-building info-icon"></i> |
|
|
|
<!-- 作战时间 --> |
|
|
|
<div class="info-box"> |
|
|
|
<i class="el-icon-timer info-icon"></i> |
|
|
|
<div class="info-content"> |
|
|
|
<div class="info-label">房间编号</div> |
|
|
|
<div class="info-value">{{ roomCode }}</div> |
|
|
|
<div class="info-label">作战时间</div> |
|
|
|
<div class="info-value">{{ combatTime }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="info-item"> |
|
|
|
<i class="el-icon-user info-icon"></i> |
|
|
|
<!-- 天文时间 --> |
|
|
|
<div class="info-box"> |
|
|
|
<i class="el-icon-sunny info-icon"></i> |
|
|
|
<div class="info-content"> |
|
|
|
<div class="info-label">在线人数</div> |
|
|
|
<div class="info-value">{{ onlineCount }}人</div> |
|
|
|
<div class="info-label">天文时间</div> |
|
|
|
<div class="info-value">{{ astroTime }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 用户状态区域 --> |
|
|
|
<div class="user-status"> |
|
|
|
<!-- 导入按钮 --> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
size="mini" |
|
|
|
icon="el-icon-upload2" |
|
|
|
class="blue-btn import-btn" |
|
|
|
@click="importData" |
|
|
|
> |
|
|
|
导入 |
|
|
|
</el-button> |
|
|
|
|
|
|
|
<!-- 导出按钮 --> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
size="mini" |
|
|
|
icon="el-icon-download" |
|
|
|
class="blue-btn export-btn" |
|
|
|
@click="exportReport" |
|
|
|
> |
|
|
|
导出 |
|
|
|
</el-button> |
|
|
|
|
|
|
|
<div class="user-status-area"> |
|
|
|
<!-- 用户头像 --> |
|
|
|
<el-avatar :size="32" :src="userAvatar" class="user-avatar" /> |
|
|
|
|
|
|
|
<!-- 在线状态 --> |
|
|
|
<div class="online-status"> |
|
|
|
<span class="dot online"></span> |
|
|
|
<span class="text">在线</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -449,24 +424,24 @@ export default { |
|
|
|
name: 'MissionPlanningView', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
// 导航菜单 |
|
|
|
activeNavMenu: 'file', |
|
|
|
navMenuItems: [ |
|
|
|
{ id: 'file', name: '文件' }, |
|
|
|
{ id: 'edit', name: '编辑' }, |
|
|
|
{ id: 'view', name: '视图' }, |
|
|
|
{ id: 'map', name: '地图' }, |
|
|
|
{ id: 'airspace', name: '空域' }, |
|
|
|
{ id: 'tools', name: '工具' }, |
|
|
|
{ id: 'options', name: '选项' }, |
|
|
|
{ id: 'favorites', name: '收藏' } |
|
|
|
// 顶部导航 |
|
|
|
activeTopNav: 'file', |
|
|
|
topNavItems: [ |
|
|
|
{ id: 'file', name: '文件', icon: 'el-icon-document' }, |
|
|
|
{ id: 'edit', name: '编辑', icon: 'el-icon-edit' }, |
|
|
|
{ id: 'view', name: '视图', icon: 'el-icon-view' }, |
|
|
|
{ id: 'map', name: '地图', icon: 'el-icon-map-location' }, |
|
|
|
{ id: 'airspace', name: '空域', icon: 'el-icon-s-grid' }, |
|
|
|
{ id: 'tools', name: '工具', icon: 'el-icon-setting' }, |
|
|
|
{ id: 'options', name: '选项', icon: 'el-icon-s-tools' }, |
|
|
|
{ id: 'favorites', name: '收藏', icon: 'el-icon-star-on' } |
|
|
|
], |
|
|
|
|
|
|
|
// 作战信息 |
|
|
|
combatTime: 'K+01:15:30', |
|
|
|
astroTime: '2023-10-15 14:30:00', |
|
|
|
roomCode: 'CMD-ALPHA-01', |
|
|
|
onlineCount: 5, |
|
|
|
roomCode: 'JTF-7-ALPHA', |
|
|
|
onlineCount: 30, |
|
|
|
combatTime: 'K+01:30:45', |
|
|
|
astroTime: '', |
|
|
|
|
|
|
|
// 左侧菜单栏 |
|
|
|
isMenuHidden: true, // 是否完全隐藏左侧菜单 |
|
|
|
@ -560,11 +535,43 @@ export default { |
|
|
|
this.isMenuHidden = true; |
|
|
|
// 初始化时右侧面板隐藏 |
|
|
|
this.isRightPanelHidden = true; |
|
|
|
|
|
|
|
// 更新时间 |
|
|
|
this.updateTime(); |
|
|
|
setInterval(this.updateTime, 1000); |
|
|
|
// 作战时间也需要实时更新 |
|
|
|
setInterval(this.updateCombatTime, 1000); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 导航菜单操作 |
|
|
|
selectNavMenu(item) { |
|
|
|
this.activeNavMenu = item.id; |
|
|
|
updateTime() { |
|
|
|
const now = new Date(); |
|
|
|
const year = now.getFullYear(); |
|
|
|
const month = (now.getMonth() + 1).toString().padStart(2, '0'); |
|
|
|
const day = now.getDate().toString().padStart(2, '0'); |
|
|
|
const hours = now.getHours().toString().padStart(2, '0'); |
|
|
|
const minutes = now.getMinutes().toString().padStart(2, '0'); |
|
|
|
const seconds = now.getSeconds().toString().padStart(2, '0'); |
|
|
|
this.astroTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
|
|
|
}, |
|
|
|
|
|
|
|
updateCombatTime() { |
|
|
|
// 模拟作战时间（K时）的更新 |
|
|
|
// 这里简单模拟，实际应该根据业务逻辑计算 |
|
|
|
const now = new Date(); |
|
|
|
const baseSeconds = 5400; // 1小时30分钟 = 5400秒 |
|
|
|
const currentSeconds = now.getSeconds() + now.getMinutes() * 60 + now.getHours() * 3600; |
|
|
|
const combatSeconds = baseSeconds + (currentSeconds % 86400); |
|
|
|
|
|
|
|
const hours = Math.floor(combatSeconds / 3600); |
|
|
|
const minutes = Math.floor((combatSeconds % 3600) / 60); |
|
|
|
const seconds = combatSeconds % 60; |
|
|
|
|
|
|
|
this.combatTime = `K+${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
|
|
|
}, |
|
|
|
|
|
|
|
// 顶部导航菜单操作 |
|
|
|
selectTopNav(item) { |
|
|
|
this.activeTopNav = item.id; |
|
|
|
this.$message.info(`选择菜单: ${item.name}`); |
|
|
|
}, |
|
|
|
|
|
|
|
@ -727,7 +734,8 @@ export default { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: linear-gradient(135deg, #1a2f4b 0%, #2c3e50 100%); |
|
|
|
background-image: url('~@/assets/map-background.png'); |
|
|
|
/* 正确的写法，直接复制这行替换 */ |
|
|
|
background: url('~@/assets/map-background.png'); |
|
|
|
background-size: cover; |
|
|
|
background-position: center; |
|
|
|
z-index: 1; |
|
|
|
@ -870,108 +878,115 @@ export default { |
|
|
|
color: #008aff; |
|
|
|
} |
|
|
|
|
|
|
|
/* 顶部导航栏 - 重新设计 */ |
|
|
|
/* 顶部导航栏 - 最终优化设计 */ |
|
|
|
.floating-header { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
height: 70px; |
|
|
|
padding: 0 25px; |
|
|
|
border-radius: 0 0 12px 12px; |
|
|
|
height: 60px; |
|
|
|
padding: 0 20px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
z-index: 100; |
|
|
|
backdrop-filter: blur(20px); |
|
|
|
border: none; |
|
|
|
box-shadow: 0 4px 20px rgba(0, 138, 255, 0.25); |
|
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
|
border-bottom: 2px solid rgba(0, 138, 255, 0.3); |
|
|
|
backdrop-filter: blur(15px); |
|
|
|
background: rgba(255, 255, 255, 0.85); |
|
|
|
border-bottom: 1px solid rgba(0, 138, 255, 0.2); |
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.header-left { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 40px; |
|
|
|
gap: 25px; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.system-logo { |
|
|
|
.system-title { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 12px; |
|
|
|
padding-right: 25px; |
|
|
|
border-right: 1px solid rgba(0, 138, 255, 0.3); |
|
|
|
font-size: 18px; |
|
|
|
font-weight: bold; |
|
|
|
min-width: 180px; |
|
|
|
} |
|
|
|
|
|
|
|
.logo-icon { |
|
|
|
font-size: 28px; |
|
|
|
.system-title i { |
|
|
|
font-size: 24px; |
|
|
|
color: #008aff; |
|
|
|
text-shadow: 0 0 10px rgba(0, 138, 255, 0.5); |
|
|
|
background: linear-gradient(135deg, #008aff, #0066cc); |
|
|
|
-webkit-background-clip: text; |
|
|
|
-webkit-text-fill-color: transparent; |
|
|
|
background-clip: text; |
|
|
|
} |
|
|
|
|
|
|
|
.system-name { |
|
|
|
font-size: 22px; |
|
|
|
font-weight: 800; |
|
|
|
color: #008aff; |
|
|
|
text-shadow: 0 2px 4px rgba(0, 138, 255, 0.2); |
|
|
|
letter-spacing: 1px; |
|
|
|
background: linear-gradient(135deg, #008aff, #0066cc); |
|
|
|
-webkit-background-clip: text; |
|
|
|
-webkit-text-fill-color: transparent; |
|
|
|
background-clip: text; |
|
|
|
.blue-title { |
|
|
|
color: #008aff !important; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-menu { |
|
|
|
/* 顶部导航菜单 - 优化为简洁文字效果 */ |
|
|
|
.top-nav-menu { |
|
|
|
display: flex; |
|
|
|
gap: 0; |
|
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
|
border-radius: 8px; |
|
|
|
padding: 4px; |
|
|
|
border: 1px solid rgba(0, 138, 255, 0.2); |
|
|
|
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.1); |
|
|
|
backdrop-filter: blur(5px); |
|
|
|
flex: 1; |
|
|
|
overflow-x: auto; |
|
|
|
max-width: 800px; |
|
|
|
padding: 5px 0; |
|
|
|
scrollbar-width: thin; |
|
|
|
} |
|
|
|
|
|
|
|
.top-nav-menu::-webkit-scrollbar { |
|
|
|
height: 3px; |
|
|
|
} |
|
|
|
|
|
|
|
.top-nav-menu::-webkit-scrollbar-track { |
|
|
|
background: rgba(0, 138, 255, 0.1); |
|
|
|
border-radius: 2px; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-menu-item { |
|
|
|
padding: 8px 20px; |
|
|
|
.top-nav-menu::-webkit-scrollbar-thumb { |
|
|
|
background: rgba(0, 138, 255, 0.3); |
|
|
|
border-radius: 2px; |
|
|
|
} |
|
|
|
|
|
|
|
.top-nav-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 6px; |
|
|
|
padding: 8px 12px; |
|
|
|
cursor: pointer; |
|
|
|
font-size: 14px; |
|
|
|
font-size: 13px; |
|
|
|
font-weight: 600; |
|
|
|
color: #555; |
|
|
|
color: #333; |
|
|
|
transition: all 0.3s; |
|
|
|
border-radius: 6px; |
|
|
|
border-radius: 4px; |
|
|
|
white-space: nowrap; |
|
|
|
min-width: 60px; |
|
|
|
justify-content: center; |
|
|
|
margin: 0 1px; |
|
|
|
position: relative; |
|
|
|
text-align: center; |
|
|
|
min-width: 70px; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-menu-item:hover { |
|
|
|
.top-nav-item:hover { |
|
|
|
color: #008aff; |
|
|
|
background: rgba(0, 138, 255, 0.1); |
|
|
|
transform: translateY(-1px); |
|
|
|
box-shadow: 0 2px 6px rgba(0, 138, 255, 0.15); |
|
|
|
} |
|
|
|
|
|
|
|
.nav-menu-item.active { |
|
|
|
.top-nav-item.active { |
|
|
|
color: #008aff; |
|
|
|
background: linear-gradient(135deg, rgba(0, 138, 255, 0.15), rgba(0, 138, 255, 0.25)); |
|
|
|
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.2); |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-menu-item.active::after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
bottom: -2px; |
|
|
|
left: 20%; |
|
|
|
width: 60%; |
|
|
|
height: 2px; |
|
|
|
background: linear-gradient(90deg, #008aff, #0066cc); |
|
|
|
border-radius: 1px; |
|
|
|
/* 移除了蓝色指示条 */ |
|
|
|
.top-nav-item.active::after { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-icon { |
|
|
|
font-size: 14px; |
|
|
|
color: #333; |
|
|
|
transition: all 0.3s; |
|
|
|
} |
|
|
|
|
|
|
|
.top-nav-item:hover .nav-icon, |
|
|
|
.top-nav-item.active .nav-icon { |
|
|
|
color: #008aff; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-text { |
|
|
|
@ -982,44 +997,46 @@ export default { |
|
|
|
.header-right { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 30px; |
|
|
|
gap: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.combat-info { |
|
|
|
/* 作战信息组 */ |
|
|
|
.combat-info-group { |
|
|
|
display: flex; |
|
|
|
gap: 25px; |
|
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
|
border-radius: 10px; |
|
|
|
padding: 8px 20px; |
|
|
|
border: 1px solid rgba(0, 138, 255, 0.2); |
|
|
|
box-shadow: 0 2px 10px rgba(0, 138, 255, 0.15); |
|
|
|
backdrop-filter: blur(5px); |
|
|
|
gap: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.info-item { |
|
|
|
.info-box { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 10px; |
|
|
|
padding: 0 10px; |
|
|
|
border-right: 1px solid rgba(0, 138, 255, 0.2); |
|
|
|
gap: 8px; |
|
|
|
padding: 6px 10px; |
|
|
|
border-radius: 6px; |
|
|
|
transition: all 0.3s; |
|
|
|
background: rgba(255, 255, 255, 0.7); |
|
|
|
border: 1px solid rgba(0, 138, 255, 0.2); |
|
|
|
box-shadow: 0 2px 6px rgba(0, 138, 255, 0.1); |
|
|
|
min-width: 120px; |
|
|
|
} |
|
|
|
|
|
|
|
.info-item:last-child { |
|
|
|
border-right: none; |
|
|
|
.info-box:hover { |
|
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
|
transform: translateY(-1px); |
|
|
|
box-shadow: 0 4px 10px rgba(0, 138, 255, 0.2); |
|
|
|
border-color: rgba(0, 138, 255, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
.info-icon { |
|
|
|
font-size: 18px; |
|
|
|
font-size: 16px; |
|
|
|
color: #008aff; |
|
|
|
background: rgba(0, 138, 255, 0.1); |
|
|
|
padding: 6px; |
|
|
|
border-radius: 6px; |
|
|
|
box-shadow: 0 2px 6px rgba(0, 138, 255, 0.2); |
|
|
|
min-width: 20px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.info-content { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.info-label { |
|
|
|
@ -1027,106 +1044,50 @@ export default { |
|
|
|
color: #666; |
|
|
|
font-weight: 500; |
|
|
|
margin-bottom: 2px; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.info-value { |
|
|
|
font-size: 14px; |
|
|
|
font-size: 13px; |
|
|
|
font-weight: 700; |
|
|
|
color: #333; |
|
|
|
white-space: nowrap; |
|
|
|
font-family: 'Courier New', monospace; |
|
|
|
letter-spacing: 0.5px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 用户状态区域 */ |
|
|
|
.user-status { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.import-btn { |
|
|
|
background: linear-gradient(135deg, rgba(82, 196, 26, 0.8), rgba(64, 158, 20, 0.8)); |
|
|
|
border: 1px solid rgba(82, 196, 26, 0.9); |
|
|
|
} |
|
|
|
|
|
|
|
.import-btn:hover { |
|
|
|
background: linear-gradient(135deg, rgba(82, 196, 26, 0.9), rgba(64, 158, 20, 0.9)); |
|
|
|
border-color: rgba(82, 196, 26, 1); |
|
|
|
box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3); |
|
|
|
/* 作战时间和天文时间的特殊样式 */ |
|
|
|
.combat-info-group .info-box:nth-child(3) .info-value { |
|
|
|
color: #008aff; |
|
|
|
} |
|
|
|
|
|
|
|
.export-btn { |
|
|
|
background: linear-gradient(135deg, rgba(0, 138, 255, 0.8), rgba(0, 102, 204, 0.8)); |
|
|
|
border: 1px solid rgba(0, 138, 255, 0.9); |
|
|
|
.combat-info-group .info-box:nth-child(4) .info-value { |
|
|
|
color: #52c41a; |
|
|
|
} |
|
|
|
|
|
|
|
.export-btn:hover { |
|
|
|
background: linear-gradient(135deg, rgba(0, 138, 255, 0.9), rgba(0, 102, 204, 0.9)); |
|
|
|
border-color: rgba(0, 138, 255, 1); |
|
|
|
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.3); |
|
|
|
/* 用户状态区域 */ |
|
|
|
.user-status-area { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.user-avatar { |
|
|
|
border: 2px solid rgba(0, 138, 255, 0.3); |
|
|
|
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.2); |
|
|
|
box-shadow: 0 2px 6px rgba(0, 138, 255, 0.15); |
|
|
|
transition: all 0.3s; |
|
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
|
} |
|
|
|
|
|
|
|
.user-avatar:hover { |
|
|
|
transform: scale(1.1); |
|
|
|
box-shadow: 0 4px 12px rgba(0, 138, 255, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
.online-status { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 6px; |
|
|
|
color: #52c41a; |
|
|
|
font-size: 12px; |
|
|
|
font-weight: 600; |
|
|
|
padding: 6px 12px; |
|
|
|
background: rgba(82, 196, 26, 0.1); |
|
|
|
border-radius: 6px; |
|
|
|
border: 1px solid rgba(82, 196, 26, 0.3); |
|
|
|
box-shadow: 0 2px 6px rgba(82, 196, 26, 0.15); |
|
|
|
transition: all 0.3s; |
|
|
|
} |
|
|
|
|
|
|
|
.online-status:hover { |
|
|
|
transform: translateY(-1px); |
|
|
|
box-shadow: 0 4px 10px rgba(82, 196, 26, 0.2); |
|
|
|
} |
|
|
|
|
|
|
|
.dot { |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
.dot.online { |
|
|
|
background: #52c41a; |
|
|
|
animation: pulse 2s infinite; |
|
|
|
box-shadow: 0 0 8px rgba(82, 196, 26, 0.8); |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes pulse { |
|
|
|
0% { |
|
|
|
opacity: 1; |
|
|
|
box-shadow: 0 0 8px rgba(82, 196, 26, 0.8); |
|
|
|
} |
|
|
|
50% { |
|
|
|
opacity: 0.7; |
|
|
|
box-shadow: 0 0 12px rgba(82, 196, 26, 1); |
|
|
|
} |
|
|
|
100% { |
|
|
|
opacity: 1; |
|
|
|
box-shadow: 0 0 8px rgba(82, 196, 26, 0.8); |
|
|
|
} |
|
|
|
box-shadow: 0 4px 10px rgba(0, 138, 255, 0.25); |
|
|
|
border-color: rgba(0, 138, 255, 0.6); |
|
|
|
} |
|
|
|
|
|
|
|
/* 左侧菜单栏 - 蓝色主题 */ |
|
|
|
.floating-left-menu { |
|
|
|
position: absolute; |
|
|
|
top: 80px; |
|
|
|
top: 70px; |
|
|
|
left: 20px; |
|
|
|
width: 40px; |
|
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
|
@ -1256,7 +1217,7 @@ export default { |
|
|
|
/* 右侧外部隐藏按钮 */ |
|
|
|
.right-external-hide-btn { |
|
|
|
position: absolute; |
|
|
|
top: 80px; |
|
|
|
top: 70px; |
|
|
|
right: 320px; /* 面板宽度300px + 外边距20px */ |
|
|
|
width: 28px; |
|
|
|
height: 40px; |
|
|
|
@ -1292,7 +1253,7 @@ export default { |
|
|
|
/* 右侧浮动面板 - 蓝色主题 */ |
|
|
|
.floating-right-panel { |
|
|
|
position: absolute; |
|
|
|
top: 80px; |
|
|
|
top: 70px; |
|
|
|
right: 20px; |
|
|
|
width: 300px; |
|
|
|
border-radius: 0 8px 8px 8px; |
|
|
|
|
