Commit 245e9bc8f1c530f8fff46dfda9d53003795f4a8c
1 parent
43352ba2
停车场信息
Showing
9 changed files
with
127 additions
and
4 deletions
build/utils.js
| @@ -60,7 +60,14 @@ exports.cssLoaders = function (options) { | @@ -60,7 +60,14 @@ exports.cssLoaders = function (options) { | ||
| 60 | postcss: generateLoaders(), | 60 | postcss: generateLoaders(), |
| 61 | less: generateLoaders('less'), | 61 | less: generateLoaders('less'), |
| 62 | sass: generateLoaders('sass', { indentedSyntax: true }), | 62 | sass: generateLoaders('sass', { indentedSyntax: true }), |
| 63 | - scss: generateLoaders('sass'), | 63 | + scss: generateLoaders('sass').concat( |
| 64 | + { | ||
| 65 | + loader: 'sass-resources-loader', | ||
| 66 | + options: { | ||
| 67 | + resources: path.resolve(__dirname, '../src/style/mixin.scss')//引入的scss文件位置 | ||
| 68 | + } | ||
| 69 | + } | ||
| 70 | + ), | ||
| 64 | stylus: generateLoaders('stylus'), | 71 | stylus: generateLoaders('stylus'), |
| 65 | styl: generateLoaders('stylus') | 72 | styl: generateLoaders('stylus') |
| 66 | } | 73 | } |
package-lock.json
| @@ -10349,6 +10349,45 @@ | @@ -10349,6 +10349,45 @@ | ||
| 10349 | "semver": "^5.5.0" | 10349 | "semver": "^5.5.0" |
| 10350 | } | 10350 | } |
| 10351 | }, | 10351 | }, |
| 10352 | + "sass-resources-loader": { | ||
| 10353 | + "version": "2.0.0", | ||
| 10354 | + "resolved": "http://registry.npm.taobao.org/sass-resources-loader/download/sass-resources-loader-2.0.0.tgz", | ||
| 10355 | + "integrity": "sha1-iFacVC+/HxjzOmV4t3zFs2xWkR0=", | ||
| 10356 | + "dev": true, | ||
| 10357 | + "requires": { | ||
| 10358 | + "async": "^2.1.4", | ||
| 10359 | + "chalk": "^1.1.3", | ||
| 10360 | + "glob": "^7.1.1", | ||
| 10361 | + "loader-utils": "^1.0.4" | ||
| 10362 | + }, | ||
| 10363 | + "dependencies": { | ||
| 10364 | + "ansi-styles": { | ||
| 10365 | + "version": "2.2.1", | ||
| 10366 | + "resolved": "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz", | ||
| 10367 | + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", | ||
| 10368 | + "dev": true | ||
| 10369 | + }, | ||
| 10370 | + "chalk": { | ||
| 10371 | + "version": "1.1.3", | ||
| 10372 | + "resolved": "http://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz", | ||
| 10373 | + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", | ||
| 10374 | + "dev": true, | ||
| 10375 | + "requires": { | ||
| 10376 | + "ansi-styles": "^2.2.1", | ||
| 10377 | + "escape-string-regexp": "^1.0.2", | ||
| 10378 | + "has-ansi": "^2.0.0", | ||
| 10379 | + "strip-ansi": "^3.0.0", | ||
| 10380 | + "supports-color": "^2.0.0" | ||
| 10381 | + } | ||
| 10382 | + }, | ||
| 10383 | + "supports-color": { | ||
| 10384 | + "version": "2.0.0", | ||
| 10385 | + "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz", | ||
| 10386 | + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", | ||
| 10387 | + "dev": true | ||
| 10388 | + } | ||
| 10389 | + } | ||
| 10390 | + }, | ||
| 10352 | "sax": { | 10391 | "sax": { |
| 10353 | "version": "1.2.4", | 10392 | "version": "1.2.4", |
| 10354 | "resolved": "http://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz", | 10393 | "resolved": "http://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz", |
package.json
| @@ -50,6 +50,7 @@ | @@ -50,6 +50,7 @@ | ||
| 50 | "postcss-url": "^7.2.1", | 50 | "postcss-url": "^7.2.1", |
| 51 | "rimraf": "^2.6.0", | 51 | "rimraf": "^2.6.0", |
| 52 | "sass-loader": "^7.1.0", | 52 | "sass-loader": "^7.1.0", |
| 53 | + "sass-resources-loader": "^2.0.0", | ||
| 53 | "semver": "^5.3.0", | 54 | "semver": "^5.3.0", |
| 54 | "shelljs": "^0.7.6", | 55 | "shelljs": "^0.7.6", |
| 55 | "style-loader": "^0.23.1", | 56 | "style-loader": "^0.23.1", |
src/components/VParking.vue
| @@ -3,6 +3,16 @@ | @@ -3,6 +3,16 @@ | ||
| 3 | <card-title> <span>停车场消息</span></card-title> | 3 | <card-title> <span>停车场消息</span></card-title> |
| 4 | <div class="theme-body"> | 4 | <div class="theme-body"> |
| 5 | <account-num></account-num> | 5 | <account-num></account-num> |
| 6 | + <ul class="theme-container"> | ||
| 7 | + <li class="roadside"> | ||
| 8 | + <p>{{sideNum|filterTotal}}</p> | ||
| 9 | + <p>路侧</p> | ||
| 10 | + </li> | ||
| 11 | + <li class="roadclose"> | ||
| 12 | + <p>{{closeNum|filterTotal}}</p> | ||
| 13 | + <p>封闭</p> | ||
| 14 | + </li> | ||
| 15 | + </ul> | ||
| 6 | </div> | 16 | </div> |
| 7 | </div> | 17 | </div> |
| 8 | </template> | 18 | </template> |
| @@ -15,6 +25,12 @@ export default { | @@ -15,6 +25,12 @@ export default { | ||
| 15 | components: { | 25 | components: { |
| 16 | CardTitle, | 26 | CardTitle, |
| 17 | AccountNum | 27 | AccountNum |
| 28 | + }, | ||
| 29 | + data(){ | ||
| 30 | + return{ | ||
| 31 | + sideNum: 23454, | ||
| 32 | + closeNum: 23454 | ||
| 33 | + } | ||
| 18 | } | 34 | } |
| 19 | } | 35 | } |
| 20 | </script> | 36 | </script> |
| @@ -27,5 +43,47 @@ export default { | @@ -27,5 +43,47 @@ export default { | ||
| 27 | height: calc(100% - 30px); | 43 | height: calc(100% - 30px); |
| 28 | margin-left: 20px; | 44 | margin-left: 20px; |
| 29 | } | 45 | } |
| 46 | + .theme-container{ | ||
| 47 | + height: 70%; | ||
| 48 | + display: flex; | ||
| 49 | + align-items: center; | ||
| 50 | + >li{ | ||
| 51 | + flex: 1; | ||
| 52 | + height: 57px; | ||
| 53 | + padding-left: 70px; | ||
| 54 | + display: flex; | ||
| 55 | + flex-direction: column; | ||
| 56 | + justify-content: space-between; | ||
| 57 | + &:nth-of-type(1){ | ||
| 58 | + p{ | ||
| 59 | + &:first-child{ | ||
| 60 | + @include fontStyle(24px); | ||
| 61 | + background-image: $fontBlue; | ||
| 62 | + } | ||
| 63 | + &:last-child{ | ||
| 64 | + font-size: 16px; | ||
| 65 | + } | ||
| 66 | + } | ||
| 67 | + } | ||
| 68 | + &:nth-of-type(2){ | ||
| 69 | + p{ | ||
| 70 | + &:first-child{ | ||
| 71 | + @include fontStyle(24px); | ||
| 72 | + background-image: $fontOrange; | ||
| 73 | + } | ||
| 74 | + &:last-child{ | ||
| 75 | + font-size: 16px; | ||
| 76 | + } | ||
| 77 | + } | ||
| 78 | + } | ||
| 79 | + } | ||
| 80 | + | ||
| 81 | + .roadside{ | ||
| 82 | + background: url("../images/content/roadside.png") no-repeat 0 center; | ||
| 83 | + } | ||
| 84 | + .roadclose{ | ||
| 85 | + background: url("../images/content/roadclose.png") no-repeat 0 center; | ||
| 86 | + } | ||
| 87 | + } | ||
| 30 | 88 | ||
| 31 | </style> | 89 | </style> |
src/images/content/roadclose.png
0 → 100644
1.57 KB
src/images/content/roadside.png
0 → 100644
1.22 KB
src/style/mixin.scss
0 → 100644
| 1 | +@mixin fontStyle($size){ | ||
| 2 | + font-size: $size; | ||
| 3 | + font-weight:bold; | ||
| 4 | + -webkit-background-clip: text; | ||
| 5 | + -webkit-text-fill-color: transparent; | ||
| 6 | +} | ||
| 7 | + | ||
| 8 | +$fontBlue: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0,202,254, 1)), to(rgba(39,114,244, 1))); | ||
| 9 | +$fontOrange: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255,186,0, 1)), to(rgba(255,129,0, 1))); |
src/utils/filters.js
| 1 | export function filterTotal(val) { | 1 | export function filterTotal(val) { |
| 2 | - console.log(val.split('')) | ||
| 3 | - return val.split('') | 2 | + let str = val.toString() |
| 3 | + let newStr = '' | ||
| 4 | + let count = 0 | ||
| 5 | + for(let i=str.length-1;i>=0;i--){ | ||
| 6 | + if(count % 3 == 0 && count!= 0){ | ||
| 7 | + newStr = str.charAt(i)+","+newStr | ||
| 8 | + }else{ | ||
| 9 | + newStr = str.charAt(i)+newStr | ||
| 10 | + } | ||
| 11 | + count++ | ||
| 12 | + } | ||
| 13 | + return newStr | ||
| 4 | } | 14 | } |
src/utils/formate.js
| @@ -20,7 +20,6 @@ function formateTime() { | @@ -20,7 +20,6 @@ function formateTime() { | ||
| 20 | } | 20 | } |
| 21 | 21 | ||
| 22 | function formaterTotal(val) { | 22 | function formaterTotal(val) { |
| 23 | - // return val.split('') | ||
| 24 | let str = val.toString() | 23 | let str = val.toString() |
| 25 | let newStr = '' | 24 | let newStr = '' |
| 26 | let count = 0 | 25 | let count = 0 |