diff --git a/home.html b/home.html index 6afbd9c..b3babbf 100644 --- a/home.html +++ b/home.html @@ -6,156 +6,8 @@ Document + - @@ -190,49 +42,160 @@ 新增自录入 - - - - + +
+

预览

+ Large Image + × +
+ + +
+ + +
+ + + + \ No newline at end of file diff --git a/style/css/index.css b/style/css/index.css new file mode 100644 index 0000000..5a07192 --- /dev/null +++ b/style/css/index.css @@ -0,0 +1,422 @@ +.flex{ + display: flex; +} +#page-numbers { + display: flex; + flex-wrap: wrap; + list-style: none; + color: #8a8a8a; + padding: 0; + user-select: none; +} + +#page-numbers span { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + cursor: pointer; +} + +#page-numbers span { + margin-left: 10px; +} +#page-numbers span:hover { + color: #006AFF; +} +#page-numbers .pagActive:hover { + color: #fff; +} +#next-page{ + margin-right: 16px; +} +.input-page span{ + display: inline-block; +} +/* 分页容器样式 */ +.pagination { + margin-top: 20px; + display: flex; + justify-content: center; + align-items: center; +} +.pagination input { + width: 50px; + padding: 5px; + text-align: center; +} +.pagActive { + background: #006AFF; + color: #fff; + border-radius: 4px; +} + + +.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; + background: #fff; + padding: 0 14px; +} + +.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; +} + +/* 小版视频容器 */ +#small-video-container { + width: 200px; + cursor: pointer; +} + +/* 小版视频封面图 */ +#small-video-cover { + width: 100%; + height: auto; + border: 2px solid #ccc; +} + +/* vedio */ +/* 初始小版视频样式 */ +/* 放大后的视频容器 */ +#large-video-container { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 800px; + max-width: 800px; + z-index: 1000; + background: black; + padding: 50px; + border-radius: 16px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); +} + +/* 放大后的视频 */ +#large-video { + width: 100%; + height: auto; +} + +/* 关闭按钮 */ +#close-btn ,#close-btn1{ + position: absolute; + top: 10px; + right: 10px; + background: red; + color: white; + border: none; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + /* padding: 10px; */ + width: 30px; + border-radius: 50%; + cursor: pointer; + font-size: 16px; +} +/* 小版图片容器 */ +#small-image-container { + width: 170px; + cursor: pointer; +} + +/* 小版图片 */ +.small-image { + /* width: 100%; */ + /* height: 100%; */ + border-radius: 5px; + position: relative; +} +.small-image-desc{ + position: absolute; + left: 6px; + bottom: 8px; + border-radius: 2px; + background: rgba(0, 0, 0, 0.4); + padding: 4px 10px 5px 10px; + font-size: 12px; + z-index: 1; + line-height: 13px; + letter-spacing: 0.08em; + color: #FFFFFF; +} +.play-video{ + position: absolute; + left: 50%; + top: 50%;transform: translate(-50%,-50%); +} +/* 放大后的图片容器 */ +#large-image-container { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + /* width: 800px; */ + /* height: 100%; */ + background: rgba(0, 0, 0, 0.8); + z-index: 1000; + text-align: center; + border-radius: 16px; +} +#large-image-container h2{ + color: #fff; +} + +/* 放大后的图片 */ +#large-image { + margin: 20px 50px 50px; + width: 800px; + border: 5px solid white; + border-radius: 10px; +} + +/* 关闭按钮 */ +#close-btn2 { + position: absolute; + top: 20px; + right: 20px; + background: #fff; + color: #000; + border: none; + padding: 10px 15px; + border-radius: 50%; + cursor: pointer; + font-size: 20px; +} +.button { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 7px 22px; + border-radius: 3px; + background: #FFFFFF; + box-sizing: border-box; + letter-spacing: 0.08em; + border: 1px solid #DFE2E6; + margin-left: 20px; + color: #23242B; + cursor: pointer; +} +button:hover{ + opacity: .8; +} +.button-primary { + background: #006AFF; + color: #FFFFFF; +} + +.button-normal {} + +.btngroups { + justify-content: flex-end; + +} + + +/* 数据列表样式 */ +#data-list { + list-style: none; + padding: 0; +} +#data-list li { + padding: 10px; + border-bottom: 1px solid #ccc; +} + + +.list_all{ + display: flex; + flex-direction: column; + align-items: center; +} +.list_item{ + margin: 18px 12px; + padding-bottom: 18px; + width: 100%; + border-bottom: 1px solid #eee; +} +.list_item_top{ + color: #8A9099; + display: flex; + justify-content: space-between; +} +.list_item_top b{ + color: #1E2226; +} +.desc_text{ + line-height: 18px; + letter-spacing: 0.08em; + color: #1E2226; + margin-top: 12px; +} +.img_list{ + margin: 8px 0; + display: flex; + flex-wrap: wrap; +} +.img_list img{ + width: 170px; + margin-right: 8px; + cursor: pointer; +} +.green,.blue{ + padding: 2px 10px; + border-radius: 4px; + opacity: 1; + letter-spacing: 0.08em; + color: #0DAF49; + background: rgba(239, 255, 224, 0.5); + box-sizing: border-box; + border: 1px solid rgba(0, 194, 97, 0.6); +} +.blue{ + color: #006AFF; + background: #F2F7FF; + border: 1px solid #BFDAFF; +} diff --git a/style/img/a.jpeg b/style/img/a.jpeg new file mode 100644 index 0000000..9fbc58b Binary files /dev/null and b/style/img/a.jpeg differ diff --git a/style/img/b.jpeg b/style/img/b.jpeg new file mode 100644 index 0000000..31cc99b Binary files /dev/null and b/style/img/b.jpeg differ diff --git a/style/img/edit.svg b/style/img/edit.svg new file mode 100644 index 0000000..3cacf5c --- /dev/null +++ b/style/img/edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/style/img/next.svg b/style/img/next.svg new file mode 100644 index 0000000..e455402 --- /dev/null +++ b/style/img/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/style/img/play.svg b/style/img/play.svg new file mode 100644 index 0000000..abd7214 --- /dev/null +++ b/style/img/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/style/img/prev.svg b/style/img/prev.svg new file mode 100644 index 0000000..ca519eb --- /dev/null +++ b/style/img/prev.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/style/img/vedio_img.png b/style/img/vedio_img.png new file mode 100644 index 0000000..3b8816c Binary files /dev/null and b/style/img/vedio_img.png differ diff --git a/style/img/viewimg1.png b/style/img/viewimg1.png new file mode 100644 index 0000000..42fc010 Binary files /dev/null and b/style/img/viewimg1.png differ diff --git a/style/img/viewimg2.png b/style/img/viewimg2.png new file mode 100644 index 0000000..a259c48 Binary files /dev/null and b/style/img/viewimg2.png differ diff --git a/style/img/viewimg3.png b/style/img/viewimg3.png new file mode 100644 index 0000000..3e8d8b9 Binary files /dev/null and b/style/img/viewimg3.png differ diff --git a/style/js/index.js b/style/js/index.js new file mode 100644 index 0000000..504d8ca --- /dev/null +++ b/style/js/index.js @@ -0,0 +1,347 @@ +$(document).ready(function () { + var imgurl='' + var vediourl='' + var list = [ + 'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', + 'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', + '' + ] + // viedo + // 点击小版视频封面图时放大 + $('.small-video-cover').click(function () { + vediourl = $(this).attr('href') + imgurl = $(this).attr('src') + $('#large-viedo-url').attr('src',imgurl) + $('#large-video-container').fadeIn(); // 显示放大后的视频容器 + $('#large-video').get(0).play(); // 播放视频 + }); + + // 点击关闭按钮时关闭放大视频 + $('#close-btn').click(function () { + $('#large-video').get(0).pause(); // 暂停视频 + $('#large-video-container').fadeOut(); // 隐藏放大后的视频容器 + }); + +// 图片 + $('.small-image').click(function () { + imgurl = $(this).attr('src') + $('#large-image').attr('src',imgurl) + $('#large-image-container').fadeIn(); // 显示放大后的图片容器 + }); + + // 点击关闭按钮时关闭放大图片 + $('#close-btn2').click(function () { + $('#large-image-container').fadeOut(); // 隐藏放大后的图片容器 + }); + + // 点击背景区域时关闭放大图片 + $('#large-image-container').click(function (e) { + if (e.target === this) { + $('#large-image-container').fadeOut(); // 隐藏放大后的图片容器 + } + }); + // 假数据假数据----- + var waitCheck = [ + { + source: '0', + name: '麻辣烫---', + lurutime: '2025.01.13 23:00', + vedios: [ + 'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', + 'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', + '' + ] + }, + { + imgs: [ + 'viewimg1.png', + 'viewimg2.png', + 'viewimg3.png', + ], + source: '1', + question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？', + name: '麻辣烫---', + lurutime: '2025.01.13 23:00', + answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位' + + }, + { + source: '0', + name: '麻辣烫---', + lurutime: '2025.01.13 23:00', + vedios: [ + 'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', + 'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', + '' + ] + }, + { + imgs: [ + 'viewimg1.png', + 'viewimg2.png', + 'viewimg3.png', + ], + source: '1', + question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？', + name: '麻辣烫---', + lurutime: '2025.01.13 23:00', + answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位' + + }, + { + source: '0', + name: '麻辣烫---', + lurutime: '2025.01.13 23:00', + vedios: [ + 'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', + 'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', + '' + ] + }, + { + imgs: [ + 'viewimg1.png', + 'viewimg2.png', + 'viewimg3.png', + ], + source: '1', + question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？', + name: '麻辣烫---', + lurutime: '2025.01.13 23:00', + answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位' + + }, + ]; //待审批 + 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'); + } + }); + var list = waitCheck + var currentPage = 1; // 定义变量，用于存储当前的页码 + var pageSize = 2;// 定义变量，用于存储当前页条数 + renderList(list) + // 当文档加载完成后执行以下函数 + function renderList (list) { + function createPagination(currentPage, totalPages) { + var paginationHtml = ""; // 初始化一个字符串，用于存放分页条的HTML代码 + + // 如果当前页不是第一页，则生成一个“上一页”按钮 + // if (currentPage > 1) { + paginationHtml += "
  • <
    • "; + // } + + // 始终显示第一页的页码 + paginationHtml += generatePageNumberHtml(1, currentPage); + + // 如果总页数大于1页，则继续生成分页条的其余部分 + if (totalPages > 1) { + // 如果当前页码大于3，则在第一页和当前页之间添加省略号 + if (currentPage > 3) { + paginationHtml += "
  • ...
    • "; + } + // 遍历当前页附近的页码，并生成对应的分页按钮 + 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 += "
  • ...
    • "; + } + } + + // 始终显示最后一页的页码 + paginationHtml += generatePageNumberHtml(totalPages, currentPage); + + // 如果当前页不是最后一页，则生成一个“下一页”按钮 + if (currentPage < totalPages) { + paginationHtml += "
  • >
    • "; + } + + // 返回生成的分页条HTML字符串 + return paginationHtml; + } + // 创建分页条的函数 + + // 生成单个页码按钮的HTML的函数 + function generatePageNumberHtml(pageNumber, currentPage) { + // 返回一个格式化后的HTML字符串，包含激活状态的判断 + return ( + '
  • ' + + pageNumber + + "
    • " + ); + } + + // 选择页码的函数 + function selectPage(pageNumber) { + // 更新当前页码的变量，并重新生成分页条 + currentPage = pageNumber; + $("#pagination").html(createPagination(currentPage, Math.ceil(list.length /pageSize))); + } + + // 为分页条上的每个按钮绑定点击事件 + $("#pagination").on("click", "li", function (event) { + let pageNumber = $(this).text(); // 获取点击的页码或按钮文本 + + // 如果点击的是省略号，则不执行任何操作 + if (pageNumber === "...") { + event.preventDefault(); + return; + } + + // 根据点击的按钮，调用selectPage函数更新当前页码 + if (pageNumber === "<" ) { + if(currentPage <2){ + return + } + selectPage(currentPage - 1); + } else if (pageNumber === ">") { + // if(currentPage <2){ + // return + // } + selectPage(currentPage + 1); + } else { + selectPage(parseInt(pageNumber)); + } + }); + + // 初始化分页条，总页数为20，默认显示第一页 + $("#pagination").html(createPagination(currentPage, Math.ceil(list.length /pageSize))); + } + +// 模拟数据 +const allData = [ + "数据 1", "数据 2", "数据 3", "数据 4", "数据 5", + "数据 6", "数据 7", "数据 8", "数据 9", "数据 10", + "数据 11", "数据 12", "数据 13", "数据 14", "数据 15", + "数据 16", "数据 17", "数据 18", "数据 19", "数据 20", + "数据 21", "数据 22", "数据 23", "数据 24", "数据 25", + "数据 26", "数据 27", "数据 28", "数据 29", "数据 30" +]; +// 总页数 +const totalPages = Math.ceil(allData.length / pageSize); + +// 渲染数据 +function renderData() { + const start = (currentPage - 1) * pageSize; + const end = start + pageSize; + const pageData = allData.slice(start, end); + + // 清空列表 + $('#data-list').empty(); + + // 渲染当前页数据 + pageData.forEach(item => { + $('#data-list').append(`
  • ${item}
    • `); + }); + + // 渲染分页按钮 + renderPagination(); +} + +// 渲染分页按钮 +function renderPagination() { + const pageNumbers = $('#page-numbers'); + pageNumbers.empty(); + + // 总页数小于等于 7 时，显示所有页码 + if (totalPages <= 7) { + for (let i = 1; i <= totalPages; i++) { + pageNumbers.append(`${i}`); + } + } else { + // 总页数大于 7 时，显示部分页码并用省略号代替 + if (currentPage <= 4) { + // 前 5 页 + 省略号 + 最后一页 + for (let i = 1; i <= 5; i++) { + pageNumbers.append(`${i}`); + } + pageNumbers.append('...'); + pageNumbers.append(`${totalPages}`); + } else if (currentPage >= totalPages - 3) { + // 第一页 + 省略号 + 最后 5 页 + pageNumbers.append('1'); + pageNumbers.append('...'); + for (let i = totalPages - 4; i <= totalPages; i++) { + pageNumbers.append(`${i}`); + } + } else { + // 第一页 + 省略号 + 当前页及前后两页 + 省略号 + 最后一页 + pageNumbers.append('1'); + pageNumbers.append('...'); + for (let i = currentPage - 2; i <= currentPage + 2; i++) { + pageNumbers.append(`${i}`); + } + pageNumbers.append('...'); + pageNumbers.append(`${totalPages}`); + } + } + + // 绑定页码点击事件 + pageNumbers.find('span').click(function () { + const page = parseInt($(this).text()); + if (!isNaN(page)) { + currentPage = page; + renderData(); + } + }); +} + +// 初始化渲染 +renderData(); + +// 上一页 +$('#prev-page').click(function () { + if (currentPage > 1) { + currentPage--; + renderData(); + } +}); + +// 下一页 +$('#next-page').click(function () { + if (currentPage < totalPages) { + currentPage++; + renderData(); + } +}); + +// 跳转到指定页 +$('#go-to-page').click(function () { + const page = parseInt($('#jump-to-page').val()); + if (page >= 1 && page <= totalPages) { + currentPage = page; + renderData(); + } else { + alert(`请输入有效的页码（1-${totalPages}）`); + } +}); +}); \ No newline at end of file