自助借还书机

2 years ago · 17cc3f6365
81 changed files with 4238 additions and 0 deletions
--- a/selfServiceMachine/.env.development
+++ b/selfServiceMachine/.env.development
@ -0,0 +1,14 @@
+ENV = 'development'
+
+# 接口地址
+
+#内网服务地址
+#VUE_APP_BASE_API  = 'http://120.76.47.59:8080'
+#VUE_APP_WS_API = 'ws://120.76.47.59:8080'
+
+# 许镇-本地服地址
+VUE_APP_BASE_API  = 'http://192.168.99.67:8080'
+VUE_APP_WS_API = 'ws://192.168.99.67:8081'
+
+# 是否启用 babel-plugin-dynamic-import-node插件
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
--- a/selfServiceMachine/.env.production
+++ b/selfServiceMachine/.env.production
@ -0,0 +1,9 @@
+ENV = 'production'
+
+# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
+# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
+# VUE_APP_BASE_API  = 'http://192.168.99.107:7070'
+VUE_APP_BASE_API  = 'http://172.22.0.23:8080'
+# VUE_APP_BASE_API  = 'http://127.0.0.1:8080'
+# 如果接口是 http 形式， wss 需要改为 ws
+VUE_APP_WS_API = 'ws://192.168.99.107:7071'
--- a/selfServiceMachine/.eslintignore
+++ b/selfServiceMachine/.eslintignore
@ -0,0 +1,4 @@
+build/*.js
+src/assets
+public
+dist
--- a/selfServiceMachine/.eslintrc.js
+++ b/selfServiceMachine/.eslintrc.js
@ -0,0 +1,277 @@
+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/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+          normal: 'never',
+          component: 'always'
+        },
+        svg: 'always',
+        math: 'always'
+      }
+    ],
+    '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/selfServiceMachine/.gitignore
+++ b/selfServiceMachine/.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/selfServiceMachine/README.md
+++ b/selfServiceMachine/README.md
@ -0,0 +1,41 @@
+自助借还书机
+
+```bash
+# install dependency
+npm install
+
+# develop
+npm run serve
+
+# 构建生产环境
+npm run build
+
+```
+
+```bash
+## 项目结构
+├── src                        # 源代码
+│   ├── api                    # 所有请求
+│   ├── assets                 # 主题 字体等静态资源
+│   ├── router                 # 路由
+│   ├── views                  # views 所有页面
+│   │   ├── module        
+│   │   │   ├── bookDetails.vue    # 书籍详情
+│   │   │   ├── bookList.vue       # 书籍list
+│   │   │   ├── homeListItem.vue   # 首页-书籍list
+│   │   ├── authorRecommend.vue    # 作者推荐
+│   │   ├── bookRackList.vue       # 本架书架
+│   │   ├── digitalResource.vue    # 数字资源
+│   │   ├── hotBook.vue            # 热门图书
+│   │   ├── index.vue              # 首页
+│   │   ├── newBook.vue            # 新书推荐
+│   ├── App.vue                # 入口页面
+│   ├── main.js                # 入口文件 加载组件 初始化等   注意：Vue.prototype.libcode使用
+├── .env.xxx                   # 环境变量配置
+├── .eslintrc.js               # eslint 配置项
+├── .babelrc                   # babel-loader 配置
+├── .travis.yml                # 自动化CI配置
+├── vue.config.js              # vue-cli 配置
+├── postcss.config.js          # postcss 配置
+└── package.json               # package.json
+```
--- a/selfServiceMachine/babel.config.js
+++ b/selfServiceMachine/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/selfServiceMachine/package.json
+++ b/selfServiceMachine/package.json
@ -0,0 +1,56 @@
+{
+  "name": "intelligence-bookshelf",
+  "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",
+    "swiper": "^8.4.2",
+    "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-awesome-swiper": "^3.1.3",
+    "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/selfServiceMachine/public/favicon.ico
+++ b/selfServiceMachine/public/favicon.ico
--- a/selfServiceMachine/public/index.html
+++ b/selfServiceMachine/public/index.html
@ -0,0 +1,31 @@
+<!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,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script>
+      window.onload = function() {
+        document.addEventListener('touchstart', function(event) {
+          if (event.touches.length > 1) {
+            event.preventDefault()
+          }
+        },
+        { passive: false }
+        )
+        document.addEventListener('gesturestart', function(event) {
+          event.preventDefault()
+        })
+      }
+    </script>
+    <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/selfServiceMachine/src/App.vue
+++ b/selfServiceMachine/src/App.vue
@ -0,0 +1,27 @@
+<template>
+  <div id="app">
+    <keep-alive>
+      <router-view :key="key" />
+    </keep-alive>
+  </div>
+</template>
+<script>
+export default {
+  computed: {
+    key() {
+      return this.$route.path + Math.random()
+    }
+  }
+}
+</script>
+<style lang="scss">
+body {
+  margin: 0;
+  padding: 0;
+}
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style>
--- a/selfServiceMachine/src/api/bookshelf.js
+++ b/selfServiceMachine/src/api/bookshelf.js
@ -0,0 +1,96 @@
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 数字资源
+export function initNumberResoures(params) {
+  return request({
+    url: '/dxhtsg/initNumberResoures',
+    method: 'get',
+    params: params
+  })
+}
+
+// 新书推荐
+export function FetchNewBookRecommend(params) {
+  return request({
+    url: '/dxhtsg/newBookRecommend',
+    method: 'get',
+    params: params
+  })
+}
+
+// 热门图书
+export function FetchHotBookRecommend(params) {
+  return request({
+    url: '/dxhtsg/hotBookRecommend',
+    method: 'get',
+    params: params
+  })
+}
+
+// 通过isbn获取图书封面
+export function FetchCoverByISBN(params) {
+  return request({
+    url: '/dxhtsg/getCoverByISBN',
+    method: 'get',
+    params: params
+    // responseType: 'blob'
+  })
+}
+
+// 图书详情
+export function getBookDetailsByISBN(params) {
+  return request({
+    url: '/dxhtsg/getBookDetailsByISBN',
+    method: 'get',
+    params: params
+  })
+}
+
+// 获取首页书架基本信息
+export function initSmartBookshelf(params) {
+  return request({
+    url: '/dxhtsg/initSmartBookshelf',
+    method: 'get',
+    params
+  })
+}
+
+// 智能书架-书架详情
+export function FetchInitBookshelfDetails(params) {
+  return request({
+    url: '/dxhtsg/initBookshelfDetails',
+    method: 'get',
+    params
+  })
+}
+
+// 作者推荐
+export function FetchProposeAuthor(params) {
+  return request({
+    url: '/dxhtsg/proposeAuthor',
+    method: 'get',
+    params: params
+  })
+}
+
+// 作者推荐
+export function initBookshelfDetails(params) {
+  return request({
+    url: '/dxhtsg/initBookshelfDetails',
+    method: 'get',
+    params
+  })
+}
+
+export default {
+  FetchNewBookRecommend,
+  FetchCoverByISBN,
+  initNumberResoures,
+  getBookDetailsByISBN,
+  initSmartBookshelf,
+  FetchInitBookshelfDetails,
+  FetchHotBookRecommend,
+  FetchProposeAuthor,
+  initBookshelfDetails
+}
--- a/selfServiceMachine/src/assets/fonts/HuXiaoBoNanShenTi.otf
+++ b/selfServiceMachine/src/assets/fonts/HuXiaoBoNanShenTi.otf
--- a/selfServiceMachine/src/assets/fonts/YouSheBiaoTiHei.ttf
+++ b/selfServiceMachine/src/assets/fonts/YouSheBiaoTiHei.ttf
--- a/selfServiceMachine/src/assets/fonts/ZhenyanGB.ttf
+++ b/selfServiceMachine/src/assets/fonts/ZhenyanGB.ttf
--- a/selfServiceMachine/src/assets/fonts/fonts.css
+++ b/selfServiceMachine/src/assets/fonts/fonts.css
@ -0,0 +1,20 @@
+@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;
+}
+
+@font-face {
+  font-family: "HuXiaoBoNanShenTi";
+  src: url('HuXiaoBoNanShenTi.otf');
+  font-weight: normal;
+  font-style: normal;
+}
--- a/selfServiceMachine/src/assets/iconfont/demo.css
+++ b/selfServiceMachine/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/selfServiceMachine/src/assets/iconfont/demo_index.html
+++ b/selfServiceMachine/src/assets/iconfont/demo_index.html
@ -0,0 +1,557 @@
+<!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">&#xe639;</span>
+                <div class="name">位置</div>
+                <div class="code-name">&amp;#xe639;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe635;</span>
+                <div class="name">右滑</div>
+                <div class="code-name">&amp;#xe635;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe638;</span>
+                <div class="name">左滑</div>
+                <div class="code-name">&amp;#xe638;</div>
+              </li>
+          
+            <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=1664428017869') format('woff2'),
+       url('iconfont.woff?t=1664428017869') format('woff'),
+       url('iconfont.ttf?t=1664428017869') format('truetype'),
+       url('iconfont.svg?t=1664428017869#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-weizhi"></span>
+            <div class="name">
+              位置
+            </div>
+            <div class="code-name">.icon-weizhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-youhua"></span>
+            <div class="name">
+              右滑
+            </div>
+            <div class="code-name">.icon-youhua
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zuohua"></span>
+            <div class="name">
+              左滑
+            </div>
+            <div class="code-name">.icon-zuohua
+            </div>
+          </li>
+          
+          <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-weizhi"></use>
+                </svg>
+                <div class="name">位置</div>
+                <div class="code-name">#icon-weizhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-youhua"></use>
+                </svg>
+                <div class="name">右滑</div>
+                <div class="code-name">#icon-youhua</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zuohua"></use>
+                </svg>
+                <div class="name">左滑</div>
+                <div class="code-name">#icon-zuohua</div>
+            </li>
+          
+            <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/selfServiceMachine/src/assets/iconfont/iconfont.css
+++ b/selfServiceMachine/src/assets/iconfont/iconfont.css
@ -0,0 +1,80 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3646564 */
+  src: url('iconfont.woff2?t=1664428017869') format('woff2'),
+       url('iconfont.woff?t=1664428017869') format('woff'),
+       url('iconfont.ttf?t=1664428017869') format('truetype'),
+       url('iconfont.svg?t=1664428017869#iconfont') format('svg');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-weizhi:before {
+  content: "\e639";
+}
+
+.icon-youhua:before {
+  content: "\e635";
+}
+
+.icon-zuohua:before {
+  content: "\e638";
+}
+
+.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/selfServiceMachine/src/assets/iconfont/iconfont.js
+++ b/selfServiceMachine/src/assets/iconfont/iconfont.js
--- a/selfServiceMachine/src/assets/iconfont/iconfont.json
+++ b/selfServiceMachine/src/assets/iconfont/iconfont.json
@ -0,0 +1,121 @@
+{
+  "id": "3646564",
+  "name": "东西湖图书馆",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "32102019",
+      "name": "位置",
+      "font_class": "weizhi",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
+    {
+      "icon_id": "31966175",
+      "name": "右滑",
+      "font_class": "youhua",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    },
+    {
+      "icon_id": "31966176",
+      "name": "左滑",
+      "font_class": "zuohua",
+      "unicode": "e638",
+      "unicode_decimal": 58936
+    },
+    {
+      "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/selfServiceMachine/src/assets/iconfont/iconfont.svg
+++ b/selfServiceMachine/src/assets/iconfont/iconfont.svg
--- a/selfServiceMachine/src/assets/iconfont/iconfont.ttf
+++ b/selfServiceMachine/src/assets/iconfont/iconfont.ttf
--- a/selfServiceMachine/src/assets/iconfont/iconfont.woff
+++ b/selfServiceMachine/src/assets/iconfont/iconfont.woff
--- a/selfServiceMachine/src/assets/iconfont/iconfont.woff2
+++ b/selfServiceMachine/src/assets/iconfont/iconfont.woff2
--- a/selfServiceMachine/src/assets/images/code.png
+++ b/selfServiceMachine/src/assets/images/code.png
--- a/selfServiceMachine/src/assets/images/default-img.png
+++ b/selfServiceMachine/src/assets/images/default-img.png
--- a/selfServiceMachine/src/assets/images/home/bg.png
+++ b/selfServiceMachine/src/assets/images/home/bg.png
--- a/selfServiceMachine/src/assets/images/home/nav1.png
+++ b/selfServiceMachine/src/assets/images/home/nav1.png
--- a/selfServiceMachine/src/assets/images/home/nav2.png
+++ b/selfServiceMachine/src/assets/images/home/nav2.png
--- a/selfServiceMachine/src/assets/images/home/nav3.png
+++ b/selfServiceMachine/src/assets/images/home/nav3.png
--- a/selfServiceMachine/src/assets/images/home/nav4.png
+++ b/selfServiceMachine/src/assets/images/home/nav4.png
--- a/selfServiceMachine/src/assets/images/home/nav5.png
+++ b/selfServiceMachine/src/assets/images/home/nav5.png
--- a/selfServiceMachine/src/assets/images/home/top.png
+++ b/selfServiceMachine/src/assets/images/home/top.png
--- a/selfServiceMachine/src/assets/images/home/type-bg.png
+++ b/selfServiceMachine/src/assets/images/home/type-bg.png
--- a/selfServiceMachine/src/assets/images/list/1.png
+++ b/selfServiceMachine/src/assets/images/list/1.png
--- a/selfServiceMachine/src/assets/images/list/10.png
+++ b/selfServiceMachine/src/assets/images/list/10.png
--- a/selfServiceMachine/src/assets/images/list/11.png
+++ b/selfServiceMachine/src/assets/images/list/11.png
--- a/selfServiceMachine/src/assets/images/list/12.png
+++ b/selfServiceMachine/src/assets/images/list/12.png
--- a/selfServiceMachine/src/assets/images/list/13.png
+++ b/selfServiceMachine/src/assets/images/list/13.png
--- a/selfServiceMachine/src/assets/images/list/14.png
+++ b/selfServiceMachine/src/assets/images/list/14.png
--- a/selfServiceMachine/src/assets/images/list/15.png
+++ b/selfServiceMachine/src/assets/images/list/15.png
--- a/selfServiceMachine/src/assets/images/list/2.png
+++ b/selfServiceMachine/src/assets/images/list/2.png
--- a/selfServiceMachine/src/assets/images/list/3.png
+++ b/selfServiceMachine/src/assets/images/list/3.png
--- a/selfServiceMachine/src/assets/images/list/4.png
+++ b/selfServiceMachine/src/assets/images/list/4.png
--- a/selfServiceMachine/src/assets/images/list/5.png
+++ b/selfServiceMachine/src/assets/images/list/5.png
--- a/selfServiceMachine/src/assets/images/list/6.png
+++ b/selfServiceMachine/src/assets/images/list/6.png
--- a/selfServiceMachine/src/assets/images/list/7.png
+++ b/selfServiceMachine/src/assets/images/list/7.png
--- a/selfServiceMachine/src/assets/images/list/8.png
+++ b/selfServiceMachine/src/assets/images/list/8.png
--- a/selfServiceMachine/src/assets/images/list/9.png
+++ b/selfServiceMachine/src/assets/images/list/9.png
--- a/selfServiceMachine/src/assets/images/list/left-btn.png
+++ b/selfServiceMachine/src/assets/images/list/left-btn.png
--- a/selfServiceMachine/src/assets/images/list/list-rack.png
+++ b/selfServiceMachine/src/assets/images/list/list-rack.png
--- a/selfServiceMachine/src/assets/images/list/list-title.png
+++ b/selfServiceMachine/src/assets/images/list/list-title.png
--- a/selfServiceMachine/src/assets/images/list/right-btn.png
+++ b/selfServiceMachine/src/assets/images/list/right-btn.png
--- a/selfServiceMachine/src/assets/images/list/top.png
+++ b/selfServiceMachine/src/assets/images/list/top.png
--- a/selfServiceMachine/src/assets/images/local-bg.png
+++ b/selfServiceMachine/src/assets/images/local-bg.png
--- a/selfServiceMachine/src/assets/images/online.png
+++ b/selfServiceMachine/src/assets/images/online.png
--- a/selfServiceMachine/src/assets/logo.png
+++ b/selfServiceMachine/src/assets/logo.png
--- a/selfServiceMachine/src/assets/styles/index.scss
+++ b/selfServiceMachine/src/assets/styles/index.scss
@ -0,0 +1,436 @@
+#bookshelf{
+  width: 100%;
+  height: 100vh;
+  font-size: 30px;
+  // background: url('~@/assets/images/home/bg.png') no-repeat left top;
+  // background-size: cover;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+//c-s壳占位
+.top-bg{
+  height: 60px;
+  background-color: #3F92F6;
+}
+
+
+.online-active{
+  position: relative;
+  width: 100%;
+  height: calc(1920px - 60px);
+  background: url('~@/assets/images/online.png') no-repeat left top;
+  background-size: 100% 100%;
+  img{
+    display: block;
+    position: absolute;
+    left: 134px;
+    bottom: 24px;
+    width: 180px;
+    height: 180px;
+  }
+}
+
+
+
+
+
+
+
+
+
+// 首页
+.bookshelf-header{
+  position: relative;
+  height: 254px;
+  text-align: center;
+  background: url('~@/assets/images/home/top.png') no-repeat left top;
+  background-size: cover;
+  z-index: 9;
+  h2{
+    height: 118px;
+    line-height: 118px;
+    font-family: "YouSheBiaoTiHei";
+    font-weight: normal;
+    font-size: 60px;
+  }
+  .shelf-num{
+    display: block;
+    position: absolute;
+    top: 30px;
+    right: 40px;
+    width: 180px;
+    height: 58px;
+    line-height: 60px;
+    background: linear-gradient(90deg, #ACDAFF 0%, #9BCEFF 100%);
+    border-radius: 29px;
+  }
+}
+
+.book-category{
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  justify-items: center;
+  text-align: center;
+  height: 198px;
+  line-height: 168px;
+  padding: 0 120px;
+  margin-top: -132px;
+  background: url('~@/assets/images/home/type-bg.png') no-repeat center center;
+  background-size: cover;
+  z-index: 99;
+  p{
+    flex: 1;
+    font-size: 60px;
+    letter-spacing: 6px;
+  }
+}
+
+.book-nav{
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+  padding: 0 40px;
+  margin-bottom: 30px;
+  li{
+    flex: 1;
+    font-size: 36px;
+    img{
+      display: inline-block;
+      margin-bottom: 20px;
+    }
+  }
+}
+
+// 本架图书
+.book-rack{
+  height: 770px;
+  margin: 0 40px;
+  padding: 0 40px 40px 40px;
+  background-color: #fff;
+  border-radius: 30px;
+  box-shadow: 0px 0px 20px 1px #B8D3FF;
+}
+.list-top{
+  display: flex;
+  justify-content: space-between;
+  justify-items: center;
+  align-items: center;
+  padding: 30px 0 25px 0;
+  font-size: 36px;
+  .list-top-title{
+    display: flex;
+    justify-content: flex-start;
+    font-size: 40px;
+    line-height: 50px;
+    .icon{
+      width: 50px;
+      height: 50px;
+      margin-right: 20px;
+    }
+  }
+  .more{
+    .iconfont{
+      font-size: 30px;
+      margin-left: 20px;
+    }
+  }
+}
+
+// 本架图书list
+.rack-list{
+  display: flex;
+  justify-content: space-between;
+}
+
+.list-item{
+  border: 1px solid #A2CCFF;
+  border-radius: 4px;
+  overflow: hidden;
+  .book-info{
+    position: relative;
+  }
+  .book-title{
+    font-weight: normal;
+    line-height: 40px;
+    margin-bottom: 10px;
+  }
+  .book-author{
+    font-size: 24px;
+  }
+  .book-num{
+    position: absolute;
+    bottom: 20px;
+    display: flex;
+    justify-content: flex-start;
+    font-size: 20px;
+    color: #999;
+    .icon{
+      width: 20px;
+      height: 22px;
+      margin-right: 10px;
+    }
+  }
+}
+
+.list-big{
+  .list-item{
+    width: 435px;
+    height: 625px;
+    margin-right: 45px;
+    .book-img{
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 520px;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+    img{
+      display: block;
+      width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+    }
+    .book-info{
+      padding: 12px 0 0 44px;
+    }
+    .book-num{
+      right: 16px;
+      bottom: 0;
+    }
+    
+  }
+}
+.other-list{
+  .book-img{
+    width: 244px;
+  }
+  .list-middle .list-item .book-info{
+    flex: 1;
+  }
+}
+
+
+.list-middle{
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 625px;
+  .list-item{
+    display: flex;
+    height: calc(100%/2 - 20px);
+    justify-content: flex-start;
+    .book-img{
+      display: flex;
+      align-items: center;
+      width: 244px;
+      height: 100%;
+      margin-right: 20px;
+      overflow: hidden;
+    }
+    img{
+      display: block;
+      width: 100%;
+      max-height: calc(100%);
+      object-fit: contain;
+    }
+    .book-info{
+      padding: 20px 10px 0 0;
+    }
+    .book-num{
+      left: 0;
+      bottom: 12px;
+    }
+  }
+}
+
+// 新书推荐
+.new-recommend{
+  height: 448px;
+  margin: 20px 40px 0 40px;
+}
+
+.list-small{
+  display: flex;
+  justify-items: center;
+  margin-left: -40px;
+  .list-item{
+    width: 200px;
+    border: none;
+    margin-left: 40px;
+    .book-img{
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 240px;
+      margin-bottom: 10px;
+      overflow: hidden;
+    }
+    img{
+      display: block;
+      width: 100%;
+      max-height: calc(100%);
+      object-fit: contain;
+    }
+    .book-title{
+      margin-bottom: 0;
+    }
+  }
+}
+
+//本架图书页面
+.rack-box{
+  padding: 30px 0 0 0;
+  width: 100%;
+  .rack-item{
+    position: relative;
+    margin-bottom: 30px;
+    overflow: hidden;
+    .rack-box-list{
+      // display: flex;
+      // justify-content: space-between;
+      height: 314px;
+      padding: 0 40px;
+      width: 1080px;
+      background: url('~@/assets/images/list/list-rack.png') no-repeat -31px 205px;
+      overflow: hidden;
+      // overflow-x: auto;
+      white-space: nowrap;
+      .list-item{
+        margin-right: 1.7px;
+        display: inline-block;
+        border: none;
+        height: 254px;
+        width: 65px;
+        background-size: 93px 266px;
+        position: relative;
+        .box-txt{
+          position: absolute;
+          top: 12%;
+          left: 50%;
+          transform: translateX(-40%);
+          .book-name,.book-writer{
+            writing-mode:vertical-rl;
+            height: 235px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+          .book-name{
+            font-size: 20px;      
+          }
+          .book-writer{
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+  .rack-floor{
+    position: absolute;
+    left: 0;
+    bottom: 2px;
+    height: 50px;
+    width: 100%;
+    display: flex;
+    color: #fff;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 40px;
+    z-index: 999;
+    .icon-l,.icon-r{
+      font-size: 24px;
+    }
+  }
+}
+
+.bookshelf-header .icon-l{
+  color: #fff;
+  font-size: 40px;
+  position: absolute;
+  left: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.bookshelf-header .rack-direct{
+    position: absolute;
+    top: 30px;
+    right: 40px;
+    width: 220px;
+    height: 60px;
+    line-height: 60px;
+    // background: linear-gradient(90deg, #ACDAFF 0%, #9BCEFF 100%);
+    background: #fff;
+    border-radius: 30px;
+    display: flex;
+    padding: 6px;
+    span{
+      flex: 1;
+      text-align: center;
+      line-height: 48px;
+      &.rack-direct-active{
+      background: linear-gradient(267deg, #7285FB 0%, #7285FB 9%, #4377FE 55%, #2487FF 100%);
+      z-index: 1; 
+      border-radius: 24px;  
+      color: #fff;
+      }
+    }
+}
+
+
+.rack-box-list .list-item{
+  &:nth-child(15n+1){
+    background: url('~@/assets/images/list/1.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+2){
+    background: url('~@/assets/images/list/2.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+3){
+    background: url('~@/assets/images/list/3.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+4){
+    background: url('~@/assets/images/list/4.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+5){
+    background: url('~@/assets/images/list/5.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+6){
+    background: url('~@/assets/images/list/6.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+7){
+    background: url('~@/assets/images/list/7.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+8){
+    background: url('~@/assets/images/list/8.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+9){
+    background: url('~@/assets/images/list/9.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+10){
+    background: url('~@/assets/images/list/10.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+11){
+    background: url('~@/assets/images/list/11.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+12){
+    background: url('~@/assets/images/list/12.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+13){
+    background: url('~@/assets/images/list/13.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+14){
+    background: url('~@/assets/images/list/14.png') no-repeat -15px -13px;
+  }
+  &:nth-child(15n+15){
+    background: url('~@/assets/images/list/15.png') no-repeat -15px -13px;
+  }
+}
+
+
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
--- a/selfServiceMachine/src/assets/styles/style.scss
+++ b/selfServiceMachine/src/assets/styles/style.scss
@ -0,0 +1,86 @@
+@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;
+  color: #333;
+}
+
+a {
+  color: #333;
+  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;
+}
+
+.rotate:before {
+  display: inline-block;
+  transform: rotate(180deg);
+}
--- a/selfServiceMachine/src/common/flexible.js
+++ b/selfServiceMachine/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就是54px
+    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/selfServiceMachine/src/main.js
+++ b/selfServiceMachine/src/main.js
@ -0,0 +1,35 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+// element-ui
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(ElementUI)
+// 适配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
+
+// 馆代码 1201为东西湖馆代码 / 本地测试用FTZN
+// Vue.prototype.libcode = 'FTZN'
+Vue.prototype.libcode = '1201'
+
+// 引入echart
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App)
+}).$mount('#app')
--- a/selfServiceMachine/src/router/index.js
+++ b/selfServiceMachine/src/router/index.js
@ -0,0 +1,70 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'onlineBookSelection',
+    component: () => import('@/views/onlineBookSelection.vue'),
+    meta: {
+      title: '在线选书'
+    }
+  },
+  {
+    path: '/bookRecommend',
+    name: 'bookRecommend',
+    component: () => import('@/views/bookRecommend.vue'),
+    meta: {
+      title: '书单推荐'
+    }
+  }
+  // {
+  //   path: '/CurrentRackBook',
+  //   name: 'CurrentRackBook',
+  //   component: () => import('@/views/bookRackList.vue'),
+  //   meta: {
+  //     title: '本架图书'
+  //   }
+  // },
+  // {
+  //   path: '/NewBook',
+  //   name: 'NewBook',
+  //   component: () => import('@/views/newBook.vue'),
+  //   meta: {
+  //     title: '新书推荐'
+  //   }
+  // },
+  // {
+  //   path: '/HotBook',
+  //   name: 'HotBook',
+  //   component: () => import('@/views/hotBook.vue'),
+  //   meta: {
+  //     title: '热门图书'
+  //   }
+  // },
+  // {
+  //   path: '/AuthorRecommend',
+  //   name: 'AuthorRecommend',
+  //   component: () => import('@/views/authorRecommend.vue'),
+  //   meta: {
+  //     title: '作者推荐'
+  //   }
+  // },
+  // {
+  //   path: '/DigitalResource',
+  //   name: 'DigitalResource',
+  //   component: () => import('@/views/digitalResource.vue'),
+  //   meta: {
+  //     title: '数字资源'
+  //   }
+  // }
+]
+
+const router = new VueRouter({
+  mode: 'hash',
+  routes
+})
+
+export default router
--- a/selfServiceMachine/src/store/index.js
+++ b/selfServiceMachine/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/selfServiceMachine/src/utils/index.js
+++ b/selfServiceMachine/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/selfServiceMachine/src/utils/request.js
+++ b/selfServiceMachine/src/utils/request.js
@ -0,0 +1,53 @@
+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.errMsg
+    if (response.status === 200) {
+      if (response.data instanceof Blob) {
+        return response.data
+      } else if (response.data.data) {
+        return response.data.data
+      } else {
+        return response.data
+      }
+    } else {
+      Message.error({
+        message: errorMsg,
+        duration: 5000
+      })
+      Promise.reject()
+    }
+  },
+  error => {
+    return Promise.reject(error)
+  }
+)
+export default service
--- a/selfServiceMachine/src/utils/resizeMixins.js
+++ b/selfServiceMachine/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/selfServiceMachine/src/views/authorRecommend.vue
+++ b/selfServiceMachine/src/views/authorRecommend.vue
@ -0,0 +1,94 @@
+<template>
+  <div id="bookshelf">
+    <div class="bookshelf-header" style="height:120px">
+      <!-- <router-link to="/">
+        <span class="icon iconfont icon-l">&#xe631;</span>
+      </router-link> -->
+      <span class="icon iconfont icon-l" @click="goBack()">&#xe631;</span>
+      <h2>作者推荐</h2>
+    </div>
+    <div class="main">
+      <div v-for="(item,index) in authorList" :key="index" class="book-rack">
+        <span class="author-index">{{ index+1 }}</span>
+        <div class="author-brief">
+          <h3>{{ item.paAuthor }}</h3>
+          <p>{{ item.paExplain }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { FetchProposeAuthor } from '@/api/bookshelf'
+
+export default {
+  name: 'AuthorRecommend',
+  components: {
+  },
+  data() {
+    return {
+      authorList: []
+    }
+  },
+  created() {
+    this.getAuthor()
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1)
+    },
+    getAuthor() {
+      const params = {
+        libcode: this.libcode,
+        pageNo: 1,
+        pageSize: 22
+      }
+      FetchProposeAuthor(params).then(res => {
+        this.authorList = res.proposeAuthorList
+      }).catch(() => {
+        this.$message.error('接口错误')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+.main{
+  padding-top: 40px;
+  height: calc(100vh - 210px);
+  overflow: hidden;
+  overflow-y:auto ;
+  .book-rack{
+    height: 387px;
+    margin-bottom: 40px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    color: #333;
+    .author-index{
+      width: 120px;
+      text-align: center;
+    }
+    .author-brief{
+      flex: 1;
+      padding: 20px 50px 20px 0;
+      h3{
+        font-size: 40px;
+        margin-bottom: 20px;
+      }
+      p{
+        font-size: 30px;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+  }
+}
+</style>
--- a/selfServiceMachine/src/views/bookRackList.vue
+++ b/selfServiceMachine/src/views/bookRackList.vue
@ -0,0 +1,178 @@
+<template>
+  <div id="bookshelf">
+    <div class="bookshelf-header" style="height:120px">
+      <!-- <router-link to="/">
+        <span class="icon iconfont icon-l">&#xe631;</span>
+      </router-link> -->
+      <span class="icon iconfont icon-l" @click="goBack()">&#xe631;</span>
+      <h2>本架图书</h2>
+      <div class="rack-direct">
+        <span :class="classnameL" @click="handleDirect(-1)">左</span>
+        <span :class="classnameR" @click="handleDirect(1)">右</span>
+      </div>
+    </div>
+    <div v-loading="loading" class="rack-box">
+      <div v-for="(item, index) in listData" :key="index" class="rack-item">
+        <div :class="['swiper'+index,'rack-box-list']">
+          <div class="swiper-wrapper">
+            <div v-for="eitem in bookList[item]" :key="eitem.id" class="list-item swiper-slide" @click="handleDetails(eitem)">
+              <div class="box-txt">
+                <span class="book-name">{{ eitem.bookName }}</span>
+                <span class="book-writer">{{ eitem.bookAuthor }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="rack-floor">
+          <span :class="['icon','iconfont','icon-l'+index]" @click="handlePage(-1)">&#xe631;</span>
+          <p><span style="margin-right:25px">第{{ index+1 }}层</span><span>(共{{ bookList[item]?bookList[item].length:0 }}本)</span></p>
+          <span :class="['icon','iconfont','icon-r'+index]" @click="handlePage(1)">&#xe62f;</span>
+        </div>
+      </div>
+    </div>
+    <BookDetails ref="detailDom" />
+  </div>
+</template>
+
+<script>
+import { initBookshelfDetails, getBookDetailsByISBN } from '@/api/bookshelf'
+import BookDetails from './module/bookDetails.vue'
+import { Swiper } from 'vue-awesome-swiper'
+import 'swiper/swiper-bundle.css'
+
+export default {
+  name: 'CurrentRackBook',
+  components: {
+    BookDetails
+  },
+  data() {
+    return {
+      loading: false,
+      listData: [],
+      bookList: {},
+      classnameL: 'rack-direct-active',
+      classnameR: null
+    }
+  },
+  created() {
+    this.initBookshelfDetails(-1)
+  },
+  mounted() {
+  },
+  methods: {
+    initSwiper() {
+      this.$nextTick(() => {
+        for (const key in this.bookList) {
+          this.bookList[key].forEach((el, index) => {
+            new Swiper('.swiper' + index, {
+              slidesPerView: 'auto',
+              slidesPerGroup: 15,
+              observer: true,
+              navigation: {
+                nextEl: '.icon-r' + index,
+                prevEl: '.icon-l' + index
+              }
+            })
+          })
+        }
+      })
+    },
+    // 左右架切换之后，初始化swiper位置
+    setSwiperInit() {
+      setTimeout(() => {
+        this.listData.forEach((item, index) => {
+          document.getElementsByClassName('swiper-wrapper')[index].style.transform = 'translate3d(0px, 0px, 0px)'
+        })
+      }, 50)
+    },
+    handleDetails(itemData) {
+      const params = {
+        isbn: itemData.isbn.replace(/\-/g, '')
+      }
+      getBookDetailsByISBN(params).then(res => {
+        this.$refs.detailDom.dialogVisible = true
+        if (res) {
+          this.$refs.detailDom.bookData = res
+        } else {
+          this.$refs.detailDom.bookData = {
+            srcUrl: itemData.bookAuthor,
+            bookName: itemData.bookName,
+            bookAuthor: itemData.bookAuthor ? itemData.bookAuthor : '暂无信息',
+            gist: '暂无简介',
+            Publish: '暂无信息',
+            places: [
+              { shelfName: '' }
+            ]
+          }
+        }
+      })
+    },
+    // 翻页
+    handlePage(page) {
+      if (page === 1) {
+        // 下一页
+      } else {
+        // 上一页
+      }
+    },
+    // 控制左右
+    handleDirect(n) {
+      if (n === -1) { // 左
+        this.classnameR = null
+        this.classnameL = 'rack-direct-active'
+      } else { // 右
+        this.classnameL = null
+        this.classnameR = 'rack-direct-active'
+      }
+      this.initBookshelfDetails(n)
+    },
+    goBack() {
+      this.$router.go(-1)
+    },
+    initBookshelfDetails(n) {
+      this.loading = true
+      const params = {}
+      if (n === -1) { // 左
+        params.shelfNo = this.$route.query.leftShelfNo
+      } else { // 右
+        params.shelfNo = this.$route.query.rightShelfNo
+      }
+      initBookshelfDetails(params).then((res) => {
+        console.log(this.listData)
+        // if (res.shelfs.length === 0) {
+        //   res.shelfs.push('firstShelf', 'secondShelf', 'thirdShelf', 'fourthShelf', 'fivethShelf')
+        //   for (let index = 0; index < res.shelfs.length; index++) {
+        //     const shelfNo = res.shelfs[index]
+        //     res.shelfBook[shelfNo] = []
+        //   }
+        // }
+        this.listData.splice(0, this.listData.length, ...res.shelfAll)
+        if (res.shelfs.length !== 0) {
+          for (let index = 0; index < res.shelfs.length; index++) {
+            const shelfNo = res.shelfs[index]
+            this.$set(this.bookList, shelfNo, res.shelfBook[shelfNo])
+          }
+        }
+        if (this.listData.length > 0) {
+          this.initSwiper()
+          this.setSwiperInit()
+        }
+        setTimeout(() => {
+          this.loading = false
+        }, 1000)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+.swiper-container {
+  position: relative;
+  width: 100%;
+}
+.swiper-slide {
+  width: 65px !important;
+}
+</style>
--- a/selfServiceMachine/src/views/bookRecommend.vue
+++ b/selfServiceMachine/src/views/bookRecommend.vue
@ -0,0 +1,29 @@
+<template>
+  <div id="bookshelf">
+    <div class="bookshelf-header" style="height:120px">
+      <span class="icon iconfont icon-l" @click="goBack()">&#xe631;</span>
+      <h2>书单推荐</h2>
+    </div>
+  </div>
+</template>
+
+<script>
+import { bookListCrud } from './mixins/booklist.js'
+export default {
+  name: 'NewBook',
+  components: {  },
+  mixins: [bookListCrud],
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+</style>
--- a/selfServiceMachine/src/views/digitalResource.vue
+++ b/selfServiceMachine/src/views/digitalResource.vue
@ -0,0 +1,82 @@
+<template>
+  <div id="bookshelf">
+    <div class="bookshelf-header" style="height:120px">
+      <router-link to="/">
+        <span class="icon iconfont icon-l">&#xe631;</span>
+      </router-link>
+      <h2>数字资源</h2>
+    </div>
+    <div class="main">
+      <div v-for="(item,index) in srcList" :key="index" class="main-item" @click="jump(item.nrsUrl)">
+        <img :src="'data:image/png;base64,' + item.nrsImages" />
+        <div class="title" :style="{ fontSize: item.nrsTitle.length >6 ? '60px' : '80px'}">
+          {{ item.nrsTitle }}
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import { initNumberResoures } from '@/api/bookshelf'
+export default {
+  name: 'DigitalResource',
+  components: {
+  },
+  data() {
+    return {
+      srcList: []
+    }
+  },
+  created() {
+    this.getInfo()
+  },
+  methods: {
+    getInfo() {
+      initNumberResoures({ libcode: this.libcode }).then(data => {
+        this.srcList = data
+      })
+    },
+    jump(url) {
+      window.location.href = url
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+.main{
+  padding-top: 40px;
+  height: calc(100vh - 180px);
+  overflow: hidden;
+  overflow-y:auto ;
+  .main-item{
+    // height: 387px;
+    margin-bottom: 40px;
+    padding: 0 40px;
+    // overflow: hidden;
+    position: relative;
+    img{
+      width: 100%;
+    }
+    .title{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+      font-family: "HuXiaoBoNanShenTi";
+      font-size: 80px;
+      color: #333;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      line-clamp: 3;
+      -webkit-box-orient: vertical;
+      text-align: center;
+    }
+  }
+}
+</style>
--- a/selfServiceMachine/src/views/hotBook.vue
+++ b/selfServiceMachine/src/views/hotBook.vue
@ -0,0 +1,40 @@
+<template>
+  <div id="bookshelf">
+    <div class="bookshelf-header" style="height:120px">
+      <!-- <router-link to="/">
+        <span class="icon iconfont icon-l">&#xe631;</span>
+      </router-link> -->
+      <span class="icon iconfont icon-l" @click="goBack()">&#xe631;</span>
+      <h2>热门图书</h2>
+    </div>
+    <BookList />
+  </div>
+</template>
+
+<script>
+import BookList from '@/views/module/bookList.vue'
+import { bookListCrud } from './mixins/booklist.js'
+export default {
+  name: 'HotBook',
+  components: { BookList },
+  mixins: [bookListCrud],
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+
+</style>
--- a/selfServiceMachine/src/views/index.vue
+++ b/selfServiceMachine/src/views/index.vue
@ -0,0 +1,191 @@
+<template>
+  <div id="bookshelf">
+    <div class="bookshelf-header">
+      <h2>RFID智慧书架</h2>
+      <span class="shelf-num">{{ shelfName }}</span>
+    </div>
+    <!-- 本架分类 -->
+    <div class="book-category">
+      <p>{{ leftShelfMsg }}</p>
+      <p>{{ rightShelfMsg }}</p>
+    </div>
+    <!-- 智慧书架导航 -->
+    <ul class="book-nav">
+      <li @click="toSearch">
+        <img src="~@/assets/images/home/nav1.png" />
+        <p>图书检索</p>
+      </li>
+      <li @click="toPath('/HotBook?bookType=hot')">
+        <img src="~@/assets/images/home/nav2.png" />
+        <p>热门图书</p>
+      </li>
+      <li @click="toPath('/AuthorRecommend')">
+        <img src="~@/assets/images/home/nav3.png" />
+        <p>作者推荐</p>
+      </li>
+      <li @click="toPath('/DigitalResource')">
+        <img src="~@/assets/images/home/nav4.png" />
+        <p>数字资源</p>
+      </li>
+      <li @click="toRoomNav">
+        <img src="~@/assets/images/home/nav5.png" />
+        <p>场馆导航</p>
+      </li>
+    </ul>
+    <!-- 本架图书 -->
+    <div class="book-rack">
+      <div class="list-top">
+        <div class="list-top-title">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-benjiatushu" />
+          </svg>
+          <p>本架图书</p>
+        </div>
+        <span class="more" @click="toPath('/CurrentRackBook')">更多<i class="iconfont icon-zuo rotate"></i></span>
+      </div>
+      <div class="rack-list">
+        <BookListItem :list-data.sync="rackList" />
+        <div class="other-list">
+          <BookListItem :list-data.sync="otherList" :is-other-book="true" />
+        </div>
+      </div>
+    </div>
+    <!-- 新书推荐 -->
+    <div class="book-rack new-recommend">
+      <div class="list-top">
+        <div class="list-top-title">
+          <p>新书推荐</p>
+        </div>
+        <span class="more" @click="toPath('/NewBook?bookType=new')">更多<i class="iconfont icon-zuo rotate"></i></span>
+      </div>
+      <BookListItem :list-data.sync="newList" :is-new-book="true" />
+    </div>
+  </div>
+</template>
+
+<script>
+import BookListItem from '@/views/module/homeListItem.vue'
+import { FetchNewBookRecommend, FetchCoverByISBN, initSmartBookshelf } from '@/api/bookshelf'
+export default {
+  name: 'Home',
+  components: {
+    BookListItem
+  },
+  data() {
+    return {
+      shelfName: '1',
+      leftShelfMsg: '',
+      rightShelfMsg: '',
+      // leftShelfNo: '1201-03-001-A-01',
+      // rightShelfNo: '1201-03-001-B-01',
+      leftShelfNo: '',
+      rightShelfNo: '',
+      rackList: [], // 本架图书排行第一
+      otherList: [], // 本架图书排行后两本
+      newList: [] // 新书推荐
+    }
+  },
+  created() {
+    this.getNewBookList()
+    // 本架图书 + 书架借本信息
+    this.initSmartBookshelf()
+  },
+  mounted() {
+  },
+  methods: {
+    toSearch() {
+      window.location.href = 'http://219.140.69.151/opac'
+    },
+    toPath(path) {
+      if (path === '/CurrentRackBook') {
+        const query = { leftShelfNo: this.leftShelfNo, rightShelfNo: this.rightShelfNo }
+        this.$router.push({ path: path, query: query })
+      } else {
+        this.$router.push(path)
+      }
+    },
+    toRoomNav() {
+      const linkSrc = process.env.VUE_APP_BASE_API
+      window.location.href = linkSrc + '/anchoring/initVenueNavigation.do?libcode=' + this.libcode
+    },
+    // 首页 - 新书推荐
+    getNewBookList() {
+      const params = {
+        libcode: this.libcode,
+        pageNo: 1,
+        pageSize: 4
+      }
+      FetchNewBookRecommend(params).then(res => {
+        let data = []
+        data = res.newbookList
+        data.forEach(item => {
+          this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
+        })
+      }).catch(() => {
+        this.$message.error('接口错误')
+      })
+    },
+    // 根据isbn获取图书封面
+    getCoverByISBN(isbn, item) {
+      const params = {
+        isbn: isbn
+      }
+      console.log(params)
+      FetchCoverByISBN(params).then((res) => {
+        // item.cover = window.URL.createObjectURL(res)
+        if (res) {
+          item.cover = res
+        } else {
+          item.cover = ''
+        }
+        this.newList.push(item)
+      })
+    },
+    // 初始化首页书架信息
+    initSmartBookshelf() {
+      this.leftShelfNo = this.$route.query.leftShelfNo
+      this.rightShelfNo = this.$route.query.rightShelfNo
+      const params = { leftShelfNo: this.leftShelfNo, rightShelfNo: this.rightShelfNo }
+      // const _this = this
+      initSmartBookshelf(params).then((res) => {
+        this.shelfName = res.shelfName
+        this.leftShelfMsg = res.leftShelf.sortMsg
+        this.rightShelfMsg = res.rightShelf.sortMsg
+        Promise.all(this.initBookData(res.bookList.splice(0, 1))).then((res) => {
+          this.rackList = res
+          console.log('rackList', this.rackList)
+        })
+        Promise.all(this.initBookData(res.bookList.splice(-2))).then((res) => {
+          this.otherList = res
+          console.log('otherList', this.otherList)
+        })
+      })
+    },
+    // 处理数据格式
+    initBookData(bookList) {
+      return bookList.map(async(item, index) => {
+        const newItem = {
+          cover: item.srcUrl,
+          ranking: item.bookUID,
+          nbName: item.bookName,
+          isOtherBook: index !== 0,
+          nbAuthor: item.bookAuthor ? item.bookAuthor : '',
+          isNewBook: false,
+          num: item.heat ? item.heat : '0',
+          isbn: item.isbn
+        }
+        // const params = {
+        //   isbn: item.isbn
+        // }
+        // const res = await FetchCoverByISBN(params)
+        // newItem.cover = window.URL.createObjectURL(res)
+        return newItem
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+</style>
--- a/selfServiceMachine/src/views/mixins/booklist.js
+++ b/selfServiceMachine/src/views/mixins/booklist.js
@ -0,0 +1,103 @@
+import { FetchHotBookRecommend, FetchNewBookRecommend, FetchCoverByISBN, getBookDetailsByISBN } from '@/api/bookshelf'
+export const bookListCrud = {
+  // 组件共用属性
+  data() {
+    return {
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
+      bookData: [],
+      page: 1,
+      pageSize: 13,
+      pageCount: 1,
+      bookLoading: false
+    }
+  },
+  computed: {
+    bookList() {
+      const arr = this.bookData.slice(1)
+      return arr
+    }
+  },
+  // 组件共用方法
+  methods: {
+    // 获取热门/新书图书list
+    getBookData() {
+      this.bookLoading = true
+      const bookType = this.$route.query.bookType
+      const params = {
+        libcode: this.libcode,
+        pageNo: this.page,
+        pageSize: this.pageSize
+      }
+      if (bookType === 'hot') {
+        FetchHotBookRecommend(params).then(res => {
+          this.pageCount = res.page.totalPages
+          res.hotbookList.forEach(item => {
+            this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
+          })
+        }).catch(() => {
+          this.$message.error('接口错误')
+        })
+      } else {
+        FetchNewBookRecommend(params).then(res => {
+          res.newbookList.forEach(item => {
+            this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
+          })
+        }).catch(() => {
+          this.$message.error('接口错误')
+        })
+      }
+    },
+    // 根据isbn查找封面
+    getCoverByISBN(isbn, item) {
+      const params = {
+        isbn: isbn
+      }
+      FetchCoverByISBN(params).then((res) => {
+        // item.cover = window.URL.createObjectURL(res)
+        if (res) {
+          item.cover = res
+        } else {
+          item.cover = ''
+        }
+        this.bookData.push(item)
+        this.bookLoading = false
+      })
+    },
+    // 滚动加载
+    lazyLoading(e) {
+      const scrollTop = e.target.scrollTop
+      const windowHeight = e.target.clientHeight
+      const scrollHeight = e.target.scrollHeight
+      // 滚动条到底部
+      if (scrollTop + windowHeight === scrollHeight) {
+        this.bookLoading = true
+        this.page++
+        if (this.page > this.pageCount) {
+          this.bookLoading = false
+          this.$message.success('暂无更多数据~')
+          return
+        }
+        this.getBookData()
+      }
+    },
+    // 点击查看详情
+    handleDetails(index) {
+      const params = {
+        isbn: this.bookData[index].isbn.replace(/\-/g, '')
+      }
+      getBookDetailsByISBN(params).then(res => {
+        if (res) {
+          this.$refs.detailDom.bookData = res
+          this.$refs.detailDom.dialogVisible = true
+        } else {
+          this.$message.error('暂无图书内容~')
+        }
+      }).catch(() => {
+        this.$message.error('接口错误')
+      })
+    }
+  },
+  // 组件挂载时的共用方法
+  mounted() {
+  }
+}
--- a/selfServiceMachine/src/views/module/bookDetails.vue
+++ b/selfServiceMachine/src/views/module/bookDetails.vue
@ -0,0 +1,222 @@
+<template>
+  <div>
+    <el-dialog title="图书详情" :visible.sync="dialogVisible" width="80%">
+      <!-- :before-close="handleClose" -->
+      <div class="dialog-setting">
+        <div v-if="bookData" class="book-details-box">
+          <div class="book-details">
+            <div class="book-cover">
+              <img :src="bookData.srcUrl ? bookData.srcUrl : ''" :onerror="defaultImg" />
+            </div>
+            <div class="book-desc">
+              <h3>{{ bookData.bookName }}</h3>
+              <p class="book-from">作者：{{ bookData.bookAuthor }}</p>
+              <p v-if="bookData.Publish" class="book-from">出版社：{{ bookData.Publish }}</p>
+              <p class="book-brief"> 简介：{{ bookData.gist ? bookData.gist : '暂无简介' }}</p>
+            </div>
+          </div>
+          <div class="book-local">
+            <!-- <span v-if="bookData.bookPlace">所在位置：{{ bookData.bookPlace }}</span> -->
+            <!-- 待定：热门图书/新书推荐跳转到 场馆导航操作 -->
+            <!-- <span v-else>所在位置</span> -->
+            <div class="local-title">
+              所在位置
+            </div>
+            <ul class="local-list">
+              <li v-if="!bookData.places[0]?.shelfName" class="local-none">
+                <!-- <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-weizhi" />
+                </svg> -->
+                <span>当前图书暂未查到位置信息</span>
+              </li>
+              <!--  -->
+              <li v-for="(item,index) in bookData.places" v-else :key="index" class="local-list-info" @click="toBookNav(index)">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-weizhi" />
+                </svg>
+                <span>{{ item.shelfName }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BookDetails',
+  data() {
+    return {
+      dialogVisible: false,
+      bookData: null,
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"'
+    }
+  },
+  created() {
+  },
+  methods: {
+    toBookNav(index) {
+      const linkSrc = process.env.VUE_APP_BASE_API
+      window.location.href = linkSrc + '/anchoring/goNavigation.do?libcode=' + this.libcode + '&barcode=' + this.bookData.places[index].barcode
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 24px;
+  margin-top: 0 !important;
+  .el-dialog__body {
+    padding: 0 40px 40px 40px;
+  }
+}
+::v-deep .el-dialog__header {
+  text-align: center;
+  padding-top: 0;
+  padding-bottom: 4px;
+  .el-dialog__title {
+    display: inline-block;
+    font-family: "ZhenyanGB";
+    font-size: 40px;
+    width: 494px;
+    height: 76px;
+    line-height: 76px;
+    background: url("~@/assets/images/list/list-title.png") no-repeat 0 0;
+  }
+}
+::v-deep .el-dialog__headerbtn {
+  background-color: #3f92f6;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  .el-dialog__close {
+    color: #fff;
+    font-size: 30px;
+  }
+}
+.book-details-box {
+  .book-details {
+    display: flex;
+    justify-content: space-between;
+    padding: 30px 0;
+    .book-cover {
+      display: flex;
+      align-items: center;
+      width: 318px;
+      height: 382px;
+      margin-right: 40px;
+      overflow: hidden;
+      img {
+        display: block;
+        width: 100%;
+        max-height: calc(100%);
+        object-fit: contain;
+      }
+    }
+    .book-desc {
+      flex: 1;
+      color: #333;
+      overflow: hidden;
+      h3 {
+        font-size: 40px;
+        font-weight: normal;
+      }
+      .book-from {
+        width: 100%;
+        font-size: 30px;
+      }
+      h3,
+      .book-from {
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        margin-bottom: 20px;
+      }
+      .book-brief {
+        font-size: 24px;
+        margin-bottom: 20px;
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+  .book-local {
+    height: 343px;
+    color: #333;
+    display: flex;
+    // border-radius: 52px;
+    // line-height: 64px;
+    // text-align: center;
+    // font-size: 30px;
+    // overflow: hidden;
+    // white-space: nowrap;
+    // text-overflow: ellipsis;
+    .local-title {
+      width: 83px;
+      height: 100%;
+      background: url("~@/assets/images/local-bg.png") no-repeat;
+      writing-mode: vertical-rl;
+      text-align: center;
+      line-height: 83px;
+      font-size: 30px;
+      color: #fff;
+    }
+    .local-list {
+      flex: 1;
+      border: 1px solid #3f92f6;
+      border-left: none;
+      background: #d0e0f9;
+      overflow: hidden;
+      overflow-y: auto;
+      position: relative;
+      font-size: 26px;
+      .local-list-info {
+        height: 56px;
+        line-height: 56px;
+        background-color: #fff;
+        // margin-right: 8px;
+        margin-bottom: 15px;
+        padding-left: 13px;
+        span {
+          margin-left: 19px;
+        }
+      }
+      .local-none {
+        width: 100%;
+        text-align: center;
+        position: absolute;
+        // left: 50%;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+}
+/**滚动条的宽度*/
+::-webkit-scrollbar {
+  width: 8px;
+  height: 4px;
+}
+
+//滚动条的滑块
+::-webkit-scrollbar-thumb {
+  background-color: #3f92f6;
+  border-radius: 4px;
+}
+</style>
--- a/selfServiceMachine/src/views/module/bookList.vue
+++ b/selfServiceMachine/src/views/module/bookList.vue
@ -0,0 +1,134 @@
+<template>
+  <div v-loading.fullscreen.lock="bookLoading" class="hotbook-box" @scroll="lazyLoading">
+    <div v-if="bookList.length > 0" class="most-book" @click="handleDetails(0)">
+      <div class="most-book-img">
+        <img :src="bookData[0].cover ? bookData[0].cover : ''" :onerror="defaultImg" />
+      </div>
+      <div class="most-book-txt book-rack">
+        <div class="txt">
+          <h3>书名：{{ bookData[0].nbName || bookData[0].hbName }}</h3>
+          <p>作者：{{ bookData[0].nbAuthor || bookData[0].hbAuthor }}</p>
+          <p>出版社：{{ bookData[0].nbAuthor || bookData[0].hbAuthor }}</p>
+          <p>出版时间：{{ bookData[0].nbPublisherdate || bookData[0].hbPublisherdate }}</p>
+        </div>
+      </div>
+    </div>
+    <ul class="hotbook-list">
+      <li v-for="(item,index) in bookList" :key="index" @click="handleDetails(index+1)">
+        <div class="other-list-img">
+          <img :src="item.cover ? item.cover : ''" :onerror="defaultImg" />
+        </div>
+        <p class="book-name">{{ item.nbName || item.hbName }}</p>
+      </li>
+    </ul>
+    <BookDetails ref="detailDom" />
+  </div>
+</template>
+
+<script>
+import BookDetails from './bookDetails.vue'
+import { bookListCrud } from '../mixins/booklist.js'
+export default {
+  name: 'BookList',
+  components: { BookDetails },
+  mixins: [bookListCrud],
+  data() {
+    return {
+    }
+  },
+  created() {
+    this.getBookData()
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+.hotbook-box{
+  overflow: hidden;
+  overflow-y: auto;
+  height: calc(100vh - 210px);
+}
+.book-rack{
+  margin: 160px 40px 28px 40px;
+  padding: 38px 40px 40px 400px;
+  height: 272px;
+}
+.most-book{
+  position: relative;
+  .most-book-img{
+    position: absolute;
+    left: 90px;
+    bottom: 20px;
+    width: 318px;
+    height: 382px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    img{
+      display: block;
+      width: 100%;
+      vertical-align: middle;
+      object-fit: contain;
+    }
+  }
+  .txt{
+    // margin-left: 452px;
+    color: #333;
+    h3{
+      font-size: 40px;
+      font-weight: normal;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    p{
+      font-size: 30px;
+      margin-top: 8px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+.hotbook-list{
+  margin: 0 40px;
+  display: flex;
+  flex-wrap: wrap;
+  // justify-content: space-between;
+  li{
+    margin-bottom: 20px;
+    margin-left: 20px;
+    width: 300px;
+    overflow: hidden;
+    .other-list-img{
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 360px;
+      overflow: hidden;
+    }
+    img{
+      display: block;
+      width: 100%;
+      max-height: calc(100%);
+      vertical-align: middle;
+      object-fit: contain;
+    }
+    .book-name{
+      width: 100%;
+      text-align: center;
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+    }
+  }
+  & li:nth-child(3n+1){
+    margin-left: 0;
+  }
+}
+</style>
--- a/selfServiceMachine/src/views/module/headerTop.vue
+++ b/selfServiceMachine/src/views/module/headerTop.vue
@ -0,0 +1,51 @@
+<template>
+  <div class="header-time">
+    <div class="header-text header-date">{{ nowDate }}</div>
+    <span class="icon iconfont">&#xe634;</span>
+  </div>
+</template>
+
+<script>
+import { getCurrentTime } from '@/utils/index'
+
+export default {
+  name: 'HeaderTop',
+  data() {
+    return {
+      nowDate: ''
+    }
+  },
+  created() {
+    this.timer = setInterval(() => {
+      this.nowDate = getCurrentTime()
+    }, 1000)
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-time{
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #3F92F6;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  font-size: 30px;
+  color: #fff;
+  padding: 0 40px;
+  span{
+    width: 35px;
+    height: 45px;
+    font-size: 30px;
+    z-index: 1;
+  }
+}
+</style>
--- a/selfServiceMachine/src/views/module/homeListItem.vue
+++ b/selfServiceMachine/src/views/module/homeListItem.vue
@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div :class="[isNewBook ? 'list-small' : (isOtherBook ? 'list-middle' : 'list-big') ]">
+      <div v-for="(item,index) in listData" :key="item.ranking" class="list-item" @click="handleDetails(index)">
+        <div class="book-img">
+          <img :src="item.cover" :onerror="defaultImg" />
+        </div>
+        <div class="book-info">
+          <h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.nbName }}</h4>
+          <p class="book-author">{{ item.nbAuthor }}</p>
+          <div v-if="!isNewBook" class="book-num">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-remen" />
+            </svg>
+            <p>{{ item.num }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <BookDetails ref="detailDom" />
+  </div>
+</template>
+
+<script>
+import { getBookDetailsByISBN } from '@/api/bookshelf'
+import BookDetails from './bookDetails.vue'
+
+export default {
+  name: 'BookListItem',
+  components: { BookDetails },
+  props: {
+    listData: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    isOtherBook: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
+    isNewBook: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    }
+  },
+  data() {
+    return {
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"'
+    }
+  },
+  watch: {
+    listData: function(newValue, oldValue) {
+    },
+    isOtherBook: function(newValue, oldValue) {
+    },
+    isNewBook: function(newValue, oldValue) {
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    handleDetails(index) {
+      const params = {
+        isbn: this.listData[index].isbn.replace(/\-/g, '')
+      }
+      getBookDetailsByISBN(params).then(res => {
+        this.$refs.detailDom.dialogVisible = true
+        if (res) {
+          this.$refs.detailDom.bookData = res
+        } else {
+          this.$refs.detailDom.bookData = {
+            srcUrl: this.listData[index].cover,
+            bookName: this.listData[index].nbName,
+            bookAuthor: this.listData[index].nbAuthor ? this.listData[index].nbAuthor : '暂无信息',
+            gist: '暂无简介',
+            Publish: '暂无信息',
+            places: [
+              { shelfName: '' }
+            ]
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+</style>
--- a/selfServiceMachine/src/views/newBook.vue
+++ b/selfServiceMachine/src/views/newBook.vue
@ -0,0 +1,37 @@
+<template>
+  <div id="bookshelf">
+    <div class="bookshelf-header" style="height:120px">
+      <!-- <router-link to="/">
+        <span class="icon iconfont icon-l">&#xe631;</span>
+      </router-link> -->
+      <span class="icon iconfont icon-l" @click="goBack()">&#xe631;</span>
+      <h2>新书推荐</h2>
+    </div>
+    <BookList />
+  </div>
+</template>
+
+<script>
+import BookList from '@/views/module/bookList.vue'
+import { bookListCrud } from './mixins/booklist.js'
+export default {
+  name: 'NewBook',
+  components: { BookList },
+  mixins: [bookListCrud],
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+</style>
--- a/selfServiceMachine/src/views/onlineBookSelection.vue
+++ b/selfServiceMachine/src/views/onlineBookSelection.vue
@ -0,0 +1,47 @@
+<template>
+  <div id="bookshelf">
+    <!-- <div class="bookshelf-header" style="height:120px">
+      <h2>在线选书</h2>
+    </div> -->
+    <div class="top-bg"></div>
+    <div class="online-active">
+      <img src="~@/assets/images/code.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { bookListCrud } from './mixins/booklist.js'
+export default {
+  name: 'NewBook',
+  components: {  },
+  mixins: [bookListCrud],
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+// .el-carousel__item h3 {
+//     color: #475669;
+//     font-size: 14px;
+//     opacity: 0.75;
+//     line-height: 200px;
+//     margin: 0;
+//   }
+  
+//   .el-carousel__item:nth-child(2n) {
+//     background-color: #99a9bf;
+//   }
+  
+//   .el-carousel__item:nth-child(2n+1) {
+//     background-color: #d3dce6;
+//   }
+</style>
--- a/selfServiceMachine/vue.config.js
+++ b/selfServiceMachine/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: {
+      '/dxhtsg/': {
+        target: process.env.VUE_APP_BASE_API,
+        changeOrigin: true,
+        pathRewrite: {
+          '^/dxhtsg': 'dxhtsg'
+        }
+      },
+      '/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
+      })
+  }
+}