Commit d3312374a1d04815e3fddbf98c54af3da970c940
1 parent
245e9bc8
收费员信息
Showing
7 changed files
with
107 additions
and
118 deletions
src/components/HelloWorld.vue deleted
| 1 | -<template> | ||
| 2 | - <div class="hello"> | ||
| 3 | - <h1>{{ msg }}</h1> | ||
| 4 | - <h2>Essential Links</h2> | ||
| 5 | - <ul> | ||
| 6 | - <li> | ||
| 7 | - <a | ||
| 8 | - href="https://vuejs.org" | ||
| 9 | - target="_blank" | ||
| 10 | - > | ||
| 11 | - Core Docs | ||
| 12 | - </a> | ||
| 13 | - </li> | ||
| 14 | - <li> | ||
| 15 | - <a | ||
| 16 | - href="https://forum.vuejs.org" | ||
| 17 | - target="_blank" | ||
| 18 | - > | ||
| 19 | - Forum | ||
| 20 | - </a> | ||
| 21 | - </li> | ||
| 22 | - <li> | ||
| 23 | - <a | ||
| 24 | - href="https://chat.vuejs.org" | ||
| 25 | - target="_blank" | ||
| 26 | - > | ||
| 27 | - Community Chat | ||
| 28 | - </a> | ||
| 29 | - </li> | ||
| 30 | - <li> | ||
| 31 | - <a | ||
| 32 | - href="https://twitter.com/vuejs" | ||
| 33 | - target="_blank" | ||
| 34 | - > | ||
| 35 | |||
| 36 | - </a> | ||
| 37 | - </li> | ||
| 38 | - <br> | ||
| 39 | - <li> | ||
| 40 | - <a | ||
| 41 | - href="http://vuejs-templates.github.io/webpack/" | ||
| 42 | - target="_blank" | ||
| 43 | - > | ||
| 44 | - Docs for This Template | ||
| 45 | - </a> | ||
| 46 | - </li> | ||
| 47 | - </ul> | ||
| 48 | - <h2>Ecosystem</h2> | ||
| 49 | - <ul> | ||
| 50 | - <li> | ||
| 51 | - <a | ||
| 52 | - href="http://router.vuejs.org/" | ||
| 53 | - target="_blank" | ||
| 54 | - > | ||
| 55 | - vue-router | ||
| 56 | - </a> | ||
| 57 | - </li> | ||
| 58 | - <li> | ||
| 59 | - <a | ||
| 60 | - href="http://vuex.vuejs.org/" | ||
| 61 | - target="_blank" | ||
| 62 | - > | ||
| 63 | - vuex | ||
| 64 | - </a> | ||
| 65 | - </li> | ||
| 66 | - <li> | ||
| 67 | - <a | ||
| 68 | - href="http://vue-loader.vuejs.org/" | ||
| 69 | - target="_blank" | ||
| 70 | - > | ||
| 71 | - vue-loader | ||
| 72 | - </a> | ||
| 73 | - </li> | ||
| 74 | - <li> | ||
| 75 | - <a | ||
| 76 | - href="https://github.com/vuejs/awesome-vue" | ||
| 77 | - target="_blank" | ||
| 78 | - > | ||
| 79 | - awesome-vue | ||
| 80 | - </a> | ||
| 81 | - </li> | ||
| 82 | - </ul> | ||
| 83 | - </div> | ||
| 84 | -</template> | ||
| 85 | - | ||
| 86 | -<script> | ||
| 87 | -export default { | ||
| 88 | - name: 'HelloWorld', | ||
| 89 | - data () { | ||
| 90 | - return { | ||
| 91 | - msg: 'Welcome to Your Vue.js App' | ||
| 92 | - } | ||
| 93 | - } | ||
| 94 | -} | ||
| 95 | -</script> | ||
| 96 | - | ||
| 97 | -<!-- Add "scoped" attribute to limit CSS to this component only --> | ||
| 98 | -<style scoped> | ||
| 99 | -h1, h2 { | ||
| 100 | - font-weight: normal; | ||
| 101 | -} | ||
| 102 | -ul { | ||
| 103 | - list-style-type: none; | ||
| 104 | - padding: 0; | ||
| 105 | -} | ||
| 106 | -li { | ||
| 107 | - display: inline-block; | ||
| 108 | - margin: 0 10px; | ||
| 109 | -} | ||
| 110 | -a { | ||
| 111 | - color: #42b983; | ||
| 112 | -} | ||
| 113 | -</style> |
src/components/VParking.vue
| @@ -2,7 +2,9 @@ | @@ -2,7 +2,9 @@ | ||
| 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 | - <account-num></account-num> | 5 | + <account-num> |
| 6 | + <span>总计</span> | ||
| 7 | + </account-num> | ||
| 6 | <ul class="theme-container"> | 8 | <ul class="theme-container"> |
| 7 | <li class="roadside"> | 9 | <li class="roadside"> |
| 8 | <p>{{sideNum|filterTotal}}</p> | 10 | <p>{{sideNum|filterTotal}}</p> |
src/components/VToll.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="theme-wrap"> | ||
| 3 | + <card-title> <span>收费员消息</span></card-title> | ||
| 4 | + <div class="theme-body"> | ||
| 5 | + <account-num> | ||
| 6 | + <span>应签到</span> | ||
| 7 | + </account-num> | ||
| 8 | + <ul class="theme-container"> | ||
| 9 | + <li class="roadside"> | ||
| 10 | + <p>{{sideNum|filterTotal}}</p> | ||
| 11 | + <p>已签到</p> | ||
| 12 | + </li> | ||
| 13 | + <li class="roadclose"> | ||
| 14 | + <p>{{closeNum|filterTotal}}</p> | ||
| 15 | + <p>未签到</p> | ||
| 16 | + </li> | ||
| 17 | + </ul> | ||
| 18 | + </div> | ||
| 19 | + </div> | ||
| 20 | +</template> | ||
| 21 | + | ||
| 22 | +<script> | ||
| 23 | +import CardTitle from './base/CardTitle' | ||
| 24 | +import AccountNum from './base/AccountNum' | ||
| 25 | +export default { | ||
| 26 | + name: 'VToll', | ||
| 27 | + components: { | ||
| 28 | + CardTitle, | ||
| 29 | + AccountNum | ||
| 30 | + }, | ||
| 31 | + data(){ | ||
| 32 | + return{ | ||
| 33 | + sideNum: 23454, | ||
| 34 | + closeNum: 23454 | ||
| 35 | + } | ||
| 36 | + } | ||
| 37 | +} | ||
| 38 | +</script> | ||
| 39 | + | ||
| 40 | +<style scoped lang="scss"> | ||
| 41 | + .theme-wrap { | ||
| 42 | + height: 100%; | ||
| 43 | + } | ||
| 44 | + .theme-body { | ||
| 45 | + height: calc(100% - 30px); | ||
| 46 | + margin-left: 20px; | ||
| 47 | + } | ||
| 48 | + .theme-container{ | ||
| 49 | + height: 70%; | ||
| 50 | + display: flex; | ||
| 51 | + align-items: center; | ||
| 52 | + >li{ | ||
| 53 | + flex: 1; | ||
| 54 | + height: 49px; | ||
| 55 | + padding-left: 70px; | ||
| 56 | + display: flex; | ||
| 57 | + flex-direction: column; | ||
| 58 | + justify-content: space-between; | ||
| 59 | + &:nth-of-type(1){ | ||
| 60 | + p{ | ||
| 61 | + &:first-child{ | ||
| 62 | + @include fontStyle(24px); | ||
| 63 | + background-image: $fontBlue; | ||
| 64 | + } | ||
| 65 | + &:last-child{ | ||
| 66 | + font-size: 16px; | ||
| 67 | + } | ||
| 68 | + } | ||
| 69 | + } | ||
| 70 | + &:nth-of-type(2){ | ||
| 71 | + p{ | ||
| 72 | + &:first-child{ | ||
| 73 | + @include fontStyle(24px); | ||
| 74 | + background-image: $fontOrange; | ||
| 75 | + } | ||
| 76 | + &:last-child{ | ||
| 77 | + font-size: 16px; | ||
| 78 | + } | ||
| 79 | + } | ||
| 80 | + } | ||
| 81 | + } | ||
| 82 | + | ||
| 83 | + .roadside{ | ||
| 84 | + background: url("../images/content/sign.png") no-repeat 0 center; | ||
| 85 | + } | ||
| 86 | + .roadclose{ | ||
| 87 | + background: url("../images/content/nosign.png") no-repeat 0 center; | ||
| 88 | + } | ||
| 89 | + } | ||
| 90 | + | ||
| 91 | +</style> |
src/components/base/AccountNum.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="total-wrap"> | 2 | <div class="total-wrap"> |
| 3 | - <span>总计</span> | 3 | + <slot></slot> |
| 4 | <div class="total-main" > | 4 | <div class="total-main" > |
| 5 | <div v-for="item in total" :key="item" :class="item !==',' ? 'eleNumBg':'noeleNumBg'" > | 5 | <div v-for="item in total" :key="item" :class="item !==',' ? 'eleNumBg':'noeleNumBg'" > |
| 6 | {{item}} | 6 | {{item}} |
| @@ -26,8 +26,13 @@ export default { | @@ -26,8 +26,13 @@ export default { | ||
| 26 | height: 30%; | 26 | height: 30%; |
| 27 | display: flex; | 27 | display: flex; |
| 28 | align-items: center; | 28 | align-items: center; |
| 29 | + span{ | ||
| 30 | + display: inline-block; | ||
| 31 | + width: 50px; | ||
| 32 | + text-align: left; | ||
| 33 | + } | ||
| 29 | .total-main{ | 34 | .total-main{ |
| 30 | - margin-left: 10px; | 35 | + /*margin-left: 10px;*/ |
| 31 | padding: 5px 5px 5px 0; | 36 | padding: 5px 5px 5px 0; |
| 32 | background: url("../../images/content/numBorder.svg") no-repeat; | 37 | background: url("../../images/content/numBorder.svg") no-repeat; |
| 33 | background-size: 100% 100%; | 38 | background-size: 100% 100%; |
src/images/content/nosign.png
0 → 100644
2.03 KB
src/images/content/sign.png
0 → 100644
2.13 KB
src/view/VHome.vue
| @@ -6,7 +6,9 @@ | @@ -6,7 +6,9 @@ | ||
| 6 | <div class="frame-wrap"> | 6 | <div class="frame-wrap"> |
| 7 | <v-parking></v-parking> | 7 | <v-parking></v-parking> |
| 8 | </div> | 8 | </div> |
| 9 | - <div class="frame-wrap frame-wrap-center"></div> | 9 | + <div class="frame-wrap frame-wrap-center"> |
| 10 | + <v-toll></v-toll> | ||
| 11 | + </div> | ||
| 10 | <div class="frame-wrap"></div> | 12 | <div class="frame-wrap"></div> |
| 11 | </li> | 13 | </li> |
| 12 | <li class="main-center"> | 14 | <li class="main-center"> |
| @@ -25,12 +27,14 @@ | @@ -25,12 +27,14 @@ | ||
| 25 | import VHeader from '../components/VHeader' | 27 | import VHeader from '../components/VHeader' |
| 26 | import VMap from '../components/VMap' | 28 | import VMap from '../components/VMap' |
| 27 | import VParking from '../components/VParking' | 29 | import VParking from '../components/VParking' |
| 30 | +import VToll from '../components/VToll' | ||
| 28 | export default { | 31 | export default { |
| 29 | name: 'VHome', | 32 | name: 'VHome', |
| 30 | components: { | 33 | components: { |
| 31 | VHeader, | 34 | VHeader, |
| 32 | VMap, | 35 | VMap, |
| 33 | - VParking | 36 | + VParking, |
| 37 | + VToll | ||
| 34 | } | 38 | } |
| 35 | } | 39 | } |
| 36 | </script> | 40 | </script> |