311 lines
9.9 KiB
HTML
311 lines
9.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Title</title>
|
|
<link rel="stylesheet" href="${base!}/assets/platform/fonts/themify-icons.css" />
|
|
<link rel="stylesheet" href="${base!}/assets/platform/fonts/font-awesome.min.css" />
|
|
|
|
<link rel="stylesheet" href="https://cdn.staticfile.net/element-ui/2.15.14/theme-chalk/index.css" />
|
|
<link rel="stylesheet" href="https://cdn.staticfile.net/element-ui/2.15.14/theme-chalk/fonts/element-icons.woff" />
|
|
|
|
<!-- import Vue before Element -->
|
|
<script src="${base!}/assets/platform/plugins/vue/vue.js"></script>
|
|
<script src="${base!}/assets/platform/plugins/vuex/vuex.js"></script>
|
|
<script src="${base!}/assets/platform/plugins/vuex-persistedstate/vuex-persistedstate.umd.js"></script>
|
|
<script src="${base!}/assets/platform/plugins/vue-http-loader/httpVueLoader.js"></script>
|
|
|
|
<!-- import ElementUI -->
|
|
<script src="${base!}/assets/platform/plugins/element-ui/lib/index.js"></script>
|
|
<script src="${base!}/assets/platform/plugins/element-ui/lib/i18n/${lang,escape}.js"></script>
|
|
|
|
<!-- import Jquery -->
|
|
<script src="${base!}/assets/platform/plugins/jquery/jquery.js"></script>
|
|
<!-- pjax是异步加载html片段的工具,模拟前端路由机制 -->
|
|
<script src="${base!}/assets/platform/plugins/pjax/jquery.pjax.js"></script>
|
|
|
|
<style>
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background-color: #f5f7fa;
|
|
color: #333;
|
|
}
|
|
|
|
.v4-header {
|
|
background-color: rgb(0, 109, 185);
|
|
box-shadow: 0 2px 10px rgba(0, 109, 185, 0.3);
|
|
padding: 0 24px;
|
|
height: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.v4-logo-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 40px;
|
|
height: 100%;
|
|
}
|
|
|
|
.v4-logo {
|
|
height: 100%;
|
|
width: auto;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.v4-nav {
|
|
display: flex;
|
|
gap: 40px;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.v4-nav-item {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
position: relative;
|
|
padding: 0 16px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: all 0.2s ease;
|
|
column-gap: 10px;
|
|
}
|
|
|
|
.v4-nav-item:hover,
|
|
.v4-nav-item.active {
|
|
color: #ffffff;
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
|
|
.v4-nav-item.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.v4-user-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
height: 100%;
|
|
}
|
|
|
|
.v4-notification {
|
|
position: relative;
|
|
cursor: pointer;
|
|
width: 40px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.v4-notification:hover {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.v4-notification i {
|
|
font-size: 18px;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
.v4-notification:hover i {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.v4-badge {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: #ffffff;
|
|
color: rgb(0, 109, 185);
|
|
border-radius: 10px;
|
|
padding: 0 6px;
|
|
font-size: 12px;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.v4-user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 0 12px;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.v4-user-info:hover {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.v4-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgb(0, 109, 185);
|
|
font-weight: 500;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.v4-user-name {
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.v4-logout {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
cursor: pointer;
|
|
padding: 0 14px;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.v4-logout:hover {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.v4-content {
|
|
/* padding: 24px; */
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.v4-left-section {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.v4-header {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.v4-nav {
|
|
gap: 24px;
|
|
}
|
|
|
|
.v4-user-section {
|
|
gap: 16px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.v4-nav {
|
|
display: none;
|
|
}
|
|
|
|
.v4-user-name {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="v4-header">
|
|
<div class="v4-left-section">
|
|
<div class="v4-logo-container">
|
|
<img src="https://i.cug.edu.cn/data/sys-attach/download/1i843ts1nwl3w2n5iw31ohn2n10cripk3gw0" alt="Logo" class="v4-logo" />
|
|
</div>
|
|
|
|
<nav class="v4-nav">
|
|
<a href="/platform/v4/home" data-pjax class="v4-nav-item">
|
|
<i class="fa fa-home"></i>
|
|
首页
|
|
</a>
|
|
<a href="/platform/v4/apps" data-pjax class="v4-nav-item">
|
|
<i class="fa fa-th-large"></i>
|
|
应用中心
|
|
</a>
|
|
<a href="/platform/v4/apps" data-pjax class="v4-nav-item">
|
|
<i class="fa fa-comments"></i>
|
|
咨询中心
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="v4-user-section">
|
|
<div class="v4-user-info">
|
|
<div class="v4-avatar">
|
|
<i class="fa fa-user"></i>
|
|
</div>
|
|
<span class="v4-user-name">用户名</span>
|
|
<i class="fa fa-angle-down"></i>
|
|
</div>
|
|
<div class="v4-logout">
|
|
<i class="fa fa-sign-out"></i>
|
|
退出
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="v4-content">
|
|
<!-- 页面内容区域 -->
|
|
<div class="ele-body" id="container">${layoutContent}</div>
|
|
</main>
|
|
|
|
<script nonce="${cspNonce!}">
|
|
// 处理导航项的active状态
|
|
$(document).ready(function() {
|
|
// 初始化：根据当前URL设置active状态
|
|
function setActiveNavItem() {
|
|
var currentPath = getBaseSubAppPath();
|
|
$('.v4-nav-item').removeClass('active');
|
|
$('.v4-nav-item').each(function() {
|
|
if ($(this).attr('href') === currentPath) {
|
|
$(this).addClass('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
// 页面加载时设置active状态
|
|
setActiveNavItem();
|
|
|
|
// 使用pjax的事件来处理导航切换
|
|
$(document).on('pjax:complete', function() {
|
|
setActiveNavItem();
|
|
});
|
|
|
|
// 为导航项添加点击事件
|
|
$('.v4-nav-item').on('click', function() {
|
|
$('.v4-nav-item').removeClass('active');
|
|
$(this).addClass('active');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|