first commit copy

2 years ago · ea36ae6971
52 changed files with 3287 additions and 0 deletions
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,19 @@
+ENV = 'development'
+
+# 接口地址
+
+#内网服务地址
+VUE_APP_BASE_API  = 'http://192.168.99.107:7070'
+VUE_APP_WS_API = 'ws://192.168.99.107:7071'
+VUE_APP_CAMERA_API = '192.168.99.107'
+
+# 刘力-本地服地址
+#VUE_APP_BASE_API  = 'http://192.168.99.65:7070'
+#VUE_APP_WS_API = 'ws://192.168.99.65:7071'
+
+# 许镇-本地服地址
+#VUE_APP_BASE_API  = 'http://192.168.99.84:7070'
+#VUE_APP_WS_API = 'ws://192.168.99.84:7070'
+
+# 是否启用 babel-plugin-dynamic-import-node插件
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,9 @@
+ENV = 'production'
+
+# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
+# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
+# VUE_APP_BASE_API  = 'https://openapitest.aiyxlib.com'
+VUE_APP_BASE_API  = 'http://192.168.99.107:7070'
+# 如果接口是 http 形式， wss 需要改为 ws
+VUE_APP_WS_API = 'ws://192.168.99.107:7071'
+VUE_APP_CAMERA_API = '192.168.99.107'
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,197 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+
+
+  rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
+    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+dist/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+package-lock.json
--- a/README.md
+++ b/README.md
@ -0,0 +1,13 @@
+智慧大屏
+
+```bash
+# install dependency
+npm install
+
+# develop
+npm run serve
+
+# 构建生产环境
+npm run build
+
+```
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,11 @@
+const plugins = ['@vue/babel-plugin-transform-vue-jsx', '@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator']
+// 生产环境移除console
+if (process.env.NODE_ENV === 'production') {
+  plugins.push('transform-remove-console')
+}
+module.exports = {
+  plugins: plugins,
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,54 @@
+{
+  "name": "intelligence-screen",
+  "version": "1.0.0",
+  "description": "智慧大屏",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@babel/core": "^7.19.0",
+    "@babel/preset-env": "^7.19.0",
+    "@jiaminghi/data-view": "^2.7.3",
+    "@types/echarts": "^4.4.3",
+    "axios": "^0.27.2",
+    "core-js": "^3.6.4",
+    "echarts": "^4.6.0",
+    "element-ui": "^2.15.9",
+    "vue": "^2.6.11",
+    "vue-awesome": "^4.0.2",
+    "vue-router": "^3.1.5",
+    "vuex": "^3.1.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.2.0",
+    "@vue/cli-plugin-eslint": "^4.2.0",
+    "@vue/cli-service": "^4.2.0",
+    "babel-eslint": "^10.0.3",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.1.2",
+    "sass": "^1.25.0",
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,16 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style lang="scss">
+body {
+  margin: 0;
+}
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style>
--- a/src/assets/fonts/YouSheBiaoTiHei.ttf
+++ b/src/assets/fonts/YouSheBiaoTiHei.ttf
--- a/src/assets/fonts/ZhenyanGB.ttf
+++ b/src/assets/fonts/ZhenyanGB.ttf
--- a/src/assets/fonts/fonts.css
+++ b/src/assets/fonts/fonts.css
@ -0,0 +1,13 @@
+@font-face {
+  font-family: "ZhenyanGB";
+  src: url('ZhenyanGB.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "YouSheBiaoTiHei";
+  src: url('YouSheBiaoTiHei.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
--- a/src/assets/iconfont/demo.css
+++ b/src/assets/iconfont/demo.css
@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
--- a/src/assets/iconfont/demo_index.html
+++ b/src/assets/iconfont/demo_index.html
@ -0,0 +1,488 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3646564" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe636;</span>
+                <div class="name">no.2</div>
+                <div class="code-name">&amp;#xe636;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe637;</span>
+                <div class="name">2</div>
+                <div class="code-name">&amp;#xe637;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe634;</span>
+                <div class="name">键盘</div>
+                <div class="code-name">&amp;#xe634;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe630;</span>
+                <div class="name">关闭</div>
+                <div class="code-name">&amp;#xe630;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe631;</span>
+                <div class="name">左</div>
+                <div class="code-name">&amp;#xe631;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe632;</span>
+                <div class="name">本架图书</div>
+                <div class="code-name">&amp;#xe632;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe633;</span>
+                <div class="name">热门</div>
+                <div class="code-name">&amp;#xe633;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62f;</span>
+                <div class="name">右</div>
+                <div class="code-name">&amp;#xe62f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe628;</span>
+                <div class="name">通知</div>
+                <div class="code-name">&amp;#xe628;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe629;</span>
+                <div class="name">no.3</div>
+                <div class="code-name">&amp;#xe629;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62b;</span>
+                <div class="name">no.1</div>
+                <div class="code-name">&amp;#xe62b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62d;</span>
+                <div class="name">3</div>
+                <div class="code-name">&amp;#xe62d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62e;</span>
+                <div class="name">1</div>
+                <div class="code-name">&amp;#xe62e;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1663379994606') format('woff2'),
+       url('iconfont.woff?t=1663379994606') format('woff'),
+       url('iconfont.ttf?t=1663379994606') format('truetype'),
+       url('iconfont.svg?t=1663379994606#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-no21"></span>
+            <div class="name">
+              no.2
+            </div>
+            <div class="code-name">.icon-a-no21
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-21"></span>
+            <div class="name">
+              2
+            </div>
+            <div class="code-name">.icon-a-21
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jianpan"></span>
+            <div class="name">
+              键盘
+            </div>
+            <div class="code-name">.icon-jianpan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-guanbi"></span>
+            <div class="name">
+              关闭
+            </div>
+            <div class="code-name">.icon-guanbi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zuo"></span>
+            <div class="name">
+              左
+            </div>
+            <div class="code-name">.icon-zuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-benjiatushu"></span>
+            <div class="name">
+              本架图书
+            </div>
+            <div class="code-name">.icon-benjiatushu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-remen"></span>
+            <div class="name">
+              热门
+            </div>
+            <div class="code-name">.icon-remen
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-you"></span>
+            <div class="name">
+              右
+            </div>
+            <div class="code-name">.icon-you
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tongzhi"></span>
+            <div class="name">
+              通知
+            </div>
+            <div class="code-name">.icon-tongzhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-no3"></span>
+            <div class="name">
+              no.3
+            </div>
+            <div class="code-name">.icon-a-no3
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-no1"></span>
+            <div class="name">
+              no.1
+            </div>
+            <div class="code-name">.icon-a-no1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-3"></span>
+            <div class="name">
+              3
+            </div>
+            <div class="code-name">.icon-a-3
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-a-1"></span>
+            <div class="name">
+              1
+            </div>
+            <div class="code-name">.icon-a-1
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-no21"></use>
+                </svg>
+                <div class="name">no.2</div>
+                <div class="code-name">#icon-a-no21</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-21"></use>
+                </svg>
+                <div class="name">2</div>
+                <div class="code-name">#icon-a-21</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jianpan"></use>
+                </svg>
+                <div class="name">键盘</div>
+                <div class="code-name">#icon-jianpan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guanbi"></use>
+                </svg>
+                <div class="name">关闭</div>
+                <div class="code-name">#icon-guanbi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zuo"></use>
+                </svg>
+                <div class="name">左</div>
+                <div class="code-name">#icon-zuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-benjiatushu"></use>
+                </svg>
+                <div class="name">本架图书</div>
+                <div class="code-name">#icon-benjiatushu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-remen"></use>
+                </svg>
+                <div class="name">热门</div>
+                <div class="code-name">#icon-remen</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-you"></use>
+                </svg>
+                <div class="name">右</div>
+                <div class="code-name">#icon-you</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tongzhi"></use>
+                </svg>
+                <div class="name">通知</div>
+                <div class="code-name">#icon-tongzhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-no3"></use>
+                </svg>
+                <div class="name">no.3</div>
+                <div class="code-name">#icon-a-no3</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-no1"></use>
+                </svg>
+                <div class="name">no.1</div>
+                <div class="code-name">#icon-a-no1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-3"></use>
+                </svg>
+                <div class="name">3</div>
+                <div class="code-name">#icon-a-3</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-a-1"></use>
+                </svg>
+                <div class="name">1</div>
+                <div class="code-name">#icon-a-1</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>
--- a/src/assets/iconfont/iconfont.css
+++ b/src/assets/iconfont/iconfont.css
@ -0,0 +1,68 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3646564 */
+  src: url('iconfont.woff2?t=1663379994606') format('woff2'),
+       url('iconfont.woff?t=1663379994606') format('woff'),
+       url('iconfont.ttf?t=1663379994606') format('truetype'),
+       url('iconfont.svg?t=1663379994606#iconfont') format('svg');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-a-no21:before {
+  content: "\e636";
+}
+
+.icon-a-21:before {
+  content: "\e637";
+}
+
+.icon-jianpan:before {
+  content: "\e634";
+}
+
+.icon-guanbi:before {
+  content: "\e630";
+}
+
+.icon-zuo:before {
+  content: "\e631";
+}
+
+.icon-benjiatushu:before {
+  content: "\e632";
+}
+
+.icon-remen:before {
+  content: "\e633";
+}
+
+.icon-you:before {
+  content: "\e62f";
+}
+
+.icon-tongzhi:before {
+  content: "\e628";
+}
+
+.icon-a-no3:before {
+  content: "\e629";
+}
+
+.icon-a-no1:before {
+  content: "\e62b";
+}
+
+.icon-a-3:before {
+  content: "\e62d";
+}
+
+.icon-a-1:before {
+  content: "\e62e";
+}
+
--- a/src/assets/iconfont/iconfont.js
+++ b/src/assets/iconfont/iconfont.js
--- a/src/assets/iconfont/iconfont.json
+++ b/src/assets/iconfont/iconfont.json
@ -0,0 +1,100 @@
+{
+  "id": "3646564",
+  "name": "智慧屏",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "31879702",
+      "name": "no.2",
+      "font_class": "a-no21",
+      "unicode": "e636",
+      "unicode_decimal": 58934
+    },
+    {
+      "icon_id": "31879708",
+      "name": "2",
+      "font_class": "a-21",
+      "unicode": "e637",
+      "unicode_decimal": 58935
+    },
+    {
+      "icon_id": "31879044",
+      "name": "键盘",
+      "font_class": "jianpan",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "31859389",
+      "name": "关闭",
+      "font_class": "guanbi",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    },
+    {
+      "icon_id": "31859390",
+      "name": "左",
+      "font_class": "zuo",
+      "unicode": "e631",
+      "unicode_decimal": 58929
+    },
+    {
+      "icon_id": "31859393",
+      "name": "本架图书",
+      "font_class": "benjiatushu",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "31859394",
+      "name": "热门",
+      "font_class": "remen",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "31859388",
+      "name": "右",
+      "font_class": "you",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "31804863",
+      "name": "通知",
+      "font_class": "tongzhi",
+      "unicode": "e628",
+      "unicode_decimal": 58920
+    },
+    {
+      "icon_id": "31804864",
+      "name": "no.3",
+      "font_class": "a-no3",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "31804866",
+      "name": "no.1",
+      "font_class": "a-no1",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "31804868",
+      "name": "3",
+      "font_class": "a-3",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "31804869",
+      "name": "1",
+      "font_class": "a-1",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    }
+  ]
+}
--- a/src/assets/iconfont/iconfont.svg
+++ b/src/assets/iconfont/iconfont.svg
--- a/src/assets/iconfont/iconfont.ttf
+++ b/src/assets/iconfont/iconfont.ttf
--- a/src/assets/iconfont/iconfont.woff
+++ b/src/assets/iconfont/iconfont.woff
--- a/src/assets/iconfont/iconfont.woff2
+++ b/src/assets/iconfont/iconfont.woff2
--- a/src/assets/images/num-img.png
+++ b/src/assets/images/num-img.png
--- a/src/assets/images/star-1.png
+++ b/src/assets/images/star-1.png
--- a/src/assets/images/star-2.png
+++ b/src/assets/images/star-2.png
--- a/src/assets/images/star-3.png
+++ b/src/assets/images/star-3.png
--- a/src/assets/images/title.png
+++ b/src/assets/images/title.png
--- a/src/assets/images/top.png
+++ b/src/assets/images/top.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@ -0,0 +1,97 @@
+// 颜色
+$colors: (
+  "primary": #db9e3f,
+  "info-1": #4394e4,
+  "info": #4b67af,
+  "white": #ffffff,
+  "light": #f9f9f9,
+  "grey-1": #999999,
+  "grey": #666666,
+  "dark-1": #5f5f5f,
+  "dark": #222222,
+  "black-1": #171823,
+  "black": #000000,
+);
+
+// 字体大小
+$base-font-size: 0.2rem;
+$font-sizes: (
+  xxs: 0.1,
+  //8px
+    xs: 0.125,
+  //10px
+    sm: 0.2875,
+  //12px
+    md: 0.1625,
+  //13px
+    lg: 0.175,
+  //14px
+    xl: 0.2,
+  //16px
+    xxl: 0.225,
+  //18px
+    xxxl: 0.25
+);
+
+// 宽高
+.w-100 {
+  width: 100%;
+}
+.h-100 {
+  height: 100%;
+}
+
+//flex
+.d-flex {
+  display: flex;
+}
+.flex-column {
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+$flex-jc: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly,
+);
+
+$flex-ai: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  stretch: stretch,
+);
+
+.flex-1 {
+  flex: 1;
+}
+
+//.mt-1 => margin top
+//spacing
+$spacing-types: (
+  m: margin,
+  p: padding,
+);
+$spacing-directions: (
+  t: top,
+  r: right,
+  b: bottom,
+  l: left,
+);
+$spacing-base-size: 0.2rem;
+$spacing-sizes: (
+  0: 0,
+  1: 0.25,
+  2: 0.5,
+  3: 1,
+  4: 1.5,
+  5: 3,
+);
--- a/src/assets/styles/font-some.css
+++ b/src/assets/styles/font-some.css
@ -0,0 +1,46 @@
+.chartNum{
+    display: flex;
+    justify-content: center;
+    margin-top: 0.25rem;
+}
+.box-items {
+    position: relative;
+    display: flex;
+    height: 0.6rem;
+    text-align: center;
+}
+/*滚动数字设置*/
+.number-item {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  width: 0.45rem;
+  height: 0.6rem;
+  line-height: 0.6rem;
+  margin-right: 0.125rem;
+  border: 1px solid #2C75E0;
+}
+.number-item span{
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+    overflow: hidden;
+}
+.number-item span i{
+    font-style: normal;
+    position: absolute;
+    top: 0.1rem;
+    left: 50%;
+    font-size: 0.325rem;
+    font-weight: bold;
+    color: #1AC9FF;
+    transform: translate(-50%,0);
+    transition: transform 1s ease-in-out;
+    letter-spacing: 10px;
+}
+.number-item:last-child {
+    margin-right: 0;
+}
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@ -0,0 +1,247 @@
+#screen-container {
+  width: 100%;
+  height: 100vh;
+  padding: 0 0.175rem;
+  font-size: 0.25rem;
+  line-height: 0.35rem;
+  color: #fff;
+  background-color: #010326;
+  overflow: hidden;
+}
+
+// 头部主题标题
+.header-container{
+  position: relative;
+  font-size: 0.3rem;
+  color: #fff;
+  .header-title{
+    width: 100%;
+    height: 1.125rem;
+    background: url('~@/assets/images/top.png') no-repeat center -5px;
+    background-size: cover;
+    h2{
+      font-size: 0.6rem;
+      font-family: "ZhenyanGB";
+      font-weight: normal;
+      line-height: 1.125rem;
+      text-align: center;
+      letter-spacing: 0.2rem;
+      background: linear-gradient(180deg, #FFFFFF 0%, #1AC9FF 100%);
+      background-clip: text;
+      color: transparent;
+    }
+  }
+  .header-text{
+    position: absolute;
+    top: 0.65rem;
+  }
+  .header-weather {
+    left: 1rem;
+    // top: 0.32rem;
+  }
+  .header-date {
+    right: 0.375rem;
+  }
+}
+
+// 主题内部部分
+.screen-main{
+  display: flex;
+  justify-content: space-between;
+  height: calc(100% - 155px);
+  margin: 0.0625rem 0 0.5rem 0;
+  padding: 0 0.325rem;
+  .screen-left,
+  .screen-right{
+    width: 6.375rem;
+  }
+  .screen-middle{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: 0 0.5rem;
+  }
+  .screen-item{
+    margin-top: 0.25rem;
+  }
+  .common-title{
+    width: 100%;
+    height: 0.475rem;
+    line-height: 0.475rem;
+    padding-left: 0.525rem;
+    font-size: 0.325rem;
+    background: url('~@/assets/images/title.png') no-repeat center center;
+    background-size: cover;
+    font-family: 'YouSheBiaoTiHei';
+    letter-spacing: 0.1rem;
+  }
+  .module-content{
+    border: 1px solid #2C75E0;
+    box-shadow: inset 0px 0px 38px 1px rgba(44,117,224,0.5);
+  }
+  .small-module{
+    height: 3.75rem;
+  }
+  .medium-module{
+    height: 4.125rem;
+  }
+  .big-module{
+    height: 6.675rem;
+  }
+  
+  //排行榜-推荐 - list
+  .lending-ranking{
+    .module-content{
+      padding: 0.1625rem 0.25rem;
+      overflow: hidden;
+    }
+  }
+  .book-list-item{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.1rem 0.25rem;
+    // background-color: #09194B;
+    .book-img{
+      display: block;
+      width: 0.825rem;
+      height: 1.075rem;
+      margin-right: 0.35rem;
+    }
+    .book-info{
+      flex: 1;
+      margin-right: 0.35rem;
+      h4{
+        font-size: 0.25rem;
+        font-weight: normal;
+      }
+      p{
+        font-size: 0.2rem;
+      }
+    }
+    .ranking-num{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .icon{
+        width: 0.5625rem;
+        height: 0.5625rem;
+        margin-right: 0.175rem;
+      }
+    }
+  }
+
+  // 进出馆人数
+  .accessToLib-container{
+    display: flex;
+    justify-content: space-between;
+    text-align: center;
+    align-items: center;
+    margin: 0.375rem 0 .25rem 0;
+    .accessToLib-item{
+      width: 2.75rem;
+      p{
+        height: 0.85rem;
+        margin-top: 0.125rem;
+        line-height: 0.85rem;
+        font-size: 0.325rem;
+        font-weight: bold;
+        text-align: center;
+        color: #1AC9FF;
+        background: url('~@/assets/images/num-img.png') no-repeat center center;
+        background-size: cover;
+      }
+    }
+  }
+
+  // 视频
+  .video-box{
+    width: 100%;
+    height: 5.075rem;
+  }
+
+  // 阅读之星
+  .read-star{
+    .module-content{
+      padding: .25rem;
+      overflow: hidden;
+      .readstart-item{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 0.5rem;
+        padding: 0 0.25rem;
+        font-size: 0.2rem;
+        margin-bottom: 0.125rem;
+        background: linear-gradient(90deg, #0C2157 0%, rgba(44,117,224,0) 51%, #0C2157 100%);
+        .icon-star-1{
+          width: 0.35rem;
+          height: 0.3rem;
+          margin-left: -0.05rem;
+          margin-right: 0.2rem;
+        }
+        .icon-star-2{
+          width: 0.375rem;
+          height: 0.3rem;
+          margin-left: -0.0625rem;
+          margin-right: 0.2rem;
+        }
+        .icon-star-3{
+          width: 0.275rem;
+          height: 0.3rem;
+          margin-right: 0.25rem;
+        }
+        .star-num{
+          display: block;
+          width: 0.25rem;
+          height: 0.25rem;
+          margin-right: 0.25rem;
+          font-size: 0.2rem;
+          line-height: 0.25rem;
+          text-align: center;
+          border-radius: 50%;
+          color: #1AC9FF;
+          border: 1px solid #1AC9FF;
+        }
+        .star-info{
+          flex: 1;
+          margin-right: 0.25rem;
+        }
+        &.star1-bg{
+          background: url('~@/assets/images/star-1.png') no-repeat left top;
+          background-size: contain;
+        }
+        &.star2-bg{
+          background: url('~@/assets/images/star-2.png') no-repeat left top;
+          background-size: contain;
+        }
+        &.star3-bg{
+          background: url('~@/assets/images/star-3.png') no-repeat left top;
+          background-size: contain;
+        }
+      }
+      
+    }
+  }
+
+  // 通知公告
+  .notice{
+    .module-content{
+      display: flex;
+      justify-content: space-between;
+      padding: 0.25rem 0.375rem 0.5rem 0.375rem;
+      .icon-tongzhi{
+        margin-right: 0.15rem;
+        font-size: 0.325rem;
+        color: #1AC9FF;
+      }
+      p{
+        height: 3.1rem;
+        overflow: hidden;
+        // overflow-y: auto;
+      }
+    }
+  }
+
+}
--- a/src/assets/styles/style.scss
+++ b/src/assets/styles/style.scss
@ -0,0 +1,81 @@
+@import "./variables";
+@import '~@/assets/iconfont/iconfont.css';
+
+//  全局样式
+* {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  box-sizing: border-box;
+  outline: none;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  background-color: #f1f1f1;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: #343440;
+  text-decoration: none;
+}
+
+ul{
+  margin: 0;
+  padding: 0;
+  li{
+    list-style: none;
+  }
+}
+
+.clearfix {
+  &::after {
+    content: "";
+    display: table;
+    height: 0;
+    line-height: 0;
+    visibility: hidden;
+    clear: both;
+  }
+}
+
+/**滚动条的宽度*/
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+//滚动条的滑块
+::-webkit-scrollbar-thumb {
+  background-color: #13439E;
+  border-radius: 3px;
+}
+
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+//浮动
+.float-r {
+  float: right;
+}
+
+//文章一行显示，多余省略号显示
+.title-item {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
--- a/src/common/flexible.js
+++ b/src/common/flexible.js
@ -0,0 +1,147 @@
+(function(win, lib) {
+  var doc = win.document
+  var docEl = doc.documentElement
+  var metaEl = doc.querySelector('meta[name="viewport"]')
+  var flexibleEl = doc.querySelector('meta[name="flexible"]')
+  var dpr = 0
+  var scale = 0
+  var tid
+  var flexible = lib.flexible || (lib.flexible = {})
+
+  if (metaEl) {
+    console.warn('将根据已有的meta标签来设置缩放比例')
+    var match = metaEl
+      .getAttribute('content')
+      // eslint-disable-next-line no-useless-escape
+      .match(/initial\-scale=([\d\.]+)/)
+    if (match) {
+      scale = parseFloat(match[1])
+      dpr = parseInt(1 / scale)
+    }
+  } else if (flexibleEl) {
+    var content = flexibleEl.getAttribute('content')
+    if (content) {
+      // eslint-disable-next-line no-useless-escape
+      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
+      // eslint-disable-next-line no-useless-escape
+      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
+      if (initialDpr) {
+        dpr = parseFloat(initialDpr[1])
+        scale = parseFloat((1 / dpr).toFixed(2))
+      }
+      if (maximumDpr) {
+        dpr = parseFloat(maximumDpr[1])
+        scale = parseFloat((1 / dpr).toFixed(2))
+      }
+    }
+  }
+
+  if (!dpr && !scale) {
+    // eslint-disable-next-line no-unused-vars
+    var isAndroid = win.navigator.appVersion.match(/android/gi)
+    var isIPhone = win.navigator.appVersion.match(/iphone/gi)
+    var devicePixelRatio = win.devicePixelRatio
+    if (isIPhone) {
+      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+        dpr = 3
+      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
+        dpr = 2
+      } else {
+        dpr = 1
+      }
+    } else {
+      // 其他设备下，仍旧使用1倍的方案
+      dpr = 1
+    }
+    scale = 1 / dpr
+  }
+
+  docEl.setAttribute('data-dpr', dpr)
+  if (!metaEl) {
+    metaEl = doc.createElement('meta')
+    metaEl.setAttribute('name', 'viewport')
+    metaEl.setAttribute(
+      'content',
+      'initial-scale=' +
+        scale +
+        ', maximum-scale=' +
+        scale +
+        ', minimum-scale=' +
+        scale +
+        ', user-scalable=no'
+    )
+    if (docEl.firstElementChild) {
+      docEl.firstElementChild.appendChild(metaEl)
+    } else {
+      var wrap = doc.createElement('div')
+      wrap.appendChild(metaEl)
+      doc.write(wrap.innerHTML)
+    }
+  }
+
+  function refreshRem() {
+    var width = docEl.getBoundingClientRect().width
+    // 最小1366px，最大适配2560px
+    if (width / dpr < 1366) {
+      width = 1366 * dpr
+    } else if (width / dpr > 2560) {
+      width = 2560 * dpr
+    }
+    // 设置成24等份，设计稿时1920px的，这样1rem就是80px
+    var rem = width / 24
+    docEl.style.fontSize = rem + 'px'
+    flexible.rem = win.rem = rem
+  }
+
+  win.addEventListener(
+    'resize',
+    function() {
+      clearTimeout(tid)
+      tid = setTimeout(refreshRem, 300)
+    },
+    false
+  )
+  win.addEventListener(
+    'pageshow',
+    function(e) {
+      if (e.persisted) {
+        clearTimeout(tid)
+        tid = setTimeout(refreshRem, 300)
+      }
+    },
+    false
+  )
+
+  if (doc.readyState === 'complete') {
+    doc.body.style.fontSize = 12 * dpr + 'px'
+  } else {
+    doc.addEventListener(
+      'DOMContentLoaded',
+      // eslint-disable-next-line no-unused-vars
+      function(e) {
+        doc.body.style.fontSize = 12 * dpr + 'px'
+      },
+      false
+    )
+  }
+
+  refreshRem()
+
+  flexible.dpr = win.dpr = dpr
+  flexible.refreshRem = refreshRem
+  flexible.rem2px = function(d) {
+    var val = parseFloat(d) * this.rem
+    if (typeof d === 'string' && d.match(/rem$/)) {
+      val += 'px'
+    }
+    return val
+  }
+  flexible.px2rem = function(d) {
+    var val = parseFloat(d) / this.rem
+    if (typeof d === 'string' && d.match(/px$/)) {
+      val += 'rem'
+    }
+    return val
+  }
+})(window, window['lib'] || (window['lib'] = {}))
--- a/src/common/scrollMixins.js
+++ b/src/common/scrollMixins.js
@ -0,0 +1,61 @@
+export default {
+  data() {
+    return {
+      scrollDom: null,
+      interval: null,
+      scrollTimer: null, // 滚动定时器
+      pauseTimer: null, // 暂停定时器
+      timeout: null,
+      step: null
+    }
+  },
+  created() {
+  },
+  mounted() {
+    // this.dataCompleteFun()
+  },
+  destroyed() {
+    // 清理定时器
+    clearTimeout(this.pauseTimer)
+    this.pauseTimer = null
+    clearInterval(this.scrollTimer)
+    this.scrollTimer = null
+    // 清理点击监听
+    window.document.removeEventListener('click', this.pauseScroll)
+  },
+  methods: {
+    autoScroll() {
+      // 滚动长度为0
+      if (this.scrollDom.scrollHeight - this.scrollDom.clientHeight > 0) {
+        // 如果定时器存在
+        if (this.scrollTimer) {
+        // 则先清除
+          clearInterval(this.scrollTimer)
+          clearTimeout(this.pauseTimer)
+          this.scrollTimer = null
+          this.pauseTimer = null
+        }
+        this.scrollTimer = setInterval(() => {
+          const scrollHeight = this.scrollDom.scrollHeight
+          const clientHeight = this.scrollDom.clientHeight
+          const scroll = scrollHeight - clientHeight
+          // 获取当前滚动条距离顶部高度
+          const scrollTop = this.scrollDom.scrollTop
+          // 当滚动到底部时,间隔时间后重回顶部开始
+          if (scrollTop + this.step >= scroll) {
+            this.scrollDom.scrollTop = scroll
+            this.pauseTimer = setTimeout(() => {
+              this.scrollDom.scrollTop = 0
+              this.autoScroll()
+            }, this.timeout)
+          } else { // 没有则继续滚动
+            this.scrollDom.scrollTop = scrollTop + this.step
+          }
+          // console.log(scrollHeight, clientHeight, scroll, scrollTop)
+        }, this.interval)
+      } else {
+        return
+      }
+    }
+  }
+}
--- a/src/components/echart/lineChart.vue
+++ b/src/components/echart/lineChart.vue
@ -0,0 +1,185 @@
+<template>
+  <div id="main" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from '@/utils/resizeMixins.js'
+
+export default {
+  name: 'AcrossEcharts',
+  mixins: [resize],
+  props: {
+    addArcivesData: {
+      type: Object,
+      require: true,
+      default: function() {
+        return {}
+      }
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    'addArcivesData': {
+      handler(val) {
+        setTimeout(() => {
+          this.drawChart()
+        }, 100)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  mounted() {
+    this.drawChart()
+    window.addEventListener('resize', this.__resizeHandler)
+  },
+  methods: {
+    drawChart() {
+      const chartDom = document.getElementById('main')
+      this.chart = echarts.init(chartDom)
+      let option = null
+      option = {
+        grid: { // 边距
+          left: '2%',
+          right: '2%',
+          bottom: '5%',
+          top: '8%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#339cff'
+            }
+          }
+          // formatter: function(params) {
+          //   var res = "<div style='width:100%;height:24px;margin-bottom:5px;padding:0 12px;line-height:24px;'><p>" + echarts.format.formatTime('yyyy年M月', new Date(params[0].name)) + ' </p></div>'
+          //   for (var i = 0; i < params.length; i++) {
+          //     res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
+          //               <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[params[i].color]};"></span>
+          //               ${params[i].seriesName}
+          //               ${params[i].data}
+          //             </div>`
+          //   }
+          //   return res
+          // }
+        },
+        xAxis: {
+          type: 'category',
+          // data: this.addArcivesData.addArcivesMonth,
+          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06'],
+          axisLine: { // 轴线的颜色以及宽度
+            lineStyle: {
+              color: 'rgba(17, 61, 114,0.5)'
+            }
+          },
+          axisTick: { show: false },
+          axisLabel: { // x轴文字的配置
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+            // formatter: function(value) {
+            //   return echarts.format.formatTime('M月', new Date(value))
+            // }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          max: 1000,
+          splitNumber: 5,
+          axisLine: { // 轴线的颜色以及宽度
+            // lineStyle: {
+            //   color: '#113D72'
+            // }
+            show: false
+          },
+          axisLabel: { // x轴文字的配置
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          axisTick: { // 刻度线隐藏
+            show: false
+          },
+          splitLine: { // 分割线配置
+            lineStyle: {
+              color: 'rgba(17, 61, 114,0.5)',
+              type: 'solid'
+            }
+          }
+        },
+        series: [
+          {
+            name: '新增档案',
+            // data: this.addArcivesData.addArcivesNum,
+            data: [100, 200, 300, 500, 600, 800],
+            type: 'line',
+            areaStyle: {
+              normal: {
+                color: {
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0.1,
+                      color: 'rgba(26, 201, 255, 0.5)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.5,
+                      color: 'rgba(26, 201, 255, 0.3)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.7,
+                      color: 'rgba(26, 201, 255, 0.2)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.9,
+                      color: 'rgba(26, 201, 255, 0.1)' // 100% 处的颜色
+                    }
+                  ]
+                  // globalCoord: false // 缺省为 false
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#339CFF', // 改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(26, 201, 255,0.5)' // 改变折线颜色
+                }
+              }
+            }
+          }
+        ]
+      }
+      option && this.chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.h{
+  color: rgb(26, 201, 255);
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,27 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+// 适配flex
+import '@/common/flexible.js'
+
+// 引入全局css
+import './assets/styles/style.scss'
+import './assets/iconfont/iconfont.js'
+import './assets/fonts/fonts.css'
+
+import axios from 'axios'
+Vue.prototype.$axios = axios
+
+// 引入echart
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App)
+}).$mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,20 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const routes = [{
+  path: '/',
+  name: 'index',
+  component: () => import('../views/index.vue'),
+  meta: {
+    title: '智慧大屏'
+  }
+}]
+
+const router = new VueRouter({
+  mode: 'history',
+  routes
+})
+
+export default router
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -0,0 +1,46 @@
+export function debounce(func, wait, immediate) {
+  let timeout, args, context, timestamp, result
+
+  const later = function() {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp
+
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args)
+        if (!timeout) context = args = null
+      }
+    }
+  }
+
+  return function(...args) {
+    context = this
+    timestamp = +new Date()
+    const callNow = immediate && !timeout
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, args)
+      context = args = null
+    }
+
+    return result
+  }
+}
+
+// 获取当前日期时间
+export function getCurrentTime() {
+  const yy = new Date().getFullYear()
+  const mm = new Date().getMonth() + 1
+  const dd = new Date().getDate()
+  const hh = new Date().getHours()
+  const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
+  const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
+  const time = yy + '年' + mm + '月' + dd + '日 ' + hh + ':' + mf + ':' + ss
+  return time
+}
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -0,0 +1,46 @@
+import axios from 'axios'
+import { Message } from 'element-ui'
+
+// 创建axios实例
+const service = axios.create({
+  baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url
+  timeout: 1000 * 30, // 请求超时时间
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+// request拦截器
+service.interceptors.request.use(
+  config => {
+    // if (getToken()) {
+    //   config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    // }
+    const token = '' // 登录后生成用于识别用户身份，项目不需要直接去掉
+    config.headers['Authorization'] = token || ''
+    return config
+  },
+  error => {
+    console.error('error: ', error)
+    Promise.reject(error)
+  }
+)
+
+// response 拦截器
+service.interceptors.response.use(
+  response => {
+    const errorMsg = response.data.message
+    if (response.data.code === 200) {
+      return response.data.data
+    } else {
+      Message.error({
+        message: errorMsg,
+        duration: 5000
+      })
+    }
+  },
+  error => {
+    return Promise.reject(error)
+  }
+)
+export default service
--- a/src/utils/resizeMixins.js
+++ b/src/utils/resizeMixins.js
@ -0,0 +1,26 @@
+// 混入代码 resize-mixins.js
+import { debounce } from '@/utils/index'
+const resizeChartMethod = '$__resizeChartMethod'
+
+export default {
+  data() {
+    // 在组件内部将图表init的引用映射到chart属性上
+    return {
+      chart: null
+    }
+  },
+  created() {
+    window.addEventListener('resize', this[resizeChartMethod], false)
+  },
+  beforeDestroy() {
+    window.removeEventListener('reisze', this[resizeChartMethod])
+  },
+  methods: {
+    // 通过lodash的防抖函数来控制resize的频率
+    [resizeChartMethod]: debounce(function() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+  }
+}
--- a/src/views/accessToLibrary.vue
+++ b/src/views/accessToLibrary.vue
@ -0,0 +1,48 @@
+<template>
+  <div class="accessToLib-container">
+    <div class="accessToLib-item">
+      <span>总进馆人数</span>
+      <p>2,125,462</p>
+    </div>
+    <div class="accessToLib-item">
+      <span>月进馆人数</span>
+      <p>10,062</p>
+    </div>
+    <div class="accessToLib-item">
+      <span>今日进馆人数</span>
+      <p>2,462</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AccessToLibrary',
+  data() {
+    return {
+      timer: null
+    }
+  },
+  created() {
+    // 获取数据
+  },
+  mounted() {
+    // 每15秒获取一次
+    this.timer = setInterval(() => {
+      //
+    }, 15000)
+  },
+  beforeDestroy() {
+    // 销毁定时器
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(this.timer)
+    })
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+</style>
--- a/src/views/data.json
+++ b/src/views/data.json
@ -0,0 +1,90 @@
+{
+  "ranking":[
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定",
+      "ranking": 1
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "森林大探险",
+      "author": "卷毛老师",
+      "ranking": 2
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "家有喵星人",
+      "author": "查尔斯",
+      "ranking": 3
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "奇妙的冒险",
+      "author": "李小飞",
+      "ranking": 4
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "豆豆龙成长记",
+      "author": "卷毛老师",
+      "ranking": 5
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "奇妙的冒险",
+      "author": "李小飞",
+      "ranking": 6
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "豆豆龙成长记",
+      "author": "卷毛老师",
+      "ranking": 7
+    }
+  ],
+  "readstar":[
+    {
+      "des": "读者张山上周借阅图书30册",
+      "date": "2022-09-06",
+      "ranking": 1
+    },
+    {
+      "des": "读者张山上周借阅图书30册",
+      "date": "2022-09-06",
+      "ranking": 2
+    },
+    {
+      "des": "读者张山上周借阅图书30册",
+      "date": "2022-09-06",
+      "ranking": 3
+    },
+    {
+      "des": "读者张山上周借阅图书30册",
+      "date": "2022-09-06",
+      "ranking": 4
+    },
+    {
+      "des": "读者张山上周借阅图书30册",
+      "date": "2022-09-06",
+      "ranking": 5
+    }
+    ,
+    {
+      "des": "读者张山上周借阅图书30册",
+      "date": "2022-09-06",
+      "ranking": 6
+    },
+    {
+      "des": "读者张山上周借阅图书30册",
+      "date": "2022-09-06",
+      "ranking": 7
+    }
+    ,
+    {
+      "des": "读者张山上周借阅图书30册",
+      "date": "2022-09-06",
+      "ranking": 8
+    }
+  ]
+}
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@ -0,0 +1,36 @@
+<template>
+  <div class="header-container">
+    <div class="header-title"><h2>东西湖区图书馆</h2></div>
+    <div class="header-text header-weather">
+      <!-- 天气api: https://www.tianqi.com/plugin -->
+      <iframe id="weather" width="210" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=34&color=%23FFFFFF&icon=1&py=wuhan&site=24" />
+    </div>
+    <div class="header-text header-date">{{ nowDate }}</div>
+  </div>
+
+</template>
+
+<script>
+import { getCurrentTime } from '@/utils/index'
+export default {
+  name: 'Header',
+  data() {
+    return {
+      nowDate: ''
+    }
+  },
+  created() {
+    this.timer = setInterval(() => {
+      this.nowDate = getCurrentTime()
+    }, 1000)
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+</style>
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -0,0 +1,60 @@
+<template>
+  <div id="screen-container">
+    <Header />
+    <div class="screen-main">
+      <div class="screen-left">
+        <TotalLending />
+        <LengingRanking />
+      </div>
+      <div class="screen-middle">
+        <AccessToLibrary />
+        <div class="video-box">
+          <video width="100%" height="100%" controls loop autoplay muted>
+            <source src="https://qiniu.aiyxlib.com/1658104739000.mp4" type="video/mp4">
+          </video>
+        </div>
+        <ReadStar />
+      </div>
+      <div class="screen-right">
+        <Notice />
+        <NewBookRecommend />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from '@/views/header/index.vue'
+import TotalLending from '@/views/totalLending.vue'
+import LengingRanking from '@/views/lengingRanking.vue'
+import AccessToLibrary from '@/views/accessToLibrary.vue'
+import Notice from '@/views/notice.vue'
+import NewBookRecommend from '@/views/newBookRecommend.vue'
+import ReadStar from '@/views/readStar.vue'
+export default {
+  name: 'Home',
+  components: {
+    Header,
+    TotalLending,
+    LengingRanking,
+    AccessToLibrary,
+    ReadStar,
+    Notice,
+    NewBookRecommend
+  },
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+</style>
--- a/src/views/lengingRanking.vue
+++ b/src/views/lengingRanking.vue
@ -0,0 +1,69 @@
+<template>
+  <!-- 借阅排行榜 -->
+  <div class="screen-item lending-ranking">
+    <div class="common-title">借阅排行榜</div>
+    <div ref="lendList" class="big-module module-content">
+      <div v-for="(item,index) in rankingList" :key="index" class="book-list-item">
+        <img class="book-img" :src="item.img">
+        <div class="book-info">
+          <h4 class="title-item">{{ item.title }}</h4>
+          <p>{{ item.author }}</p>
+        </div>
+        <div class="ranking-num">
+          <svg v-if="item.ranking === 1" class="icon" aria-hidden="true">
+            <use xlink:href="#icon-a-no1" />
+          </svg>
+          <svg v-if="item.ranking === 2" class="icon" aria-hidden="true">
+            <use xlink:href="#icon-a-no21" />
+          </svg>
+          <svg v-if="item.ranking === 3" class="icon" aria-hidden="true">
+            <use xlink:href="#icon-a-no3" />
+          </svg>
+          <p>NO.{{ item.ranking }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import data from './data'
+import scrollMixins from '@/common/scrollMixins'
+
+export default {
+  name: 'LengingRanking',
+  mixins: [scrollMixins],
+  data() {
+    return {
+      rankingList: []
+    }
+  },
+  created() {
+    this.rankingList = data.ranking
+  },
+  mounted() {
+    this.dataCompleteFun()
+  },
+  destroyed() {
+    // 清理定时器
+    clearTimeout(this.pauseTimer)
+    this.pauseTimer = null
+    clearInterval(this.scrollTimer)
+    this.scrollTimer = null
+  },
+  methods: {
+    dataCompleteFun() {
+      this.scrollDom = this.$refs.lendList
+      this.interval = 50
+      this.timeout = 2000
+      this.step = 1
+      // 开启滚动
+      this.autoScroll()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+</style>
--- a/src/views/newBookRecommend.vue
+++ b/src/views/newBookRecommend.vue
@ -0,0 +1,69 @@
+<template>
+  <!-- 新书推荐 -->
+  <div class="screen-item lending-ranking">
+    <div class="common-title">新书推荐</div>
+    <div ref="newbook" class="big-module module-content">
+      <div v-for="(item,index) in rankingList" :key="index" class="book-list-item">
+        <img class="book-img" :src="item.img">
+        <div class="book-info">
+          <h4 class="title-item">{{ item.title }}</h4>
+          <p>{{ item.author }}</p>
+        </div>
+        <div class="ranking-num">
+          <svg v-if="item.ranking === 1" class="icon" aria-hidden="true">
+            <use xlink:href="#icon-a-no1" />
+          </svg>
+          <svg v-if="item.ranking === 2" class="icon" aria-hidden="true">
+            <use xlink:href="#icon-a-no21" />
+          </svg>
+          <svg v-if="item.ranking === 3" class="icon" aria-hidden="true">
+            <use xlink:href="#icon-a-no3" />
+          </svg>
+          <p>NO.{{ item.ranking }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import data from './data'
+import scrollMixins from '@/common/scrollMixins'
+
+export default {
+  name: 'NewBookRecommend',
+  mixins: [scrollMixins],
+  data() {
+    return {
+      rankingList: []
+    }
+  },
+  created() {
+    this.rankingList = data.ranking
+  },
+  mounted() {
+    this.dataCompleteFun()
+  },
+  destroyed() {
+    // 清理定时器
+    clearTimeout(this.pauseTimer)
+    this.pauseTimer = null
+    clearInterval(this.scrollTimer)
+    this.scrollTimer = null
+  },
+  methods: {
+    dataCompleteFun() {
+      this.scrollDom = this.$refs.newbook
+      this.interval = 50
+      this.timeout = 2000
+      this.step = 1
+      // 开启滚动
+      this.autoScroll()
+    }
+  }
+}
+</script>
+
+  <style lang="scss">
+  @import "~@/assets/styles/index.scss";
+  </style>
--- a/src/views/notice.vue
+++ b/src/views/notice.vue
@ -0,0 +1,52 @@
+<template>
+  <!-- 通知公告 -->
+  <div class="screen-item notice">
+    <div class="common-title">通知公告</div>
+    <div class="small-module module-content">
+      <i class="iconfont icon-tongzhi" />
+      <p ref="noticetxt">经区政府批准，区人力资源和社会保障局人事工作综合事务中心协助组织符合政府安排工作条件退役士兵安排考试。综合成绩由量化评分和笔试成绩合并计算，量化评分占总成绩的60%，笔试成绩占总成绩的40%。服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import scrollMixins from '@/common/scrollMixins'
+export default {
+  name: 'Notice',
+  mixins: [scrollMixins],
+  data() {
+    return {
+      // interval: 3000,
+      // scrollTimer: null, // 滚动定时器
+      // pauseTimer: null // 暂停定时器
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.dataCompleteFun()
+  },
+  destroyed() {
+    // 清理定时器
+    clearTimeout(this.pauseTimer)
+    this.pauseTimer = null
+    clearInterval(this.scrollTimer)
+    this.scrollTimer = null
+  },
+  methods: {
+    // 数据加载完成方法
+    dataCompleteFun() {
+      this.scrollDom = this.$refs.noticetxt
+      this.interval = 150
+      this.timeout = 5000
+      this.step = 1
+      // 开启滚动
+      this.autoScroll()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+</style>
--- a/src/views/readStar.vue
+++ b/src/views/readStar.vue
@ -0,0 +1,65 @@
+<template>
+  <!-- 新书推荐 -->
+  <div class="screen-item read-star">
+    <div class="common-title">阅读之星</div>
+    <div ref="starList" class="medium-module module-content">
+      <div v-for="(item,index) in readstarList" :key="index" :class="['readstart-item', {'star1-bg':item.ranking===1}, {'star2-bg':item.ranking===2}, {'star3-bg':item.ranking===3}]">
+        <svg v-if="item.ranking === 1" class="icon icon-star-1" aria-hidden="true">
+          <use xlink:href="#icon-a-1" />
+        </svg>
+        <svg v-else-if="item.ranking === 2" class="icon icon-star-2" aria-hidden="true">
+          <use xlink:href="#icon-a-21" />
+        </svg>
+        <svg v-else-if="item.ranking === 3" class="icon icon-star-3" aria-hidden="true">
+          <use xlink:href="#icon-a-3" />
+        </svg>
+        <span v-else class="star-num">{{ item.ranking }}</span>
+        <p class="star-info title-item">{{ item.des }}</p>
+        <p class="star-date">{{ item.date }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import scrollMixins from '@/common/scrollMixins'
+import data from './data'
+export default {
+  name: 'ReadStar',
+  mixins: [scrollMixins],
+  data() {
+    return {
+      readstarList: []
+    }
+  },
+  created() {
+    this.readstarList = data.readstar
+  },
+  mounted() {
+    this.dataCompleteFun()
+  },
+  destroyed() {
+    // 清理定时器
+    clearTimeout(this.pauseTimer)
+    this.pauseTimer = null
+    clearInterval(this.scrollTimer)
+    this.scrollTimer = null
+  },
+  methods: {
+    // 数据加载完成方法
+    dataCompleteFun() {
+      this.scrollDom = this.$refs.starList
+      this.interval = 50
+      this.timeout = 2000
+      this.step = 1
+      // 开启滚动
+      // this.autoScroll()
+    }
+
+  }
+}
+</script>
+
+  <style lang="scss">
+  @import "~@/assets/styles/index.scss";
+  </style>
--- a/src/views/totalLending.vue
+++ b/src/views/totalLending.vue
@ -0,0 +1,80 @@
+<template>
+  <!-- 总借阅量 -->
+  <div class="screen-item total-lending">
+    <div class="common-title">总借阅量</div>
+    <div class="small-module module-content">
+      <div class="chartNum">
+        <div id="TNum" class="box-items">
+          <li class="number-item"><span><i ref="numberItem" class="item">0123456789</i></span></li>
+        </div>
+      </div>
+      <div class="chart-wrapper" style="height: calc(100% - 68px);">
+        <LineChart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LineChart from '@/components/echart/lineChart'
+export default {
+  name: 'TotalLending',
+  components: {
+    LineChart
+  },
+  data() {
+    return {
+      chartNum: ['0', '0', '0', '0', '0', '0', '0', '0', '0']
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.start()
+    })
+  },
+  methods: {
+    start() {
+      var strHtml = ''
+      for (var i = 0; i < this.chartNum.length; i++) {
+        strHtml += '<li class="number-item">\n' +
+                ' <span><i class="item" ref="numberItem">0123456789</i></span>\n' +
+                ' </li>'
+      }
+      document.getElementById('TNum').innerHTML = strHtml
+      // 定时改变数字
+      const _this = this
+      setInterval(() => {
+        _this.toOrderNum('123456')
+        _this.setNumberTransform()
+      }, 1000)
+    },
+    toOrderNum(num) {
+      num = num.toString() // 数字变成字符串
+      if (num.length < 9) { // 如未满位数，添加"0"补位
+        num = '0' + num
+        this.toOrderNum(num) // 递归添加"0"补位
+      } else if (num.length === 9) { // 数中加入逗号
+        this.chartNum = num.split('') // 将其便变成数据
+      } else {
+        alert('显示异常')
+      }
+    },
+    setNumberTransform() {
+      var numberItems = document.getElementsByClassName('item')
+      // console.log(numberItems)
+      const numberArr = this.chartNum.filter(item => !isNaN(item))
+      for (var index = 0; index < numberItems.length; index++) {
+        const elem = numberItems[index]
+        elem.style.transform = 'translate(-50%, -' + numberArr[index] * 10 + '%)'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+@import "~@/assets/styles/font-some.css";
+</style>
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,61 @@
+const path = require('path')
+const resolve = dir => {
+  return path.join(__dirname, dir)
+}
+const name = '智慧大屏'
+module.exports = {
+  publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
+  outputDir: 'dist',
+  assetsDir: 'static',
+  lintOnSave: process.env.NODE_ENV === 'development',
+  productionSourceMap: false,
+  devServer: {
+    port: 3000,
+    open: true,
+    overlay: {
+      warnings: false,
+      errors: true
+    },
+    proxy: {
+      '/api': {
+        target: process.env.VUE_APP_BASE_API,
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': 'api'
+        }
+      },
+      '/auth': {
+        target: process.env.VUE_APP_BASE_API,
+        changeOrigin: true,
+        pathRewrite: {
+          '^/auth': 'auth'
+        }
+      }
+    }
+  },
+  configureWebpack: {
+    name: name,
+    resolve: {
+      alias: {
+        '@': resolve('src')
+      }
+    },
+    performance: {
+      hints: 'warning',
+      // 入口起点的最大体积
+      maxEntrypointSize: 50000000,
+      // 生成文件的最大体积
+      maxAssetSize: 30000000
+    }
+  },
+  chainWebpack: config => {
+    config.resolve
+      .alias.set('_c', resolve('src/components'))
+
+    config.plugin('html')
+      .tap(args => {
+        args[0].title = '智慧大屏'
+        return args
+      })
+  }
+}