You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
238 lines
6.6 KiB
238 lines
6.6 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="./style/css/common.css">
|
|
<script src="./style/js/jquery-3.6.0.min.js"></script>
|
|
<style>
|
|
.home-page {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.header-wrap {
|
|
/* position: absolute;
|
|
left: 0px;
|
|
top: 0px; */
|
|
width: calc(100% - 64px);
|
|
height: 46px;
|
|
/* 自动布局 */
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 32px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: linear-gradient(270deg, #4EA4F3 0%, #3D85EA 100%);
|
|
}
|
|
|
|
.home-logo {
|
|
width: 168px;
|
|
}
|
|
|
|
/* Dropdown 容器 */
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Dropdown 按钮 */
|
|
.dropdown-toggle {
|
|
background-color: transparent;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Dropdown 面板 */
|
|
.dropdown-panel {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #f9f9f9;
|
|
min-width: 160px;
|
|
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Dropdown 面板中的链接 */
|
|
.dropdown-panel a {
|
|
color: black;
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
/* Dropdown 面板中的链接悬停效果 */
|
|
.dropdown-panel a:hover {
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
/* 图标旋转效果 */
|
|
.icon {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
/* 面板展开时图标的旋转 */
|
|
.icon.rotate {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.header-right {
|
|
align-items: center;
|
|
}
|
|
|
|
.home-main {
|
|
margin: 20px;
|
|
}
|
|
|
|
.tab-list {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.index-nav-wrap ul {
|
|
width: 346px;
|
|
height: 20px;
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: space-between;
|
|
letter-spacing: 1px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
|
|
.index-nav-wrap ul::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
width: 500px;
|
|
height: 1px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -8px;
|
|
background: linear-gradient(270deg, rgba(140, 145, 157, 0.1) 0%, rgba(140, 145, 157, 0.2) 50%, rgba(140, 145, 157, 0.1) 100%);
|
|
}
|
|
|
|
.index-nav-wrap ul li {
|
|
color: #3D4B54;
|
|
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.index-nav-wrap ul li span {
|
|
position: relative;
|
|
color: #3D4B54;
|
|
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.index-nav-wrap ul li span.active {
|
|
color: #1675FF !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.index-nav-wrap ul li span.active::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: #1675FF;
|
|
border-radius: 2px;
|
|
left: 50%;
|
|
margin-left: -50%;
|
|
bottom: -11px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="home-page">
|
|
<div class="header-wrap">
|
|
<img class="home-logo" src="./style/img/home-logo.png" alt="">
|
|
<div class="header-right flex">
|
|
<img src="./style/img/home-more.png" alt="">
|
|
<div class="dropdown">
|
|
<button class="dropdown-toggle" onclick="toggleDropdown()">
|
|
学术论文出版
|
|
<img class="icon" src="./style/img/drop-icon.svg" alt="">
|
|
</button>
|
|
<div class="dropdown-panel">
|
|
<a href="#">Item 1</a>
|
|
<a href="#">Item 2</a>
|
|
<a href="#">Item 3</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="home-main">
|
|
<div class="tab-list index-nav-wrap flex">
|
|
<ul class="tab-wrap">
|
|
<li class="index-nav-wrap-li" type="1"><span class="active">待审批</span></li>
|
|
<li class="index-nav-wrap-li" type="2"><span>已审批</span></li>
|
|
<li class="index-nav-wrap-li" type="3"><span>已删除</span></li>
|
|
</ul>
|
|
<button>
|
|
<img src="" alt="">新增自录入
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var waitCheck = [{
|
|
source: '微博',
|
|
name: '麻辣烫---',
|
|
lurutime: '2025.01.13 23:00'
|
|
},
|
|
{
|
|
source: '自录入',
|
|
question: ''
|
|
|
|
}
|
|
]; //待审批
|
|
var checkList = []; //已审批
|
|
var deletedList = []; //已删除
|
|
function toggleDropdown() {
|
|
const dropdownPanel = document.querySelector('.dropdown-panel');
|
|
const icon = document.querySelector('.icon');
|
|
|
|
// 切换面板的显示/隐藏
|
|
if (dropdownPanel.style.display === 'block') {
|
|
dropdownPanel.style.display = 'none';
|
|
icon.classList.remove('rotate'); // 移除旋转效果
|
|
} else {
|
|
dropdownPanel.style.display = 'block';
|
|
icon.classList.add('rotate'); // 添加旋转效果
|
|
}
|
|
}
|
|
|
|
// 点击页面其他区域关闭面板
|
|
document.addEventListener('click', (event) => {
|
|
const dropdown = document.querySelector('.dropdown');
|
|
const dropdownPanel = document.querySelector('.dropdown-panel');
|
|
const icon = document.querySelector('.icon');
|
|
|
|
// 如果点击的区域不在 Dropdown 内，则关闭面板
|
|
if (!dropdown.contains(event.target)) {
|
|
dropdownPanel.style.display = 'none';
|
|
icon.classList.remove('rotate');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</html>
|