第一次提交

2025-06-24 18:51:49 +08:00 · 2025-06-24 18:51:49 +08:00 · 19f601db6e
commit 19f601db6e
45 changed files with 25297 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,61 @@
+# Dependencies
+/node_modules
+/dist
+
+# Local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.history
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Build output
+/dist
+/build
+
+# Cache directories
+.cache
+.temp
+
+# Coverage directory
+/coverage
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.pnp.* 
--- a/index.html
+++ b/index.html
@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/dist/public/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title></title>
+    <meta name="keywords" content="title" />
+    <meta name="description" content="title" />
+    <style>
+        /* 美化整个滚动条 */
+        ::-webkit-scrollbar {
+            width: 8px; /* 设置滚动条的宽度 */
+            background-color: #f9f9f9; /* 滚动条的背景颜色 */
+        }
+
+        /* 美化滚动条轨道 */
+        ::-webkit-scrollbar-track {
+            background: #e1e1e1; /* 轨道的背景颜色 */
+            border-radius: 10px; /* 轨道的圆角 */
+        }
+
+        /* 美化滚动条的滑块 */
+        ::-webkit-scrollbar-thumb {
+            background-color: #c1c1c1; /* 滑块的背景颜色 */
+            border-radius: 10px; /* 滑块的圆角 */
+            border: 2px solid #ffffff; /* 滑块边框 */
+        }
+
+        /* 当滑块悬停或活动时的样式 */
+        ::-webkit-scrollbar-thumb:hover {
+            background: #a8a8a8; /* 悬停或活动状态下滑块的背景颜色 */
+        }
+        body {
+            margin: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .gjz_css{
+            font-weight: 600;
+            color: #ff0000;
+            text-decoration: underline;
+            position: relative;
+            padding-right: 15px;
+        }
+
+        .gjz_css::after {
+            content: '✚'; /* Font Awesome 的用户图标 Unicode */
+            font-family: 'FontAwesome'; /* 确保使用正确的字体 */
+            font-size: 12px; /* 图标大小 */
+            color: #ff0000; /* 图标颜色 */
+            position: absolute;
+            top: -4px; /* 根据需要调整图标位置 */
+            right: 3px; /* 根据需要调整图标位置 */
+        }
+    </style>
+</head>
+<body style="margin: 0;">
+
+<div id="app"></div>
+
+<script type="module" src="/src/main.js"></script>
+</body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,26 @@
+{
+  "name": "vue3_cli_default",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.6.7",
+    "jquery": "^3.7.1",
+    "path": "^0.12.7",
+    "vue": "^3.2.8",
+    "vue-router": "^4.2.5",
+    "vue-wechat-title": "^2.0.7"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.10.2",
+    "@vue/compiler-sfc": "^3.2.6",
+    "naive-ui": "^2.40.3",
+    "sass": "^1.77.6",
+    "vfonts": "^0.0.3",
+    "vite": "^2.9.18",
+    "vite-plugin-copy": "^0.1.6"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/static/bg.png
+++ b/public/static/bg.png
--- a/public/static/center.png
+++ b/public/static/center.png
--- a/public/static/css/jquery-ui.css
+++ b/public/static/css/jquery-ui.css
--- a/public/static/css/reset.min.css
+++ b/public/static/css/reset.min.css
@ -0,0 +1 @@
+a,article,aside,blockquote,body,button,code,dd,div,dl,dt,em,fieldset,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,input,label,li,main,nav,object,ol,option,p,q,section,select,small,span,strong,table,tbody,td,textarea,th,tr,ul{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}li,ul{list-style:none}a{text-decoration:none;-webkit-tap-highlight-color:transparent;cursor:pointer}a:active,a:focus,a:hover{outline:0}a img{vertical-align:top}a,img{-webkit-touch-callout:none}img{border:none}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-overflow-scrolling:touch}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}hr{height:1px;background-color:#ddd;margin:10px 0;border:none}table{border-collapse:collapse;border-spacing:0}button[disabled],html input[disabled]{cursor:default}button,input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;border:none;background:0 0}button,input[type=checkbox],input[type=radio]{border:none;outline:0}textarea{border:1px solid #e7e7e7;color:#444;font-size:14px;padding:8px 10px;resize:none;overflow:auto;vertical-align:top}input[type=color]:focus,input[type=date]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:active,input[type=search]:focus,input[type=submit]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,textarea:focus{-webkit-box-shadow:0;box-shadow:0;outline:0 none}input[type=submit],input[type=submit]:focus{border:0}::-webkit-input-placeholder{color:#999}:-moz-placeholder{color:#999;opacity:1}::-moz-placeholder{color:#999;opacity:1}:-ms-input-placeholder{color:#999}.fl{float:left}.fr{float:right}.clearfix{zoom:1}.clearfix:after{content:"";display:block;clear:both;overflow:hidden}.show{display:block!important}.hide{display:none!important}
--- a/public/static/css/style.css
+++ b/public/static/css/style.css
@ -0,0 +1,898 @@
+@charset "utf-8";
+
+body {
+  background-color: #eee;
+  font-family: "Microsoft Yahei", 'Helvetica Neue', sans-serif;
+  line-height: 1.6;
+  font-size: 14px;
+  color: #333;
+  /* background-image: url(/public/static/bg.png);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat; */
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+p,
+a {
+  word-break: break-all;
+}
+
+.container {
+  width: 1040px;
+  margin: 20px auto;
+  background-color: #fff;
+  padding: 20px;
+  /* box-shadow: 2px 2px 10px #999;
+  -moz-box-shadow: 2px 2px 10px #999;
+  -o-box-shadow: 2px 2px 10px #999;
+  -webkit-box-shadow: 2px 2px 10px #999; */
+  position: relative;
+}
+
+.container-left {
+  background: #f3200f;
+  width: 40px;
+  writing-mode: vertical-lr;
+  margin-bottom: 12px;
+  text-align: center;
+  border-bottom-left-radius: 6px;
+  border-top-left-radius: 6px;
+  font-size: 15px;
+  padding: 10px 11px 6px;
+  cursor: pointer;
+  letter-spacing: 4px;
+  display: inline-block;
+  color: #ffffff;
+}
+
+.container-left:hover {
+  background: #FB5B4E;
+}
+
+/* 页面主体 */
+.page-main {
+  margin-bottom: 20px;
+}
+
+/* 版面图片 */
+.pic-box {
+  position: relative;
+  width: 410px;
+  max-height: 760px;
+  padding: 16px 0px;
+  border: 1px solid #bbb;
+}
+
+.pic-box #Bantu {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 670px;
+}
+
+.pic-box .pic-info {
+  margin-top: 20px;
+  line-height: 26px;
+  padding: 0px 13px;
+}
+
+.pic-box .pic-info-ctrl {
+  display: inline-block;
+  width: 60px;
+  height: 24px;
+  line-height: 22px;
+  border: 1px solid #cdd1d8;
+  border-radius: 2px;
+  background-color: #f5f5f5;
+  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #fff), to(#e2e7f0));
+  background: -webkit-linear-gradient(top, #fff 30%, #e2e7f0);
+  background: -o-linear-gradient(top, #fff 30%, #e2e7f0);
+  background: linear-gradient(to bottom, #fff 30%, #e2e7f0);
+  text-align: center;
+  color: #7186b6;
+  -webkit-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.pic-box .pic-info-ctrl-prev {
+  margin-right: 11px;
+}
+
+.pic-box .pic-info-ctrl:hover {
+  -webkit-transform: translateY(-2px);
+  -ms-transform: translateY(-2px);
+  transform: translateY(-2px);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+/* 主体 */
+.main-box {
+  margin-left: 435px;
+}
+
+.main-header {
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.main-header h1 {
+  font-weight: 600;
+  font-size: 24px;
+  color: #333;
+}
+
+.main-header-nav {
+  margin-top: 10px;
+}
+
+.main-header-nav li {
+  padding: 0 14px;
+  line-height: 18px;
+  border-right: 1px solid #91a5d2;
+  font-size: 16px;
+}
+
+.main-header-nav li:last-of-type {
+  border-right: none;
+}
+
+.main-header-nav li a {
+  color: #91a5d2;
+}
+
+.main-header-nav li a:hover {
+  text-decoration: underline;
+}
+
+.main-tools {
+  position: relative;
+  height: 51px;
+  padding: 13px 8px;
+  margin-bottom: 15px;
+  background-color: #f5f5f5;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #fff), to(#e2e7f0));
+  background: -webkit-linear-gradient(top, #fff 30%, #e2e7f0);
+  background: -o-linear-gradient(top, #fff 30%, #e2e7f0);
+  background: linear-gradient(to bottom, #fff 30%, #e2e7f0);
+  border-top: 1px solid #c6c7bc;
+}
+
+.main-tools-ctrl {
+  display: inline-block;
+  width: 80px;
+  height: 24px;
+  line-height: 22px;
+  border: 1px solid #cdd1d8;
+  border-radius: 2px;
+  background-color: #f5f5f5;
+  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #fff), to(#e2e7f0));
+  background: -webkit-linear-gradient(top, #fff 30%, #e2e7f0);
+  background: -o-linear-gradient(top, #fff 30%, #e2e7f0);
+  background: linear-gradient(to bottom, #fff 30%, #e2e7f0);
+  text-align: center;
+  color: #7186b6;
+  -webkit-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.main-tools-ctrl-nav {
+  margin-right: 11px;
+}
+
+.main-tools-ctrl:hover {
+  -webkit-transform: translateY(-2px);
+  -ms-transform: translateY(-2px);
+  transform: translateY(-2px);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.main-layout {
+  overflow: hidden;
+}
+
+.main-layout .layout-catalogue {
+  width: 275px;
+  border: 1px solid #bbb;
+}
+
+.main-layout .layout-catalogue-title {
+  position: relative;
+  height: 31px;
+  line-height: 30px;
+  padding-left: 24px;
+  background-color: #f5f5f5;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #fff), to(#e2e7f0));
+  background: -webkit-linear-gradient(top, #fff 20%, #e2e7f0);
+  background: -o-linear-gradient(top, #fff 20%, #e2e7f0);
+  background: linear-gradient(to bottom, #fff 20%, #e2e7f0);
+  border-bottom: 1px solid #bbb;
+  font-weight: normal;
+  font-size: 16px;
+  color: #7186b6;
+}
+
+.main-layout .layout-catalogue-title:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  width: 6px;
+  height: 16px;
+  background-color: #7186b6;
+  margin-top: -8px;
+}
+
+.main-layout .layout-catalogue-main {
+  position: relative;
+  height: 310px;
+  padding: 12px 8px 12px 12px;
+}
+
+.main-layout .layout-catalogue-list {
+  height: 288px;
+  overflow-y: auto;
+}
+
+.main-layout .layout-catalogue-list .layout-catalogue-item:last-of-type {
+  border-bottom: none;
+}
+
+.main-layout .layout-catalogue-list::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  background: transparent;
+}
+
+.main-layout .layout-catalogue-list::-webkit-scrollbar-track {
+  border-radius: 3px;
+}
+
+.main-layout .layout-catalogue-list::-webkit-scrollbar-track-piece {
+  display: none;
+}
+
+.main-layout .layout-catalogue-list::-webkit-scrollbar-thumb {
+  background-color: #e5e5e5;
+  border-radius: 3px;
+  cursor: pointer;
+  -webkit-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.main-layout .layout-catalogue-list::-webkit-scrollbar-thumb:hover {
+  background-color: #ccc;
+}
+
+.main-layout .layout-catalogue-item {
+  position: relative;
+  height: 35px;
+  line-height: 35px;
+  border-bottom: 1px dashed #ccc;
+  padding-right: 30px;
+  white-space: nowrap;
+  -webkit-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.main-layout .layout-catalogue-item a {
+  color: #333;
+  -webkit-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.main-layout .layout-catalogue-item:hover a,
+.main-layout .layout-catalogue-item.active a {
+  color: #d8000d;
+}
+
+.main-layout .layout-calendar {
+  position: relative;
+  width: 275px;
+  padding: 12px 10px;
+  background-color: #ecf1fa;
+  border: 1px solid #bbb;
+}
+
+.main-layout .layout-calendar .calendar-header {
+  position: relative;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 5px;
+  background-color: #f5f5f5;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #fff), to(#efe7ee));
+  background: -webkit-linear-gradient(top, #fff 20%, #efe7ee);
+  background: -o-linear-gradient(top, #fff 20%, #efe7ee);
+  background: linear-gradient(to bottom, #fff 20%, #efe7ee);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.main-layout .layout-calendar .calendar-header h4 {
+  font-size: 14px;
+  color: #5b5e64;
+}
+
+.main-layout .layout-calendar .calendar-header .date-toggle-item {
+  position: relative;
+}
+
+.main-layout .layout-calendar .calendar-header .date-toggle-item select {
+  height: 20px;
+  padding-left: 4px;
+}
+
+.main-layout .layout-calendar .calendar-header .date-toggle-item .icon-toggle {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  cursor: pointer;
+  -webkit-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.main-layout .layout-calendar .calendar-header .date-toggle-item .icon-toggle-prev {
+  border-right: 7px solid #5b5e64;
+}
+
+.main-layout .layout-calendar .calendar-header .date-toggle-item .icon-toggle-next {
+  border-left: 7px solid #5b5e64;
+}
+
+.main-layout .layout-calendar .calendar-header .date-toggle-item .icon-toggle:hover {
+  opacity: .8;
+}
+
+.main-layout .layout-calendar .calendar-header .date-toggle-item.year-toggle {
+  margin-right: 5px;
+}
+
+.main-layout .layout-calendar .calendar-week {
+  background-color: #fff;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.main-layout .layout-calendar .calendar-week li {
+  display: inline-block;
+  width: 12.5%;
+  height: 20px;
+  line-height: 20px;
+  margin: 1px .1%;
+  background-color: #8391ad;
+  background: -webkit-gradient(linear, left top, left bottom, from(#696e7a), to(#95a9cf));
+  background: -webkit-linear-gradient(top, #696e7a, #95a9cf);
+  background: -o-linear-gradient(top, #696e7a, #95a9cf);
+  background: linear-gradient(to bottom, #696e7a, #95a9cf);
+  text-align: center;
+  color: #fff;
+}
+
+.main-layout .layout-calendar .calendar-week li:last-of-type {
+  margin-right: 0;
+}
+
+.main-layout .layout-calendar .calendar-main {
+  background-color: #fff;
+  border: 1px solid #fff;
+  line-height: 1;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.main-layout .layout-calendar .calendar-main .day {
+  display: inline-block;
+  width: 13%;
+  height: 20px;
+  line-height: 20px;
+  margin: 2px .64%;
+  background-color: #ecf1fa;
+  text-align: center;
+  vertical-align: bottom;
+  cursor: pointer;
+}
+
+.main-layout .layout-calendar .calendar-main .day.disabled {
+  color: #aaa;
+  cursor: not-allowed;
+}
+
+.main-layout .layout-calendar .calendar-main .day.active {
+  background-color: #d8000d;
+  color: #fff;
+  cursor: pointer;
+}
+
+.main-layout .layout-calendar .calendar-footer {
+  padding: 5px;
+  line-height: 22px;
+  background-color: #fff;
+}
+
+.main-layout .layout-calendar .calendar-footer .date-input {
+  width: 35px;
+  height: 22px;
+  border: 1px solid #a9a9a9;
+  text-align: center;
+}
+
+.main-layout .layout-calendar .calendar-footer .btn-view {
+  width: 55px;
+  background-color: #7888a5;
+  background: -webkit-gradient(linear, left top, left bottom, from(#4b525c), color-stop(#7888a5), to(#879abd));
+  background: -webkit-linear-gradient(top, #4b525c, #7888a5, #879abd);
+  background: -o-linear-gradient(top, #4b525c, #7888a5, #879abd);
+  background: linear-gradient(to bottom, #4b525c, #7888a5, #879abd);
+  border: 2px solid #90a2b8;
+  border-radius: 2px;
+  text-align: center;
+  color: #fff;
+  -webkit-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.main-layout .layout-calendar .calendar-footer .btn-view:hover {
+  -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+}
+
+.main-news {
+  position: relative;
+}
+
+.main-news-title {
+  position: relative;
+  height: 33px;
+  line-height: 32px;
+  padding-left: 24px;
+  background-color: #f5f5f5;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #fff), to(#e2e7f0));
+  background: -webkit-linear-gradient(top, #fff 20%, #e2e7f0);
+  background: -o-linear-gradient(top, #fff 20%, #e2e7f0);
+  background: linear-gradient(to bottom, #fff 20%, #e2e7f0);
+  border-bottom: 1px solid #bbb;
+  font-weight: normal;
+  font-size: 16px;
+  color: #7186b6;
+}
+
+.main-news-title:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  width: 6px;
+  height: 16px;
+  background-color: #7186b6;
+  margin-top: -8px;
+}
+
+.main-news-main {
+  padding: 5px 15px;
+}
+
+.news-item {
+  position: relative;
+  white-space: nowrap;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  border-bottom: 1px dotted #cccccc;
+  height: 47px;
+  padding-top: 10px;
+}
+
+.news-item a {
+  font-size: 18px;
+  color: #333;
+  -webkit-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.news-item-active {
+  position: relative;
+  white-space: nowrap;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  border-bottom: 1px dotted #cccccc;
+  height: 47px;
+  padding-top: 10px;
+  background: #eeeeee;
+}
+
+.news-item-active a {
+  font-size: 18px;
+  color: #d1232a;
+  -webkit-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+
+
+/* .main-news-main .news-item a:hover {
+  text-decoration: underline;
+} */
+
+/* .main-news-main .news-item:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-top: -3px;
+  background-color: #acbfe6;
+} */
+
+.main-content {
+  min-height: 370px;
+  overflow-y: auto;
+  font-size: 1em;
+}
+
+.main-content::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  background: transparent;
+}
+
+.main-content::-webkit-scrollbar-track {
+  border-radius: 3px;
+}
+
+.main-content::-webkit-scrollbar-track-piece {
+  display: none;
+}
+
+.main-content::-webkit-scrollbar-thumb {
+  background-color: #e5e5e5;
+  border-radius: 3px;
+  cursor: pointer;
+  -webkit-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.main-content::-webkit-scrollbar-thumb:hover {
+  background-color: #ccc;
+}
+
+.main-content-wrapper {
+  margin-bottom: 20px;
+}
+
+.main-content-header,
+.main-content-footer {
+  position: relative;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 12px;
+  background-color: #f5f5f5;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #fff), to(#efefef));
+  background: -webkit-linear-gradient(top, #fff 40%, #efefef);
+  background: -o-linear-gradient(top, #fff 40%, #efefef);
+  background: linear-gradient(to bottom, #fff 40%, #efefef);
+  overflow: hidden;
+}
+
+.main-content-header .article-ctrls,
+.main-content-footer .article-ctrls {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.main-content-header .article-ctrl,
+.main-content-footer .article-ctrl {
+  display: inline-block;
+  width: 80px;
+  height: 24px;
+  line-height: 22px;
+  border: 1px solid #cdd1d8;
+  border-radius: 2px;
+  background-color: #f5f5f5;
+  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #fff), to(#e2e7f0));
+  background: -webkit-linear-gradient(top, #fff 30%, #e2e7f0);
+  background: -o-linear-gradient(top, #fff 30%, #e2e7f0);
+  background: linear-gradient(to bottom, #fff 30%, #e2e7f0);
+  text-align: center;
+  color: #7186b6;
+  -webkit-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+.main-content-header .article-ctrl-prev,
+.main-content-footer .article-ctrl-prev {
+  margin-right: 11px;
+}
+
+.main-content-header .article-ctrl:hover,
+.main-content-footer .article-ctrl:hover {
+  -webkit-transform: translateY(-2px);
+  -ms-transform: translateY(-2px);
+  transform: translateY(-2px);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.main-content-header .font-ctrls,
+.main-content-footer .font-ctrls {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.main-content-header .font-ctrl,
+.main-content-footer .font-ctrl {
+  position: relative;
+  display: inline-block;
+  margin-left: 16px;
+  cursor: pointer;
+  -webkit-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.main-content-header .font-ctrl.disabled,
+.main-content-footer .font-ctrl.disabled {
+  cursor: not-allowed;
+}
+
+.main-content-header .font-ctrl-icon,
+.main-content-footer .font-ctrl-icon {
+  position: relative;
+  top: 2px;
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  margin-left: 4px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.main-content-header .font-ctrl-icon-plus,
+.main-content-footer .font-ctrl-icon-plus {
+  background-image: url(/public/static/icon_plus.png);
+}
+
+.main-content-header .font-ctrl-icon-sub,
+.main-content-footer .font-ctrl-icon-sub {
+  background-image: url(/public/static/icon_sub.png);
+}
+
+.main-content-header .font-ctrl-icon-default,
+.main-content-footer .font-ctrl-icon-default {
+  background-image: url(/public/static/icon_default.png);
+}
+
+.main-content-header .font-ctrl-icon-read,
+.main-content-footer .font-ctrl-icon-read {
+  background-image: url(/public/static/icon_read.png);
+}
+
+.main-content-header .font-ctrl:hover,
+.main-content-footer .font-ctrl:hover {
+  -webkit-transform: translateY(-2px);
+  -ms-transform: translateY(-2px);
+  transform: translateY(-2px);
+}
+
+/* 页脚 */
+.footer {
+  padding: 15px 0;
+  border: 1px solid #bbb;
+  text-align: center;
+}
+
+.footer-content {
+  line-height: 26px;
+  color: #666;
+}
+
+.footer-content a {
+  color: #666;
+}
+
+.footer-content a:hover {
+  text-decoration: underline;
+}
+
+.imgdesc {
+  font-family: "楷体";
+  text-align: center;
+}
+
+.info {
+  text-align: left;
+}
+
+.imgTextBox {
+  /* background: #eee; */
+  margin: 10px 6px;
+}
+
+.info .pText {
+  font-size: 14px;
+  color: #343434;
+  text-indent: 2em;
+  margin: 10px auto;
+  line-height: 30px;
+}
+
+.info .imgText {
+  /*text-indent: 2em;*/
+  font-size: 16px;
+  color: #343434;
+  line-height: 25px;
+  margin: 10px 0;
+  text-align: left;
+  font-family: 楷体;
+}
+
+.info .pImg {
+  text-align: center;
+}
+
+.info .conentImg {
+  max-width: 100%;
+}
+
+.info .infoContent {
+  font-size: 16px;
+  line-height: 30px;
+  text-align: justify;
+}
+
+.info .infoContent p {
+  font-size: 16px;
+  line-height: 30px;
+  margin: 10px auto 0;
+}
+
+.swiper-box .swiper-container {
+  margin-top: 15px;
+}
+
+.swiper-container {
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  z-index: 1;
+  bottom: 10px;
+}
+
+.swiper-box .swiper-container .swiper-slide {
+  font-size: 12px;
+  width: 24.8%;
+}
+
+.swiper-box .swiper-container .swiper-slide {
+  text-align: center;
+  background: #d00;
+  color: #fff;
+  float: left;
+  margin-bottom: 1px;
+  margin-right: 1px;
+  text-indent: 0;
+  height: 34px;
+  line-height: 34px;
+}
+
+.swiper-box .swiper-container .swiper-slide a {
+  color: #fff;
+}
+
+.datesource {
+  margin-top: 5px;
+  text-align: center;
+  font-family: 宋体;
+  font-size: 14px;
+}
+
+/*检索模块*/
+#search {
+  margin-top: 10px;
+  display: none;
+}
+
+#input_search {
+  width: 180px !important;
+}
+
+/*朗读模块*/
+.font-ctrl-read {
+  display: none !important;
+}
+
+/*造字样式*/
+.zaozi {
+  border-style: none !important;
+  display: inline !important;
+  margin: 0px !important;
+}
+
+.top_1_div{
+  height: 30px;
+  line-height: 30px;
+  padding-left: 16px;
+  cursor: pointer;
+  font-size: 14px;
+  width: 100%;
+  color: #818181;
+
+  width: 100%;
+
+}
+.top_1_div:hover {
+  background: #c1343b;
+  color: #fff!important;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  font-size: 0;
+  line-height: 0;
+  position: absolute;
+  top: 20px;
+}
+
+.triangleBorder {
+  border-width: 8px;
+  border-color: transparent #bfbfbf transparent transparent;
+  left: -17px;
+}
+
+.triangleBg {
+  border-width: 7px;
+  border-color: transparent #ffffff transparent transparent;
+  left: -14px;
+  top: 21px;
+}
+.text-ellipsis {
+  white-space: nowrap;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+}
--- a/public/static/icon_default.png
+++ b/public/static/icon_default.png
--- a/public/static/icon_pdf.png
+++ b/public/static/icon_pdf.png
--- a/public/static/icon_plus.png
+++ b/public/static/icon_plus.png
--- a/public/static/icon_sub.png
+++ b/public/static/icon_sub.png
--- a/public/static/icon_top.png
+++ b/public/static/icon_top.png
--- a/public/static/js/Canvas_range.js
+++ b/public/static/js/Canvas_range.js
@ -0,0 +1,223 @@
+
+var moveDraw=true;
+// canvas画布
+$(function () {
+
+	// if ($(".pic-info-ctrl-prev").attr("href").indexOf("已经")>=0){$(".pic-info-ctrl-prev").hide()}
+	// if ($(".pic-info-ctrl-next").attr("href").indexOf("已经")>=0){$(".pic-info-ctrl-next").hide()}
+
+	//$("#MapLeave").append('<div id="mapLeaveMask" style="width: 100%;height: 100%;position: absolute;top: 0;background: transparent;z-index:9999999999999;"></div>');
+    var bantu = $('#Bantu')[0] || {}
+    $('#Bantu').css({ opacity: 0, position: 'absolute', left: '50%', transform: 'translateX(-50%)', top: '16px', zIndex: 9 });
+	var timer=setInterval(function(){
+		if(bantu.offsetHeight){
+            clearInterval(timer)
+			$('#Bantu').before('<img id="BantuTop" src="'+$('#Bantu').attr("src")+'" style="width:'+bantu.offsetWidth+'px;height:'+bantu.offsetHeight+'px;" />')
+			$('#Bantu').after('<canvas id="coorCanvas" width="'+bantu.offsetWidth+'px" height="'+bantu.offsetHeight+'px" style="position: absolute;top: 15px;left:50%;transform: translateX(-50%); opacity: 1;"></canvas>');
+
+		}
+	},100)
+	var obj = document.getElementsByName('newbook');
+
+	if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)) {
+		//alert('你是使用IE')
+		obj[0].onmouseover = function () { drawArea(event.srcElement, event); };
+		obj[0].onmousemove = function () { showTitle(event.srcElement, event); };
+		obj[0].onmouseout = function () { clearAndHide(); };
+	} else if (navigator.userAgent.indexOf('Firefox') >= 0) {
+		//alert('你是使用Firefox')
+		obj[0].onmouseover = function () { drawArea(event.srcElement, event); };
+		obj[0].onmousemove = function () { showTitle(event.srcElement, event); };
+		obj[0].onmouseout = function () { clearAndHide(); };
+		document.getElementById("leveldiv").onmouseout = function () { MouseOutMap(); };
+	} else if (navigator.userAgent.indexOf('Opera') >= 0) {
+		//alert('你是使用Opera')
+		obj[0].onmouseover = function () { drawArea(event.srcElement, event); };
+		obj[0].onmousemove = function () { showTitle(event.srcElement, event); };
+		obj[0].onmouseout = function () { clearAndHide(); };
+	} else {
+		//alert('你是使用其他的浏览器浏览网页！')
+		obj[0].onmouseover = function () { drawArea(event.srcElement, event); };
+		obj[0].onmousemove = function () { showTitle(event.srcElement, event); };
+		obj[0].onmouseout = function () { clearAndHide(); };
+	}
+	$('img[usemap]').rwdImageMaps();
+
+
+	//列表高亮
+	$(".main-list li").hover(
+		function (e) {
+			$(this).addClass("li-active");
+			var List_id = $(this).attr("targetid");
+			$("map area").each(function () {
+				var Map_href = $(this).attr("href");
+				var articleHref = Map_href.substring(Map_href.lastIndexOf('/') + 1, Map_href.length);
+				if (List_id === articleHref) {
+					drawArea(this,e)
+				}
+			});
+		},
+		function () {
+			clearCanvas()
+			$(this).removeClass("li-active");
+		}
+	);
+	dealTitle();
+	// 加载语音
+	//InitReadTxt();
+
+	//检查当前浏览器版本;
+	//var currHref = location.href;
+	//if (currHref.indexOf('/node_1.htm') >= 0) {
+	//	if ($.browser.msie && $.browser.version <= '7.0') {
+	//		alert('您的浏览器版本过低, 为了更好体验,请升级IE浏览器或者选择chrome浏览器!');
+	//	}
+	//}
+
+
+	//浏览器当前窗口可视区域宽度
+	if ($(window).width() < 1100) {
+		var s = '';
+		var per_href = $('.toprevblock a').attr('href');
+		if (per_href != null) {
+			s = s + "<a class='preart_rg' href=" + per_href + "><a>"
+		}
+		var next_href = $('.tonextblock a').attr('href');
+		if (next_href != null) {
+			s = s + "<a class='nextart_rg' href=" + next_href + "><a>"
+		}
+		$('.to_oe').after(s);
+	}
+
+	$("#Mask").hide();
+	//遮罩层出现禁止滑动
+	$('#Mask').bind("touchmove", function (e) {
+		e.preventDefault();
+	});
+
+});
+
+
+window.onload=function(){
+	$("#mapLeaveMask").remove();
+}
+
+//右侧文章列蒙层
+function PageArticleTitle(targetId) {
+	$(".main-list li").each(function () {
+		var articleId = $(this).attr("targetid");
+		if (articleId != targetId) {
+			$(this).removeClass("li-active");
+		} else {
+			$(this).addClass("li-active");
+			$("#showMap a").attr("title", $(this).find("a").html());
+		}
+	});
+}
+//--处理title 中含有<br>情况；
+function dealTitle() {
+	$(".main-list li H2 a").each(function () {
+		var info = $(this).html();
+		while (info.indexOf('<br>') > 0 || info.indexOf('<BR>') > 0) {
+			info = info.replace('<br>', '').replace('<BR>', '');
+		}
+		$(this).html(info);
+	});
+}
+
+function showTitle(obj,e){
+	if(moveDraw){
+		drawArea(obj,e);
+		moveDraw=false;
+	}
+	var areaObj = obj;
+	var str = areaObj.coords;
+	var title=areaObj.dataset.title;
+	//debugger
+	$('#showMap').html(title);
+	var left=e.offsetX;
+	var top=e.offsetY+10;
+	$('#showMap').css({
+		left:left,
+		top:top,
+		zIndex:99999
+	})
+	if(title){
+		$('#showMap').show();
+	}
+}
+function drawArea(obj, e) {
+	clearCanvas();
+	var areaObj = obj;
+	var str = areaObj.coords;
+	var strs = str.split(",");
+	const canvas = window.document.getElementById("coorCanvas");
+	if (!canvas) {
+		return false;
+	}
+	const context = canvas.getContext("2d");
+	context.globalAlpha = 0.3;
+	context.beginPath();
+
+	if (areaObj.shape === "rect") {
+		// 处理矩形
+		if (strs.length === 4) {
+			const x1 = Number(strs[0]);
+			const y1 = Number(strs[1]);
+			const x2 = Number(strs[2]);
+			const y2 = Number(strs[3]);
+			context.rect(x1, y1, x2 - x1, y2 - y1);
+		} else {
+			console.error("Invalid rect coords format. Expected 4 values.");
+			return false;
+		}
+	} else if (areaObj.shape === "poly") {
+		// 处理多边形
+		context.moveTo(Number(strs[0]), Number(strs[1]));
+		for (let i = 2; i < strs.length; i += 2) {
+			context.lineTo(Number(strs[i]), Number(strs[i + 1]));
+		}
+	} else {
+		console.error("Unsupported shape type. Use 'rect' or 'poly'.");
+		return false;
+	}
+
+	context.fillStyle = "#45ade2";
+	context.fill();
+	context.closePath(); // 闭合路径
+
+	var articleHref = obj.href.substring(obj.href.lastIndexOf('/') + 1, obj.href.length);
+	PageArticleTitle(articleHref);
+}
+
+// function drawArea(obj,e){
+// 	clearCanvas()
+// 	var areaObj = obj;
+// 	var str = areaObj.coords;
+// 	var strs = str.split(",");
+// 	const canvers = window.document.getElementById("coorCanvas");
+// 	if(!canvers){
+// 		return false;
+// 	}
+//     const context = canvers.getContext("2d");
+//     context.globalAlpha = 0.3;
+//     context.beginPath();
+// 	context.moveTo(Number(strs[0]), Number(strs[1]));
+// 	for (i = 2; i < strs.length; i += 2) {
+// 		context.lineTo(Number(strs[i]), Number(strs[i + 1]));
+// 	}
+//     context.fillStyle = "#45ade2";
+//     context.fill();
+// 	context.closePath(); //闭合
+// 	var articleHref = obj.href.substring(obj.href.lastIndexOf('/') + 1, obj.href.length);
+// 	PageArticleTitle(articleHref);
+// }
+function clearCanvas(){
+	var bantu=$('#Bantu')[0] || {}
+	const canvers = window.document.getElementById("coorCanvas");
+	canvers && canvers.getContext("2d").clearRect(0, 0,bantu.offsetWidth, bantu.offsetHeight);
+}
+function clearAndHide(){
+	$('#showMap').hide();
+	clearCanvas()
+}
--- a/public/static/js/common.js
+++ b/public/static/js/common.js
@ -0,0 +1,27 @@
+// 工具对象
+var Utils = {};
+
+Utils.dateFormat = function (timestamp, fmt) {
+
+  var time = new Date(timestamp);
+
+  var o = {
+    'M+': time.getMonth() + 1, //月份
+    'd+': time.getDate(), //日
+    'h+': time.getHours(), //小时
+    'm+': time.getMinutes(), //分
+    's+': time.getSeconds(), //秒
+    'q+': Math.floor((time.getMonth() + 3) / 3), //季度
+    'S': time.getMilliseconds() //毫秒
+  };
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (time.getFullYear() + "").substr(4 - RegExp.$1.length));
+  }
+  for (var k in o) {
+
+    if (new RegExp('(' + k + ')').test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
+    }
+  }
+  return fmt;
+};
--- a/public/static/js/index.js
+++ b/public/static/js/index.js
@ -0,0 +1,182 @@
+// 页面对象
+var Page = {};
+
+Page.initPhonePage = function () {
+
+    var userAgentInfo = navigator.userAgent;
+    var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
+    var local_url = window.location.href;
+    for (var v = 0; v < Agents.length; v++) {
+        if (userAgentInfo.indexOf(Agents[v]) > 0) {
+            var sURL2 = local_url.replace("/#/", "/h5/#/");
+            console.log(sURL2);
+            sessionStorage.removeItem('DateIndexH5');
+            sessionStorage.removeItem('DateIndex');
+            sessionStorage.removeItem('DateListH5');
+            sessionStorage.removeItem('DateList');
+            sessionStorage.removeItem('year');
+            sessionStorage.removeItem('month');
+            sessionStorage.removeItem('day');
+            sessionStorage.removeItem('index');
+            sessionStorage.removeItem('newInfo');
+            window.location.href = sURL2;
+        }
+    }
+};
+
+//日历牌--开始
+// 显示当前时间
+Page.initShowCurDate = function () {
+    var dateStr = Utils.dateFormat(Date.now(), 'yyyy年MM月dd日');
+    $('#cur_date').text(dateStr);
+};
+
+// 初始化日历效果
+Page.initCalendar = function () {
+    var $calendar = $('#calendar');
+
+    function loadData(date) {
+        console.log(date)
+        var m = date.year.toString() + "-" + (date.month < 10 ? ("0" + date.month) : date.month).toString();
+        var navData = getPaper(m);
+        var navUrl = "";
+        $calendar.find('.day-valid').each(function (idx, item) {
+            var index = navData["day"].indexOf(parseInt(idx + 1));
+            if (index > -1) {
+                $(item).removeClass('disabled');
+                //navUrl = "../../" + (navData["date"][index]).match(/(\d{4}-\d{2})-(\d{2})/i)[1] + navData["url"][index].replace("../", "/")
+                //$(item).attr('data-url', navData["date"][index]);
+                //$(item).attr('data-url', navUrl);
+            }
+        });
+    }
+
+    $calendar.datePicker({
+        activeDate: '',
+        yearRange: [3, 2],
+        onUpdateView: loadData,
+        onCalendarChange: loadData,
+        onSelect: function (date, $day) {
+            var url = $day.attr('data-url');
+            url && (location.href = url);
+        }
+    });
+};
+
+//获取当前页日期
+function getDate(str) {
+    var url = location.href;
+    var re = /(\d{4})\-(\d{2})\/(\d{2})/;
+    var r = url.match(re);
+    //精确到日
+    if (!r) {
+        return;
+    }
+    if (str == "day") {
+        var date = r[1] + "-" + r[2] + "-" + r[3];
+        //精确到月
+    } else if (str == "month") {
+        var date = r[1] + "-" + r[2];
+    }
+    return date;
+}
+
+//获取当前月份报纸xml数据
+function getPaper(m) {
+    console.log(m);
+    var myXmlUrl = `/dist/public/static/data/${m}.json`;
+    var data = {'day': [], 'url': [], 'date': []};
+    $.ajax({
+        data:{'date':m},
+        url: "https://jinrigushitwo.gushitv.com/api/dzb/date/dateList",
+        type: 'POST',
+        dataType: 'json',
+        async: false,
+        timeout: 1000,
+        success: function (d) {
+            console.log(d);
+            var date = new Array();
+            var day = new Array();
+            var url = new Array();
+            var url2 = new Array();
+
+            d.data.forEach(function (item) {
+                date.push(item.datetime);
+                day.push(parseInt(item.datetime.split("-")[2]));
+            });
+            data = {"day": day, "url": url, "date": date};
+            console.log(data);
+        }
+    });
+    return data;
+}
+
+// 初始化跳转至日期
+Page.initJump2Date = function () {
+
+    $('#submit_btn').click(function () {
+        var year = +$('#input_year').val(),
+            month = +$('#input_month').val(),
+            day = +$('#input_day').val();
+
+        var date = new Date(year + '/' + month + '/' + day);
+        console.log(date);
+        if (date.getFullYear() === year && (date.getMonth() + 1) === month && date.getDate() === day) {
+            //console.log('时间输入正确, 时间为' + year + '年' + month + '月' + day + '日');
+            var m = year.toString() + "-" + ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1)).toString();
+            var navData = getPaper(m);
+            console.log(navData);
+            var url = "";
+
+            for (var idx = 0; idx < navData["day"].length; idx++) {
+                if (navData["day"][idx] === day)
+                    url = "/#/?time=" + year + "-" + month + "-" + day;
+            }
+            if (url != "")
+            {
+                window.location.href = "https://jinrigushitwo.gushitv.com/#/?date="+year + '-' + fixNumer(month) + '-' + fixNumer(day);
+                setTimeout(()=>{
+                    window.location.reload();
+                },100)
+                // sessionStorage.setItem("year", year);
+                // sessionStorage.setItem("month", month);
+                // sessionStorage.setItem("day", day);
+                //window.location.reload();
+            }
+            else{
+                alert("未查询到对应日期的报纸");
+            }
+        } else {
+            alert('时间输入格式不正确');
+        }
+    });
+};
+//日历牌-结束
+
+var fixNumer = function (num) {
+    return ('0' + num).slice(-2);
+};
+/**
+ * =============================================================================
+ *                                  Dom Ready
+ * =============================================================================
+ */
+$(function () {
+    Page.initPhonePage();
+    Page.initShowCurDate();
+    Page.initCalendar();
+    Page.initJump2Date();
+
+    $('.paperarea').tooltip({
+        track: true,
+        content: function () {
+            var element = $(this);
+            var text = element.attr("title");
+            if (text == '') {
+                $(this).tooltip("option", "hide");
+            } else {
+                return '<span>' + text + '</span>';
+            }
+        }
+    });
+});
--- a/public/static/js/jquery-ui.css
+++ b/public/static/js/jquery-ui.css
--- a/public/static/js/jquery-ui.js
+++ b/public/static/js/jquery-ui.js
--- a/public/static/js/jquery.datepicker.js
+++ b/public/static/js/jquery.datepicker.js
@ -0,0 +1,285 @@
+;(function (factory) {
+    if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
+        // AMD或CMD
+        define(["jquery"], factory);
+    } else if (typeof module === 'object' && module.exports) {
+        // Node/CommonJS
+        module.exports = function (root, jQuery) {
+            if (jQuery === undefined) {
+                if (typeof window !== 'undefined') {
+                    jQuery = require('jquery');
+                } else {
+                    jQuery = require('jquery')(root);
+                }
+            }
+            factory(jQuery);
+            return jQuery;
+        };
+    } else {
+        //Browser globals
+        factory(jQuery);
+    }
+}(function ($) {
+
+    //配置参数
+    var defaults = {
+        activeDate: '',
+        yearToggle: '.year-toggle',
+        monthToggle: '.month-toggle',
+        contentEle: '.calendar-main',
+        isInit: !0,
+        yearRange: [12, 0],
+        onSelect: function () {
+        },
+        onCalendarChange: function () {
+        },
+        onUpdateView: function () {
+        },
+        onInit: function () {
+        }
+    };
+
+    // 修复数字为2位数
+    var fixNumer = function (num) {
+        return ('0' + num).slice(-2);
+    };
+
+    // 构造函数
+    var DataPicker = function (element, options) {
+
+        //全局变量
+        var opts = options, //配置
+            $document = $(document),
+            $obj = $(element), // 包裹元素
+            $yearToggle = $obj.find(options.yearToggle),
+            $monthToggle = $obj.find(options.monthToggle),
+            yearRange = options.yearRange,
+            activeDate = options.activeDate,
+            $contentEle = $obj.find(options.contentEle),
+            _this = this; // 保存this对象
+
+        var initYear, initMonth, initDay, // 初始化年月日
+            year, month, day, // 保存当前的年月日
+            yearStart, yearEnd; // 年份范围
+
+        _this.init = function () {
+            var activeDate = $('input[name="activeDate"]').val();
+            var storageTimeYear= sessionStorage.getItem("year");
+            var storageTimeMonth= sessionStorage.getItem("month");
+            var storageTimeDay= sessionStorage.getItem("day");
+            if(storageTimeYear && storageTimeMonth && storageTimeDay){
+                activeDate=storageTimeYear+"-"+storageTimeMonth+"-"+storageTimeDay;
+            }
+            //获取当前期刊时间
+            activeDate = activeDate ? new Date(activeDate) : new Date();
+            console.log(activeDate);
+
+            initYear = activeDate.getFullYear();
+            initMonth = activeDate.getMonth() + 1;
+            initDay = activeDate.getDate();
+
+            year = initYear;
+            month = initMonth;
+            day = initDay;
+
+            yearStart = year - yearRange[0];
+            yearEnd = year + yearRange[1];
+
+            var datenow = new Date();
+            var yearnow = datenow.getFullYear();
+            yearStart = 2007;
+            yearEnd = yearnow;
+        };
+
+        _this.renderDom = function () {
+
+            var weekStart = new Date(year, month - 1, 1).getDay(), // 本月1号是周几
+                dayCounts = new Date(year, month, 0).getDate(), // 当前月天数
+                whiteNumBefore = weekStart > 0 ? weekStart : 0; // 本月前面空的日期
+            whiteNumAfter = (dayCounts + whiteNumBefore) % 7 === 0 ? 0 : (Math.floor((dayCounts + whiteNumBefore) / 7) + 1) * 7 - (whiteNumBefore + dayCounts); // 本月后面空的日期
+            domStr = '';
+
+            for (var i = 0; i < whiteNumBefore; i++) {
+                domStr += '<span class="day disabled"></span>';
+            }
+
+            for (var i = 1; i <= dayCounts; i++) {
+                if (i === initDay && month === initMonth && year === initYear) {
+                    domStr += '<span class="day day-valid disabled active">' + i + '</span>';
+                } else {
+                    domStr += '<span class="day day-valid disabled">' + i + '</span>';
+                }
+            }
+            $contentEle.html(domStr);
+            if (options.isInit) { // 初始化
+                options.onInit && options.onInit(initYear + '-' + fixNumer(initMonth) + '-' + fixNumer(initDay));
+                isInit = !1;
+            }
+
+            _this.updateDateSelect();
+
+            options.onUpdateView && options.onUpdateView({year: year, month: month});
+        };
+
+        _this.updateDateSelect = function () {
+
+            var yearHtml = '',
+                monthHtml = '';
+
+            for (var i = yearStart; i <= yearEnd; i++) {
+
+                if (i === year) {
+
+                    yearHtml += '<option value="' + i + '" selected="selected">' + i + '</option>';
+                } else {
+
+                    yearHtml += '<option value="' + i + '">' + i + '</option>';
+                }
+            }
+
+            $yearToggle.find('.date-select').html(yearHtml);
+
+            for (var i = 1; i <= 12; i++) {
+
+                if (i === month) {
+
+                    monthHtml += '<option value="' + i + '" selected="selected">' + i + '</option>';
+                } else {
+
+                    monthHtml += '<option value="' + i + '">' + i + '</option>';
+                }
+            }
+
+            $monthToggle.find('.date-select').html(monthHtml);
+        };
+
+        _this.bindEvents = function () {
+
+            var $yearSelect = $yearToggle.find('.date-select'),
+                $monthSelect = $monthToggle.find('.date-select');
+
+            $monthToggle.on('click', '.icon-toggle-prev', function () {
+
+                if (year > yearStart || month > 0) {
+
+                    month--;
+
+                    if (month === 0) {
+
+                        month = 12;
+                        year--;
+                    }
+
+                    options.onCalendarChange && options.onCalendarChange({year: year, month: month});
+                    _this.renderDom();
+                }
+            });
+
+            $monthToggle.on('click', '.icon-toggle-next', function () {
+
+                if (year < yearEnd || month < 12) {
+
+                    month++;
+
+                    if (month === 13) {
+
+                        month = 1;
+                        year++;
+                    }
+
+                    options.onCalendarChange && options.onCalendarChange({year: year, month: month});
+                    _this.renderDom();
+                }
+            });
+
+            $yearToggle.on('click', '.icon-toggle-prev', function () {
+
+                if (year > yearStart) {
+
+                    year--;
+
+                    options.onCalendarChange && options.onCalendarChange({year: year, month: month});
+                    _this.renderDom();
+                }
+            });
+
+            $yearToggle.on('click', '.icon-toggle-next', function () {
+
+                if (year < yearEnd) {
+
+                    year++;
+
+                    options.onCalendarChange && options.onCalendarChange({year: year, month: month});
+                    _this.renderDom();
+                }
+            });
+
+            $yearSelect.change(function (e) {
+
+                year = +$(this).val();
+
+                options.onCalendarChange && options.onCalendarChange({year: year, month: month});
+                _this.renderDom();
+            });
+
+            $monthSelect.change(function (e) {
+
+                month = +$(this).val();
+
+                options.onCalendarChange && options.onCalendarChange({year: year, month: month});
+                _this.renderDom();
+            });
+
+            $obj.on('click', '.day', function (e) {
+
+                var $this = $(this);
+
+                if (!$this.hasClass('disabled') && !$this.hasClass('active')) {
+
+                    $this.addClass('active').siblings().removeClass('active');
+
+                    var curDay = $this.text();
+
+                    sessionStorage.setItem("year", year);
+                    sessionStorage.setItem("month", fixNumer(month));
+                    sessionStorage.setItem("day", fixNumer(curDay));
+                    //var dddd=sessionStorage.getItem("DateList");
+                    options.onSelect && options.onSelect(year + '-' + fixNumer(month) + '-' + fixNumer(curDay), $this);
+
+                    window.location.href = "https://jinrigushitwo.gushitv.com/#/?date="+year + '-' + fixNumer(month) + '-' + fixNumer(curDay);
+                    setTimeout(()=>{
+                        window.location.reload();
+                    },100)
+                }
+            });
+        };
+
+        _this.render = function () {
+
+            _this.init();
+            _this.renderDom();
+            _this.bindEvents();
+        };
+
+        _this.render();
+    };
+
+    $.fn.datePicker = function (parameter, callback) {
+
+        if (typeof parameter == 'function') { //重载
+            callback = parameter;
+            parameter = {};
+        } else {
+            parameter = parameter || {};
+            callback = callback || function () {
+            };
+        }
+
+        var options = $.extend({}, defaults, parameter);
+
+        return this.each(function () {
+            var datePicker = new DataPicker(this, options);
+            callback(datePicker);
+        });
+    };
+}));
--- a/public/static/js/jquery.min.js
+++ b/public/static/js/jquery.min.js
--- a/public/static/js/jquery.rwdImageMaps.min.js
+++ b/public/static/js/jquery.rwdImageMaps.min.js
@ -0,0 +1 @@
+(function($){$.fn.rwdImageMaps=function(){var $img=this;var rwdImageMap=function(){$img.each(function(){if(typeof($(this).attr("usemap"))=="undefined"){return}var that=this,$that=$(that);$("<img />").load(function(){var temp=new Image();temp.src=$that.attr("src");var w1=temp.width;var w2=$that.width();var map=$that.attr("usemap").replace("#",""),c="coords";$('map[name="'+map+'"]').find("area").each(function(){var $this=$(this);if(!$this.data(c)){$this.data(c,$this.attr(c))}var coords=$this.data(c).split(","),coordsPercent=new Array(coords.length);for(var i=0;i<coordsPercent.length;++i){coordsPercent[i]=parseInt((coords[i]/w1)*w2)}$this.attr(c,coordsPercent.toString())})}).attr("src",$that.attr("src"))})};$(window).resize(rwdImageMap).trigger("resize");return this}})(jQuery);
--- a/public/static/left1.png
+++ b/public/static/left1.png
--- a/public/static/left2.png
+++ b/public/static/left2.png
--- a/public/static/left3.png
+++ b/public/static/left3.png
--- a/public/static/left4.png
+++ b/public/static/left4.png
--- a/public/static/right1.png
+++ b/public/static/right1.png
--- a/public/static/right2.png
+++ b/public/static/right2.png
--- a/public/static/right3.png
+++ b/public/static/right3.png
--- a/public/static/right4.png
+++ b/public/static/right4.png
--- a/public/static/right5.png
+++ b/public/static/right5.png
--- a/public/static/right6.png
+++ b/public/static/right6.png
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,16 @@
+<script setup lang="ts">
+import {
+  NConfigProvider,
+  GlobalThemeOverrides,zhCN, dateZhCN
+} from 'naive-ui'
+</script>
+<template>
+  <n-message-provider>
+    <n-config-provider :date-locale="dateZhCN" :theme-overrides="themeOverrides">
+      <div v-wechat-title="$route.meta.title">
+        <router-view></router-view>
+      </div>
+    </n-config-provider>
+  </n-message-provider>
+
+</template>
--- a/src/api/index.js
+++ b/src/api/index.js
@ -0,0 +1,14 @@
+import http from './request';
+//首页最新的新闻
+export function getHomeNews(params) {
+	return http('/api/move/news/index', {
+		method: 'POST',
+		params: params,
+	});
+}
+
+
+
+
+
+
--- a/src/api/request.js
+++ b/src/api/request.js
@ -0,0 +1,107 @@
+import axios from 'axios';
+// request.js
+// 创建新的axios实例
+const baseURL='/';
+console.log(window.location.protocol);
+const service = axios.create({
+	// 环境变量，需要在.env文件中配置
+	baseURL: baseURL,
+	//baseURL:'/api',
+	// 超时时间暂定5s
+	timeout: 10000,
+
+});
+const Request = (url, options = {}) => {
+	let method = options.method || 'get';
+	let params = options.params || {};
+
+	if (method === 'get' || method === 'GET') {
+		return new Promise((resolve, reject) => {
+			service
+				.get(url, {
+					params: params,
+				})
+				.then(res => {
+					if (res && res.data) {
+						resolve(res.data);
+					}
+				})
+				.catch(err => {
+					reject(err);
+				});
+		});
+	} else if (method === 'post' || method === 'POST'){
+		return new Promise((resolve, reject) => {
+			service
+				.post(url, params)
+				.then(res => {
+					if (res && res.data) {
+						resolve(res.data);
+					}
+				})
+				.catch(err => {
+					reject(err);
+				});
+		});
+	}else{
+		console.log(params);
+		return new Promise((resolve, reject) => {
+			service
+				.delete(url, {data: params})
+				.then(res => {
+					if (res && res.data) {
+						resolve(res.data);
+					}
+				})
+				.catch(err => {
+					reject(err);
+				});
+		});
+	}
+};
+//axios请求拦截器
+service.interceptors.request.use(
+	config => {
+		// 此处添加Loading
+		// var item = sessionStorage.getItem('user');
+		// var admin = sessionStorage.getItem('admin');
+		// var jsonArray = JSON.parse(item);
+		// if (item) {
+		// 	config.headers['token'] =jsonArray['token']
+		// }
+		// if (admin) {
+		// 	config.headers['Authorization'] = `Bearer ${admin}`;
+		// }
+		return config;
+	},
+	error => {
+		return Promise.reject(error);
+	}
+);
+//axios响应拦截器
+service.interceptors.response.use(
+	response => {
+		return response;
+	},
+	error => {
+		// 处理异常情况，根据项目实际情况处理或不处理
+		if (error && error.response) {
+			// 根据约定的响应码处理
+			switch (error.response.status) {
+				case 403:
+					error.message = '拒绝访问';
+					break;
+				case 502:
+					error.message = '服务器端出错';
+					break;
+				default:
+					error.message = `连接错误${error.response.status}`;
+			}
+		} else {
+			// 超时处理
+			error.message = '服务器响应超时，请刷新当前页';
+		}
+		return Promise.resolve(error.response);
+	}
+);
+export default Request;
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@ -0,0 +1,12 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+</style>
--- a/src/components/Head.vue
+++ b/src/components/Head.vue
@ -0,0 +1,13 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/Writer.vue
+++ b/src/components/Writer.vue
@ -0,0 +1,99 @@
+<template>
+  <div :style="{ visibility: visibility }">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Writer",
+  props: {
+    // 间隔时间
+    interval: { type: Number, default: 75 },
+    // 光标 建议有表格的时候不要使用光标 会导致渲染异常
+    cursorStr: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      visibility: "hidden", //
+      timer: 0, // 定时器
+      initialDom: null, // 记录初始dom
+      progress: 0, // 当前文本书写进度
+      // writeStatus: "NotStart",// 当前书写状态=> NotStart: 未开始；Processing：书写中；Completed 书写完毕
+    };
+  },
+  mounted() {
+    // 拷贝初始所有dom 便于重新开始
+    this.initialDom = JSON.parse(JSON.stringify(this.$el.innerHTML));
+    this.start();
+  },
+  methods: {
+    // 开始 / 重新开始
+    start() {
+      this.visibility = "visible";
+      this.progress = 0;
+      this.$el.innerHTML = "";
+      clearInterval(this.timer);
+      this.write();
+      this.$emit("writeStart");
+    },
+    // 暂停
+    pause() {
+      clearInterval(this.timer);
+      this.$emit("writePause");
+    },
+    // 继续
+    continueWrite() {
+      if(!this.progress || this.progress >= this.initialDom.length){
+        return
+      }
+      clearInterval(this.timer);
+      this.write();
+      this.$emit("writeContinue");
+    },
+    // 重置
+    reset() {
+      this.visibility = "hidden";
+      this.progress = 0;
+      this.$el.innerHTML = "";
+      clearInterval(this.timer);
+    },
+    // 书写
+    write() {
+      this.timer = setInterval(() => {
+        var current = this.initialDom.substr(this.progress, 1);
+        // console.log(current);
+        // 跳过 标签渲染
+        if (current === "<") {
+          this.progress = this.initialDom.indexOf(">", this.progress) + 1;
+        } else {
+          this.progress++;
+        }
+        // console.log(this.progress & 1, "this.progress");
+        // 如果有光标配置 拼接到最新渲染的地方
+        if (this.cursorStr) {
+          this.$el.innerHTML =
+              this.initialDom.substring(0, this.progress) +
+              (this.progress < this.initialDom.length && this.progress & 1
+                  ? this.cursorStr
+                  : "");
+        } else {
+          this.$el.innerHTML = this.initialDom.substring(0, this.progress);
+        }
+        // 文本书写进度 大于需要书写的总长度 判断为渲染完成
+        if (this.progress >= this.initialDom.length) {
+          clearInterval(this.timer);
+          this.$emit("writeEnd"); // 打字完成后的回调方法
+        }
+        this.$emit("writeIsWrite");
+      }, this.interval);
+    },
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
+};
+</script>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,14 @@
+import {
+	createApp
+} from 'vue'
+import App from './App.vue'
+
+import router from './router/routes'
+import VueWechatTitle from 'vue-wechat-title'; //引入VueWechatTitle
+import naive from 'naive-ui';
+
+const app = createApp(App);
+app.use(naive);
+app.use(VueWechatTitle);
+app.use(router);
+app.mount('#app')
--- a/src/router/routes.js
+++ b/src/router/routes.js
@ -0,0 +1,26 @@
+import {
+    createRouter,
+    createWebHashHistory
+} from "vue-router";
+
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes: [{
+        path: "/",
+        meta: {
+            title: '今日固始' //title配置
+        },
+        component: () => import("../view/home/index.vue")
+    },
+        {
+            path: "/knowledge",
+            meta: {
+                title: '知识库' //title配置
+            },
+            component: () => import("../view/home/knowledge.vue")
+        }
+    ],
+});
+
+export default router
--- a/src/view/home/index.vue
+++ b/src/view/home/index.vue
@ -0,0 +1,728 @@
+<template>
+  <div class="container">
+    <input name="activeDate" value="" type="hidden">
+    <div style="position: absolute;left: -40px;display: flex;flex-direction: column;">
+      <div @mouseover="mouseLeft(1)" @mouseout="startHideMenuTimer()" class="container-left">目录</div>
+      <div @mouseover="mouseLeft(2)" @mouseout="startHideMenuTimer()" class="container-left">本版</div>
+      <div @mouseover="mouseLeft(3)" @mouseout="startHideMenuTimer()" class="container-left">往期</div>
+    </div>
+    <div v-if="mouseIndex == 1" @mouseover="clearHideMenuTimer()" @mouseout="startHideMenuTimer()"
+      style="z-index: 999999;position: absolute;left:15px;border: 1px solid #bfbfbf;width: 205px;padding: 10px;background-color: #ffffff;">
+      <div>
+        <span class="triangle triangleBorder"></span>
+        <span class="triangle triangleBg"></span>
+        <div class="top_1_div" v-for="(item, index) in data" :key="item.bm_name">
+          <div @click.prevent="openBm(index)">{{ item.bm_name }}</div>
+          <!-- <a class="pdf" target="_blank" :href="item.bm_pdf"
+              :style="{ width: '35px', height: '35px', position: 'absolute', right: '0px', background: `url(${iconPdf}) no-repeat center` }"></a> -->
+        </div>
+      </div>
+    </div>
+    <div v-if="mouseIndex == 2" @mouseover="clearHideMenuTimer()" @mouseout="startHideMenuTimer()"
+      style="z-index: 999999;top: 85px;position: absolute;left:15px;border: 1px solid #bfbfbf;width: 205px;padding: 10px;background-color: #ffffff;">
+      <div>
+        <span class="triangle triangleBorder"></span>
+        <span class="triangle triangleBg"></span>
+        <div style="padding-left: 16px;font-weight: bold;">{{ data[dataIndex].bm_name }}</div>
+        <div class="top_1_div" v-for="news in data[dataIndex].news" :key="news.new_name">
+          <div class="text-ellipsis" @click.prevent="openNews(news)">{{ news.new_name }}</div>
+          <!-- <a class="pdf" target="_blank" :href="item.bm_pdf"
+              :style="{ width: '35px', height: '35px', position: 'absolute', right: '0px', background: `url(${iconPdf}) no-repeat center` }"></a> -->
+        </div>
+      </div>
+    </div>
+    <div v-show="mouseIndex == 3" @mouseover="clearHideMenuTimer()" @mouseout="startHideMenuTimer()"
+      style="z-index: 999999;top: 150px;position: absolute;left:15px;border: 1px solid #bfbfbf;padding: 10px;background-color: #ffffff;">
+      <div class="main-layout clearfix">
+        <div class="layout-calendar fr" id="calendar">
+          <div class="calendar-header clearfix">
+            <h4 class="fl">按日期查找</h4>
+            <div class="date-toggle fr clearfix">
+              <div class="date-toggle-item year-toggle fl">
+                <i class="icon-toggle icon-toggle-prev"></i>
+                <select class="date-select" style="margin: 0px 3px"></select>
+                <i class="icon-toggle icon-toggle-next"></i>
+              </div>
+              <div class="date-toggle-item month-toggle fl">
+                <i class="icon-toggle icon-toggle-prev"></i>
+                <select class="date-select" style="margin: 0px 3px"></select>
+                <i class="icon-toggle icon-toggle-next"></i>
+              </div>
+            </div>
+          </div>
+          <ul class="calendar-week"></ul>
+          <div class="calendar-main"></div>
+          <div class="calendar-footer clearfix">
+            <input class="date-input" id="input_year" type="text" maxlength="4" style="margin-right: 5px">
+            <span>年</span>
+            <input class="date-input" id="input_month" type="text" maxlength="2" style="margin:0px 5px">
+            <span>月</span>
+            <input class="date-input" id="input_day" type="text" maxlength="2" style="margin:0px 5px">
+            <span>日</span>
+            <button class="btn-view fr" id="submit_btn">查 看</button>
+          </div>
+        </div>
+        <div class="layout-calendar fr" id="search">
+          <div class="calendar-footer clearfix">
+            <input class="date-input" id="input_search" type="text" maxlength="20" v-model="searchQuery">
+            <button class="btn-view fr" @click="searchNews">检 索</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="page-main clearfix" v-if="data != ''">
+      <!-- 版面预览 -->
+      <div class="fl">
+        <div class="pic-box">
+          <img :src="data[dataIndex].bm_img" id="Bantu" width="408px" border="0" usemap="#newbook"
+            style="opacity: 0; position: absolute; left: 50%; transform: translateX(-50%); top: 16px; z-index: 9;">
+          <canvas id="coorCanvas" width="408px" height="590px"
+            style="position: absolute;top: 15px;left:50%;transform: translateX(-50%); opacity: 1; z-index: 10; pointer-events: none;"></canvas>
+          <map name="newbook">
+            <area v-for="area in data[dataIndex].news" :key="area.id" class="paperarea" @click="openNews(area)"
+              @mouseover="handleMouseOver(area)" @mouseout="handleMouseOut()" :coords="area.coordinate" shape="rect"
+              :title="area.new_name">
+          </map>
+          <!-- <div class="pic-info clearfix">
+            <span class="pic-info-summary fl">{{ data[dataIndex].bm_name }}</span>
+            <div class="pic-info-ctrls clearfix fr">
+              <a class="pic-info-ctrl pic-info-ctrl-prev" title="阅读上一版" @click.prevent="openNext('top')"
+                href="#">上一版</a>
+              <a class="pic-info-ctrl pic-info-ctrl-next" title="阅读下一版" @click.prevent="openNext('bottom')"
+                href="#">下一版</a>
+            </div>
+          </div> -->
+        </div>
+        <!-- <div class="main-news" v-if="showInfo" style="width: 410px;margin-top: 20px">
+          <h2 class="main-news-title">本版列表新闻</h2>
+          <div class="main-news-main">
+            <ul class="news-list">
+              <li class="news-item" v-for="news in data[dataIndex].news" :key="news.new_name">
+                <a href="#" @click.prevent="openNews(news)" target="_blank" :alt="news.new_name"
+                  :title="news.new_name">{{
+                    news.new_name
+                  }}</a>
+              </li>
+            </ul>
+          </div>
+        </div> -->
+      </div>
+
+
+      <!-- 主体 -->
+      <div class="main-box">
+        <!-- <div class="main-header clearfix">
+          <ul class="main-header-nav fr clearfix"></ul>
+        </div> -->
+        <!-- <div class="main-tools clearfix">
+          <span class="main-tools-date fl">{{ datetime }}</span>
+          <div class="main-tools-ctrls fr">
+            <a class="main-tools-ctrl main-tools-ctrl-index" @click.prevent="goHome()" title="回到数字报首页"
+              href="#">数字报首页</a>
+          </div>
+        </div> -->
+        <!-- <div v-if="showInfo" class="swiper-box clearfix" style="position:relative;height: 35px;">
+          <div class="swiper-container">
+            <div v-for="(item, index) in data" class="swiper-slide">
+              <a href="#" @click.prevent="openBm(index)">{{ item.bm_name }}</a>
+            </div>
+          </div>
+        </div> -->
+        <div v-if="!showInfo">
+          <div class="main-news">
+            <div class="main-news-main">
+              <ul class="news-list">
+                <li class="news-item" v-for="news in data[dataIndex].news" :key="news.new_name"
+                  :class="{ 'news-item-active': hoveredArea && hoveredArea.id === news.id }"
+                  @mouseover="handleMouseOver(news)" @mouseout="handleMouseOut()">
+                  <a href="#" @click.prevent="openNews(news)" target="_blank" :alt="news.new_name"
+                    :title="news.new_name">{{
+                      news.new_name
+                    }}</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div v-if="showInfo" class="main-content-wrapper" id="news_wrapper">
+          <!-- <div class="main-content-header clearfix">
+            <div class="article-ctrls fl">
+              <a class="article-ctrl article-ctrl-prev" @click.prevent="openNextNews('top')" href="#">上一篇</a>
+              <a class="article-ctrl article-ctrl-next" @click.prevent="openNextNews('bottom')" href="#">下一篇</a>
+            </div>
+            <ul class="font-ctrls fr" id="toptool">
+              <li class="font-ctrl font-ctrl-plus" @click="addFontSize('da')">
+                放大<i class="font-ctrl-icon font-ctrl-icon-plus"></i>
+              </li>
+              <li class="font-ctrl font-ctrl-sub" @click="addFontSize('xiao')">
+                缩小<i class="font-ctrl-icon font-ctrl-icon-sub"></i>
+              </li>
+              <li class="font-ctrl font-ctrl-default" @click="addFontSize('mo')">
+                默认<i class="font-ctrl-icon font-ctrl-icon-default"></i>
+              </li>
+            </ul>
+          </div> -->
+          <div style="font-size: 16px;">{{ data[dataIndex].bm_name }}</div>
+          <div style="height: 1px;background-color:#d4d4d4;width: 100%;margin: 10px 0;"></div>
+          <div class="main-content">
+            <h1 style="text-align: center;">
+              {{ targetInfo.new_name }}
+            </h1>
+            <h3 style="text-align: center;">
+              {{ targetInfo.subtitle }}
+            </h3>
+            <h2 style="text-align: center;" class="summary"></h2>
+            <p class="datesource">{{ targetInfo.reporter }}</p>
+            <br>
+            <div class="info">
+              <div>
+              </div>
+              <div :class="'font' + fontSize" v-html="targetInfo.content"></div>
+            </div>
+          </div>
+
+        </div>
+        <!-- <div v-if="!showInfo" class="main-layout clearfix">
+          <div class="layout-catalogue fl">
+            <h2 class="layout-catalogue-title">版面目录</h2>
+            <div class="layout-catalogue-main">
+              <ul class="layout-catalogue-list">
+                <li class="layout-catalogue-item" v-for="(item, index) in data" :key="item.bm_name">
+                  <a href="#" :title="item.title" @click.prevent="openBm(index)">{{ item.bm_name }}</a>
+                  <a class="pdf" target="_blank" :href="item.bm_pdf"
+                    :style="{ width: '35px', height: '35px', position: 'absolute', right: '0px', background: `url(${iconPdf}) no-repeat center` }"></a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="layout-calendar fr" id="calendar">
+            <div class="calendar-header clearfix">
+              <h4 class="fl">按日期查找</h4>
+              <div class="date-toggle fr clearfix">
+                <div class="date-toggle-item year-toggle fl">
+                  <i class="icon-toggle icon-toggle-prev"></i>
+                  <select class="date-select" style="margin: 0px 3px"></select>
+                  <i class="icon-toggle icon-toggle-next"></i>
+                </div>
+                <div class="date-toggle-item month-toggle fl">
+                  <i class="icon-toggle icon-toggle-prev"></i>
+                  <select class="date-select" style="margin: 0px 3px"></select>
+                  <i class="icon-toggle icon-toggle-next"></i>
+                </div>
+              </div>
+            </div>
+            <ul class="calendar-week"></ul>
+            <div class="calendar-main"></div>
+            <div class="calendar-footer clearfix">
+              <input class="date-input" id="input_year" type="text" maxlength="4" style="margin-right: 5px">
+              <span>年</span>
+              <input class="date-input" id="input_month" type="text" maxlength="2" style="margin:0px 5px">
+              <span>月</span>
+              <input class="date-input" id="input_day" type="text" maxlength="2" style="margin:0px 5px">
+              <span>日</span>
+              <button class="btn-view fr" id="submit_btn">查 看</button>
+            </div>
+          </div>
+          <div class="layout-calendar fr" id="search">
+            <div class="calendar-footer clearfix">
+              <input class="date-input" id="input_search" type="text" maxlength="20" v-model="searchQuery">
+              <button class="btn-view fr" @click="searchNews">检 索</button>
+            </div>
+          </div>
+        </div> -->
+
+        <!-- <div class="main-news" v-if="!showInfo">
+          <h2 class="main-news-title">本版列表新闻</h2>
+          <div class="main-news-main">
+            <ul class="news-list">
+              <li class="news-item" v-for="news in data[dataIndex].news" :key="news.new_name">
+                <a href="#" @click.prevent="openNews(news)" target="_blank" :alt="news.new_name"
+                  :title="news.new_name">{{
+                    news.new_name
+                  }}</a>
+              </li>
+            </ul>
+          </div>
+        </div> -->
+      </div>
+    </div>
+    <!-- <div class="footer"></div> -->
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import $ from 'jquery';
+
+export default {
+  data() {
+    return {
+      iconPdf: "/dist/public/static/icon_pdf.png",
+      data: '',
+      dataIndex: 0,
+      showInfo: false,
+      targetInfo: {},
+      fontSize: 14,
+      datetime: '',
+      typeList: [],
+      typeId: 0,
+      hoveredArea: null,
+      imageScale: 1,
+      mouseIndex: 0,
+      hideMenuTimer: null,
+    };
+  },
+  mounted() {
+    var index = sessionStorage.getItem("index");
+    this.dataIndex = index ? index : 0;
+    this.getCurrentDateMaxDay();
+    console.log(this.$route.query.id)
+    if (typeof (this.$route.query.id) != 'undefined') {
+      this.getInfo(this.$route.query.id);
+    }
+    if (this.$route.query.date) {
+      //$('#activeDate').val(this.$route.query.date);
+      var time = new Date(this.$route.query.date);
+      var initYear = time.getFullYear();
+      var initMonth = String(time.getMonth() + 1).padStart(2, '0');
+      var initDay = String(time.getDate()).padStart(2, '0');
+      sessionStorage.setItem("year", initYear);
+      sessionStorage.setItem("month", initMonth);
+      sessionStorage.setItem("day", initDay);
+    }
+    //document.title =this.data.list[this.dataIndex].editionName;
+    // var newInfo = sessionStorage.getItem("newInfo");
+    // if (newInfo) {
+    //   this.showInfo = true;
+    //   this.targetInfo = JSON.parse(newInfo);
+    // }
+    // $('input[name="activeDate"]').val(newTime.time);
+    //获取当前日期
+
+  },
+  methods: {
+    mouseLeft(index) {
+      this.clearHideMenuTimer();
+      this.mouseIndex = index;
+    },
+    startHideMenuTimer() {
+      this.clearHideMenuTimer();
+      this.hideMenuTimer = setTimeout(() => {
+        this.mouseIndex = 0;
+      }, 1000);
+    },
+    clearHideMenuTimer() {
+      if (this.hideMenuTimer) {
+        clearTimeout(this.hideMenuTimer);
+      }
+    },
+    handleMouseOver(area) {
+      this.hoveredArea = area;
+      const canvas = document.getElementById('coorCanvas');
+      if (canvas && canvas.getContext) {
+        const ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        const coords = area.coordinate.split(',').map(c => Number(c) * this.imageScale);
+        if (coords.length === 4) {
+          const [x1, y1, x2, y2] = coords;
+          const width = x2 - x1;
+          const height = y2 - y1;
+          ctx.fillStyle = 'rgb(69,173,226,0.3)';
+          ctx.fillRect(x1, y1, width, height);
+        }
+      }
+    },
+    handleMouseOut() {
+      this.hoveredArea = null;
+      const canvas = document.getElementById('coorCanvas');
+      if (canvas && canvas.getContext) {
+        const ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+      }
+    },
+    openType(item) {
+      console.log(item);
+      this.typeId = item.id;
+      this.getCurrentDateMaxDay();
+      sessionStorage.setItem("typeId", item.id);
+      sessionStorage.removeItem("DateIndex");
+      sessionStorage.removeItem("newInfo");
+      sessionStorage.removeItem("DateList");
+      window.location.reload();
+    },
+    openNextNews(type) {
+      if (type == 'top') {
+        var id = parseInt(this.targetInfo.id) - 1;
+      } else {
+        var id = parseInt(this.targetInfo.id) + 1;
+      }
+      console.log(id);
+      const newsItem = this.data[this.dataIndex].news.find(news => news.id == id);
+      if (newsItem) {
+        // 处理找到的新闻项
+        console.log(newsItem);
+        this.targetInfo = newsItem;
+        sessionStorage.setItem("newInfo", JSON.stringify(newsItem));
+      } else {
+        if (type == 'top') {
+          alert('已经是第一篇了！');
+        } else {
+          alert('已经是最后一篇了！');
+        }
+      }
+    },
+    openNext(type) {
+      console.log(this.dataIndex);
+      if (type == 'top') {
+        if (this.dataIndex <= 0) {
+          alert('已经是第一版了！');
+          return;
+        }
+        this.dataIndex = this.dataIndex <= 0 ? 0 : parseInt(this.dataIndex) - 1;
+      } else {
+        if (this.dataIndex >= (this.data.length - 1)) {
+          alert('已经是最后一版了！');
+          return;
+        }
+        this.dataIndex = this.dataIndex >= (this.data.length - 1) ? (this.data.length - 1) : parseInt(this.dataIndex) + 1;
+      }
+      sessionStorage.setItem("index", parseInt(this.dataIndex));
+      sessionStorage.removeItem("newInfo");
+      this.showInfo = false;
+      window.location.reload();
+    },
+    addFontSize(type) {
+
+      if (type == 'da') {
+        if (this.fontSize == 29) {
+          return;
+        }
+        this.fontSize += 3;
+      } else if (type == 'xiao') {
+        if (this.fontSize == 14) {
+          return;
+        }
+        this.fontSize -= 3;
+      } else {
+        this.fontSize = 14;
+      }
+    },
+    getTypeList() {
+      axios.post("https://jinrigushitwo.gushitv.com/api/dzb/type/index")
+        .then(response => {
+          console.log(response);
+          this.typeList = response.data.data;
+          var typeId = sessionStorage.getItem("typeId");
+          if (typeId) {
+            this.typeId = typeId;
+          } else {
+            this.typeId = response.data.data[0].id;
+          }
+          this.getCurrentDateMaxDay();
+        })
+        .catch(error => console.error('Error loading the JSON file:', error))
+    },
+    getInfo(item) {
+      axios.post("https://jinrigushitwo.gushitv.com/api/h5/news/find", { id: item })
+        .then(response => {
+          // 使用导入的数据
+          //activeDate.value = response.data;
+          var info = response.data.data;
+          //info.content = info.content.replace(/href="\/dist\//g, 'href="/h5/');
+          //console.log(item.time);
+          //const targetData = response.data.list.find(data => data.numberDate == item.time);
+          //activeDate.value = info;
+          //console.log(activeDate.value)
+          this.targetInfo = info;
+          sessionStorage.setItem("newInfo", JSON.stringify(info));
+          this.showInfo = true;
+        })
+        .catch(error => console.error('Error loading the JSON file:', error))
+    },
+    openBm(d) {
+      this.dataIndex = d;
+      sessionStorage.setItem("index", d);
+      sessionStorage.removeItem("newInfo");
+      this.showInfo = false;
+      //document.title = '固始电子报-' + this.data[d].bm_name;
+      let url = window.location.href;
+      url = url.replace(/&id=\d+/, '');
+      url = url.replace(/\?id=\d+/, '');
+      window.location.href = url;
+      setTimeout(() => {
+        window.location.reload();
+      }, 100)
+      //var img=this.data.list[d].imageSrc;
+      //$('#BantuTop').attr("src",img)
+      //BantuTop
+    },
+    getCurrentDateFormatted(d) {
+      const date = new Date(d);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始计数，需要加1
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}年${month}月${day}日`;
+    },
+    getCurrentDateMaxDay() {
+      var activeDate = $('input[name="activeDate"]').val();
+      var querySatus = '';
+      var storageTimeYear = sessionStorage.getItem("year");
+      var storageTimeMonth = sessionStorage.getItem("month");
+      var storageTimeDay = sessionStorage.getItem("day");
+      if (storageTimeYear && storageTimeMonth && storageTimeDay) {
+        activeDate = storageTimeYear + "-" + this.getMd(storageTimeMonth);
+      }
+      console.log(this.$route.query.date);
+      if (typeof (this.$route.query.date) != 'undefined') {
+        activeDate = this.$route.query.date;
+        //activeDate = activeDate.substring(0, 7); //
+      }
+      if (typeof (this.$route.query.status) != 'undefined') {
+        querySatus = this.$route.query.status;
+      }
+      console.log(activeDate);
+      axios.post("https://jinrigushitwo.gushitv.com/api/dzb/date/index", { date: activeDate, status: querySatus })
+        .then(response => {
+          console.log(response);
+          if (response.data.data.length == 0) {
+            alert('本月没有数据');
+            sessionStorage.removeItem("typeId");
+            sessionStorage.removeItem("DateIndex");
+            sessionStorage.removeItem("newInfo");
+            sessionStorage.removeItem("DateList");
+            window.location.href = "https://jinrigushitwo.gushitv.com/";
+            return;
+          }
+          // 使用导入的数据
+          var resIndex = response.data.data.length - 1;
+          console.log('********', resIndex);
+          sessionStorage.setItem('DateList', JSON.stringify(response.data.data));
+
+          sessionStorage.setItem('DateIndex', resIndex);
+          $('input[name="activeDate"]').val(response.data.data[resIndex].datetime);
+          //this.datetime = this.getCurrentDateFormatted(response.data.data[resIndex].datetime);
+          //document.title = '《今日固始》电子版-' + this.datetime;
+          // if(storageTimeMonth == '' || typeof (storageTimeMonth)=='undefined'){
+          //   this.datetime = this.getCurrentDateFormatted(response.data.data[resIndex].datetime);
+          //   document.title = '《今日固始》电子版-' + this.datetime;
+          // }else{
+          //   document.title = '《今日固始》电子版-' +storageTimeYear + "年" + this.getMd(storageTimeMonth)+"月"+this.getMd(storageTimeDay)+"日";
+          // }
+
+          if (typeof (this.$route.query.date) != 'undefined') {
+            var time = new Date(this.$route.query.date);
+            var initYear = time.getFullYear();
+            var initMonth = String(time.getMonth() + 1).padStart(2, '0');
+            var initDay = String(time.getDate()).padStart(2, '0');
+            document.title = '《今日固始》电子版-' + initYear + "年" + initMonth + "月" + initDay + "日";
+          } else {
+            this.datetime = this.getCurrentDateFormatted(response.data.data[resIndex].datetime);
+            document.title = '《今日固始》电子版-' + this.datetime;
+          }
+
+          this.getBm();
+        })
+        .catch(error => console.error('Error loading the JSON file:', error))
+    },
+    getMd(num) {
+      return ('0' + num).slice(-2);
+    },
+    getBm() {
+
+      var seList = sessionStorage.getItem('DateList')
+      console.log('********', seList);
+      var list = JSON.parse(seList);
+      console.log('********', this.$route.query.date);
+      var storageTimeYear = sessionStorage.getItem("year");
+      var storageTimeMonth = sessionStorage.getItem("month");
+      var storageTimeDay = sessionStorage.getItem("day");
+      if (typeof (this.$route.query.date) != 'undefined') {
+        const targetData = list.find(item => item.datetime == this.$route.query.date);
+        console.log(targetData)
+        if (typeof (targetData) == 'undefined') {
+          alert('当日没有报纸！');
+          sessionStorage.removeItem("typeId");
+          sessionStorage.removeItem("DateIndex");
+          sessionStorage.removeItem("newInfo");
+          sessionStorage.removeItem("DateList");
+          sessionStorage.removeItem("year");
+          sessionStorage.removeItem("month");
+          sessionStorage.removeItem("day");
+          window.location.href = "https://jinrigushitwo.gushitv.com/";
+          return;
+        }
+        var id = targetData.id;
+      } else {
+        if (storageTimeYear && storageTimeMonth && storageTimeDay) {
+          var activeDate = storageTimeYear + "-" + storageTimeMonth + '-' + storageTimeDay;
+          console.log(activeDate)
+          const targetData = list.find(item => item.datetime == activeDate);
+          console.log(targetData)
+          var id = targetData.id;
+        } else {
+          var index = sessionStorage.getItem('DateIndex');
+          var id = list[index].id;
+        }
+      }
+      axios.post("https://jinrigushitwo.gushitv.com/api/dzb/bm/index", { date_id: id })
+        .then(response => {
+          console.log(response);
+          this.data = response.data.data;
+          this.$nextTick(() => {
+            this.setupImageScaling();
+          });
+
+          this.loadScripts([
+            '/dist/public/static/js/jquery.min.js',
+            '/dist/public/static/js/jquery-ui.js',
+            '/dist/public/static/js/jquery.datepicker.js',
+            '/dist/public/static/js/jquery.rwdImageMaps.min.js',
+            '/dist/public/static/js/Canvas_range.js',
+            '/dist/public/static/js/common.js',
+            '/dist/public/static/js/index.js'
+          ]);
+        })
+        .catch(error => console.error('Error loading the JSON file:', error))
+    },
+    loadScripts(urls) {
+      const loadScript = (url) => {
+        return new Promise((resolve) => {
+          const script = document.createElement('script');
+          script.src = url;
+          script.type = 'text/javascript';
+          script.onload = resolve; // 确保脚本加载完成后再继续
+          document.head.appendChild(script);
+        });
+      };
+
+      // 依次加载所有脚本
+      urls.reduce((promise, url) => {
+        return promise.then(() => loadScript(url));
+      }, Promise.resolve());
+    },
+    setupImageScaling() {
+      const img = document.getElementById('Bantu');
+      if (img) {
+        const calculateScale = () => {
+          if (img.naturalWidth > 0) {
+            this.imageScale = img.width / img.naturalWidth;
+          }
+        };
+
+        if (img.complete) {
+          calculateScale();
+        } else {
+          img.onload = calculateScale;
+        }
+      }
+    },
+    openNews(area) {
+      //var info = this.data[this.dataIndex].news;
+      //var targetInfo = info.find(item => item.id === area.id);
+      //this.targetInfo = targetInfo;
+      //sessionStorage.setItem("newInfo", JSON.stringify(targetInfo));
+      //this.getInfo(area.id);
+      //this.showInfo = true;
+      // 实现日期搜索逻辑
+      //this.showInfo = true;
+      let url = window.location.href;
+      //console.log(url)
+      if (url.indexOf("?") === -1) {
+        url += "?id=" + area.id;
+      } else {
+        // 检查是否已经包含了相同的参数
+        if (url.indexOf("id=") === -1) {
+          //修改ID后面的参数
+          url += "&id=" + area.id;
+        } else {
+
+          // 如果已经包含了相同的参数，我们不做任何操作
+          url = url.replace(/id=\d+/, 'id=' + area.id);
+        }
+      }
+      window.location.href = url;
+      console.log(url)
+      setTimeout(() => {
+        window.location.reload();
+      }, 100)
+    },
+
+    goHome() {
+      sessionStorage.removeItem("year");
+      sessionStorage.removeItem("month");
+      sessionStorage.removeItem("day");
+      sessionStorage.removeItem("index");
+      sessionStorage.removeItem("newInfo");
+      this.showInfo = false;
+      let url = window.location.href;
+      url = url.replace(/&id=\d+/, '');
+      url = url.replace(/\?id=\d+/, '');
+      window.location.href = url;
+      setTimeout(() => {
+        window.location.reload();
+      }, 100)
+    },
+  }
+};
+</script>
+
+<style src="/public/static/css/jquery-ui.css"></style>
+<style src="/public/static/css/reset.min.css"></style>
+<style src="/public/static/css/style.css"></style>
+<style scoped>
+/* 在这里添加样式 */
+.clearfix:after {
+  content: "";
+  display: block;
+  clear: both;
+  overflow: hidden
+}
+
+.font14 {
+  font-size: 14px !important;
+}
+
+.font17 {
+  font-size: 17px !important;
+}
+
+.font20 {
+  font-size: 20px !important;
+}
+
+.font23 {
+  font-size: 23px !important;
+}
+
+.font26 {
+  font-size: 26px !important;
+}
+
+.font29 {
+  font-size: 29px !important;
+}
+
+.paperarea {
+  cursor: pointer;
+
+}
+
+.type_text {
+  margin-right: 20px;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.type_text:hover {
+  color: red;
+}
+
+.type_text_act {
+  color: red;
+}
+
+.news-item-active {
+  background-color: #f0f0f0;
+  color: red;
+}
+</style>
--- a/src/view/home/knowledge.vue
+++ b/src/view/home/knowledge.vue
@ -0,0 +1,431 @@
+<template>
+  <div v-if="aiInfo" style="background-color: #ECECEC;position: fixed;width: 100%;">
+    <div
+        style="text-align: center;width: 100%;background-color: white;padding: 10px 0px;z-index: 10;position: absolute;">
+      <n-flex align="end" justify="center">
+        <div>
+          <img src="/public/static/icon_top.png" style="width: 150px;">
+        </div>
+        <div>
+          <span style="font-size: 28px;font-weight: bold;margin-left: 10px">AI</span>
+          <span style="font-size: 20px;font-weight: bold;margin-left: 10px">知识库</span>
+        </div>
+      </n-flex>
+    </div>
+    <div style="height: 100px"></div>
+    <n-flex>
+      <div style="width: 70px;">
+        <n-flex>
+          <div class="left1" style=""></div>
+          <div class="left2" style="left: 40px;"></div>
+        </n-flex>
+      </div>
+      <div style="padding: 20px 10px;width: 17%">
+        <div style="width: 280px">
+          <div>
+            <div style="display: inline-block;background: rgba(0,0,0,0.3);height: 10px;width: 1px;margin-right: 5px">
+            </div>
+            <div class="background1"></div>
+          </div>
+          <div>
+            <div style="display: inline-block;background: rgba(0,0,0,0.3);height: 10px;width: 1px;margin-right: 5px">
+            </div>
+            <div class="background2"></div>
+          </div>
+          <div>
+            <div style="display: inline-block;background: rgba(0,0,0,0.3);height: 10px;width: 1px;margin-right: 5px">
+            </div>
+            <div class="background3"></div>
+          </div>
+          <div>
+            <div style="display: inline-block;background: rgba(0,0,0,0.3);height: 10px;width: 1px;margin-right: 5px">
+            </div>
+            <div class="background4"></div>
+          </div>
+          <div>
+            <div style="display: inline-block;background: rgba(0,0,0,0.3);height: 10px;width: 1px;margin-right: 5px">
+            </div>
+            <div class="background5"></div>
+          </div>
+        </div>
+        <div style="width: 100%;height: 3px;background-color: rgba(0,0,0,0.3);margin: 20px 0px"></div>
+        <div style="">
+          <div class="left3"></div>
+        </div>
+        <div style="width: 100%;height: 3px;background-color: rgba(0,0,0,0.3);margin: 20px 0px"></div>
+        <div>
+          <div style="width: 70px;text-align: center;" id="left4"
+               :style="{ transform: `translateX(${position}px)` }">
+            <img src="/public/static/left4.png" style="width: 20px;">
+            <div style="font-size: 14px;color: rgba(0,0,0,0.4);">{{ left4 }}</div>
+            <div style="width: 100%;height: 2px;background-color: rgba(0,0,0,0.3);"></div>
+          </div>
+        </div>
+      </div>
+      <div style="width: 50%;padding: 20px 0px" class="centerTop">
+        <div style="border: 2px solid rgba(0,0,0,0.3);;background: rgba(0,0,0,0.1);padding: 10px 20px">
+          <span style="font-size: 35px;font-weight: 600">{{ aiInfo.zsk_name }}</span>
+        </div>
+        <div style="background: #ffffff;">
+          <VueTypewriter
+              class="tl"
+              ref="typewriter"
+              :interval="30"
+              cursorStr=""
+              @writeIsWrite="handleWriteStart"
+          >
+            <div class="gdt"
+                 style="overflow-y: scroll;height:60dvh;line-height: 32px;border: 2px solid rgba(0,0,0,0.3);;padding: 10px 20px;margin-top: 20px">
+              <div v-html="aiInfo.zsk_explain"></div>
+            </div>
+          </VueTypewriter>
+        </div>
+      </div>
+      <div style="width: 22%">
+        <n-flex :size="[0,0]">
+          <div style="width: 80%">
+            <div style="padding: 20px 0px 10px 10px">
+              <img src="/public/static/right1.png" style="width:100%;">
+            </div>
+            <div style="padding: 10px 0px 10px 10px">
+              <img src="/public/static/right2.png" style="width:100%;">
+            </div>
+            <div style="padding: 10px 0px 10px 10px">
+              <n-flex :size="[10,0]">
+                <div style="width: 45%">
+                  <img src="/public/static/right3.png" style="width:100%;">
+                </div>
+                <div style="width: 50%;text-align: right">
+                  <img src="/public/static/right4.png" style="width:100%;">
+                </div>
+              </n-flex>
+            </div>
+          </div>
+          <div style="width: 20%;text-align: right">
+            <img src="/public/static/right5.png" style="height: 60%">
+          </div>
+        </n-flex>
+      </div>
+    </n-flex>
+    <div style="width: 100%;position: fixed;text-align: center;bottom: 0;">
+      <img src="/public/static/center.png" style="width: 500px;display: block;margin: 0 auto">
+    </div>
+  </div>
+</template>
+<script setup>
+import VueTypewriter from "@/components/Writer.vue"
+import {onMounted, ref} from "vue";
+import {useRoute} from 'vue-router';
+import axios from "axios";
+import $ from "jquery";
+
+const route = useRoute();
+const position = ref(0);
+const left4 = ref();
+const aiInfo = ref();
+const infoId = ref();
+onMounted(() => {
+  console.log()
+  infoId.value = route.query.id;
+  getInfo();
+  startAnimation();
+});
+const getInfo = () =>
+{
+  axios.post("https://jinrigushitwo.gushitv.com/api/dzb/zsk/find", {id: infoId.value})
+      .then(response => {
+        console.log(response)
+        aiInfo.value=response.data.data;
+      })
+      .catch(error => console.error('Error loading the JSON file:', error))
+}
+const handleWriteStart = () => {
+  const ele = document.getElementsByClassName("gdt")[0];
+  //const top = document.getElementsByClassName("centerTop");
+  //console.log(top[0].clientWidth)
+  ele.scrollTop = ele.scrollHeight;
+}
+const startAnimation = () => {
+  let startPos = 80; // 起始位置（对应CSS中的0%）
+  let keyFrames = [
+    {position: 50},   // 20% 时的位置
+    {position: 150},  // 50% 时的位置
+    {position: 200},  // 80% 时的位置
+    {position: 100},  // 80% 时的位置
+    {position: 80}   // 原本100%时的位置，但在循环动画中不会直接用到
+  ];
+  let duration = 5000; // 动画总持续时间（毫秒）
+  let startTime = null; // 动画开始时间
+  let elapsedTime = 0; // 动画已持续时间
+  let currentKeyFrameIndex = 0; // 当前关键帧索引
+
+  // 根据已过去的时间计算当前位置
+  const calculatePosition = (timeElapsed) => {
+    const totalKeyFrames = keyFrames.length + 1; // 包括起始位置和结束位置（循环回起始）
+    const keyframeInterval = duration / (totalKeyFrames - 1); // 每个关键帧间隔的时间
+    let currentInterval = Math.floor(timeElapsed / keyframeInterval); // 当前处于哪个间隔
+    let progressInInterval = (timeElapsed % keyframeInterval) / keyframeInterval; // 当前间隔内的进度
+
+    // 防止超出数组界限
+    if (currentInterval >= totalKeyFrames - 1) {
+      currentInterval = totalKeyFrames - 2;
+      progressInInterval = 1;
+    }
+
+    // 获取当前和下一个关键帧的位置
+    const currentKeyFrame = {position: startPos}; // 起始位置作为第一个关键帧
+    if (currentInterval > 0) {
+      currentKeyFrame.position = keyFrames[currentInterval - 1].position;
+    }
+    const nextKeyFrame = keyFrames[currentInterval];
+
+    // 计算当前位置
+    const currentPos = currentKeyFrame.position + (nextKeyFrame.position - currentKeyFrame.position) * progressInInterval;
+    return currentPos;
+  };
+
+  const animate = (time) => {
+    if (!startTime) startTime = time;
+    elapsedTime = time - startTime;
+
+    // 如果动画时间超过总时长，重置开始时间和已持续时间
+    if (elapsedTime >= duration) {
+      startTime = time;
+      elapsedTime = 0;
+      currentKeyFrameIndex = 0; // 可选：重置关键帧索引，但在这个实现中不是必需的
+    }
+
+    const currentPos = calculatePosition(elapsedTime);
+
+    // 更新位置（这里假设你有一个方法来更新UI中的位置）
+    position.value = currentPos;
+    var c = parseInt(currentPos);
+    c = c < 100 ? '0' + c : c;
+    left4.value = `36114${c}`;
+    requestAnimationFrame(animate);
+  };
+
+  requestAnimationFrame(animate);
+};
+
+
+</script>
+<style>
+@keyframes left4-background {
+  0% {
+    transform: translateX(80px);
+  }
+
+  20% {
+    transform: translateX(30px);
+  }
+
+  50% {
+    transform: translateX(150px);
+  }
+
+  80% {
+    transform: translateX(200px);
+  }
+
+  100% {
+    transform: translateX(100px);
+  }
+}
+
+.left4 {
+  width: 70px;
+  text-align: center;
+  animation: left4-background 10s infinite alternate;
+}
+
+.background1 {
+  display: inline-block;
+  height: 10px;
+  background: rgba(0, 0, 0, 0.3);
+  animation: widthAnimation1 3s infinite alternate;
+}
+
+.background2 {
+  display: inline-block;
+  height: 10px;
+  background: rgba(0, 0, 0, 0.3);
+  animation: widthAnimation2 2s infinite alternate;
+}
+
+.background3 {
+  display: inline-block;
+  height: 10px;
+  background: rgba(0, 0, 0, 0.3);
+  animation: widthAnimation3 4s infinite alternate;
+}
+
+.background4 {
+  display: inline-block;
+  height: 10px;
+  background: rgba(0, 0, 0, 0.3);
+  animation: widthAnimation4 6s infinite alternate;
+}
+
+.background5 {
+  display: inline-block;
+  height: 10px;
+  background: rgba(0, 0, 0, 0.3);
+  animation: widthAnimation5 5s infinite alternate;
+}
+
+@keyframes widthAnimation1 {
+  from {
+    width: 30px;
+  }
+
+  to {
+    width: 150px;
+  }
+}
+
+@keyframes widthAnimation2 {
+  from {
+    width: 10px;
+  }
+
+  to {
+    width: 130px;
+  }
+}
+
+@keyframes widthAnimation3 {
+  from {
+    width: 20px;
+  }
+
+  to {
+    width: 100px;
+  }
+}
+
+@keyframes widthAnimation4 {
+  from {
+    width: 50px;
+  }
+
+  to {
+    width: 180px;
+  }
+}
+
+@keyframes widthAnimation5 {
+  from {
+    width: 80px;
+  }
+
+  to {
+    width: 230px;
+  }
+}
+
+@keyframes left3-background {
+  0% {
+    background-position: 0 50vh;
+    /* 背景图片的结束位置 */
+  }
+
+  100% {
+    background-position: 0 0;
+    /* 背景图片的起始位置 */
+  }
+}
+
+.left3 {
+  margin: 0;
+  padding: 0;
+  height: 50vh;
+  overflow-x: hidden;
+  background: url('/public/static/left3.png') repeat-y;
+  /* repeat-y 纵向重复, fixed 固定背景 */
+  animation: left3-background 30s linear infinite;
+  /* 10秒内完成一次循环，你可以根据需要调整 */
+  /* 确保内容在背景上显示 */
+  z-index: 1;
+  width: 300px;
+}
+
+@keyframes left2-background {
+  0% {
+    background-position: 0 0;
+    /* 背景图片的起始位置 */
+  }
+
+  100% {
+    background-position: 0 100vh;
+    /* 背景图片的结束位置 */
+  }
+}
+
+.left2 {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  top: 0;
+  position: fixed; /* 固定位置 */
+  overflow-x: hidden;
+  background: url('/public/static/left2.png') repeat;
+  /* repeat-y 纵向重复, fixed 固定背景 */
+  background-size: contain;
+  /* 图片高度适应视口 */
+  animation: left2-background 40s linear infinite;
+  /* 10秒内完成一次循环，你可以根据需要调整 */
+  /* 确保内容在背景上显示 */
+  z-index: 1;
+  width: 20px;
+
+}
+
+@keyframes left1-background {
+  0% {
+    background-position: 0 0;
+    /* 背景<E8838C><E699AF><EFBFBD>片的起始位置 */
+  }
+
+  100% {
+    background-position: 0 100vh;
+    /* 背景图片的结束位置 */
+  }
+}
+
+.left1 {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow-x: hidden;
+  position: fixed; /* 固定位置 */
+  top: 0;
+  background: url('/public/static/left1.png') repeat-y fixed;
+  /* repeat-y 纵向重复, fixed 固定背景 */
+  background-size: 30px 30px;
+  /* 图片高度适应视口 */
+  animation: left1-background 20s linear infinite;
+  /* 10秒内完成一次循环，你可以根据需要调整 */
+  /* 确保内容在背景上显示 */
+  z-index: 1;
+  width: 40px;
+}
+
+.gdt::-webkit-scrollbar {
+  width: 10px; /* 滚动条宽度 */
+}
+
+.gdt::-webkit-scrollbar-track {
+  background: #f1f1f1; /* 滚动条轨道背景色 */
+  display: none;
+}
+
+.gdt::-webkit-scrollbar-thumb {
+  background: #888; /* 滚动条滑块背景色 */
+  border-radius: 0px; /* 滑块圆角 */
+}
+
+.gdt::-webkit-scrollbar-thumb:hover {
+  background: #555; /* 滑块悬停时的背景色 */
+}
+</style>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,14 @@
+import {
+  defineConfig
+} from 'vite'
+import vue from '@vitejs/plugin-vue';
+import path from "path"
+export default defineConfig({
+  base: '/dist/', 
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve('./src')
+    }
+  },
+})
--- a/打包需要的操作.md
+++ b/打包需要的操作.md
@ -0,0 +1 @@
+打包后，需要在static外加一个public文件夹，包裹static
				`@ -0,0 +1 @@`
				a,article,aside,blockquote,body,button,code,dd,div,dl,dt,em,fieldset,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,input,label,li,main,nav,object,ol,option,p,q,section,select,small,span,strong,table,tbody,td,textarea,th,tr,ul{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}li,ul{list-style:none}a{text-decoration:none;-webkit-tap-highlight-color:transparent;cursor:pointer}a:active,a:focus,a:hover{outline:0}a img{vertical-align:top}a,img{-webkit-touch-callout:none}img{border:none}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-overflow-scrolling:touch}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}hr{height:1px;background-color:#ddd;margin:10px 0;border:none}table{border-collapse:collapse;border-spacing:0}button[disabled],html input[disabled]{cursor:default}button,input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;border:none;background:0 0}button,input[type=checkbox],input[type=radio]{border:none;outline:0}textarea{border:1px solid #e7e7e7;color:#444;font-size:14px;padding:8px 10px;resize:none;overflow:auto;vertical-align:top}input[type=color]:focus,input[type=date]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:active,input[type=search]:focus,input[type=submit]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,textarea:focus{-webkit-box-shadow:0;box-shadow:0;outline:0 none}input[type=submit],input[type=submit]:focus{border:0}::-webkit-input-placeholder{color:#999}:-moz-placeholder{color:#999;opacity:1}::-moz-placeholder{color:#999;opacity:1}:-ms-input-placeholder{color:#999}.fl{float:left}.fr{float:right}.clearfix{zoom:1}.clearfix:after{content:"";display:block;clear:both;overflow:hidden}.show{display:block!important}.hide{display:none!important}
				`@ -0,0 +1 @@`
				(function($){$.fn.rwdImageMaps=function(){var $img=this;var rwdImageMap=function(){$img.each(function(){if(typeof($(this).attr("usemap"))=="undefined"){return}var that=this,$that=$(that);$("<img />").load(function(){var temp=new Image();temp.src=$that.attr("src");var w1=temp.width;var w2=$that.width();var map=$that.attr("usemap").replace("#",""),c="coords";$('map[name="'+map+'"]').find("area").each(function(){var $this=$(this);if(!$this.data(c)){$this.data(c,$this.attr(c))}var coords=$this.data(c).split(","),coordsPercent=new Array(coords.length);for(var i=0;i<coordsPercent.length;++i){coordsPercent[i]=parseInt((coords[i]/w1)*w2)}$this.attr(c,coordsPercent.toString())})}).attr("src",$that.attr("src"))})};$(window).resize(rwdImageMap).trigger("resize");return this}})(jQuery);
				`@ -0,0 +1 @@`
				`打包后，需要在static外加一个public文件夹，包裹static`