zq
2 months ago
commit
375f00e362
21 changed files with 771 additions and 0 deletions
@ -0,0 +1,39 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<style> |
||||
|
.leftSideFooterNew{ |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
padding: 30px 70px; |
||||
|
font-size: var(--font-small-size); |
||||
|
color: #9E9E9E; |
||||
|
position: relative; |
||||
|
z-index: 98; |
||||
|
} |
||||
|
.leftSideFooterNew p{ |
||||
|
margin: 0; |
||||
|
color: #9E9E9E; |
||||
|
} |
||||
|
.leftSideFooterNew p span{ |
||||
|
color: #5B6FF6; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.leftSideFooterNew p a{ |
||||
|
color: #9E9E9E; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="leftSideFooterNew"> |
||||
|
<p>Copyright ©2012-{$smarty.now|date_format:'%Y'} .</p> |
||||
|
<p><span>All Rights Reserved</span> {if $_siteinfo.company_name} {$_siteinfo.company_name}{/if}{if $webbeian} {$webbeian}{/if}</p> |
||||
|
</div> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,11 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,238 @@ |
|||||
|
<!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> |
||||
@ -0,0 +1,119 @@ |
|||||
|
<!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"> |
||||
|
<style> |
||||
|
.login-wrap { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.login-container { |
||||
|
padding: 40px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
width: calc(440px - 40px*2); |
||||
|
height: calc(429.32px - 40px*2); |
||||
|
border-radius: 16px; |
||||
|
opacity: 1; |
||||
|
background: #FFFFFF; |
||||
|
/* 蓝色阴影_常规 */ |
||||
|
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12); |
||||
|
position: relative; |
||||
|
} |
||||
|
.con-top{ |
||||
|
margin-bottom: 43px; |
||||
|
} |
||||
|
.con-top span{ |
||||
|
font-family: MiSans; |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
line-height: 24px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: 0px; |
||||
|
color: #1E2226; |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
.qrcode{ |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
.code-filter{ |
||||
|
opacity: 1; |
||||
|
background: rgba(255, 255, 255, 0.9); |
||||
|
backdrop-filter: blur(2px); |
||||
|
position: absolute; |
||||
|
cursor: pointer; |
||||
|
top: 117px; |
||||
|
} |
||||
|
.code-filter img{ |
||||
|
margin-bottom: 6px; |
||||
|
} |
||||
|
.weixin-log{ |
||||
|
margin-bottom: 6px; |
||||
|
} |
||||
|
.weixin-log img{ |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
.weixin-log + p{ |
||||
|
color: #1E2226; |
||||
|
letter-spacing: 0.08em; |
||||
|
} |
||||
|
.qrcode img, .code-filter{ |
||||
|
width: 220px; |
||||
|
height: 220px; |
||||
|
} |
||||
|
.login-main{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-size: 100% 100%; |
||||
|
background-image: url(./style/img/login_back.png); |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div class="login-main flex"> |
||||
|
<div class="login-wrap"> |
||||
|
<div class="login-container"> |
||||
|
<div class="con-top center"> |
||||
|
<img src="./style/img/login_top.svg" alt=""> |
||||
|
<span>私有云知识库</span> |
||||
|
</div> |
||||
|
<div class="qrcode"> |
||||
|
<!-- 暂时排版用 --> |
||||
|
<img src="./style/img/qrcode-tem.png" alt=""> |
||||
|
</div> |
||||
|
<div class="code-filter column "> |
||||
|
<img src="./style/img/refresh.svg" alt=""> |
||||
|
<span>点击刷新</span> |
||||
|
</div> |
||||
|
<div class="login-bottom "> |
||||
|
<div class="weixin-log center"> |
||||
|
<img src="./style/img/login_weixin.svg" alt=""> |
||||
|
<span>微信扫码登录</span> |
||||
|
</div> |
||||
|
<p style="color: #626573;"> |
||||
|
扫码后请在手机上确认登录 |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="leftSideFooterNew"> |
||||
|
<p>Copyright ©2012-2025 .</p> |
||||
|
<p><span>All Rights Reserved</span> 底部随便写的</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</body> |
||||
|
<script> |
||||
|
|
||||
|
</script> |
||||
|
</html> |
||||
@ -0,0 +1,109 @@ |
|||||
|
<!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/ui.css"> |
||||
|
<script src="./style/js/vue@2.js"></script> |
||||
|
<script src="./style/js/index.js"></script> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div id="app"> |
||||
|
<el-button type="primary">主要按钮</el-button> |
||||
|
<el-button type="primary" @click="dialogVisible = true">打开对话框</el-button> |
||||
|
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> |
||||
|
<span>这是一个对话框</span> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="dialogVisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click="dialogVisible = false">确定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<el-table :data="tableData" style="width: 100%" height="500"> |
||||
|
<el-table-column> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex cell_render"> |
||||
|
<div class="flex"> |
||||
|
<span>¥{{ scope.row.stock }}/篇</span> |
||||
|
<b>{{scope.row.name}}</b> |
||||
|
</div> |
||||
|
<p>华佗医生真是医术高明，每次看您的微博都能学到很多中医的智慧和精髓，真是受益匪浅！感谢您为中医事业做出的贡献💐。</p> |
||||
|
<div class="flex"> |
||||
|
<el-button>删除</el-button> |
||||
|
<el-button type="primary">通过</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="prev, pager, next" |
||||
|
:total="total" |
||||
|
:page-size="pageSize" |
||||
|
@current-change="handlePageChange" |
||||
|
> |
||||
|
</div> |
||||
|
</body> |
||||
|
<script> |
||||
|
new Vue({ |
||||
|
el: '#app', |
||||
|
data() { |
||||
|
return { |
||||
|
dialogVisible: false, |
||||
|
pageSize: 20, |
||||
|
currentPage: 1, |
||||
|
// 如果冲突需要改一下界定符 |
||||
|
// $smarty->left_delimiter = '{%'; |
||||
|
// $smarty->right_delimiter = '%}'; |
||||
|
// 如果直接使用模板数据 如下 |
||||
|
// allData: [ |
||||
|
// {% foreach $items as $item %} |
||||
|
// { name: '{% $item.name %}', price: {% $item.price %} }, |
||||
|
// {% /foreach %} |
||||
|
// ], |
||||
|
tableData: [{ |
||||
|
stock: 12, |
||||
|
name: '小红' |
||||
|
}, |
||||
|
{ |
||||
|
stock: 12, |
||||
|
name: '小lb' |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
stock: 12, |
||||
|
name: 'hahhhahsh ' |
||||
|
}, |
||||
|
{ |
||||
|
stock: 12 |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
// 当前页的数据 |
||||
|
tableData() { |
||||
|
const start = (this.currentPage - 1) * this.pageSize; |
||||
|
const end = start + this.pageSize; |
||||
|
return this.tableData.slice(start, end); |
||||
|
}, |
||||
|
// 数据总数 |
||||
|
total() { |
||||
|
return this.tableData.length; |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
// 分页切换事件 |
||||
|
handlePageChange(page) { |
||||
|
this.currentPage = page; |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,131 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="zh-CN"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8" /> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
|
<title>分页条</title> |
||||
|
<style> |
||||
|
ul { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
list-style: none; |
||||
|
color: #8a8a8a; |
||||
|
padding: 0; |
||||
|
user-select: none; |
||||
|
} |
||||
|
li { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 45px; |
||||
|
height: 45px; |
||||
|
border: 1px solid #f0e9ff; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
li { |
||||
|
margin-left: 10px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.active { |
||||
|
background-color: #fbf9ff; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<ul id="pagination"></ul> |
||||
|
|
||||
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
||||
|
<script> |
||||
|
// 当文档加载完成后执行以下函数 |
||||
|
$(function () { |
||||
|
let currentPage = 1; // 定义变量，用于存储当前的页码 |
||||
|
|
||||
|
// 创建分页条的函数 |
||||
|
function createPagination(currentPage, totalPages) { |
||||
|
let paginationHtml = ""; // 初始化一个字符串，用于存放分页条的HTML代码 |
||||
|
|
||||
|
// 如果当前页不是第一页，则生成一个“上一页”按钮 |
||||
|
if (currentPage > 1) { |
||||
|
paginationHtml += "<li><</li>"; |
||||
|
} |
||||
|
|
||||
|
// 始终显示第一页的页码 |
||||
|
paginationHtml += generatePageNumberHtml(1, currentPage); |
||||
|
|
||||
|
// 如果总页数大于1页，则继续生成分页条的其余部分 |
||||
|
if (totalPages > 1) { |
||||
|
// 如果当前页码大于3，则在第一页和当前页之间添加省略号 |
||||
|
if (currentPage > 3) { |
||||
|
paginationHtml += "<li>...</li>"; |
||||
|
} |
||||
|
// 遍历当前页附近的页码，并生成对应的分页按钮 |
||||
|
for ( |
||||
|
let i = Math.max(currentPage - 2, 2); |
||||
|
i <= Math.min(currentPage + 2, totalPages - 1); |
||||
|
i++ |
||||
|
) { |
||||
|
paginationHtml += generatePageNumberHtml(i, currentPage); |
||||
|
} |
||||
|
// 如果当前页码小于总页数减去2，则在当前页和最后一页之间添加省略号 |
||||
|
if (currentPage < totalPages - 2) { |
||||
|
paginationHtml += "<li>...</li>"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 始终显示最后一页的页码 |
||||
|
paginationHtml += generatePageNumberHtml(totalPages, currentPage); |
||||
|
|
||||
|
// 如果当前页不是最后一页，则生成一个“下一页”按钮 |
||||
|
if (currentPage < totalPages) { |
||||
|
paginationHtml += "<li>></li>"; |
||||
|
} |
||||
|
|
||||
|
// 返回生成的分页条HTML字符串 |
||||
|
return paginationHtml; |
||||
|
} |
||||
|
|
||||
|
// 生成单个页码按钮的HTML的函数 |
||||
|
function generatePageNumberHtml(pageNumber, currentPage) { |
||||
|
// 返回一个格式化后的HTML字符串，包含激活状态的判断 |
||||
|
return ( |
||||
|
'<li class="' + |
||||
|
(pageNumber === currentPage ? "active" : "") + |
||||
|
'">' + |
||||
|
pageNumber + |
||||
|
"</li>" |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 选择页码的函数 |
||||
|
function selectPage(pageNumber) { |
||||
|
// 更新当前页码的变量，并重新生成分页条 |
||||
|
currentPage = pageNumber; |
||||
|
$("#pagination").html(createPagination(currentPage, 20)); |
||||
|
} |
||||
|
|
||||
|
// 为分页条上的每个按钮绑定点击事件 |
||||
|
$("#pagination").on("click", "li", function (event) { |
||||
|
let pageNumber = $(this).text(); // 获取点击的页码或按钮文本 |
||||
|
|
||||
|
// 如果点击的是省略号，则不执行任何操作 |
||||
|
if (pageNumber === "...") { |
||||
|
event.preventDefault(); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 根据点击的按钮，调用selectPage函数更新当前页码 |
||||
|
if (pageNumber === "<") { |
||||
|
selectPage(currentPage - 1); |
||||
|
} else if (pageNumber === ">") { |
||||
|
selectPage(currentPage + 1); |
||||
|
} else { |
||||
|
selectPage(parseInt(pageNumber)); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 初始化分页条，总页数为20，默认显示第一页 |
||||
|
$("#pagination").html(createPagination(currentPage, 20)); |
||||
|
}); |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,62 @@ |
|||||
|
html,body,li{ |
||||
|
font-family: Microsoft YaHei UI; |
||||
|
font-size: 14px; |
||||
|
color: #1E2226; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
list-style: none; |
||||
|
font-style: normal; |
||||
|
text-decoration: none; |
||||
|
border: none; |
||||
|
} |
||||
|
body{ |
||||
|
background: #F5F7FA; |
||||
|
} |
||||
|
p{ |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.flex{ |
||||
|
display: flex; |
||||
|
} |
||||
|
.hide{ |
||||
|
display: none !important; |
||||
|
} |
||||
|
.center{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.column{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
/* 底部 */ |
||||
|
.leftSideFooterNew{ |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
padding: 30px 70px; |
||||
|
font-size: var(--font-small-size); |
||||
|
color: #9E9E9E; |
||||
|
position: relative; |
||||
|
z-index: 98; |
||||
|
} |
||||
|
.leftSideFooterNew p{ |
||||
|
margin: 0; |
||||
|
color: #9E9E9E; |
||||
|
} |
||||
|
.leftSideFooterNew p span{ |
||||
|
color: #5B6FF6; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.leftSideFooterNew p a{ |
||||
|
color: #9E9E9E; |
||||
|
text-decoration: none; |
||||
|
} |
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 792 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 792 B |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,39 @@ |
|||||
|
document.addEventListener('DOMContentLoaded', function() { |
||||
|
const items = document.getElementById('items'); |
||||
|
const pagination = document.getElementById('pagination'); |
||||
|
const data = [/* 这里是你要分页的数据，例如一个包含多个对象的数组 */]; // 示例数据，实际应用中应从服务器获取或定义在外部文件等
|
||||
|
const itemsPerPage = 5; // 每页显示的项目数
|
||||
|
let currentPage = 1; // 当前页码
|
||||
|
|
||||
|
function displayItems(page) { |
||||
|
const startIndex = (page - 1) * itemsPerPage; |
||||
|
const endIndex = startIndex + itemsPerPage; |
||||
|
items.innerHTML = ''; // 清空当前显示的内容
|
||||
|
for (let i = startIndex; i < endIndex && i < data.length; i++) { |
||||
|
const item = document.createElement('li'); |
||||
|
item.textContent = data[i]; // 显示数据项，根据实际情况调整显示内容（例如使用data[i].name等）
|
||||
|
items.appendChild(item); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function displayPagination(totalPages) { |
||||
|
pagination.innerHTML = ''; // 清空现有的分页链接
|
||||
|
for (let i = 1; i <= totalPages; i++) { |
||||
|
const pageItem = document.createElement('li'); |
||||
|
pageItem.textContent = i; |
||||
|
pageItem.onclick = function() { |
||||
|
currentPage = i; |
||||
|
displayItems(currentPage); // 显示当前页的数据项
|
||||
|
displayPagination(totalPages); // 更新分页链接的激活状态
|
||||
|
}; |
||||
|
if (i === currentPage) { |
||||
|
pageItem.classList.add('active'); // 为当前页码添加激活样式
|
||||
|
} |
||||
|
pagination.appendChild(pageItem); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const totalPages = Math.ceil(data.length / itemsPerPage); // 计算总页数
|
||||
|
displayItems(currentPage); // 初始化显示第一页的数据项
|
||||
|
displayPagination(totalPages); // 初始化分页链接的显示
|
||||
|
}); |
||||
Loading…
Reference in new issue