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 | 2 | <div class="theme-wrap"> |
| 3 | 3 | <card-title> <span>停车场消息</span></card-title> |
| 4 | 4 | <div class="theme-body"> |
| 5 | - <account-num></account-num> | |
| 5 | + <account-num> | |
| 6 | + <span>总计</span> | |
| 7 | + </account-num> | |
| 6 | 8 | <ul class="theme-container"> |
| 7 | 9 | <li class="roadside"> |
| 8 | 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 | 1 | <template> |
| 2 | 2 | <div class="total-wrap"> |
| 3 | - <span>总计</span> | |
| 3 | + <slot></slot> | |
| 4 | 4 | <div class="total-main" > |
| 5 | 5 | <div v-for="item in total" :key="item" :class="item !==',' ? 'eleNumBg':'noeleNumBg'" > |
| 6 | 6 | {{item}} |
| ... | ... | @@ -26,8 +26,13 @@ export default { |
| 26 | 26 | height: 30%; |
| 27 | 27 | display: flex; |
| 28 | 28 | align-items: center; |
| 29 | + span{ | |
| 30 | + display: inline-block; | |
| 31 | + width: 50px; | |
| 32 | + text-align: left; | |
| 33 | + } | |
| 29 | 34 | .total-main{ |
| 30 | - margin-left: 10px; | |
| 35 | + /*margin-left: 10px;*/ | |
| 31 | 36 | padding: 5px 5px 5px 0; |
| 32 | 37 | background: url("../../images/content/numBorder.svg") no-repeat; |
| 33 | 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 | 6 | <div class="frame-wrap"> |
| 7 | 7 | <v-parking></v-parking> |
| 8 | 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 | 12 | <div class="frame-wrap"></div> |
| 11 | 13 | </li> |
| 12 | 14 | <li class="main-center"> |
| ... | ... | @@ -25,12 +27,14 @@ |
| 25 | 27 | import VHeader from '../components/VHeader' |
| 26 | 28 | import VMap from '../components/VMap' |
| 27 | 29 | import VParking from '../components/VParking' |
| 30 | +import VToll from '../components/VToll' | |
| 28 | 31 | export default { |
| 29 | 32 | name: 'VHome', |
| 30 | 33 | components: { |
| 31 | 34 | VHeader, |
| 32 | 35 | VMap, |
| 33 | - VParking | |
| 36 | + VParking, | |
| 37 | + VToll | |
| 34 | 38 | } |
| 35 | 39 | } |
| 36 | 40 | </script> | ... | ... |