commit ea36ae69719129b57b68705485dbefd1fd3441f2 Author: z_yu <1534695664@qq.com> Date: Thu Sep 22 09:01:42 2022 +0800 first commit copy 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 new file mode 100644 index 0000000..30a30ce --- /dev/null +++ b/README.md @@ -0,0 +1,13 @@ +智慧大屏 + +```bash +# install dependency +npm install + +# develop +npm run serve + +# 构建生产环境 +npm run build + +``` \ No newline at end of file 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..1c8a32f --- /dev/null +++ b/src/App.vue @@ -0,0 +1,16 @@ + + + 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..c16b6a2 --- /dev/null +++ b/src/assets/iconfont/demo_index.html @@ -0,0 +1,488 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

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

Unicode 引用

+
+ +

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

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

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

+
+

Unicode 使用步骤如下：

+

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

+
@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');
+}
+
+

第二步：定义使用 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"。

+
+
+
+
+
    + +
  • + +
    + no.2 +
    +
    .icon-a-no21 +
    +
    • + +
  • + +
    + 2 +
    +
    .icon-a-21 +
    +
    • + +
  • + +
    + 键盘 +
    +
    .icon-jianpan +
    +
    • + +
  • + +
    + 关闭 +
    +
    .icon-guanbi +
    +
    • + +
  • + +
    + 左 +
    +
    .icon-zuo +
    +
    • + +
  • + +
    + 本架图书 +
    +
    .icon-benjiatushu +
    +
    • + +
  • + +
    + 热门 +
    +
    .icon-remen +
    +
    • + +
  • + +
    + 右 +
    +
    .icon-you +
    +
    • + +
  • + +
    + 通知 +
    +
    .icon-tongzhi +
    +
    • + +
  • + +
    + no.3 +
    +
    .icon-a-no3 +
    +
    • + +
  • + +
    + no.1 +
    +
    .icon-a-no1 +
    +
    • + +
  • + +
    + 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"。

