81 changed files with 4238 additions and 0 deletions
-
14selfServiceMachine/.env.development
-
9selfServiceMachine/.env.production
-
4selfServiceMachine/.eslintignore
-
277selfServiceMachine/.eslintrc.js
-
23selfServiceMachine/.gitignore
-
41selfServiceMachine/README.md
-
11selfServiceMachine/babel.config.js
-
56selfServiceMachine/package.json
-
BINselfServiceMachine/public/favicon.ico
-
31selfServiceMachine/public/index.html
-
27selfServiceMachine/src/App.vue
-
96selfServiceMachine/src/api/bookshelf.js
-
BINselfServiceMachine/src/assets/fonts/HuXiaoBoNanShenTi.otf
-
BINselfServiceMachine/src/assets/fonts/YouSheBiaoTiHei.ttf
-
BINselfServiceMachine/src/assets/fonts/ZhenyanGB.ttf
-
20selfServiceMachine/src/assets/fonts/fonts.css
-
539selfServiceMachine/src/assets/iconfont/demo.css
-
557selfServiceMachine/src/assets/iconfont/demo_index.html
-
80selfServiceMachine/src/assets/iconfont/iconfont.css
-
1selfServiceMachine/src/assets/iconfont/iconfont.js
-
121selfServiceMachine/src/assets/iconfont/iconfont.json
-
51selfServiceMachine/src/assets/iconfont/iconfont.svg
-
BINselfServiceMachine/src/assets/iconfont/iconfont.ttf
-
BINselfServiceMachine/src/assets/iconfont/iconfont.woff
-
BINselfServiceMachine/src/assets/iconfont/iconfont.woff2
-
BINselfServiceMachine/src/assets/images/code.png
-
BINselfServiceMachine/src/assets/images/default-img.png
-
BINselfServiceMachine/src/assets/images/home/bg.png
-
BINselfServiceMachine/src/assets/images/home/nav1.png
-
BINselfServiceMachine/src/assets/images/home/nav2.png
-
BINselfServiceMachine/src/assets/images/home/nav3.png
-
BINselfServiceMachine/src/assets/images/home/nav4.png
-
BINselfServiceMachine/src/assets/images/home/nav5.png
-
BINselfServiceMachine/src/assets/images/home/top.png
-
BINselfServiceMachine/src/assets/images/home/type-bg.png
-
BINselfServiceMachine/src/assets/images/list/1.png
-
BINselfServiceMachine/src/assets/images/list/10.png
-
BINselfServiceMachine/src/assets/images/list/11.png
-
BINselfServiceMachine/src/assets/images/list/12.png
-
BINselfServiceMachine/src/assets/images/list/13.png
-
BINselfServiceMachine/src/assets/images/list/14.png
-
BINselfServiceMachine/src/assets/images/list/15.png
-
BINselfServiceMachine/src/assets/images/list/2.png
-
BINselfServiceMachine/src/assets/images/list/3.png
-
BINselfServiceMachine/src/assets/images/list/4.png
-
BINselfServiceMachine/src/assets/images/list/5.png
-
BINselfServiceMachine/src/assets/images/list/6.png
-
BINselfServiceMachine/src/assets/images/list/7.png
-
BINselfServiceMachine/src/assets/images/list/8.png
-
BINselfServiceMachine/src/assets/images/list/9.png
-
BINselfServiceMachine/src/assets/images/list/left-btn.png
-
BINselfServiceMachine/src/assets/images/list/list-rack.png
-
BINselfServiceMachine/src/assets/images/list/list-title.png
-
BINselfServiceMachine/src/assets/images/list/right-btn.png
-
BINselfServiceMachine/src/assets/images/list/top.png
-
BINselfServiceMachine/src/assets/images/local-bg.png
-
BINselfServiceMachine/src/assets/images/online.png
-
BINselfServiceMachine/src/assets/logo.png
-
436selfServiceMachine/src/assets/styles/index.scss
-
86selfServiceMachine/src/assets/styles/style.scss
-
147selfServiceMachine/src/common/flexible.js
-
35selfServiceMachine/src/main.js
-
70selfServiceMachine/src/router/index.js
-
15selfServiceMachine/src/store/index.js
-
46selfServiceMachine/src/utils/index.js
-
53selfServiceMachine/src/utils/request.js
-
26selfServiceMachine/src/utils/resizeMixins.js
-
94selfServiceMachine/src/views/authorRecommend.vue
-
178selfServiceMachine/src/views/bookRackList.vue
-
29selfServiceMachine/src/views/bookRecommend.vue
-
82selfServiceMachine/src/views/digitalResource.vue
-
40selfServiceMachine/src/views/hotBook.vue
-
191selfServiceMachine/src/views/index.vue
-
103selfServiceMachine/src/views/mixins/booklist.js
-
222selfServiceMachine/src/views/module/bookDetails.vue
-
134selfServiceMachine/src/views/module/bookList.vue
-
51selfServiceMachine/src/views/module/headerTop.vue
-
97selfServiceMachine/src/views/module/homeListItem.vue
-
37selfServiceMachine/src/views/newBook.vue
-
47selfServiceMachine/src/views/onlineBookSelection.vue
-
61selfServiceMachine/vue.config.js
@ -0,0 +1,14 @@ |
|||||
|
ENV = 'development' |
||||
|
|
||||
|
# 接口地址 |
||||
|
|
||||
|
#内网服务地址 |
||||
|
#VUE_APP_BASE_API = 'http://120.76.47.59:8080' |
||||
|
#VUE_APP_WS_API = 'ws://120.76.47.59:8080' |
||||
|
|
||||
|
# 许镇-本地服地址 |
||||
|
VUE_APP_BASE_API = 'http://192.168.99.67:8080' |
||||
|
VUE_APP_WS_API = 'ws://192.168.99.67:8081' |
||||
|
|
||||
|
# 是否启用 babel-plugin-dynamic-import-node插件 |
||||
|
VUE_CLI_BABEL_TRANSPILE_MODULES = true |
||||
@ -0,0 +1,9 @@ |
|||||
|
ENV = 'production' |
||||
|
|
||||
|
# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置 |
||||
|
# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http |
||||
|
# VUE_APP_BASE_API = 'http://192.168.99.107:7070' |
||||
|
VUE_APP_BASE_API = 'http://172.22.0.23:8080' |
||||
|
# VUE_APP_BASE_API = 'http://127.0.0.1:8080' |
||||
|
# 如果接口是 http 形式， wss 需要改为 ws |
||||
|
VUE_APP_WS_API = 'ws://192.168.99.107:7071' |
||||
@ -0,0 +1,4 @@ |
|||||
|
build/*.js |
||||
|
src/assets |
||||
|
public |
||||
|
dist |
||||
@ -0,0 +1,277 @@ |
|||||
|
module.exports = { |
||||
|
root: true, |
||||
|
parserOptions: { |
||||
|
parser: 'babel-eslint', |
||||
|
sourceType: 'module' |
||||
|
}, |
||||
|
env: { |
||||
|
browser: true, |
||||
|
node: true, |
||||
|
es6: true |
||||
|
}, |
||||
|
extends: ['plugin:vue/recommended', 'eslint:recommended'], |
||||
|
|
||||
|
rules: { |
||||
|
'vue/max-attributes-per-line': [ |
||||
|
2, |
||||
|
{ |
||||
|
singleline: 10, |
||||
|
multiline: { |
||||
|
max: 1, |
||||
|
allowFirstLine: false |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
'vue/html-self-closing': [ |
||||
|
'error', |
||||
|
{ |
||||
|
html: { |
||||
|
void: 'always', |
||||
|
normal: 'never', |
||||
|
component: 'always' |
||||
|
}, |
||||
|
svg: 'always', |
||||
|
math: 'always' |
||||
|
} |
||||
|
], |
||||
|
'vue/singleline-html-element-content-newline': 'off', |
||||
|
'vue/multiline-html-element-content-newline': 'off', |
||||
|
'vue/name-property-casing': ['error', 'PascalCase'], |
||||
|
'vue/no-v-html': 'off', |
||||
|
'accessor-pairs': 2, |
||||
|
'arrow-spacing': [ |
||||
|
2, |
||||
|
{ |
||||
|
before: true, |
||||
|
after: true |
||||
|
} |
||||
|
], |
||||
|
'block-spacing': [2, 'always'], |
||||
|
'brace-style': [ |
||||
|
2, |
||||
|
'1tbs', |
||||
|
{ |
||||
|
allowSingleLine: true |
||||
|
} |
||||
|
], |
||||
|
camelcase: [ |
||||
|
0, |
||||
|
{ |
||||
|
properties: 'always' |
||||
|
} |
||||
|
], |
||||
|
'comma-dangle': [2, 'never'], |
||||
|
'comma-spacing': [ |
||||
|
2, |
||||
|
{ |
||||
|
before: false, |
||||
|
after: true |
||||
|
} |
||||
|
], |
||||
|
'comma-style': [2, 'last'], |
||||
|
'constructor-super': 2, |
||||
|
curly: [2, 'multi-line'], |
||||
|
'dot-location': [2, 'property'], |
||||
|
'eol-last': 2, |
||||
|
eqeqeq: ['error', 'always', { null: 'ignore' }], |
||||
|
'generator-star-spacing': [ |
||||
|
2, |
||||
|
{ |
||||
|
before: true, |
||||
|
after: true |
||||
|
} |
||||
|
], |
||||
|
'handle-callback-err': [2, '^(err|error)$'], |
||||
|
indent: [ |
||||
|
2, |
||||
|
2, |
||||
|
{ |
||||
|
SwitchCase: 1 |
||||
|
} |
||||
|
], |
||||
|
'jsx-quotes': [2, 'prefer-single'], |
||||
|
'key-spacing': [ |
||||
|
2, |
||||
|
{ |
||||
|
beforeColon: false, |
||||
|
afterColon: true |
||||
|
} |
||||
|
], |
||||
|
'keyword-spacing': [ |
||||
|
2, |
||||
|
{ |
||||
|
before: true, |
||||
|
after: true |
||||
|
} |
||||
|
], |
||||
|
'new-cap': [ |
||||
|
2, |
||||
|
{ |
||||
|
newIsCap: true, |
||||
|
capIsNew: false |
||||
|
} |
||||
|
], |
||||
|
'new-parens': 2, |
||||
|
'no-array-constructor': 2, |
||||
|
'no-caller': 2, |
||||
|
'no-console': 'off', |
||||
|
'no-class-assign': 2, |
||||
|
'no-cond-assign': 2, |
||||
|
'no-const-assign': 2, |
||||
|
'no-control-regex': 0, |
||||
|
'no-delete-var': 2, |
||||
|
'no-dupe-args': 2, |
||||
|
'no-dupe-class-members': 2, |
||||
|
'no-dupe-keys': 2, |
||||
|
'no-duplicate-case': 2, |
||||
|
'no-empty-character-class': 2, |
||||
|
'no-empty-pattern': 2, |
||||
|
'no-eval': 2, |
||||
|
'no-ex-assign': 2, |
||||
|
'no-extend-native': 2, |
||||
|
'no-extra-bind': 2, |
||||
|
'no-extra-boolean-cast': 2, |
||||
|
'no-extra-parens': [2, 'functions'], |
||||
|
'no-fallthrough': 2, |
||||
|
'no-floating-decimal': 2, |
||||
|
'no-func-assign': 2, |
||||
|
'no-implied-eval': 2, |
||||
|
'no-inner-declarations': [2, 'functions'], |
||||
|
'no-invalid-regexp': 2, |
||||
|
'no-irregular-whitespace': 2, |
||||
|
'no-iterator': 2, |
||||
|
'no-label-var': 2, |
||||
|
'no-labels': [ |
||||
|
2, |
||||
|
{ |
||||
|
allowLoop: false, |
||||
|
allowSwitch: false |
||||
|
} |
||||
|
], |
||||
|
'no-lone-blocks': 2, |
||||
|
'no-mixed-spaces-and-tabs': 2, |
||||
|
'no-multi-spaces': 2, |
||||
|
'no-multi-str': 2, |
||||
|
'no-multiple-empty-lines': [ |
||||
|
2, |
||||
|
{ |
||||
|
max: 1 |
||||
|
} |
||||
|
], |
||||
|
'no-native-reassign': 2, |
||||
|
'no-negated-in-lhs': 2, |
||||
|
'no-new-object': 2, |
||||
|
'no-new-require': 2, |
||||
|
'no-new-symbol': 2, |
||||
|
'no-new-wrappers': 2, |
||||
|
'no-obj-calls': 2, |
||||
|
'no-octal': 2, |
||||
|
'no-octal-escape': 2, |
||||
|
'no-path-concat': 2, |
||||
|
'no-proto': 2, |
||||
|
'no-redeclare': 2, |
||||
|
'no-regex-spaces': 2, |
||||
|
'no-return-assign': [2, 'except-parens'], |
||||
|
'no-self-assign': 2, |
||||
|
'no-self-compare': 2, |
||||
|
'no-sequences': 2, |
||||
|
'no-shadow-restricted-names': 2, |
||||
|
'no-spaced-func': 2, |
||||
|
'no-sparse-arrays': 2, |
||||
|
'no-this-before-super': 2, |
||||
|
'no-throw-literal': 2, |
||||
|
'no-trailing-spaces': 2, |
||||
|
'no-undef': 2, |
||||
|
'no-undef-init': 2, |
||||
|
'no-unexpected-multiline': 2, |
||||
|
'no-unmodified-loop-condition': 2, |
||||
|
'no-unneeded-ternary': [ |
||||
|
2, |
||||
|
{ |
||||
|
defaultAssignment: false |
||||
|
} |
||||
|
], |
||||
|
'no-unreachable': 2, |
||||
|
'no-unsafe-finally': 2, |
||||
|
'no-unused-vars': [ |
||||
|
2, |
||||
|
{ |
||||
|
vars: 'all', |
||||
|
args: 'none' |
||||
|
} |
||||
|
], |
||||
|
'no-useless-call': 2, |
||||
|
'no-useless-computed-key': 2, |
||||
|
'no-useless-constructor': 2, |
||||
|
'no-useless-escape': 0, |
||||
|
'no-whitespace-before-property': 2, |
||||
|
'no-with': 2, |
||||
|
'one-var': [ |
||||
|
2, |
||||
|
{ |
||||
|
initialized: 'never' |
||||
|
} |
||||
|
], |
||||
|
'operator-linebreak': [ |
||||
|
2, |
||||
|
'after', |
||||
|
{ |
||||
|
overrides: { |
||||
|
'?': 'before', |
||||
|
':': 'before' |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
'padded-blocks': [2, 'never'], |
||||
|
quotes: [ |
||||
|
2, |
||||
|
'single', |
||||
|
{ |
||||
|
avoidEscape: true, |
||||
|
allowTemplateLiterals: true |
||||
|
} |
||||
|
], |
||||
|
semi: [2, 'never'], |
||||
|
'semi-spacing': [ |
||||
|
2, |
||||
|
{ |
||||
|
before: false, |
||||
|
after: true |
||||
|
} |
||||
|
], |
||||
|
'space-before-blocks': [2, 'always'], |
||||
|
'space-before-function-paren': [2, 'never'], |
||||
|
'space-in-parens': [2, 'never'], |
||||
|
'space-infix-ops': 2, |
||||
|
'space-unary-ops': [ |
||||
|
2, |
||||
|
{ |
||||
|
words: true, |
||||
|
nonwords: false |
||||
|
} |
||||
|
], |
||||
|
'spaced-comment': [ |
||||
|
2, |
||||
|
'always', |
||||
|
{ |
||||
|
markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] |
||||
|
} |
||||
|
], |
||||
|
'template-curly-spacing': [2, 'never'], |
||||
|
'use-isnan': 2, |
||||
|
'valid-typeof': 2, |
||||
|
'wrap-iife': [2, 'any'], |
||||
|
'yield-star-spacing': [2, 'both'], |
||||
|
yoda: [2, 'never'], |
||||
|
'prefer-const': 2, |
||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, |
||||
|
'object-curly-spacing': [ |
||||
|
2, |
||||
|
'always', |
||||
|
{ |
||||
|
objectsInObjects: false |
||||
|
} |
||||
|
], |
||||
|
'array-bracket-spacing': [2, 'never'] |
||||
|
} |
||||
|
} |
||||
@ -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 |
||||
@ -0,0 +1,41 @@ |
|||||
|
自助借还书机 |
||||
|
|
||||
|
```bash |
||||
|
# install dependency |
||||
|
npm install |
||||
|
|
||||
|
# develop |
||||
|
npm run serve |
||||
|
|
||||
|
# 构建生产环境 |
||||
|
npm run build |
||||
|
|
||||
|
``` |
||||
|
|
||||
|
```bash |
||||
|
## 项目结构 |
||||
|
├── src # 源代码 |
||||
|
│ ├── api # 所有请求 |
||||
|
│ ├── assets # 主题 字体等静态资源 |
||||
|
│ ├── router # 路由 |
||||
|
│ ├── views # views 所有页面 |
||||
|
│ │ ├── module |
||||
|
│ │ │ ├── bookDetails.vue # 书籍详情 |
||||
|
│ │ │ ├── bookList.vue # 书籍list |
||||
|
│ │ │ ├── homeListItem.vue # 首页-书籍list |
||||
|
│ │ ├── authorRecommend.vue # 作者推荐 |
||||
|
│ │ ├── bookRackList.vue # 本架书架 |
||||
|
│ │ ├── digitalResource.vue # 数字资源 |
||||
|
│ │ ├── hotBook.vue # 热门图书 |
||||
|
│ │ ├── index.vue # 首页 |
||||
|
│ │ ├── newBook.vue # 新书推荐 |
||||
|
│ ├── App.vue # 入口页面 |
||||
|
│ ├── main.js # 入口文件 加载组件 初始化等 注意：Vue.prototype.libcode使用 |
||||
|
├── .env.xxx # 环境变量配置 |
||||
|
├── .eslintrc.js # eslint 配置项 |
||||
|
├── .babelrc # babel-loader 配置 |
||||
|
├── .travis.yml # 自动化CI配置 |
||||
|
├── vue.config.js # vue-cli 配置 |
||||
|
├── postcss.config.js # postcss 配置 |
||||
|
└── package.json # package.json |
||||
|
``` |
||||
@ -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' |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,56 @@ |
|||||
|
{ |
||||
|
"name": "intelligence-bookshelf", |
||||
|
"version": "1.0.0", |
||||
|
"description": "智慧书架", |
||||
|
"scripts": { |
||||
|
"serve": "vue-cli-service serve", |
||||
|
"build": "vue-cli-service build", |
||||
|
"lint": "vue-cli-service lint" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"@babel/core": "^7.19.0", |
||||
|
"@babel/preset-env": "^7.19.0", |
||||
|
"@jiaminghi/data-view": "^2.7.3", |
||||
|
"@types/echarts": "^4.4.3", |
||||
|
"axios": "^0.27.2", |
||||
|
"core-js": "^3.6.4", |
||||
|
"echarts": "^4.6.0", |
||||
|
"element-ui": "^2.15.9", |
||||
|
"swiper": "^8.4.2", |
||||
|
"vue": "^2.6.11", |
||||
|
"vue-awesome": "^4.0.2", |
||||
|
"vue-router": "^3.1.5", |
||||
|
"vuex": "^3.1.2" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@vue/cli-plugin-babel": "^4.2.0", |
||||
|
"@vue/cli-plugin-eslint": "^4.2.0", |
||||
|
"@vue/cli-service": "^4.2.0", |
||||
|
"babel-eslint": "^10.0.3", |
||||
|
"babel-plugin-transform-remove-console": "^6.9.4", |
||||
|
"eslint": "^6.7.2", |
||||
|
"eslint-plugin-vue": "^6.1.2", |
||||
|
"sass": "^1.25.0", |
||||
|
"sass-loader": "^8.0.2", |
||||
|
"vue-awesome-swiper": "^3.1.3", |
||||
|
"vue-template-compiler": "^2.6.11" |
||||
|
}, |
||||
|
"eslintConfig": { |
||||
|
"root": true, |
||||
|
"env": { |
||||
|
"node": true |
||||
|
}, |
||||
|
"extends": [ |
||||
|
"plugin:vue/essential", |
||||
|
"eslint:recommended" |
||||
|
], |
||||
|
"parserOptions": { |
||||
|
"parser": "babel-eslint" |
||||
|
}, |
||||
|
"rules": {} |
||||
|
}, |
||||
|
"browserslist": [ |
||||
|
"> 1%", |
||||
|
"last 2 versions" |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,31 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> |
||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
|
<script> |
||||
|
window.onload = function() { |
||||
|
document.addEventListener('touchstart', function(event) { |
||||
|
if (event.touches.length > 1) { |
||||
|
event.preventDefault() |
||||
|
} |
||||
|
}, |
||||
|
{ passive: false } |
||||
|
) |
||||
|
document.addEventListener('gesturestart', function(event) { |
||||
|
event.preventDefault() |
||||
|
}) |
||||
|
} |
||||
|
</script> |
||||
|
<title><%= htmlWebpackPlugin.options.title %></title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<noscript> |
||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
|
</noscript> |
||||
|
<div id="app"></div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,27 @@ |
|||||
|
<template> |
||||
|
<div id="app"> |
||||
|
<keep-alive> |
||||
|
<router-view :key="key" /> |
||||
|
</keep-alive> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
computed: { |
||||
|
key() { |
||||
|
return this.$route.path + Math.random() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss"> |
||||
|
body { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
#app { |
||||
|
font-family: Avenir, Helvetica, Arial, sans-serif; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,96 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
// import qs from 'qs'
|
||||
|
|
||||
|
// 数字资源
|
||||
|
export function initNumberResoures(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/initNumberResoures', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 新书推荐
|
||||
|
export function FetchNewBookRecommend(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/newBookRecommend', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 热门图书
|
||||
|
export function FetchHotBookRecommend(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/hotBookRecommend', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 通过isbn获取图书封面
|
||||
|
export function FetchCoverByISBN(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/getCoverByISBN', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
// responseType: 'blob'
|
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 图书详情
|
||||
|
export function getBookDetailsByISBN(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/getBookDetailsByISBN', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 获取首页书架基本信息
|
||||
|
export function initSmartBookshelf(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/initSmartBookshelf', |
||||
|
method: 'get', |
||||
|
params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 智能书架-书架详情
|
||||
|
export function FetchInitBookshelfDetails(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/initBookshelfDetails', |
||||
|
method: 'get', |
||||
|
params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 作者推荐
|
||||
|
export function FetchProposeAuthor(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/proposeAuthor', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 作者推荐
|
||||
|
export function initBookshelfDetails(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/initBookshelfDetails', |
||||
|
method: 'get', |
||||
|
params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
FetchNewBookRecommend, |
||||
|
FetchCoverByISBN, |
||||
|
initNumberResoures, |
||||
|
getBookDetailsByISBN, |
||||
|
initSmartBookshelf, |
||||
|
FetchInitBookshelfDetails, |
||||
|
FetchHotBookRecommend, |
||||
|
FetchProposeAuthor, |
||||
|
initBookshelfDetails |
||||
|
} |
||||
@ -0,0 +1,20 @@ |
|||||
|
@font-face { |
||||
|
font-family: "ZhenyanGB"; |
||||
|
src: url('ZhenyanGB.ttf'); |
||||
|
font-weight: normal; |
||||
|
font-style: normal; |
||||
|
} |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: "YouSheBiaoTiHei"; |
||||
|
src: url('YouSheBiaoTiHei.ttf'); |
||||
|
font-weight: normal; |
||||
|
font-style: normal; |
||||
|
} |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: "HuXiaoBoNanShenTi"; |
||||
|
src: url('HuXiaoBoNanShenTi.otf'); |
||||
|
font-weight: normal; |
||||
|
font-style: normal; |
||||
|
} |
||||
@ -0,0 +1,539 @@ |
|||||
|
/* Logo 字体 */ |
||||
|
@font-face { |
||||
|
font-family: "iconfont logo"; |
||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
font-family: "iconfont logo"; |
||||
|
font-size: 160px; |
||||
|
font-style: normal; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
} |
||||
|
|
||||
|
/* tabs */ |
||||
|
.nav-tabs { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.nav-tabs .nav-more { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
height: 42px; |
||||
|
line-height: 42px; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
#tabs { |
||||
|
border-bottom: 1px solid #eee; |
||||
|
} |
||||
|
|
||||
|
#tabs li { |
||||
|
cursor: pointer; |
||||
|
width: 100px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
text-align: center; |
||||
|
font-size: 16px; |
||||
|
border-bottom: 2px solid transparent; |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
margin-bottom: -1px; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
#tabs .active { |
||||
|
border-bottom-color: #f00; |
||||
|
color: #222; |
||||
|
} |
||||
|
|
||||
|
.tab-container .content { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/* 页面布局 */ |
||||
|
.main { |
||||
|
padding: 30px 100px; |
||||
|
width: 960px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.main .logo { |
||||
|
color: #333; |
||||
|
text-align: left; |
||||
|
margin-bottom: 30px; |
||||
|
line-height: 1; |
||||
|
height: 110px; |
||||
|
margin-top: -50px; |
||||
|
overflow: hidden; |
||||
|
*zoom: 1; |
||||
|
} |
||||
|
|
||||
|
.main .logo a { |
||||
|
font-size: 160px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.helps { |
||||
|
margin-top: 40px; |
||||
|
} |
||||
|
|
||||
|
.helps pre { |
||||
|
padding: 20px; |
||||
|
margin: 10px 0; |
||||
|
border: solid 1px #e7e1cd; |
||||
|
background-color: #fffdef; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
.icon_lists { |
||||
|
width: 100% !important; |
||||
|
overflow: hidden; |
||||
|
*zoom: 1; |
||||
|
} |
||||
|
|
||||
|
.icon_lists li { |
||||
|
width: 100px; |
||||
|
margin-bottom: 10px; |
||||
|
margin-right: 20px; |
||||
|
text-align: center; |
||||
|
list-style: none !important; |
||||
|
cursor: default; |
||||
|
} |
||||
|
|
||||
|
.icon_lists li .code-name { |
||||
|
line-height: 1.2; |
||||
|
} |
||||
|
|
||||
|
.icon_lists .icon { |
||||
|
display: block; |
||||
|
height: 100px; |
||||
|
line-height: 100px; |
||||
|
font-size: 42px; |
||||
|
margin: 10px auto; |
||||
|
color: #333; |
||||
|
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||
|
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||
|
transition: font-size 0.25s linear, width 0.25s linear; |
||||
|
} |
||||
|
|
||||
|
.icon_lists .icon:hover { |
||||
|
font-size: 100px; |
||||
|
} |
||||
|
|
||||
|
.icon_lists .svg-icon { |
||||
|
/* 通过设置 font-size 来改变图标大小 */ |
||||
|
width: 1em; |
||||
|
/* 图标和文字相邻时，垂直对齐 */ |
||||
|
vertical-align: -0.15em; |
||||
|
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||
|
fill: currentColor; |
||||
|
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||
|
normalize.css 中也包含这行 */ |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.icon_lists li .name, |
||||
|
.icon_lists li .code-name { |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
/* markdown 样式 */ |
||||
|
.markdown { |
||||
|
color: #666; |
||||
|
font-size: 14px; |
||||
|
line-height: 1.8; |
||||
|
} |
||||
|
|
||||
|
.highlight { |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.markdown img { |
||||
|
vertical-align: middle; |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
|
||||
|
.markdown h1 { |
||||
|
color: #404040; |
||||
|
font-weight: 500; |
||||
|
line-height: 40px; |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
.markdown h2, |
||||
|
.markdown h3, |
||||
|
.markdown h4, |
||||
|
.markdown h5, |
||||
|
.markdown h6 { |
||||
|
color: #404040; |
||||
|
margin: 1.6em 0 0.6em 0; |
||||
|
font-weight: 500; |
||||
|
clear: both; |
||||
|
} |
||||
|
|
||||
|
.markdown h1 { |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
|
||||
|
.markdown h2 { |
||||
|
font-size: 22px; |
||||
|
} |
||||
|
|
||||
|
.markdown h3 { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.markdown h4 { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.markdown h5 { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.markdown h6 { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.markdown hr { |
||||
|
height: 1px; |
||||
|
border: 0; |
||||
|
background: #e9e9e9; |
||||
|
margin: 16px 0; |
||||
|
clear: both; |
||||
|
} |
||||
|
|
||||
|
.markdown p { |
||||
|
margin: 1em 0; |
||||
|
} |
||||
|
|
||||
|
.markdown>p, |
||||
|
.markdown>blockquote, |
||||
|
.markdown>.highlight, |
||||
|
.markdown>ol, |
||||
|
.markdown>ul { |
||||
|
width: 80%; |
||||
|
} |
||||
|
|
||||
|
.markdown ul>li { |
||||
|
list-style: circle; |
||||
|
} |
||||
|
|
||||
|
.markdown>ul li, |
||||
|
.markdown blockquote ul>li { |
||||
|
margin-left: 20px; |
||||
|
padding-left: 4px; |
||||
|
} |
||||
|
|
||||
|
.markdown>ul li p, |
||||
|
.markdown>ol li p { |
||||
|
margin: 0.6em 0; |
||||
|
} |
||||
|
|
||||
|
.markdown ol>li { |
||||
|
list-style: decimal; |
||||
|
} |
||||
|
|
||||
|
.markdown>ol li, |
||||
|
.markdown blockquote ol>li { |
||||
|
margin-left: 20px; |
||||
|
padding-left: 4px; |
||||
|
} |
||||
|
|
||||
|
.markdown code { |
||||
|
margin: 0 3px; |
||||
|
padding: 0 5px; |
||||
|
background: #eee; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
.markdown strong, |
||||
|
.markdown b { |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.markdown>table { |
||||
|
border-collapse: collapse; |
||||
|
border-spacing: 0px; |
||||
|
empty-cells: show; |
||||
|
border: 1px solid #e9e9e9; |
||||
|
width: 95%; |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
.markdown>table th { |
||||
|
white-space: nowrap; |
||||
|
color: #333; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.markdown>table th, |
||||
|
.markdown>table td { |
||||
|
border: 1px solid #e9e9e9; |
||||
|
padding: 8px 16px; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.markdown>table th { |
||||
|
background: #F7F7F7; |
||||
|
} |
||||
|
|
||||
|
.markdown blockquote { |
||||
|
font-size: 90%; |
||||
|
color: #999; |
||||
|
border-left: 4px solid #e9e9e9; |
||||
|
padding-left: 0.8em; |
||||
|
margin: 1em 0; |
||||
|
} |
||||
|
|
||||
|
.markdown blockquote p { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.markdown .anchor { |
||||
|
opacity: 0; |
||||
|
transition: opacity 0.3s ease; |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
|
||||
|
.markdown .waiting { |
||||
|
color: #ccc; |
||||
|
} |
||||
|
|
||||
|
.markdown h1:hover .anchor, |
||||
|
.markdown h2:hover .anchor, |
||||
|
.markdown h3:hover .anchor, |
||||
|
.markdown h4:hover .anchor, |
||||
|
.markdown h5:hover .anchor, |
||||
|
.markdown h6:hover .anchor { |
||||
|
opacity: 1; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.markdown>br, |
||||
|
.markdown>p>br { |
||||
|
clear: both; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.hljs { |
||||
|
display: block; |
||||
|
background: white; |
||||
|
padding: 0.5em; |
||||
|
color: #333333; |
||||
|
overflow-x: auto; |
||||
|
} |
||||
|
|
||||
|
.hljs-comment, |
||||
|
.hljs-meta { |
||||
|
color: #969896; |
||||
|
} |
||||
|
|
||||
|
.hljs-string, |
||||
|
.hljs-variable, |
||||
|
.hljs-template-variable, |
||||
|
.hljs-strong, |
||||
|
.hljs-emphasis, |
||||
|
.hljs-quote { |
||||
|
color: #df5000; |
||||
|
} |
||||
|
|
||||
|
.hljs-keyword, |
||||
|
.hljs-selector-tag, |
||||
|
.hljs-type { |
||||
|
color: #a71d5d; |
||||
|
} |
||||
|
|
||||
|
.hljs-literal, |
||||
|
.hljs-symbol, |
||||
|
.hljs-bullet, |
||||
|
.hljs-attribute { |
||||
|
color: #0086b3; |
||||
|
} |
||||
|
|
||||
|
.hljs-section, |
||||
|
.hljs-name { |
||||
|
color: #63a35c; |
||||
|
} |
||||
|
|
||||
|
.hljs-tag { |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.hljs-title, |
||||
|
.hljs-attr, |
||||
|
.hljs-selector-id, |
||||
|
.hljs-selector-class, |
||||
|
.hljs-selector-attr, |
||||
|
.hljs-selector-pseudo { |
||||
|
color: #795da3; |
||||
|
} |
||||
|
|
||||
|
.hljs-addition { |
||||
|
color: #55a532; |
||||
|
background-color: #eaffea; |
||||
|
} |
||||
|
|
||||
|
.hljs-deletion { |
||||
|
color: #bd2c00; |
||||
|
background-color: #ffecec; |
||||
|
} |
||||
|
|
||||
|
.hljs-link { |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
|
||||
|
/* 代码高亮 */ |
||||
|
/* PrismJS 1.15.0 |
||||
|
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
||||
|
/** |
||||
|
* prism.js default theme for JavaScript, CSS and HTML |
||||
|
* Based on dabblet (http://dabblet.com) |
||||
|
* @author Lea Verou |
||||
|
*/ |
||||
|
code[class*="language-"], |
||||
|
pre[class*="language-"] { |
||||
|
color: black; |
||||
|
background: none; |
||||
|
text-shadow: 0 1px white; |
||||
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
|
text-align: left; |
||||
|
white-space: pre; |
||||
|
word-spacing: normal; |
||||
|
word-break: normal; |
||||
|
word-wrap: normal; |
||||
|
line-height: 1.5; |
||||
|
|
||||
|
-moz-tab-size: 4; |
||||
|
-o-tab-size: 4; |
||||
|
tab-size: 4; |
||||
|
|
||||
|
-webkit-hyphens: none; |
||||
|
-moz-hyphens: none; |
||||
|
-ms-hyphens: none; |
||||
|
hyphens: none; |
||||
|
} |
||||
|
|
||||
|
pre[class*="language-"]::-moz-selection, |
||||
|
pre[class*="language-"] ::-moz-selection, |
||||
|
code[class*="language-"]::-moz-selection, |
||||
|
code[class*="language-"] ::-moz-selection { |
||||
|
text-shadow: none; |
||||
|
background: #b3d4fc; |
||||
|
} |
||||
|
|
||||
|
pre[class*="language-"]::selection, |
||||
|
pre[class*="language-"] ::selection, |
||||
|
code[class*="language-"]::selection, |
||||
|
code[class*="language-"] ::selection { |
||||
|
text-shadow: none; |
||||
|
background: #b3d4fc; |
||||
|
} |
||||
|
|
||||
|
@media print { |
||||
|
|
||||
|
code[class*="language-"], |
||||
|
pre[class*="language-"] { |
||||
|
text-shadow: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Code blocks */ |
||||
|
pre[class*="language-"] { |
||||
|
padding: 1em; |
||||
|
margin: .5em 0; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
:not(pre)>code[class*="language-"], |
||||
|
pre[class*="language-"] { |
||||
|
background: #f5f2f0; |
||||
|
} |
||||
|
|
||||
|
/* Inline code */ |
||||
|
:not(pre)>code[class*="language-"] { |
||||
|
padding: .1em; |
||||
|
border-radius: .3em; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
|
||||
|
.token.comment, |
||||
|
.token.prolog, |
||||
|
.token.doctype, |
||||
|
.token.cdata { |
||||
|
color: slategray; |
||||
|
} |
||||
|
|
||||
|
.token.punctuation { |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.namespace { |
||||
|
opacity: .7; |
||||
|
} |
||||
|
|
||||
|
.token.property, |
||||
|
.token.tag, |
||||
|
.token.boolean, |
||||
|
.token.number, |
||||
|
.token.constant, |
||||
|
.token.symbol, |
||||
|
.token.deleted { |
||||
|
color: #905; |
||||
|
} |
||||
|
|
||||
|
.token.selector, |
||||
|
.token.attr-name, |
||||
|
.token.string, |
||||
|
.token.char, |
||||
|
.token.builtin, |
||||
|
.token.inserted { |
||||
|
color: #690; |
||||
|
} |
||||
|
|
||||
|
.token.operator, |
||||
|
.token.entity, |
||||
|
.token.url, |
||||
|
.language-css .token.string, |
||||
|
.style .token.string { |
||||
|
color: #9a6e3a; |
||||
|
background: hsla(0, 0%, 100%, .5); |
||||
|
} |
||||
|
|
||||
|
.token.atrule, |
||||
|
.token.attr-value, |
||||
|
.token.keyword { |
||||
|
color: #07a; |
||||
|
} |
||||
|
|
||||
|
.token.function, |
||||
|
.token.class-name { |
||||
|
color: #DD4A68; |
||||
|
} |
||||
|
|
||||
|
.token.regex, |
||||
|
.token.important, |
||||
|
.token.variable { |
||||
|
color: #e90; |
||||
|
} |
||||
|
|
||||
|
.token.important, |
||||
|
.token.bold { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.token.italic { |
||||
|
font-style: italic; |
||||
|
} |
||||
|
|
||||
|
.token.entity { |
||||
|
cursor: help; |
||||
|
} |
||||
@ -0,0 +1,557 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta charset="utf-8"/> |
||||
|
<title>iconfont Demo</title> |
||||
|
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/> |
||||
|
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/> |
||||
|
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||
|
<link rel="stylesheet" href="demo.css"> |
||||
|
<link rel="stylesheet" href="iconfont.css"> |
||||
|
<script src="iconfont.js"></script> |
||||
|
<!-- jQuery --> |
||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||
|
<!-- 代码高亮 --> |
||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||
|
<style> |
||||
|
.main .logo { |
||||
|
margin-top: 0; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.main .logo a { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.main .logo .sub-title { |
||||
|
margin-left: 0.5em; |
||||
|
font-size: 22px; |
||||
|
color: #fff; |
||||
|
background: linear-gradient(-45deg, #3967FF, #B500FE); |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="main"> |
||||
|
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"> |
||||
|
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"> |
||||
|
|
||||
|
</a></h1> |
||||
|
<div class="nav-tabs"> |
||||
|
<ul id="tabs" class="dib-box"> |
||||
|
<li class="dib active"><span>Unicode</span></li> |
||||
|
<li class="dib"><span>Font class</span></li> |
||||
|
<li class="dib"><span>Symbol</span></li> |
||||
|
</ul> |
||||
|
|
||||
|
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3646564" target="_blank" class="nav-more">查看项目</a> |
||||
|
|
||||
|
</div> |
||||
|
<div class="tab-container"> |
||||
|
<div class="content unicode" style="display: block;"> |
||||
|
<ul class="icon_lists dib-box"> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">位置</div> |
||||
|
<div class="code-name">&#xe639;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">右滑</div> |
||||
|
<div class="code-name">&#xe635;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">左滑</div> |
||||
|
<div class="code-name">&#xe638;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">no.2</div> |
||||
|
<div class="code-name">&#xe636;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">2</div> |
||||
|
<div class="code-name">&#xe637;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">键盘</div> |
||||
|
<div class="code-name">&#xe634;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">关闭</div> |
||||
|
<div class="code-name">&#xe630;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">左</div> |
||||
|
<div class="code-name">&#xe631;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">本架图书</div> |
||||
|
<div class="code-name">&#xe632;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">热门</div> |
||||
|
<div class="code-name">&#xe633;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">右</div> |
||||
|
<div class="code-name">&#xe62f;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">通知</div> |
||||
|
<div class="code-name">&#xe628;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">no.3</div> |
||||
|
<div class="code-name">&#xe629;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">no.1</div> |
||||
|
<div class="code-name">&#xe62b;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">3</div> |
||||
|
<div class="code-name">&#xe62d;</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></span> |
||||
|
<div class="name">1</div> |
||||
|
<div class="code-name">&#xe62e;</div> |
||||
|
</li> |
||||
|
|
||||
|
</ul> |
||||
|
<div class="article markdown"> |
||||
|
<h2 id="unicode-">Unicode 引用</h2> |
||||
|
<hr> |
||||
|
|
||||
|
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> |
||||
|
<ul> |
||||
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li> |
||||
|
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li> |
||||
|
</ul> |
||||
|
<blockquote> |
||||
|
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p> |
||||
|
</blockquote> |
||||
|
<p>Unicode 使用步骤如下：</p> |
||||
|
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
||||
|
<pre><code class="language-css" |
||||
|
>@font-face { |
||||
|
font-family: 'iconfont'; |
||||
|
src: url('iconfont.woff2?t=1664428017869') format('woff2'), |
||||
|
url('iconfont.woff?t=1664428017869') format('woff'), |
||||
|
url('iconfont.ttf?t=1664428017869') format('truetype'), |
||||
|
url('iconfont.svg?t=1664428017869#iconfont') format('svg'); |
||||
|
} |
||||
|
</code></pre> |
||||
|
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
||||
|
<pre><code class="language-css" |
||||
|
>.iconfont { |
||||
|
font-family: "iconfont" !important; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
} |
||||
|
</code></pre> |
||||
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
||||
|
<pre> |
||||
|
<code class="language-html" |
||||
|
><span class="iconfont">&#x33;</span> |
||||
|
</code></pre> |
||||
|
<blockquote> |
||||
|
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
|
</blockquote> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="content font-class"> |
||||
|
<ul class="icon_lists dib-box"> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-weizhi"></span> |
||||
|
<div class="name"> |
||||
|
位置 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-weizhi |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-youhua"></span> |
||||
|
<div class="name"> |
||||
|
右滑 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-youhua |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-zuohua"></span> |
||||
|
<div class="name"> |
||||
|
左滑 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-zuohua |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-a-no21"></span> |
||||
|
<div class="name"> |
||||
|
no.2 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-a-no21 |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-a-21"></span> |
||||
|
<div class="name"> |
||||
|
2 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-a-21 |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-jianpan"></span> |
||||
|
<div class="name"> |
||||
|
键盘 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-jianpan |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-guanbi"></span> |
||||
|
<div class="name"> |
||||
|
关闭 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-guanbi |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-zuo"></span> |
||||
|
<div class="name"> |
||||
|
左 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-zuo |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-benjiatushu"></span> |
||||
|
<div class="name"> |
||||
|
本架图书 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-benjiatushu |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-remen"></span> |
||||
|
<div class="name"> |
||||
|
热门 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-remen |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-you"></span> |
||||
|
<div class="name"> |
||||
|
右 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-you |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-tongzhi"></span> |
||||
|
<div class="name"> |
||||
|
通知 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-tongzhi |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-a-no3"></span> |
||||
|
<div class="name"> |
||||
|
no.3 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-a-no3 |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-a-no1"></span> |
||||
|
<div class="name"> |
||||
|
no.1 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-a-no1 |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-a-3"></span> |
||||
|
<div class="name"> |
||||
|
3 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-a-3 |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont icon-a-1"></span> |
||||
|
<div class="name"> |
||||
|
1 |
||||
|
</div> |
||||
|
<div class="code-name">.icon-a-1 |
||||
|
</div> |
||||
|
</li> |
||||
|
|
||||
|
</ul> |
||||
|
<div class="article markdown"> |
||||
|
<h2 id="font-class-">font-class 引用</h2> |
||||
|
<hr> |
||||
|
|
||||
|
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> |
||||
|
<p>与 Unicode 使用方式相比，具有如下特点：</p> |
||||
|
<ul> |
||||
|
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> |
||||
|
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> |
||||
|
</ul> |
||||
|
<p>使用步骤如下：</p> |
||||
|
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> |
||||
|
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||
|
</code></pre> |
||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
|
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||
|
</code></pre> |
||||
|
<blockquote> |
||||
|
<p>" |
||||
|
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
|
</blockquote> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="content symbol"> |
||||
|
<ul class="icon_lists dib-box"> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-weizhi"></use> |
||||
|
</svg> |
||||
|
<div class="name">位置</div> |
||||
|
<div class="code-name">#icon-weizhi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-youhua"></use> |
||||
|
</svg> |
||||
|
<div class="name">右滑</div> |
||||
|
<div class="code-name">#icon-youhua</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-zuohua"></use> |
||||
|
</svg> |
||||
|
<div class="name">左滑</div> |
||||
|
<div class="code-name">#icon-zuohua</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-no21"></use> |
||||
|
</svg> |
||||
|
<div class="name">no.2</div> |
||||
|
<div class="code-name">#icon-a-no21</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-21"></use> |
||||
|
</svg> |
||||
|
<div class="name">2</div> |
||||
|
<div class="code-name">#icon-a-21</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-jianpan"></use> |
||||
|
</svg> |
||||
|
<div class="name">键盘</div> |
||||
|
<div class="code-name">#icon-jianpan</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-guanbi"></use> |
||||
|
</svg> |
||||
|
<div class="name">关闭</div> |
||||
|
<div class="code-name">#icon-guanbi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-zuo"></use> |
||||
|
</svg> |
||||
|
<div class="name">左</div> |
||||
|
<div class="code-name">#icon-zuo</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-benjiatushu"></use> |
||||
|
</svg> |
||||
|
<div class="name">本架图书</div> |
||||
|
<div class="code-name">#icon-benjiatushu</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-remen"></use> |
||||
|
</svg> |
||||
|
<div class="name">热门</div> |
||||
|
<div class="code-name">#icon-remen</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-you"></use> |
||||
|
</svg> |
||||
|
<div class="name">右</div> |
||||
|
<div class="code-name">#icon-you</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-tongzhi"></use> |
||||
|
</svg> |
||||
|
<div class="name">通知</div> |
||||
|
<div class="code-name">#icon-tongzhi</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-no3"></use> |
||||
|
</svg> |
||||
|
<div class="name">no.3</div> |
||||
|
<div class="code-name">#icon-a-no3</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-no1"></use> |
||||
|
</svg> |
||||
|
<div class="name">no.1</div> |
||||
|
<div class="code-name">#icon-a-no1</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-3"></use> |
||||
|
</svg> |
||||
|
<div class="name">3</div> |
||||
|
<div class="code-name">#icon-a-3</div> |
||||
|
</li> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-1"></use> |
||||
|
</svg> |
||||
|
<div class="name">1</div> |
||||
|
<div class="code-name">#icon-a-1</div> |
||||
|
</li> |
||||
|
|
||||
|
</ul> |
||||
|
<div class="article markdown"> |
||||
|
<h2 id="symbol-">Symbol 引用</h2> |
||||
|
<hr> |
||||
|
|
||||
|
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
||||
|
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> |
||||
|
<ul> |
||||
|
<li>支持多色图标了，不再受单色限制。</li> |
||||
|
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
||||
|
<li>兼容性较差，支持 IE9+，及现代浏览器。</li> |
||||
|
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li> |
||||
|
</ul> |
||||
|
<p>使用步骤如下：</p> |
||||
|
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> |
||||
|
<pre><code class="language-html"><script src="./iconfont.js"></script> |
||||
|
</code></pre> |
||||
|
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
||||
|
<pre><code class="language-html"><style> |
||||
|
.icon { |
||||
|
width: 1em; |
||||
|
height: 1em; |
||||
|
vertical-align: -0.15em; |
||||
|
fill: currentColor; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
</style> |
||||
|
</code></pre> |
||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-xxx"></use> |
||||
|
</svg> |
||||
|
</code></pre> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
<script> |
||||
|
$(document).ready(function () { |
||||
|
$('.tab-container .content:first').show() |
||||
|
|
||||
|
$('#tabs li').click(function (e) { |
||||
|
var tabContent = $('.tab-container .content') |
||||
|
var index = $(this).index() |
||||
|
|
||||
|
if ($(this).hasClass('active')) { |
||||
|
return |
||||
|
} else { |
||||
|
$('#tabs li').removeClass('active') |
||||
|
$(this).addClass('active') |
||||
|
|
||||
|
tabContent.hide().eq(index).fadeIn() |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -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"; |
||||
|
} |
||||
|
|
||||
1
selfServiceMachine/src/assets/iconfont/iconfont.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -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 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
51
selfServiceMachine/src/assets/iconfont/iconfont.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 400 | Height: 400 | Size: 2.0 KiB |
|
After Width: 440 | Height: 526 | Size: 51 KiB |
|
After Width: 1080 | Height: 1920 | Size: 214 KiB |
|
After Width: 160 | Height: 160 | Size: 28 KiB |
|
After Width: 160 | Height: 160 | Size: 28 KiB |
|
After Width: 160 | Height: 160 | Size: 29 KiB |
|
After Width: 160 | Height: 160 | Size: 31 KiB |
|
After Width: 160 | Height: 160 | Size: 27 KiB |
|
After Width: 1080 | Height: 254 | Size: 32 KiB |
|
After Width: 1140 | Height: 198 | Size: 23 KiB |
|
After Width: 97 | Height: 267 | Size: 5.9 KiB |
|
After Width: 97 | Height: 267 | Size: 8.6 KiB |
|
After Width: 97 | Height: 267 | Size: 8.4 KiB |
|
After Width: 97 | Height: 267 | Size: 6.5 KiB |
|
After Width: 97 | Height: 267 | Size: 6.1 KiB |
|
After Width: 97 | Height: 267 | Size: 5.1 KiB |
|
After Width: 97 | Height: 267 | Size: 7.2 KiB |
|
After Width: 97 | Height: 267 | Size: 5.6 KiB |
|
After Width: 97 | Height: 267 | Size: 6.5 KiB |
|
After Width: 97 | Height: 267 | Size: 3.2 KiB |
|
After Width: 97 | Height: 267 | Size: 6.6 KiB |
|
After Width: 97 | Height: 267 | Size: 5.9 KiB |
|
After Width: 97 | Height: 267 | Size: 8.0 KiB |
|
After Width: 97 | Height: 267 | Size: 9.2 KiB |
|
After Width: 97 | Height: 267 | Size: 8.7 KiB |
|
After Width: 220 | Height: 60 | Size: 1.5 KiB |
|
After Width: 1140 | Height: 137 | Size: 25 KiB |
|
After Width: 494 | Height: 76 | Size: 15 KiB |
|
After Width: 220 | Height: 60 | Size: 1.5 KiB |
|
After Width: 1080 | Height: 120 | Size: 16 KiB |
|
After Width: 83 | Height: 346 | Size: 6.5 KiB |
|
After Width: 1080 | Height: 1920 | Size: 736 KiB |
|
After Width: 200 | Height: 200 | Size: 6.7 KiB |
@ -0,0 +1,436 @@ |
|||||
|
#bookshelf{ |
||||
|
width: 100%; |
||||
|
height: 100vh; |
||||
|
font-size: 30px; |
||||
|
// background: url('~@/assets/images/home/bg.png') no-repeat left top; |
||||
|
// background-size: cover; |
||||
|
overflow: hidden; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
//c-s壳占位 |
||||
|
.top-bg{ |
||||
|
height: 60px; |
||||
|
background-color: #3F92F6; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.online-active{ |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: calc(1920px - 60px); |
||||
|
background: url('~@/assets/images/online.png') no-repeat left top; |
||||
|
background-size: 100% 100%; |
||||
|
img{ |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
left: 134px; |
||||
|
bottom: 24px; |
||||
|
width: 180px; |
||||
|
height: 180px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
// 首页 |
||||
|
.bookshelf-header{ |
||||
|
position: relative; |
||||
|
height: 254px; |
||||
|
text-align: center; |
||||
|
background: url('~@/assets/images/home/top.png') no-repeat left top; |
||||
|
background-size: cover; |
||||
|
z-index: 9; |
||||
|
h2{ |
||||
|
height: 118px; |
||||
|
line-height: 118px; |
||||
|
font-family: "YouSheBiaoTiHei"; |
||||
|
font-weight: normal; |
||||
|
font-size: 60px; |
||||
|
} |
||||
|
.shelf-num{ |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
top: 30px; |
||||
|
right: 40px; |
||||
|
width: 180px; |
||||
|
height: 58px; |
||||
|
line-height: 60px; |
||||
|
background: linear-gradient(90deg, #ACDAFF 0%, #9BCEFF 100%); |
||||
|
border-radius: 29px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.book-category{ |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
justify-items: center; |
||||
|
text-align: center; |
||||
|
height: 198px; |
||||
|
line-height: 168px; |
||||
|
padding: 0 120px; |
||||
|
margin-top: -132px; |
||||
|
background: url('~@/assets/images/home/type-bg.png') no-repeat center center; |
||||
|
background-size: cover; |
||||
|
z-index: 99; |
||||
|
p{ |
||||
|
flex: 1; |
||||
|
font-size: 60px; |
||||
|
letter-spacing: 6px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.book-nav{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
text-align: center; |
||||
|
padding: 0 40px; |
||||
|
margin-bottom: 30px; |
||||
|
li{ |
||||
|
flex: 1; |
||||
|
font-size: 36px; |
||||
|
img{ |
||||
|
display: inline-block; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 本架图书 |
||||
|
.book-rack{ |
||||
|
height: 770px; |
||||
|
margin: 0 40px; |
||||
|
padding: 0 40px 40px 40px; |
||||
|
background-color: #fff; |
||||
|
border-radius: 30px; |
||||
|
box-shadow: 0px 0px 20px 1px #B8D3FF; |
||||
|
} |
||||
|
.list-top{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
justify-items: center; |
||||
|
align-items: center; |
||||
|
padding: 30px 0 25px 0; |
||||
|
font-size: 36px; |
||||
|
.list-top-title{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
font-size: 40px; |
||||
|
line-height: 50px; |
||||
|
.icon{ |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
} |
||||
|
.more{ |
||||
|
.iconfont{ |
||||
|
font-size: 30px; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 本架图书list |
||||
|
.rack-list{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.list-item{ |
||||
|
border: 1px solid #A2CCFF; |
||||
|
border-radius: 4px; |
||||
|
overflow: hidden; |
||||
|
.book-info{ |
||||
|
position: relative; |
||||
|
} |
||||
|
.book-title{ |
||||
|
font-weight: normal; |
||||
|
line-height: 40px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.book-author{ |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
.book-num{ |
||||
|
position: absolute; |
||||
|
bottom: 20px; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
font-size: 20px; |
||||
|
color: #999; |
||||
|
.icon{ |
||||
|
width: 20px; |
||||
|
height: 22px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.list-big{ |
||||
|
.list-item{ |
||||
|
width: 435px; |
||||
|
height: 625px; |
||||
|
margin-right: 45px; |
||||
|
.book-img{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
height: 520px; |
||||
|
border-radius: 4px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
img{ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
max-height: 100%; |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
.book-info{ |
||||
|
padding: 12px 0 0 44px; |
||||
|
} |
||||
|
.book-num{ |
||||
|
right: 16px; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.other-list{ |
||||
|
.book-img{ |
||||
|
width: 244px; |
||||
|
} |
||||
|
.list-middle .list-item .book-info{ |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.list-middle{ |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
height: 625px; |
||||
|
.list-item{ |
||||
|
display: flex; |
||||
|
height: calc(100%/2 - 20px); |
||||
|
justify-content: flex-start; |
||||
|
.book-img{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 244px; |
||||
|
height: 100%; |
||||
|
margin-right: 20px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
img{ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
max-height: calc(100%); |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
.book-info{ |
||||
|
padding: 20px 10px 0 0; |
||||
|
} |
||||
|
.book-num{ |
||||
|
left: 0; |
||||
|
bottom: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 新书推荐 |
||||
|
.new-recommend{ |
||||
|
height: 448px; |
||||
|
margin: 20px 40px 0 40px; |
||||
|
} |
||||
|
|
||||
|
.list-small{ |
||||
|
display: flex; |
||||
|
justify-items: center; |
||||
|
margin-left: -40px; |
||||
|
.list-item{ |
||||
|
width: 200px; |
||||
|
border: none; |
||||
|
margin-left: 40px; |
||||
|
.book-img{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
height: 240px; |
||||
|
margin-bottom: 10px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
img{ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
max-height: calc(100%); |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
.book-title{ |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//本架图书页面 |
||||
|
.rack-box{ |
||||
|
padding: 30px 0 0 0; |
||||
|
width: 100%; |
||||
|
.rack-item{ |
||||
|
position: relative; |
||||
|
margin-bottom: 30px; |
||||
|
overflow: hidden; |
||||
|
.rack-box-list{ |
||||
|
// display: flex; |
||||
|
// justify-content: space-between; |
||||
|
height: 314px; |
||||
|
padding: 0 40px; |
||||
|
width: 1080px; |
||||
|
background: url('~@/assets/images/list/list-rack.png') no-repeat -31px 205px; |
||||
|
overflow: hidden; |
||||
|
// overflow-x: auto; |
||||
|
white-space: nowrap; |
||||
|
.list-item{ |
||||
|
margin-right: 1.7px; |
||||
|
display: inline-block; |
||||
|
border: none; |
||||
|
height: 254px; |
||||
|
width: 65px; |
||||
|
background-size: 93px 266px; |
||||
|
position: relative; |
||||
|
.box-txt{ |
||||
|
position: absolute; |
||||
|
top: 12%; |
||||
|
left: 50%; |
||||
|
transform: translateX(-40%); |
||||
|
.book-name,.book-writer{ |
||||
|
writing-mode:vertical-rl; |
||||
|
height: 235px; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
.book-name{ |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
.book-writer{ |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.rack-floor{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: 2px; |
||||
|
height: 50px; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
color: #fff; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 40px; |
||||
|
z-index: 999; |
||||
|
.icon-l,.icon-r{ |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bookshelf-header .icon-l{ |
||||
|
color: #fff; |
||||
|
font-size: 40px; |
||||
|
position: absolute; |
||||
|
left: 40px; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
} |
||||
|
.bookshelf-header .rack-direct{ |
||||
|
position: absolute; |
||||
|
top: 30px; |
||||
|
right: 40px; |
||||
|
width: 220px; |
||||
|
height: 60px; |
||||
|
line-height: 60px; |
||||
|
// background: linear-gradient(90deg, #ACDAFF 0%, #9BCEFF 100%); |
||||
|
background: #fff; |
||||
|
border-radius: 30px; |
||||
|
display: flex; |
||||
|
padding: 6px; |
||||
|
span{ |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
line-height: 48px; |
||||
|
&.rack-direct-active{ |
||||
|
background: linear-gradient(267deg, #7285FB 0%, #7285FB 9%, #4377FE 55%, #2487FF 100%); |
||||
|
z-index: 1; |
||||
|
border-radius: 24px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.rack-box-list .list-item{ |
||||
|
&:nth-child(15n+1){ |
||||
|
background: url('~@/assets/images/list/1.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
&:nth-child(15n+2){ |
||||
|
background: url('~@/assets/images/list/2.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
&:nth-child(15n+3){ |
||||
|
background: url('~@/assets/images/list/3.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
&:nth-child(15n+4){ |
||||
|
background: url('~@/assets/images/list/4.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
&:nth-child(15n+5){ |
||||
|
background: url('~@/assets/images/list/5.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
&:nth-child(15n+6){ |
||||
|
background: url('~@/assets/images/list/6.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
&:nth-child(15n+7){ |
||||
|
background: url('~@/assets/images/list/7.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
&:nth-child(15n+8){ |
||||
|
background: url('~@/assets/images/list/8.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
&:nth-child(15n+9){ |
||||
|
background: url('~@/assets/images/list/9.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
&:nth-child(15n+10){ |
||||
|
background: url('~@/assets/images/list/10.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
&:nth-child(15n+11){ |
||||
|
background: url('~@/assets/images/list/11.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
&:nth-child(15n+12){ |
||||
|
background: url('~@/assets/images/list/12.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
&:nth-child(15n+13){ |
||||
|
background: url('~@/assets/images/list/13.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
&:nth-child(15n+14){ |
||||
|
background: url('~@/assets/images/list/14.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
&:nth-child(15n+15){ |
||||
|
background: url('~@/assets/images/list/15.png') no-repeat -15px -13px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
::-webkit-scrollbar { |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
} |
||||
@ -0,0 +1,86 @@ |
|||||
|
@import '~@/assets/iconfont/iconfont.css'; |
||||
|
|
||||
|
// 全局样式 |
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
list-style-type: none; |
||||
|
box-sizing: border-box; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
html { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; |
||||
|
background-color: #f1f1f1; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
color: #333; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
ul{ |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
li{ |
||||
|
list-style: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.clearfix { |
||||
|
&::after { |
||||
|
content: ""; |
||||
|
display: table; |
||||
|
height: 0; |
||||
|
line-height: 0; |
||||
|
visibility: hidden; |
||||
|
clear: both; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/**滚动条的宽度*/ |
||||
|
::-webkit-scrollbar { |
||||
|
width: 4px; |
||||
|
height: 4px; |
||||
|
} |
||||
|
|
||||
|
//滚动条的滑块 |
||||
|
::-webkit-scrollbar-thumb { |
||||
|
background-color: #13439E; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
width: 1em; |
||||
|
height: 1em; |
||||
|
vertical-align: -0.15em; |
||||
|
fill: currentColor; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
//浮动 |
||||
|
.float-r { |
||||
|
float: right; |
||||
|
} |
||||
|
|
||||
|
//文章一行显示，多余省略号显示 |
||||
|
.title-item { |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 1; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
.rotate:before { |
||||
|
display: inline-block; |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
@ -0,0 +1,147 @@ |
|||||
|
(function(win, lib) { |
||||
|
var doc = win.document |
||||
|
var docEl = doc.documentElement |
||||
|
var metaEl = doc.querySelector('meta[name="viewport"]') |
||||
|
var flexibleEl = doc.querySelector('meta[name="flexible"]') |
||||
|
var dpr = 0 |
||||
|
var scale = 0 |
||||
|
var tid |
||||
|
var flexible = lib.flexible || (lib.flexible = {}) |
||||
|
|
||||
|
if (metaEl) { |
||||
|
console.warn('将根据已有的meta标签来设置缩放比例') |
||||
|
var match = metaEl |
||||
|
.getAttribute('content') |
||||
|
// eslint-disable-next-line no-useless-escape
|
||||
|
.match(/initial\-scale=([\d\.]+)/) |
||||
|
if (match) { |
||||
|
scale = parseFloat(match[1]) |
||||
|
dpr = parseInt(1 / scale) |
||||
|
} |
||||
|
} else if (flexibleEl) { |
||||
|
var content = flexibleEl.getAttribute('content') |
||||
|
if (content) { |
||||
|
// eslint-disable-next-line no-useless-escape
|
||||
|
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/) |
||||
|
// eslint-disable-next-line no-useless-escape
|
||||
|
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/) |
||||
|
if (initialDpr) { |
||||
|
dpr = parseFloat(initialDpr[1]) |
||||
|
scale = parseFloat((1 / dpr).toFixed(2)) |
||||
|
} |
||||
|
if (maximumDpr) { |
||||
|
dpr = parseFloat(maximumDpr[1]) |
||||
|
scale = parseFloat((1 / dpr).toFixed(2)) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (!dpr && !scale) { |
||||
|
// eslint-disable-next-line no-unused-vars
|
||||
|
var isAndroid = win.navigator.appVersion.match(/android/gi) |
||||
|
var isIPhone = win.navigator.appVersion.match(/iphone/gi) |
||||
|
var devicePixelRatio = win.devicePixelRatio |
||||
|
if (isIPhone) { |
||||
|
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
|
||||
|
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { |
||||
|
dpr = 3 |
||||
|
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { |
||||
|
dpr = 2 |
||||
|
} else { |
||||
|
dpr = 1 |
||||
|
} |
||||
|
} else { |
||||
|
// 其他设备下，仍旧使用1倍的方案
|
||||
|
dpr = 1 |
||||
|
} |
||||
|
scale = 1 / dpr |
||||
|
} |
||||
|
|
||||
|
docEl.setAttribute('data-dpr', dpr) |
||||
|
if (!metaEl) { |
||||
|
metaEl = doc.createElement('meta') |
||||
|
metaEl.setAttribute('name', 'viewport') |
||||
|
metaEl.setAttribute( |
||||
|
'content', |
||||
|
'initial-scale=' + |
||||
|
scale + |
||||
|
', maximum-scale=' + |
||||
|
scale + |
||||
|
', minimum-scale=' + |
||||
|
scale + |
||||
|
', user-scalable=no' |
||||
|
) |
||||
|
if (docEl.firstElementChild) { |
||||
|
docEl.firstElementChild.appendChild(metaEl) |
||||
|
} else { |
||||
|
var wrap = doc.createElement('div') |
||||
|
wrap.appendChild(metaEl) |
||||
|
doc.write(wrap.innerHTML) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function refreshRem() { |
||||
|
var width = docEl.getBoundingClientRect().width |
||||
|
// 最小1366px，最大适配2560px
|
||||
|
if (width / dpr < 1366) { |
||||
|
width = 1366 * dpr |
||||
|
} else if (width / dpr > 2560) { |
||||
|
width = 2560 * dpr |
||||
|
} |
||||
|
// 设置成24等份，设计稿时1920px的，这样1rem就是54px
|
||||
|
var rem = width / 24 |
||||
|
docEl.style.fontSize = rem + 'px' |
||||
|
flexible.rem = win.rem = rem |
||||
|
} |
||||
|
|
||||
|
win.addEventListener( |
||||
|
'resize', |
||||
|
function() { |
||||
|
clearTimeout(tid) |
||||
|
tid = setTimeout(refreshRem, 300) |
||||
|
}, |
||||
|
false |
||||
|
) |
||||
|
win.addEventListener( |
||||
|
'pageshow', |
||||
|
function(e) { |
||||
|
if (e.persisted) { |
||||
|
clearTimeout(tid) |
||||
|
tid = setTimeout(refreshRem, 300) |
||||
|
} |
||||
|
}, |
||||
|
false |
||||
|
) |
||||
|
|
||||
|
if (doc.readyState === 'complete') { |
||||
|
doc.body.style.fontSize = 12 * dpr + 'px' |
||||
|
} else { |
||||
|
doc.addEventListener( |
||||
|
'DOMContentLoaded', |
||||
|
// eslint-disable-next-line no-unused-vars
|
||||
|
function(e) { |
||||
|
doc.body.style.fontSize = 12 * dpr + 'px' |
||||
|
}, |
||||
|
false |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
refreshRem() |
||||
|
|
||||
|
flexible.dpr = win.dpr = dpr |
||||
|
flexible.refreshRem = refreshRem |
||||
|
flexible.rem2px = function(d) { |
||||
|
var val = parseFloat(d) * this.rem |
||||
|
if (typeof d === 'string' && d.match(/rem$/)) { |
||||
|
val += 'px' |
||||
|
} |
||||
|
return val |
||||
|
} |
||||
|
flexible.px2rem = function(d) { |
||||
|
var val = parseFloat(d) / this.rem |
||||
|
if (typeof d === 'string' && d.match(/px$/)) { |
||||
|
val += 'rem' |
||||
|
} |
||||
|
return val |
||||
|
} |
||||
|
})(window, window['lib'] || (window['lib'] = {})) |
||||
@ -0,0 +1,35 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import App from './App.vue' |
||||
|
import router from './router' |
||||
|
import store from './store' |
||||
|
|
||||
|
// element-ui
|
||||
|
import ElementUI from 'element-ui' |
||||
|
import 'element-ui/lib/theme-chalk/index.css' |
||||
|
Vue.use(ElementUI) |
||||
|
// 适配flex
|
||||
|
import '@/common/flexible.js' |
||||
|
|
||||
|
// 引入全局css
|
||||
|
import './assets/styles/style.scss' |
||||
|
import './assets/iconfont/iconfont.js' |
||||
|
import './assets/fonts/fonts.css' |
||||
|
|
||||
|
import axios from 'axios' |
||||
|
Vue.prototype.$axios = axios |
||||
|
|
||||
|
// 馆代码 1201为东西湖馆代码 / 本地测试用FTZN
|
||||
|
// Vue.prototype.libcode = 'FTZN'
|
||||
|
Vue.prototype.libcode = '1201' |
||||
|
|
||||
|
// 引入echart
|
||||
|
import echarts from 'echarts' |
||||
|
Vue.prototype.$echarts = echarts |
||||
|
|
||||
|
Vue.config.productionTip = false |
||||
|
|
||||
|
new Vue({ |
||||
|
router, |
||||
|
store, |
||||
|
render: (h) => h(App) |
||||
|
}).$mount('#app') |
||||
@ -0,0 +1,70 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import VueRouter from 'vue-router' |
||||
|
|
||||
|
Vue.use(VueRouter) |
||||
|
|
||||
|
const routes = [ |
||||
|
{ |
||||
|
path: '/', |
||||
|
name: 'onlineBookSelection', |
||||
|
component: () => import('@/views/onlineBookSelection.vue'), |
||||
|
meta: { |
||||
|
title: '在线选书' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
path: '/bookRecommend', |
||||
|
name: 'bookRecommend', |
||||
|
component: () => import('@/views/bookRecommend.vue'), |
||||
|
meta: { |
||||
|
title: '书单推荐' |
||||
|
} |
||||
|
} |
||||
|
// {
|
||||
|
// path: '/CurrentRackBook',
|
||||
|
// name: 'CurrentRackBook',
|
||||
|
// component: () => import('@/views/bookRackList.vue'),
|
||||
|
// meta: {
|
||||
|
// title: '本架图书'
|
||||
|
// }
|
||||
|
// },
|
||||
|
// {
|
||||
|
// path: '/NewBook',
|
||||
|
// name: 'NewBook',
|
||||
|
// component: () => import('@/views/newBook.vue'),
|
||||
|
// meta: {
|
||||
|
// title: '新书推荐'
|
||||
|
// }
|
||||
|
// },
|
||||
|
// {
|
||||
|
// path: '/HotBook',
|
||||
|
// name: 'HotBook',
|
||||
|
// component: () => import('@/views/hotBook.vue'),
|
||||
|
// meta: {
|
||||
|
// title: '热门图书'
|
||||
|
// }
|
||||
|
// },
|
||||
|
// {
|
||||
|
// path: '/AuthorRecommend',
|
||||
|
// name: 'AuthorRecommend',
|
||||
|
// component: () => import('@/views/authorRecommend.vue'),
|
||||
|
// meta: {
|
||||
|
// title: '作者推荐'
|
||||
|
// }
|
||||
|
// },
|
||||
|
// {
|
||||
|
// path: '/DigitalResource',
|
||||
|
// name: 'DigitalResource',
|
||||
|
// component: () => import('@/views/digitalResource.vue'),
|
||||
|
// meta: {
|
||||
|
// title: '数字资源'
|
||||
|
// }
|
||||
|
// }
|
||||
|
] |
||||
|
|
||||
|
const router = new VueRouter({ |
||||
|
mode: 'hash', |
||||
|
routes |
||||
|
}) |
||||
|
|
||||
|
export default router |
||||
@ -0,0 +1,15 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import Vuex from 'vuex' |
||||
|
|
||||
|
Vue.use(Vuex) |
||||
|
|
||||
|
export default new Vuex.Store({ |
||||
|
state: { |
||||
|
}, |
||||
|
mutations: { |
||||
|
}, |
||||
|
actions: { |
||||
|
}, |
||||
|
modules: { |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,46 @@ |
|||||
|
export function debounce(func, wait, immediate) { |
||||
|
let timeout, args, context, timestamp, result |
||||
|
|
||||
|
const later = function() { |
||||
|
// 据上一次触发时间间隔
|
||||
|
const last = +new Date() - timestamp |
||||
|
|
||||
|
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
|
||||
|
if (last < wait && last > 0) { |
||||
|
timeout = setTimeout(later, wait - last) |
||||
|
} else { |
||||
|
timeout = null |
||||
|
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
|
||||
|
if (!immediate) { |
||||
|
result = func.apply(context, args) |
||||
|
if (!timeout) context = args = null |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return function(...args) { |
||||
|
context = this |
||||
|
timestamp = +new Date() |
||||
|
const callNow = immediate && !timeout |
||||
|
// 如果延时不存在，重新设定延时
|
||||
|
if (!timeout) timeout = setTimeout(later, wait) |
||||
|
if (callNow) { |
||||
|
result = func.apply(context, args) |
||||
|
context = args = null |
||||
|
} |
||||
|
|
||||
|
return result |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 获取当前日期时间
|
||||
|
export function getCurrentTime() { |
||||
|
const yy = new Date().getFullYear() |
||||
|
const mm = new Date().getMonth() + 1 |
||||
|
const dd = new Date().getDate() |
||||
|
const hh = new Date().getHours() |
||||
|
const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes() |
||||
|
const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds() |
||||
|
const time = yy + '年' + mm + '月' + dd + '日 ' + hh + ':' + mf + ':' + ss |
||||
|
return time |
||||
|
} |
||||
@ -0,0 +1,53 @@ |
|||||
|
import axios from 'axios' |
||||
|
import { Message } from 'element-ui' |
||||
|
|
||||
|
// 创建axios实例
|
||||
|
const service = axios.create({ |
||||
|
baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url
|
||||
|
timeout: 1000 * 30, // 请求超时时间
|
||||
|
headers: { |
||||
|
'Content-Type': 'application/json' |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// request拦截器
|
||||
|
service.interceptors.request.use( |
||||
|
config => { |
||||
|
// if (getToken()) {
|
||||
|
// config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
|
// }
|
||||
|
const token = '' // 登录后生成用于识别用户身份，项目不需要直接去掉
|
||||
|
config.headers['Authorization'] = token || '' |
||||
|
return config |
||||
|
}, |
||||
|
error => { |
||||
|
console.error('error: ', error) |
||||
|
Promise.reject(error) |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
// response 拦截器
|
||||
|
service.interceptors.response.use( |
||||
|
response => { |
||||
|
const errorMsg = response.data.errMsg |
||||
|
if (response.status === 200) { |
||||
|
if (response.data instanceof Blob) { |
||||
|
return response.data |
||||
|
} else if (response.data.data) { |
||||
|
return response.data.data |
||||
|
} else { |
||||
|
return response.data |
||||
|
} |
||||
|
} else { |
||||
|
Message.error({ |
||||
|
message: errorMsg, |
||||
|
duration: 5000 |
||||
|
}) |
||||
|
Promise.reject() |
||||
|
} |
||||
|
}, |
||||
|
error => { |
||||
|
return Promise.reject(error) |
||||
|
} |
||||
|
) |
||||
|
export default service |
||||
@ -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) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,94 @@ |
|||||
|
<template> |
||||
|
<div id="bookshelf"> |
||||
|
<div class="bookshelf-header" style="height:120px"> |
||||
|
<!-- <router-link to="/"> |
||||
|
<span class="icon iconfont icon-l"></span> |
||||
|
</router-link> --> |
||||
|
<span class="icon iconfont icon-l" @click="goBack()"></span> |
||||
|
<h2>作者推荐</h2> |
||||
|
</div> |
||||
|
<div class="main"> |
||||
|
<div v-for="(item,index) in authorList" :key="index" class="book-rack"> |
||||
|
<span class="author-index">{{ index+1 }}</span> |
||||
|
<div class="author-brief"> |
||||
|
<h3>{{ item.paAuthor }}</h3> |
||||
|
<p>{{ item.paExplain }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchProposeAuthor } from '@/api/bookshelf' |
||||
|
|
||||
|
export default { |
||||
|
name: 'AuthorRecommend', |
||||
|
components: { |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
authorList: [] |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getAuthor() |
||||
|
}, |
||||
|
methods: { |
||||
|
goBack() { |
||||
|
this.$router.go(-1) |
||||
|
}, |
||||
|
getAuthor() { |
||||
|
const params = { |
||||
|
libcode: this.libcode, |
||||
|
pageNo: 1, |
||||
|
pageSize: 22 |
||||
|
} |
||||
|
FetchProposeAuthor(params).then(res => { |
||||
|
this.authorList = res.proposeAuthorList |
||||
|
}).catch(() => { |
||||
|
this.$message.error('接口错误') |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
.main{ |
||||
|
padding-top: 40px; |
||||
|
height: calc(100vh - 210px); |
||||
|
overflow: hidden; |
||||
|
overflow-y:auto ; |
||||
|
.book-rack{ |
||||
|
height: 387px; |
||||
|
margin-bottom: 40px; |
||||
|
padding: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
color: #333; |
||||
|
.author-index{ |
||||
|
width: 120px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.author-brief{ |
||||
|
flex: 1; |
||||
|
padding: 20px 50px 20px 0; |
||||
|
h3{ |
||||
|
font-size: 40px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
p{ |
||||
|
font-size: 30px; |
||||
|
overflow: hidden; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 4; |
||||
|
line-clamp: 4; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,178 @@ |
|||||
|
<template> |
||||
|
<div id="bookshelf"> |
||||
|
<div class="bookshelf-header" style="height:120px"> |
||||
|
<!-- <router-link to="/"> |
||||
|
<span class="icon iconfont icon-l"></span> |
||||
|
</router-link> --> |
||||
|
<span class="icon iconfont icon-l" @click="goBack()"></span> |
||||
|
<h2>本架图书</h2> |
||||
|
<div class="rack-direct"> |
||||
|
<span :class="classnameL" @click="handleDirect(-1)">左</span> |
||||
|
<span :class="classnameR" @click="handleDirect(1)">右</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-loading="loading" class="rack-box"> |
||||
|
<div v-for="(item, index) in listData" :key="index" class="rack-item"> |
||||
|
<div :class="['swiper'+index,'rack-box-list']"> |
||||
|
<div class="swiper-wrapper"> |
||||
|
<div v-for="eitem in bookList[item]" :key="eitem.id" class="list-item swiper-slide" @click="handleDetails(eitem)"> |
||||
|
<div class="box-txt"> |
||||
|
<span class="book-name">{{ eitem.bookName }}</span> |
||||
|
<span class="book-writer">{{ eitem.bookAuthor }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="rack-floor"> |
||||
|
<span :class="['icon','iconfont','icon-l'+index]" @click="handlePage(-1)"></span> |
||||
|
<p><span style="margin-right:25px">第{{ index+1 }}层</span><span>(共{{ bookList[item]?bookList[item].length:0 }}本)</span></p> |
||||
|
<span :class="['icon','iconfont','icon-r'+index]" @click="handlePage(1)"></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<BookDetails ref="detailDom" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { initBookshelfDetails, getBookDetailsByISBN } from '@/api/bookshelf' |
||||
|
import BookDetails from './module/bookDetails.vue' |
||||
|
import { Swiper } from 'vue-awesome-swiper' |
||||
|
import 'swiper/swiper-bundle.css' |
||||
|
|
||||
|
export default { |
||||
|
name: 'CurrentRackBook', |
||||
|
components: { |
||||
|
BookDetails |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
listData: [], |
||||
|
bookList: {}, |
||||
|
classnameL: 'rack-direct-active', |
||||
|
classnameR: null |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.initBookshelfDetails(-1) |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
initSwiper() { |
||||
|
this.$nextTick(() => { |
||||
|
for (const key in this.bookList) { |
||||
|
this.bookList[key].forEach((el, index) => { |
||||
|
new Swiper('.swiper' + index, { |
||||
|
slidesPerView: 'auto', |
||||
|
slidesPerGroup: 15, |
||||
|
observer: true, |
||||
|
navigation: { |
||||
|
nextEl: '.icon-r' + index, |
||||
|
prevEl: '.icon-l' + index |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 左右架切换之后，初始化swiper位置 |
||||
|
setSwiperInit() { |
||||
|
setTimeout(() => { |
||||
|
this.listData.forEach((item, index) => { |
||||
|
document.getElementsByClassName('swiper-wrapper')[index].style.transform = 'translate3d(0px, 0px, 0px)' |
||||
|
}) |
||||
|
}, 50) |
||||
|
}, |
||||
|
handleDetails(itemData) { |
||||
|
const params = { |
||||
|
isbn: itemData.isbn.replace(/\-/g, '') |
||||
|
} |
||||
|
getBookDetailsByISBN(params).then(res => { |
||||
|
this.$refs.detailDom.dialogVisible = true |
||||
|
if (res) { |
||||
|
this.$refs.detailDom.bookData = res |
||||
|
} else { |
||||
|
this.$refs.detailDom.bookData = { |
||||
|
srcUrl: itemData.bookAuthor, |
||||
|
bookName: itemData.bookName, |
||||
|
bookAuthor: itemData.bookAuthor ? itemData.bookAuthor : '暂无信息', |
||||
|
gist: '暂无简介', |
||||
|
Publish: '暂无信息', |
||||
|
places: [ |
||||
|
{ shelfName: '' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 翻页 |
||||
|
handlePage(page) { |
||||
|
if (page === 1) { |
||||
|
// 下一页 |
||||
|
} else { |
||||
|
// 上一页 |
||||
|
} |
||||
|
}, |
||||
|
// 控制左右 |
||||
|
handleDirect(n) { |
||||
|
if (n === -1) { // 左 |
||||
|
this.classnameR = null |
||||
|
this.classnameL = 'rack-direct-active' |
||||
|
} else { // 右 |
||||
|
this.classnameL = null |
||||
|
this.classnameR = 'rack-direct-active' |
||||
|
} |
||||
|
this.initBookshelfDetails(n) |
||||
|
}, |
||||
|
goBack() { |
||||
|
this.$router.go(-1) |
||||
|
}, |
||||
|
initBookshelfDetails(n) { |
||||
|
this.loading = true |
||||
|
const params = {} |
||||
|
if (n === -1) { // 左 |
||||
|
params.shelfNo = this.$route.query.leftShelfNo |
||||
|
} else { // 右 |
||||
|
params.shelfNo = this.$route.query.rightShelfNo |
||||
|
} |
||||
|
initBookshelfDetails(params).then((res) => { |
||||
|
console.log(this.listData) |
||||
|
// if (res.shelfs.length === 0) { |
||||
|
// res.shelfs.push('firstShelf', 'secondShelf', 'thirdShelf', 'fourthShelf', 'fivethShelf') |
||||
|
// for (let index = 0; index < res.shelfs.length; index++) { |
||||
|
// const shelfNo = res.shelfs[index] |
||||
|
// res.shelfBook[shelfNo] = [] |
||||
|
// } |
||||
|
// } |
||||
|
this.listData.splice(0, this.listData.length, ...res.shelfAll) |
||||
|
if (res.shelfs.length !== 0) { |
||||
|
for (let index = 0; index < res.shelfs.length; index++) { |
||||
|
const shelfNo = res.shelfs[index] |
||||
|
this.$set(this.bookList, shelfNo, res.shelfBook[shelfNo]) |
||||
|
} |
||||
|
} |
||||
|
if (this.listData.length > 0) { |
||||
|
this.initSwiper() |
||||
|
this.setSwiperInit() |
||||
|
} |
||||
|
setTimeout(() => { |
||||
|
this.loading = false |
||||
|
}, 1000) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
.swiper-container { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.swiper-slide { |
||||
|
width: 65px !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,29 @@ |
|||||
|
<template> |
||||
|
<div id="bookshelf"> |
||||
|
<div class="bookshelf-header" style="height:120px"> |
||||
|
<span class="icon iconfont icon-l" @click="goBack()"></span> |
||||
|
<h2>书单推荐</h2> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { bookListCrud } from './mixins/booklist.js' |
||||
|
export default { |
||||
|
name: 'NewBook', |
||||
|
components: { }, |
||||
|
mixins: [bookListCrud], |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,82 @@ |
|||||
|
<template> |
||||
|
<div id="bookshelf"> |
||||
|
<div class="bookshelf-header" style="height:120px"> |
||||
|
<router-link to="/"> |
||||
|
<span class="icon iconfont icon-l"></span> |
||||
|
</router-link> |
||||
|
<h2>数字资源</h2> |
||||
|
</div> |
||||
|
<div class="main"> |
||||
|
<div v-for="(item,index) in srcList" :key="index" class="main-item" @click="jump(item.nrsUrl)"> |
||||
|
<img :src="'data:image/png;base64,' + item.nrsImages" /> |
||||
|
<div class="title" :style="{ fontSize: item.nrsTitle.length >6 ? '60px' : '80px'}"> |
||||
|
{{ item.nrsTitle }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { initNumberResoures } from '@/api/bookshelf' |
||||
|
export default { |
||||
|
name: 'DigitalResource', |
||||
|
components: { |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
srcList: [] |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getInfo() |
||||
|
}, |
||||
|
methods: { |
||||
|
getInfo() { |
||||
|
initNumberResoures({ libcode: this.libcode }).then(data => { |
||||
|
this.srcList = data |
||||
|
}) |
||||
|
}, |
||||
|
jump(url) { |
||||
|
window.location.href = url |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
.main{ |
||||
|
padding-top: 40px; |
||||
|
height: calc(100vh - 180px); |
||||
|
overflow: hidden; |
||||
|
overflow-y:auto ; |
||||
|
.main-item{ |
||||
|
// height: 387px; |
||||
|
margin-bottom: 40px; |
||||
|
padding: 0 40px; |
||||
|
// overflow: hidden; |
||||
|
position: relative; |
||||
|
img{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
.title{ |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%,-50%); |
||||
|
font-family: "HuXiaoBoNanShenTi"; |
||||
|
font-size: 80px; |
||||
|
color: #333; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 3; |
||||
|
line-clamp: 3; |
||||
|
-webkit-box-orient: vertical; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,40 @@ |
|||||
|
<template> |
||||
|
<div id="bookshelf"> |
||||
|
<div class="bookshelf-header" style="height:120px"> |
||||
|
<!-- <router-link to="/"> |
||||
|
<span class="icon iconfont icon-l"></span> |
||||
|
</router-link> --> |
||||
|
<span class="icon iconfont icon-l" @click="goBack()"></span> |
||||
|
<h2>热门图书</h2> |
||||
|
</div> |
||||
|
<BookList /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import BookList from '@/views/module/bookList.vue' |
||||
|
import { bookListCrud } from './mixins/booklist.js' |
||||
|
export default { |
||||
|
name: 'HotBook', |
||||
|
components: { BookList }, |
||||
|
mixins: [bookListCrud], |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
goBack() { |
||||
|
this.$router.go(-1) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,191 @@ |
|||||
|
<template> |
||||
|
<div id="bookshelf"> |
||||
|
<div class="bookshelf-header"> |
||||
|
<h2>RFID智慧书架</h2> |
||||
|
<span class="shelf-num">{{ shelfName }}</span> |
||||
|
</div> |
||||
|
<!-- 本架分类 --> |
||||
|
<div class="book-category"> |
||||
|
<p>{{ leftShelfMsg }}</p> |
||||
|
<p>{{ rightShelfMsg }}</p> |
||||
|
</div> |
||||
|
<!-- 智慧书架导航 --> |
||||
|
<ul class="book-nav"> |
||||
|
<li @click="toSearch"> |
||||
|
<img src="~@/assets/images/home/nav1.png" /> |
||||
|
<p>图书检索</p> |
||||
|
</li> |
||||
|
<li @click="toPath('/HotBook?bookType=hot')"> |
||||
|
<img src="~@/assets/images/home/nav2.png" /> |
||||
|
<p>热门图书</p> |
||||
|
</li> |
||||
|
<li @click="toPath('/AuthorRecommend')"> |
||||
|
<img src="~@/assets/images/home/nav3.png" /> |
||||
|
<p>作者推荐</p> |
||||
|
</li> |
||||
|
<li @click="toPath('/DigitalResource')"> |
||||
|
<img src="~@/assets/images/home/nav4.png" /> |
||||
|
<p>数字资源</p> |
||||
|
</li> |
||||
|
<li @click="toRoomNav"> |
||||
|
<img src="~@/assets/images/home/nav5.png" /> |
||||
|
<p>场馆导航</p> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<!-- 本架图书 --> |
||||
|
<div class="book-rack"> |
||||
|
<div class="list-top"> |
||||
|
<div class="list-top-title"> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-benjiatushu" /> |
||||
|
</svg> |
||||
|
<p>本架图书</p> |
||||
|
</div> |
||||
|
<span class="more" @click="toPath('/CurrentRackBook')">更多<i class="iconfont icon-zuo rotate"></i></span> |
||||
|
</div> |
||||
|
<div class="rack-list"> |
||||
|
<BookListItem :list-data.sync="rackList" /> |
||||
|
<div class="other-list"> |
||||
|
<BookListItem :list-data.sync="otherList" :is-other-book="true" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 新书推荐 --> |
||||
|
<div class="book-rack new-recommend"> |
||||
|
<div class="list-top"> |
||||
|
<div class="list-top-title"> |
||||
|
<p>新书推荐</p> |
||||
|
</div> |
||||
|
<span class="more" @click="toPath('/NewBook?bookType=new')">更多<i class="iconfont icon-zuo rotate"></i></span> |
||||
|
</div> |
||||
|
<BookListItem :list-data.sync="newList" :is-new-book="true" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import BookListItem from '@/views/module/homeListItem.vue' |
||||
|
import { FetchNewBookRecommend, FetchCoverByISBN, initSmartBookshelf } from '@/api/bookshelf' |
||||
|
export default { |
||||
|
name: 'Home', |
||||
|
components: { |
||||
|
BookListItem |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
shelfName: '1', |
||||
|
leftShelfMsg: '', |
||||
|
rightShelfMsg: '', |
||||
|
// leftShelfNo: '1201-03-001-A-01', |
||||
|
// rightShelfNo: '1201-03-001-B-01', |
||||
|
leftShelfNo: '', |
||||
|
rightShelfNo: '', |
||||
|
rackList: [], // 本架图书排行第一 |
||||
|
otherList: [], // 本架图书排行后两本 |
||||
|
newList: [] // 新书推荐 |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getNewBookList() |
||||
|
// 本架图书 + 书架借本信息 |
||||
|
this.initSmartBookshelf() |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
toSearch() { |
||||
|
window.location.href = 'http://219.140.69.151/opac' |
||||
|
}, |
||||
|
toPath(path) { |
||||
|
if (path === '/CurrentRackBook') { |
||||
|
const query = { leftShelfNo: this.leftShelfNo, rightShelfNo: this.rightShelfNo } |
||||
|
this.$router.push({ path: path, query: query }) |
||||
|
} else { |
||||
|
this.$router.push(path) |
||||
|
} |
||||
|
}, |
||||
|
toRoomNav() { |
||||
|
const linkSrc = process.env.VUE_APP_BASE_API |
||||
|
window.location.href = linkSrc + '/anchoring/initVenueNavigation.do?libcode=' + this.libcode |
||||
|
}, |
||||
|
// 首页 - 新书推荐 |
||||
|
getNewBookList() { |
||||
|
const params = { |
||||
|
libcode: this.libcode, |
||||
|
pageNo: 1, |
||||
|
pageSize: 4 |
||||
|
} |
||||
|
FetchNewBookRecommend(params).then(res => { |
||||
|
let data = [] |
||||
|
data = res.newbookList |
||||
|
data.forEach(item => { |
||||
|
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
this.$message.error('接口错误') |
||||
|
}) |
||||
|
}, |
||||
|
// 根据isbn获取图书封面 |
||||
|
getCoverByISBN(isbn, item) { |
||||
|
const params = { |
||||
|
isbn: isbn |
||||
|
} |
||||
|
console.log(params) |
||||
|
FetchCoverByISBN(params).then((res) => { |
||||
|
// item.cover = window.URL.createObjectURL(res) |
||||
|
if (res) { |
||||
|
item.cover = res |
||||
|
} else { |
||||
|
item.cover = '' |
||||
|
} |
||||
|
this.newList.push(item) |
||||
|
}) |
||||
|
}, |
||||
|
// 初始化首页书架信息 |
||||
|
initSmartBookshelf() { |
||||
|
this.leftShelfNo = this.$route.query.leftShelfNo |
||||
|
this.rightShelfNo = this.$route.query.rightShelfNo |
||||
|
const params = { leftShelfNo: this.leftShelfNo, rightShelfNo: this.rightShelfNo } |
||||
|
// const _this = this |
||||
|
initSmartBookshelf(params).then((res) => { |
||||
|
this.shelfName = res.shelfName |
||||
|
this.leftShelfMsg = res.leftShelf.sortMsg |
||||
|
this.rightShelfMsg = res.rightShelf.sortMsg |
||||
|
Promise.all(this.initBookData(res.bookList.splice(0, 1))).then((res) => { |
||||
|
this.rackList = res |
||||
|
console.log('rackList', this.rackList) |
||||
|
}) |
||||
|
Promise.all(this.initBookData(res.bookList.splice(-2))).then((res) => { |
||||
|
this.otherList = res |
||||
|
console.log('otherList', this.otherList) |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
// 处理数据格式 |
||||
|
initBookData(bookList) { |
||||
|
return bookList.map(async(item, index) => { |
||||
|
const newItem = { |
||||
|
cover: item.srcUrl, |
||||
|
ranking: item.bookUID, |
||||
|
nbName: item.bookName, |
||||
|
isOtherBook: index !== 0, |
||||
|
nbAuthor: item.bookAuthor ? item.bookAuthor : '', |
||||
|
isNewBook: false, |
||||
|
num: item.heat ? item.heat : '0', |
||||
|
isbn: item.isbn |
||||
|
} |
||||
|
// const params = { |
||||
|
// isbn: item.isbn |
||||
|
// } |
||||
|
// const res = await FetchCoverByISBN(params) |
||||
|
// newItem.cover = window.URL.createObjectURL(res) |
||||
|
return newItem |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,103 @@ |
|||||
|
import { FetchHotBookRecommend, FetchNewBookRecommend, FetchCoverByISBN, getBookDetailsByISBN } from '@/api/bookshelf' |
||||
|
export const bookListCrud = { |
||||
|
// 组件共用属性
|
||||
|
data() { |
||||
|
return { |
||||
|
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
||||
|
bookData: [], |
||||
|
page: 1, |
||||
|
pageSize: 13, |
||||
|
pageCount: 1, |
||||
|
bookLoading: false |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
bookList() { |
||||
|
const arr = this.bookData.slice(1) |
||||
|
return arr |
||||
|
} |
||||
|
}, |
||||
|
// 组件共用方法
|
||||
|
methods: { |
||||
|
// 获取热门/新书图书list
|
||||
|
getBookData() { |
||||
|
this.bookLoading = true |
||||
|
const bookType = this.$route.query.bookType |
||||
|
const params = { |
||||
|
libcode: this.libcode, |
||||
|
pageNo: this.page, |
||||
|
pageSize: this.pageSize |
||||
|
} |
||||
|
if (bookType === 'hot') { |
||||
|
FetchHotBookRecommend(params).then(res => { |
||||
|
this.pageCount = res.page.totalPages |
||||
|
res.hotbookList.forEach(item => { |
||||
|
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
this.$message.error('接口错误') |
||||
|
}) |
||||
|
} else { |
||||
|
FetchNewBookRecommend(params).then(res => { |
||||
|
res.newbookList.forEach(item => { |
||||
|
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
this.$message.error('接口错误') |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
// 根据isbn查找封面
|
||||
|
getCoverByISBN(isbn, item) { |
||||
|
const params = { |
||||
|
isbn: isbn |
||||
|
} |
||||
|
FetchCoverByISBN(params).then((res) => { |
||||
|
// item.cover = window.URL.createObjectURL(res)
|
||||
|
if (res) { |
||||
|
item.cover = res |
||||
|
} else { |
||||
|
item.cover = '' |
||||
|
} |
||||
|
this.bookData.push(item) |
||||
|
this.bookLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 滚动加载
|
||||
|
lazyLoading(e) { |
||||
|
const scrollTop = e.target.scrollTop |
||||
|
const windowHeight = e.target.clientHeight |
||||
|
const scrollHeight = e.target.scrollHeight |
||||
|
// 滚动条到底部
|
||||
|
if (scrollTop + windowHeight === scrollHeight) { |
||||
|
this.bookLoading = true |
||||
|
this.page++ |
||||
|
if (this.page > this.pageCount) { |
||||
|
this.bookLoading = false |
||||
|
this.$message.success('暂无更多数据~') |
||||
|
return |
||||
|
} |
||||
|
this.getBookData() |
||||
|
} |
||||
|
}, |
||||
|
// 点击查看详情
|
||||
|
handleDetails(index) { |
||||
|
const params = { |
||||
|
isbn: this.bookData[index].isbn.replace(/\-/g, '') |
||||
|
} |
||||
|
getBookDetailsByISBN(params).then(res => { |
||||
|
if (res) { |
||||
|
this.$refs.detailDom.bookData = res |
||||
|
this.$refs.detailDom.dialogVisible = true |
||||
|
} else { |
||||
|
this.$message.error('暂无图书内容~') |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
this.$message.error('接口错误') |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
// 组件挂载时的共用方法
|
||||
|
mounted() { |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,222 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-dialog title="图书详情" :visible.sync="dialogVisible" width="80%"> |
||||
|
<!-- :before-close="handleClose" --> |
||||
|
<div class="dialog-setting"> |
||||
|
<div v-if="bookData" class="book-details-box"> |
||||
|
<div class="book-details"> |
||||
|
<div class="book-cover"> |
||||
|
<img :src="bookData.srcUrl ? bookData.srcUrl : ''" :onerror="defaultImg" /> |
||||
|
</div> |
||||
|
<div class="book-desc"> |
||||
|
<h3>{{ bookData.bookName }}</h3> |
||||
|
<p class="book-from">作者：{{ bookData.bookAuthor }}</p> |
||||
|
<p v-if="bookData.Publish" class="book-from">出版社：{{ bookData.Publish }}</p> |
||||
|
<p class="book-brief"> 简介：{{ bookData.gist ? bookData.gist : '暂无简介' }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="book-local"> |
||||
|
<!-- <span v-if="bookData.bookPlace">所在位置：{{ bookData.bookPlace }}</span> --> |
||||
|
<!-- 待定：热门图书/新书推荐跳转到 场馆导航操作 --> |
||||
|
<!-- <span v-else>所在位置</span> --> |
||||
|
<div class="local-title"> |
||||
|
所在位置 |
||||
|
</div> |
||||
|
<ul class="local-list"> |
||||
|
<li v-if="!bookData.places[0]?.shelfName" class="local-none"> |
||||
|
<!-- <svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-weizhi" /> |
||||
|
</svg> --> |
||||
|
<span>当前图书暂未查到位置信息</span> |
||||
|
</li> |
||||
|
<!-- --> |
||||
|
<li v-for="(item,index) in bookData.places" v-else :key="index" class="local-list-info" @click="toBookNav(index)"> |
||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-weizhi" /> |
||||
|
</svg> |
||||
|
<span>{{ item.shelfName }}</span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'BookDetails', |
||||
|
data() { |
||||
|
return { |
||||
|
dialogVisible: false, |
||||
|
bookData: null, |
||||
|
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
methods: { |
||||
|
toBookNav(index) { |
||||
|
const linkSrc = process.env.VUE_APP_BASE_API |
||||
|
window.location.href = linkSrc + '/anchoring/goNavigation.do?libcode=' + this.libcode + '&barcode=' + this.bookData.places[index].barcode |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .el-dialog { |
||||
|
position: fixed; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
border-radius: 24px; |
||||
|
margin-top: 0 !important; |
||||
|
.el-dialog__body { |
||||
|
padding: 0 40px 40px 40px; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-dialog__header { |
||||
|
text-align: center; |
||||
|
padding-top: 0; |
||||
|
padding-bottom: 4px; |
||||
|
.el-dialog__title { |
||||
|
display: inline-block; |
||||
|
font-family: "ZhenyanGB"; |
||||
|
font-size: 40px; |
||||
|
width: 494px; |
||||
|
height: 76px; |
||||
|
line-height: 76px; |
||||
|
background: url("~@/assets/images/list/list-title.png") no-repeat 0 0; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-dialog__headerbtn { |
||||
|
background-color: #3f92f6; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border-radius: 50%; |
||||
|
.el-dialog__close { |
||||
|
color: #fff; |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
} |
||||
|
.book-details-box { |
||||
|
.book-details { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 30px 0; |
||||
|
.book-cover { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 318px; |
||||
|
height: 382px; |
||||
|
margin-right: 40px; |
||||
|
overflow: hidden; |
||||
|
img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
max-height: calc(100%); |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
} |
||||
|
.book-desc { |
||||
|
flex: 1; |
||||
|
color: #333; |
||||
|
overflow: hidden; |
||||
|
h3 { |
||||
|
font-size: 40px; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
.book-from { |
||||
|
width: 100%; |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
h3, |
||||
|
.book-from { |
||||
|
text-overflow: -o-ellipsis-lastline; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.book-brief { |
||||
|
font-size: 24px; |
||||
|
margin-bottom: 20px; |
||||
|
text-overflow: -o-ellipsis-lastline; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 4; |
||||
|
line-clamp: 4; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.book-local { |
||||
|
height: 343px; |
||||
|
color: #333; |
||||
|
display: flex; |
||||
|
// border-radius: 52px; |
||||
|
// line-height: 64px; |
||||
|
// text-align: center; |
||||
|
// font-size: 30px; |
||||
|
// overflow: hidden; |
||||
|
// white-space: nowrap; |
||||
|
// text-overflow: ellipsis; |
||||
|
.local-title { |
||||
|
width: 83px; |
||||
|
height: 100%; |
||||
|
background: url("~@/assets/images/local-bg.png") no-repeat; |
||||
|
writing-mode: vertical-rl; |
||||
|
text-align: center; |
||||
|
line-height: 83px; |
||||
|
font-size: 30px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.local-list { |
||||
|
flex: 1; |
||||
|
border: 1px solid #3f92f6; |
||||
|
border-left: none; |
||||
|
background: #d0e0f9; |
||||
|
overflow: hidden; |
||||
|
overflow-y: auto; |
||||
|
position: relative; |
||||
|
font-size: 26px; |
||||
|
.local-list-info { |
||||
|
height: 56px; |
||||
|
line-height: 56px; |
||||
|
background-color: #fff; |
||||
|
// margin-right: 8px; |
||||
|
margin-bottom: 15px; |
||||
|
padding-left: 13px; |
||||
|
span { |
||||
|
margin-left: 19px; |
||||
|
} |
||||
|
} |
||||
|
.local-none { |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
position: absolute; |
||||
|
// left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
/**滚动条的宽度*/ |
||||
|
::-webkit-scrollbar { |
||||
|
width: 8px; |
||||
|
height: 4px; |
||||
|
} |
||||
|
|
||||
|
//滚动条的滑块 |
||||
|
::-webkit-scrollbar-thumb { |
||||
|
background-color: #3f92f6; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,134 @@ |
|||||
|
<template> |
||||
|
<div v-loading.fullscreen.lock="bookLoading" class="hotbook-box" @scroll="lazyLoading"> |
||||
|
<div v-if="bookList.length > 0" class="most-book" @click="handleDetails(0)"> |
||||
|
<div class="most-book-img"> |
||||
|
<img :src="bookData[0].cover ? bookData[0].cover : ''" :onerror="defaultImg" /> |
||||
|
</div> |
||||
|
<div class="most-book-txt book-rack"> |
||||
|
<div class="txt"> |
||||
|
<h3>书名：{{ bookData[0].nbName || bookData[0].hbName }}</h3> |
||||
|
<p>作者：{{ bookData[0].nbAuthor || bookData[0].hbAuthor }}</p> |
||||
|
<p>出版社：{{ bookData[0].nbAuthor || bookData[0].hbAuthor }}</p> |
||||
|
<p>出版时间：{{ bookData[0].nbPublisherdate || bookData[0].hbPublisherdate }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<ul class="hotbook-list"> |
||||
|
<li v-for="(item,index) in bookList" :key="index" @click="handleDetails(index+1)"> |
||||
|
<div class="other-list-img"> |
||||
|
<img :src="item.cover ? item.cover : ''" :onerror="defaultImg" /> |
||||
|
</div> |
||||
|
<p class="book-name">{{ item.nbName || item.hbName }}</p> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<BookDetails ref="detailDom" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import BookDetails from './bookDetails.vue' |
||||
|
import { bookListCrud } from '../mixins/booklist.js' |
||||
|
export default { |
||||
|
name: 'BookList', |
||||
|
components: { BookDetails }, |
||||
|
mixins: [bookListCrud], |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getBookData() |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
.hotbook-box{ |
||||
|
overflow: hidden; |
||||
|
overflow-y: auto; |
||||
|
height: calc(100vh - 210px); |
||||
|
} |
||||
|
.book-rack{ |
||||
|
margin: 160px 40px 28px 40px; |
||||
|
padding: 38px 40px 40px 400px; |
||||
|
height: 272px; |
||||
|
} |
||||
|
.most-book{ |
||||
|
position: relative; |
||||
|
.most-book-img{ |
||||
|
position: absolute; |
||||
|
left: 90px; |
||||
|
bottom: 20px; |
||||
|
width: 318px; |
||||
|
height: 382px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
overflow: hidden; |
||||
|
img{ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
vertical-align: middle; |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
} |
||||
|
.txt{ |
||||
|
// margin-left: 452px; |
||||
|
color: #333; |
||||
|
h3{ |
||||
|
font-size: 40px; |
||||
|
font-weight: normal; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
p{ |
||||
|
font-size: 30px; |
||||
|
margin-top: 8px; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.hotbook-list{ |
||||
|
margin: 0 40px; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
// justify-content: space-between; |
||||
|
li{ |
||||
|
margin-bottom: 20px; |
||||
|
margin-left: 20px; |
||||
|
width: 300px; |
||||
|
overflow: hidden; |
||||
|
.other-list-img{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
height: 360px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
img{ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
max-height: calc(100%); |
||||
|
vertical-align: middle; |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
.book-name{ |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
overflow: hidden; |
||||
|
text-overflow:ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
& li:nth-child(3n+1){ |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,51 @@ |
|||||
|
<template> |
||||
|
<div class="header-time"> |
||||
|
<div class="header-text header-date">{{ nowDate }}</div> |
||||
|
<span class="icon iconfont"></span> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getCurrentTime } from '@/utils/index' |
||||
|
|
||||
|
export default { |
||||
|
name: 'HeaderTop', |
||||
|
data() { |
||||
|
return { |
||||
|
nowDate: '' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.timer = setInterval(() => { |
||||
|
this.nowDate = getCurrentTime() |
||||
|
}, 1000) |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.header-time{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
background-color: #3F92F6; |
||||
|
width: 100%; |
||||
|
height: 60px; |
||||
|
line-height: 60px; |
||||
|
font-size: 30px; |
||||
|
color: #fff; |
||||
|
padding: 0 40px; |
||||
|
span{ |
||||
|
width: 35px; |
||||
|
height: 45px; |
||||
|
font-size: 30px; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,97 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div :class="[isNewBook ? 'list-small' : (isOtherBook ? 'list-middle' : 'list-big') ]"> |
||||
|
<div v-for="(item,index) in listData" :key="item.ranking" class="list-item" @click="handleDetails(index)"> |
||||
|
<div class="book-img"> |
||||
|
<img :src="item.cover" :onerror="defaultImg" /> |
||||
|
</div> |
||||
|
<div class="book-info"> |
||||
|
<h4 :class="['book-title', {'title-item': !isOtherBook}]">{{ item.nbName }}</h4> |
||||
|
<p class="book-author">{{ item.nbAuthor }}</p> |
||||
|
<div v-if="!isNewBook" class="book-num"> |
||||
|
<svg class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-remen" /> |
||||
|
</svg> |
||||
|
<p>{{ item.num }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<BookDetails ref="detailDom" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getBookDetailsByISBN } from '@/api/bookshelf' |
||||
|
import BookDetails from './bookDetails.vue' |
||||
|
|
||||
|
export default { |
||||
|
name: 'BookListItem', |
||||
|
components: { BookDetails }, |
||||
|
props: { |
||||
|
listData: { |
||||
|
type: Array, |
||||
|
default: function() { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
isOtherBook: { |
||||
|
type: Boolean, |
||||
|
default: function() { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
isNewBook: { |
||||
|
type: Boolean, |
||||
|
default: function() { |
||||
|
return false |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"' |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
listData: function(newValue, oldValue) { |
||||
|
}, |
||||
|
isOtherBook: function(newValue, oldValue) { |
||||
|
}, |
||||
|
isNewBook: function(newValue, oldValue) { |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
handleDetails(index) { |
||||
|
const params = { |
||||
|
isbn: this.listData[index].isbn.replace(/\-/g, '') |
||||
|
} |
||||
|
getBookDetailsByISBN(params).then(res => { |
||||
|
this.$refs.detailDom.dialogVisible = true |
||||
|
if (res) { |
||||
|
this.$refs.detailDom.bookData = res |
||||
|
} else { |
||||
|
this.$refs.detailDom.bookData = { |
||||
|
srcUrl: this.listData[index].cover, |
||||
|
bookName: this.listData[index].nbName, |
||||
|
bookAuthor: this.listData[index].nbAuthor ? this.listData[index].nbAuthor : '暂无信息', |
||||
|
gist: '暂无简介', |
||||
|
Publish: '暂无信息', |
||||
|
places: [ |
||||
|
{ shelfName: '' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,37 @@ |
|||||
|
<template> |
||||
|
<div id="bookshelf"> |
||||
|
<div class="bookshelf-header" style="height:120px"> |
||||
|
<!-- <router-link to="/"> |
||||
|
<span class="icon iconfont icon-l"></span> |
||||
|
</router-link> --> |
||||
|
<span class="icon iconfont icon-l" @click="goBack()"></span> |
||||
|
<h2>新书推荐</h2> |
||||
|
</div> |
||||
|
<BookList /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import BookList from '@/views/module/bookList.vue' |
||||
|
import { bookListCrud } from './mixins/booklist.js' |
||||
|
export default { |
||||
|
name: 'NewBook', |
||||
|
components: { BookList }, |
||||
|
mixins: [bookListCrud], |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
methods: { |
||||
|
goBack() { |
||||
|
this.$router.go(-1) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,47 @@ |
|||||
|
<template> |
||||
|
<div id="bookshelf"> |
||||
|
<!-- <div class="bookshelf-header" style="height:120px"> |
||||
|
<h2>在线选书</h2> |
||||
|
</div> --> |
||||
|
<div class="top-bg"></div> |
||||
|
<div class="online-active"> |
||||
|
<img src="~@/assets/images/code.png" alt="" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { bookListCrud } from './mixins/booklist.js' |
||||
|
export default { |
||||
|
name: 'NewBook', |
||||
|
components: { }, |
||||
|
mixins: [bookListCrud], |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
// .el-carousel__item h3 { |
||||
|
// color: #475669; |
||||
|
// font-size: 14px; |
||||
|
// opacity: 0.75; |
||||
|
// line-height: 200px; |
||||
|
// margin: 0; |
||||
|
// } |
||||
|
|
||||
|
// .el-carousel__item:nth-child(2n) { |
||||
|
// background-color: #99a9bf; |
||||
|
// } |
||||
|
|
||||
|
// .el-carousel__item:nth-child(2n+1) { |
||||
|
// background-color: #d3dce6; |
||||
|
// } |
||||
|
</style> |
||||
@ -0,0 +1,61 @@ |
|||||
|
const path = require('path') |
||||
|
const resolve = dir => { |
||||
|
return path.join(__dirname, dir) |
||||
|
} |
||||
|
const name = '自助借还书机' |
||||
|
module.exports = { |
||||
|
publicPath: process.env.NODE_ENV === 'development' ? '/' : './', |
||||
|
outputDir: 'dist', |
||||
|
assetsDir: 'static', |
||||
|
lintOnSave: process.env.NODE_ENV === 'development', |
||||
|
productionSourceMap: false, |
||||
|
devServer: { |
||||
|
port: 3000, |
||||
|
open: true, |
||||
|
overlay: { |
||||
|
warnings: false, |
||||
|
errors: true |
||||
|
}, |
||||
|
proxy: { |
||||
|
'/dxhtsg/': { |
||||
|
target: process.env.VUE_APP_BASE_API, |
||||
|
changeOrigin: true, |
||||
|
pathRewrite: { |
||||
|
'^/dxhtsg': 'dxhtsg' |
||||
|
} |
||||
|
}, |
||||
|
'/auth/': { |
||||
|
target: process.env.VUE_APP_BASE_API, |
||||
|
changeOrigin: true, |
||||
|
pathRewrite: { |
||||
|
'^/auth': 'auth' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
configureWebpack: { |
||||
|
name: name, |
||||
|
resolve: { |
||||
|
alias: { |
||||
|
'@': resolve('src') |
||||
|
} |
||||
|
}, |
||||
|
performance: { |
||||
|
hints: 'warning', |
||||
|
// 入口起点的最大体积
|
||||
|
maxEntrypointSize: 50000000, |
||||
|
// 生成文件的最大体积
|
||||
|
maxAssetSize: 30000000 |
||||
|
} |
||||
|
}, |
||||
|
chainWebpack: config => { |
||||
|
config.resolve |
||||
|
.alias.set('_c', resolve('src/components')) |
||||
|
|
||||
|
config.plugin('html') |
||||
|
.tap(args => { |
||||
|
args[0].title = '自助借还书机' |
||||
|
return args |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue