解决刷新时样式失效问题。
This commit is contained in:
liuwei
@@ -7,18 +7,18 @@
|
|||||||
<!-- 添加favicon -->
|
<!-- 添加favicon -->
|
||||||
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
|
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
|
||||||
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
|
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
|
||||||
<!-- Element UI CSS -->
|
|
||||||
<link rel="stylesheet" href="/static/css/element-ui/theme-chalk/index.min.css">
|
<!-- 添加初始样式，防止闪烁 -->
|
||||||
<!-- 图表库 -->
|
|
||||||
<script src="/static/js/chart.js"></script>
|
|
||||||
<!-- Vue.js -->
|
|
||||||
<script src="/static/js/vue.js"></script>
|
|
||||||
<!-- Element UI JS -->
|
|
||||||
<script src="/static/js/element-ui/index.min.js"></script>
|
|
||||||
<!-- Axios -->
|
|
||||||
<script src="/static/js/axios.min.js"></script>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
/* 初始加载时的样式 */
|
||||||
|
.app-container {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
.app-container.loaded {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
/* 其他基础样式 */
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -63,8 +63,8 @@
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background-color: #f0f2f5;
|
background-color: #f0f2f5;
|
||||||
display: flex; /* 添加Flex布局 */
|
display: flex;
|
||||||
flex-direction: column; /* 确保子元素垂直排列 */
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.el-menu {
|
.el-menu {
|
||||||
border-right: none;
|
border-right: none;
|
||||||
@@ -79,7 +79,6 @@
|
|||||||
.stats-card {
|
.stats-card {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
/* 添加退出登录按钮样式 */
|
|
||||||
.logout-btn {
|
.logout-btn {
|
||||||
color: white;
|
color: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -93,6 +92,18 @@
|
|||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<!-- Element UI CSS -->
|
||||||
|
<link rel="stylesheet" href="/static/css/element-ui/theme-chalk/index.min.css">
|
||||||
|
<!-- 图表库 -->
|
||||||
|
<script src="/static/js/chart.js"></script>
|
||||||
|
<!-- Vue.js -->
|
||||||
|
<script src="/static/js/vue.js"></script>
|
||||||
|
<!-- Element UI JS -->
|
||||||
|
<script src="/static/js/element-ui/index.min.js"></script>
|
||||||
|
<!-- Axios -->
|
||||||
|
<script src="/static/js/axios.min.js"></script>
|
||||||
|
|
||||||
{% block head %}{% endblock %}
|
{% block head %}{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -228,20 +239,21 @@
|
|||||||
currentView: '1',
|
currentView: '1',
|
||||||
timeRange: '7',
|
timeRange: '7',
|
||||||
charts: {},
|
charts: {},
|
||||||
// 添加一个标志，用于控制时间范围选择器的显示
|
|
||||||
showTimeRangeSelector: false
|
showTimeRangeSelector: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
// 根据当前页面路径决定是否显示时间范围选择器
|
// 根据当前页面路径决定是否显示时间范围选择器
|
||||||
const path = window.location.pathname;
|
const path = window.location.pathname;
|
||||||
// 只在统计相关页面显示时间范围选择器
|
|
||||||
this.showTimeRangeSelector = ['/', '/plugins', '/users', '/groups','/robot','/errors'].includes(path);
|
this.showTimeRangeSelector = ['/', '/plugins', '/users', '/groups','/robot','/errors'].includes(path);
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
// 添加页面加载完成后的过渡效果
|
||||||
|
document.querySelector('.app-container').classList.add('loaded');
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleSelect(key, keyPath) {
|
handleSelect(key, keyPath) {
|
||||||
this.currentView = key;
|
this.currentView = key;
|
||||||
// 添加页面跳转逻辑
|
|
||||||
const routes = {
|
const routes = {
|
||||||
'1': '/',
|
'1': '/',
|
||||||
'2': '/plugins',
|
'2': '/plugins',
|
||||||
@@ -259,26 +271,29 @@
|
|||||||
'15': '/file_browser'
|
'15': '/file_browser'
|
||||||
};
|
};
|
||||||
|
|
||||||
// 如果当前不在对应页面，则跳转
|
|
||||||
const currentPath = window.location.pathname;
|
const currentPath = window.location.pathname;
|
||||||
const targetPath = routes[key];
|
const targetPath = routes[key];
|
||||||
if (currentPath !== targetPath && targetPath !== undefined) {
|
if (currentPath !== targetPath && targetPath !== undefined) {
|
||||||
window.location.href = targetPath;
|
// 添加页面切换时的过渡效果
|
||||||
|
document.querySelector('.app-container').classList.remove('loaded');
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = targetPath;
|
||||||
|
}, 300);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
loadData() {
|
loadData() {
|
||||||
// 由子组件实现
|
// 由子组件实现
|
||||||
},
|
},
|
||||||
// 添加退出登录方法
|
|
||||||
logout() {
|
logout() {
|
||||||
// 显示确认对话框
|
|
||||||
this.$confirm('确认退出登录吗?', '提示', {
|
this.$confirm('确认退出登录吗?', '提示', {
|
||||||
confirmButtonText: '确定',
|
confirmButtonText: '确定',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning'
|
type: 'warning'
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
// 用户点击确定，跳转到登出页面
|
document.querySelector('.app-container').classList.remove('loaded');
|
||||||
window.location.href = '/logout';
|
setTimeout(() => {
|
||||||
|
window.location.href = '/logout';
|
||||||
|
}, 300);
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
// 用户点击取消，不做任何操作
|
// 用户点击取消，不做任何操作
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user