forked from dyf/dyf-vue-ui
Merge branch 'main' of http://47.107.152.87:3000/dyf/dyf-vue-ui
This commit is contained in:
fengerli
@ -1,5 +1,5 @@
|
||||
# 页面标题
|
||||
VITE_APP_TITLE = 物联网管理系统
|
||||
VITE_APP_TITLE = 星汉研创科技
|
||||
|
||||
# 开发环境配置
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# 页面标题
|
||||
VITE_APP_TITLE = 物联网管理系统
|
||||
VITE_APP_TITLE = 星汉研创科技
|
||||
|
||||
# 生产环境配置 晶全1
|
||||
VITE_APP_ENV = 'https://fuyuanshen.com/backend'
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<title>物联网管理系统</title>
|
||||
<title>星汉研创科技</title>
|
||||
<!--[if lt IE 11
|
||||
]><script>
|
||||
window.location.href = '/html/ie.html';
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"$schema": "https://json.schemastore.org/package",
|
||||
"name": "fys",
|
||||
"version": "5.4.0-2.4.0",
|
||||
"description": "物联网管理系统",
|
||||
"description": "星汉研创科技",
|
||||
"author": "LionLi",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
-webkit-transition: width 0.28s;
|
||||
transition: width 0.28s;
|
||||
width: $base-sidebar-width !important;
|
||||
background-color: $base-menu-background;
|
||||
background: #2c3e50; // 精确匹配设计UI的背景色
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
font-size: 0;
|
||||
@ -25,8 +25,15 @@
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
-webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
|
||||
// 使用CSS变量定义边框样式，支持动态修改
|
||||
border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor);
|
||||
box-shadow: var(--sidebarBoxShadow);
|
||||
|
||||
// 备用方案：如果CSS变量不支持，使用默认样式
|
||||
@supports not (border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor)) {
|
||||
border-right: none;
|
||||
box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
// reset element-ui css
|
||||
.horizontal-collapse-transition {
|
||||
@ -90,17 +97,23 @@
|
||||
.theme-dark .el-sub-menu__title {
|
||||
&:hover {
|
||||
background-color: $base-sub-menu-title-hover !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.sub-menu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .is-active > .el-sub-menu__title {
|
||||
color: $base-menu-color-active !important;
|
||||
color: #ffffff !important;
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
& .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
@ -108,6 +121,7 @@
|
||||
min-width: $base-sidebar-width !important;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@ -117,6 +131,7 @@
|
||||
|
||||
&:hover {
|
||||
background-color: $base-sub-menu-hover !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@ -125,6 +140,7 @@
|
||||
&:hover {
|
||||
// you can use $sub-menuHover
|
||||
background-color: $base-menu-hover !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
& .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
@ -132,6 +148,7 @@
|
||||
&:hover {
|
||||
// you can use $sub-menuHover
|
||||
background-color: rgba(0, 0, 0, 0.04) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -232,3 +249,199 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义侧边栏样式类
|
||||
.sidebar-modern {
|
||||
.sidebar-container {
|
||||
background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
|
||||
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimal {
|
||||
.sidebar-container {
|
||||
background: #304156;
|
||||
box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1);
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-elegant {
|
||||
.sidebar-container {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
box-shadow: 3px 0 15px rgba(0, 0, 0, 0.25);
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 激活菜单项的渐变效果
|
||||
.el-menu-item.is-active {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
// 子菜单激活状态
|
||||
.el-sub-menu.is-active > .el-sub-menu__title {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
// 更精确的菜单项样式匹配图片效果
|
||||
.sidebar-container {
|
||||
// 确保背景色与图片一致
|
||||
background: #2c3e50 !important;
|
||||
|
||||
.el-menu-item {
|
||||
&.is-active {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu {
|
||||
&.is-active > .el-sub-menu__title {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// 子菜单项激活状态（只有文字颜色变化，无背景）
|
||||
.el-sub-menu .el-menu-item {
|
||||
&.is-active {
|
||||
background: transparent !important;
|
||||
color: #409eff !important;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 精确匹配设计UI的样式类
|
||||
.sidebar-design-ui {
|
||||
.sidebar-container {
|
||||
background: #2c3e50 !important;
|
||||
box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1) !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.sidebar-logo-container {
|
||||
background: #2c3e50 !important;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
background: #2c3e50 !important;
|
||||
}
|
||||
|
||||
// 非激活菜单项样式
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: #bfcbd9 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 激活的主菜单项（正确的渐变背景）
|
||||
.el-menu-item.is-active,
|
||||
.el-sub-menu.is-active > .el-sub-menu__title {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
// 激活的子菜单项（只有蓝色文字，无背景）
|
||||
.el-sub-menu .el-menu-item.is-active {
|
||||
background: transparent !important;
|
||||
color: #409eff !important;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// 子菜单背景色
|
||||
.el-sub-menu .el-menu {
|
||||
background: #1f2d3d !important;
|
||||
}
|
||||
|
||||
// 子菜单项悬停效果
|
||||
.el-sub-menu .el-menu-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
// 主菜单项悬停效果
|
||||
.el-menu-item:hover,
|
||||
.el-sub-menu__title:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 全局菜单样式匹配设计UI
|
||||
#app .sidebar-container {
|
||||
// 确保背景色一致
|
||||
background: #2c3e50 !important;
|
||||
|
||||
// 菜单项基础样式
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: #bfcbd9 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 激活的主菜单项
|
||||
.el-menu-item.is-active,
|
||||
.el-sub-menu.is-active > .el-sub-menu__title {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
// 激活的子菜单项
|
||||
.el-sub-menu .el-menu-item.is-active {
|
||||
background: transparent !important;
|
||||
color: #409eff !important;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// 子菜单背景
|
||||
.el-sub-menu .el-menu {
|
||||
background: #1f2d3d !important;
|
||||
}
|
||||
|
||||
// 图标颜色
|
||||
.svg-icon {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
// 箭头图标颜色
|
||||
.el-sub-menu__icon-arrow {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,28 @@
|
||||
// 全局SCSS变量
|
||||
:root {
|
||||
--menuBg: #304156;
|
||||
--menuColor: #bfcbd9;
|
||||
--menuActiveText: #f4f4f5;
|
||||
--menuHover: #263445;
|
||||
--menuBg: #2c3e50; // 精确匹配图片中的深色背景
|
||||
--menuColor: #bfcbd9; // 非激活菜单项的文字颜色
|
||||
--menuActiveText: #ffffff; // 激活菜单项的文字颜色
|
||||
--menuHover: #34495e; // 悬停时的背景色
|
||||
|
||||
--subMenuBg: #1f2d3d;
|
||||
--subMenuActiveText: #f4f4f5;
|
||||
--subMenuHover: #001528;
|
||||
--subMenuTitleHover: #293444;
|
||||
--subMenuBg: #1f2d3d; // 子菜单背景色
|
||||
--subMenuActiveText: #409eff; // 激活子菜单项的文字颜色（蓝色）
|
||||
--subMenuHover: #001528; // 子菜单悬停背景色
|
||||
--subMenuTitleHover: #293444; // 子菜单标题悬停背景色
|
||||
|
||||
// 激活菜单项的渐变颜色 - 根据设计UI调整
|
||||
--menuActiveGradient: linear-gradient(90deg, #0080EA 0%, #000F27 100%);
|
||||
|
||||
--fixedHeaderBg: #ffffff;
|
||||
--tableHeaderBg: #f8f8f9;
|
||||
--tableHeaderTextColor: #515a6e;
|
||||
|
||||
// 侧边框样式变量 - 实现无边框但有阴影的效果
|
||||
--sidebarBorderColor: transparent;
|
||||
--sidebarBorderWidth: 0px;
|
||||
--sidebarBorderStyle: solid;
|
||||
--sidebarBoxShadow: 1px 0 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
// ele
|
||||
--brder-color: #e8e8e8;
|
||||
|
||||
@ -23,20 +32,29 @@
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--menuBg: #1d1e1f;
|
||||
--menuBg: #2c3e50; // 保持与浅色模式一致
|
||||
--menuColor: #bfcbd9;
|
||||
--menuActiveText: #f4f4f5;
|
||||
--menuHover: #171819;
|
||||
--menuActiveText: #ffffff;
|
||||
--menuHover: #34495e;
|
||||
|
||||
--subMenuBg: #1d1e1f;
|
||||
--subMenuActiveText: #1d1e1f;
|
||||
--subMenuHover: #171819;
|
||||
--subMenuTitleHover: #171819;
|
||||
--subMenuBg: #1f2d3d;
|
||||
--subMenuActiveText: #409eff; // 激活子菜单项保持蓝色
|
||||
--subMenuHover: #001528;
|
||||
--subMenuTitleHover: #293444;
|
||||
|
||||
// 激活菜单项的渐变颜色 - 根据设计UI调整
|
||||
--menuActiveGradient: linear-gradient(90deg, #0080EA 0%, #000F27 100%);
|
||||
|
||||
--fixedHeaderBg: #171819;
|
||||
--tableHeaderBg: var(--el-bg-color);
|
||||
--tableHeaderTextColor: var(--el-text-color);
|
||||
|
||||
// 深色模式侧边框样式变量 - 实现无边框但有阴影的效果
|
||||
--sidebarBorderColor: transparent;
|
||||
--sidebarBorderWidth: 0px;
|
||||
--sidebarBorderStyle: solid;
|
||||
--sidebarBoxShadow: 1px 0 4px rgba(0, 0, 0, 0.15);
|
||||
|
||||
// 覆盖ele 高亮当前行的标准暗色
|
||||
.el-tree-node__content {
|
||||
--el-color-primary-light-9: #262727;
|
||||
|
||||
@ -34,7 +34,7 @@ defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const title = ref('物联网管理系统');
|
||||
const title = ref('星汉研创科技');
|
||||
const settingsStore = useSettingsStore();
|
||||
const sideTheme = computed(() => settingsStore.sideTheme);
|
||||
</script>
|
||||
@ -54,7 +54,7 @@ const sideTheme = computed(() => settingsStore.sideTheme);
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background: #2b2f3a;
|
||||
background: #2c3e50; // 精确匹配设计UI的背景色
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
@ -75,7 +75,7 @@ const sideTheme = computed(() => settingsStore.sideTheme);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
font-size: 16px; // 匹配设计UI的字体大小
|
||||
font-family:
|
||||
Avenir,
|
||||
Helvetica Neue,
|
||||
|
||||
@ -1,36 +1,404 @@
|
||||
<template>
|
||||
<div class="app-container home">
|
||||
<el-row :gutter="20">
|
||||
<el-col :sm="24" :lg="12">
|
||||
<div class="kfzIMG">
|
||||
<img src="@/assets/images/kfz.png" alt="" class="kfIMG">
|
||||
<p>功能开发中....敬请期待</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- 面包屑导航 -->
|
||||
<el-breadcrumb separator="/" class="breadcrumb">
|
||||
<el-breadcrumb-item>
|
||||
<span class="breadcrumb-dot active"></span>
|
||||
首页
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>
|
||||
<span class="breadcrumb-dot"></span>
|
||||
设备管理
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
<!-- 数据总览卡片 -->
|
||||
<el-card class="data-overview-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">数据总览</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4" v-for="(item, index) in dataOverview" :key="index">
|
||||
<div class="data-item">
|
||||
<div class="data-icon" :style="{ backgroundColor: item.color }">
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
</div>
|
||||
<div class="data-content">
|
||||
<div class="data-value">{{ item.value }}</div>
|
||||
<div class="data-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 设备统计卡片 -->
|
||||
<el-row :gutter="20" class="device-stats">
|
||||
<el-col :span="12">
|
||||
<el-card class="device-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">蓝牙设备</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8" v-for="(item, index) in bluetoothStats" :key="index">
|
||||
<div class="device-item">
|
||||
<div class="device-value">{{ item.value }}</div>
|
||||
<div class="device-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="device-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">4G设备</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8" v-for="(item, index) in g4Stats" :key="index">
|
||||
<div class="device-item">
|
||||
<div class="device-value">{{ item.value }}</div>
|
||||
<div class="device-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
|
||||
<!-- 地区分布图表 -->
|
||||
<el-card class="region-chart-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">设备使用频次地区分布</span>
|
||||
<div class="chart-controls">
|
||||
<el-select v-model="selectedMonth" placeholder="选择月份" size="small">
|
||||
<el-option label="7月" value="7"></el-option>
|
||||
<el-option label="8月" value="8"></el-option>
|
||||
<el-option label="9月" value="9"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="selectedYear" placeholder="选择年份" size="small">
|
||||
<el-option label="2025年" value="2025"></el-option>
|
||||
<el-option label="2024年" value="2024"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-bars">
|
||||
<div
|
||||
v-for="(region, index) in regionData"
|
||||
:key="index"
|
||||
class="chart-bar-item"
|
||||
>
|
||||
<div class="bar-label">{{ region.name }}</div>
|
||||
<div class="bar-container">
|
||||
<div
|
||||
class="bar"
|
||||
:style="{
|
||||
height: (region.value / maxValue) * 200 + 'px',
|
||||
backgroundColor: region.color
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="bar-value">{{ region.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-nav">
|
||||
<el-button type="text" size="small">
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Index" lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import {
|
||||
Monitor,
|
||||
Connection,
|
||||
Warning,
|
||||
Plus,
|
||||
Bell,
|
||||
ArrowRight
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
// 数据总览
|
||||
const dataOverview = ref([
|
||||
{ label: '设备总量', value: '1,234', icon: 'Monitor', color: '#409eff' },
|
||||
{ label: '在线设备', value: '987', icon: 'Connection', color: '#67c23a' },
|
||||
{ label: '异常设备', value: '45', icon: 'Warning', color: '#e6a23c' },
|
||||
{ label: '新增绑定', value: '23', icon: 'Plus', color: '#f56c6c' },
|
||||
{ label: '设备报警', value: '12', icon: 'Bell', color: '#909399' }
|
||||
])
|
||||
|
||||
// 蓝牙设备统计
|
||||
const bluetoothStats = ref([
|
||||
{ label: '总量', value: '856' },
|
||||
{ label: '在线', value: '723' },
|
||||
{ label: '新增绑定', value: '15' }
|
||||
])
|
||||
|
||||
// 4G设备统计
|
||||
const g4Stats = ref([
|
||||
{ label: '总量', value: '378' },
|
||||
{ label: '在线', value: '264' },
|
||||
{ label: '新增绑定', value: '8' }
|
||||
])
|
||||
|
||||
// 地区分布数据
|
||||
const regionData = ref([
|
||||
{ name: '北京', value: 156, color: '#409eff' },
|
||||
{ name: '上海', value: 134, color: '#67c23a' },
|
||||
{ name: '杭州', value: 98, color: '#e6a23c' }
|
||||
])
|
||||
|
||||
// 计算最大值用于图表比例
|
||||
const maxValue = computed(() => {
|
||||
return Math.max(...regionData.value.map(item => item.value))
|
||||
})
|
||||
|
||||
// 选择器数据
|
||||
const selectedMonth = ref('7')
|
||||
const selectedYear = ref('2025')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
.kfzIMG {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 100%);
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: calc(100vh - 84px);
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 20px;
|
||||
padding: 10px 0;
|
||||
|
||||
.breadcrumb-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
background-color: #c0c4cc;
|
||||
|
||||
&.active {
|
||||
background-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kfIMG {
|
||||
width: 60%;
|
||||
.data-overview-card {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.data-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: #fafafa;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.data-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.data-content {
|
||||
flex: 1;
|
||||
|
||||
.data-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.data-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.device-stats {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.device-card {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.device-item {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
|
||||
.device-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #409eff;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.device-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.region-chart-card {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.chart-controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
min-height: 250px;
|
||||
|
||||
.chart-bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 40px;
|
||||
flex: 1;
|
||||
|
||||
.chart-bar-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.bar-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bar-container {
|
||||
width: 60px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
|
||||
.bar {
|
||||
width: 100%;
|
||||
border-radius: 4px 4px 0 0;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
transform: scaleY(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-divider--horizontal{
|
||||
border: none;
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.home {
|
||||
padding: 10px;
|
||||
|
||||
.data-overview-card {
|
||||
.data-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.device-stats {
|
||||
.el-col {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.region-chart-card {
|
||||
.chart-container {
|
||||
.chart-bars {
|
||||
gap: 20px;
|
||||
|
||||
.chart-bar-item {
|
||||
.bar-container {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user