commit
0109ed45bf
63 changed files with 4756 additions and 0 deletions
-
15.env.development
-
8.env.production
-
197.eslintrc.js
-
23.gitignore
-
40README.md
-
11babel.config.js
-
57package.json
-
BINpublic/favicon.ico
-
17public/index.html
-
16src/App.vue
-
95src/api/library.js
-
BINsrc/assets/fonts/YouSheBiaoTiHei.ttf
-
BINsrc/assets/fonts/ZhenyanGB.ttf
-
13src/assets/fonts/fonts.css
-
539src/assets/iconfont/demo.css
-
488src/assets/iconfont/demo_index.html
-
68src/assets/iconfont/iconfont.css
-
1src/assets/iconfont/iconfont.js
-
100src/assets/iconfont/iconfont.json
-
45src/assets/iconfont/iconfont.svg
-
BINsrc/assets/iconfont/iconfont.ttf
-
BINsrc/assets/iconfont/iconfont.woff
-
BINsrc/assets/iconfont/iconfont.woff2
-
BINsrc/assets/images/default-img.png
-
BINsrc/assets/images/header-bg.png
-
BINsrc/assets/images/header-left.png
-
BINsrc/assets/images/header-right.png
-
BINsrc/assets/images/notice.gif
-
BINsrc/assets/images/num-img.png
-
BINsrc/assets/images/star-1.png
-
BINsrc/assets/images/star-2.png
-
BINsrc/assets/images/star-3.png
-
BINsrc/assets/images/title-big.png
-
BINsrc/assets/images/title.png
-
BINsrc/assets/images/top-line.png
-
BINsrc/assets/images/top.png
-
BINsrc/assets/logo.png
-
116src/assets/styles/ball-running-animate.css
-
46src/assets/styles/font-some.css
-
339src/assets/styles/index.scss
-
93src/assets/styles/style.scss
-
147src/common/flexible.js
-
61src/common/scrollMixins.js
-
165src/components/echart/lineChart.vue
-
213src/components/echart/lineChartService.vue
-
42src/main.js
-
22src/router/index.js
-
15src/store/index.js
-
92src/utils/index.js
-
38src/utils/request.js
-
26src/utils/resizeMixins.js
-
136src/views/accessToLibrary/index.vue
-
68src/views/header/index.vue
-
59src/views/index.vue
-
102src/views/lengingRanking/index.vue
-
648src/views/newBookRecommend/data.json
-
181src/views/newBookRecommend/index.vue
-
73src/views/notice/index.vue
-
74src/views/readStar/index.vue
-
51src/views/todayBorrowed/index.vue
-
91src/views/totalLending/index.vue
-
64src/views/video/index.vue
-
61vue.config.js
@ -0,0 +1,15 @@ |
|||||
|
ENV = 'development' |
||||
|
|
||||
|
# 接口地址 |
||||
|
|
||||
|
#内网服务地址 |
||||
|
#VUE_APP_BASE_API = 'http://192.168.99.107:7070' |
||||
|
#VUE_APP_WS_API = 'ws://192.168.99.107:7071' |
||||
|
#VUE_APP_CAMERA_API = '192.168.99.107' |
||||
|
|
||||
|
# 许镇-本地服地址 |
||||
|
VUE_APP_BASE_API = 'http://192.168.99.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,8 @@ |
|||||
|
ENV = 'production' |
||||
|
|
||||
|
# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置 |
||||
|
# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http |
||||
|
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://172.22.0.23:7071' |
||||
@ -0,0 +1,197 @@ |
|||||
|
module.exports = { |
||||
|
root: true, |
||||
|
parserOptions: { |
||||
|
parser: 'babel-eslint', |
||||
|
sourceType: 'module' |
||||
|
}, |
||||
|
env: { |
||||
|
browser: true, |
||||
|
node: true, |
||||
|
es6: true, |
||||
|
}, |
||||
|
extends: ['plugin:vue/recommended', 'eslint:recommended'], |
||||
|
|
||||
|
|
||||
|
rules: { |
||||
|
"vue/max-attributes-per-line": [2, { |
||||
|
"singleline": 10, |
||||
|
"multiline": { |
||||
|
"max": 1, |
||||
|
"allowFirstLine": false |
||||
|
} |
||||
|
}], |
||||
|
"vue/singleline-html-element-content-newline": "off", |
||||
|
"vue/multiline-html-element-content-newline":"off", |
||||
|
"vue/name-property-casing": ["error", "PascalCase"], |
||||
|
"vue/no-v-html": "off", |
||||
|
'accessor-pairs': 2, |
||||
|
'arrow-spacing': [2, { |
||||
|
'before': true, |
||||
|
'after': true |
||||
|
}], |
||||
|
'block-spacing': [2, 'always'], |
||||
|
'brace-style': [2, '1tbs', { |
||||
|
'allowSingleLine': true |
||||
|
}], |
||||
|
'camelcase': [0, { |
||||
|
'properties': 'always' |
||||
|
}], |
||||
|
'comma-dangle': [2, 'never'], |
||||
|
'comma-spacing': [2, { |
||||
|
'before': false, |
||||
|
'after': true |
||||
|
}], |
||||
|
'comma-style': [2, 'last'], |
||||
|
'constructor-super': 2, |
||||
|
'curly': [2, 'multi-line'], |
||||
|
'dot-location': [2, 'property'], |
||||
|
'eol-last': 2, |
||||
|
'eqeqeq': ["error", "always", {"null": "ignore"}], |
||||
|
'generator-star-spacing': [2, { |
||||
|
'before': true, |
||||
|
'after': true |
||||
|
}], |
||||
|
'handle-callback-err': [2, '^(err|error)$'], |
||||
|
'indent': [2, 2, { |
||||
|
'SwitchCase': 1 |
||||
|
}], |
||||
|
'jsx-quotes': [2, 'prefer-single'], |
||||
|
'key-spacing': [2, { |
||||
|
'beforeColon': false, |
||||
|
'afterColon': true |
||||
|
}], |
||||
|
'keyword-spacing': [2, { |
||||
|
'before': true, |
||||
|
'after': true |
||||
|
}], |
||||
|
'new-cap': [2, { |
||||
|
'newIsCap': true, |
||||
|
'capIsNew': false |
||||
|
}], |
||||
|
'new-parens': 2, |
||||
|
'no-array-constructor': 2, |
||||
|
'no-caller': 2, |
||||
|
'no-console': 'off', |
||||
|
'no-class-assign': 2, |
||||
|
'no-cond-assign': 2, |
||||
|
'no-const-assign': 2, |
||||
|
'no-control-regex': 0, |
||||
|
'no-delete-var': 2, |
||||
|
'no-dupe-args': 2, |
||||
|
'no-dupe-class-members': 2, |
||||
|
'no-dupe-keys': 2, |
||||
|
'no-duplicate-case': 2, |
||||
|
'no-empty-character-class': 2, |
||||
|
'no-empty-pattern': 2, |
||||
|
'no-eval': 2, |
||||
|
'no-ex-assign': 2, |
||||
|
'no-extend-native': 2, |
||||
|
'no-extra-bind': 2, |
||||
|
'no-extra-boolean-cast': 2, |
||||
|
'no-extra-parens': [2, 'functions'], |
||||
|
'no-fallthrough': 2, |
||||
|
'no-floating-decimal': 2, |
||||
|
'no-func-assign': 2, |
||||
|
'no-implied-eval': 2, |
||||
|
'no-inner-declarations': [2, 'functions'], |
||||
|
'no-invalid-regexp': 2, |
||||
|
'no-irregular-whitespace': 2, |
||||
|
'no-iterator': 2, |
||||
|
'no-label-var': 2, |
||||
|
'no-labels': [2, { |
||||
|
'allowLoop': false, |
||||
|
'allowSwitch': false |
||||
|
}], |
||||
|
'no-lone-blocks': 2, |
||||
|
'no-mixed-spaces-and-tabs': 2, |
||||
|
'no-multi-spaces': 2, |
||||
|
'no-multi-str': 2, |
||||
|
'no-multiple-empty-lines': [2, { |
||||
|
'max': 1 |
||||
|
}], |
||||
|
'no-native-reassign': 2, |
||||
|
'no-negated-in-lhs': 2, |
||||
|
'no-new-object': 2, |
||||
|
'no-new-require': 2, |
||||
|
'no-new-symbol': 2, |
||||
|
'no-new-wrappers': 2, |
||||
|
'no-obj-calls': 2, |
||||
|
'no-octal': 2, |
||||
|
'no-octal-escape': 2, |
||||
|
'no-path-concat': 2, |
||||
|
'no-proto': 2, |
||||
|
'no-redeclare': 2, |
||||
|
'no-regex-spaces': 2, |
||||
|
'no-return-assign': [2, 'except-parens'], |
||||
|
'no-self-assign': 2, |
||||
|
'no-self-compare': 2, |
||||
|
'no-sequences': 2, |
||||
|
'no-shadow-restricted-names': 2, |
||||
|
'no-spaced-func': 2, |
||||
|
'no-sparse-arrays': 2, |
||||
|
'no-this-before-super': 2, |
||||
|
'no-throw-literal': 2, |
||||
|
'no-trailing-spaces': 2, |
||||
|
'no-undef': 2, |
||||
|
'no-undef-init': 2, |
||||
|
'no-unexpected-multiline': 2, |
||||
|
'no-unmodified-loop-condition': 2, |
||||
|
'no-unneeded-ternary': [2, { |
||||
|
'defaultAssignment': false |
||||
|
}], |
||||
|
'no-unreachable': 2, |
||||
|
'no-unsafe-finally': 2, |
||||
|
'no-unused-vars': [2, { |
||||
|
'vars': 'all', |
||||
|
'args': 'none' |
||||
|
}], |
||||
|
'no-useless-call': 2, |
||||
|
'no-useless-computed-key': 2, |
||||
|
'no-useless-constructor': 2, |
||||
|
'no-useless-escape': 0, |
||||
|
'no-whitespace-before-property': 2, |
||||
|
'no-with': 2, |
||||
|
'one-var': [2, { |
||||
|
'initialized': 'never' |
||||
|
}], |
||||
|
'operator-linebreak': [2, 'after', { |
||||
|
'overrides': { |
||||
|
'?': 'before', |
||||
|
':': 'before' |
||||
|
} |
||||
|
}], |
||||
|
'padded-blocks': [2, 'never'], |
||||
|
'quotes': [2, 'single', { |
||||
|
'avoidEscape': true, |
||||
|
'allowTemplateLiterals': true |
||||
|
}], |
||||
|
'semi': [2, 'never'], |
||||
|
'semi-spacing': [2, { |
||||
|
'before': false, |
||||
|
'after': true |
||||
|
}], |
||||
|
'space-before-blocks': [2, 'always'], |
||||
|
'space-before-function-paren': [2, 'never'], |
||||
|
'space-in-parens': [2, 'never'], |
||||
|
'space-infix-ops': 2, |
||||
|
'space-unary-ops': [2, { |
||||
|
'words': true, |
||||
|
'nonwords': false |
||||
|
}], |
||||
|
'spaced-comment': [2, 'always', { |
||||
|
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] |
||||
|
}], |
||||
|
'template-curly-spacing': [2, 'never'], |
||||
|
'use-isnan': 2, |
||||
|
'valid-typeof': 2, |
||||
|
'wrap-iife': [2, 'any'], |
||||
|
'yield-star-spacing': [2, 'both'], |
||||
|
'yoda': [2, 'never'], |
||||
|
'prefer-const': 2, |
||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, |
||||
|
'object-curly-spacing': [2, 'always', { |
||||
|
objectsInObjects: false |
||||
|
}], |
||||
|
'array-bracket-spacing': [2, 'never'] |
||||
|
} |
||||
|
} |
||||
@ -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,40 @@ |
|||||
|
祁阳图书馆智慧大屏 |
||||
|
|
||||
|
```bash |
||||
|
# install dependency |
||||
|
npm install |
||||
|
|
||||
|
# develop |
||||
|
npm run serve |
||||
|
|
||||
|
# 构建生产环境 |
||||
|
npm run build |
||||
|
|
||||
|
``` |
||||
|
```bash |
||||
|
## 项目结构 |
||||
|
├── src # 源代码 |
||||
|
│ ├── api # 所有请求 |
||||
|
│ ├── assets # 主题 字体等静态资源 |
||||
|
│ ├── components # 全局组件 |
||||
|
│ │ ├── echart # echart |
||||
|
│ ├── router # 路由 |
||||
|
│ ├── views # views 所有页面 |
||||
|
│ │ ├── accessToLibrary # 总进馆人数 |
||||
|
│ │ ├── header # 头部 |
||||
|
│ │ ├── lengingRanking # 借阅排行榜 |
||||
|
│ │ ├── newBookRecommend # 新书推荐 |
||||
|
│ │ ├── notice # 通知公告 |
||||
|
│ │ ├── readStar # 阅读之星 |
||||
|
│ │ ├── todayBorrowed # 今日图书借还 -- 24小时图书馆 |
||||
|
│ │ ├── totalLending # 总借阅量 -- 总馆 |
||||
|
│ ├── 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,57 @@ |
|||||
|
{ |
||||
|
"name": "qy-big-screen", |
||||
|
"version": "1.0.0", |
||||
|
"description": "祁阳图书馆智慧大屏", |
||||
|
"scripts": { |
||||
|
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve", |
||||
|
"build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build", |
||||
|
"lint": "SET NODE_OPTIONS=--openssl-legacy-provider && 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.10", |
||||
|
"vue": "^2.6.11", |
||||
|
"vue-awesome": "^4.0.2", |
||||
|
"vue-count-to": "^1.0.13", |
||||
|
"vue-router": "^3.1.5", |
||||
|
"vue-seamless-scroll": "^1.1.23", |
||||
|
"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,17 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
|
<title><%= htmlWebpackPlugin.options.title %></title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<noscript> |
||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
|
</noscript> |
||||
|
<div id="app"></div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,16 @@ |
|||||
|
<template> |
||||
|
<div id="app"> |
||||
|
<router-view /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
body { |
||||
|
margin: 0; |
||||
|
} |
||||
|
#app { |
||||
|
font-family: Avenir, Helvetica, Arial, sans-serif; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,95 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
// import qs from 'qs'
|
||||
|
|
||||
|
// 总借阅量
|
||||
|
export function FetchHalfYearBorrowNum(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/getHalfYearBorrowNum', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 借阅排行榜
|
||||
|
export function FetchBorrowRank(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/borrowRank', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 阅读之星
|
||||
|
export function FetchBorrowStar(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/borrowStar', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 新书推荐
|
||||
|
export function FetchNewBookRecommend(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/newBookRecommend', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 通知公告
|
||||
|
export function FetchInitNotice(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/initNotice', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 进馆人数
|
||||
|
export function FetchInitIntoNum(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/initIntoNum', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 24小时借还量
|
||||
|
export function FetchHalfYearBRNum(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/getHalfYearBRNum', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 大屏幕播放文件
|
||||
|
export function FetchShowFileList(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/showFileList', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 通过isbn获取图书封面
|
||||
|
export function FetchCoverByISBN(params) { |
||||
|
return request({ |
||||
|
url: '/dxhtsg/getCoverByISBN', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
// responseType: 'blob'
|
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
FetchHalfYearBorrowNum, |
||||
|
FetchBorrowRank, |
||||
|
FetchBorrowStar, |
||||
|
FetchNewBookRecommend, |
||||
|
FetchInitNotice, |
||||
|
FetchInitIntoNum, |
||||
|
FetchHalfYearBRNum, |
||||
|
FetchShowFileList |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
@font-face { |
||||
|
font-family: "ZhenyanGB"; |
||||
|
src: url('ZhenyanGB.ttf'); |
||||
|
font-weight: normal; |
||||
|
font-style: normal; |
||||
|
} |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: "YouSheBiaoTiHei"; |
||||
|
src: url('YouSheBiaoTiHei.ttf'); |
||||
|
font-weight: normal; |
||||
|
font-style: normal; |
||||
|
} |
||||
@ -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,488 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta charset="utf-8"/> |
||||
|
<title>iconfont Demo</title> |
||||
|
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/> |
||||
|
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/> |
||||
|
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||
|
<link rel="stylesheet" href="demo.css"> |
||||
|
<link rel="stylesheet" href="iconfont.css"> |
||||
|
<script src="iconfont.js"></script> |
||||
|
<!-- jQuery --> |
||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||
|
<!-- 代码高亮 --> |
||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||
|
<style> |
||||
|
.main .logo { |
||||
|
margin-top: 0; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.main .logo a { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.main .logo .sub-title { |
||||
|
margin-left: 0.5em; |
||||
|
font-size: 22px; |
||||
|
color: #fff; |
||||
|
background: linear-gradient(-45deg, #3967FF, #B500FE); |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="main"> |
||||
|
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"> |
||||
|
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"> |
||||
|
|
||||
|
</a></h1> |
||||
|
<div class="nav-tabs"> |
||||
|
<ul id="tabs" class="dib-box"> |
||||
|
<li class="dib active"><span>Unicode</span></li> |
||||
|
<li class="dib"><span>Font class</span></li> |
||||
|
<li class="dib"><span>Symbol</span></li> |
||||
|
</ul> |
||||
|
|
||||
|
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3646564" target="_blank" class="nav-more">查看项目</a> |
||||
|
|
||||
|
</div> |
||||
|
<div class="tab-container"> |
||||
|
<div class="content unicode" style="display: block;"> |
||||
|
<ul class="icon_lists dib-box"> |
||||
|
|
||||
|
<li class="dib"> |
||||
|
<span class="icon iconfont"></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=1663379994606') format('woff2'), |
||||
|
url('iconfont.woff?t=1663379994606') format('woff'), |
||||
|
url('iconfont.ttf?t=1663379994606') format('truetype'), |
||||
|
url('iconfont.svg?t=1663379994606#iconfont') format('svg'); |
||||
|
} |
||||
|
</code></pre> |
||||
|
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
||||
|
<pre><code class="language-css" |
||||
|
>.iconfont { |
||||
|
font-family: "iconfont" !important; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
} |
||||
|
</code></pre> |
||||
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
||||
|
<pre> |
||||
|
<code class="language-html" |
||||
|
><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-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-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,68 @@ |
|||||
|
@font-face { |
||||
|
font-family: "iconfont"; /* Project id 3646564 */ |
||||
|
src: url('iconfont.woff2?t=1663379994606') format('woff2'), |
||||
|
url('iconfont.woff?t=1663379994606') format('woff'), |
||||
|
url('iconfont.ttf?t=1663379994606') format('truetype'), |
||||
|
url('iconfont.svg?t=1663379994606#iconfont') format('svg'); |
||||
|
} |
||||
|
|
||||
|
.iconfont { |
||||
|
font-family: "iconfont" !important; |
||||
|
font-size: 16px; |
||||
|
font-style: normal; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
} |
||||
|
|
||||
|
.icon-a-no21:before { |
||||
|
content: "\e636"; |
||||
|
} |
||||
|
|
||||
|
.icon-a-21:before { |
||||
|
content: "\e637"; |
||||
|
} |
||||
|
|
||||
|
.icon-jianpan:before { |
||||
|
content: "\e634"; |
||||
|
} |
||||
|
|
||||
|
.icon-guanbi:before { |
||||
|
content: "\e630"; |
||||
|
} |
||||
|
|
||||
|
.icon-zuo:before { |
||||
|
content: "\e631"; |
||||
|
} |
||||
|
|
||||
|
.icon-benjiatushu:before { |
||||
|
content: "\e632"; |
||||
|
} |
||||
|
|
||||
|
.icon-remen:before { |
||||
|
content: "\e633"; |
||||
|
} |
||||
|
|
||||
|
.icon-you:before { |
||||
|
content: "\e62f"; |
||||
|
} |
||||
|
|
||||
|
.icon-tongzhi:before { |
||||
|
content: "\e628"; |
||||
|
} |
||||
|
|
||||
|
.icon-a-no3:before { |
||||
|
content: "\e629"; |
||||
|
} |
||||
|
|
||||
|
.icon-a-no1:before { |
||||
|
content: "\e62b"; |
||||
|
} |
||||
|
|
||||
|
.icon-a-3:before { |
||||
|
content: "\e62d"; |
||||
|
} |
||||
|
|
||||
|
.icon-a-1:before { |
||||
|
content: "\e62e"; |
||||
|
} |
||||
|
|
||||
1
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,100 @@ |
|||||
|
{ |
||||
|
"id": "3646564", |
||||
|
"name": "智慧屏", |
||||
|
"font_family": "iconfont", |
||||
|
"css_prefix_text": "icon-", |
||||
|
"description": "", |
||||
|
"glyphs": [ |
||||
|
{ |
||||
|
"icon_id": "31879702", |
||||
|
"name": "no.2", |
||||
|
"font_class": "a-no21", |
||||
|
"unicode": "e636", |
||||
|
"unicode_decimal": 58934 |
||||
|
}, |
||||
|
{ |
||||
|
"icon_id": "31879708", |
||||
|
"name": "2", |
||||
|
"font_class": "a-21", |
||||
|
"unicode": "e637", |
||||
|
"unicode_decimal": 58935 |
||||
|
}, |
||||
|
{ |
||||
|
"icon_id": "31879044", |
||||
|
"name": "键盘", |
||||
|
"font_class": "jianpan", |
||||
|
"unicode": "e634", |
||||
|
"unicode_decimal": 58932 |
||||
|
}, |
||||
|
{ |
||||
|
"icon_id": "31859389", |
||||
|
"name": "关闭", |
||||
|
"font_class": "guanbi", |
||||
|
"unicode": "e630", |
||||
|
"unicode_decimal": 58928 |
||||
|
}, |
||||
|
{ |
||||
|
"icon_id": "31859390", |
||||
|
"name": "左", |
||||
|
"font_class": "zuo", |
||||
|
"unicode": "e631", |
||||
|
"unicode_decimal": 58929 |
||||
|
}, |
||||
|
{ |
||||
|
"icon_id": "31859393", |
||||
|
"name": "本架图书", |
||||
|
"font_class": "benjiatushu", |
||||
|
"unicode": "e632", |
||||
|
"unicode_decimal": 58930 |
||||
|
}, |
||||
|
{ |
||||
|
"icon_id": "31859394", |
||||
|
"name": "热门", |
||||
|
"font_class": "remen", |
||||
|
"unicode": "e633", |
||||
|
"unicode_decimal": 58931 |
||||
|
}, |
||||
|
{ |
||||
|
"icon_id": "31859388", |
||||
|
"name": "右", |
||||
|
"font_class": "you", |
||||
|
"unicode": "e62f", |
||||
|
"unicode_decimal": 58927 |
||||
|
}, |
||||
|
{ |
||||
|
"icon_id": "31804863", |
||||
|
"name": "通知", |
||||
|
"font_class": "tongzhi", |
||||
|
"unicode": "e628", |
||||
|
"unicode_decimal": 58920 |
||||
|
}, |
||||
|
{ |
||||
|
"icon_id": "31804864", |
||||
|
"name": "no.3", |
||||
|
"font_class": "a-no3", |
||||
|
"unicode": "e629", |
||||
|
"unicode_decimal": 58921 |
||||
|
}, |
||||
|
{ |
||||
|
"icon_id": "31804866", |
||||
|
"name": "no.1", |
||||
|
"font_class": "a-no1", |
||||
|
"unicode": "e62b", |
||||
|
"unicode_decimal": 58923 |
||||
|
}, |
||||
|
{ |
||||
|
"icon_id": "31804868", |
||||
|
"name": "3", |
||||
|
"font_class": "a-3", |
||||
|
"unicode": "e62d", |
||||
|
"unicode_decimal": 58925 |
||||
|
}, |
||||
|
{ |
||||
|
"icon_id": "31804869", |
||||
|
"name": "1", |
||||
|
"font_class": "a-1", |
||||
|
"unicode": "e62e", |
||||
|
"unicode_decimal": 58926 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
45
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: 66 | Height: 83 | Size: 4.2 KiB |
|
After Width: 1268 | Height: 86 | Size: 26 KiB |
|
After Width: 496 | Height: 84 | Size: 3.8 KiB |
|
After Width: 496 | Height: 84 | Size: 3.0 KiB |
|
After Width: 1024 | Height: 920 | Size: 129 KiB |
|
After Width: 220 | Height: 68 | Size: 6.1 KiB |
|
After Width: 700 | Height: 40 | Size: 6.4 KiB |
|
After Width: 700 | Height: 40 | Size: 5.5 KiB |
|
After Width: 700 | Height: 40 | Size: 6.7 KiB |
|
After Width: 740 | Height: 38 | Size: 5.9 KiB |
|
After Width: 510 | Height: 38 | Size: 4.2 KiB |
|
After Width: 634 | Height: 86 | Size: 2.7 KiB |
|
After Width: 1896 | Height: 91 | Size: 44 KiB |
|
After Width: 200 | Height: 200 | Size: 6.7 KiB |
@ -0,0 +1,116 @@ |
|||||
|
.ball-running-dots { |
||||
|
position: absolute; |
||||
|
top: 0.2rem; |
||||
|
} |
||||
|
.left-dots { |
||||
|
left: 136px; |
||||
|
} |
||||
|
.right-dots { |
||||
|
right: 200px; |
||||
|
} |
||||
|
.ball-running-dots > div { |
||||
|
position: relative; |
||||
|
-webkit-box-sizing: border-box; |
||||
|
-moz-box-sizing: border-box; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.ball-running-dots { |
||||
|
display: block; |
||||
|
font-size: 0; |
||||
|
color: #316fd9; |
||||
|
} |
||||
|
.ball-running-dots > div { |
||||
|
display: inline-block; |
||||
|
float: none; |
||||
|
background-color: currentColor; |
||||
|
border: 0 solid currentColor; |
||||
|
} |
||||
|
.ball-running-dots { |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
} |
||||
|
.ball-running-dots > div { |
||||
|
position: absolute; |
||||
|
margin-left: 30px; |
||||
|
border-radius: 100%; |
||||
|
} |
||||
|
.left-dots > div { |
||||
|
animation: ball-running-dots-animate 2s linear infinite; |
||||
|
} |
||||
|
.right-dots > div { |
||||
|
animation: ball-running-dots-animate2 2s linear infinite; |
||||
|
} |
||||
|
.ball-running-dots > div:nth-child(1) { |
||||
|
animation-delay: 0s; |
||||
|
} |
||||
|
.ball-running-dots > div:nth-child(2) { |
||||
|
animation-delay: -0.8s; |
||||
|
} |
||||
|
.ball-running-dots > div:nth-child(3) { |
||||
|
animation-delay: -1.2s; |
||||
|
} |
||||
|
.ball-running-dots > div:nth-child(4) { |
||||
|
animation-delay: -1.6s; |
||||
|
} |
||||
|
@keyframes ball-running-dots-animate { |
||||
|
0%{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
transform: translateY(0) translateX(-500%) scale(-.1); |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
80% { |
||||
|
transform: translateY(0) translateX(0); |
||||
|
} |
||||
|
85% { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
transform: translateY(-125%) translateX(0); |
||||
|
} |
||||
|
90% { |
||||
|
width: 200%; |
||||
|
height: 75%; |
||||
|
} |
||||
|
95% { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
transform: translateY(-100%) translateX(-500%); |
||||
|
} |
||||
|
100% { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
transform: translateY(0) translateX(-500%); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
@keyframes ball-running-dots-animate2 { |
||||
|
0%{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
transform: translateY(0) translateX(500%) scale(-.1); |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
80% { |
||||
|
transform: translateY(0) translateX(0); |
||||
|
} |
||||
|
85% { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
transform: translateY(-125%) translateX(0); |
||||
|
} |
||||
|
90% { |
||||
|
width: 200%; |
||||
|
height: 75%; |
||||
|
} |
||||
|
95% { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
transform: translateY(-100%) translateX(500%); |
||||
|
} |
||||
|
100% { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
transform: translateY(0) translateX(500%); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,46 @@ |
|||||
|
.chartNum{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin-top: 0.25rem; |
||||
|
} |
||||
|
.box-items { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
height: 0.6rem; |
||||
|
text-align: center; |
||||
|
} |
||||
|
/*滚动数字设置*/ |
||||
|
.number-item { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
text-align: center; |
||||
|
width: 0.45rem; |
||||
|
height: 0.6rem; |
||||
|
line-height: 0.6rem; |
||||
|
margin-right: 0.125rem; |
||||
|
border: 1px solid #2C75E0; |
||||
|
} |
||||
|
.number-item span{ |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
writing-mode: vertical-rl; |
||||
|
text-orientation: upright; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.number-item span i{ |
||||
|
font-style: normal; |
||||
|
position: absolute; |
||||
|
top: 0.1rem; |
||||
|
left: 50%; |
||||
|
font-size: 0.325rem; |
||||
|
font-weight: bold; |
||||
|
color: #1AC9FF; |
||||
|
transform: translate(-50%,0); |
||||
|
transition: transform 1s ease-in-out; |
||||
|
letter-spacing: 10px; |
||||
|
} |
||||
|
.number-item:last-child { |
||||
|
margin-right: 0; |
||||
|
} |
||||
@ -0,0 +1,339 @@ |
|||||
|
#screen-container { |
||||
|
width: 100%; |
||||
|
height: 100vh; |
||||
|
padding: 0 0.175rem; |
||||
|
font-size: 0.25rem; |
||||
|
line-height: 0.35rem; |
||||
|
color: #fff; |
||||
|
background-color: #010326; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
// 头部主题标题 |
||||
|
.header-container{ |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 1.125rem; |
||||
|
font-size: 0.3rem; |
||||
|
color: #fff; |
||||
|
&::before, |
||||
|
&::after{ |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
width: 6.2rem; |
||||
|
height: 1.05rem; |
||||
|
} |
||||
|
&::before{ |
||||
|
left: 0; |
||||
|
background: url('~@/assets/images/header-left.png') no-repeat top center; |
||||
|
} |
||||
|
&::after{ |
||||
|
right: 0; |
||||
|
background: url('~@/assets/images/header-right.png') no-repeat top center; |
||||
|
} |
||||
|
.header-title{ |
||||
|
position: relative; |
||||
|
width: 15.85rem; |
||||
|
height: 1.075rem; |
||||
|
margin: 0 auto; |
||||
|
background: url('~@/assets/images/header-bg.png') no-repeat top center; |
||||
|
background-size: cover; |
||||
|
h2{ |
||||
|
font-size: 0.6rem; |
||||
|
font-family: "ZhenyanGB"; |
||||
|
font-weight: normal; |
||||
|
line-height: 1.125rem; |
||||
|
text-align: center; |
||||
|
letter-spacing: 0.2rem; |
||||
|
background: linear-gradient(180deg, #FFFFFF 0%, #1AC9FF 100%); |
||||
|
background-clip: text; |
||||
|
color: transparent; |
||||
|
} |
||||
|
} |
||||
|
.header-text{ |
||||
|
position: absolute; |
||||
|
top: 0.65rem; |
||||
|
} |
||||
|
.header-weather { |
||||
|
left: 0.6rem; |
||||
|
} |
||||
|
.header-date { |
||||
|
right: 0.375rem; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 头部动态效果 |
||||
|
.line1, |
||||
|
.line2{ |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
} |
||||
|
|
||||
|
.line1{ |
||||
|
right: 632px; |
||||
|
transform: rotateY(-180deg); |
||||
|
} |
||||
|
|
||||
|
.line2{ |
||||
|
left: 632px; |
||||
|
} |
||||
|
|
||||
|
.top-line1, |
||||
|
.top-line2{ |
||||
|
display: block; |
||||
|
width: 7.925rem; |
||||
|
height: 1.075rem; |
||||
|
animation: topline 4s linear infinite both; |
||||
|
} |
||||
|
|
||||
|
.top-line1{ |
||||
|
background: url('~@/assets/images/top-line.png') no-repeat; |
||||
|
} |
||||
|
|
||||
|
.top-line2{ |
||||
|
background: url('~@/assets/images/top-line.png') no-repeat; |
||||
|
} |
||||
|
|
||||
|
@keyframes topline { |
||||
|
from { |
||||
|
width: 0; |
||||
|
} |
||||
|
50%, |
||||
|
to { |
||||
|
width: 643px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 主题内部部分 |
||||
|
.screen-main{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
height: calc(100% - 91px); |
||||
|
margin: 0.0625rem 0 0.5rem 0; |
||||
|
padding: 0 0.325rem; |
||||
|
overflow: hidden; |
||||
|
.screen-left, |
||||
|
.screen-right{ |
||||
|
width: 6.375rem; |
||||
|
} |
||||
|
.screen-middle{ |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
margin: 0 0.5rem; |
||||
|
} |
||||
|
.screen-item{ |
||||
|
margin-top: 0.25rem; |
||||
|
} |
||||
|
.common-title{ |
||||
|
width: 100%; |
||||
|
height: 0.475rem; |
||||
|
line-height: 0.475rem; |
||||
|
padding-left: 0.525rem; |
||||
|
font-size: 0.325rem; |
||||
|
background: url('~@/assets/images/title.png') no-repeat center center; |
||||
|
background-size: cover; |
||||
|
font-family: 'YouSheBiaoTiHei'; |
||||
|
letter-spacing: 0.1rem; |
||||
|
} |
||||
|
.module-content{ |
||||
|
border: 1px solid #2C75E0; |
||||
|
box-shadow: inset 0px 0px 38px 1px rgba(44,117,224,0.5); |
||||
|
} |
||||
|
.small-module{ |
||||
|
height: 3.75rem; |
||||
|
} |
||||
|
.medium-module{ |
||||
|
height: 4.125rem; |
||||
|
} |
||||
|
.big-module{ |
||||
|
height: 6.8125rem; |
||||
|
// margin:0.1625rem 0; |
||||
|
} |
||||
|
|
||||
|
//排行榜-推荐 - list |
||||
|
.lending-ranking{ |
||||
|
.module-content{ |
||||
|
padding: 0 0.25rem; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
} |
||||
|
.book-list-item{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 0.1rem 0.25rem; |
||||
|
.book-img{ |
||||
|
width: 0.825rem; |
||||
|
height: 1.075rem; |
||||
|
margin-right: 0.35rem; |
||||
|
background: url('~@/assets/images/default-img.png') no-repeat center center; |
||||
|
background-size: contain; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
overflow: hidden; |
||||
|
img{ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
// height: 100%; |
||||
|
} |
||||
|
} |
||||
|
.book-info{ |
||||
|
flex: 1; |
||||
|
margin-right: 0.35rem; |
||||
|
h4{ |
||||
|
font-size: 0.25rem; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
p{ |
||||
|
font-size: 0.2rem; |
||||
|
} |
||||
|
} |
||||
|
.ranking-num{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
.icon{ |
||||
|
width: 0.5625rem; |
||||
|
height: 0.5625rem; |
||||
|
margin-right: 0.175rem; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 进出馆人数 |
||||
|
.accessToLib-container{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
text-align: center; |
||||
|
align-items: center; |
||||
|
margin: 0.375rem 0 .25rem 0; |
||||
|
.accessToLib-item{ |
||||
|
width: 2.75rem; |
||||
|
.panel-num{ |
||||
|
display: block; |
||||
|
height: 0.85rem; |
||||
|
margin-top: 0.125rem; |
||||
|
line-height: 0.85rem; |
||||
|
font-size: 0.325rem; |
||||
|
font-weight: bold; |
||||
|
text-align: center; |
||||
|
color: #1AC9FF; |
||||
|
background: url('~@/assets/images/num-img.png') no-repeat center center; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 视频 |
||||
|
.video-box{ |
||||
|
width: 100%; |
||||
|
height: 5.2125rem; |
||||
|
} |
||||
|
|
||||
|
// 阅读之星 |
||||
|
.read-star{ |
||||
|
flex: 1; |
||||
|
.common-title{ |
||||
|
background: url('~@/assets/images/title-big.png') no-repeat center center; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
.module-content{ |
||||
|
padding: .25rem; |
||||
|
overflow: hidden; |
||||
|
.readstart-item{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
height: 0.5rem; |
||||
|
padding: 0 0.25rem; |
||||
|
font-size: 0.2rem; |
||||
|
margin-bottom: 0.125rem; |
||||
|
background: linear-gradient(90deg, #0C2157 0%, rgba(44,117,224,0) 51%, #0C2157 100%); |
||||
|
.icon-star-1{ |
||||
|
width: 0.35rem; |
||||
|
height: 0.3rem; |
||||
|
margin-left: -0.05rem; |
||||
|
margin-right: 0.2rem; |
||||
|
} |
||||
|
.icon-star-2{ |
||||
|
width: 0.375rem; |
||||
|
height: 0.3rem; |
||||
|
margin-left: -0.0625rem; |
||||
|
margin-right: 0.2rem; |
||||
|
} |
||||
|
.icon-star-3{ |
||||
|
width: 0.275rem; |
||||
|
height: 0.3rem; |
||||
|
margin-right: 0.25rem; |
||||
|
} |
||||
|
.star-num{ |
||||
|
display: block; |
||||
|
width: 0.25rem; |
||||
|
height: 0.25rem; |
||||
|
margin-right: 0.25rem; |
||||
|
font-size: 0.2rem; |
||||
|
line-height: 0.25rem; |
||||
|
text-align: center; |
||||
|
border-radius: 50%; |
||||
|
color: #1AC9FF; |
||||
|
border: 1px solid #1AC9FF; |
||||
|
} |
||||
|
.star-info{ |
||||
|
flex: 1; |
||||
|
margin-right: 0.25rem; |
||||
|
} |
||||
|
&.star1-bg{ |
||||
|
background: url('~@/assets/images/star-1.png') no-repeat left top; |
||||
|
background-size: contain; |
||||
|
} |
||||
|
&.star2-bg{ |
||||
|
background: url('~@/assets/images/star-2.png') no-repeat left top; |
||||
|
background-size: contain; |
||||
|
} |
||||
|
&.star3-bg{ |
||||
|
background: url('~@/assets/images/star-3.png') no-repeat left top; |
||||
|
background-size: contain; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 通知公告 |
||||
|
.notice{ |
||||
|
.module-content{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
width: 100%; |
||||
|
padding: 0.25rem 0.375rem 0.5rem 0.375rem; |
||||
|
.notice-icon-gif{ |
||||
|
display: block; |
||||
|
width: 2.375rem; |
||||
|
height: 2.875rem; |
||||
|
background: url('~@/assets/images/notice.gif') no-repeat left top; |
||||
|
background-size: contain; |
||||
|
margin-right: 0.15rem; |
||||
|
} |
||||
|
.seamless-warp{ |
||||
|
width: calc(100vw); |
||||
|
height: 3.1rem; |
||||
|
overflow: hidden; |
||||
|
.notice-txt { |
||||
|
animation: myMove 20s linear infinite; |
||||
|
animation-fill-mode: forwards; |
||||
|
} |
||||
|
@keyframes myMove { |
||||
|
0% { |
||||
|
transform: translateY(2rem); |
||||
|
} |
||||
|
100% { |
||||
|
transform: translateY(-6rem); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,93 @@ |
|||||
|
@import '~@/assets/iconfont/iconfont.css'; |
||||
|
|
||||
|
// 全局样式 |
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
list-style-type: none; |
||||
|
box-sizing: border-box; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
html { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; |
||||
|
background-color: #f1f1f1; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
color: #343440; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
ul{ |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
li{ |
||||
|
list-style: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
img[src=""],img:not([src]){ |
||||
|
opacity: 0; |
||||
|
border:none; |
||||
|
visibility: hidden; |
||||
|
max-width: none; |
||||
|
} |
||||
|
|
||||
|
.clearfix { |
||||
|
&::after { |
||||
|
content: ""; |
||||
|
display: table; |
||||
|
height: 0; |
||||
|
line-height: 0; |
||||
|
visibility: hidden; |
||||
|
clear: both; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
pre{ |
||||
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; |
||||
|
word-wrap: break-word; |
||||
|
white-space: pre-wrap; |
||||
|
} |
||||
|
|
||||
|
/**滚动条的宽度*/ |
||||
|
::-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; |
||||
|
} |
||||
@ -0,0 +1,147 @@ |
|||||
|
(function(win, lib) { |
||||
|
var doc = win.document |
||||
|
var docEl = doc.documentElement |
||||
|
var metaEl = doc.querySelector('meta[name="viewport"]') |
||||
|
var flexibleEl = doc.querySelector('meta[name="flexible"]') |
||||
|
var dpr = 0 |
||||
|
var scale = 0 |
||||
|
var tid |
||||
|
var flexible = lib.flexible || (lib.flexible = {}) |
||||
|
|
||||
|
if (metaEl) { |
||||
|
console.warn('将根据已有的meta标签来设置缩放比例') |
||||
|
var match = metaEl |
||||
|
.getAttribute('content') |
||||
|
// eslint-disable-next-line no-useless-escape
|
||||
|
.match(/initial\-scale=([\d\.]+)/) |
||||
|
if (match) { |
||||
|
scale = parseFloat(match[1]) |
||||
|
dpr = parseInt(1 / scale) |
||||
|
} |
||||
|
} else if (flexibleEl) { |
||||
|
var content = flexibleEl.getAttribute('content') |
||||
|
if (content) { |
||||
|
// eslint-disable-next-line no-useless-escape
|
||||
|
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/) |
||||
|
// eslint-disable-next-line no-useless-escape
|
||||
|
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/) |
||||
|
if (initialDpr) { |
||||
|
dpr = parseFloat(initialDpr[1]) |
||||
|
scale = parseFloat((1 / dpr).toFixed(2)) |
||||
|
} |
||||
|
if (maximumDpr) { |
||||
|
dpr = parseFloat(maximumDpr[1]) |
||||
|
scale = parseFloat((1 / dpr).toFixed(2)) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (!dpr && !scale) { |
||||
|
// eslint-disable-next-line no-unused-vars
|
||||
|
var isAndroid = win.navigator.appVersion.match(/android/gi) |
||||
|
var isIPhone = win.navigator.appVersion.match(/iphone/gi) |
||||
|
var devicePixelRatio = win.devicePixelRatio |
||||
|
if (isIPhone) { |
||||
|
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
|
||||
|
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { |
||||
|
dpr = 3 |
||||
|
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { |
||||
|
dpr = 2 |
||||
|
} else { |
||||
|
dpr = 1 |
||||
|
} |
||||
|
} else { |
||||
|
// 其他设备下，仍旧使用1倍的方案
|
||||
|
dpr = 1 |
||||
|
} |
||||
|
scale = 1 / dpr |
||||
|
} |
||||
|
|
||||
|
docEl.setAttribute('data-dpr', dpr) |
||||
|
if (!metaEl) { |
||||
|
metaEl = doc.createElement('meta') |
||||
|
metaEl.setAttribute('name', 'viewport') |
||||
|
metaEl.setAttribute( |
||||
|
'content', |
||||
|
'initial-scale=' + |
||||
|
scale + |
||||
|
', maximum-scale=' + |
||||
|
scale + |
||||
|
', minimum-scale=' + |
||||
|
scale + |
||||
|
', user-scalable=no' |
||||
|
) |
||||
|
if (docEl.firstElementChild) { |
||||
|
docEl.firstElementChild.appendChild(metaEl) |
||||
|
} else { |
||||
|
var wrap = doc.createElement('div') |
||||
|
wrap.appendChild(metaEl) |
||||
|
doc.write(wrap.innerHTML) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function refreshRem() { |
||||
|
var width = docEl.getBoundingClientRect().width |
||||
|
// 最小1366px，最大适配2560px
|
||||
|
if (width / dpr < 1366) { |
||||
|
width = 1366 * dpr |
||||
|
} else if (width / dpr > 2560) { |
||||
|
width = 2560 * dpr |
||||
|
} |
||||
|
// 设置成24等份，设计稿时1920px的，这样1rem就是80px
|
||||
|
var rem = width / 24 |
||||
|
docEl.style.fontSize = rem + 'px' |
||||
|
flexible.rem = win.rem = rem |
||||
|
} |
||||
|
|
||||
|
win.addEventListener( |
||||
|
'resize', |
||||
|
function() { |
||||
|
clearTimeout(tid) |
||||
|
tid = setTimeout(refreshRem, 300) |
||||
|
}, |
||||
|
false |
||||
|
) |
||||
|
win.addEventListener( |
||||
|
'pageshow', |
||||
|
function(e) { |
||||
|
if (e.persisted) { |
||||
|
clearTimeout(tid) |
||||
|
tid = setTimeout(refreshRem, 300) |
||||
|
} |
||||
|
}, |
||||
|
false |
||||
|
) |
||||
|
|
||||
|
if (doc.readyState === 'complete') { |
||||
|
doc.body.style.fontSize = 12 * dpr + 'px' |
||||
|
} else { |
||||
|
doc.addEventListener( |
||||
|
'DOMContentLoaded', |
||||
|
// eslint-disable-next-line no-unused-vars
|
||||
|
function(e) { |
||||
|
doc.body.style.fontSize = 12 * dpr + 'px' |
||||
|
}, |
||||
|
false |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
refreshRem() |
||||
|
|
||||
|
flexible.dpr = win.dpr = dpr |
||||
|
flexible.refreshRem = refreshRem |
||||
|
flexible.rem2px = function(d) { |
||||
|
var val = parseFloat(d) * this.rem |
||||
|
if (typeof d === 'string' && d.match(/rem$/)) { |
||||
|
val += 'px' |
||||
|
} |
||||
|
return val |
||||
|
} |
||||
|
flexible.px2rem = function(d) { |
||||
|
var val = parseFloat(d) / this.rem |
||||
|
if (typeof d === 'string' && d.match(/px$/)) { |
||||
|
val += 'rem' |
||||
|
} |
||||
|
return val |
||||
|
} |
||||
|
})(window, window['lib'] || (window['lib'] = {})) |
||||
@ -0,0 +1,61 @@ |
|||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
scrollDom: null, |
||||
|
interval: null, |
||||
|
scrollTimer: null, // 滚动定时器
|
||||
|
pauseTimer: null, // 暂停定时器
|
||||
|
timeout: null, |
||||
|
step: null |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
// this.dataCompleteFun()
|
||||
|
}, |
||||
|
destroyed() { |
||||
|
// 清理定时器
|
||||
|
clearTimeout(this.pauseTimer) |
||||
|
this.pauseTimer = null |
||||
|
clearInterval(this.scrollTimer) |
||||
|
this.scrollTimer = null |
||||
|
// 清理点击监听
|
||||
|
window.document.removeEventListener('click', this.pauseScroll) |
||||
|
}, |
||||
|
methods: { |
||||
|
autoScroll() { |
||||
|
// 滚动长度为0
|
||||
|
if (this.scrollDom.scrollHeight - this.scrollDom.clientHeight > 0) { |
||||
|
// 如果定时器存在
|
||||
|
if (this.scrollTimer) { |
||||
|
// 则先清除
|
||||
|
clearInterval(this.scrollTimer) |
||||
|
clearTimeout(this.pauseTimer) |
||||
|
this.scrollTimer = null |
||||
|
this.pauseTimer = null |
||||
|
} |
||||
|
this.scrollTimer = setInterval(() => { |
||||
|
const scrollHeight = this.scrollDom.scrollHeight |
||||
|
const clientHeight = this.scrollDom.clientHeight |
||||
|
const scroll = scrollHeight - clientHeight |
||||
|
// 获取当前滚动条距离顶部高度
|
||||
|
const scrollTop = this.scrollDom.scrollTop |
||||
|
// 当滚动到底部时,间隔时间后重回顶部开始
|
||||
|
if (scrollTop + this.step >= scroll) { |
||||
|
this.scrollDom.scrollTop = scroll |
||||
|
this.pauseTimer = setTimeout(() => { |
||||
|
this.scrollDom.scrollTop = 0 |
||||
|
this.autoScroll() |
||||
|
}, this.timeout) |
||||
|
} else { // 没有则继续滚动
|
||||
|
this.scrollDom.scrollTop = scrollTop + this.step |
||||
|
} |
||||
|
// console.log(scrollHeight, clientHeight, scroll, scrollTop)
|
||||
|
}, this.interval) |
||||
|
} else { |
||||
|
return |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,165 @@ |
|||||
|
<template> |
||||
|
<div id="main" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import echarts from 'echarts' |
||||
|
import resize from '@/utils/resizeMixins.js' |
||||
|
|
||||
|
export default { |
||||
|
name: 'AcrossEcharts', |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
require: true, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
'chartData': { |
||||
|
handler(val) { |
||||
|
setTimeout(() => { |
||||
|
this.drawChart() |
||||
|
}, 100) |
||||
|
}, |
||||
|
immediate: true, |
||||
|
deep: true |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.drawChart() |
||||
|
window.addEventListener('resize', this.__resizeHandler) |
||||
|
}, |
||||
|
methods: { |
||||
|
drawChart() { |
||||
|
const chartDom = document.getElementById('main') |
||||
|
this.chart = echarts.init(chartDom) |
||||
|
let option = null |
||||
|
option = { |
||||
|
grid: { // 边距 |
||||
|
left: '2%', |
||||
|
right: '2%', |
||||
|
bottom: '5%', |
||||
|
top: '8%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'cross', |
||||
|
label: { |
||||
|
backgroundColor: '#339cff' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: this.chartData.totalLendMonth, |
||||
|
axisLine: { // 轴线的颜色以及宽度 |
||||
|
lineStyle: { |
||||
|
color: 'rgba(17, 61, 114,0.5)' |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { show: false }, |
||||
|
axisLabel: { // x轴文字的配置 |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
min: 5000, |
||||
|
max: 25000, |
||||
|
splitNumber: 5, |
||||
|
axisLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLabel: { // x轴文字的配置 |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { // 刻度线隐藏 |
||||
|
show: false |
||||
|
}, |
||||
|
splitLine: { // 分割线配置 |
||||
|
lineStyle: { |
||||
|
color: 'rgba(17, 61, 114,0.5)', |
||||
|
type: 'solid' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '借阅量', |
||||
|
data: this.chartData.totalLendData, |
||||
|
type: 'line', |
||||
|
areaStyle: { |
||||
|
normal: { |
||||
|
color: { |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0.1, |
||||
|
color: 'rgba(26, 201, 255, 0.5)' // 0% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.5, |
||||
|
color: 'rgba(26, 201, 255, 0.3)' // 0% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.7, |
||||
|
color: 'rgba(26, 201, 255, 0.2)' // 0% 处的颜色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.9, |
||||
|
color: 'rgba(26, 201, 255, 0.1)' // 100% 处的颜色 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#339CFF', // 改变折线点的颜色 |
||||
|
lineStyle: { |
||||
|
color: 'rgba(26, 201, 255,0.5)' // 改变折线颜色 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
option && this.chart.setOption(option) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.h{ |
||||
|
color: rgb(26, 201, 255); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,213 @@ |
|||||
|
<template> |
||||
|
<div id="main2" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import echarts from 'echarts' |
||||
|
import resize from '@/utils/resizeMixins.js' |
||||
|
export default { |
||||
|
name: 'LineEcharts', |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
require: true, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: 'calc(100% - 20px)' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
mmediate: true, |
||||
|
handler(val) { |
||||
|
setTimeout(() => { |
||||
|
this.setOptions(val) |
||||
|
}, 100) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
const dom = document.getElementById('main2') |
||||
|
this.chart = echarts.init(dom, 'dark') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ returnData, borrowedData } = {}) { |
||||
|
const time = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'] |
||||
|
this.chart.setOption({ |
||||
|
backgroundColor: '#010326', |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'cross', |
||||
|
label: { |
||||
|
backgroundColor: '#6a7985' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
legend: { |
||||
|
top: '4%', |
||||
|
right: '4%', |
||||
|
icon: 'rect', |
||||
|
itemHeight: 4, |
||||
|
itemWidth: 26, |
||||
|
textStyle: { |
||||
|
fontSize: '16px', |
||||
|
color: '#339CFF' |
||||
|
}, |
||||
|
data: ['借出', '归还'] |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '2%', |
||||
|
right: '4%', |
||||
|
bottom: '4%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: [{ |
||||
|
type: 'category', |
||||
|
data: time.map(function(item) { |
||||
|
return item |
||||
|
}), |
||||
|
axisLabel: { |
||||
|
interval: 5, |
||||
|
formatter: function(value, idx) { |
||||
|
return value |
||||
|
}, |
||||
|
color: '#fff' |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
width: '1', |
||||
|
color: '#113D72', |
||||
|
type: 'solid' |
||||
|
} |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: '#333' |
||||
|
} |
||||
|
}, |
||||
|
boundaryGap: false |
||||
|
}], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
// 坐标轴最大值、最小值、强制设置数据的步长间隔 |
||||
|
max: 1000, |
||||
|
min: 0, |
||||
|
interval: 250, |
||||
|
axisLabel: { |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
// 轴线 |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: '#113D72', |
||||
|
width: '1', |
||||
|
type: 'solid' |
||||
|
} |
||||
|
}, |
||||
|
// 坐标轴刻度相关设置。 |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
// 分割线 |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: '#113D72', |
||||
|
type: 'dashed', |
||||
|
// 透明度 |
||||
|
opacity: 1, |
||||
|
width: 1 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '归还', |
||||
|
type: 'line', |
||||
|
smooth: 0.6, |
||||
|
lineStyle: { |
||||
|
width: 1, |
||||
|
color: '#18B08F' |
||||
|
}, |
||||
|
showSymbol: false, |
||||
|
areaStyle: { |
||||
|
opacity: 0.6, |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
|
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: 'rgba(24, 176, 143, 0)' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: 'rgba(23, 175, 142, 1)' |
||||
|
} |
||||
|
]) |
||||
|
}, |
||||
|
data: returnData |
||||
|
}, |
||||
|
{ |
||||
|
name: '借出', |
||||
|
type: 'line', |
||||
|
smooth: 0.4, |
||||
|
lineStyle: { |
||||
|
width: 1, |
||||
|
color: '#FE8042' |
||||
|
}, |
||||
|
showSymbol: false, |
||||
|
areaStyle: { |
||||
|
opacity: 0.6, |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: 'rgba(254, 128, 66, 0)' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: 'rgba(254, 128, 66, 1)' |
||||
|
} |
||||
|
]) |
||||
|
}, |
||||
|
data: borrowedData |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,42 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import App from './App.vue' |
||||
|
import router from './router' |
||||
|
import store from './store' |
||||
|
|
||||
|
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' |
||||
|
|
||||
|
// 按需引入然后注册在vue原型上
|
||||
|
import { Message } from 'element-ui' |
||||
|
Vue.prototype.$message = Message |
||||
|
|
||||
|
// 馆代码 1201为东西湖馆代码 / 本地测试用FTZN
|
||||
|
// Vue.prototype.libcode = 'FTZN'
|
||||
|
Vue.prototype.libcode = '1201' |
||||
|
|
||||
|
import axios from 'axios' |
||||
|
Vue.prototype.$axios = axios |
||||
|
|
||||
|
// 引入echart
|
||||
|
import echarts from 'echarts' |
||||
|
Vue.prototype.$echarts = echarts |
||||
|
|
||||
|
import scroll from 'vue-seamless-scroll' |
||||
|
Vue.use(scroll) |
||||
|
|
||||
|
Vue.config.productionTip = false |
||||
|
Vue.component(Message.name, Message) |
||||
|
new Vue({ |
||||
|
router, |
||||
|
store, |
||||
|
render: (h) => h(App) |
||||
|
}).$mount('#app') |
||||
@ -0,0 +1,22 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import VueRouter from 'vue-router' |
||||
|
|
||||
|
Vue.use(VueRouter) |
||||
|
|
||||
|
const routes = [ |
||||
|
{ |
||||
|
path: '/', |
||||
|
name: 'index', |
||||
|
component: () => import('../views/index.vue'), |
||||
|
meta: { |
||||
|
title: '智慧大屏' |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
const router = new VueRouter({ |
||||
|
mode: '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,92 @@ |
|||||
|
export function debounce(func, wait, immediate) { |
||||
|
let timeout, args, context, timestamp, result |
||||
|
|
||||
|
const later = function() { |
||||
|
// 据上一次触发时间间隔
|
||||
|
const last = +new Date() - timestamp |
||||
|
|
||||
|
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
|
||||
|
if (last < wait && last > 0) { |
||||
|
timeout = setTimeout(later, wait - last) |
||||
|
} else { |
||||
|
timeout = null |
||||
|
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
|
||||
|
if (!immediate) { |
||||
|
result = func.apply(context, args) |
||||
|
if (!timeout) context = args = null |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return function(...args) { |
||||
|
context = this |
||||
|
timestamp = +new Date() |
||||
|
const callNow = immediate && !timeout |
||||
|
// 如果延时不存在，重新设定延时
|
||||
|
if (!timeout) timeout = setTimeout(later, wait) |
||||
|
if (callNow) { |
||||
|
result = func.apply(context, args) |
||||
|
context = args = null |
||||
|
} |
||||
|
|
||||
|
return result |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Parse the time to string |
||||
|
* @param {(Object|string|number)} time |
||||
|
* @param {string} cFormat |
||||
|
* @returns {string} |
||||
|
*/ |
||||
|
export function parseTime(time, cFormat) { |
||||
|
if (arguments.length === 0) { |
||||
|
return null |
||||
|
} |
||||
|
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' |
||||
|
let date |
||||
|
if (typeof time === 'undefined' || time === null || time === 'null') { |
||||
|
return '' |
||||
|
} else if (typeof time === 'object') { |
||||
|
date = time |
||||
|
} else { |
||||
|
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) { |
||||
|
time = parseInt(time) |
||||
|
} |
||||
|
if ((typeof time === 'number') && (time.toString().length === 10)) { |
||||
|
time = time * 1000 |
||||
|
} |
||||
|
date = new Date(time) |
||||
|
} |
||||
|
const formatObj = { |
||||
|
y: date.getFullYear(), |
||||
|
m: date.getMonth() + 1, |
||||
|
d: date.getDate(), |
||||
|
h: date.getHours(), |
||||
|
i: date.getMinutes(), |
||||
|
s: date.getSeconds(), |
||||
|
a: date.getDay() |
||||
|
} |
||||
|
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { |
||||
|
let value = formatObj[key] |
||||
|
// Note: getDay() returns 0 on Sunday
|
||||
|
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] } |
||||
|
if (result.length > 0 && value < 10) { |
||||
|
value = '0' + value |
||||
|
} |
||||
|
return value || 0 |
||||
|
}) |
||||
|
return time_str |
||||
|
} |
||||
|
|
||||
|
// 获取当前日期时间
|
||||
|
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,38 @@ |
|||||
|
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 => { |
||||
|
return response.data |
||||
|
}, |
||||
|
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,136 @@ |
|||||
|
<template> |
||||
|
<div class="accessToLib-container"> |
||||
|
<div class="accessToLib-item"> |
||||
|
<span>总进馆人数</span> |
||||
|
<count-to :start-val="0" :end-val="totalNum" :duration="3200" class="panel-num" /> |
||||
|
</div> |
||||
|
<div v-if="!isSelfService" class="accessToLib-item"> |
||||
|
<span>月进馆人数</span> |
||||
|
<count-to :start-val="0" :end-val="monthNum" :duration="3200" class="panel-num" /> |
||||
|
</div> |
||||
|
<div class="accessToLib-item"> |
||||
|
<span>今日进馆人数</span> |
||||
|
<count-to :start-val="0" :end-val="dayNum" :duration="3200" class="panel-num" /> |
||||
|
</div> |
||||
|
<div v-if="isSelfService" class="accessToLib-item"> |
||||
|
<span>今日出馆人数</span> |
||||
|
<count-to :start-val="0" :end-val="dayOutNum" :duration="3200" class="panel-num" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchInitIntoNum } from '@/api/library' |
||||
|
import CountTo from 'vue-count-to' |
||||
|
|
||||
|
export default { |
||||
|
name: 'AccessToLibrary', |
||||
|
components: { |
||||
|
CountTo |
||||
|
}, |
||||
|
props: { |
||||
|
isSelfService: { |
||||
|
type: Boolean, |
||||
|
default: function() { |
||||
|
return false |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
timer: null, |
||||
|
dayNum: 0, |
||||
|
dayOutNum: 0, |
||||
|
monthNum: 0, |
||||
|
totalNum: 0, |
||||
|
otherDoorOther: null |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// 获取数据 |
||||
|
this.getInitIntoNum() |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 每15秒获取一次 |
||||
|
this.timer = setInterval(() => { |
||||
|
this.getInitIntoNum() |
||||
|
}, 15000) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
// 销毁定时器 |
||||
|
this.$once('hook:beforeDestroy', () => { |
||||
|
clearInterval(this.timer) |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
getInitIntoNum() { |
||||
|
// this.otherDoorOther = window.location.href.split('?')[1]?.split('=')[1] |
||||
|
const currentURL = window.location.href |
||||
|
console.log(currentURL) |
||||
|
if (currentURL.indexOf('?') !== -1) { |
||||
|
const query = currentURL.split('?')[1] |
||||
|
console.log(query) |
||||
|
console.log(query.indexOf('startTime')) |
||||
|
if (query.indexOf('startTime') !== -1 || query.indexOf('endTime') !== -1) { |
||||
|
const paramsUrl = query.split('&') |
||||
|
console.log(paramsUrl) |
||||
|
let startTimeIndex = -1 |
||||
|
for (let i = 0; i < paramsUrl.length; i++) { |
||||
|
const [key] = paramsUrl[i].split('=') |
||||
|
if (key === 'startTime' || key === 'endTime') { |
||||
|
startTimeIndex = i |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
// 去除 startTime 参数及其后面的参数 |
||||
|
const filteredParams = startTimeIndex >= 0 ? paramsUrl.slice(0, startTimeIndex) : params |
||||
|
const newQueryString = filteredParams.join('&') |
||||
|
this.otherDoorOther = newQueryString.split('=')[1] |
||||
|
} else { |
||||
|
this.otherDoorOther = query.split('=')[1] |
||||
|
} |
||||
|
} else { |
||||
|
this.otherDoorOther = null |
||||
|
} |
||||
|
|
||||
|
const startTime = this.$route.query.startTime |
||||
|
const endTime = this.$route.query.endTime |
||||
|
|
||||
|
if (this.otherDoorOther && this.otherDoorOther !== '' && this.otherDoorOther.indexOf('&')) { |
||||
|
this.otherDoorOther = this.otherDoorOther.replace(/\&/g, '、') |
||||
|
} else { |
||||
|
this.otherDoorOther = null |
||||
|
} |
||||
|
|
||||
|
let params |
||||
|
if (!this.isSelfService) { |
||||
|
params = { |
||||
|
doorCodes: this.otherDoorOther, |
||||
|
startTime: startTime, |
||||
|
endTime: endTime |
||||
|
} |
||||
|
} else { |
||||
|
params = { |
||||
|
doorCodes: 'D001', |
||||
|
startTime: startTime, |
||||
|
endTime: endTime |
||||
|
} |
||||
|
} |
||||
|
FetchInitIntoNum(params).then((res) => { |
||||
|
if (res.errCode === 0) { |
||||
|
this.dayNum = res.data.dayPeopleNum |
||||
|
this.monthNum = res.data.monthPeopleNum |
||||
|
this.totalNum = res.data.historyPeopleNum |
||||
|
this.dayOutNum = res.data.dayOutNUm |
||||
|
} else { |
||||
|
this.$message.error('接口错误') |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,68 @@ |
|||||
|
<template> |
||||
|
<div class="header-container"> |
||||
|
<div class="header-title"> |
||||
|
<div class="line1"> |
||||
|
<span class="top-line1" /> |
||||
|
</div> |
||||
|
<div class="ball-running-dots left-dots"> |
||||
|
<div /> |
||||
|
<div /> |
||||
|
<div /> |
||||
|
<div /> |
||||
|
</div> |
||||
|
<h2>{{ headerTitle }}</h2> |
||||
|
<div class="ball-running-dots right-dots"> |
||||
|
<div /> |
||||
|
<div /> |
||||
|
<div /> |
||||
|
<div /> |
||||
|
</div> |
||||
|
<div class="line2"> |
||||
|
<span class="top-line2" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="header-text header-weather"> |
||||
|
<!-- 天气api: https://www.tianqi.com/plugin --> |
||||
|
<iframe id="weather" width="400" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=34&color=%23FFFFFF&icon=1&py=wuhan&site=18" /> |
||||
|
</div> |
||||
|
<div class="header-text header-date">{{ nowDate }}</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getCurrentTime } from '@/utils/index' |
||||
|
export default { |
||||
|
name: 'Header', |
||||
|
props: { |
||||
|
headerTitle: { |
||||
|
type: String, |
||||
|
default: function() { |
||||
|
return '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
nowDate: '' |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
headerTitle: function() { |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.timer = setInterval(() => { |
||||
|
this.nowDate = getCurrentTime() |
||||
|
}, 1000) |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
@import "~@/assets/styles/ball-running-animate.css"; |
||||
|
</style> |
||||
@ -0,0 +1,59 @@ |
|||||
|
<template> |
||||
|
<div id="screen-container"> |
||||
|
<Header :header-title="headerTitle" /> |
||||
|
<div class="screen-main"> |
||||
|
<div class="screen-left"> |
||||
|
<TotalLending /> |
||||
|
<LengingRanking /> |
||||
|
</div> |
||||
|
<div class="screen-middle"> |
||||
|
<AccessToLibrary :is-self-service="false" /> |
||||
|
<Video /> |
||||
|
<ReadStar /> |
||||
|
</div> |
||||
|
<div class="screen-right"> |
||||
|
<Notice /> |
||||
|
<NewBookRecommend /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Header from '@/views/header/index.vue' |
||||
|
import TotalLending from '@/views/totalLending/index.vue' |
||||
|
import LengingRanking from '@/views/lengingRanking/index.vue' |
||||
|
import AccessToLibrary from '@/views/accessToLibrary/index.vue' |
||||
|
import Video from '@/views/video/index.vue' |
||||
|
import Notice from '@/views/notice/index.vue' |
||||
|
import NewBookRecommend from '@/views/newBookRecommend/index.vue' |
||||
|
import ReadStar from '@/views/readStar/index.vue' |
||||
|
export default { |
||||
|
name: 'Home', |
||||
|
components: { |
||||
|
Header, |
||||
|
TotalLending, |
||||
|
LengingRanking, |
||||
|
AccessToLibrary, |
||||
|
Video, |
||||
|
ReadStar, |
||||
|
Notice, |
||||
|
NewBookRecommend |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
headerTitle: '祁阳图书馆' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,102 @@ |
|||||
|
<template> |
||||
|
<!-- 借阅排行榜 --> |
||||
|
<div class="screen-item lending-ranking"> |
||||
|
<div class="common-title">借阅排行榜</div> |
||||
|
<vue-seamless-scroll |
||||
|
ref="listData" |
||||
|
:data="rankingList" |
||||
|
:class-option="defaultOption" |
||||
|
class="big-module module-content" |
||||
|
> |
||||
|
<div |
||||
|
v-for="(item, index) in rankingList" |
||||
|
:key="index" |
||||
|
class="book-list-item" |
||||
|
> |
||||
|
<div class="book-img"> |
||||
|
<img :src="item.cover" :onerror="defaultImg"> |
||||
|
</div> |
||||
|
<div class="book-info"> |
||||
|
<h4 class="title-item">{{ item.bookName }}</h4> |
||||
|
<p>{{ item.author }}</p> |
||||
|
</div> |
||||
|
<div class="ranking-num"> |
||||
|
<svg v-if="index === 0" class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-no1" /> |
||||
|
</svg> |
||||
|
<svg v-if="index === 1" class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-no21" /> |
||||
|
</svg> |
||||
|
<svg v-if="index === 2" class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-no3" /> |
||||
|
</svg> |
||||
|
<p>NO.{{ index + 1 }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</vue-seamless-scroll> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchBorrowRank, FetchCoverByISBN } from '@/api/library' |
||||
|
|
||||
|
export default { |
||||
|
name: 'LengingRanking', |
||||
|
data() { |
||||
|
return { |
||||
|
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
||||
|
rankingList: [] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
defaultOption() { |
||||
|
return { |
||||
|
step: 1.1, // 滚动的速度 |
||||
|
hoverStop: false, // 是否开启鼠标悬停stop |
||||
|
singleHeight: 102, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
||||
|
openWatch: true, |
||||
|
waitTime: 2000 // 单步运动停止的时间(默认值1000ms) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getBorrowRank() |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
getBorrowRank() { |
||||
|
FetchBorrowRank().then((res) => { |
||||
|
if (res.errCode === 0) { |
||||
|
this.rankingList = res.data |
||||
|
this.rankingList.forEach(item => { |
||||
|
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
||||
|
}) |
||||
|
} else { |
||||
|
this.$message.error('接口错误') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
getCoverByISBN(isbn, item) { |
||||
|
const params = { |
||||
|
isbn: isbn |
||||
|
} |
||||
|
FetchCoverByISBN(params).then((res) => { |
||||
|
console.log('RES', res) |
||||
|
if (res) { |
||||
|
// item.cover = window.URL.createObjectURL(res) |
||||
|
item.cover = res |
||||
|
} else { |
||||
|
item.cover = '' |
||||
|
} |
||||
|
console.log(item.cover) |
||||
|
this.$refs.listData.reset() |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import '~@/assets/styles/index.scss'; |
||||
|
</style> |
||||
@ -0,0 +1,648 @@ |
|||||
|
[ |
||||
|
{ |
||||
|
"nbId": "2c9680978e7f2e4f018ea185d9ba0022", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "海错图笔记", |
||||
|
"nbExplain": "这本书是一套多元解读清代海洋生物图谱《海错图》的科普书，以博物达人的视角，从生物学，博物学及生活美学等角度，讲述中国丰富的海洋及滨海生物，植物和风土人情。孩子读了这本书，可谓是一次酣畅痛快的海洋及滨海生物物种解密，更是一次精彩的古今博物达人思维碰撞。", |
||||
|
"createTime": "2024-04-03T01:14:47.610+0000", |
||||
|
"creater": "297edff88354751d018359cd2e120000", |
||||
|
"updateTime": "2024-04-03T01:14:47.610+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "张辰亮著", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "Q178.53/12", |
||||
|
"isbn": "978-7-5217-2277-2", |
||||
|
"nbPublisher": " 中信出版集团股份有限公司", |
||||
|
"nbPublisherdate": "2020", |
||||
|
"nbRecno": "12" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c231b555f18ae", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "费曼经典", |
||||
|
"nbExplain": "本书是著名物理学家理查德·费曼最负盛名的自述回忆录合集, 这些文章大致按时间顺序分为8个部分, 展现费曼的精彩一生: 从法洛克威小镇的好奇少年到麻省理工新生, 在普林斯顿大学那些年, 与爱妻阿琳的恋情, 与曼哈顿计划和原子弹, 任教康奈尔大学和加州理工学院, 到巴西感受拉美风情, 到华盛顿调查航天飞机事故……费曼以坦率的口吻讲述了他的所有冒险。作为费曼的好友, 编者拉尔夫·莱顿为本书增加了注释, 这些着意补充的细节为费曼的叙述增添了别样的色彩; 同时收录包括费曼的照片、绘画作品、手稿在内的的30多张图片。此外, 本书还特别收录著名物理学家、数学家弗里曼·戴森所作的前言, 并以知名演员、导演艾伦·艾尔达在加州理工学院毕业庆典上的演讲作为后记, 为这本精彩的自述辅以他人视角, 更能让读者看见一个完整的、活生生的费曼。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:13:22.543+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": " (美) 理查德·P. 费曼著 , (美) 拉尔夫·莱顿编", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "K837.126.11/4", |
||||
|
"isbn": "978-7-5596-6127-2", |
||||
|
"nbPublisher": " 北京联合出版公司", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "69" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c23197f6f18ad", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "杰克之书", |
||||
|
"nbExplain": "本书讲述了杰克·凯鲁亚克的故事，全书共分六章，内容包括：小镇、城市、路、重访城市、大瑟尔、阴郁的书式电影。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:13:14.273+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(美)巴里·吉福德(Barry, Gifford)，(美)劳伦斯·李(Lawrence, Lee)著", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "K837.125/33", |
||||
|
"isbn": "978-7-305-25073-6", |
||||
|
"nbPublisher": "南京大学出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "70" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c231858d818ac", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "一百年, 许多人, 许多事 ", |
||||
|
"nbExplain": "本书内容包括: 家族旧事、中西十年、从联大到中大 (上下) 四章。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:13:05.490+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "杨苡口述 , 余斌撰写", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "K825.6/332", |
||||
|
"isbn": "978-7-5447-9274-5 ", |
||||
|
"nbPublisher": "译林出版社", |
||||
|
"nbPublisherdate": "2023", |
||||
|
"nbRecno": "71" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c2316895518ab", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "漫威先生", |
||||
|
"nbExplain": "本书从斯坦李在罗马尼亚的家族讲起，一直延伸到他在洛杉矶的临终时刻。本书既忠实地记录了斯坦·李戏剧性的成功，也记录了他人生中悲剧性的失败。本书作者亚伯拉罕·里斯曼进行了150多次采访，查阅了数千页私人文件，发掘出斯坦·李从未公开过的工作和生活信息。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:12:56.080+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(美)亚伯拉罕·里斯曼(Abraham Riesman)著", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "K837.125.78=6/5", |
||||
|
"isbn": "978-7-5001-6919-2", |
||||
|
"nbPublisher": " 中译出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "72" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c2315547818aa", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "如何屠龙", |
||||
|
"nbExplain": "本书内容: 出生在小村庄的你突然被选中去屠龙, 这让你不知所措? 别担心, 这本“传说级”秘籍会手把手教你通关真实的中世纪! 你需要选择适合战斗的装备、学点儿防身的技巧, 再找到一位适合你的导师。你得学会在冒险途中解决自己的食宿问题, 但还得时刻提防狡猾的骗子和凶狠的强盗。你可以在酒馆里和看不惯的家伙打一架, 但记得别和迷人的酒馆女招待走得太近。你必须在漫长的寒冬中活下来, 但也要在火灾发生时伸出援手。你应该看得懂敌军来袭时烽火台上的信号, 也该清楚凯旋后如何招待来为你庆贺的热情宾客。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:12:48.097+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "史蒂文森", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "K109/179", |
||||
|
"isbn": "978-7-5596-6868-4", |
||||
|
"nbPublisher": " 北京联合出版公司", |
||||
|
"nbPublisherdate": "2023", |
||||
|
"nbRecno": "73" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c23121a1b18a9", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "我的艺术生活", |
||||
|
"nbExplain": "本书内容包括“艺术的童年时代”、“艺术的青少年时代”、“艺术的成年时期”三个部分，记述了作者从童年到成年所经历的生活和艺术的发展历程。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:12:39.867+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(苏联)斯坦尼斯拉夫斯基著 , 瞿白音译", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "K835.12/40", |
||||
|
"isbn": "978-7-5327-9119-4", |
||||
|
"nbPublisher": "上海译文出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "74" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c2310292f18a8", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "稻盛和夫如是说", |
||||
|
"nbExplain": "本书收录了整整半个世纪内，即从20世纪70年代开始至21世纪10年代为止，对稻盛合夫先生的采访，以及他的独白记述。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:12:30.210+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(日)稻盛和夫口述 , 曹岫云，张凯译", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "K833.13/28", |
||||
|
"isbn": "978-7-111-70571-0", |
||||
|
"nbPublisher": "机械工业出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "75" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c230de31218a7", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "布匿战争", |
||||
|
"nbExplain": "公元前3世纪, 罗马和迦太基展开了对两国之间的战略要地--西西里岛的争夺, 布匿战争的序幕由此拉开。在接下来的百余年里, 双方把战场扩大到了非洲、西班牙、意大利, 展开了改变古代地中海地区政治格局的三场宏大战争。许多军事史的经典篇章在此期间诞生--从汉尼拔率领十万大军翻越阿尔卑斯山、通过坎尼一役把罗马推到毁灭的边缘, 再到西庇阿在扎马之战大挫汉尼拔……布匿战争最后以迦太基屹立了三百多年的帝国在公元前146年的覆灭告终。布匿战争是西方历史的转折点, 如果罗马战败, 那么罗马帝国在接下来的两千年里对欧洲乃至整个世界造成的政治、语言、法律等方面的影响可能会小得多, 甚至罗马帝国可能根本不会出现。《布匿战争》兼具可读性和学术严谨性, 生动地呈现了这场战争, 也讨论了它深远的影响。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:12:22.193+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(英) 阿德里安·戈兹沃西著 , 李小迟译", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "K126/31", |
||||
|
"isbn": "978-7-5570-2623-3 ", |
||||
|
"nbPublisher": " 广东旅游出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "76" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c230b113118a6", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "好手艺", |
||||
|
"nbExplain": "\t本书集合了多部清朝时期中国广州一带画师所绘的外销画册，结合大量传世文献收录、介绍了农耕、造纸、制茶及贸易、纺织、制漆、瓷器制造及贸易、玻璃制作等与生活息息相关，且富有中国特色的传统手工艺制作流程，展示了当时中国社会生活与匠人精神，从侧面探寻了这股奔涌的“中国潮”，在文化生活与哲学思想方面，是如何影响席卷西方世界的。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:12:14.153+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "侯印国著", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "J52/4", |
||||
|
"isbn": "978-7-5168-3295-0 ", |
||||
|
"nbPublisher": " 台海出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "77" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c2309c9fb18a5", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "最后的礼物", |
||||
|
"nbExplain": "本书延续了移民主题, 但与前几部小说不同的是, 它聚焦于移民经历对移民自己及其后代的影响。主人公是63岁的非洲裔英国工程师阿巴斯, 43年前, 他从桑给巴尔来到英国, 认识了混血妻子马莉亚姆。多年来, 阿巴斯对自己到英国前的经历一直守口如瓶。小说开场时, 阿巴斯因糖尿病引发中风, 担心自己不久于人世, 把自己的秘密作为“最后的礼物”以碎片式的回忆方式告诉了家人。作为在英国长大的移民后代, 儿子贾马尔因自己的肤色难以被英国社会完全接受, 找不到归属感; 女儿汉娜 (Hanna) 把自己的名字改为安娜 (Anna), 在各方面努力把自己改造成一个英国人, 但其白人男友尼克的家人和亲友依然自恃种族优越, 对其冷嘲热讽, 羞辱责难。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:12:06.730+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(英) 阿卜杜勒拉扎克·古尔纳著 , 宋佥译", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "I561.45/970", |
||||
|
"isbn": "978-7-5327-9088-3 ", |
||||
|
"nbPublisher": "上海译文出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "78" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c2308c09218a4", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "里山异兽谭", |
||||
|
"nbExplain": "本书是与《远野物语》齐名的日本民俗文学经典, 为日本民俗学家、画家早川孝太郎的经典作品。最早出版于一九二六年, 收录了日本三河、横山等地区的老猎人等所讲述山野中出没的野兽的故事, 主要以野猪, 鹿和狸猫的轶事为主, 既有猎人山民的口头故事, 比如猎人射杀了超过90贯重的大野猪的故事、母鹿被杀死后跟来的小鹿的故事、在村庄发生的可疑事件怀疑是狸猫的恶作剧……又有流传甚广的民间传说, 诸如净琉璃姬与鹿、狸猫所变的文釜茶壶等, 还有民俗掌故等组成的独特的传统世界, 以取自日常生活的鲜活表达加上作者精心的文字加工而形成的民俗学经典作品, 文体简洁, 内容醇厚, 长期以来受到众多作家和文学爱好者的喜爱, 周作人、 芥川龙之介、柳田国男等人都对其有高度评价。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:11:59.067+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": " (日) 早川孝太郎著 , 熊韵译", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "I313.45/1207", |
||||
|
"isbn": "978-7-5327-9043-2", |
||||
|
"nbPublisher": " 上海译文出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "79" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c2307b15218a3", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "雏菊人生", |
||||
|
"nbExplain": "中篇小说 日本 现代", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:11:50.320+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(日)吉本芭娜娜著 , (日)奈良美智绘", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "I313.45/1206", |
||||
|
"isbn": "978-7-5327-9157-6 ", |
||||
|
"nbPublisher": "上海译文出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "80" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c23060fc018a2", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "像绅士淑女一样服务", |
||||
|
"nbExplain": "本书作者分享了丽思卡尔顿赖以生存的管理秘诀, 讲述了他在对待客户服务、员工激励和领导力构建三个方面的思考与智慧。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:11:41.960+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(美) 霍斯特·舒尔茨, 迪恩·梅里尔著 , 鲁仕齐译", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "F274/145", |
||||
|
"isbn": "978-7-111-70377-8", |
||||
|
"nbPublisher": "机械工业出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "81" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c2304ed0118a1", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "非自然死亡", |
||||
|
"nbExplain": "本书记录了作者理查德·谢泼德执业至今所经手的国际要案，从“9·11”事件、巴厘岛爆炸案、伦敦七七爆炸案，到亨格福德连环杀人案、戴安娜王妃车祸案等，讲述了案件背后不为人知的关键细节。书中还呈现了一些颇受争议的案件的始末，例如杀婴、种族主义谋杀、伪装成正当防卫的谋杀等。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:11:34.073+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(英)理查德·谢泼德(Richard Shepherd)著 , 李立丰译", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "D919.1/3", |
||||
|
"isbn": "978-7-5447-8927-1", |
||||
|
"nbPublisher": " 译林出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "82" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018b743e352d1837", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "博物馆奇妙夜", |
||||
|
"nbExplain": "今天是梅森的生日，梅森选择在他喜欢的地方——博物馆，举办生日party……", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:11:17.807+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(美)卡伦·勒弗拉克著", |
||||
|
"nbBooktype": "少儿图书", |
||||
|
"sortmark": "I712.85/717", |
||||
|
"isbn": " 978-7-5143-7459-9", |
||||
|
"nbPublisher": " 现代出版社", |
||||
|
"nbPublisherdate": "2020", |
||||
|
"nbRecno": "84" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018b743bb92b1836", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "特殊的任务", |
||||
|
"nbExplain": "特种兵学校的地理课告一段落了，因为猛虎小队和飞禽小队的队员们要和两位教官一起去热带雨林中执行一项重要的保密任务。这项保密任务队员们打探了一路也没能从教官们的口中得知。但是在任务执行过程中他们却学到了很多新的地理知识，而且这些地理知识还帮了他们大忙。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:11:09.993+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "八路,张博涵著", |
||||
|
"nbBooktype": "少儿图书", |
||||
|
"sortmark": "I287.47/418", |
||||
|
"isbn": "978-7-5595-4587-9", |
||||
|
"nbPublisher": "河北少年儿童出版社", |
||||
|
"nbPublisherdate": "2021", |
||||
|
"nbRecno": "85" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018b7435497c1834", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "偷偷藏不住", |
||||
|
"nbExplain": "七年前，也有这么一天。她穿着干净的裙子，站在穿着学士服的段嘉许旁边，因为再次见到他而感到开心，又因为即将的离别而觉得难过至极。她笨拙地藏着自己的心思，不敢让任何人发现，无论是她多亲密的人。她想象着，未来有一天一定要到他的身边去。那个时候的桑稚一定没有想过，七年后，她所想象的这么一天真的到来了。如她所愿。桑稚真的成了段嘉许身边的那个人。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:11:01.777+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "竹已著", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "I247.57/6312:2", |
||||
|
"isbn": "978-7-5552-8529-8", |
||||
|
"nbPublisher": "青岛出版社", |
||||
|
"nbPublisherdate": "2020", |
||||
|
"nbRecno": "86" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018b743074351833", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "妈妈的勇气：引导孩子找到自己", |
||||
|
"nbExplain": "本书是剑桥妈妈&职业女性精英大赛冠军刘红燕写给中国父母的0-18岁系统养育指南。作者手把手教你破解二宝、早教、择校、写作业、亲子沟通、金钱教育、艺术教育、性教育、留学等0-18岁孩子的养育难题, 学完就能解决。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:10:49.990+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "刘红燕著", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "G782/243", |
||||
|
"isbn": "978-7-5713-1430-9", |
||||
|
"nbPublisher": "江苏凤凰科学技术出版社", |
||||
|
"nbPublisherdate": "2021", |
||||
|
"nbRecno": "87" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c908097837879e801837890167c0001", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "2020中国年度散文诗精选", |
||||
|
"nbExplain": "", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:10:07.787+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "龚学敏 、 周庆荣", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "I", |
||||
|
"isbn": "9787546428024", |
||||
|
"nbPublisher": "成都时代出版社", |
||||
|
"nbPublisherdate": "2021", |
||||
|
"nbRecno": "91" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c908097837879e801837891699a0002", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "宇宙之谜", |
||||
|
"nbExplain": "", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:09:59.337+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(德)恩斯特·海克尔", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "G", |
||||
|
"isbn": "9787301313992", |
||||
|
"nbPublisher": "北京大学出版社", |
||||
|
"nbPublisherdate": "2020", |
||||
|
"nbRecno": "92" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c908097837879e8018378922bb60003", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "让科学发声--首都科学讲堂2020年集萃", |
||||
|
"nbExplain": "", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:09:40.317+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "马林", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "P", |
||||
|
"isbn": "9787113283797", |
||||
|
"nbPublisher": "中国铁道出版社 ", |
||||
|
"nbPublisherdate": "2021", |
||||
|
"nbRecno": "93" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c908097837879e8018378931a270004", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "习近平在福州[专著]", |
||||
|
"nbExplain": "", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:09:26.873+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "中央党校采访实录编辑室著", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "94", |
||||
|
"isbn": "9787503568404", |
||||
|
"nbPublisher": "中共中央党校出版社 ", |
||||
|
"nbPublisherdate": "2020", |
||||
|
"nbRecno": "0" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978c433d11018d2afeaa9a2358", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "读书与藏书", |
||||
|
"nbExplain": "\t本书收录作者探访27为文化名家书房，听书房主人畅叙个人阅读经历，阐说读书观与藏书观的访谈录。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:09:04.050+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "绿茶", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "K825.41=76/5", |
||||
|
"isbn": "978-7-5596-6736-6", |
||||
|
"nbPublisher": "北京联合出版公司", |
||||
|
"nbPublisherdate": "2023", |
||||
|
"nbRecno": "95" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978c433d11018d2b02cc58235a", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "白鹭在冰面上站着", |
||||
|
"nbExplain": "无论被叫作香格里拉，还是勐巴拉西，云南都是“人间天堂”的意思。在著名作家、鲁迅文学奖得主雷平阳眼里，云南是他的文学诞生地，是他生活的现场，更是他的桃花源和乌有乡。这本散文集即为他的“桃花源记”。澜沧江、怒江、金沙江、牛栏江，乌蒙山、哀牢山、基诺山、南糯山，山水相依；天空、丛林、废墟，寺庙、悬崖、墓地，人神鬼巫，共生共荣，死生无迹。云南的山川物候、历史文脉、民生世情转化为其阔大的写作景深，接通了雷平阳的无际视域。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:08:55.253+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "雷平阳著", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "I267/5253", |
||||
|
"isbn": "978-7-5447-9732-0", |
||||
|
"nbPublisher": "译林出版社", |
||||
|
"nbPublisherdate": "2023", |
||||
|
"nbRecno": "96" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978c433d11018d2b0180d72359", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "追赶你老去的速度", |
||||
|
"nbExplain": "本书是荷尔德林1785-1826年间，与亲人的通信，包括他和母亲、弟弟妹妹的通信。书信内容较为全面地反映了诗人与亲人交流的方式，生活的变故等。原文思想深邃，文学性强，译文准确、洗练。书信内容从一个侧面反映了诗人与亲人交流的真实状态，也反映了当时德国的社会风貌，是研究德国历史、文化，以及诗人创作成就不可多得的一手资料。书稿兼具学术性、艺术性和史料价值。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:08:45.640+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(德)荷尔德林著 , 王佐良译", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "K835.165/11", |
||||
|
"isbn": "978-7-205-10415-3", |
||||
|
"nbPublisher": "辽宁人民出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "97" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978c433d11018d2afca7002357", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "这个三国史很上头", |
||||
|
"nbExplain": "本书分军阀篇、曹魏篇、蜀汉篇、东吴篇、三分归晋篇五编，内容包括：“吕布：有多勇武，就有多不受待见”“公孙瓒：从白马将军到笼中困兽”“袁绍：小气量失大天下”等。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:08:36.740+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "张大可", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "K236/7", |
||||
|
"isbn": "978-7-5411-6391-3 ", |
||||
|
"nbPublisher": "四川文艺出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "98" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c22fdc47b189f", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "阿富汗文件", |
||||
|
"nbExplain": "本书是对“阿富汗战争”的深度调查，揭示了美国在阿富汗战争中的谎言、欺骗与真相。美国以反恐为名发动战争，这是被净化了的官方叙事。作者获取了大量美国政府未敢公开的内部文件，在书中揭示了美国如何陷入一场劳师动众的战争，并决心对公众隐瞒失败的真相。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:08:27.763+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(美)克雷格·惠特洛克(Craig Whitlock)著 , 陈小迁，张文斗译", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "D815.4/8", |
||||
|
"isbn": "978-7-5217-3900-8 ", |
||||
|
"nbPublisher": "中信出版集团股份有限公司", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "99" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978a8dea18018c22fb1575189e", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "效率脑科学", |
||||
|
"nbExplain": "本书根据最新的脑科学研究成果，耗费数年时间写作了这本工作脑科学著作，其中的方法经过了知名企业的多次验证，切实提高了人们的工作效率。", |
||||
|
"createTime": null, |
||||
|
"creater": null, |
||||
|
"updateTime": "2024-04-03T01:08:18.827+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": " (美)戴维·罗克(David Rock)著 , 马梦捷译", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "C934/46", |
||||
|
"isbn": "978-7-115-57971-3 ", |
||||
|
"nbPublisher": "人民邮电出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "99" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978e7f2e4f018ea17f94140021", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "爱丽莎的眼睛", |
||||
|
"nbExplain": "法国圣埃克苏佩文学奖获得者蒂莫泰.德.丰拜勒的代表作，这是一部历险小说，也是一部幻想曲，更是一篇保护生态环境的宣言。它简单又神秘，平实又激动人心，故事扣人心弦。它嘲笑无知和权势，赞扬智慧与勇敢，崇尚人间真情，它将给我们带来精神上的洗礼，是一部难得可贵的心灵宝典。", |
||||
|
"createTime": "2024-04-03T01:07:56.563+0000", |
||||
|
"creater": "297edff88354751d018359cd2e120000", |
||||
|
"updateTime": "2024-04-03T01:07:56.563+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(法) 蒂莫泰·德·丰拜勒著", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "I565.84/50", |
||||
|
"isbn": "978-7-5307-4994-4", |
||||
|
"nbPublisher": "新蕾出版社", |
||||
|
"nbPublisherdate": "2011", |
||||
|
"nbRecno": "12" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978e7f2e4f018ea17ec74c0020", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "一句顶一万句", |
||||
|
"nbExplain": "茅盾文学奖获奖作品", |
||||
|
"createTime": "2024-04-03T01:07:04.140+0000", |
||||
|
"creater": "297edff88354751d018359cd2e120000", |
||||
|
"updateTime": "2024-04-03T01:07:04.140+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "刘震云", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "I247.57/6485", |
||||
|
"isbn": "978-7-5360-9726-1", |
||||
|
"nbPublisher": "花城出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "13" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978e7f2e4f018ea17e1cf5001f", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "鱼肚白点亮的记忆", |
||||
|
"nbExplain": "本书以时间为序, 串起作者徐淑云的人生岁月, 记下作者在追忆中的思索, 思索中的感悟, 感悟中的思想升华。本书让读者在治愈中思考, 在思考中感动, 给读者以美的享受。", |
||||
|
"createTime": "2024-04-03T01:06:20.533+0000", |
||||
|
"creater": "297edff88354751d018359cd2e120000", |
||||
|
"updateTime": "2024-04-03T01:06:20.533+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "徐淑云", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "I267/5257", |
||||
|
"isbn": "978-7-203-12327-9", |
||||
|
"nbPublisher": "山西人民出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "13" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978e7f2e4f018ea17acb3d001b", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "哈姆雷特", |
||||
|
"nbExplain": "生存还是死亡，哈姆雷特的经典疑问。这本书是莎士比亚的经典，讲的是丹麦王子哈姆雷特历经艰险为父报仇的故事。读了这本书，孩子可以感受到大文豪优美的文笔并且可以体会人世间的酸甜苦辣。", |
||||
|
"createTime": "2024-04-03T01:02:43.003+0000", |
||||
|
"creater": "297edff88354751d018359cd2e120000", |
||||
|
"updateTime": "2024-04-03T01:02:43.003+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(英)威廉·莎士比亚著 , (英)查尔斯·兰姆，(英)玛丽·兰姆改写", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "I561.33/76:1", |
||||
|
"isbn": "978-7-5470-6068-1", |
||||
|
"nbPublisher": "万卷出版有限责任公司", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "16" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978e7f2e4f018ea179eafe001a", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "一分钟", |
||||
|
"nbExplain": "本书收录了著名儿童文学作家鲁兵的童话，通过主人公的经历，让孩子明白时间规划的重要性，培养孩子良好习惯的养成。", |
||||
|
"createTime": "2024-04-03T01:01:45.597+0000", |
||||
|
"creater": "297edff88354751d018359cd2e120000", |
||||
|
"updateTime": "2024-04-03T01:01:45.597+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": " 鲁兵著", |
||||
|
"nbBooktype": "绘本", |
||||
|
"sortmark": "I287/194:2", |
||||
|
"isbn": "978-7-5702-3231-4", |
||||
|
"nbPublisher": "长江文艺出版社", |
||||
|
"nbPublisherdate": "2023", |
||||
|
"nbRecno": "17" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978e7f2e4f018ea17916cf0019", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "数不清！大自然的生物多样性", |
||||
|
"nbExplain": "一本让孩子看见大自然奥秘的美丽图画书籍。", |
||||
|
"createTime": "2024-04-03T01:00:51.277+0000", |
||||
|
"creater": "297edff88354751d018359cd2e120000", |
||||
|
"updateTime": "2024-04-03T01:00:51.277+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "[英]尼古拉·戴维斯文", |
||||
|
"nbBooktype": "绘本", |
||||
|
"sortmark": "I561.85/527", |
||||
|
"isbn": "978-7-5332-9625-4", |
||||
|
"nbPublisher": " 明天出版社", |
||||
|
"nbPublisherdate": "2018", |
||||
|
"nbRecno": "17" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978e7f2e4f018ea17840360018", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "猜猜我有多爱你", |
||||
|
"nbExplain": "两只兔子短短的对话，浓缩生命中最复杂、最伟大的情感，引导孩子通过不同方式表达爱， 整个绘本充满爱和童趣。", |
||||
|
"createTime": "2024-04-03T00:59:56.340+0000", |
||||
|
"creater": "297edff88354751d018359cd2e120000", |
||||
|
"updateTime": "2024-04-03T00:59:56.340+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "(爱尔兰)山姆·麦克布雷尼著 , (英)安妮塔·婕朗图", |
||||
|
"nbBooktype": "绘本", |
||||
|
"sortmark": "I562.85/20", |
||||
|
"isbn": "978-7-5332-7426-9", |
||||
|
"nbPublisher": "明天出版社", |
||||
|
"nbPublisherdate": "2022", |
||||
|
"nbRecno": "18" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978e7f2e4f018ea17732290017", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "春雨落长河", |
||||
|
"nbExplain": "故事情节精彩跌宕, 描绘世事交变中奇诡的人生棋局; 凸显出鲜明细腻的人物性格, 尽显大时代背景下的人性之美与悲情; 具有着强烈的现实主义浪漫, 深厚的民国文化底蕴, 是一部构思精密、气势宏大的年代小说。", |
||||
|
"createTime": "2024-04-03T00:58:47.207+0000", |
||||
|
"creater": "297edff88354751d018359cd2e120000", |
||||
|
"updateTime": "2024-04-03T00:58:47.207+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "江天雪意", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "I247.5/5673", |
||||
|
"isbn": "978-7-226-05792-6", |
||||
|
"nbPublisher": "甘肃人民出版社", |
||||
|
"nbPublisherdate": "2023", |
||||
|
"nbRecno": "19" |
||||
|
}, |
||||
|
{ |
||||
|
"nbId": "2c9680978e7f2e4f018ea17657e20016", |
||||
|
"libcode": "1201", |
||||
|
"nbName": "沟通力成就领导力", |
||||
|
"nbExplain": "托马斯·戈登博士美国著名心理学家，本书把博士享誉全球的人际关系模型 (戈登沟通模式) 传授给领导者。", |
||||
|
"createTime": "2024-04-03T00:57:51.330+0000", |
||||
|
"creater": "297edff88354751d018359cd2e120000", |
||||
|
"updateTime": "2024-04-03T00:57:51.330+0000", |
||||
|
"updater": "297edff88354751d018359cd2e120000", |
||||
|
"nbAuthor": "托马斯·戈登", |
||||
|
"nbBooktype": "图书", |
||||
|
"sortmark": "C933.2/40", |
||||
|
"isbn": "978-7-5763-1840-1", |
||||
|
"nbPublisher": "北京理工大学出版社", |
||||
|
"nbPublisherdate": "2023", |
||||
|
"nbRecno": "20" |
||||
|
} |
||||
|
] |
||||
@ -0,0 +1,181 @@ |
|||||
|
<template> |
||||
|
<!-- 新书推荐 --> |
||||
|
<div class="screen-item lending-ranking"> |
||||
|
<div class="common-title">图书推荐</div> |
||||
|
<div ref="newbook" class="big-module module-content"> |
||||
|
<swiper v-if="rankingList.length > 1" ref="swiperThumbs" class="swiper gallery-thumbs directive" :options="swiperOptionThumbs"> |
||||
|
<swiper-slide v-for="(item,index) in rankingList" :key="index" class="slide-1"> |
||||
|
<div class="newbook-list-item"> |
||||
|
<div class="book-img"> |
||||
|
<img :src="item.cover" :onerror="defaultImg"> |
||||
|
</div> |
||||
|
<div class="book-info"> |
||||
|
<h4 class="title-item">{{ item.nbName }}</h4> |
||||
|
<p>{{ item.nbAuthor }}</p> |
||||
|
</div> |
||||
|
<!-- <div class="ranking-num"> |
||||
|
<svg v-if="index === 0" class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-no1" /> |
||||
|
</svg> |
||||
|
<svg v-if="index === 1" class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-no21" /> |
||||
|
</svg> |
||||
|
<svg v-if="index === 2" class="icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-no3" /> |
||||
|
</svg> |
||||
|
<p>NO.{{ index+1 }}</p> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</swiper-slide> |
||||
|
</swiper> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/library' |
||||
|
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
||||
|
import 'swiper/dist/css/swiper.css' |
||||
|
// import data from './data.json' |
||||
|
export default { |
||||
|
name: 'NewBookRecommend', |
||||
|
components: { |
||||
|
swiper, |
||||
|
swiperSlide |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
||||
|
rankingList: [], |
||||
|
swiperOptionThumbs: { |
||||
|
loopedSlides: 6, |
||||
|
direction: 'vertical', |
||||
|
slidesPerView: 6, |
||||
|
slidesPerGroup: 6, |
||||
|
slidesPerColumn: 2, |
||||
|
autoplay: true |
||||
|
// centeredSlides: true, |
||||
|
// autoScrollOffset: true |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
swiper() { |
||||
|
return this.$refs.swiperThumbs.swiper |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
// this.rankingList = data |
||||
|
this.getNewBookRecommend() |
||||
|
}, |
||||
|
methods: { |
||||
|
getNewBookRecommend() { |
||||
|
const params = { |
||||
|
libcode: this.libcode, |
||||
|
pageNo: 1, |
||||
|
pageSize: 100 |
||||
|
} |
||||
|
FetchNewBookRecommend(params).then(res => { |
||||
|
if (res.errCode === 0) { |
||||
|
let data = [] |
||||
|
data = res.data.newbookList |
||||
|
data.forEach(item => { |
||||
|
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
||||
|
}) |
||||
|
} else { |
||||
|
this.$message.error('接口错误') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
getCoverByISBN(isbn, item) { |
||||
|
const params = { |
||||
|
isbn: isbn |
||||
|
} |
||||
|
FetchCoverByISBN(params).then((res) => { |
||||
|
console.log(res) |
||||
|
// item.cover = window.URL.createObjectURL(res) |
||||
|
if (res) { |
||||
|
// item.cover = window.URL.createObjectURL(res) |
||||
|
item.cover = res |
||||
|
} else { |
||||
|
item.cover = '' |
||||
|
} |
||||
|
this.rankingList.push(item) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
// .screen-main .lending-ranking .module-content{ |
||||
|
// padding: 0 .25rem !important; |
||||
|
// } |
||||
|
.swiper-container{ |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.swiper { |
||||
|
width: 100%; |
||||
|
height: 6rem !important; |
||||
|
margin: .4rem 0; |
||||
|
overflow: hidden; |
||||
|
.swiper-wrapper{ |
||||
|
// display: flex; |
||||
|
// flex-wrap: wrap; |
||||
|
// flex-direction: row !important; |
||||
|
// justify-content: flex-start; |
||||
|
|
||||
|
} |
||||
|
&.gallery-thumbs { |
||||
|
// margin: 0.4rem 0; |
||||
|
} |
||||
|
&.gallery-thumbs .swiper-slide { |
||||
|
width: calc(100% / 3); |
||||
|
height: 2.8rem !important; |
||||
|
// padding: .1rem 0 0 0; |
||||
|
margin-top: 0.1rem; |
||||
|
margin-bottom: 0.1rem; |
||||
|
} |
||||
|
// &.gallery-thumbs .swiper-slide-active { |
||||
|
// // background-color: #09194B; |
||||
|
// } |
||||
|
} |
||||
|
|
||||
|
.newbook-list-item{ |
||||
|
.book-img{ |
||||
|
width: 1.325rem; |
||||
|
height: 1.775rem; |
||||
|
background: url('~@/assets/images/default-img.png') no-repeat center center; |
||||
|
background-size: contain; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
overflow: hidden; |
||||
|
margin: 0 auto 0.25rem auto; |
||||
|
img{ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
// height: 100%; |
||||
|
} |
||||
|
} |
||||
|
.book-info{ |
||||
|
h4{ |
||||
|
font-size: 0.25rem; |
||||
|
line-height: .3rem; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
p{ |
||||
|
font-size: 0.2rem; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 1; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,73 @@ |
|||||
|
<template> |
||||
|
<!-- 通知公告 --> |
||||
|
<div class="screen-item notice"> |
||||
|
<div class="common-title">通知公告</div> |
||||
|
<div class="small-module module-content"> |
||||
|
<span class="notice-icon-gif" /> |
||||
|
<div class="seamless-warp"> |
||||
|
<div class="notice-txt" v-html="content" /> |
||||
|
</div> |
||||
|
<!-- <vue-seamless-scroll :data="noticeData" :class-option="defaultOption" class="seamless-warp"> |
||||
|
<p v-for="(item,index) in noticeData" :key="index"> {{ item.des }}</p> |
||||
|
</vue-seamless-scroll> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchInitNotice } from '@/api/library' |
||||
|
export default { |
||||
|
name: 'Notice', |
||||
|
data() { |
||||
|
return { |
||||
|
noticeData: [], |
||||
|
content: '' |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
defaultOption() { |
||||
|
return { |
||||
|
step: 0.3, // 数值越大速度滚动越快 |
||||
|
limitMoveNum: 1, // 开始无缝滚动的数据量 |
||||
|
hoverStop: false, // 是否开启鼠标悬停stop |
||||
|
direction: 1, // 0向下 1向上 2向左 3向右 |
||||
|
openWatch: true // 开启数据实时监控刷新dom |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getInitNotice() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 处理方法 |
||||
|
escapeHtml(str) { |
||||
|
var arrEntities = { |
||||
|
'lt': '<', |
||||
|
'gt': '>', |
||||
|
'nbsp': ' ', |
||||
|
'amp': '&', |
||||
|
'quot': '"' |
||||
|
} |
||||
|
return str.replace(/&(lt|gt|nbsp|amp|quot|pre);/ig, function(all, t) { |
||||
|
return arrEntities[t] |
||||
|
}) |
||||
|
}, |
||||
|
getInitNotice() { |
||||
|
FetchInitNotice().then((res) => { |
||||
|
if (res.errCode === 0) { |
||||
|
this.content = this.escapeHtml(res.data) |
||||
|
} else { |
||||
|
this.$message.error('接口错误') |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,74 @@ |
|||||
|
<template> |
||||
|
<!-- 新书推荐 --> |
||||
|
<div class="screen-item read-star"> |
||||
|
<div class="common-title">阅读之星</div> |
||||
|
<div ref="starList" class="medium-module module-content"> |
||||
|
<div v-for="(item,index) in readstarList" :key="index" :class="['readstart-item', {'star1-bg':index === 0}, {'star2-bg':index === 1}, {'star3-bg':index === 2}]"> |
||||
|
<svg v-if="index === 0" class="icon icon-star-1" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-1" /> |
||||
|
</svg> |
||||
|
<svg v-else-if="index === 1" class="icon icon-star-2" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-21" /> |
||||
|
</svg> |
||||
|
<svg v-else-if="index === 2" class="icon icon-star-3" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-a-3" /> |
||||
|
</svg> |
||||
|
<span v-else class="star-num">{{ index+1 }}</span> |
||||
|
<p class="star-info title-item"> 读者{{ item.readerName }}上周借阅图书{{ item.borrowNum }}册</p> |
||||
|
<p class="star-date">{{ mondayDate }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchBorrowStar } from '@/api/library' |
||||
|
import { parseTime } from '@/utils/index.js' |
||||
|
export default { |
||||
|
name: 'ReadStar', |
||||
|
data() { |
||||
|
return { |
||||
|
readstarList: [], |
||||
|
mondayDate: null |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getBorrowStar() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取list |
||||
|
getBorrowStar() { |
||||
|
FetchBorrowStar().then(res => { |
||||
|
if (res.errCode === 0) { |
||||
|
console.log(res) |
||||
|
this.readstarList = res.data |
||||
|
this.getMondayTime() |
||||
|
} else { |
||||
|
this.$message.error('接口错误') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取本周一 |
||||
|
getMondayTime() { |
||||
|
const today = new Date() |
||||
|
const year = today.getFullYear() |
||||
|
const month = today.getMonth() + 1 |
||||
|
const day = today.getDate() |
||||
|
const newDate = new Date(year + '-' + month + '-' + day + ' 00:00:00') |
||||
|
|
||||
|
const nowTime = newDate.getTime() |
||||
|
const weekDay = newDate.getDay() |
||||
|
const oneDayTime = 24 * 60 * 60 * 1000 |
||||
|
|
||||
|
const mondayTime = (1 - weekDay) * oneDayTime + nowTime |
||||
|
this.mondayDate = parseTime(mondayTime, '{y}-{m}-{d}') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,51 @@ |
|||||
|
<template> |
||||
|
<!-- 今日图书借还 --> |
||||
|
<div class="screen-item total-lending"> |
||||
|
<div class="common-title">今日图书借还</div> |
||||
|
<div class="small-module module-content"> |
||||
|
<div class="chart-wrapper" style="height: calc(100%);"> |
||||
|
<LineChartService :chart-data="chartData" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import LineChartService from '@/components/echart/lineChartService' |
||||
|
import { FetchHalfYearBRNum } from '@/api/library' |
||||
|
export default { |
||||
|
name: 'TodayBorrowed', |
||||
|
components: { |
||||
|
LineChartService |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chartData: { |
||||
|
returnData: [], |
||||
|
borrowedData: [] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getHalfYearBRNum() |
||||
|
}, |
||||
|
methods: { |
||||
|
getHalfYearBRNum() { |
||||
|
FetchHalfYearBRNum().then(res => { |
||||
|
if (res.errCode === 0) { |
||||
|
this.chartData.borrowedData = res.data.borrow |
||||
|
this.chartData.returnData = res.data.return |
||||
|
} else { |
||||
|
this.$message.error('接口错误') |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,91 @@ |
|||||
|
<template> |
||||
|
<!-- 总借阅量 --> |
||||
|
<div class="screen-item total-lending"> |
||||
|
<div class="common-title">总借阅量</div> |
||||
|
<div class="small-module module-content"> |
||||
|
<div class="chartNum"> |
||||
|
<div id="TNum" class="box-items"> |
||||
|
<li v-for="(item,index) in chartNum" :key="index" class="number-item"> |
||||
|
<span><i ref="numberItem" class="item">0123456789</i></span> |
||||
|
</li> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="chart-wrapper" style="height: calc(100% - 68px);"> |
||||
|
<LineChart :chart-data="chartData" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import LineChart from '@/components/echart/lineChart' |
||||
|
import { FetchHalfYearBorrowNum } from '@/api/library' |
||||
|
|
||||
|
export default { |
||||
|
name: 'TotalLending', |
||||
|
components: { |
||||
|
LineChart |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
totalLendData: null, |
||||
|
chartNum: ['0', '0', '0', '0', '0', '0', '0', '0', '0'], |
||||
|
chartData: { |
||||
|
totalLendMonth: [], |
||||
|
totalLendData: [] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getHalfYearBorrowNum() |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
getHalfYearBorrowNum() { |
||||
|
const params = { |
||||
|
ip: null |
||||
|
} |
||||
|
FetchHalfYearBorrowNum(params).then(res => { |
||||
|
if (res.errCode === 0) { |
||||
|
this.totalLendData = res.data.total |
||||
|
this.chartData.totalLendMonth = res.data.list.map(item => { |
||||
|
return item.date |
||||
|
}) |
||||
|
this.chartData.totalLendData = res.data.list.map(item => { |
||||
|
return item.total |
||||
|
}) |
||||
|
this.toOrderNum(this.totalLendData) |
||||
|
this.setNumberTransform() |
||||
|
} else { |
||||
|
this.$message.error('接口错误') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
toOrderNum(num) { |
||||
|
num = num.toString() |
||||
|
if (num.length < 9) { |
||||
|
num = '0' + num |
||||
|
this.toOrderNum(num) |
||||
|
} else if (num.length === 9) { |
||||
|
this.chartNum = num.split('') |
||||
|
} else { |
||||
|
console.log('借阅数据总数显示异常') |
||||
|
} |
||||
|
}, |
||||
|
setNumberTransform() { |
||||
|
var numberItems = document.getElementsByClassName('item') |
||||
|
const numberArr = this.chartNum.filter(item => !isNaN(item)) |
||||
|
for (var index = 0; index < numberItems.length; index++) { |
||||
|
const elem = numberItems[index] |
||||
|
elem.style.transform = 'translate(-50%, -' + numberArr[index] * 10 + '%)' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
@import "~@/assets/styles/font-some.css"; |
||||
|
</style> |
||||
@ -0,0 +1,64 @@ |
|||||
|
<template> |
||||
|
<div class="video-box"> |
||||
|
<video v-if="srcList[0].endsWith('.mp4')" width="100%" height="100%" controls loop autoplay muted :poster="poster"> |
||||
|
<source :src="srcList[0]" type="video/mp4"> |
||||
|
</video> |
||||
|
<el-carousel v-if="!srcList[0].endsWith('.mp4')" :interval="6000"> |
||||
|
<el-carousel-item v-for="src in srcList" :key="src"> |
||||
|
<img width="100%" height="100%" :src="src"> |
||||
|
</el-carousel-item> |
||||
|
</el-carousel> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchShowFileList } from '@/api/library' |
||||
|
export default { |
||||
|
name: 'Video', |
||||
|
components: { |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
poster: 'https://qiniu.aiyxlib.com/1658104787005.jpg', |
||||
|
srcList: [''] |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getShowFile() |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
getShowFile() { |
||||
|
const params = { |
||||
|
libcode: '1201' |
||||
|
} |
||||
|
// this.src = 'D://uploadFile/9f904de6-0f5e-498e-8e5d-b7e14ea15496.mp4'.replace('D://', 'http://127.0.0.1:8888/') |
||||
|
|
||||
|
FetchShowFileList(params).then(res => { |
||||
|
if (res.errCode === 0) { |
||||
|
// this.src = res.data[0].filePath.replace('D://', 'http://172.16.0.23:8888/') |
||||
|
this.srcList = res.data.map(x => x.filePath.replace('D://', 'http://172.22.0.23:8888/')) |
||||
|
// this.srcList = res.data.map(x => x.filePath.replace('D://uploadFile', 'http://localhost:8080/static/')) |
||||
|
// console.log(22222, this.srcList) |
||||
|
// this.src = 'D://uploadFile/11503339-b829-4357-8379-d2b49106431f.mp4'.replace('D://', 'http://127.0.0.1:8888/') |
||||
|
// this.src = 'http://127.0.0.1:8888/uploadFile/9f904de6-0f5e-498e-8e5d-b7e14ea15496.mp4' |
||||
|
} else { |
||||
|
this.$message.error('接口错误') |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
.el-carousel__container { |
||||
|
position: relative; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.el-carousel.el-carousel--horizontal { |
||||
|
height: 100%; |
||||
|
} |
||||
|
</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: 8080, |
||||
|
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