Browse Source

header 迁移

lihui/feature-20250915101448-现金管理
zhangrenyuan 2 weeks ago
parent
commit
7f73f8ab09
  1. 5
      src/views/home.vue
  2. 35
      src/views/workspace/index.vue

5
src/views/home.vue

@ -192,10 +192,10 @@ function logout() {
<!-- 右侧内容区域 --> <!-- 右侧内容区域 -->
<div class="content-container"> <div class="content-container">
<!-- 头部 -->
<!-- 头部
<el-header class="header"> <el-header class="header">
</el-header>
</el-header> -->
<!-- 主内容区域 --> <!-- 主内容区域 -->
<div class="main-area"> <div class="main-area">
@ -259,6 +259,7 @@ function logout() {
right: 1vh; right: 1vh;
bottom: 1vh; bottom: 1vh;
background-image: url('@/assets/半透明background.png'); background-image: url('@/assets/半透明background.png');
background-size: cover;
z-index: 1; z-index: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

35
src/views/workspace/index.vue

@ -1,4 +1,8 @@
<template> <template>
<!-- 头部 -->
<el-header class="header">
<div class="title">数据总览</div>
</el-header>
<div style="height: 100vh; overflow: hidden;"> <div style="height: 100vh; overflow: hidden;">
<el-row class="cards" > <el-row class="cards" >
<el-col :span="12"> <el-col :span="12">
@ -99,4 +103,35 @@ onMounted(async () => {
<style scoped> <style scoped>
.header {
/* 将纯色背景替换为线性渐变 */
background: linear-gradient(
90deg,
rgba(228, 240, 252, 1) 20%,
rgba(190, 218, 247, 1) 50%,
rgba(228, 240, 252, 1) 100%
);
height: 6vh;
border-radius: 12px;
margin-bottom: 4px;
box-shadow: 0 2px 5px rgba(8, 4, 4, 0.1);
/* 添加阴影增强层次感 */
z-index: 80;
display: flex;
align-items: center;
justify-content: center;
}
.title {
width: 136px;
color: #040a2d;
font-family: "PingFang SC";
font-size: 34px;
font-style: normal;
font-weight: 900;
line-height: 31.79px;
text-align: center;
}
</style> </style>
Loading…
Cancel
Save