+
+
+
+
+
    + +
  • + +
    no.2
    +
    #icon-a-no21
    +
    • + +
  • + +
    2
    +
    #icon-a-21
    +
    • + +
  • + +
    键盘
    +
    #icon-jianpan
    +
    • + +
  • + +
    关闭
    +
    #icon-guanbi
    +
    • + +
  • + +
    左
    +
    #icon-zuo
    +
    • + +
  • + +
    本架图书
    +
    #icon-benjiatushu
    +
    • + +
  • + +
    热门
    +
    #icon-remen
    +
    • + +
  • + +
    右
    +
    #icon-you
    +
    • + +
  • + +
    通知
    +
    #icon-tongzhi
    +
    • + +
  • + +
    no.3
    +
    #icon-a-no3
    +
    • + +
  • + +
    no.1
    +
    #icon-a-no1
    +
    • + +
  • + +
    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..0158477 --- /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=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"; +} + diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js new file mode 100644 index 0000000..8284bfe --- /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..179ba97 --- /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": "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 + } + ] +} diff --git a/src/assets/iconfont/iconfont.svg b/src/assets/iconfont/iconfont.svg new file mode 100644 index 0000000..14dc84e --- /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..cd9dd4b 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..f9c8d7d 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..2552240 Binary files /dev/null and b/src/assets/iconfont/iconfont.woff2 differ diff --git a/src/assets/images/num-img.png b/src/assets/images/num-img.png new file mode 100644 index 0000000..01bd009 Binary files /dev/null and b/src/assets/images/num-img.png differ diff --git a/src/assets/images/star-1.png b/src/assets/images/star-1.png new file mode 100644 index 0000000..d2f0f81 Binary files /dev/null and b/src/assets/images/star-1.png differ diff --git a/src/assets/images/star-2.png b/src/assets/images/star-2.png new file mode 100644 index 0000000..c00d713 Binary files /dev/null and b/src/assets/images/star-2.png differ diff --git a/src/assets/images/star-3.png b/src/assets/images/star-3.png new file mode 100644 index 0000000..82407a5 Binary files /dev/null and b/src/assets/images/star-3.png differ diff --git a/src/assets/images/title.png b/src/assets/images/title.png new file mode 100644 index 0000000..b5ddaea Binary files /dev/null and b/src/assets/images/title.png differ diff --git a/src/assets/images/top.png b/src/assets/images/top.png new file mode 100644 index 0000000..a4e606f Binary files /dev/null and b/src/assets/images/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/_variables.scss b/src/assets/styles/_variables.scss new file mode 100644 index 0000000..15c5eac --- /dev/null +++ b/src/assets/styles/_variables.scss @@ -0,0 +1,97 @@ +// 颜色 +$colors: ( + "primary": #db9e3f, + "info-1": #4394e4, + "info": #4b67af, + "white": #ffffff, + "light": #f9f9f9, + "grey-1": #999999, + "grey": #666666, + "dark-1": #5f5f5f, + "dark": #222222, + "black-1": #171823, + "black": #000000, +); + +// 字体大小 +$base-font-size: 0.2rem; +$font-sizes: ( + xxs: 0.1, + //8px + xs: 0.125, + //10px + sm: 0.2875, + //12px + md: 0.1625, + //13px + lg: 0.175, + //14px + xl: 0.2, + //16px + xxl: 0.225, + //18px + xxxl: 0.25 +); + +// 宽高 +.w-100 { + width: 100%; +} +.h-100 { + height: 100%; +} + +//flex +.d-flex { + display: flex; +} +.flex-column { + flex-direction: column; +} +.flex-wrap { + flex-wrap: wrap; +} +.flex-nowrap { + flex-wrap: nowrap; +} +$flex-jc: ( + start: flex-start, + end: flex-end, + center: center, + between: space-between, + around: space-around, + evenly: space-evenly, +); + +$flex-ai: ( + start: flex-start, + end: flex-end, + center: center, + stretch: stretch, +); + +.flex-1 { + flex: 1; +} + +//.mt-1 => margin top +//spacing +$spacing-types: ( + m: margin, + p: padding, +); +$spacing-directions: ( + t: top, + r: right, + b: bottom, + l: left, +); +$spacing-base-size: 0.2rem; +$spacing-sizes: ( + 0: 0, + 1: 0.25, + 2: 0.5, + 3: 1, + 4: 1.5, + 5: 3, +); diff --git a/src/assets/styles/font-some.css b/src/assets/styles/font-some.css new file mode 100644 index 0000000..336f426 --- /dev/null +++ b/src/assets/styles/font-some.css @@ -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; +} diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss new file mode 100644 index 0000000..597b3e3 --- /dev/null +++ b/src/assets/styles/index.scss @@ -0,0 +1,247 @@ +#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; + font-size: 0.3rem; + color: #fff; + .header-title{ + width: 100%; + height: 1.125rem; + background: url('~@/assets/images/top.png') no-repeat center -5px; + 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: 1rem; + // top: 0.32rem; + } + .header-date { + right: 0.375rem; + } +} + +// 主题内部部分 +.screen-main{ + display: flex; + justify-content: space-between; + height: calc(100% - 155px); + margin: 0.0625rem 0 0.5rem 0; + padding: 0 0.325rem; + .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.675rem; + } + + //排行榜-推荐 - list + .lending-ranking{ + .module-content{ + padding: 0.1625rem 0.25rem; + overflow: hidden; + } + } + .book-list-item{ + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.1rem 0.25rem; + // background-color: #09194B; + .book-img{ + display: block; + width: 0.825rem; + height: 1.075rem; + margin-right: 0.35rem; + } + .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; + p{ + 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.075rem; + } + + // 阅读之星 + .read-star{ + .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; + padding: 0.25rem 0.375rem 0.5rem 0.375rem; + .icon-tongzhi{ + margin-right: 0.15rem; + font-size: 0.325rem; + color: #1AC9FF; + } + p{ + height: 3.1rem; + overflow: hidden; + // overflow-y: auto; + } + } + } + +} \ No newline at end of file diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss new file mode 100644 index 0000000..a8c581c --- /dev/null +++ b/src/assets/styles/style.scss @@ -0,0 +1,81 @@ +@import "./variables"; +@import '~@/assets/iconfont/iconfont.css'; + +// 全局样式 +* { + margin: 0; + padding: 0; + list-style-type: none; + box-sizing: border-box; + outline: none; +} + +html { + margin: 0; + padding: 0; +} + +body { + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; + background-color: #f1f1f1; + margin: 0; + padding: 0; +} + +a { + color: #343440; + text-decoration: none; +} + +ul{ + margin: 0; + padding: 0; + li{ + list-style: none; + } +} + +.clearfix { + &::after { + content: ""; + display: table; + height: 0; + line-height: 0; + visibility: hidden; + clear: both; + } +} + +/**滚动条的宽度*/ +::-webkit-scrollbar { + width: 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; +} diff --git a/src/common/flexible.js b/src/common/flexible.js new file mode 100644 index 0000000..92de84e --- /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就是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'] = {})) diff --git a/src/common/scrollMixins.js b/src/common/scrollMixins.js new file mode 100644 index 0000000..ef4dac2 --- /dev/null +++ b/src/common/scrollMixins.js @@ -0,0 +1,61 @@ +export default { + data() { + return { + scrollDom: null, + interval: null, + scrollTimer: null, // 滚动定时器 + pauseTimer: null, // 暂停定时器 + timeout: null, + step: null + } + }, + created() { + }, + mounted() { + // this.dataCompleteFun() + }, + destroyed() { + // 清理定时器 + clearTimeout(this.pauseTimer) + this.pauseTimer = null + clearInterval(this.scrollTimer) + this.scrollTimer = null + // 清理点击监听 + window.document.removeEventListener('click', this.pauseScroll) + }, + methods: { + autoScroll() { + // 滚动长度为0 + if (this.scrollDom.scrollHeight - this.scrollDom.clientHeight > 0) { + // 如果定时器存在 + if (this.scrollTimer) { + // 则先清除 + clearInterval(this.scrollTimer) + clearTimeout(this.pauseTimer) + this.scrollTimer = null + this.pauseTimer = null + } + this.scrollTimer = setInterval(() => { + const scrollHeight = this.scrollDom.scrollHeight + const clientHeight = this.scrollDom.clientHeight + const scroll = scrollHeight - clientHeight + // 获取当前滚动条距离顶部高度 + const scrollTop = this.scrollDom.scrollTop + // 当滚动到底部时,间隔时间后重回顶部开始 + if (scrollTop + this.step >= scroll) { + this.scrollDom.scrollTop = scroll + this.pauseTimer = setTimeout(() => { + this.scrollDom.scrollTop = 0 + this.autoScroll() + }, this.timeout) + } else { // 没有则继续滚动 + this.scrollDom.scrollTop = scrollTop + this.step + } + // console.log(scrollHeight, clientHeight, scroll, scrollTop) + }, this.interval) + } else { + return + } + } + } +} diff --git a/src/components/echart/lineChart.vue b/src/components/echart/lineChart.vue new file mode 100644 index 0000000..d960504 --- /dev/null +++ b/src/components/echart/lineChart.vue @@ -0,0 +1,185 @@ + + + + + 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/accessToLibrary.vue b/src/views/accessToLibrary.vue new file mode 100644 index 0000000..4e8c8f4 --- /dev/null +++ b/src/views/accessToLibrary.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/src/views/data.json b/src/views/data.json new file mode 100644 index 0000000..54398c8 --- /dev/null +++ b/src/views/data.json @@ -0,0 +1,90 @@ +{ + "ranking":[ + { + "img":"https://qiniu.aiyxlib.com/bg.png", + "title": "大个子狗与小个子猫", + "author": "高小定", + "ranking": 1 + }, + { + "img":"https://qiniu.aiyxlib.com/bg.png", + "title": "森林大探险", + "author": "卷毛老师", + "ranking": 2 + }, + { + "img":"https://qiniu.aiyxlib.com/bg.png", + "title": "家有喵星人", + "author": "查尔斯", + "ranking": 3 + }, + { + "img":"https://qiniu.aiyxlib.com/bg.png", + "title": "奇妙的冒险", + "author": "李小飞", + "ranking": 4 + }, + { + "img":"https://qiniu.aiyxlib.com/bg.png", + "title": "豆豆龙成长记", + "author": "卷毛老师", + "ranking": 5 + }, + { + "img":"https://qiniu.aiyxlib.com/bg.png", + "title": "奇妙的冒险", + "author": "李小飞", + "ranking": 6 + }, + { + "img":"https://qiniu.aiyxlib.com/bg.png", + "title": "豆豆龙成长记", + "author": "卷毛老师", + "ranking": 7 + } + ], + "readstar":[ + { + "des": "读者张山上周借阅图书30册", + "date": "2022-09-06", + "ranking": 1 + }, + { + "des": "读者张山上周借阅图书30册", + "date": "2022-09-06", + "ranking": 2 + }, + { + "des": "读者张山上周借阅图书30册", + "date": "2022-09-06", + "ranking": 3 + }, + { + "des": "读者张山上周借阅图书30册", + "date": "2022-09-06", + "ranking": 4 + }, + { + "des": "读者张山上周借阅图书30册", + "date": "2022-09-06", + "ranking": 5 + } + , + { + "des": "读者张山上周借阅图书30册", + "date": "2022-09-06", + "ranking": 6 + }, + { + "des": "读者张山上周借阅图书30册", + "date": "2022-09-06", + "ranking": 7 + } + , + { + "des": "读者张山上周借阅图书30册", + "date": "2022-09-06", + "ranking": 8 + } + ] +} \ No newline at end of file diff --git a/src/views/header/index.vue b/src/views/header/index.vue new file mode 100644 index 0000000..4d989b0 --- /dev/null +++ b/src/views/header/index.vue @@ -0,0 +1,36 @@ +