202 lines
4.1 KiB
Vue
202 lines
4.1 KiB
Vue
<template>
|
||
<div class="layout-container">
|
||
<div class="header-section">
|
||
<el-card shadow="hover" class="header-card">
|
||
<div class="header-content">
|
||
<UserTop
|
||
userName="超级管理员"
|
||
weatherInfo="今日小雪;夜间:多云;温度:(-4.0℃ 至 2.0℃);东北风/1-3级"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
<div class="main-section">
|
||
<div class="left-section">
|
||
<el-card shadow="hover" class="card-item card-1">
|
||
<NoteLeft />
|
||
</el-card>
|
||
<el-card shadow="hover" class="card-item card-2">
|
||
<AlertMain />
|
||
</el-card>
|
||
<el-card shadow="hover" class="card-item card-3">
|
||
<QuickLogin />
|
||
</el-card>
|
||
</div>
|
||
<div class="right-section">
|
||
<div class="right-top-section">
|
||
<el-card shadow="hover" class="card-item right-top-card">
|
||
<div class="right-placeholder">
|
||
<ChartNote />
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
<div class="right-bottom-section">
|
||
<el-card shadow="hover" class="card-item right-bottom-card">
|
||
<div class="right-placeholder">下区域内容</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import UserTop from './components/UserTop.vue';
|
||
import NoteLeft from './components/Note.vue'
|
||
import AlertMain from './components/Alert.vue'
|
||
import QuickLogin from './components/Quick.vue'
|
||
import ChartNote from './components/ChartNote.vue'
|
||
</script>
|
||
|
||
<style scoped>
|
||
.layout-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 8px;
|
||
gap: 8px;
|
||
overflow: hidden;
|
||
background-color: #f5f7fa;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.header-section {
|
||
height: 10%;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.header-card {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: stretch !important;
|
||
justify-content: stretch !important;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
box-sizing: border-box;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.header-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.main-section {
|
||
height: 90%;
|
||
width: 100%;
|
||
display: flex;
|
||
gap: 8px;
|
||
box-sizing: border-box;
|
||
min-width: 0;
|
||
}
|
||
|
||
.left-section {
|
||
width: 45%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
box-sizing: border-box;
|
||
flex-shrink: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 核心样式：card-item 统一所有卡片样式 */
|
||
.card-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: stretch !important;
|
||
justify-content: stretch !important;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
box-sizing: border-box;
|
||
transition: all 0.3s ease;
|
||
min-height: 80px;
|
||
}
|
||
|
||
.right-section {
|
||
flex: 1;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
box-sizing: border-box;
|
||
flex-shrink: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.right-top-section {
|
||
height: 50%;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.right-bottom-section {
|
||
height: 50%;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 移除右侧卡片独立样式，统一继承 card-item */
|
||
.right-top-card, .right-bottom-card {
|
||
/* 仅保留占位，如需特殊样式可在此添加 */
|
||
}
|
||
|
||
/* 统一卡片内容占位符样式 */
|
||
.right-placeholder {
|
||
padding: 4px;
|
||
text-align: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 深度样式统一作用于所有 el-card */
|
||
:deep(.el-card) {
|
||
border-radius: 8px;
|
||
height: 100%;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
:deep(.el-card__body) {
|
||
padding: 4px !important;
|
||
margin: 0 !important;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:deep(.el-card:hover) {
|
||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* 响应式样式保持不变 */
|
||
@media (max-width: 768px) {
|
||
.main-section {
|
||
flex-direction: column;
|
||
}
|
||
.left-section, .right-section {
|
||
width: 100%;
|
||
height: 50%;
|
||
flex: none;
|
||
}
|
||
.left-section {
|
||
flex-direction: row;
|
||
}
|
||
.card-item {
|
||
min-width: 120px;
|
||
min-height: auto;
|
||
}
|
||
|
||
.right-top-section, .right-bottom-section {
|
||
height: 50%;
|
||
}
|
||
}
|
||
</style> |