fix: 1 修改大屏标题 不同分辨率下避免遮挡问题 2、智慧助手增加可以上下调节尺寸功能

This commit is contained in:
liuzhiyuan 2025-07-17 15:32:42 +08:00
parent 8ecaf99a9a
commit b87baf1e6b
4 changed files with 232 additions and 43 deletions

View File

@ -4,28 +4,13 @@
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<header class="dashboard-header"> <header class="dashboard-header">
<div class="logo"> <div class="logo">
<img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" /> <img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" />
<img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" /> <img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" />
<h1 class="main-title">
<div class="title-line"></div>
<span class="title-text">智慧科研评估系统</span>
<div class="title-line"></div>
</h1>
</div> </div>
<!-- <div class="year-selector"> <h1 class="main-title">
<el-dropdown> <span class="title-text">智慧科研评估系统</span>
<span class="el-dropdown-link"> </h1>
2025 <el-icon class="el-icon--right"><arrow-down /></el-icon> <div class="header-placeholder"></div> <!-- 用于平衡布局的占位元素 -->
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>2023</el-dropdown-item>
<el-dropdown-item>2024</el-dropdown-item>
<el-dropdown-item>2025</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div> -->
</header> </header>
<!-- 仪表盘内容 - 三列布局 --> <!-- 仪表盘内容 - 三列布局 -->
@ -126,10 +111,21 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 智能助手 --> <!-- 智能助手 -->
<div class="dashboard-panel" style="flex: 4 1 0;"> <div class="dashboard-panel" ref="assistantPanel" style="flex: 4 1 0; position: relative; z-index: 111111; ">
<h2>智能助手</h2> <div class="panel-header">
<div class="drag-handle" @mousedown="startResize">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 5H7V7H9V5Z" fill="currentColor"/>
<path d="M9 11H7V13H9V11Z" fill="currentColor"/>
<path d="M9 17H7V19H9V17Z" fill="currentColor"/>
<path d="M15 5H13V7H15V5Z" fill="currentColor"/>
<path d="M15 11H13V13H15V11Z" fill="currentColor"/>
<path d="M15 17H13V19H15V17Z" fill="currentColor"/>
</svg>
</div>
<h2>智能助手</h2>
</div>
<div class="assistant-container"> <div class="assistant-container">
<div class="assistant-header"> <div class="assistant-header">
<img :src="dashboardData2?.logoUrl" class="assistant-avatar" /> <img :src="dashboardData2?.logoUrl" class="assistant-avatar" />
@ -141,7 +137,7 @@
<div v-html="dashboardData2?.prompt"></div> <div v-html="dashboardData2?.prompt"></div>
</div> </div>
<div v-for="(message, index) in chatMessages" :key="index" <div v-for="(message, index) in chatMessages" :key="index"
:class="['message', message.role === 'user' ? 'user-message' : 'assistant-message']"> :class="['message', message.role === 'user' ? 'user-message' : 'assistant-message']">
<div v-html="message.content"></div> <div v-html="message.content"></div>
</div> </div>
<div v-if="isLoading" class="assistant-message loading-message"> <div v-if="isLoading" class="assistant-message loading-message">
@ -213,6 +209,65 @@ const awardsChartRef = ref(null)
const fundingChartRef = ref(null) const fundingChartRef = ref(null)
const teacherServiceChartRef = ref(null) // DOM const teacherServiceChartRef = ref(null) // DOM
// ref
const assistantPanel = ref(null)
const isResizing = ref(false)
const startY = ref(0)
const startHeight = ref(0)
//
// resize
const startResize = (e) => {
//
e.stopPropagation()
isResizing.value = true
startY.value = e.clientY
startHeight.value = parseInt(document.defaultView.getComputedStyle(assistantPanel.value).height, 10)
//
document.addEventListener('mousemove', handleResize)
document.addEventListener('mouseup', stopResize)
//
document.body.style.cursor = 'row-resize'
document.body.style.userSelect = 'none'
}
// resize
const handleResize = (e) => {
if (!isResizing.value) return
const dy = e.clientY - startY.value
const newHeight = startHeight.value - dy
//
const minHeight = 200 //
const maxHeight = window.innerHeight - 100 //
if (newHeight > minHeight && newHeight < maxHeight) {
assistantPanel.value.style.flex = 'none'
assistantPanel.value.style.height = `${newHeight}px`
//
nextTick(() => {
const labBarChart = echarts.getInstanceByDom(labBarChartRef.value)
const labLineChart = echarts.getInstanceByDom(labLineChartRef.value)
if (labBarChart) labBarChart.resize()
if (labLineChart) labLineChart.resize()
})
}
}
const stopResize = () => {
isResizing.value = false
document.removeEventListener('mousemove', handleResize)
document.removeEventListener('mouseup', stopResize)
document.body.style.cursor = ''
document.body.style.userSelect = ''
}
// //
const researcherData = ref({ const researcherData = ref({
datax: [], datax: [],
@ -1583,4 +1638,35 @@ onUnmounted(() => {
padding: 15px 0; padding: 15px 0;
} }
} }
</style>
<style scoped>
/* 可拖动icon样式 */
.drag-handle {
cursor: move;
padding: 5px;
margin-right: 10px;
color: rgba(255, 255, 255, 0.6);
transition: all 0.2s;
display: inline-flex;
align-items: center;
}
.drag-handle:hover {
color: rgba(255, 255, 255, 0.9);
background-color: rgba(73, 134, 255, 0.3);
border-radius: 3px;
}
.drag-handle svg {
display: block;
}
/* 调整面板头部样式 */
.assistant-panel .panel-header {
display: flex;
align-items: center;
cursor: move; /* 整个头部可拖动 */
user-select: none; /* 防止拖动时选中文本 */
}
</style> </style>

View File

@ -3,14 +3,13 @@
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<header class="dashboard-header"> <header class="dashboard-header">
<div class="logo"> <div class="logo">
<img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" /> <img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" />
<img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" /> <img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" />
<h1 class="main-title">
<div class="title-line"></div>
<span class="title-text">智慧科研评估系统</span>
<div class="title-line"></div>
</h1>
</div> </div>
<h1 class="main-title">
<span class="title-text">智慧科研评估系统</span>
</h1>
<div class="header-placeholder"></div> <!-- 用于平衡布局的占位元素 -->
</header> </header>
<!-- 主内容区域 --> <!-- 主内容区域 -->
@ -664,7 +663,7 @@ watch(filteredLabs, () => {
border: 2px solid rgba(38,47,80,0.3); border: 2px solid rgba(38,47,80,0.3);
} }
.dashboard-header { /* .dashboard-header {
height: 60px; height: 60px;
padding: 0 20px; padding: 0 20px;
display: flex; display: flex;
@ -702,7 +701,7 @@ watch(filteredLabs, () => {
.title-text { .title-text {
margin: 0 30px; margin: 0 30px;
} } */
.content-container { .content-container {
display: flex; display: flex;

View File

@ -3,14 +3,13 @@
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<header class="dashboard-header"> <header class="dashboard-header">
<div class="logo"> <div class="logo">
<img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" /> <img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" />
<img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" /> <img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" />
<h1 class="main-title">
<div class="title-line"></div>
<span class="title-text">智慧科研评估系统</span>
<div class="title-line"></div>
</h1>
</div> </div>
<h1 class="main-title">
<span class="title-text">智慧科研评估系统</span>
</h1>
<div class="header-placeholder"></div> <!-- 用于平衡布局的占位元素 -->
</header> </header>
<!-- 主内容区域 --> <!-- 主内容区域 -->
@ -418,7 +417,7 @@ const openTeacherDetail = (teacher) => {
/* 防止页面整体出现滚动条 */ /* 防止页面整体出现滚动条 */
} }
.dashboard-header { /* .dashboard-header {
height: 60px; height: 60px;
padding: 0 20px; padding: 0 20px;
display: flex; display: flex;
@ -456,7 +455,7 @@ const openTeacherDetail = (teacher) => {
.title-text { .title-text {
margin: 0 30px; margin: 0 30px;
} } */
.content-container { .content-container {
display: flex; display: flex;

View File

@ -306,4 +306,109 @@ h2{
.teacher-card { .teacher-card {
min-height: 400px; min-height: 400px;
} }
}
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
height: 80px;
background-color: rgba(12, 22, 51, 0.8);
position: relative;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
flex: 1; /* 占据可用空间 */
}
.logo img {
height: 40px;
object-fit: contain;
cursor: pointer;
}
.main-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin: 0;
font-size: 32px;
font-weight: bold;
color: white;
white-space: nowrap;
/* background: linear-gradient(90deg, transparent, rgba(73, 134, 255, 0.3), transparent); */
padding: 0 200px;
}
.main-title::before,
.main-title::after {
content: "";
position: absolute;
top: 50%;
width: 200px;
height: 4px;
background: linear-gradient(90deg, transparent, rgba(73, 134, 255, 0.8));
}
.main-title::before {
left: 0;
}
.main-title::after {
right: 0;
transform: scaleX(-1);
}
.header-placeholder {
flex: 1; /* 与logo对称的占位元素 */
}
/* 响应式调整 */
@media (max-width: 1200px) {
.dashboard-header {
height: 60px;
padding: 0 10px;
}
.logo img {
height: 30px;
}
.main-title {
font-size: 28px;
padding: 0 150px;
}
.main-title::before,
.main-title::after {
width: 150px;
height: 3px;
}
}
/* 响应式调整 */
@media (max-width: 768px) {
.dashboard-header {
height: 60px;
padding: 0 10px;
}
.logo img {
height: 30px;
}
.main-title {
font-size: 24px;
padding: 0 30px;
}
.main-title::before,
.main-title::after {
width: 30px;
height: 2px;
}
} }