diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..6740be0 --- /dev/null +++ b/.env.development @@ -0,0 +1,19 @@ +ENV = 'development' + +# 接口地址 + +#内网服务地址 +VUE_APP_BASE_API = 'http://192.168.99.107:7070' +VUE_APP_WS_API = 'ws://192.168.99.107:7071' +VUE_APP_CAMERA_API = '192.168.99.107' + +# 刘力-本地服地址 +#VUE_APP_BASE_API = 'http://192.168.99.65:7070' +#VUE_APP_WS_API = 'ws://192.168.99.65:7071' + +# 许镇-本地服地址 +#VUE_APP_BASE_API = 'http://192.168.99.84:7070' +#VUE_APP_WS_API = 'ws://192.168.99.84:7070' + +# 是否启用 babel-plugin-dynamic-import-node插件 +VUE_CLI_BABEL_TRANSPILE_MODULES = true diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..1d3db93 --- /dev/null +++ b/.env.production @@ -0,0 +1,9 @@ +ENV = 'production' + +# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置 +# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http +# VUE_APP_BASE_API = 'https://openapitest.aiyxlib.com' +VUE_APP_BASE_API = 'http://192.168.99.107:7070' +# 如果接口是 http 形式， wss 需要改为 ws +VUE_APP_WS_API = 'ws://192.168.99.107:7071' +VUE_APP_CAMERA_API = '192.168.99.107' diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..0c290b7 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,197 @@ +module.exports = { + root: true, + parserOptions: { + parser: 'babel-eslint', + sourceType: 'module' + }, + env: { + browser: true, + node: true, + es6: true, + }, + extends: ['plugin:vue/recommended', 'eslint:recommended'], + + + rules: { + "vue/max-attributes-per-line": [2, { + "singleline": 10, + "multiline": { + "max": 1, + "allowFirstLine": false + } + }], + "vue/singleline-html-element-content-newline": "off", + "vue/multiline-html-element-content-newline":"off", + "vue/name-property-casing": ["error", "PascalCase"], + "vue/no-v-html": "off", + 'accessor-pairs': 2, + 'arrow-spacing': [2, { + 'before': true, + 'after': true + }], + 'block-spacing': [2, 'always'], + 'brace-style': [2, '1tbs', { + 'allowSingleLine': true + }], + 'camelcase': [0, { + 'properties': 'always' + }], + 'comma-dangle': [2, 'never'], + 'comma-spacing': [2, { + 'before': false, + 'after': true + }], + 'comma-style': [2, 'last'], + 'constructor-super': 2, + 'curly': [2, 'multi-line'], + 'dot-location': [2, 'property'], + 'eol-last': 2, + 'eqeqeq': ["error", "always", {"null": "ignore"}], + 'generator-star-spacing': [2, { + 'before': true, + 'after': true + }], + 'handle-callback-err': [2, '^(err|error)$'], + 'indent': [2, 2, { + 'SwitchCase': 1 + }], + 'jsx-quotes': [2, 'prefer-single'], + 'key-spacing': [2, { + 'beforeColon': false, + 'afterColon': true + }], + 'keyword-spacing': [2, { + 'before': true, + 'after': true + }], + 'new-cap': [2, { + 'newIsCap': true, + 'capIsNew': false + }], + 'new-parens': 2, + 'no-array-constructor': 2, + 'no-caller': 2, + 'no-console': 'off', + 'no-class-assign': 2, + 'no-cond-assign': 2, + 'no-const-assign': 2, + 'no-control-regex': 0, + 'no-delete-var': 2, + 'no-dupe-args': 2, + 'no-dupe-class-members': 2, + 'no-dupe-keys': 2, + 'no-duplicate-case': 2, + 'no-empty-character-class': 2, + 'no-empty-pattern': 2, + 'no-eval': 2, + 'no-ex-assign': 2, + 'no-extend-native': 2, + 'no-extra-bind': 2, + 'no-extra-boolean-cast': 2, + 'no-extra-parens': [2, 'functions'], + 'no-fallthrough': 2, + 'no-floating-decimal': 2, + 'no-func-assign': 2, + 'no-implied-eval': 2, + 'no-inner-declarations': [2, 'functions'], + 'no-invalid-regexp': 2, + 'no-irregular-whitespace': 2, + 'no-iterator': 2, + 'no-label-var': 2, + 'no-labels': [2, { + 'allowLoop': false, + 'allowSwitch': false + }], + 'no-lone-blocks': 2, + 'no-mixed-spaces-and-tabs': 2, + 'no-multi-spaces': 2, + 'no-multi-str': 2, + 'no-multiple-empty-lines': [2, { + 'max': 1 + }], + 'no-native-reassign': 2, + 'no-negated-in-lhs': 2, + 'no-new-object': 2, + 'no-new-require': 2, + 'no-new-symbol': 2, + 'no-new-wrappers': 2, + 'no-obj-calls': 2, + 'no-octal': 2, + 'no-octal-escape': 2, + 'no-path-concat': 2, + 'no-proto': 2, + 'no-redeclare': 2, + 'no-regex-spaces': 2, + 'no-return-assign': [2, 'except-parens'], + 'no-self-assign': 2, + 'no-self-compare': 2, + 'no-sequences': 2, + 'no-shadow-restricted-names': 2, + 'no-spaced-func': 2, + 'no-sparse-arrays': 2, + 'no-this-before-super': 2, + 'no-throw-literal': 2, + 'no-trailing-spaces': 2, + 'no-undef': 2, + 'no-undef-init': 2, + 'no-unexpected-multiline': 2, + 'no-unmodified-loop-condition': 2, + 'no-unneeded-ternary': [2, { + 'defaultAssignment': false + }], + 'no-unreachable': 2, + 'no-unsafe-finally': 2, + 'no-unused-vars': [2, { + 'vars': 'all', + 'args': 'none' + }], + 'no-useless-call': 2, + 'no-useless-computed-key': 2, + 'no-useless-constructor': 2, + 'no-useless-escape': 0, + 'no-whitespace-before-property': 2, + 'no-with': 2, + 'one-var': [2, { + 'initialized': 'never' + }], + 'operator-linebreak': [2, 'after', { + 'overrides': { + '?': 'before', + ':': 'before' + } + }], + 'padded-blocks': [2, 'never'], + 'quotes': [2, 'single', { + 'avoidEscape': true, + 'allowTemplateLiterals': true + }], + 'semi': [2, 'never'], + 'semi-spacing': [2, { + 'before': false, + 'after': true + }], + 'space-before-blocks': [2, 'always'], + 'space-before-function-paren': [2, 'never'], + 'space-in-parens': [2, 'never'], + 'space-infix-ops': 2, + 'space-unary-ops': [2, { + 'words': true, + 'nonwords': false + }], + 'spaced-comment': [2, 'always', { + 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] + }], + 'template-curly-spacing': [2, 'never'], + 'use-isnan': 2, + 'valid-typeof': 2, + 'wrap-iife': [2, 'any'], + 'yield-star-spacing': [2, 'both'], + 'yoda': [2, 'never'], + 'prefer-const': 2, + 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, + 'object-curly-spacing': [2, 'always', { + objectsInObjects: false + }], + 'array-bracket-spacing': [2, 'never'] + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..288c51f --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +.DS_Store +node_modules +dist/ + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +package-lock.json \ No newline at end of file diff --git a/README.md b/README.md index 568e5e4..dab1b19 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ 智慧书架 ```bash -# install +# install dependency npm install # develop diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..e763183 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,11 @@ +const plugins = ['@vue/babel-plugin-transform-vue-jsx', '@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator'] +// 生产环境移除console +if (process.env.NODE_ENV === 'production') { + plugins.push('transform-remove-console') +} +module.exports = { + plugins: plugins, + presets: [ + '@vue/cli-plugin-babel/preset' + ] +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..43d6c46 --- /dev/null +++ b/package.json @@ -0,0 +1,54 @@ +{ + "name": "intelligence-screen", + "version": "1.0.0", + "description": "智慧大屏", + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "lint": "vue-cli-service lint" + }, + "dependencies": { + "@babel/core": "^7.19.0", + "@babel/preset-env": "^7.19.0", + "@jiaminghi/data-view": "^2.7.3", + "@types/echarts": "^4.4.3", + "axios": "^0.27.2", + "core-js": "^3.6.4", + "echarts": "^4.6.0", + "element-ui": "^2.15.9", + "vue": "^2.6.11", + "vue-awesome": "^4.0.2", + "vue-router": "^3.1.5", + "vuex": "^3.1.2" + }, + "devDependencies": { + "@vue/cli-plugin-babel": "^4.2.0", + "@vue/cli-plugin-eslint": "^4.2.0", + "@vue/cli-service": "^4.2.0", + "babel-eslint": "^10.0.3", + "babel-plugin-transform-remove-console": "^6.9.4", + "eslint": "^6.7.2", + "eslint-plugin-vue": "^6.1.2", + "sass": "^1.25.0", + "sass-loader": "^8.0.2", + "vue-template-compiler": "^2.6.11" + }, + "eslintConfig": { + "root": true, + "env": { + "node": true + }, + "extends": [ + "plugin:vue/essential", + "eslint:recommended" + ], + "parserOptions": { + "parser": "babel-eslint" + }, + "rules": {} + }, + "browserslist": [ + "> 1%", + "last 2 versions" + ] +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..df36fcf Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..4123528 --- /dev/null +++ b/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + +
+ + + diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..66b7daa --- /dev/null +++ b/src/App.vue @@ -0,0 +1,17 @@ + + + diff --git a/src/assets/fonts/YouSheBiaoTiHei.ttf b/src/assets/fonts/YouSheBiaoTiHei.ttf new file mode 100644 index 0000000..3729151 Binary files /dev/null and b/src/assets/fonts/YouSheBiaoTiHei.ttf differ diff --git a/src/assets/fonts/ZhenyanGB.ttf b/src/assets/fonts/ZhenyanGB.ttf new file mode 100644 index 0000000..207e103 Binary files /dev/null and b/src/assets/fonts/ZhenyanGB.ttf differ diff --git a/src/assets/fonts/fonts.css b/src/assets/fonts/fonts.css new file mode 100644 index 0000000..ca5c444 --- /dev/null +++ b/src/assets/fonts/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: "ZhenyanGB"; + src: url('ZhenyanGB.ttf'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "YouSheBiaoTiHei"; + src: url('YouSheBiaoTiHei.ttf'); + font-weight: normal; + font-style: normal; +} \ No newline at end of file diff --git a/src/assets/iconfont/demo.css b/src/assets/iconfont/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/src/assets/iconfont/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/assets/iconfont/demo_index.html b/src/assets/iconfont/demo_index.html new file mode 100644 index 0000000..fb4173a --- /dev/null +++ b/src/assets/iconfont/demo_index.html @@ -0,0 +1,488 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + + 查看项目 + +
+
+
+
    + +
  • + +
    键盘
    +
    &#xe634;
    +
    • + +
  • + +
    关闭
    +
    &#xe630;
    +
    • + +
  • + +
    左
    +
    &#xe631;
    +
    • + +
  • + +
    本架图书
    +
    &#xe632;
    +
    • + +
  • + +
    热门
    +
    &#xe633;
    +
    • + +
  • + +
    右
    +
    &#xe62f;
    +
    • + +
  • + +
    通知
    +
    &#xe628;
    +
    • + +
  • + +
    no.3
    +
    &#xe629;
    +
    • + +
  • + +
    no.2
    +
    &#xe62a;
    +
    • + +
  • + +
    no.1
    +
    &#xe62b;
    +
    • + +
  • + +
    2
    +
    &#xe62c;
    +
    • + +
  • + +
    3
    +
    &#xe62d;
    +
    • + +
  • + +
    1
    +
    &#xe62e;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1663323349029') format('woff2'),
