Commit f9b345a222b8017271bc120d48f058c98806324f
1 parent
8530c025
全局filters
Showing
5 changed files
with
69 additions
and
31 deletions
src/components/VParking.vue
| @@ -2,22 +2,19 @@ | @@ -2,22 +2,19 @@ | ||
| 2 | <div class="theme-wrap"> | 2 | <div class="theme-wrap"> |
| 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 | - <div class="total-wrap"> | ||
| 6 | - <span>总计</span> | ||
| 7 | - <div class="total-main"> | ||
| 8 | - <div class="eleNumBg">1</div><div class="eleNumBg">3</div><div class="eleNumBg">5</div><div class="eleNumBg">8</div> | ||
| 9 | - </div> | ||
| 10 | - </div> | 5 | + <account-num></account-num> |
| 11 | </div> | 6 | </div> |
| 12 | </div> | 7 | </div> |
| 13 | </template> | 8 | </template> |
| 14 | 9 | ||
| 15 | <script> | 10 | <script> |
| 16 | import CardTitle from './base/CardTitle' | 11 | import CardTitle from './base/CardTitle' |
| 12 | +import AccountNum from './base/AccountNum' | ||
| 17 | export default { | 13 | export default { |
| 18 | name: 'VParking', | 14 | name: 'VParking', |
| 19 | components: { | 15 | components: { |
| 20 | - CardTitle | 16 | + CardTitle, |
| 17 | + AccountNum | ||
| 21 | } | 18 | } |
| 22 | } | 19 | } |
| 23 | </script> | 20 | </script> |
| @@ -30,27 +27,5 @@ export default { | @@ -30,27 +27,5 @@ export default { | ||
| 30 | height: calc(100% - 30px); | 27 | height: calc(100% - 30px); |
| 31 | margin-left: 20px; | 28 | margin-left: 20px; |
| 32 | } | 29 | } |
| 33 | - .total-wrap{ | ||
| 34 | - height: 30%; | ||
| 35 | - display: flex; | ||
| 36 | - align-items: center; | ||
| 37 | - .total-main{ | ||
| 38 | - margin-left: 10px; | ||
| 39 | - padding: 5px 5px 5px 0; | ||
| 40 | - background: url("../images/content/numBorder.svg") no-repeat; | ||
| 41 | - background-size: 100% 100%; | ||
| 42 | - } | ||
| 43 | - .eleNumBg{ | ||
| 44 | - width: 20px; | ||
| 45 | - height: 30px; | ||
| 46 | - display: inline-block; | ||
| 47 | - margin-left: 5px; | ||
| 48 | - line-height: 30px; | ||
| 49 | - font-size: 22px; | ||
| 50 | - font-weight: 600; | ||
| 51 | - text-align: center; | ||
| 52 | - background: url("../images/content/numBg.svg") no-repeat; | ||
| 53 | - background-size: 100% 100%; | ||
| 54 | - } | ||
| 55 | - } | 30 | + |
| 56 | </style> | 31 | </style> |
src/components/base/AccountNum.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="total-wrap"> | ||
| 3 | + <span>总计</span> | ||
| 4 | + <div class="total-main"> | ||
| 5 | + <div class="eleNumBg" v-for="item in total" :key="item"> | ||
| 6 | + {{item}} | ||
| 7 | + </div> | ||
| 8 | + </div> | ||
| 9 | + </div> | ||
| 10 | +</template> | ||
| 11 | + | ||
| 12 | +<script> | ||
| 13 | +import { formaterTotal } from '../../utils/formate' | ||
| 14 | +export default { | ||
| 15 | + name: 'AccountNum', | ||
| 16 | + data(){ | ||
| 17 | + return { | ||
| 18 | + total: formaterTotal('219706'), | ||
| 19 | + msg:'123' | ||
| 20 | + } | ||
| 21 | + } | ||
| 22 | +} | ||
| 23 | +</script> | ||
| 24 | + | ||
| 25 | +<style scoped lang="scss"> | ||
| 26 | + .total-wrap{ | ||
| 27 | + height: 30%; | ||
| 28 | + display: flex; | ||
| 29 | + align-items: center; | ||
| 30 | + .total-main{ | ||
| 31 | + margin-left: 10px; | ||
| 32 | + padding: 5px 5px 5px 0; | ||
| 33 | + background: url("../../images/content/numBorder.svg") no-repeat; | ||
| 34 | + background-size: 100% 100%; | ||
| 35 | + } | ||
| 36 | + .eleNumBg{ | ||
| 37 | + width: 20px; | ||
| 38 | + height: 30px; | ||
| 39 | + display: inline-block; | ||
| 40 | + margin-left: 5px; | ||
| 41 | + line-height: 30px; | ||
| 42 | + font-size: 22px; | ||
| 43 | + font-weight: 600; | ||
| 44 | + text-align: center; | ||
| 45 | + background: url("../../images/content/numBg.svg") no-repeat; | ||
| 46 | + background-size: 100% 100%; | ||
| 47 | + } | ||
| 48 | + } | ||
| 49 | +</style> |
src/main.js
| @@ -3,6 +3,12 @@ | @@ -3,6 +3,12 @@ | ||
| 3 | import Vue from 'vue' | 3 | import Vue from 'vue' |
| 4 | import App from './App' | 4 | import App from './App' |
| 5 | import './style/reset.css' | 5 | import './style/reset.css' |
| 6 | + | ||
| 7 | +import * as filters from './utils/filters' | ||
| 8 | +Object.keys(filters).forEach(key => { | ||
| 9 | + Vue.filter(key, filters[key]) | ||
| 10 | +}) | ||
| 11 | + | ||
| 6 | Vue.config.productionTip = false | 12 | Vue.config.productionTip = false |
| 7 | 13 | ||
| 8 | /* eslint-disable no-new */ | 14 | /* eslint-disable no-new */ |
src/utils/filters.js
0 → 100644
src/utils/formate.js