mirror of
https://gitee.com/dromara/mayfly-go
synced 2025-11-07 01:40:25 +08:00
feat: 机器新增命令过滤配置、首页功能完善（操作记录与快捷操作）
This commit is contained in:
meilin.huang
@@ -1,137 +1,541 @@
|
||||
<template>
|
||||
<div class="home-container">
|
||||
<div class="home-container personal">
|
||||
<el-row :gutter="15">
|
||||
<el-col :sm="6" class="mb15">
|
||||
<div @click="toPage({ id: 'personal' })" class="home-card-item home-card-first">
|
||||
<div class="flex-margin flex">
|
||||
<img :src="userInfo.photo" />
|
||||
<div class="home-card-first-right ml15">
|
||||
<div class="flex-margin">
|
||||
<div class="home-card-first-right-title">{{ `${currentTime}, ${userInfo.username}` }}</div>
|
||||
</div>
|
||||
<!-- 个人信息 -->
|
||||
<el-col :xs="24" :sm="16">
|
||||
<el-card shadow="hover" header="个人信息">
|
||||
<div class="personal-user">
|
||||
<div class="personal-user-left">
|
||||
<el-upload class="h100 personal-user-left-upload" action="" multiple :limit="1">
|
||||
<img :src="userInfo.photo" />
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="personal-user-right">
|
||||
<el-row>
|
||||
<el-col :span="24" class="personal-title mb18"
|
||||
>{{ currentTime }}，{{ userInfo.name }}，生活变的再糟糕，也不妨碍我变得更好！
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="12" class="personal-item mb6">
|
||||
<div class="personal-item-label">用户名：</div>
|
||||
<div class="personal-item-value">{{ userInfo.username }}</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" class="personal-item mb6">
|
||||
<div class="personal-item-label">角色：</div>
|
||||
<div class="personal-item-value">{{ roleInfo }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="12" class="personal-item mb6">
|
||||
<div class="personal-item-label">上次登录IP：</div>
|
||||
<div class="personal-item-value">{{ userInfo.lastLoginIp }}</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" class="personal-item mb6">
|
||||
<div class="personal-item-label">上次登录时间：</div>
|
||||
<div class="personal-item-value">{{ dateFormat(userInfo.lastLoginTime) }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :sm="3" class="mb15" v-for="(v, k) in topCardItemList as any" :key="k">
|
||||
<div @click="toPage(v)" class="home-card-item home-card-item-box" :style="{ background: v.color }">
|
||||
<div class="home-card-item-flex">
|
||||
<div class="home-card-item-title pb3">{{ v.title }}</div>
|
||||
<div class="home-card-item-title-num pb6" :id="v.id"></div>
|
||||
|
||||
<!-- 消息通知 -->
|
||||
<el-col :xs="24" :sm="8" class="pl15 personal-info">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<span>消息通知</span>
|
||||
<span @click="showMsgs" class="personal-info-more">更多</span>
|
||||
</template>
|
||||
<div class="personal-info-box">
|
||||
<ul class="personal-info-ul">
|
||||
<li v-for="(v, k) in state.msgs as any" :key="k" class="personal-info-li">
|
||||
<a class="personal-info-li-title">{{ `[${getMsgTypeDesc(v.type)}] ${v.msg}` }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<i :class="v.icon" :style="{ color: v.iconColor }"></i>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="mt20 resource-info">
|
||||
<el-col :sm="12">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="pointer-icon" @click="toPage('machine')">
|
||||
<div class="resource-num">
|
||||
<SvgIcon
|
||||
class="mb5 mr5"
|
||||
:size="28"
|
||||
:name="TagResourceTypeEnum.Machine.extra.icon"
|
||||
:color="TagResourceTypeEnum.Machine.extra.iconColor"
|
||||
/>
|
||||
<span>{{ state.machine.num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :sm="24">
|
||||
<el-table :data="state.machine.opLogs" :height="state.resourceOpTableHeight" stripe size="small">
|
||||
<el-table-column prop="createTime" show-overflow-tooltip width="135">
|
||||
<template #default="scope">
|
||||
{{ dateFormat(scope.row.createTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="codePath" min-width="400" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<TagCodePath :path="scope.row.codePath" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="30">
|
||||
<template #default="scope">
|
||||
<el-link @click="toPage('machine', scope.row.codePath)" type="primary" icon="Position"></el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :sm="12">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="pointer-icon" @click="toPage('db')">
|
||||
<div class="resource-num">
|
||||
<SvgIcon class="mb5 mr5" :size="28" :name="TagResourceTypeEnum.Db.extra.icon" :color="TagResourceTypeEnum.Db.extra.iconColor" />
|
||||
<span>{{ state.db.num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :sm="24">
|
||||
<el-table :data="state.db.opLogs" :height="state.resourceOpTableHeight" stripe size="small">
|
||||
<el-table-column prop="createTime" show-overflow-tooltip min-width="135">
|
||||
<template #default="scope">
|
||||
{{ dateFormat(scope.row.createTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="codePath" min-width="380" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<TagCodePath :path="scope.row.codePath" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="30">
|
||||
<template #default="scope">
|
||||
<el-link @click="toPage('db', scope.row.codePath)" type="primary" icon="Position"></el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="mt20 resource-info">
|
||||
<el-col :sm="12">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="pointer-icon" @click="toPage('redis')">
|
||||
<div class="resource-num">
|
||||
<SvgIcon
|
||||
class="mb5 mr5"
|
||||
:size="28"
|
||||
:name="TagResourceTypeEnum.Redis.extra.icon"
|
||||
:color="TagResourceTypeEnum.Redis.extra.iconColor"
|
||||
/>
|
||||
<span>{{ state.redis.num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :sm="24">
|
||||
<el-table :data="state.redis.opLogs" :height="state.resourceOpTableHeight" stripe size="small">
|
||||
<el-table-column prop="createTime" show-overflow-tooltip min-width="135">
|
||||
<template #default="scope">
|
||||
{{ dateFormat(scope.row.createTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="codePath" min-width="380" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<TagCodePath :path="scope.row.codePath" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="30">
|
||||
<template #default="scope">
|
||||
<el-link @click="toPage('redis', scope.row.codePath)" type="primary" icon="Position"></el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :sm="12">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="pointer-icon" @click="toPage('mongo')">
|
||||
<div class="resource-num">
|
||||
<SvgIcon
|
||||
class="mb5 mr5"
|
||||
:size="28"
|
||||
:name="TagResourceTypeEnum.Mongo.extra.icon"
|
||||
:color="TagResourceTypeEnum.Mongo.extra.iconColor"
|
||||
/>
|
||||
<span>{{ state.mongo.num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :sm="24">
|
||||
<el-table :data="state.mongo.opLogs" :height="state.resourceOpTableHeight" stripe size="small">
|
||||
<el-table-column prop="createTime" show-overflow-tooltip min-width="135">
|
||||
<template #default="scope">
|
||||
{{ dateFormat(scope.row.createTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="codePath" min-width="380" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<TagCodePath :path="scope.row.codePath" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="30">
|
||||
<template #default="scope">
|
||||
<el-link @click="toPage('mongo', scope.row.codePath)" type="primary" icon="Position"></el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-dialog width="900px" title="消息" v-model="msgDialog.visible">
|
||||
<el-table border :data="msgDialog.msgs.list" size="small">
|
||||
<el-table-column property="type" label="类型" width="60">
|
||||
<template #default="scope">
|
||||
{{ getMsgTypeDesc(scope.row.type) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="msg" label="消息"></el-table-column>
|
||||
<el-table-column property="createTime" label="时间" width="150">
|
||||
<template #default="scope">
|
||||
{{ dateFormat(scope.row.createTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-row type="flex" class="mt5" justify="center">
|
||||
<el-pagination
|
||||
small
|
||||
@current-change="searchMsg"
|
||||
style="text-align: center"
|
||||
background
|
||||
layout="prev, pager, next, total, jumper"
|
||||
:total="msgDialog.msgs.total"
|
||||
v-model:current-page="msgDialog.query.pageNum"
|
||||
:page-size="msgDialog.query.pageSize"
|
||||
/>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toRefs, reactive, onMounted, nextTick, computed } from 'vue';
|
||||
import { toRefs, reactive, onMounted, computed } from 'vue';
|
||||
// import * as echarts from 'echarts';
|
||||
import { CountUp } from 'countup.js';
|
||||
import { formatAxis } from '@/common/utils/format';
|
||||
import { indexApi } from './api';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useUserInfo } from '@/store/userInfo';
|
||||
import { personApi } from '../personal/api';
|
||||
import { dateFormat } from '@/common/utils/date';
|
||||
import SvgIcon from '@/components/svgIcon/index.vue';
|
||||
import { TagResourceTypeEnum } from '@/common/commonEnum';
|
||||
import { resourceOpLogApi } from '../ops/tag/api';
|
||||
import TagCodePath from '../ops/component/TagCodePath.vue';
|
||||
import { useAutoOpenResource } from '@/store/autoOpenResource';
|
||||
|
||||
const router = useRouter();
|
||||
const { userInfo } = storeToRefs(useUserInfo());
|
||||
|
||||
const state = reactive({
|
||||
topCardItemList: [
|
||||
{
|
||||
title: 'Linux机器',
|
||||
id: 'machineNum',
|
||||
color: '#F95959',
|
||||
accountInfo: {
|
||||
roles: [],
|
||||
},
|
||||
msgs: [],
|
||||
msgDialog: {
|
||||
visible: false,
|
||||
query: {
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
},
|
||||
{
|
||||
title: '数据库',
|
||||
id: 'dbNum',
|
||||
color: '#8595F4',
|
||||
msgs: {
|
||||
list: [],
|
||||
total: null,
|
||||
},
|
||||
{
|
||||
title: 'redis',
|
||||
id: 'redisNum',
|
||||
color: '#1abc9c',
|
||||
},
|
||||
{
|
||||
title: 'Mongo',
|
||||
id: 'mongoNum',
|
||||
color: '#FEBB50',
|
||||
},
|
||||
],
|
||||
},
|
||||
resourceOpTableHeight: 180,
|
||||
defaultLogSize: 5,
|
||||
machine: {
|
||||
num: 0,
|
||||
opLogs: [],
|
||||
},
|
||||
db: {
|
||||
num: 0,
|
||||
opLogs: [],
|
||||
},
|
||||
redis: {
|
||||
num: 0,
|
||||
opLogs: [],
|
||||
},
|
||||
mongo: {
|
||||
num: 0,
|
||||
opLogs: [],
|
||||
},
|
||||
});
|
||||
|
||||
const { topCardItemList } = toRefs(state);
|
||||
const { msgDialog } = toRefs(state);
|
||||
|
||||
const roleInfo = computed(() => {
|
||||
if (state.accountInfo.roles.length == 0) {
|
||||
return '';
|
||||
}
|
||||
return state.accountInfo.roles.map((val: any) => val.roleName).join('、');
|
||||
});
|
||||
|
||||
// 当前时间提示语
|
||||
const currentTime = computed(() => {
|
||||
return formatAxis(new Date());
|
||||
});
|
||||
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initData();
|
||||
getAccountInfo();
|
||||
|
||||
getMsgs().then((res) => {
|
||||
state.msgs = res.list;
|
||||
});
|
||||
});
|
||||
|
||||
const showMsgs = async () => {
|
||||
state.msgDialog.query.pageNum = 1;
|
||||
searchMsg();
|
||||
state.msgDialog.visible = true;
|
||||
};
|
||||
|
||||
const searchMsg = async () => {
|
||||
state.msgDialog.msgs = await getMsgs();
|
||||
};
|
||||
|
||||
const getMsgTypeDesc = (type: number) => {
|
||||
if (type == 1) {
|
||||
return '登录';
|
||||
}
|
||||
if (type == 2) {
|
||||
return '通知';
|
||||
}
|
||||
};
|
||||
|
||||
const getAccountInfo = async () => {
|
||||
state.accountInfo = await personApi.accountInfo.request();
|
||||
};
|
||||
|
||||
const getMsgs = async () => {
|
||||
return await personApi.getMsgs.request(state.msgDialog.query);
|
||||
};
|
||||
|
||||
// 初始化数字滚动
|
||||
const initNumCountUp = async () => {
|
||||
indexApi.machineDashbord.request().then((res: any) => {
|
||||
nextTick(() => {
|
||||
new CountUp('machineNum', res.machineNum).start();
|
||||
const initData = async () => {
|
||||
resourceOpLogApi.getAccountResourceOpLogs
|
||||
.request({ resourceType: TagResourceTypeEnum.MachineAuthCert.value, pageSize: state.defaultLogSize })
|
||||
.then((res: any) => {
|
||||
state.machine.opLogs = res.list;
|
||||
});
|
||||
|
||||
resourceOpLogApi.getAccountResourceOpLogs.request({ resourceType: TagResourceTypeEnum.DbName.value, pageSize: state.defaultLogSize }).then((res: any) => {
|
||||
state.db.opLogs = res.list;
|
||||
});
|
||||
|
||||
resourceOpLogApi.getAccountResourceOpLogs.request({ resourceType: TagResourceTypeEnum.Redis.value, pageSize: state.defaultLogSize }).then((res: any) => {
|
||||
state.redis.opLogs = res.list;
|
||||
});
|
||||
|
||||
resourceOpLogApi.getAccountResourceOpLogs.request({ resourceType: TagResourceTypeEnum.Mongo.value, pageSize: state.defaultLogSize }).then((res: any) => {
|
||||
state.mongo.opLogs = res.list;
|
||||
});
|
||||
|
||||
indexApi.machineDashbord.request().then((res: any) => {
|
||||
state.machine.num = res.machineNum;
|
||||
});
|
||||
|
||||
indexApi.dbDashbord.request().then((res: any) => {
|
||||
nextTick(() => {
|
||||
new CountUp('dbNum', res.dbNum).start();
|
||||
});
|
||||
state.db.num = res.dbNum;
|
||||
});
|
||||
|
||||
indexApi.redisDashbord.request().then((res: any) => {
|
||||
nextTick(() => {
|
||||
new CountUp('redisNum', res.redisNum).start();
|
||||
});
|
||||
state.redis.num = res.redisNum;
|
||||
});
|
||||
|
||||
indexApi.mongoDashbord.request().then((res: any) => {
|
||||
nextTick(() => {
|
||||
new CountUp('mongoNum', res.mongoNum).start();
|
||||
});
|
||||
state.mongo.num = res.mongoNum;
|
||||
});
|
||||
};
|
||||
|
||||
const toPage = (item: any) => {
|
||||
switch (item.id) {
|
||||
const toPage = (item: any, codePath = '') => {
|
||||
let path;
|
||||
switch (item) {
|
||||
case 'personal': {
|
||||
router.push('/personal');
|
||||
break;
|
||||
}
|
||||
case 'mongoNum': {
|
||||
router.push('/mongo/mongo-data-operation');
|
||||
case 'mongo': {
|
||||
useAutoOpenResource().setMongoCodePath(codePath);
|
||||
path = '/mongo/mongo-data-operation';
|
||||
break;
|
||||
}
|
||||
case 'machineNum': {
|
||||
router.push('/machine/machines-op');
|
||||
case 'machine': {
|
||||
useAutoOpenResource().setMachineCodePath(codePath);
|
||||
path = '/machine/machines-op';
|
||||
break;
|
||||
}
|
||||
case 'dbNum': {
|
||||
router.push('/dbms/sql-exec');
|
||||
case 'db': {
|
||||
useAutoOpenResource().setDbCodePath(codePath);
|
||||
path = '/dbms/sql-exec';
|
||||
break;
|
||||
}
|
||||
case 'redisNum': {
|
||||
router.push('/redis/data-operation');
|
||||
case 'redis': {
|
||||
useAutoOpenResource().setRedisCodePath(codePath);
|
||||
path = '/redis/data-operation';
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initNumCountUp();
|
||||
// initHomeLaboratory();
|
||||
// initHomeOvertime();
|
||||
});
|
||||
router.push({ path });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/theme/mixins/index.scss';
|
||||
|
||||
.personal {
|
||||
.personal-user {
|
||||
height: 130px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.personal-user-left {
|
||||
width: 100px;
|
||||
height: 130px;
|
||||
border-radius: 3px;
|
||||
|
||||
::v-deep(.el-upload) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.personal-user-left-upload {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
animation: logoAnimation 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.personal-user-right {
|
||||
flex: 1;
|
||||
padding: 0 15px;
|
||||
|
||||
.personal-title {
|
||||
font-size: 18px;
|
||||
@include text-ellipsis(1);
|
||||
}
|
||||
|
||||
.personal-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
|
||||
.personal-item-label {
|
||||
color: gray;
|
||||
@include text-ellipsis(1);
|
||||
}
|
||||
|
||||
.personal-item-value {
|
||||
@include text-ellipsis(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.personal-info {
|
||||
.personal-info-more {
|
||||
float: right;
|
||||
color: gray;
|
||||
font-size: 13px;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.personal-info-box {
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
|
||||
.personal-info-ul {
|
||||
list-style: none;
|
||||
|
||||
.personal-info-li {
|
||||
font-size: 13px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.personal-info-li-title {
|
||||
display: inline-block;
|
||||
@include text-ellipsis(1);
|
||||
color: grey;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& a:hover {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.resource-info {
|
||||
text-align: center;
|
||||
|
||||
::v-deep(.el-card__header) {
|
||||
padding: 2px 20px;
|
||||
}
|
||||
|
||||
.resource-num {
|
||||
font-weight: 700;
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
.home-container {
|
||||
overflow-x: hidden;
|
||||
|
||||
@@ -182,7 +586,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.home-card-item-title-num {
|
||||
font-size: 18px;
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
.home-card-item-tip-num {
|
||||
@@ -190,124 +594,5 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-card-first {
|
||||
background: var(--bg-main-color);
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid var(--el-color-primary-light-5);
|
||||
}
|
||||
|
||||
.home-card-first-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.home-card-first-right-msg {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-monitor {
|
||||
height: 200px;
|
||||
|
||||
.flex-warp-item {
|
||||
width: 50%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
|
||||
.flex-warp-item-box {
|
||||
margin: auto;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-warning-card {
|
||||
height: 292px;
|
||||
|
||||
::v-deep(.el-card) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.home-dynamic {
|
||||
height: 200px;
|
||||
|
||||
.home-dynamic-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
|
||||
&:first-of-type {
|
||||
.home-dynamic-item-line {
|
||||
i {
|
||||
color: orange !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-dynamic-item-left {
|
||||
text-align: right;
|
||||
|
||||
.home-dynamic-item-left-time1 {
|
||||
}
|
||||
|
||||
.home-dynamic-item-left-time2 {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
|
||||
.home-dynamic-item-line {
|
||||
height: 60px;
|
||||
border-right: 2px dashed #dfdfdf;
|
||||
margin: 0 20px;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
color: var(--el-color-primary);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: -6px;
|
||||
transform: rotate(46deg);
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.home-dynamic-item-right {
|
||||
flex: 1;
|
||||
|
||||
.home-dynamic-item-right-title {
|
||||
i {
|
||||
margin-right: 5px;
|
||||
border: 1px solid #dfdfdf;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
padding: 3px 2px 2px;
|
||||
text-align: center;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.home-dynamic-item-right-label {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user