123
This commit is contained in:
commit
190c7c3412
10
.idea/UniappTool.xml
generated
Normal file
10
.idea/UniappTool.xml
generated
Normal file
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="cn.fjdmy.uniapp.UniappProjectDataService">
|
||||
<option name="generalBasePath" value="$PROJECT_DIR$" />
|
||||
<option name="manifestPath" value="$PROJECT_DIR$/manifest.json" />
|
||||
<option name="pagesPath" value="$PROJECT_DIR$/pages.json" />
|
||||
<option name="scanNum" value="1" />
|
||||
<option name="type" value="store" />
|
||||
</component>
|
||||
</project>
|
||||
16
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
16
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
@ -0,0 +1,16 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="myCustomPropertiesEnabled" value="true" />
|
||||
<option name="myIgnoreVendorSpecificProperties" value="false" />
|
||||
<option name="myCustomPropertiesList">
|
||||
<value>
|
||||
<list size="1">
|
||||
<item index="0" class="java.lang.String" itemvalue="left4value" />
|
||||
</list>
|
||||
</value>
|
||||
</option>
|
||||
</inspection_tool>
|
||||
</profile>
|
||||
</component>
|
||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
225
.idea/workspace.xml
generated
Normal file
225
.idea/workspace.xml
generated
Normal file
@ -0,0 +1,225 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="AutoImportSettings">
|
||||
<option name="autoReloadType" value="SELECTIVE" />
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="e11c9797-a6f9-465b-b13b-58e9e5eed50f" name="更改" comment="123">
|
||||
<change beforePath="$PROJECT_DIR$/dist/favicon.ico" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/index.html" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/2024-11-07/632-01.jpg" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/2024-11-07/632-01.pdf" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/2024-11-07/632-02.jpg" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/2024-11-07/632-02.pdf" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/2024-11-07/632-03.jpg" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/2024-11-07/632-03.pdf" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/2024-11-07/632-04.jpg" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/2024-11-07/632-04.pdf" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/css/jquery-ui.css" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/css/reset.min.css" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/css/style.css" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/data/2024-11.json" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/icon_default.png" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/icon_pdf.png" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/icon_plus.png" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/icon_sub.png" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/js/Canvas_range.js" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/js/common.js" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/js/index.js" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/js/jquery-ui.css" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/js/jquery-ui.js" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/js/jquery.datepicker.js" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/js/jquery.min.js" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/dist/static/js/jquery.rwdImageMaps.min.js" beforeDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="ChangesViewManager">
|
||||
<option name="groupingKeys">
|
||||
<option value="directory" />
|
||||
</option>
|
||||
</component>
|
||||
<component name="FileTemplateManagerImpl">
|
||||
<option name="RECENT_TEMPLATES">
|
||||
<list>
|
||||
<option value="Vue Composition API Component" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
<component name="Git.Settings">
|
||||
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
||||
</component>
|
||||
<component name="MarkdownSettingsMigration">
|
||||
<option name="stateVersion" value="1" />
|
||||
</component>
|
||||
<component name="ProjectColorInfo">{
|
||||
"associatedIndex": 2
|
||||
}</component>
|
||||
<component name="ProjectId" id="2pyCrFTfbyXDKKKc5h8R0MCo54a" />
|
||||
<component name="ProjectLevelVcsManager" settingsEditedManually="true">
|
||||
<ConfirmationsSetting value="2" id="Add" />
|
||||
</component>
|
||||
<component name="ProjectViewState">
|
||||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
<option name="showLibraryContents" value="true" />
|
||||
</component>
|
||||
<component name="PropertiesComponent">{
|
||||
"keyToString": {
|
||||
"ASKED_ADD_EXTERNAL_FILES": "true",
|
||||
"ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
|
||||
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"SHARE_PROJECT_CONFIGURATION_FILES": "true",
|
||||
"git-widget-placeholder": "master",
|
||||
"last_opened_file_path": "E:/小程序/电子报API/src/components",
|
||||
"node.js.detected.package.eslint": "true",
|
||||
"node.js.detected.package.tslint": "true",
|
||||
"node.js.selected.package.eslint": "(autodetect)",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"nodejs_package_manager_path": "npm",
|
||||
"npm.build.executor": "Run",
|
||||
"npm.dev.executor": "Run",
|
||||
"settings.editor.selected.configurable": "project.propVCSSupport.DirectoryMappings",
|
||||
"ts.external.directory.path": "D:\\JetBrains\\WebStorm 2023.1.3\\plugins\\javascript-impl\\jsLanguageServicesImpl\\external",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
},
|
||||
"keyToStringList": {
|
||||
"vue.recent.templates": [
|
||||
"Vue Composition API Component"
|
||||
]
|
||||
}
|
||||
}</component>
|
||||
<component name="RecentsManager">
|
||||
<key name="CopyFile.RECENT_KEYS">
|
||||
<recent name="E:\小程序\电子报API\src\components" />
|
||||
<recent name="E:\小程序\电子报API\public\static" />
|
||||
<recent name="E:\小程序\电子报\public\static" />
|
||||
<recent name="E:\小程序\电子报\public\static\data" />
|
||||
<recent name="E:\小程序\电子报\public" />
|
||||
</key>
|
||||
<key name="MoveFile.RECENT_KEYS">
|
||||
<recent name="E:\小程序\电子报\public\static" />
|
||||
</key>
|
||||
</component>
|
||||
<component name="RunManager" selected="npm.dev">
|
||||
<configuration name="build" type="js.build_tools.npm" nameIsGenerated="true">
|
||||
<package-json value="$PROJECT_DIR$/package.json" />
|
||||
<command value="run" />
|
||||
<scripts>
|
||||
<script value="build" />
|
||||
</scripts>
|
||||
<node-interpreter value="project" />
|
||||
<envs />
|
||||
<method v="2" />
|
||||
</configuration>
|
||||
<configuration name="dev" type="js.build_tools.npm" nameIsGenerated="true">
|
||||
<package-json value="$PROJECT_DIR$/package.json" />
|
||||
<command value="run" />
|
||||
<scripts>
|
||||
<script value="dev" />
|
||||
</scripts>
|
||||
<node-interpreter value="project" />
|
||||
<envs />
|
||||
<method v="2" />
|
||||
</configuration>
|
||||
<list>
|
||||
<item itemvalue="npm.build" />
|
||||
<item itemvalue="npm.dev" />
|
||||
</list>
|
||||
</component>
|
||||
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="应用程序级" UseSingleDictionary="true" transferred="true" />
|
||||
<component name="TaskManager">
|
||||
<task active="true" id="Default" summary="默认任务">
|
||||
<changelist id="e11c9797-a6f9-465b-b13b-58e9e5eed50f" name="更改" comment="" />
|
||||
<created>1733729126005</created>
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1733729126005</updated>
|
||||
<workItem from="1733729127095" duration="9181000" />
|
||||
<workItem from="1733792267183" duration="23195000" />
|
||||
<workItem from="1733878497860" duration="303000" />
|
||||
<workItem from="1733878821741" duration="14059000" />
|
||||
<workItem from="1733968596388" duration="3932000" />
|
||||
<workItem from="1734051305176" duration="3100000" />
|
||||
<workItem from="1734341455346" duration="611000" />
|
||||
<workItem from="1734414206433" duration="6101000" />
|
||||
<workItem from="1734429083209" duration="2000" />
|
||||
<workItem from="1734491487297" duration="648000" />
|
||||
<workItem from="1734492244078" duration="183000" />
|
||||
<workItem from="1734500721157" duration="298000" />
|
||||
<workItem from="1734505781486" duration="1384000" />
|
||||
<workItem from="1734508424909" duration="608000" />
|
||||
<workItem from="1734509148854" duration="392000" />
|
||||
<workItem from="1735001501984" duration="17083000" />
|
||||
<workItem from="1735087604123" duration="18904000" />
|
||||
<workItem from="1735193928488" duration="7944000" />
|
||||
<workItem from="1735260138672" duration="446000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="123">
|
||||
<option name="closed" value="true" />
|
||||
<created>1733878931540</created>
|
||||
<option name="number" value="00001" />
|
||||
<option name="presentableId" value="LOCAL-00001" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1733878931540</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00002" summary="123">
|
||||
<option name="closed" value="true" />
|
||||
<created>1733895594781</created>
|
||||
<option name="number" value="00002" />
|
||||
<option name="presentableId" value="LOCAL-00002" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1733895594781</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00003" summary="123">
|
||||
<option name="closed" value="true" />
|
||||
<created>1733898564723</created>
|
||||
<option name="number" value="00003" />
|
||||
<option name="presentableId" value="LOCAL-00003" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1733898564723</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00004" summary="123">
|
||||
<option name="closed" value="true" />
|
||||
<created>1733898606115</created>
|
||||
<option name="number" value="00004" />
|
||||
<option name="presentableId" value="LOCAL-00004" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1733898606115</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00005" summary="123">
|
||||
<option name="closed" value="true" />
|
||||
<created>1733981972954</created>
|
||||
<option name="number" value="00005" />
|
||||
<option name="presentableId" value="LOCAL-00005" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1733981972954</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00006" summary="123">
|
||||
<option name="closed" value="true" />
|
||||
<created>1734509247971</created>
|
||||
<option name="number" value="00006" />
|
||||
<option name="presentableId" value="LOCAL-00006" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1734509247971</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="7" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
<option name="version" value="3" />
|
||||
</component>
|
||||
<component name="VcsManagerConfiguration">
|
||||
<option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
|
||||
<option name="CHECK_NEW_TODO" value="false" />
|
||||
<option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
|
||||
<ignored-roots>
|
||||
<path value="$PROJECT_DIR$" />
|
||||
</ignored-roots>
|
||||
<MESSAGE value="123" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="123" />
|
||||
</component>
|
||||
</project>
|
||||
64
index.html
Normal file
64
index.html
Normal file
@ -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>
|
||||
2351
package-lock.json
generated
Normal file
2351
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
26
package.json
Normal file
26
package.json
Normal file
@ -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.6.0",
|
||||
"@vue/compiler-sfc": "^3.2.6",
|
||||
"naive-ui": "^2.40.3",
|
||||
"sass": "^1.77.6",
|
||||
"vfonts": "^0.0.3",
|
||||
"vite": "^2.5.2",
|
||||
"vite-plugin-copy": "^0.1.6"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
public/static/2024-11-07/632-01.jpg
Normal file
BIN
public/static/2024-11-07/632-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 721 KiB |
BIN
public/static/2024-11-07/632-01.pdf
Normal file
BIN
public/static/2024-11-07/632-01.pdf
Normal file
Binary file not shown.
BIN
public/static/2024-11-07/632-02.jpg
Normal file
BIN
public/static/2024-11-07/632-02.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 716 KiB |
BIN
public/static/2024-11-07/632-02.pdf
Normal file
BIN
public/static/2024-11-07/632-02.pdf
Normal file
Binary file not shown.
BIN
public/static/2024-11-07/632-03.jpg
Normal file
BIN
public/static/2024-11-07/632-03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 725 KiB |
BIN
public/static/2024-11-07/632-03.pdf
Normal file
BIN
public/static/2024-11-07/632-03.pdf
Normal file
Binary file not shown.
BIN
public/static/2024-11-07/632-04.jpg
Normal file
BIN
public/static/2024-11-07/632-04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 686 KiB |
BIN
public/static/2024-11-07/632-04.pdf
Normal file
BIN
public/static/2024-11-07/632-04.pdf
Normal file
Binary file not shown.
BIN
public/static/center.png
Normal file
BIN
public/static/center.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
1225
public/static/css/jquery-ui.css
vendored
Normal file
1225
public/static/css/jquery-ui.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
public/static/css/reset.min.css
vendored
Normal file
1
public/static/css/reset.min.css
vendored
Normal file
@ -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}
|
||||
699
public/static/css/style.css
Normal file
699
public/static/css/style.css
Normal file
@ -0,0 +1,699 @@
|
||||
@charset "utf-8";
|
||||
body {
|
||||
background-color: #eee;
|
||||
font-family: "Microsoft Yahei", 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
p,
|
||||
a {
|
||||
word-break: break-all;
|
||||
}
|
||||
.container {
|
||||
width: 1040px;
|
||||
padding: 50px 20px 30px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
/* 页面主体 */
|
||||
.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 {
|
||||
margin-bottom: 20px;
|
||||
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;
|
||||
border: 1px solid #bbb;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.main-news-main .news-item {
|
||||
position: relative;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
padding-left: 16px;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.main-news-main .news-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-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;
|
||||
padding: 30px;
|
||||
border-top: 1px solid #bbb;
|
||||
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;}
|
||||
|
||||
398
public/static/data/2024-11.json
Normal file
398
public/static/data/2024-11.json
Normal file
File diff suppressed because one or more lines are too long
3
public/static/data/newTime.json
Normal file
3
public/static/data/newTime.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"time": "2024-11-07"
|
||||
}
|
||||
BIN
public/static/icon_default.png
Normal file
BIN
public/static/icon_default.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public/static/icon_pdf.png
Normal file
BIN
public/static/icon_pdf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
public/static/icon_plus.png
Normal file
BIN
public/static/icon_plus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public/static/icon_sub.png
Normal file
BIN
public/static/icon_sub.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public/static/icon_top.png
Normal file
BIN
public/static/icon_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
223
public/static/js/Canvas_range.js
Normal file
223
public/static/js/Canvas_range.js
Normal file
@ -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()
|
||||
}
|
||||
27
public/static/js/common.js
Normal file
27
public/static/js/common.js
Normal file
@ -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;
|
||||
};
|
||||
167
public/static/js/index.js
Normal file
167
public/static/js/index.js
Normal file
@ -0,0 +1,167 @@
|
||||
// 页面对象
|
||||
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("/dist/", "/h5/");
|
||||
console.log(sURL2);
|
||||
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: "http://csdzb.hschool.com.cn/api/dzb/date/index",
|
||||
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 != "")
|
||||
{
|
||||
// sessionStorage.setItem("year", year);
|
||||
// sessionStorage.setItem("month", month);
|
||||
// sessionStorage.setItem("day", day);
|
||||
window.location.reload();
|
||||
}
|
||||
else{
|
||||
alert("未查询到对应日期的报纸");
|
||||
}
|
||||
} else {
|
||||
alert('时间输入格式不正确');
|
||||
}
|
||||
});
|
||||
};
|
||||
//日历牌-结束
|
||||
|
||||
|
||||
/**
|
||||
* =============================================================================
|
||||
* 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>';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
1225
public/static/js/jquery-ui.css
vendored
Normal file
1225
public/static/js/jquery-ui.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
16617
public/static/js/jquery-ui.js
vendored
Normal file
16617
public/static/js/jquery-ui.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
281
public/static/js/jquery.datepicker.js
Normal file
281
public/static/js/jquery.datepicker.js
Normal file
@ -0,0 +1,281 @@
|
||||
;(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", month);
|
||||
sessionStorage.setItem("day", curDay);
|
||||
//var dddd=sessionStorage.getItem("DateList");
|
||||
options.onSelect && options.onSelect(year + '-' + fixNumer(month) + '-' + fixNumer(curDay), $this);
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
_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);
|
||||
});
|
||||
};
|
||||
}));
|
||||
5
public/static/js/jquery.min.js
vendored
Normal file
5
public/static/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
public/static/js/jquery.rwdImageMaps.min.js
vendored
Normal file
1
public/static/js/jquery.rwdImageMaps.min.js
vendored
Normal file
@ -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);
|
||||
BIN
public/static/left1.png
Normal file
BIN
public/static/left1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
public/static/left2.png
Normal file
BIN
public/static/left2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
public/static/left3.png
Normal file
BIN
public/static/left3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
public/static/left4.png
Normal file
BIN
public/static/left4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 653 B |
BIN
public/static/right1.png
Normal file
BIN
public/static/right1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
public/static/right2.png
Normal file
BIN
public/static/right2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 837 B |
BIN
public/static/right3.png
Normal file
BIN
public/static/right3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
public/static/right4.png
Normal file
BIN
public/static/right4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
public/static/right5.png
Normal file
BIN
public/static/right5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
public/static/right6.png
Normal file
BIN
public/static/right6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
16
src/App.vue
Normal file
16
src/App.vue
Normal file
@ -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>
|
||||
14
src/api/index.js
Normal file
14
src/api/index.js
Normal file
@ -0,0 +1,14 @@
|
||||
import http from './request';
|
||||
//首页最新的新闻
|
||||
export function getHomeNews(params) {
|
||||
return http('/api/move/news/index', {
|
||||
method: 'POST',
|
||||
params: params,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
107
src/api/request.js
Normal file
107
src/api/request.js
Normal file
@ -0,0 +1,107 @@
|
||||
import axios from 'axios';
|
||||
// request.js
|
||||
// 创建新的axios实例
|
||||
const baseURL='https://hnyea.0rui.cn/';
|
||||
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;
|
||||
12
src/components/Footer.vue
Normal file
12
src/components/Footer.vue
Normal file
@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
13
src/components/Head.vue
Normal file
13
src/components/Head.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
99
src/components/Writer.vue
Normal file
99
src/components/Writer.vue
Normal file
@ -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>
|
||||
14
src/main.js
Normal file
14
src/main.js
Normal file
@ -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')
|
||||
26
src/router/routes.js
Normal file
26
src/router/routes.js
Normal file
@ -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
|
||||
450
src/view/home/index.vue
Normal file
450
src/view/home/index.vue
Normal file
@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<input name="activeDate" value="" type="hidden">
|
||||
<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;"></canvas>
|
||||
<map name="newbook">
|
||||
<area v-for="area in data[dataIndex].news" :key="area.id" class="paperarea" @click="openNews(area)"
|
||||
: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">
|
||||
<div class="fl">
|
||||
<span @click="openType(item)" :class="[item.id==typeId?'type_text_act':'','type_text']"
|
||||
v-for="(item,index) in typeList">{{ item.type }}</span>
|
||||
</div>
|
||||
<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" 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 class="main-content">
|
||||
<h1 style="text-align: center;">
|
||||
{{ targetInfo.new_name }}
|
||||
</h1>
|
||||
<h2 style="text-align: center;" class="summary"></h2>
|
||||
<p class="datesource">{{ targetInfo.reporter }}</p>
|
||||
<br>
|
||||
<div class="info">
|
||||
<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';
|
||||
import newTime from "/public/static/data/newTime.json"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
iconPdf: "/dist/public/static/icon_pdf.png",
|
||||
data: '',
|
||||
dataIndex: 0,
|
||||
showInfo: false,
|
||||
targetInfo: {},
|
||||
fontSize: 14,
|
||||
datetime: '',
|
||||
typeList: [],
|
||||
typeId: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
var index = sessionStorage.getItem("index");
|
||||
this.dataIndex = index ? index : 0;
|
||||
|
||||
this.getTypeList();
|
||||
//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: {
|
||||
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("http://csdzb.hschool.com.cn/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))
|
||||
},
|
||||
openBm(d) {
|
||||
this.dataIndex = d;
|
||||
sessionStorage.setItem("index", d);
|
||||
sessionStorage.removeItem("newInfo");
|
||||
this.showInfo = false;
|
||||
console.log();
|
||||
document.title = '固始电子报-' + this.data[d].bm_name;
|
||||
window.location.reload();
|
||||
//var img=this.data.list[d].imageSrc;
|
||||
//$('#BantuTop').attr("src",img)
|
||||
//BantuTop
|
||||
},
|
||||
getCurrentDateFormatted() {
|
||||
const date = new Date();
|
||||
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 storageTimeYear = sessionStorage.getItem("year");
|
||||
var storageTimeMonth = sessionStorage.getItem("month");
|
||||
var storageTimeDay = sessionStorage.getItem("day");
|
||||
if (storageTimeYear && storageTimeMonth && storageTimeDay) {
|
||||
activeDate = storageTimeYear + "-" + storageTimeMonth;
|
||||
}
|
||||
console.log(activeDate);
|
||||
axios.post("http://csdzb.hschool.com.cn/api/dzb/date/index", {date: activeDate,type_id: this.typeId})
|
||||
.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.reload();
|
||||
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);
|
||||
this.getBm();
|
||||
})
|
||||
.catch(error => console.error('Error loading the JSON file:', error))
|
||||
},
|
||||
getBm() {
|
||||
var list = JSON.parse(sessionStorage.getItem('DateList'));
|
||||
var storageTimeYear = sessionStorage.getItem("year");
|
||||
var storageTimeMonth = sessionStorage.getItem("month");
|
||||
var storageTimeDay = sessionStorage.getItem("day");
|
||||
if (storageTimeYear && storageTimeMonth && storageTimeDay) {
|
||||
var activeDate = storageTimeYear + "-" + storageTimeMonth + '-' + storageTimeDay;
|
||||
const targetData = list.find(item => item.datetime == activeDate);
|
||||
var id = targetData.id;
|
||||
} else {
|
||||
var index = sessionStorage.getItem('DateIndex');
|
||||
var id = list[index].id;
|
||||
}
|
||||
axios.post("http://csdzb.hschool.com.cn/api/dzb/bm/index", {date_id: id})
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
this.data = response.data.data;
|
||||
document.title = '固始电子报-' + this.data[this.dataIndex].bm_name;
|
||||
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());
|
||||
},
|
||||
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.showInfo = true;
|
||||
// 实现日期搜索逻辑
|
||||
},
|
||||
goHome() {
|
||||
sessionStorage.removeItem("year");
|
||||
sessionStorage.removeItem("month");
|
||||
sessionStorage.removeItem("day");
|
||||
sessionStorage.removeItem("index");
|
||||
sessionStorage.removeItem("newInfo");
|
||||
this.showInfo = false;
|
||||
window.location.reload();
|
||||
},
|
||||
}
|
||||
};
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
431
src/view/home/knowledge.vue
Normal file
431
src/view/home/knowledge.vue
Normal file
@ -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("http://csdzb.hschool.com.cn/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>
|
||||
16
vite.config.js
Normal file
16
vite.config.js
Normal file
@ -0,0 +1,16 @@
|
||||
import {
|
||||
defineConfig
|
||||
} from 'vite'
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import path from "path"
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
base: '/dist/', // 设置为您的二级目录名称
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
// Vite路径别名配置
|
||||
alias: {
|
||||
'@': path.resolve('./src')
|
||||
}
|
||||
},
|
||||
})
|
||||
1
打包需要的操作.md
Normal file
1
打包需要的操作.md
Normal file
@ -0,0 +1 @@
|
||||
打包后，需要在static外加一个public文件夹，包裹static
|
||||
Loading…
x
Reference in New Issue
Block a user