Compare commits
3 Commits
76c3a7c8bf
...
c4d00bfdc3
| Author | SHA1 | Date | |
|---|---|---|---|
| c4d00bfdc3 | |||
| e865ea34b9 | |||
| 997c88ae57 |
174
dyf-vue-ui/src/views/homeIndex/index.vue
Normal file
174
dyf-vue-ui/src/views/homeIndex/index.vue
Normal file
@ -0,0 +1,174 @@
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: radial-gradient( 0% 0% at 0% 0%, #091B2D 0%, #0C2644 100%), #267AD0;
|
||||
}
|
||||
|
||||
/* 全屏地图 - 背景图层 */
|
||||
.fullscreen-map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 顶部栏 */
|
||||
.top-bar {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
background-color: rgba(74, 85, 104, 0.9);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.top-bar h1 {
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-info span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 悬浮模块容器 */
|
||||
.floating-modules {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 60px); /* 减去顶部栏高度 */
|
||||
z-index: 5;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.bottom-middle-module {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.module-card {
|
||||
background-color: rgba(107, 114, 128, 0.9);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.module-card:hover {
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.module-header {
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(90deg, #3b82f6, #60a5fa);
|
||||
}
|
||||
|
||||
.module-header::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
border-radius: 2px;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.module-content {
|
||||
padding: 14px;
|
||||
color: #e5e7eb;
|
||||
font-size: 13px;
|
||||
height: calc(100% - 36px);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.overview-card .module-header::before { background-color: #3b82f6; }
|
||||
.alarm-card .module-header::before { background-color: #ef4444; }
|
||||
.realtime-card .module-header::before { background-color: #f97316; }
|
||||
.module-card:nth-child(2) .module-header::before { background-color: #8b5cf6; }
|
||||
.module-card:nth-child(3) .module-header::before { background-color: #06b6d4; }
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
width: 100%;
|
||||
}
|
||||
.bottom-middle-module {
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
width: 100%;
|
||||
}
|
||||
.bottom-middle-module {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
width: 100%;
|
||||
}
|
||||
.bottom-middle-module {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/assets/homeIndex/alarmIMG.png
Normal file
BIN
src/assets/homeIndex/alarmIMG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/assets/homeIndex/card.png
Normal file
BIN
src/assets/homeIndex/card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/homeIndex/nav.png
Normal file
BIN
src/assets/homeIndex/nav.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
@ -39,6 +39,12 @@ export const constantRoutes: RouteRecordRaw[] = [
|
||||
component: () => import('@/views/error/401.vue'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: "/homeIndex",
|
||||
name: "HomeIndex",
|
||||
component: () => import("@/views/homeIndex/index.vue"),
|
||||
meta: {title: '数据大屏', icon: 'dashboard', preload: true, keepAlive: true },
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: Layout,
|
||||
@ -52,6 +58,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/user',
|
||||
component: Layout,
|
||||
|
||||
@ -56,8 +56,8 @@
|
||||
</el-col>
|
||||
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['equipment:devices:export']" type="warning" plain
|
||||
icon="Download" @click="handleExport">导出</el-button>
|
||||
<el-button v-hasPermi="['equipment:devices:export']" type="warning" plain icon="Download"
|
||||
@click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['equipment:devices:remove']" type="danger" plain :disabled="multiple"
|
||||
@ -517,7 +517,7 @@ const handleExport = () => {
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`${new Date().getTime()}.xlsx`,
|
||||
`设备列表${new Date().getTime()}.xlsx`,
|
||||
'get'
|
||||
);
|
||||
};
|
||||
@ -913,12 +913,19 @@ const beforeImportUpload = (file: any) => {
|
||||
const head_upload = () => getBearerToken();
|
||||
const handleImportSuccess = (response: any) => {
|
||||
if (response.code == 200) {
|
||||
console.log('导入成功了么');
|
||||
importResult.value.isShow = true;
|
||||
|
||||
if (response.data) {
|
||||
importResult.value.succeed = response.data.successCount || 0;
|
||||
importResult.value.errorSun = response.data.failureCount || 0;
|
||||
console.log(response.data,'response.data');
|
||||
|
||||
importResult.value.succeed = response.data.successCount;
|
||||
importResult.value.errorSun = response.data.failureCount;
|
||||
importResult.value.total = importResult.value.succeed + importResult.value.errorSun;
|
||||
importResult.value.link = response.data.errorExcelUrl || '';
|
||||
importResult.value.link = response.data.errorExcelUrl;
|
||||
}
|
||||
if (importUpload.value) {
|
||||
importUpload.value.clearFiles();
|
||||
}
|
||||
getList(); // 初始化列表数据
|
||||
} else {
|
||||
|
||||
6
src/views/homeIndex/components/AlarmCount.vue
Normal file
6
src/views/homeIndex/components/AlarmCount.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
6
src/views/homeIndex/components/AlarmEvent.vue
Normal file
6
src/views/homeIndex/components/AlarmEvent.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
57
src/views/homeIndex/components/AlarmOverview.vue
Normal file
57
src/views/homeIndex/components/AlarmOverview.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="alarmOvery">
|
||||
<div class="alarm">
|
||||
<div class="alarmIMG">
|
||||
<div class="alarmNum">1000 <span>个</span></div>
|
||||
</div>
|
||||
<div class="alarmText">正在报警</div>
|
||||
</div>
|
||||
|
||||
<div class="alarm">
|
||||
<div class="alarmIMG">
|
||||
<div class="alarmNum">1000 <span>个</span></div>
|
||||
</div>
|
||||
<div class="alarmText">报警总数</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<div class="alarmIMG">
|
||||
<div class="alarmNum">1000 <span>个</span></div>
|
||||
</div>
|
||||
<div class="alarmText">已处理</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.alarmOvery {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin-top: 7.5vh;
|
||||
text-align: center;
|
||||
font-size:0.8vw;
|
||||
color: #DEEFFF;
|
||||
padding: 1.5vw;
|
||||
}
|
||||
|
||||
.alarmIMG {
|
||||
width: 12vh;
|
||||
height: 12vh;
|
||||
background: url(@/assets/homeIndex/alarmIMG.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.alarmText{
|
||||
padding-top: 1.5vh;
|
||||
}
|
||||
.alarmNum{
|
||||
line-height: 12vh;
|
||||
color: radial-gradient(0deg, #F63838 0%, #FFFFFF 100%);
|
||||
}
|
||||
</style>
|
||||
6
src/views/homeIndex/components/DeviceCategory.vue
Normal file
6
src/views/homeIndex/components/DeviceCategory.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
6
src/views/homeIndex/components/DeviceOverview.vue
Normal file
6
src/views/homeIndex/components/DeviceOverview.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
6
src/views/homeIndex/components/DeviceUsage.vue
Normal file
6
src/views/homeIndex/components/DeviceUsage.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
8
src/views/homeIndex/components/MapComponent.vue
Normal file
8
src/views/homeIndex/components/MapComponent.vue
Normal file
@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div class="map-component">地图模块</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
125
src/views/homeIndex/components/RealTimeAlarm.vue
Normal file
125
src/views/homeIndex/components/RealTimeAlarm.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="alarm-table-container">
|
||||
<div class="alarm-table-header">
|
||||
<div class="header-item">报警时间</div>
|
||||
<div class="header-item">设备类型</div>
|
||||
<div class="header-item">设备IMEI</div>
|
||||
<div class="header-item">报警事件</div>
|
||||
<div class="header-item">报警位置</div>
|
||||
</div>
|
||||
<div class="alarm-table-body" ref="tableBody"
|
||||
:style="{ animationDuration: `${alarmData.length * 2}s`, animationTimingFunction: 'linear' }">
|
||||
<div v-for="(item, index) in alarmData" :key="index" class="alarm-item">
|
||||
<div class="item-cell">{{ item.alarmTime }}</div>
|
||||
<div class="item-cell">{{ item.deviceType }}</div>
|
||||
<div class="item-cell">{{ item.deviceIMEI }}</div>
|
||||
<div class="item-cell alarm-event">{{ item.alarmEvent }}</div>
|
||||
<div class="item-cell">{{ item.alarmLocation }}</div>
|
||||
</div>
|
||||
<!-- 复制一份数据，实现无缝滚动 -->
|
||||
<div v-for="(item, index) in alarmData" :key="index + 'copy'" class="alarm-item">
|
||||
<div class="item-cell">{{ item.alarmTime }}</div>
|
||||
<div class="item-cell">{{ item.deviceType }}</div>
|
||||
<div class="item-cell">{{ item.deviceIMEI }}</div>
|
||||
<div class="item-cell alarm-event">{{ item.alarmEvent }}</div>
|
||||
<div class="item-cell">{{ item.alarmLocation }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
// 模拟报警数据
|
||||
const alarmData = ref([
|
||||
{
|
||||
alarmTime: '2025-09-01 20:16:54',
|
||||
deviceType: 'BJQ6170',
|
||||
deviceIMEI: '123456789123456',
|
||||
alarmEvent: '强制报警',
|
||||
alarmLocation: '湖北省武汉市国际企业中心聚星楼'
|
||||
},
|
||||
{
|
||||
alarmTime: '2025-09-01 20:16:54',
|
||||
deviceType: 'BJQ6170',
|
||||
deviceIMEI: '123456789123456',
|
||||
alarmEvent: '强制报警',
|
||||
alarmLocation: '湖北省武汉市国际企业中心聚星楼'
|
||||
},
|
||||
{
|
||||
alarmTime: '2025-09-01 20:16:54',
|
||||
deviceType: 'BJQ6170',
|
||||
deviceIMEI: '123456789123456',
|
||||
alarmEvent: '强制报警',
|
||||
alarmLocation: '湖北省武汉市国际企业中心聚星楼'
|
||||
}
|
||||
]);
|
||||
|
||||
const tableBody = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
// 启动滚动动画
|
||||
if (tableBody.value) {
|
||||
tableBody.value.style.animationName = 'scroll';
|
||||
tableBody.value.style.animationIterationCount = 'infinite';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.alarm-table-container {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-top: 4vh;
|
||||
padding: 1.5vw;
|
||||
}
|
||||
|
||||
.alarm-table-header {
|
||||
display: flex;
|
||||
color: #267AD0;
|
||||
border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alarm-table-body {
|
||||
height: 18vh;
|
||||
/* 可根据需求调整高度 */
|
||||
overflow: auto;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.alarm-item {
|
||||
display: flex;
|
||||
border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
|
||||
font-size: 0.6vw;
|
||||
align-items: center;
|
||||
padding: 0.5vw;
|
||||
}
|
||||
|
||||
.item-cell {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alarm-event {
|
||||
color: #ff5252;
|
||||
/* 报警事件红色显示 */
|
||||
}
|
||||
|
||||
/* 滚动动画 */
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
230
src/views/homeIndex/index.vue
Normal file
230
src/views/homeIndex/index.vue
Normal file
@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<!-- 顶部固定区域 -->
|
||||
<div class="top-bar">
|
||||
<div class="header-info">
|
||||
<div>{{ currentTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 全屏地图区域（背景） -->
|
||||
<div class="fullscreen-map">
|
||||
<MapComponent></MapComponent>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮模块容器 -->
|
||||
<div class="floating-modules">
|
||||
<!-- 左侧模块组 -->
|
||||
<div class="left-modules">
|
||||
<div class="module-card overview-card">
|
||||
<div class="module-header">设备概览</div>
|
||||
<div class="module-content">
|
||||
<DeviceOverview />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="module-card">
|
||||
<div class="module-header">设备类别</div>
|
||||
<div class="module-content">
|
||||
<DeviceCategory />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="module-card">
|
||||
<div class="module-header">设备使用频次</div>
|
||||
<div class="module-content">
|
||||
<DeviceUsage />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧模块组 -->
|
||||
<div class="right-modules">
|
||||
<div class="module-card alarm-card">
|
||||
<div class="module-header">报警数据</div>
|
||||
<div class="module-content">
|
||||
<AlarmOverview />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="module-card">
|
||||
<div class="module-header">报警事件</div>
|
||||
<div class="module-content">
|
||||
<AlarmEvent />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="module-card">
|
||||
<div class="module-header">报警次数</div>
|
||||
<div class="module-content">
|
||||
<AlarmCount />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部中间模块 -->
|
||||
<div class="bottom-middle-module">
|
||||
<div class="module-card realtime-card">
|
||||
<div class="module-header realtime-header">实时报警信息</div>
|
||||
<div class="module-content">
|
||||
<RealTimeAlarm />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import DeviceOverview from './components/DeviceOverview.vue';
|
||||
import AlarmOverview from './components/AlarmOverview.vue';
|
||||
import DeviceCategory from './components/DeviceCategory.vue';
|
||||
import DeviceUsage from './components/DeviceUsage.vue';
|
||||
import AlarmEvent from './components/AlarmEvent.vue';
|
||||
import AlarmCount from './components/AlarmCount.vue';
|
||||
import RealTimeAlarm from './components/RealTimeAlarm.vue';
|
||||
import MapComponent from './components/MapComponent.vue';
|
||||
// 实时时间实现
|
||||
const currentDate = ref(new Date());
|
||||
// 每秒更新时间
|
||||
const timer = setInterval(() => {
|
||||
currentDate.value = new Date();
|
||||
}, 1000);
|
||||
// 组件卸载时清除定时器
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
});
|
||||
|
||||
// 格式化时间
|
||||
const currentTime = computed(() => {
|
||||
const now = currentDate.value;
|
||||
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 顶部栏 */
|
||||
.top-bar {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
height: 13vh;
|
||||
background: url(@/assets/homeIndex/nav.png) no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.header-info {
|
||||
position: absolute;
|
||||
right: 6vh;
|
||||
top: 3.8vh;
|
||||
color: #fff;
|
||||
font-size: 1.8vh;
|
||||
}
|
||||
|
||||
/* 全屏地图 */
|
||||
.fullscreen-map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(0% 0% at 0% 0%, #091B2D 0%, #0C2644 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 悬浮模块容器 */
|
||||
.floating-modules {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 5;
|
||||
padding: 1.5vw;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 左侧模块组 */
|
||||
.left-modules {
|
||||
position: absolute;
|
||||
top: 8vh;
|
||||
left: 0.5vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 27vw;
|
||||
height: calc(100vh - 9vh);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 右侧模块组 */
|
||||
.right-modules {
|
||||
position: absolute;
|
||||
top: 8vh;
|
||||
right: 0.5vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 27vw;
|
||||
height: calc(100vh - 9vh);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 底部中间模块 */
|
||||
.bottom-middle-module {
|
||||
position: absolute;
|
||||
bottom: 0.4vw;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 44vw;
|
||||
height: calc(39vh - 9vh);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 模块卡片样式 */
|
||||
.module-card {
|
||||
background: url(@/assets/homeIndex/card.png) no-repeat;
|
||||
position: relative;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 模块标题 */
|
||||
.module-header {
|
||||
position: absolute;
|
||||
font-size: 1.6vh;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
left: 5vh;
|
||||
top: 3.2vh;
|
||||
|
||||
}
|
||||
|
||||
.realtime-header {
|
||||
left: 8vh;
|
||||
top: 3.4vh;
|
||||
}
|
||||
|
||||
/* 模块内容 */
|
||||
.module-content {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user