+       url('iconfont.woff?t=1663323349029') format('woff'),
+       url('iconfont.ttf?t=1663323349029') format('truetype'),
+       url('iconfont.svg?t=1663323349029#iconfont') format('svg');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 键盘 +
    +
    .icon-jianpan +
    +
    • + +
  • + +
    + 关闭 +
    +
    .icon-guanbi +
    +
    • + +
  • + +
    + 左 +
    +
    .icon-zuo +
    +
    • + +
  • + +
    + 本架图书 +
    +
    .icon-benjiatushu +
    +
    • + +
  • + +
    + 热门 +
    +
    .icon-remen +
    +
    • + +
  • + +
    + 右 +
    +
    .icon-you +
    +
    • + +
  • + +
    + 通知 +
    +
    .icon-tongzhi +
    +
    • + +
  • + +
    + no.3 +
    +
    .icon-a-no3 +
    +
    • + +
  • + +
    + no.2 +
    +
    .icon-a-no2 +
    +
    • + +
  • + +
    + no.1 +
    +
    .icon-a-no1 +
    +
    • + +
  • + +
    + 2 +
    +
    .icon-a-2 +
    +
    • + +
  • + +
    + 3 +
    +
    .icon-a-3 +
    +
    • + +
  • + +
    + 1 +
    +
    .icon-a-1 +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    键盘
    +
    #icon-jianpan
    +
    • + +
  • + +
    关闭
    +
    #icon-guanbi
    +
    • + +
  • + +
    左
    +
    #icon-zuo
    +
    • + +
  • + +
    本架图书
    +
    #icon-benjiatushu
    +
    • + +
  • + +
    热门
    +
    #icon-remen
    +
    • + +
  • + +
    右
    +
    #icon-you
    +
    • + +
  • + +
    通知
    +
    #icon-tongzhi
    +
    • + +
  • + +
    no.3
    +
    #icon-a-no3
    +
    • + +
  • + +
    no.2
    +
    #icon-a-no2
    +
    • + +
  • + +
    no.1
    +
    #icon-a-no1
    +
    • + +
  • + +
    2
    +
    #icon-a-2
    +
    • + +
  • + +
    3
    +
    #icon-a-3
    +
    • + +
  • + +
    1
    +
    #icon-a-1
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/src/assets/iconfont/iconfont.css b/src/assets/iconfont/iconfont.css new file mode 100644 index 0000000..5f3b0cf --- /dev/null +++ b/src/assets/iconfont/iconfont.css @@ -0,0 +1,68 @@ +@font-face { + font-family: "iconfont"; /* Project id 3646564 */ + src: url('iconfont.woff2?t=1663323349029') format('woff2'), + url('iconfont.woff?t=1663323349029') format('woff'), + url('iconfont.ttf?t=1663323349029') format('truetype'), + url('iconfont.svg?t=1663323349029#iconfont') format('svg'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.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-no2:before { + content: "\e62a"; +} + +.icon-a-no1:before { + content: "\e62b"; +} + +.icon-a-2:before { + content: "\e62c"; +} + +.icon-a-3:before { + content: "\e62d"; +} + +.icon-a-1:before { + content: "\e62e"; +} + diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js new file mode 100644 index 0000000..155ca46 --- /dev/null +++ b/src/assets/iconfont/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_3646564='',function(t){var F=(F=document.getElementsByTagName("script"))[F.length-1],a=F.getAttribute("data-injectcss"),F=F.getAttribute("data-disable-injectsvg");if(!F){var l,p,h,i,c,d=function(F,a){a.parentNode.insertBefore(F,a)};if(a&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(F){console&&console.log(F)}}l=function(){var F,a=document.createElement("div");a.innerHTML=t._iconfont_svg_string_3646564,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(F=document.body).firstChild?d(a,F.firstChild):F.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(p=function(){document.removeEventListener("DOMContentLoaded",p,!1),l()},document.addEventListener("DOMContentLoaded",p,!1)):document.attachEvent&&(h=l,i=t.document,c=!1,M(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,o())})}function o(){c||(c=!0,h())}function M(){try{i.documentElement.doScroll("left")}catch(F){return void setTimeout(M,50)}o()}}(window); \ No newline at end of file diff --git a/src/assets/iconfont/iconfont.json b/src/assets/iconfont/iconfont.json new file mode 100644 index 0000000..0727124 --- /dev/null +++ b/src/assets/iconfont/iconfont.json @@ -0,0 +1,100 @@ +{ + "id": "3646564", + "name": "智慧屏", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "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": "31804865", + "name": "no.2", + "font_class": "a-no2", + "unicode": "e62a", + "unicode_decimal": 58922 + }, + { + "icon_id": "31804866", + "name": "no.1", + "font_class": "a-no1", + "unicode": "e62b", + "unicode_decimal": 58923 + }, + { + "icon_id": "31804867", + "name": "2", + "font_class": "a-2", + "unicode": "e62c", + "unicode_decimal": 58924 + }, + { + "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 + } + ] +} diff --git a/src/assets/iconfont/iconfont.svg b/src/assets/iconfont/iconfont.svg new file mode 100644 index 0000000..ca69c24 --- /dev/null +++ b/src/assets/iconfont/iconfont.svg @@ -0,0 +1,45 @@ + + + + Created by iconfont + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/iconfont/iconfont.ttf b/src/assets/iconfont/iconfont.ttf new file mode 100644 index 0000000..61894c7 Binary files /dev/null and b/src/assets/iconfont/iconfont.ttf differ diff --git a/src/assets/iconfont/iconfont.woff b/src/assets/iconfont/iconfont.woff new file mode 100644 index 0000000..c540f87 Binary files /dev/null and b/src/assets/iconfont/iconfont.woff differ diff --git a/src/assets/iconfont/iconfont.woff2 b/src/assets/iconfont/iconfont.woff2 new file mode 100644 index 0000000..191d4a0 Binary files /dev/null and b/src/assets/iconfont/iconfont.woff2 differ diff --git a/src/assets/images/home/bg.png b/src/assets/images/home/bg.png new file mode 100644 index 0000000..c03abe2 Binary files /dev/null and b/src/assets/images/home/bg.png differ diff --git a/src/assets/images/home/nav1.png b/src/assets/images/home/nav1.png new file mode 100644 index 0000000..f4bea69 Binary files /dev/null and b/src/assets/images/home/nav1.png differ diff --git a/src/assets/images/home/nav2.png b/src/assets/images/home/nav2.png new file mode 100644 index 0000000..e3b16ed Binary files /dev/null and b/src/assets/images/home/nav2.png differ diff --git a/src/assets/images/home/nav3.png b/src/assets/images/home/nav3.png new file mode 100644 index 0000000..c45798c Binary files /dev/null and b/src/assets/images/home/nav3.png differ diff --git a/src/assets/images/home/nav4.png b/src/assets/images/home/nav4.png new file mode 100644 index 0000000..2d89afb Binary files /dev/null and b/src/assets/images/home/nav4.png differ diff --git a/src/assets/images/home/nav5.png b/src/assets/images/home/nav5.png new file mode 100644 index 0000000..4b931e2 Binary files /dev/null and b/src/assets/images/home/nav5.png differ diff --git a/src/assets/images/home/top.png b/src/assets/images/home/top.png new file mode 100644 index 0000000..d0b7832 Binary files /dev/null and b/src/assets/images/home/top.png differ diff --git a/src/assets/images/home/type-bg.png b/src/assets/images/home/type-bg.png new file mode 100644 index 0000000..657f0a4 Binary files /dev/null and b/src/assets/images/home/type-bg.png differ diff --git a/src/assets/images/list/1.png b/src/assets/images/list/1.png new file mode 100644 index 0000000..76997bf Binary files /dev/null and b/src/assets/images/list/1.png differ diff --git a/src/assets/images/list/10.png b/src/assets/images/list/10.png new file mode 100644 index 0000000..7ce75e0 Binary files /dev/null and b/src/assets/images/list/10.png differ diff --git a/src/assets/images/list/11.png b/src/assets/images/list/11.png new file mode 100644 index 0000000..6c2ee00 Binary files /dev/null and b/src/assets/images/list/11.png differ diff --git a/src/assets/images/list/12.png b/src/assets/images/list/12.png new file mode 100644 index 0000000..97f2418 Binary files /dev/null and b/src/assets/images/list/12.png differ diff --git a/src/assets/images/list/13.png b/src/assets/images/list/13.png new file mode 100644 index 0000000..57b1ae7 Binary files /dev/null and b/src/assets/images/list/13.png differ diff --git a/src/assets/images/list/14.png b/src/assets/images/list/14.png new file mode 100644 index 0000000..49b2f81 Binary files /dev/null and b/src/assets/images/list/14.png differ diff --git a/src/assets/images/list/15.png b/src/assets/images/list/15.png new file mode 100644 index 0000000..3065cd3 Binary files /dev/null and b/src/assets/images/list/15.png differ diff --git a/src/assets/images/list/2.png b/src/assets/images/list/2.png new file mode 100644 index 0000000..3b6e142 Binary files /dev/null and b/src/assets/images/list/2.png differ diff --git a/src/assets/images/list/3.png b/src/assets/images/list/3.png new file mode 100644 index 0000000..9ef3dd5 Binary files /dev/null and b/src/assets/images/list/3.png differ diff --git a/src/assets/images/list/4.png b/src/assets/images/list/4.png new file mode 100644 index 0000000..8df7aff Binary files /dev/null and b/src/assets/images/list/4.png differ diff --git a/src/assets/images/list/5.png b/src/assets/images/list/5.png new file mode 100644 index 0000000..34d0da7 Binary files /dev/null and b/src/assets/images/list/5.png differ diff --git a/src/assets/images/list/6.png b/src/assets/images/list/6.png new file mode 100644 index 0000000..29b581d Binary files /dev/null and b/src/assets/images/list/6.png differ diff --git a/src/assets/images/list/7.png b/src/assets/images/list/7.png new file mode 100644 index 0000000..ee2cab3 Binary files /dev/null and b/src/assets/images/list/7.png differ diff --git a/src/assets/images/list/8.png b/src/assets/images/list/8.png new file mode 100644 index 0000000..5369b4d Binary files /dev/null and b/src/assets/images/list/8.png differ diff --git a/src/assets/images/list/9.png b/src/assets/images/list/9.png new file mode 100644 index 0000000..0785869 Binary files /dev/null and b/src/assets/images/list/9.png differ diff --git a/src/assets/images/list/left-btn.png b/src/assets/images/list/left-btn.png new file mode 100644 index 0000000..474c475 Binary files /dev/null and b/src/assets/images/list/left-btn.png differ diff --git a/src/assets/images/list/list-rack.png b/src/assets/images/list/list-rack.png new file mode 100644 index 0000000..45e5027 Binary files /dev/null and b/src/assets/images/list/list-rack.png differ diff --git a/src/assets/images/list/list-title.png b/src/assets/images/list/list-title.png new file mode 100644 index 0000000..0124410 Binary files /dev/null and b/src/assets/images/list/list-title.png differ diff --git a/src/assets/images/list/right-btn.png b/src/assets/images/list/right-btn.png new file mode 100644 index 0000000..474c475 Binary files /dev/null and b/src/assets/images/list/right-btn.png differ diff --git a/src/assets/images/list/top.png b/src/assets/images/list/top.png new file mode 100644 index 0000000..be51580 Binary files /dev/null and b/src/assets/images/list/top.png differ diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss new file mode 100644 index 0000000..8502e78 --- /dev/null +++ b/src/assets/styles/index.scss @@ -0,0 +1,190 @@ +#bookshelf{ + width: 100%; + height: 100vh; + font-size: 30px; + background: url('~@/assets/images/home/bg.png') no-repeat left top; + background-size: cover; +} + +//c-s壳占位 +.top-bg{ + height: 60px; + background-color: #3F92F6; +} + +// 首页 +.bookshelf-header{ + position: relative; + height: 254px; + text-align: center; + background: url('~@/assets/images/home/top.png') no-repeat left top; + background-size: cover; + z-index: 9; + h2{ + height: 118px; + line-height: 118px; + font-family: "YouSheBiaoTiHei"; + font-weight: normal; + font-size: 60px; + } + span{ + display: block; + position: absolute; + top: 30px; + right: 40px; + width: 134px; + height: 58px; + line-height: 60px; + background: linear-gradient(90deg, #ACDAFF 0%, #9BCEFF 100%); + border-radius: 29px; + } +} + +.book-category{ + position: relative; + display: flex; + justify-content: space-between; + justify-items: center; + text-align: center; + height: 198px; + line-height: 168px; + padding: 0 120px; + margin-top: -132px; + background: url('~@/assets/images/home/type-bg.png') no-repeat center center; + background-size: cover; + z-index: 99; + p{ + flex: 1; + font-size: 60px; + letter-spacing: 6px; + } +} + +.book-nav{ + display: flex; + justify-content: space-between; + text-align: center; + padding: 0 40px; + margin-bottom: 30px; + li{ + flex: 1; + font-size: 36px; + img{ + display: inline-block; + margin-bottom: 20px; + } + } +} + +.current-rack{ + height: 770px; + margin: 0 40px; + padding: 0 40px 40px 40px; + background-color: #fff; + border-radius: 30px; + box-shadow: 0px 0px 20px 1px #B8D3FF; + .rack-top{ + display: flex; + justify-content: space-between; + justify-items: center; + align-items: center; + padding: 30px 0 25px 0; + font-size: 36px; + .rack-top-title{ + display: flex; + justify-content: flex-start; + font-size: 40px; + line-height: 50px; + .icon{ + width: 50px; + height: 50px; + margin-right: 20px; + } + } + .more{ + .iconfont{ + font-size: 30px; + margin-left: 20px; + } + } + } +} + +.rack-list{ + display: flex; + justify-content: space-between; + + .list-item{ + border: 1px solid #A2CCFF; + border-radius: 4px; + overflow: hidden; + .book-info{ + position: relative; + } + .book-title{ + font-weight: normal; + line-height: 40px; + margin-bottom: 10px; + } + .book-author{ + font-size: 24px; + } + .book-num{ + position: absolute; + bottom: 20px; + display: flex; + justify-content: flex-start; + font-size: 20px; + color: #999; + .icon{ + width: 20px; + height: 22px; + margin-right: 10px; + } + } + } + + .list-big{ + width: 435px; + height: 625px; + margin-right: 45px; + img{ + display: block; + width: 100%; + height: 520px; + border-radius: 4px; + } + .book-info{ + padding: 12px 0 20px 44px; + } + .book-num{ + right: 16px; + } + } + + .list-right{ + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 625px; + .list-middle{ + display: flex; + height: calc(100%/2 - 20px); + justify-content: space-between; + img{ + display: block; + width: 244px; + height: 100%; + margin-right: 20px; + } + .book-info{ + padding: 20px 0 0 0; + } + .book-num{ + left: 0; + bottom: 12px; + } + } + } +} diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss new file mode 100644 index 0000000..a1bfbd0 --- /dev/null +++ b/src/assets/styles/style.scss @@ -0,0 +1,86 @@ +@import '~@/assets/iconfont/iconfont.css'; + +// 全局样式 +* { + margin: 0; + padding: 0; + list-style-type: none; + box-sizing: border-box; + outline: none; +} + +html { + margin: 0; + padding: 0; +} + +body { + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; + background-color: #f1f1f1; + margin: 0; + padding: 0; + color: #333; +} + +a { + color: #333; + text-decoration: none; +} + +ul{ + margin: 0; + padding: 0; + li{ + list-style: none; + } +} + +.clearfix { + &::after { + content: ""; + display: table; + height: 0; + line-height: 0; + visibility: hidden; + clear: both; + } +} + +/**滚动条的宽度*/ +::-webkit-scrollbar { + width: 4px; + height: 4px; +} + +//滚动条的滑块 +::-webkit-scrollbar-thumb { + background-color: #13439E; + border-radius: 3px; +} + +.icon { + width: 1em; + height: 1em; + vertical-align: -0.15em; + fill: currentColor; + overflow: hidden; +} + +//浮动 +.float-r { + float: right; +} + +//文章一行显示，多余省略号显示 +.title-item { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + overflow: hidden; + text-overflow: ellipsis; +} + +.rotate:before { + display: inline-block; + transform: rotate(180deg); +} \ No newline at end of file diff --git a/src/common/flexible.js b/src/common/flexible.js new file mode 100644 index 0000000..fa4afee --- /dev/null +++ b/src/common/flexible.js @@ -0,0 +1,147 @@ +(function(win, lib) { + var doc = win.document + var docEl = doc.documentElement + var metaEl = doc.querySelector('meta[name="viewport"]') + var flexibleEl = doc.querySelector('meta[name="flexible"]') + var dpr = 0 + var scale = 0 + var tid + var flexible = lib.flexible || (lib.flexible = {}) + + if (metaEl) { + console.warn('将根据已有的meta标签来设置缩放比例') + var match = metaEl + .getAttribute('content') + // eslint-disable-next-line no-useless-escape + .match(/initial\-scale=([\d\.]+)/) + if (match) { + scale = parseFloat(match[1]) + dpr = parseInt(1 / scale) + } + } else if (flexibleEl) { + var content = flexibleEl.getAttribute('content') + if (content) { + // eslint-disable-next-line no-useless-escape + var initialDpr = content.match(/initial\-dpr=([\d\.]+)/) + // eslint-disable-next-line no-useless-escape + var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/) + if (initialDpr) { + dpr = parseFloat(initialDpr[1]) + scale = parseFloat((1 / dpr).toFixed(2)) + } + if (maximumDpr) { + dpr = parseFloat(maximumDpr[1]) + scale = parseFloat((1 / dpr).toFixed(2)) + } + } + } + + if (!dpr && !scale) { + // eslint-disable-next-line no-unused-vars + var isAndroid = win.navigator.appVersion.match(/android/gi) + var isIPhone = win.navigator.appVersion.match(/iphone/gi) + var devicePixelRatio = win.devicePixelRatio + if (isIPhone) { + // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 + if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { + dpr = 3 + } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { + dpr = 2 + } else { + dpr = 1 + } + } else { + // 其他设备下，仍旧使用1倍的方案 + dpr = 1 + } + scale = 1 / dpr + } + + docEl.setAttribute('data-dpr', dpr) + if (!metaEl) { + metaEl = doc.createElement('meta') + metaEl.setAttribute('name', 'viewport') + metaEl.setAttribute( + 'content', + 'initial-scale=' + + scale + + ', maximum-scale=' + + scale + + ', minimum-scale=' + + scale + + ', user-scalable=no' + ) + if (docEl.firstElementChild) { + docEl.firstElementChild.appendChild(metaEl) + } else { + var wrap = doc.createElement('div') + wrap.appendChild(metaEl) + doc.write(wrap.innerHTML) + } + } + + function refreshRem() { + var width = docEl.getBoundingClientRect().width + // 最小1366px，最大适配2560px + if (width / dpr < 1366) { + width = 1366 * dpr + } else if (width / dpr > 2560) { + width = 2560 * dpr + } + // 设置成24等份，设计稿时1920px的，这样1rem就是54px + var rem = width / 24 + docEl.style.fontSize = rem + 'px' + flexible.rem = win.rem = rem + } + + win.addEventListener( + 'resize', + function() { + clearTimeout(tid) + tid = setTimeout(refreshRem, 300) + }, + false + ) + win.addEventListener( + 'pageshow', + function(e) { + if (e.persisted) { + clearTimeout(tid) + tid = setTimeout(refreshRem, 300) + } + }, + false + ) + + if (doc.readyState === 'complete') { + doc.body.style.fontSize = 12 * dpr + 'px' + } else { + doc.addEventListener( + 'DOMContentLoaded', + // eslint-disable-next-line no-unused-vars + function(e) { + doc.body.style.fontSize = 12 * dpr + 'px' + }, + false + ) + } + + refreshRem() + + flexible.dpr = win.dpr = dpr + flexible.refreshRem = refreshRem + flexible.rem2px = function(d) { + var val = parseFloat(d) * this.rem + if (typeof d === 'string' && d.match(/rem$/)) { + val += 'px' + } + return val + } + flexible.px2rem = function(d) { + var val = parseFloat(d) / this.rem + if (typeof d === 'string' && d.match(/px$/)) { + val += 'rem' + } + return val + } +})(window, window['lib'] || (window['lib'] = {})) diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..e24caa5 --- /dev/null +++ b/src/main.js @@ -0,0 +1,27 @@ +import Vue from 'vue' +import App from './App.vue' +import router from './router' +import store from './store' + +// 适配flex +import '@/common/flexible.js' + +// 引入全局css +import './assets/styles/style.scss' +import './assets/iconfont/iconfont.js' +import './assets/fonts/fonts.css' + +import axios from 'axios' +Vue.prototype.$axios = axios + +// 引入echart +import echarts from 'echarts' +Vue.prototype.$echarts = echarts + +Vue.config.productionTip = false + +new Vue({ + router, + store, + render: (h) => h(App) +}).$mount('#app') diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..f9ef8a9 --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,20 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' + +Vue.use(VueRouter) + +const routes = [{ + path: '/', + name: 'index', + component: () => import('../views/index.vue'), + meta: { + title: '智慧大屏' + } +}] + +const router = new VueRouter({ + mode: 'history', + routes +}) + +export default router diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..332b916 --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,15 @@ +import Vue from 'vue' +import Vuex from 'vuex' + +Vue.use(Vuex) + +export default new Vuex.Store({ + state: { + }, + mutations: { + }, + actions: { + }, + modules: { + } +}) diff --git a/src/utils/index.js b/src/utils/index.js new file mode 100644 index 0000000..3356ab6 --- /dev/null +++ b/src/utils/index.js @@ -0,0 +1,46 @@ +export function debounce(func, wait, immediate) { + let timeout, args, context, timestamp, result + + const later = function() { + // 据上一次触发时间间隔 + const last = +new Date() - timestamp + + // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait + if (last < wait && last > 0) { + timeout = setTimeout(later, wait - last) + } else { + timeout = null + // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用 + if (!immediate) { + result = func.apply(context, args) + if (!timeout) context = args = null + } + } + } + + return function(...args) { + context = this + timestamp = +new Date() + const callNow = immediate && !timeout + // 如果延时不存在，重新设定延时 + if (!timeout) timeout = setTimeout(later, wait) + if (callNow) { + result = func.apply(context, args) + context = args = null + } + + return result + } +} + +// 获取当前日期时间 +export function getCurrentTime() { + const yy = new Date().getFullYear() + const mm = new Date().getMonth() + 1 + const dd = new Date().getDate() + const hh = new Date().getHours() + const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes() + const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds() + const time = yy + '年' + mm + '月' + dd + '日 ' + hh + ':' + mf + ':' + ss + return time +} diff --git a/src/utils/request.js b/src/utils/request.js new file mode 100644 index 0000000..99f050b --- /dev/null +++ b/src/utils/request.js @@ -0,0 +1,46 @@ +import axios from 'axios' +import { Message } from 'element-ui' + +// 创建axios实例 +const service = axios.create({ + baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url + timeout: 1000 * 30, // 请求超时时间 + headers: { + 'Content-Type': 'application/json' + } +}) + +// request拦截器 +service.interceptors.request.use( + config => { + // if (getToken()) { + // config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 + // } + const token = '' // 登录后生成用于识别用户身份，项目不需要直接去掉 + config.headers['Authorization'] = token || '' + return config + }, + error => { + console.error('error: ', error) + Promise.reject(error) + } +) + +// response 拦截器 +service.interceptors.response.use( + response => { + const errorMsg = response.data.message + if (response.data.code === 200) { + return response.data.data + } else { + Message.error({ + message: errorMsg, + duration: 5000 + }) + } + }, + error => { + return Promise.reject(error) + } +) +export default service diff --git a/src/utils/resizeMixins.js b/src/utils/resizeMixins.js new file mode 100644 index 0000000..dad2526 --- /dev/null +++ b/src/utils/resizeMixins.js @@ -0,0 +1,26 @@ +// 混入代码 resize-mixins.js +import { debounce } from '@/utils/index' +const resizeChartMethod = '$__resizeChartMethod' + +export default { + data() { + // 在组件内部将图表init的引用映射到chart属性上 + return { + chart: null + } + }, + created() { + window.addEventListener('resize', this[resizeChartMethod], false) + }, + beforeDestroy() { + window.removeEventListener('reisze', this[resizeChartMethod]) + }, + methods: { + // 通过lodash的防抖函数来控制resize的频率 + [resizeChartMethod]: debounce(function() { + if (this.chart) { + this.chart.resize() + } + }, 100) + } +} diff --git a/src/views/index.vue b/src/views/index.vue new file mode 100644 index 0000000..f01ea48 --- /dev/null +++ b/src/views/index.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/vue.config.js b/vue.config.js new file mode 100644 index 0000000..1c75d59 --- /dev/null +++ b/vue.config.js @@ -0,0 +1,61 @@ +const path = require('path') +const resolve = dir => { + return path.join(__dirname, dir) +} +const name = '智慧书架' +module.exports = { + publicPath: process.env.NODE_ENV === 'development' ? '/' : './', + outputDir: 'dist', + assetsDir: 'static', + lintOnSave: process.env.NODE_ENV === 'development', + productionSourceMap: false, + devServer: { + port: 3000, + open: true, + overlay: { + warnings: false, + errors: true + }, + proxy: { + '/api': { + target: process.env.VUE_APP_BASE_API, + changeOrigin: true, + pathRewrite: { + '^/api': 'api' + } + }, + '/auth': { + target: process.env.VUE_APP_BASE_API, + changeOrigin: true, + pathRewrite: { + '^/auth': 'auth' + } + } + } + }, + configureWebpack: { + name: name, + resolve: { + alias: { + '@': resolve('src') + } + }, + performance: { + hints: 'warning', + // 入口起点的最大体积 + maxEntrypointSize: 50000000, + // 生成文件的最大体积 + maxAssetSize: 30000000 + } + }, + chainWebpack: config => { + config.resolve + .alias.set('_c', resolve('src/components')) + + config.plugin('html') + .tap(args => { + args[0].title = '智慧书架' + return args + }) + } +}