first

7 months ago · 6b174a9bb5
71 changed files with 4246 additions and 0 deletions
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,9 @@
+ENV = 'development'
+
+# 接口地址
+
+# 许镇-本地服地址
+VUE_APP_BASE_API  = 'http://192.168.99.72:14000'
+
+# 是否启用 babel-plugin-dynamic-import-node插件
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,9 @@
+ENV = 'production'
+
+# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
+# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
+# VUE_APP_BASE_API  = 'https://openapitest.aiyxlib.com'
+VUE_APP_BASE_API  = 'http://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/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,197 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+
+
+  rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
+    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+dist/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+package-lock.json
--- a/README.md
+++ b/README.md
@ -0,0 +1,37 @@
+自助查询机
+
+```bash
+# install dependency
+npm install
+
+# develop
+npm run serve
+
+# 构建生产环境
+npm run build
+
+```
+```bash
+## 项目结构
+├── src                        # 源代码
+│   ├── api                    # 所有请求
+│   ├── assets                 # 主题 字体等静态资源
+│   ├── router                 # 路由
+│   ├── views                  # views 所有页面
+│   │   ├── module        
+│   │   │   ├── bookDetails.vue    # 书籍详情
+│   │   ├── activityDetail         # 活动详情
+│   │   ├── activityFeed           # 活动资讯list
+│   │   ├── digitalResource        # 数字资源
+│   │   ├── libraryIntroduction    # 图书馆简介
+│   │   ├── newBookRecommend       # 新书推荐
+│   ├── 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/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,11 @@
+const plugins = ['@vue/babel-plugin-transform-vue-jsx', '@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator']
+// 生产环境移除console
+if (process.env.NODE_ENV === 'production') {
+  plugins.push('transform-remove-console')
+}
+module.exports = {
+  plugins: plugins,
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,56 @@
+{
+  "name": "intelligence-inquiry-machine",
+  "version": "1.0.0",
+  "description": "自助查询机",
+  "scripts": {
+    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
+    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && 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-awesome-swiper": "^3.1.3",
+    "vue-router": "^3.1.5",
+    "vuex": "^3.1.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.2.0",
+    "@vue/cli-plugin-eslint": "^4.2.0",
+    "@vue/cli-service": "^4.2.0",
+    "babel-eslint": "^10.0.3",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.1.2",
+    "sass": "^1.25.0",
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="referrer" content="no-referrer">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script type="text/javascript" src="/static/config.js"></script>
+  </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/public/static/config.js
+++ b/public/static/config.js
@ -0,0 +1,4 @@
+window.g = {
+  AXIOS_TIMEOUT: 10000,
+  ApiUrl: 'http://192.168.3.5:8080' // 配置服务器地址
+}
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,16 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style lang="scss">
+body {
+  margin: 0;
+}
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style>
--- a/src/api/inquiryMachine.js
+++ b/src/api/inquiryMachine.js
@ -0,0 +1,84 @@
+import request from '@/utils/request'
+import qs from 'qs'
+
+// 查询机栏目管理详情
+export function FetchQueryTopicDetails(params) {
+  return request({
+    url: '/api/queryMachine/getQueryMenuDetails',
+    method: 'get',
+    params: params
+  })
+}
+
+// 根据栏目id获取内容
+export function FetchInitQueryTopicContext(params) {
+  return request({
+    url: '/api/queryMachine/initQueryTopicContext',
+    method: 'get',
+    params: params
+  })
+}
+
+// 新书推荐
+export function FetchNewBook(params) {
+  return request({
+    url: '/api/screenSetting/getNewBook' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
+
+// 通过isbn获取图书详细信息
+export function FetchMarcByISBN(params) {
+  return request({
+    url: '/api/screenSetting/marcByISBN' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
+
+// 数字资源
+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
+  })
+}
+
+// 通过isbn获取图书封面
+export function FetchCoverByISBN(params) {
+  return request({
+    url: '/dxhtsg/getCoverByISBN',
+    method: 'get',
+    params: params
+    // responseType: 'blob'
+  })
+}
+
+// 图书详情
+export function getBookDetailsByISBN(params) {
+  return request({
+    url: '/api/bookBasice/getBookBasiceByISBN',
+    method: 'get',
+    params: params
+  })
+}
+
+export default {
+  FetchQueryTopicDetails,
+  FetchInitQueryTopicContext,
+  FetchNewBook,
+  FetchMarcByISBN,
+  FetchNewBookRecommend,
+  FetchCoverByISBN,
+  initNumberResoures,
+  getBookDetailsByISBN
+}
--- a/src/assets/404_images/404.png
+++ b/src/assets/404_images/404.png
--- a/src/assets/404_images/404_cloud.png
+++ b/src/assets/404_images/404_cloud.png
--- a/src/assets/fonts/HuXiaoBoNanShenTi.otf
+++ b/src/assets/fonts/HuXiaoBoNanShenTi.otf
--- a/src/assets/fonts/YouSheBiaoTiHei.ttf
+++ b/src/assets/fonts/YouSheBiaoTiHei.ttf
--- a/src/assets/fonts/ZhenyanGB.ttf
+++ b/src/assets/fonts/ZhenyanGB.ttf
--- a/src/assets/fonts/fonts.css
+++ b/src/assets/fonts/fonts.css
@ -0,0 +1,19 @@
+@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/src/assets/iconfont/iconfont.css
+++ b/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/src/assets/iconfont/iconfont.js
+++ b/src/assets/iconfont/iconfont.js
--- a/src/assets/iconfont/iconfont.json
+++ b/src/assets/iconfont/iconfont.json
@ -0,0 +1,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/src/assets/iconfont/iconfont.svg
+++ b/src/assets/iconfont/iconfont.svg
--- a/src/assets/iconfont/iconfont.ttf
+++ b/src/assets/iconfont/iconfont.ttf
--- a/src/assets/iconfont/iconfont.woff
+++ b/src/assets/iconfont/iconfont.woff
--- a/src/assets/iconfont/iconfont.woff2
+++ b/src/assets/iconfont/iconfont.woff2
--- a/src/assets/images/default-img.png
+++ b/src/assets/images/default-img.png
--- a/src/assets/images/empty.png
+++ b/src/assets/images/empty.png
--- a/src/assets/images/index/320
+++ b/src/assets/images/index/320
--- a/src/assets/images/index/320
+++ b/src/assets/images/index/320
--- a/src/assets/images/index/400
+++ b/src/assets/images/index/400
--- a/src/assets/images/index/400
+++ b/src/assets/images/index/400
--- a/src/assets/images/index/760
+++ b/src/assets/images/index/760
--- a/src/assets/images/index/760
+++ b/src/assets/images/index/760
--- a/src/assets/images/index/activities.png
+++ b/src/assets/images/index/activities.png
--- a/src/assets/images/index/bg.png
+++ b/src/assets/images/index/bg.png
--- a/src/assets/images/index/brief.png
+++ b/src/assets/images/index/brief.png
--- a/src/assets/images/index/digital.png
+++ b/src/assets/images/index/digital.png
--- a/src/assets/images/index/guide.png
+++ b/src/assets/images/index/guide.png
--- a/src/assets/images/index/logo.png
+++ b/src/assets/images/index/logo.png
--- a/src/assets/images/index/newbook.png
+++ b/src/assets/images/index/newbook.png
--- a/src/assets/images/index/search.png
+++ b/src/assets/images/index/search.png
--- a/src/assets/images/index/title.png
+++ b/src/assets/images/index/title.png
--- a/src/assets/images/list-title.png
+++ b/src/assets/images/list-title.png
--- a/src/assets/images/local-bg.png
+++ b/src/assets/images/local-bg.png
--- a/src/assets/images/top.png
+++ b/src/assets/images/top.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@ -0,0 +1,87 @@
+#screen-container {
+  width: 100%;
+  height: 100vh;
+  padding: 0 0.175rem;
+  font-size: 0.25rem;
+  line-height: 0.35rem;
+  color: #fff;
+  background-color: #010326;
+  overflow: hidden;
+}
+
+.content-main{
+  display: flex;
+  justify-content: space-between;
+  height: 880px;
+  background: #F4F4F4;
+  overflow: hidden;
+}
+
+.introduction-main {
+  padding: 30px 40px;
+  .nav-menu {
+    background: #ffffff;
+    width: 300px;
+    ul {
+      margin-top: 30px;
+      li {
+        height: 90px;
+        font-size: 30px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        line-height: 90px;
+        text-align: center;
+        margin-bottom: 20px;
+        &:hover {
+          background: #e4e4e4;
+        }
+        &.is-active {
+          background: linear-gradient(
+            318deg,
+            #38b8d9 0%,
+            #5394f1 45%,
+            #a0a9ef 100%
+          );
+          color: #ffffff;
+        }
+      }
+    }
+  }
+  .introduction-info {
+    margin-left: 30px;
+    background: #ffffff;
+    width: 1510px;
+    padding: 20px;
+    overflow-y: auto;
+    .info-title {
+      height: 100px;
+      text-align: center;
+      font-size: 38px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #333333;
+      line-height: 100px;
+    }
+    .info-img {
+      background: url("~@/assets/images/top.png") no-repeat center -5px;
+    }
+  }
+}
+.activity-list li {
+  height: 90px;
+  margin: 0 40px;
+  border-bottom: 1px solid #d9d9d9;
+  font-size: 30px;
+  line-height: 90px;
+  padding: 0 20px;
+  span.date {
+    float: right;
+  }
+  .activity-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: calc(100% - 282px);
+    display: inline-block;
+  }
+}
--- a/src/assets/styles/quillEditor.css
+++ b/src/assets/styles/quillEditor.css
@ -0,0 +1,209 @@
+.ql-align-center{
+  text-align: center;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
+  content: "黑体";
+  font-family: "SimHei";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
+  content: "微软雅黑";
+  font-family: "Microsoft YaHei";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
+  content: "楷体";
+  font-family: "KaiTi";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
+  content: "仿宋";
+  font-family: "FangSong";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
+  content: "Arial";
+  font-family: "Arial";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
+  content: "Times New Roman";
+  font-family: "Times New Roman";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
+  content: "sans-serif";
+  font-family: "sans-serif";
+}
+
+.ql-font-SimSun {
+  font-family: "SimSun";
+}
+
+.ql-font-SimHei {
+  font-family: "SimHei";
+}
+
+.ql-font-Microsoft-YaHei {
+  font-family: "Microsoft YaHei";
+}
+
+.ql-font-KaiTi {
+  font-family: "KaiTi";
+}
+
+.ql-font-FangSong {
+  font-family: "FangSong";
+}
+
+.ql-font-Arial {
+  font-family: "Arial";
+}
+
+.ql-font-Times-New-Roman {
+  font-family: "Times New Roman";
+}
+
+.ql-font-sans-serif {
+  font-family: "sans-serif";
+}
+
+/* 字号设置 */
+/* 默认字号 */
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: "12px";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before{
+  content: "12px";
+  font-size: 14px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before{
+  content: "14px";
+  font-size: 14px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before{
+  content: "16px";
+  font-size: 14px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before{
+  content: "18px";
+  font-size: 14px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before{
+  content: "20px";
+  font-size: 14px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before{
+  content: "22px";
+  font-size: 14px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before{
+  content: "26px";
+  font-size: 14px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before{
+  content: "28px";
+  font-size: 14px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before{
+  content: "30px";
+  font-size: 14px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
+  content: "12px";
+  font-size: 12px;
+}
+
+.ql-size-12px {
+  font-size: 12px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
+  content: "14px";
+  font-size: 14px;
+}
+
+.ql-size-14px {
+  font-size: 14px;
+}
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
+  content: "16px";
+  font-size: 16px;
+}
+
+.ql-size-16px {
+  font-size: 16px;
+}
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
+  content: "18px";
+  font-size: 18px;
+}
+
+.ql-size-18px {
+  font-size: 18px;
+}
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
+  content: "20px";
+  font-size: 20px;
+}
+
+.ql-size-20px {
+  font-size: 20px;
+}
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
+  content: "22px";
+  font-size: 22px;
+}
+
+.ql-size-22px {
+  font-size: 22px;
+}
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
+  content: "26px";
+  font-size: 26px;
+}
+
+.ql-size-26px {
+  font-size: 26px;
+}
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
+  content: "28px";
+  font-size: 28px;
+}
+
+.ql-size-28px {
+  font-size: 28px;
+}
+
+
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
+  content: "30px";
+  font-size: 30px;
+}
+
+.ql-size-30px {
+  font-size: 30px;
+}
--- a/src/assets/styles/style.scss
+++ b/src/assets/styles/style.scss
@ -0,0 +1,80 @@
+@import '~@/assets/iconfont/iconfont.css';
+
+//  全局样式
+* {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  box-sizing: border-box;
+  outline: none;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  background-color: #f1f1f1;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: #343440;
+  text-decoration: none;
+}
+
+ul{
+  margin: 0;
+  padding: 0;
+  li{
+    list-style: none;
+  }
+}
+
+.clearfix {
+  &::after {
+    content: "";
+    display: table;
+    height: 0;
+    line-height: 0;
+    visibility: hidden;
+    clear: both;
+  }
+}
+
+/**滚动条的宽度*/
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+//滚动条的滑块
+::-webkit-scrollbar-thumb {
+  background-color: #44A9E4;
+  border-radius: 5px;
+}
+
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+//浮动
+.float-r {
+  float: right;
+}
+
+//文章一行显示，多余省略号显示
+.title-item {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
--- a/src/common/flexible.js
+++ b/src/common/flexible.js
@ -0,0 +1,147 @@
+(function(win, lib) {
+  var doc = win.document
+  var docEl = doc.documentElement
+  var metaEl = doc.querySelector('meta[name="viewport"]')
+  var flexibleEl = doc.querySelector('meta[name="flexible"]')
+  var dpr = 0
+  var scale = 0
+  var tid
+  var flexible = lib.flexible || (lib.flexible = {})
+
+  if (metaEl) {
+    console.warn('将根据已有的meta标签来设置缩放比例')
+    var match = metaEl
+      .getAttribute('content')
+      // eslint-disable-next-line no-useless-escape
+      .match(/initial\-scale=([\d\.]+)/)
+    if (match) {
+      scale = parseFloat(match[1])
+      dpr = parseInt(1 / scale)
+    }
+  } else if (flexibleEl) {
+    var content = flexibleEl.getAttribute('content')
+    if (content) {
+      // eslint-disable-next-line no-useless-escape
+      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
+      // eslint-disable-next-line no-useless-escape
+      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
+      if (initialDpr) {
+        dpr = parseFloat(initialDpr[1])
+        scale = parseFloat((1 / dpr).toFixed(2))
+      }
+      if (maximumDpr) {
+        dpr = parseFloat(maximumDpr[1])
+        scale = parseFloat((1 / dpr).toFixed(2))
+      }
+    }
+  }
+
+  if (!dpr && !scale) {
+    // eslint-disable-next-line no-unused-vars
+    var isAndroid = win.navigator.appVersion.match(/android/gi)
+    var isIPhone = win.navigator.appVersion.match(/iphone/gi)
+    var devicePixelRatio = win.devicePixelRatio
+    if (isIPhone) {
+      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+        dpr = 3
+      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
+        dpr = 2
+      } else {
+        dpr = 1
+      }
+    } else {
+      // 其他设备下，仍旧使用1倍的方案
+      dpr = 1
+    }
+    scale = 1 / dpr
+  }
+
+  docEl.setAttribute('data-dpr', dpr)
+  if (!metaEl) {
+    metaEl = doc.createElement('meta')
+    metaEl.setAttribute('name', 'viewport')
+    metaEl.setAttribute(
+      'content',
+      'initial-scale=' +
+        scale +
+        ', maximum-scale=' +
+        scale +
+        ', minimum-scale=' +
+        scale +
+        ', user-scalable=no'
+    )
+    if (docEl.firstElementChild) {
+      docEl.firstElementChild.appendChild(metaEl)
+    } else {
+      var wrap = doc.createElement('div')
+      wrap.appendChild(metaEl)
+      doc.write(wrap.innerHTML)
+    }
+  }
+
+  function refreshRem() {
+    var width = docEl.getBoundingClientRect().width
+    // 最小1366px，最大适配2560px
+    if (width / dpr < 1366) {
+      width = 1366 * dpr
+    } else if (width / dpr > 2560) {
+      width = 2560 * dpr
+    }
+    // 设置成24等份，设计稿时1920px的，这样1rem就是80px
+    var rem = width / 24
+    docEl.style.fontSize = rem + 'px'
+    flexible.rem = win.rem = rem
+  }
+
+  win.addEventListener(
+    'resize',
+    function() {
+      clearTimeout(tid)
+      tid = setTimeout(refreshRem, 300)
+    },
+    false
+  )
+  win.addEventListener(
+    'pageshow',
+    function(e) {
+      if (e.persisted) {
+        clearTimeout(tid)
+        tid = setTimeout(refreshRem, 300)
+      }
+    },
+    false
+  )
+
+  if (doc.readyState === 'complete') {
+    doc.body.style.fontSize = 12 * dpr + 'px'
+  } else {
+    doc.addEventListener(
+      'DOMContentLoaded',
+      // eslint-disable-next-line no-unused-vars
+      function(e) {
+        doc.body.style.fontSize = 12 * dpr + 'px'
+      },
+      false
+    )
+  }
+
+  refreshRem()
+
+  flexible.dpr = win.dpr = dpr
+  flexible.refreshRem = refreshRem
+  flexible.rem2px = function(d) {
+    var val = parseFloat(d) * this.rem
+    if (typeof d === 'string' && d.match(/rem$/)) {
+      val += 'px'
+    }
+    return val
+  }
+  flexible.px2rem = function(d) {
+    var val = parseFloat(d) / this.rem
+    if (typeof d === 'string' && d.match(/px$/)) {
+      val += 'rem'
+    }
+    return val
+  }
+})(window, window['lib'] || (window['lib'] = {}))
--- a/src/common/scrollMixins.js
+++ b/src/common/scrollMixins.js
@ -0,0 +1,61 @@
+export default {
+  data() {
+    return {
+      scrollDom: null,
+      interval: null,
+      scrollTimer: null, // 滚动定时器
+      pauseTimer: null, // 暂停定时器
+      timeout: null,
+      step: null
+    }
+  },
+  created() {
+  },
+  mounted() {
+    // this.dataCompleteFun()
+  },
+  destroyed() {
+    // 清理定时器
+    clearTimeout(this.pauseTimer)
+    this.pauseTimer = null
+    clearInterval(this.scrollTimer)
+    this.scrollTimer = null
+    // 清理点击监听
+    window.document.removeEventListener('click', this.pauseScroll)
+  },
+  methods: {
+    autoScroll() {
+      // 滚动长度为0
+      if (this.scrollDom.scrollHeight - this.scrollDom.clientHeight > 0) {
+        // 如果定时器存在
+        if (this.scrollTimer) {
+        // 则先清除
+          clearInterval(this.scrollTimer)
+          clearTimeout(this.pauseTimer)
+          this.scrollTimer = null
+          this.pauseTimer = null
+        }
+        this.scrollTimer = setInterval(() => {
+          const scrollHeight = this.scrollDom.scrollHeight
+          const clientHeight = this.scrollDom.clientHeight
+          const scroll = scrollHeight - clientHeight
+          // 获取当前滚动条距离顶部高度
+          const scrollTop = this.scrollDom.scrollTop
+          // 当滚动到底部时,间隔时间后重回顶部开始
+          if (scrollTop + this.step >= scroll) {
+            this.scrollDom.scrollTop = scroll
+            this.pauseTimer = setTimeout(() => {
+              this.scrollDom.scrollTop = 0
+              this.autoScroll()
+            }, this.timeout)
+          } else { // 没有则继续滚动
+            this.scrollDom.scrollTop = scrollTop + this.step
+          }
+          // console.log(scrollHeight, clientHeight, scroll, scrollTop)
+        }, this.interval)
+      } else {
+        return
+      }
+    }
+  }
+}
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,41 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+// 适配flex
+import '@/common/flexible.js'
+
+// 引入全局css
+import './assets/styles/style.scss'
+import './assets/iconfont/iconfont.js'
+import './assets/fonts/fonts.css'
+import './assets/styles/quillEditor.css'
+
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(ElementUI)
+
+import axios from 'axios'
+Vue.prototype.$axios = axios
+
+// 馆代码  1501 江夏图书馆  1201 东西湖图书馆  FTZN 本地
+// Vue.prototype.libcode = 'FTZN'
+// Vue.prototype.libcode = '1501'
+
+import { parseTime } from '@/utils/index.js'
+Vue.filter('parseTime', function(time, cFormat) {
+  return parseTime(time, cFormat)
+})
+
+// 引入echart
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App)
+}).$mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,98 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import ColumnLayout from '@/views/columnLayout'
+import ColumnListMix from '@/views/columnListMix'
+import ColumnListMixDetail from '@/views/columnListMixDetail'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'index',
+    component: () => import('@/views/index.vue'),
+    meta: {
+      title: '首页'
+    }
+  },
+  {
+    path: '/NewBookRecommend',
+    name: 'NewBookRecommend',
+    component: () => import('@/views/newBookRecommend.vue'),
+    meta: {
+      title: '新书推荐'
+    }
+  },
+  // {
+  //   path: '/DigitalResource',
+  //   name: 'DigitalResource',
+  //   component: () => import('@/views/digitalResource.vue'),
+  //   meta: {
+  //     title: '数字资源'
+  //   }
+  // },
+  // {
+  //   path: '/LibraryIntroduction',
+  //   name: 'LibraryIntroduction',
+  //   component: () => import('@/views/libraryIntroduction.vue'),
+  //   meta: {
+  //     title: '图书馆简介'
+  //   }
+  // },
+  // {
+  //   path: '/ActivityFeed',
+  //   name: 'ActivityFeed',
+  //   component: () => import('@/views/activityFeed.vue'),
+  //   meta: {
+  //     title: '活动咨询'
+  //   }
+  // },
+  // {
+  //   path: '/ActivityDetail',
+  //   name: 'ActivityDetail',
+  //   component: () => import('@/views/activityDetail.vue'),
+  //   meta: {
+  //     title: '活动详情'
+  //   }
+  // },
+  {
+    path: '/menu',
+    name: 'menu',
+    component: () => import('@/views/menu.vue')
+  },
+  {
+    path: '/imgTxtDetail',
+    name: 'imgTxtDetail',
+    component: () => import('@/views/imgTxtDetail.vue')
+  },
+  {
+    path: '/column',
+    name: 'ColumnLayout',
+    component: ColumnLayout,
+    redirect: '/column/list',
+    children: [
+      {
+        path: 'list',
+        name: 'ColumnListMix',
+        component: ColumnListMix
+      },
+      {
+        path: 'detail',
+        name: 'ColumnListMixDetail',
+        component: ColumnListMixDetail
+      }
+    ]
+  },
+  {
+    path: '/waterfallFlow',
+    name: 'waterfallFlow',
+    component: () => import('@/views/waterfallFlow.vue')
+  }
+]
+
+const router = new VueRouter({
+  mode: 'hash',
+  routes
+})
+
+export default router
--- a/src/store/column.js
+++ b/src/store/column.js
@ -0,0 +1,48 @@
+
+// 初始状态
+const state = {
+  tabList: [],
+  libcode: '',
+  selectMenuIndex: 0
+}
+
+//  mutations
+const mutations = {
+  // 设置专栏数据
+  setColumnData(state, payload) {
+    state.tabList = payload.tabList || []
+    state.libcode = payload.libcode || ''
+    state.selectMenuIndex = payload.selectMenuIndex || 0
+  },
+
+  // 更新选中的菜单索引
+  setSelectMenuIndex(state, index) {
+    state.selectMenuIndex = index
+  }
+}
+
+// actions
+const actions = {
+  updateColumnData({ commit }, data) {
+    commit('setColumnData', data)
+  },
+
+  updateSelectIndex({ commit }, index) {
+    commit('setSelectMenuIndex', index)
+  }
+}
+
+// getters
+const getters = {
+  getTabList: state => state.tabList,
+  getLibcode: state => state.libcode,
+  getSelectIndex: state => state.selectMenuIndex
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+}
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,13 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import column from './column'
+
+Vue.use(Vuex)
+
+// 创建并导出store实例
+export default new Vuex.Store({
+  modules: {
+    column // 注册column模块
+  }
+})
+
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -0,0 +1,92 @@
+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
+}
+
+/**
+ * Parse the time to string
+ * @param {(Object|string|number)} time
+ * @param {string} cFormat
+ * @returns {string}
+ */
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'undefined' || time === null || time === 'null') {
+    return ''
+  } else if (typeof time === 'object') {
+    date = time
+  } else {
+    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+      time = parseInt(time)
+    }
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -0,0 +1,55 @@
+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
+  baseURL: process.env.NODE_ENV === 'production' ? window.g.ApiUrl : 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) {
+      // console.log(response.data.data)
+      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/src/utils/resizeMixins.js
+++ b/src/utils/resizeMixins.js
@ -0,0 +1,26 @@
+// 混入代码 resize-mixins.js
+import { debounce } from '@/utils/index'
+const resizeChartMethod = '$__resizeChartMethod'
+
+export default {
+  data() {
+    // 在组件内部将图表init的引用映射到chart属性上
+    return {
+      chart: null
+    }
+  },
+  created() {
+    window.addEventListener('resize', this[resizeChartMethod], false)
+  },
+  beforeDestroy() {
+    window.removeEventListener('reisze', this[resizeChartMethod])
+  },
+  methods: {
+    // 通过lodash的防抖函数来控制resize的频率
+    [resizeChartMethod]: debounce(function() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+  }
+}
--- a/src/views/columnLayout.vue
+++ b/src/views/columnLayout.vue
@ -0,0 +1,90 @@
+<template>
+  <div class="content-main introduction-main">
+    <div class="nav-menu">
+      <ul>
+        <li
+          v-for="(item,index) in tabList"
+          :key="index"
+          :class="{ 'is-active': selectMenuIndex === index }"
+          @click="selectMenuChange(item, index)"
+        >
+          {{ item.title }}
+        </li>
+      </ul>
+    </div>
+    <div class="introduction-info">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import { FetchQueryTopicDetails } from '@/api/inquiryMachine'
+export default {
+  name: 'ColumnLayout',
+  data() {
+    return {
+      libcode: '',
+      tabList: [],
+      selectMenuIndex: 0
+    }
+  },
+  created() {
+    const savedIndex = localStorage.getItem('selectIndex')
+    if (savedIndex !== null) {
+      this.selectMenuIndex = parseInt(savedIndex)
+    }
+    this.getQueryTopicDetails()
+  },
+  methods: {
+    getQueryTopicDetails() {
+      const params = { 'id': this.$route.query.menuId }
+      FetchQueryTopicDetails(params).then(res => {
+        console.log('接口返回数据:', res)
+        if (res && res.queryTopicList && res.queryTopicList.length > 0) {
+          this.tabList = res.queryTopicList
+          this.libcode = res.queryMenu.libcode
+          // this.$store.commit
+          this.$store.commit('column/setColumnData', {
+            tabList: this.tabList,
+            libcode: this.libcode,
+            selectMenuIndex: this.selectMenuIndex
+          })
+          console.log('Vuex设置成功:', this.$store.state.column.tabList)
+        } else {
+          console.error('接口返回的queryTopicList为空或格式错误')
+        }
+      }).catch(err => {
+        console.error('接口请求失败:', err)
+        this.$message.error('接口错误')
+      })
+    },
+    selectMenuChange(item, index) {
+      this.selectMenuIndex = index
+      localStorage.setItem('selectIndex', index)
+      this.$store.commit('column/setSelectMenuIndex', index)
+      const targetRoute = {
+        name: 'ColumnListMix',
+        query: this.$route.query
+      }
+      const currentRoute = this.$router.currentRoute
+      if (currentRoute.name === targetRoute.name &&
+      JSON.stringify(currentRoute.query) === JSON.stringify(targetRoute.query)) {
+        if (this.$children.length > 0) {
+          this.$children[0].getInitQueryTopicContext(item)
+        }
+        return
+      }
+      this.$router.push(targetRoute).then(() => {
+        if (this.$children.length > 0) {
+          this.$children[0].getInitQueryTopicContext(item)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+</style>
--- a/src/views/columnListMix.vue
+++ b/src/views/columnListMix.vue
@ -0,0 +1,173 @@
+<template>
+  <div style="height:calc(100%);">
+    <div v-if="detailData && tabList[selectMenuIndex].type ===1" class="new-detial-info">
+      <h2 class="detail-title">{{ detailData.overTitle }}</h2>
+      <div class="detail-date">发布时间：{{ detailData.create_time }}</div>
+      <div class="detail-content" v-html="detailData.introHtml" />
+
+    </div>
+    <ul v-else-if="infoList.length !== 0 && (tabList[selectMenuIndex].type ===2 || tabList[selectMenuIndex]===3)" class="activity-list">
+      <li v-for="(item,index) in infoList" :key="index" @click="toDetail(item)">
+        <div class="activity-title">{{ item.overTitle?item.overTitle:'' }}</div>
+        <span class="date">{{ item.create_time }}</span>
+      </li>
+    </ul>
+    <Waterfall
+      v-else-if="infoList.length !== 0 && tabList[selectMenuIndex].type ===4"
+      :list="infoList"
+      :columns="columns"
+      :loading="loading"
+      :placeholder="placeholderImg"
+      :total-items="totalItems"
+      @scroll-end="loadMoreData"
+    />
+    <div v-else style="height:calc(100%);display: flex; flex-direction: column; justify-content:center ; align-items: center;">
+      <img style="display: block;" src="~@/assets/images/empty.png">
+      <p style="font-size: 30px;">暂无相关数据</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import Waterfall from './module/waterfall.vue'
+import { mapState } from 'vuex'
+import { FetchInitQueryTopicContext } from '@/api/inquiryMachine'
+export default {
+  name: 'ColumnListMix',
+  components: {
+    Waterfall
+  },
+  data() {
+    return {
+      detailData: {},
+      infoList: [],
+      columns: 2,
+      dataList: [],
+      loading: false,
+      currentPage: 0,
+      pageSize: 10,
+      totalItems: 0,
+      placeholderImg: require('@/assets/images/default-img.png')
+    }
+  },
+  computed: {
+    ...mapState('column', ['tabList', 'libcode', 'selectMenuIndex'])
+  },
+  watch: {
+    $route: {
+      handler() {
+        console.log('当前Vuex中的tabList:', this.$store.state.column.tabList)
+        if (this.tabList.length > 0) {
+          this.getInitQueryTopicContext(this.tabList[this.selectMenuIndex])
+        } else {
+          const timer = setTimeout(() => {
+            if (this.tabList.length > 0) {
+              this.getInitQueryTopicContext(this.tabList[this.selectMenuIndex])
+            } else {
+              console.log('重试后tabList仍为空')
+            }
+            clearTimeout(timer)
+          }, 500)
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getInitQueryTopicContext(result) {
+      console.log(result.type)
+      const params = {
+        'page': this.currentPage,
+        'size': this.pageSize,
+        'libcode': this.libcode,
+        'topicId': result.id,
+        'topicType': result.type
+      }
+      FetchInitQueryTopicContext(params).then(res => {
+        if (res.totalElements) {
+          this.totalItems = res.totalElements
+        }
+        const linkSrc = process.env.NODE_ENV === 'production'
+          ? window.g.ApiUrl
+          : process.env.VUE_APP_BASE_API
+
+        if (res && res.content.length > 0) {
+          if (result.type === 4) {
+            const formattedData = res.content.map(item => ({
+              id: item.id || `item-${Date.now()}-${Math.random()}`,
+              type: 'image',
+              title: item.overTitle || '无标题',
+              image: item.imgUrl ? `${linkSrc}/api/fileRelevant/getImg?imgType=2&imgId=${item.imgUrl}` : this.placeholderImg,
+              linkUrl: item.linkUrl || '#'
+            }))
+
+            this.infoList = [...this.infoList, ...formattedData]
+          } else if (result.type === 1) {
+            this.detailData = res.content[0]
+          } else {
+            this.infoList = res.content
+          }
+        } else {
+          this.infoList = []
+        }
+      }).catch(() => {
+        this.$message.error('接口错误')
+      })
+    },
+    loadMoreData() {
+      if (this.dataList.length >= this.totalItems) {
+        return
+      }
+      if (this.loading) return
+
+      this.currentPage++
+      this.getInitQueryTopicContext(this.tabList[this.selectMenuIndex])
+    },
+
+    isAllDataLoaded() {
+      if (this.totalItems > 0) {
+        return this.dataList.length >= this.totalItems
+      }
+      return this.currentPage > 0 && this.dataList.length % this.pageSize !== 0
+    },
+    toDetail(item) {
+      // itemId: item.id
+      this.$router.push({
+        name: 'ColumnListMixDetail',
+        query: {
+          ...this.$route.query
+        }
+      })
+      localStorage.setItem('columnListMixDetail', JSON.stringify(item))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+.detail-title{
+  font-size: 32px;
+  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+  font-weight: 400;
+  color: #333333;
+  line-height: 100px;
+  text-align: center;
+}
+.detail-date{
+  text-align: center;
+  margin-bottom: 20px;
+}
+.detail-content{
+  ::v-deep p{
+    span{
+      display: block !important;
+      text-indent:2em !important;
+    }
+    img{
+      display: block;
+      margin: 10px auto;
+    }
+  }
+}
+</style>
--- a/src/views/columnListMixDetail.vue
+++ b/src/views/columnListMixDetail.vue
@ -0,0 +1,93 @@
+<template>
+  <div class="detail-content">
+    <div v-if="detailData" class="detail-info">
+      <h2 class="detail-title">{{ detailData.overTitle }}</h2>
+      <div class="detail-date">发布时间：{{ detailData.create_time }}</div>
+      <div class="detail-content" v-html="detailData.introHtml" />
+    </div>
+
+    <div v-else-if="loading">
+      <p>加载中...</p>
+    </div>
+
+    <div v-else>
+      <p>加载详情失败</p>
+      <button @click="reloadDetail">重新加载</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ColumnListMixDetail',
+  data() {
+    return {
+      detailData: null,
+      loading: true
+    }
+  },
+  created() {
+    this.loadDetailData()
+  },
+  methods: {
+    loadDetailData() {
+      this.loading = true
+
+      const storedData = localStorage.getItem('columnListMixDetail')
+      if (storedData) {
+        this.detailData = JSON.parse(storedData)
+        this.loading = false
+        return
+      }
+      // 方式2: 如果需要从接口重新获取（推荐）
+      // const itemId = this.$route.query.itemId
+      // if (itemId) {
+      //   FetchTopicDetail({ id: itemId }).then(res => {
+      //     this.detailData = res.data
+      //   }).catch(err => {
+      //     console.error('获取详情失败', err)
+      //   }).finally(() => {
+      //     this.loading = false
+      //   })
+      // } else {
+      //   this.loading = false
+      // }
+    },
+    // 重新加载详情
+    reloadDetail() {
+      this.loadDetailData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+.detail-info{
+  .detail-title{
+    font-size: 32px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #333333;
+    line-height: 100px;
+    text-align: center;
+  }
+  .detail-date{
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  .detail-content{
+    ::v-deep p{
+      span{
+        display: block !important;
+        text-indent:2em !important;
+      }
+      img{
+        display: block;
+        margin: 10px auto;
+      }
+    }
+  }
+
+}
+</style>
--- a/src/views/imgTxtDetail.vue
+++ b/src/views/imgTxtDetail.vue
@ -0,0 +1,64 @@
+<template>
+  <div class="content-main introduction-main">
+    <div class="new-detial-info" v-html="rawHtml" />
+  </div>
+</template>
+
+<script>
+import { FetchQueryTopicDetails, FetchInitQueryTopicContext } from '@/api/inquiryMachine'
+export default {
+  name: 'ImgTxtDetail',
+  data() {
+    return {
+      rawHtml: ''
+    }
+  },
+  created() {
+    this.getQueryTopicDetails()
+  },
+  methods: {
+    getQueryTopicDetails() {
+      const params = {
+        'id': this.$route.query.menuId
+      }
+      FetchQueryTopicDetails(params).then(res => {
+        console.log(res)
+        if (res && res.queryTopicList.length > 0) {
+          this.getInitQueryTopicContext(res)
+        }
+      }).catch(() => {
+        this.$message.error('接口错误')
+      })
+    },
+    getInitQueryTopicContext(result) {
+      const params = {
+        'page': 0,
+        'size': 10,
+        'libcode': result.queryMenu.libcode,
+        'topicId': result.queryTopicList[0].id,
+        'topicType': result.queryTopicList[0].type
+      }
+      FetchInitQueryTopicContext(params).then(res => {
+        console.log(res)
+        if (res && res.content.length > 0) {
+          this.rawHtml = res.content[0].introHtml
+        } else {
+          this.rawHtml = '暂无数据'
+        }
+      }).catch(() => {
+        this.$message.error('接口错误')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+  .new-detial-info {
+    background: #ffffff;
+    width: 100%;
+    padding: 20px;
+    overflow-y: auto;
+  }
+</style>
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -0,0 +1,293 @@
+<template>
+  <div v-if="pageError" class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">请检查您输入的网址是否正确</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { FetchQueryTopicDetails } from '@/api/inquiryMachine'
+export default {
+  name: 'Home',
+  data() {
+    return {
+      pageError: false
+    }
+  },
+  computed: {
+    message() {
+      return '暂未查到相关页面......'
+    }
+  },
+  created() {
+    console.log('this.router.path', this.$route.query)
+    this.getQueryTopicDetails()
+  },
+  methods: {
+    getQueryTopicDetails() {
+      const params = {
+        'id': this.$route.query.menuId
+      }
+      FetchQueryTopicDetails(params).then(res => {
+        this.pageError = false
+        console.log(res)
+        // res.queryTopicList[0].type = 1 // 图文详情
+        // res.queryTopicList[0].type = 2 // 文字列表 - 图文详情
+        // res.queryTopicList[0].type = 3 // 图文列表 - 图文详情
+        // res.queryTopicList[0].type = 4 // 图文列表 - 外部跳转
+
+        // res.queryMenu.type = 1 // 菜单
+        // res.queryMenu.type = 2 && res.queryTopicList.length === 1 && res.queryTopicList[0].type==1 // 即进入imgTxtDetail页面
+        // res.queryMenu.type = 3 && res.queryTopicList.length >0  // 即进入columnListMix页面
+        // res.queryMenu.type = 4 // 即直接进入newBookRecommend页面
+        localStorage.setItem('menuId', res.queryMenu.id)
+        localStorage.setItem('menuInfo', JSON.stringify(res))
+
+        // 根据不同条件跳转不同页面
+        if (res.queryMenu.type === 1) {
+          // 带菜单页面
+          this.$router.push({
+            path: '/menu',
+            query: { 'menuId': res.queryMenu.id }
+          })
+        } else if (res.queryMenu.type === 2 && res.queryTopicList.length === 1 && res.queryTopicList[0].type === 1) {
+          // 进入不带栏目得纯图文详情页面
+          // , 'topicId': res.queryTopicList[0].id
+          this.$router.push({
+            path: '/imgTxtDetail',
+            query: { 'menuId': res.queryMenu.id }
+          })
+        } else if (res.queryMenu.type === 3 && res.queryTopicList.length > 1) {
+          // 进入columnListMix页面
+          this.$router.push({
+            path: '/column',
+            query: { 'menuId': res.queryMenu.id }
+          })
+        } else if (res.queryMenu.type === 3 && res.queryTopicList.length === 1 && res.queryTopicList[0].type === 4) {
+          // 进入waterfallFlow页面
+          this.$router.push({
+            path: '/waterfallFlow',
+            query: { 'menuId': res.queryMenu.id }
+          })
+        } else if (res.queryMenu.type === 4) {
+          // 进入newBookRecommend页面
+          this.$router.push({
+            path: '/newBookRecommend',
+            query: { 'menuId': res.queryMenu.id, 'libcode': res.queryMenu.libcode }
+          })
+        }
+      }).catch(() => {
+        // this.$message.error('接口错误')
+        this.pageError = true
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>
--- a/src/views/menu.vue
+++ b/src/views/menu.vue
@ -0,0 +1,174 @@
+<template>
+  <!-- 活动咨询 -->
+  <div class="content-main introduction-main">
+    <div class="nav-menu">
+      <ul>
+        <li
+          v-for="(item,index) in tabList"
+          :key="index"
+          :class="{ 'is-active': selectMenuIndex === index }"
+          @click="selectMenuChange(item, index)"
+        >
+          {{ item.title }}
+        </li>
+      </ul>
+    </div>
+    <div class="introduction-info">
+      <ul v-if="rightColumnTab.length !== 0" class="menu-tab-list">
+        <li
+          v-for="(item,index) in rightColumnTab"
+          :key="item.id"
+          :class="{ 'active': columeIndex === index }"
+          @click="handleColumnClick(item, index)"
+        >
+          {{ item.title }}
+        </li>
+      </ul>
+      <div style="height: calc(100% - 60px);">
+        <ul v-if="infoList.length !== 0" class="activity-list">
+          <li v-for="item in infoList" :key="item.id" @click="toDetail(item)">
+            <div class="activity-title">{{ item.overTitle?item.overTitle:'' }}</div>
+            <span class="date">{{ item.create_time }}</span>
+          </li>
+        </ul>
+        <div v-else style="height:calc(100%);display: flex; flex-direction: column; justify-content:center ; align-items: center;">
+          <img style="display: block;" src="~@/assets/images/empty.png">
+          <p style="font-size: 30px;">暂无相关数据</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { FetchQueryTopicDetails, FetchInitQueryTopicContext } from '@/api/inquiryMachine'
+export default {
+  name: 'ActivityFeed',
+  data() {
+    return {
+      libcode: '',
+      tabList: [],
+      selectMenuIndex: 0,
+      rightColumnTab: [],
+      columeIndex: 0,
+      infoList: []
+    }
+  },
+  created() {
+    this.getQueryTopicDetails()
+  },
+  methods: {
+    getQueryTopicDetails() {
+      const params = { 'id': this.$route.query.menuId }
+      FetchQueryTopicDetails(params).then(res => {
+        console.log('接口返回数据:', res)
+        if (res && res.queryMenu) {
+          this.tabList = res.queryMenu.children
+          this.libcode = res.queryMenu.libcode
+          this.rightColumnTab = []
+          this.tabList.forEach(childMenu => {
+            if (childMenu.queryMenuTopics && childMenu.queryMenuTopics.length > 0) {
+              childMenu.queryMenuTopics.forEach(menuTopic => {
+                if (menuTopic.queryTopic) {
+                  this.rightColumnTab.push(menuTopic.queryTopic)
+                }
+              })
+            }
+          })
+
+          if (this.rightColumnTab.length > 0) {
+            this.columeIndex = 0 // 默认选中第一个
+            const defaultTopic = this.rightColumnTab[0] // 获取默认选中的queryTopic
+            this.getInitQueryTopicContext(defaultTopic) // 传入默认topic请求数据
+          }
+        } else {
+          this.tabList = []
+          this.rightColumnTab = []
+          this.infoList = []
+        }
+      }).catch(err => {
+        console.error('接口请求失败:', err)
+        this.$message.error('接口错误')
+        this.rightColumnTab = []
+        this.infoList = []
+      })
+    },
+    getInitQueryTopicContext(currentTopic) {
+      const params = {
+        'page': 0,
+        'size': 10,
+        'libcode': this.libcode,
+        'topicId': currentTopic.id, // 传当前选中queryTopic的id（原代码传result.id错误）
+        'topicType': currentTopic.type // 传当前选中queryTopic的type（原代码传result.type错误）
+      }
+      FetchInitQueryTopicContext(params).then(res => {
+        if (res && res.content.length > 0) {
+          this.infoList = res.content
+        } else {
+          this.infoList = [] // 无数据时清空列表
+        }
+      }).catch(() => {
+        this.$message.error('接口错误')
+        this.infoList = []
+      })
+    },
+    handleColumnClick(currentTopic, index) {
+      this.columeIndex = index // 更新选中索引
+      this.getInitQueryTopicContext(currentTopic) // 传入当前topic请求数据
+    },
+    selectMenuChange(childMenu, index) {
+      this.selectMenuIndex = index
+      this.rightColumnTab = []
+      if (childMenu.queryMenuTopics && childMenu.queryMenuTopics.length > 0) {
+        childMenu.queryMenuTopics.forEach(menuTopic => {
+          if (menuTopic.queryTopic) {
+            this.rightColumnTab.push(menuTopic.queryTopic)
+          }
+        })
+        if (this.rightColumnTab.length > 0) {
+          this.columeIndex = 0
+          this.getInitQueryTopicContext(this.rightColumnTab[0])
+        } else {
+          this.infoList = []
+        }
+      } else {
+        this.rightColumnTab = []
+        this.infoList = []
+      }
+    },
+    toDetail(item) {
+      this.$router.push('/ActivityDetail')
+      localStorage.setItem('selectIndex', JSON.stringify(this.selectMenuIndex))
+      localStorage.setItem('activityDetail', JSON.stringify(item))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+.menu-tab-list{
+  display: flex;
+  justify-content: flex-start;
+  font-size: 26px;
+  // padding: 10px 0;
+  border-bottom: 2px solid #D9D9D9;
+  li{
+    padding: 10px 20px;
+    margin-right: 20px;
+    &.active{
+      position: relative;
+      color:#5394F1;
+      &::before{
+        position: absolute;
+        bottom: -2px;
+        left: 0;
+        content: '';
+        width: 100%;
+        height: 2px;
+        background-color: #5394F1;
+      }
+    }
+  }
+}
+</style>
--- a/src/views/module/bookDetails.vue
+++ b/src/views/module/bookDetails.vue
@ -0,0 +1,228 @@
+<template>
+  <div>
+    <el-dialog
+      title="图书详情"
+      :visible.sync="dialogVisible"
+      width="60%"
+    >
+      <!-- :before-close="handleClose" -->
+      <div class="dialog-setting">
+        <div class="book-details-box">
+          <div class="book-details">
+            <div class="book-cover">
+              <img :src="bookData.imgPath ? bookData.imgPath : ''" :onerror="defaultImg">
+            </div>
+            <div class="book-desc">
+              <h3>{{ bookData.title }}</h3>
+              <p class="book-from">作者：{{ bookData.author }}</p>
+              <p v-if="bookData.publisher" class="book-from">出版社：{{ bookData.publisher }}</p>
+              <p class="book-brief"> 简介：{{ bookData.summary }}</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">
+              <template v-if="!bookData.places || bookData.places.length === 0">
+                <li class="local-none">
+                  <span>当前图书暂未查到位置信息</span>
+                </li>
+              </template>
+              <template v-else>
+                <li
+                  v-for="(item, index) in bookData.places"
+                  :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>
+              </template>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BookDetails',
+  data() {
+    return {
+      dialogVisible: false,
+      bookData: {},
+      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=1201&barcode=' + this.bookData.places[index].barcode
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog{
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-top: 0 !important;
+  transform: translate(-50%,-50%);
+  border-radius: 24px;
+  .el-dialog__body{
+  padding: 0 40px 40px 40px ;
+  z-index: 999;
+  }
+}
+::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-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{
+      width: 318px;
+      height: 382px;
+      margin-right: 40px;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .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{
+  //   border: 1px solid #3F92F6;
+  //   background: #D0E0F9;
+  //   border-radius: 52px;
+  //   height: 64px;
+  //   line-height: 64px;
+  //   text-align: center;
+  //   font-size: 30px;
+  //   color: #333;
+  //   overflow: hidden;
+  //   white-space: nowrap;
+  //   text-overflow: ellipsis;
+  // }
+  .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%);
+      }
+    }
+  }
+}
+</style>
--- a/src/views/module/waterfall.vue
+++ b/src/views/module/waterfall.vue
@ -0,0 +1,434 @@
+<template>
+  <!-- 参考 https://blog.csdn.net/weixin_44198965/article/details/147831036 -->
+  <div class="waterfall-container">
+    <!-- 列容器 -->
+    <div ref="columnWrapper" class="waterfall-column-wrapper">
+      <!-- 瀑布流项 -->
+      <div
+        v-for="(item, index) in renderedList"
+        :key="item.id || index"
+        v-lazy-load="item.image || item.cover"
+        class="waterfall-item"
+      >
+        <!-- 图片类型 -->
+        <div v-if="item.type === 'image'" class="item-content" @click="jump(item.linkUrl)">
+          <img
+            :src="placeholder"
+            :alt="item.title || '图片'"
+            class="item-image"
+          >
+          <div v-if="item.title" class="item-title">{{ item.title }}</div>
+        </div>
+
+        <!-- 视频类型 -->
+        <div v-else-if="item.type === 'video'" class="item-content">
+          <video
+            :poster="placeholder"
+            controls
+            class="item-video"
+          >
+            <source :src="item.videoUrl" type="video/mp4">
+          </video>
+          <div v-if="item.title" class="item-title">{{ item.title }}</div>
+        </div>
+
+        <!-- 图文类型 -->
+        <div v-else class="item-content">
+          <img
+            v-if="item.image"
+            :src="placeholder"
+            :alt="item.title || '图文'"
+            class="item-image"
+          >
+          <div v-if="item.title" class="item-title">{{ item.title }}</div>
+          <div v-if="item.desc" class="item-desc">{{ item.desc }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-more">
+      加载中...
+    </div>
+    <div v-if="isComplete && renderedList.length > 0" class="load-complete">
+      没有更多内容了
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Waterfall',
+
+  directives: {
+    lazyLoad: {
+      inserted(el, binding, vnode) {
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting) {
+              const img = el.tagName === 'IMG' ? el : el.querySelector('img')
+              if (img) {
+                img.src = binding.value
+                // 图片加载完成后重新布局
+                img.onload = () => {
+                  vnode.context.layoutItems()
+                }
+                // 图片加载错误处理
+                img.onerror = () => {
+                  if (vnode.context.placeholder) {
+                    img.src = vnode.context.placeholder
+                  }
+                }
+              }
+              observer.unobserve(el)
+            }
+          })
+        }, {
+          rootMargin: '0px 0px 100px 0px' // 提前100px加载
+        })
+
+        observer.observe(el)
+
+        el._observer = observer
+      },
+      unbind(el) {
+        if (el._observer) {
+          el._observer.disconnect()
+        }
+      }
+    }
+  },
+
+  // 定义组件props
+  props: {
+    // 数据源数组
+    list: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    // 列数配置
+    columns: {
+      type: Number,
+      default: 2,
+      validator: function(value) {
+        return value >= 1 && value <= 5 // 限制列数在1-5之间
+      }
+    },
+    // 列间距
+    gap: {
+      type: Number,
+      default: 10
+    },
+    // 是否开启懒加载
+    lazyLoad: {
+      type: Boolean,
+      default: true
+    },
+    // 触底加载的阈值（距离底部多少像素触发加载）
+    loadThreshold: {
+      type: Number,
+      default: 100
+    },
+    // 图片加载时的占位图
+    placeholder: {
+      type: String,
+      default: '改成你的图片'
+    },
+    totalItems: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      waterfallRef: null, // 瀑布流容器引用
+      columnHeights: [], // 每列当前高度数组
+      columnWrapperRef: null, // 列容器引用
+      loading: false, // 加载状态
+      isComplete: false, // 是否已加载全部数据
+      renderedList: [], // 已渲染的数据列表
+      pageSize: 20, // 每次加载的数据量
+      currentPage: 1 // 当前页码
+    }
+  },
+
+  computed: {
+    // 计算列宽度（根据容器宽度和列数计算）
+    columnWidth() {
+      if (!this.waterfallRef) return 0
+      const containerWidth = this.waterfallRef.clientWidth
+      return (containerWidth - (this.columns - 1) * this.gap) / this.columns
+    }
+  },
+
+  watch: {
+    // 监听列数变化
+    columns(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.resetLayout()
+      }
+    },
+
+    // 监听数据源变化
+    list: {
+      handler(newList) {
+        this.renderedList = newList // 直接同步父组件数据（无需分页切片）
+        this.$nextTick(() => this.layoutItems())
+      },
+      deep: true
+    }
+  },
+
+  mounted() {
+    this.scrollContainer = this.$el
+    this.waterfallRef = this.$el
+    this.columnWrapperRef = this.$el.querySelector('.waterfall-column-wrapper')
+
+    this.resetLayout()
+    if (this.lazyLoad) {
+      this.scrollContainer.addEventListener('scroll', this.handleScroll)
+    }
+    window.addEventListener('resize', this.handleResize)
+  },
+
+  beforeDestroy() {
+    if (this.lazyLoad && this.scrollContainer) {
+      this.scrollContainer.removeEventListener('scroll', this.handleScroll)
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+
+  methods: {
+    // 初始化列高度数组
+    initColumnHeights() {
+      this.columnHeights = new Array(this.columns).fill(0)
+    },
+
+    // 初始化渲染数据
+    initRenderList() {
+      this.renderedList = this.list.slice(0, this.pageSize)
+      this.currentPage = 1
+      this.isComplete = this.renderedList.length >= this.list.length
+    },
+
+    // 重置瀑布流布局
+    resetLayout() {
+      this.initColumnHeights()
+      this.initRenderList()
+      this.$nextTick(() => {
+        this.layoutItems()
+      })
+    },
+
+    // 瀑布流布局算法
+    layoutItems() {
+      if (!this.columnWrapperRef || !this.waterfallRef) return
+
+      // 获取所有子元素
+      const items = this.columnWrapperRef.children
+      if (!items || items.length === 0) return
+
+      // 初始化列高度
+      this.initColumnHeights()
+
+      // 临时列高度副本用于计算
+      const tempColumnHeights = [...this.columnHeights]
+
+      // 遍历所有子元素进行布局
+      Array.from(items).forEach((item, index) => {
+        // 找到当前最短的列
+        const minHeight = Math.min(...tempColumnHeights)
+        const columnIndex = tempColumnHeights.indexOf(minHeight)
+
+        // 计算位置
+        const left = columnIndex * (this.columnWidth + this.gap)
+        const top = minHeight
+
+        // 应用样式
+        item.style.position = 'absolute'
+        item.style.width = `${this.columnWidth}px`
+        item.style.left = `${left}px`
+        item.style.top = `${top}px`
+        item.style.transition = 'all 0.3s ease'
+
+        // 更新列高度
+        tempColumnHeights[columnIndex] += item.clientHeight + this.gap
+      })
+
+      // 更新列高度
+      this.columnHeights = tempColumnHeights
+
+      // 设置容器高度
+      const maxHeight = Math.max(...tempColumnHeights)
+      this.columnWrapperRef.style.height = `${maxHeight}px`
+    },
+
+    // 滚动事件处理
+    // handleScroll() {
+    //   if (this.loading || this.isComplete) return
+
+    //   const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+    //   const windowHeight = window.innerHeight
+    //   const scrollHeight = document.documentElement.scrollHeight
+
+    //   // 判断是否触底
+    //   if (scrollTop + windowHeight >= scrollHeight - this.loadThreshold) {
+    //     this.loadMore()
+    //   }
+    // },
+
+    handleScroll() {
+      if (this.loading || (this.totalItems > 0 && this.renderedList.length >= this.totalItems)) {
+        return
+      }
+
+      // 获取滚动容器（父组件的.content-main）
+      const scrollContainer = this.$parent.$el.querySelector('.content-main') || window
+      let scrollTop, clientHeight, scrollHeight
+
+      if (scrollContainer === window) {
+        scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+        clientHeight = window.innerHeight
+        scrollHeight = document.documentElement.scrollHeight
+      } else {
+        // 关键：用滚动容器的实际尺寸计算（避免父组件padding影响）
+        scrollTop = scrollContainer.scrollTop
+        clientHeight = scrollContainer.clientHeight
+        scrollHeight = scrollContainer.scrollHeight
+      }
+
+      // 触底阈值：距离底部100px时触发加载（可调整）
+      if (scrollTop + clientHeight >= scrollHeight - this.loadThreshold) {
+        this.$emit('scroll-end') // 触发父组件的loadMoreData
+        console.log('触发加载更多')
+      }
+    },
+
+    // 加载更多数据
+    loadMore() {
+      if (this.loading || this.isComplete) return
+
+      this.loading = true
+
+      // 模拟异步加载
+      setTimeout(() => {
+        try {
+          const nextPage = this.currentPage + 1
+          const startIndex = (nextPage - 1) * this.pageSize
+          const endIndex = nextPage * this.pageSize
+
+          if (startIndex >= this.list.length) {
+            this.isComplete = true
+            return
+          }
+
+          const newItems = this.list.slice(startIndex, endIndex)
+          this.renderedList = [...this.renderedList, ...newItems]
+          this.currentPage = nextPage
+
+          // 检查是否已加载全部数据
+          if (endIndex >= this.list.length) {
+            this.isComplete = true
+          }
+
+          // 等待DOM更新后重新布局
+          this.$nextTick(() => {
+            this.layoutItems()
+          })
+        } catch (error) {
+          console.error('加载更多数据失败:', error)
+        } finally {
+          this.loading = false
+        }
+      }, 500)
+    },
+    jump(url) {
+      window.location.href = url
+    },
+    // 响应式处理窗口大小变化
+    handleResize() {
+      this.resetLayout()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.waterfall-container {
+  position: relative;
+  width: calc(100%);
+  height: 800px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.waterfall-column-wrapper {
+  position: relative;
+  width: 100%;
+
+}
+
+.waterfall-item {
+  margin-bottom: 10px;
+  break-inside: avoid;
+  box-sizing: border-box;
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.waterfall-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.item-content {
+  padding: 12px;
+}
+
+.item-image, .item-video {
+  width: 100%;
+  border-radius: 4px;
+  display: block;
+  background: #f5f5f5;
+}
+
+.item-video {
+  aspect-ratio: 9/16;
+  object-fit: cover;
+}
+
+.item-title {
+  margin-top: 8px;
+  font-size: 24px;
+  line-height: 1.4;
+  color: #333;
+  font-weight: bold;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.item-desc {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #666;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.loading-more, .load-complete {
+  text-align: center;
+  padding: 20px 0;
+  color: #999;
+  font-size: 14px;
+}
+</style>
--- a/src/views/newBookRecommend.vue
+++ b/src/views/newBookRecommend.vue
@ -0,0 +1,282 @@
+<template>
+  <!-- 新书推荐 -->
+  <div class="content-main new-main">
+    <div class="swiper-container">
+      <div class="swiper-wrapper new-book-list">
+        <div v-for="(item,index) in rankingList" :key="index" class="swiper-slide" @click="handleDetails(index)">
+          <div class="book-list-item">
+            <div class="book-img">
+              <img :src="item.imgPath" :onerror="defaultImg">
+            </div>
+            <div class="book-info">
+              <h4 class="title-item">{{ item.name }}</h4>
+              <p>作者：{{ item.author }}</p>
+              <p>出版社：{{ item.publisher }}</p>
+              <p>出版年份：{{ item.publisherdate }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="icon iconfont prev-btn">
+        <svg class="icon svg-icon" aria-hidden="true">
+          <use xlink:href="#icon-zuohua" />
+        </svg>
+      </div>
+      <div class="icon iconfont next-btn">
+        <svg class="icon svg-icon" aria-hidden="true">
+          <use xlink:href="#icon-youhua" />
+        </svg>
+      </div>
+    </div>
+    <BookDetails ref="detailDom" />
+  </div>
+</template>
+
+<script>
+import { Swiper } from 'vue-awesome-swiper'
+import 'swiper/swiper-bundle.css'
+// import { FetchNewBookRecommend, FetchCoverByISBN, getBookDetailsByISBN } from '@/api/inquiryMachine'
+import { FetchNewBook, FetchMarcByISBN, getBookDetailsByISBN } from '@/api/inquiryMachine'
+import BookDetails from './module/bookDetails.vue'
+export default {
+  name: 'NewBookRecommend',
+  components: {
+    BookDetails
+  },
+  data() {
+    return {
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
+      coverUrl: null,
+      rankingList: []
+    }
+  },
+  created() {
+    this.getNewBook()
+  },
+  mounted() {
+  },
+  methods: {
+    initSwiper() {
+      this.$nextTick(() => {
+        new Swiper('.swiper-container', {
+          touchEventsTarget: '.swiper-container',
+          slidesPerView: 5,
+          spaceBetween: 20,
+          centeredSlides: true,
+          observer: true,
+          // loop: true,
+          centeredSlidesBounds: true,
+          watchSlidesVisibility: true,
+          navigation: {
+            nextEl: '.next-btn',
+            prevEl: '.prev-btn'
+          }
+          // on: {
+          //   click: function() {
+          //     alert(this.clickedIndex)
+          //   }
+          // }
+        })
+      })
+    },
+
+    getNewBook() {
+      console.log('this.$route.query.libcode', this.$route.query.libcode)
+      const params = {
+        'libcode': this.$route.query.libcode,
+        'size': 40
+      }
+      FetchNewBook(params).then(res => {
+        // 图片地址格式  http://192.168.99.67:8080/downloadFile/qytsg/ae281b90-b100-4541-9379-3e104854652c.png
+        // 图片地址格式  http://192.168.99.72:14000/api/fileRelevant/getImg?imgType=2&imgId=c964bcab-ec82-43f0-8653-04d930d7da4a
+        const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API
+        console.log('res.data', res)
+        this.rankingList = res.map(item => {
+          if (item.imgPath) {
+            item.imgPath = linkSrc + '/api/fileRelevant/getImg?imgType=2&imgId=' + item.imgPath
+            return Promise.resolve(item)
+          } else {
+            const params = {
+              'sIsbn': item.isbn
+            }
+            return FetchMarcByISBN(params).then(response => {
+              const result = JSON.parse(response.data)[0]
+              if (result.srcurl) {
+                item.imgPath = result.srcurl
+                return item
+              } else if (result.img) {
+                item.imgPath = 'data:image/png;base64,' + result.img
+                return item
+              } else {
+                return null
+              }
+            })
+          }
+        })
+        Promise.all(this.rankingList).then(results => {
+          this.rankingList = results.filter(item => item !== null)
+          this.initSwiper()
+        })
+
+        console.log('this.rankingList', this.rankingList)
+      })
+    },
+    // getBookList() {
+    //   const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API
+    //   const params = {
+    //     libcode: this.libcode,
+    //     pageNo: 1,
+    //     pageSize: 10
+    //   }
+    //   FetchNewBookRecommend(params).then(res => {
+    //     console.log(res)
+    //     this.rankingList = res.newbookList.map((item, index) => {
+    //       if (item.nbImgPath) {
+    //         item.cover = linkSrc + '/downloadFile' + item.nbImgPath
+    //       } else {
+    //         item.cover = null
+    //       }
+    //       return item
+    //     })
+    //     this.initSwiper()
+    //   }).catch(() => {
+    //     this.$message.error('接口错误')
+    //   })
+    // },
+    // getCoverByISBN(isbn, item) {
+    //   const params = {
+    //     isbn: isbn
+    //   }
+    //   FetchCoverByISBN(params).then((res) => {
+    //     // item.cover = window.URL.createObjectURL(res)
+    //     item.cover = res
+    //     this.rankingList.push(item)
+    //     this.initSwiper()
+    //   })
+    // },
+    // 详情
+    handleDetails(index) {
+      const params = {
+        isbn: this.rankingList[index].isbn.replace(/\-/g, '')
+      }
+      getBookDetailsByISBN(params).then(res => {
+        const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API
+        res.imgPath = linkSrc + '/api/fileRelevant/getImg?imgType=2&imgId=' + res.bookCover
+        this.$refs.detailDom.bookData = res
+
+        this.$refs.detailDom.dialogVisible = true
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+.new-main{
+  position: relative;
+  padding: 0 50px;
+}
+.new-book-list{
+  color: #333;
+  .book-list-item{
+    width: 100%;
+    box-shadow: 0px 0px 20px 1px #D2D2D2;
+    border-radius: 2px 2px 2px 2px;
+  }
+  .book-img{
+    height: 6.575rem;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    img{
+      display: block;
+      width: 100%;
+      // height: 100%;
+    }
+  }
+  .book-info{
+    padding: 10px 20px;
+    h4{
+      font-weight: normal;
+      margin-bottom: 20px;
+    }
+    p{
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.icon{
+  height: 1.1em;
+}
+.prev-btn,
+.next-btn{
+  position: absolute;
+  bottom: 60px;
+  font-size: 60px;
+  // color: #71C09E;
+  z-index: 999;
+}
+
+.prev-btn{
+  left: 100px;
+}
+
+.next-btn{
+  right: 100px;
+}
+
+.swiper-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.swiper-slide {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  transition: 300ms;
+  transform: scale(0.84);
+  .book-info{
+    line-height: 20px;
+    font-size: 16px;
+    h4{
+      font-size: 20px;
+    }
+  }
+}
+
+.swiper-slide.swiper-slide-prev,
+.swiper-slide.swiper-slide-next {
+    font-size: 28px;
+    transform: scale(0.9);
+    .book-info{
+      line-height: 28px;
+      font-size: 22px;
+      h4{
+        font-size: 28px;
+      }
+    }
+}
+
+.swiper-slide-active,.swiper-slide-duplicate-active {
+  transform: scaleX(1);
+  .book-info{
+    line-height: 40px;
+    font-size: 28px;
+    h4{
+      font-size: 40px;
+    }
+  }
+}
+</style>
--- a/src/views/old.vue
+++ b/src/views/old.vue
@ -0,0 +1,158 @@
+<template>
+  <!-- 数字资源 -->
+  <div class="content-main">
+    <div class="swiper mySwiper">
+      <div class="swiper-wrapper">
+        <div v-for="(item,index) in swiperListTemp" :key="index" class="swiper-slide  img-module">
+          <div v-for="(cell,i) in item" :key="i" :class="{'item-big': i % 4 === 0 || i % 4 === 3, 'item-small': i % 4 === 1 || i % 4 === 2, 'main-item': true}" @click="jump(cell.linkUrl)">
+            <img :src="cell.image" :alt="cell.overTitle || '图片'">
+            <div class="title">
+              {{ cell.overTitle }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Swiper } from 'vue-awesome-swiper'
+import 'swiper/swiper-bundle.css'
+import { FetchQueryTopicDetails, FetchInitQueryTopicContext } from '@/api/inquiryMachine'
+
+export default {
+  name: 'WaterfallFlow',
+  data() {
+    return {
+      rankingList: []
+    }
+  },
+  computed: {
+    swiperListTemp() {
+      let index = 0
+      const count = 4
+      const arrTemp = []
+      const experts = this.rankingList
+      for (let i = 0; i < this.rankingList.length; i++) {
+        index = parseInt(i / count)
+        if (arrTemp.length <= index) {
+          arrTemp.push([])
+        }
+        arrTemp[index].push(experts[i])
+      }
+      return arrTemp
+    }
+  },
+  created() {
+    this.getQueryTopicDetails()
+  },
+  mounted() {
+    this.initSwiper()
+  },
+  methods: {
+    initSwiper() {
+      this.$nextTick(() => {
+        new Swiper('.swiper', {})
+      })
+    },
+    getQueryTopicDetails() {
+      const params = {
+        'id': this.$route.query.menuId
+      }
+      FetchQueryTopicDetails(params).then(res => {
+        console.log(res)
+        if (res && res.queryTopicList.length > 0) {
+          this.getInitQueryTopicContext(res)
+        }
+      }).catch(() => {
+        this.$message.error('接口错误')
+      })
+    },
+    getInitQueryTopicContext(result) {
+      const params = {
+        'page': 0,
+        'size': 10,
+        'libcode': result.queryMenu.libcode,
+        'topicId': result.queryTopicList[0].id,
+        'topicType': result.queryTopicList[0].type
+      }
+      FetchInitQueryTopicContext(params).then(res => {
+        const linkSrc = process.env.NODE_ENV === 'production'
+          ? window.g.ApiUrl
+          : process.env.VUE_APP_BASE_API
+
+        if (res && res.content && res.content.length > 0) {
+          this.rankingList = res.content.map(item => {
+            if (item && item.imgUrl) {
+              return {
+                ...item,
+                image: `${linkSrc}/api/fileRelevant/getImg?imgType=2&imgId=${item.imgUrl}`
+              }
+            }
+            return {
+              ...item,
+              image: null
+            }
+          })
+        } else {
+          this.rankingList = []
+        }
+      }).catch(() => {
+        this.$message.error('接口错误')
+      })
+    },
+    jump(url) {
+      window.location.href = url
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+.img-module {
+  width: 100%;
+  height: 100%;
+  padding: 40px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  align-content: space-between;
+  .main-item {
+    position: relative;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 30px;
+    }
+    .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;
+    }
+  }
+  .item-big {
+    width: 1000px;
+    height: 390px;
+  }
+  .item-small {
+    width: 800px;
+    height: 310px;
+    .title {
+      font-size: 64px;
+    }
+  }
+}
+</style>
--- a/src/views/waterfallFlow.vue
+++ b/src/views/waterfallFlow.vue
@ -0,0 +1,342 @@
+<template>
+  <!-- 数字资源 -->
+  <div class="content-main">
+    <div class="swiper mySwiper">
+      <div class="swiper-wrapper">
+        <!-- 每个swiper-slide包含4个项目 -->
+        <div v-for="(group, groupIndex) in swiperGroups" :key="groupIndex" class="swiper-slide">
+          <div class="img-module">
+            <div
+              v-for="(cell, i) in group"
+              :key="i"
+              :class="{'item-big': i % 4 === 0 || i % 4 === 3, 'item-small': i % 4 === 1 || i % 4 === 2, 'main-item': true}"
+              @click="jump(cell.linkUrl)"
+            >
+              <img v-if="cell.image" :src="cell.image" :alt="cell.overTitle || '图片'">
+              <div v-else class="placeholder" />
+              <div class="title">
+                {{ cell.overTitle }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Swiper导航按钮 -->
+      <div class="swiper-button-prev" />
+      <div class="swiper-button-next" />
+    </div>
+
+    <!-- 加载更多按钮 -->
+    <div class="load-more" @click="loadMore">
+      <span v-if="isLoading">加载中...</span>
+      <span v-else-if="hasMore">加载更多</span>
+      <!-- <span v-else>没有更多数据了</span> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { Swiper } from 'vue-awesome-swiper'
+import 'swiper/swiper-bundle.css'
+import { FetchQueryTopicDetails, FetchInitQueryTopicContext } from '@/api/inquiryMachine'
+
+export default {
+  name: 'WaterfallFlow',
+  components: {
+  },
+  data() {
+    return {
+      rankingList: [],
+      swiperInstance: null,
+      pageParams: {
+        page: 0,
+        size: 100,
+        libcode: '',
+        topicId: '',
+        topicType: ''
+      },
+
+      hasMore: true,
+      isLoading: false
+    }
+  },
+  computed: {
+    // 将数据分成每组4个的数组，保持原始样式结构
+    swiperGroups() {
+      const groups = []
+      const itemsPerGroup = 4
+
+      for (let i = 0; i < this.rankingList.length; i += itemsPerGroup) {
+        // 从当前索引开始，截取4个元素作为一组
+        groups.push(this.rankingList.slice(i, i + itemsPerGroup))
+      }
+
+      return groups
+    }
+  },
+  created() {
+    this.getQueryTopicDetails()
+  },
+  mounted() {
+    // 监听数据变化，更新Swiper
+    this.$watch('swiperGroups', (newVal) => {
+      if (newVal.length > 0) {
+        this.initSwiper()
+      }
+    }, { immediate: false })
+  },
+  methods: {
+    initSwiper() {
+      this.$nextTick(() => {
+        if (this.swiperInstance) {
+          this.swiperInstance.destroy(true, true)
+        }
+
+        // 创建新实例，保持横向滑动效果
+        this.swiperInstance = new Swiper('.mySwiper', {
+          direction: 'horizontal',
+          slidesPerView: 1, // 每次显示一个组
+          speed: 500,
+          loop: false,
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev'
+          },
+          pagination: {
+            el: '.swiper-pagination',
+            clickable: true,
+            renderBullet: function(index, className) {
+              return `<span class="${className}">${index + 1}</span>`
+            }
+          },
+          observer: true,
+          observeParents: true
+        })
+      })
+    },
+
+    getQueryTopicDetails() {
+      const params = {
+        'id': this.$route.query.menuId
+      }
+
+      FetchQueryTopicDetails(params).then(res => {
+        console.log('主题详情:', res)
+        if (res && res.queryTopicList && res.queryTopicList.length > 0) {
+          this.pageParams.libcode = res.queryMenu.libcode
+          this.pageParams.topicId = res.queryTopicList[0].id
+          this.pageParams.topicType = res.queryTopicList[0].type
+
+          this.loadMore()
+        } else {
+          this.hasMore = false
+        }
+      }).catch(() => {
+        this.$message.error('获取主题详情失败')
+        this.hasMore = false
+      })
+    },
+
+    loadMore() {
+      if (this.isLoading || !this.hasMore) return
+
+      this.isLoading = true
+
+      const params = {
+        page: this.pageParams.page,
+        size: this.pageParams.size,
+        libcode: this.pageParams.libcode,
+        topicId: this.pageParams.topicId,
+        topicType: this.pageParams.topicType
+      }
+
+      FetchInitQueryTopicContext(params).then(res => {
+        console.log('获取数据:', res)
+
+        if (res && res.content && res.content.length > 0) {
+          const linkSrc = process.env.NODE_ENV === 'production'
+            ? window.g.ApiUrl
+            : process.env.VUE_APP_BASE_API
+
+          const newItems = res.content.map(item => ({
+            ...item,
+            image: item.imgUrl ? `${linkSrc}/api/fileRelevant/getImg?imgType=2&imgId=${item.imgUrl}` : null
+          }))
+
+          this.rankingList = [...this.rankingList, ...newItems]
+
+          this.hasMore = newItems.length >= this.pageParams.size
+
+          this.pageParams.page++
+        } else {
+          this.hasMore = false
+        }
+      }).catch(() => {
+        this.$message.error('获取数据失败')
+      }).finally(() => {
+        this.isLoading = false
+      })
+    },
+
+    jump(url) {
+      if (url) {
+        window.location.href = url
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+// 保持原始样式不变
+.img-module {
+  width: 100%;
+  height: 100%;
+  padding: 40px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  align-content: space-between;
+
+  .main-item {
+    position: relative;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+
+    &:hover {
+      transform: translateY(-5px);
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 30px;
+      object-fit: cover;
+    }
+
+    .placeholder {
+      width: 100%;
+      height: 100%;
+      background-color: #f5f5f5;
+      border-radius: 30px;
+    }
+
+    .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-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
+      padding: 0 20px;
+      text-align: center;
+    }
+  }
+
+  .item-big {
+    width: 1000px;
+    height: 390px;
+  }
+
+  .item-small {
+    width: 800px;
+    height: 310px;
+
+    .title {
+      font-size: 64px;
+    }
+  }
+}
+
+// 加载更多按钮样式
+.load-more {
+  position: fixed;
+  bottom: 20px;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  padding: 30px 0;
+  font-size: 18px;
+  color: #666;
+  z-index: 9999;
+  cursor: pointer;
+  transition: color 0.3s;
+
+  &:hover {
+    color: #007bff;
+  }
+}
+
+// Swiper导航按钮样式
+.swiper-button-prev,
+.swiper-button-next {
+  width: 50px;
+  height: 50px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+
+  &::after {
+    font-size: 20px;
+    color: #333;
+  }
+}
+
+.swiper-button-prev {
+  left: 10px;
+}
+
+.swiper-button-next {
+  right: 10px;
+}
+
+.swiper-pagination {
+  bottom: 0;
+
+  .swiper-pagination-bullet {
+    width: 12px;
+    height: 12px;
+    margin: 0 6px;
+    background-color: #ddd;
+
+    &.swiper-pagination-bullet-active {
+      background-color: #007bff;
+      width: 30px;
+      border-radius: 6px;
+    }
+  }
+}
+
+@media (max-width: 1920px) {
+  .item-big {
+    width: calc(50% - 20px);
+    height: auto;
+  }
+
+  .item-small {
+    width: calc(25% - 20px);
+    height: auto;
+  }
+}
+
+@media (max-width: 1200px) {
+  .main-item .title {
+    font-size: 60px;
+  }
+
+  .item-small .title {
+    font-size: 48px;
+  }
+}
+</style>
--- a/src/views/waterfallFlow2.vue
+++ b/src/views/waterfallFlow2.vue
@ -0,0 +1,160 @@
+<template>
+  <div class="content-main" style="padding: 40px;">
+    <waterfall
+      :list="dataList"
+      :columns="columns"
+      :loading="loading"
+      :placeholder="placeholderImg"
+      :total-items="totalItems"
+      @scroll-end="loadMoreData"
+    />
+  </div>
+  <!-- <div class="controls">
+      <button :class="{ active: columns === 2 }" @click="columns = 2">2列</button>
+      <button :class="{ active: columns === 3 }" @click="columns = 3">3列</button>
+      <button :class="{ active: columns === 4 }" @click="columns = 4">4列</button>
+    </div> -->
+</template>
+
+<script>
+import Waterfall from './module/waterfall.vue'
+import { FetchQueryTopicDetails, FetchInitQueryTopicContext } from '@/api/inquiryMachine'
+
+export default {
+  components: {
+    Waterfall
+  },
+
+  data() {
+    return {
+      columns: 2,
+      dataList: [],
+      loading: false,
+      currentPage: 0,
+      pageSize: 10,
+      totalItems: 0,
+      topicInfo: null,
+      placeholderImg: require('@/assets/images/default-img.png')
+    }
+  },
+
+  created() {
+    this.getQueryTopicDetails()
+  },
+
+  methods: {
+    getQueryTopicDetails() {
+      this.loading = true
+      const params = {
+        'id': this.$route.query.menuId
+      }
+      FetchQueryTopicDetails(params).then(res => {
+        console.log('主题详情数据:', res)
+        if (res && res.queryTopicList && res.queryTopicList.length > 0) {
+          this.topicInfo = res
+          this.currentPage = 0
+          this.getInitQueryTopicContext()
+        } else {
+          this.$message.warning('未找到相关主题数据')
+          this.loading = false
+        }
+      }).catch(() => {
+        this.$message.error('获取主题详情失败')
+        this.loading = false
+      })
+    },
+
+    // 获取主题内容
+    getInitQueryTopicContext() {
+      if (!this.topicInfo) return
+
+      this.loading = true
+      const params = {
+        'page': this.currentPage,
+        'size': this.pageSize,
+        'libcode': this.topicInfo.queryMenu.libcode,
+        'topicId': this.topicInfo.queryTopicList[0].id,
+        'topicType': this.topicInfo.queryTopicList[0].type
+      }
+
+      FetchInitQueryTopicContext(params).then(res => {
+        this.loading = false
+        // console.log('res.totalElements', res.totalElements)
+        if (res.totalElements) {
+          this.totalItems = res.totalElements
+        }
+
+        const linkSrc = process.env.NODE_ENV === 'production'
+          ? window.g.ApiUrl
+          : process.env.VUE_APP_BASE_API
+
+        if (res && res.content && res.content.length > 0) {
+          const formattedData = res.content.map(item => ({
+            id: item.id || `item-${Date.now()}-${Math.random()}`,
+            type: 'image',
+            title: item.overTitle || '无标题',
+            image: item.imgUrl ? `${linkSrc}/api/fileRelevant/getImg?imgType=2&imgId=${item.imgUrl}` : this.placeholderImg,
+            linkUrl: item.linkUrl || '#'
+          }))
+
+          this.dataList = [...this.dataList, ...formattedData]
+          // console.log(`第${this.currentPage + 1}页加载后总条数:`, this.dataList.length)
+        } else {
+          this.totalItems = this.dataList.length
+        }
+      }).catch(() => {
+        this.$message.error('获取主题内容失败')
+        this.loading = false
+      })
+    },
+
+    // 加载更多数据
+    loadMoreData() {
+      if (this.dataList.length >= this.totalItems) {
+        // console.log('已加载全部5条数据')
+        return
+      }
+      if (this.loading) return
+
+      this.currentPage++
+      // console.log('开始加载第', this.currentPage + 1, '页')
+      this.getInitQueryTopicContext()
+    },
+
+    isAllDataLoaded() {
+      if (this.totalItems > 0) {
+        return this.dataList.length >= this.totalItems
+      }
+      return this.currentPage > 0 && this.dataList.length % this.pageSize !== 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+// .controls {
+//   margin-bottom: 20px;
+//   display: flex;
+//   gap: 10px;
+//   padding: 0 16px;
+// }
+
+// .controls button {
+//   padding: 8px 16px;
+//   background: #f0f0f0;
+//   border: none;
+//   border-radius: 4px;
+//   cursor: pointer;
+//   transition: all 0.2s ease;
+// }
+
+// .controls button:hover {
+//   background: #e0e0e0;
+// }
+
+// .controls button.active {
+//   background: #ff2442;
+//   color: white;
+// }
+</style>
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,61 @@
+const path = require('path')
+const resolve = dir => {
+  return path.join(__dirname, dir)
+}
+const name = '自助查询机'
+module.exports = {
+  publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
+  outputDir: 'dist',
+  assetsDir: 'static',
+  lintOnSave: process.env.NODE_ENV === 'development',
+  productionSourceMap: false,
+  devServer: {
+    port: 3000,
+    open: true,
+    overlay: {
+      warnings: false,
+      errors: true
+    },
+    proxy: {
+      '/api': {
+        target: process.env.VUE_APP_BASE_API,
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': 'api'
+        }
+      },
+      '/auth': {
+        target: process.env.VUE_APP_BASE_API,
+        changeOrigin: true,
+        pathRewrite: {
+          '^/auth': 'auth'
+        }
+      }
+    }
+  },
+  configureWebpack: {
+    name: name,
+    resolve: {
+      alias: {
+        '@': resolve('src')
+      }
+    },
+    performance: {
+      hints: 'warning',
+      // 入口起点的最大体积
+      maxEntrypointSize: 50000000,
+      // 生成文件的最大体积
+      maxAssetSize: 30000000
+    }
+  },
+  chainWebpack: config => {
+    config.resolve
+      .alias.set('_c', resolve('src/components'))
+
+    config.plugin('html')
+      .tap(args => {
+        args[0].title = name
+        return args
+      })
+  }
+}