Commit c793b6c7f9630a6ec6baed4358f374636c26fef1
1 parent
54dab3c6
地磁故障
Showing
8 changed files
with
122 additions
and
14 deletions
src/App.vue
| @@ -27,10 +27,8 @@ export default { | @@ -27,10 +27,8 @@ export default { | ||
| 27 | 27 | ||
| 28 | <style> | 28 | <style> |
| 29 | #app { | 29 | #app { |
| 30 | - font-family: 'Avenir', Helvetica, Arial, sans-serif; | ||
| 31 | -webkit-font-smoothing: antialiased; | 30 | -webkit-font-smoothing: antialiased; |
| 32 | -moz-osx-font-smoothing: grayscale; | 31 | -moz-osx-font-smoothing: grayscale; |
| 33 | - text-align: center; | ||
| 34 | - color: #2c3e50; | 32 | + color: #404040; |
| 35 | } | 33 | } |
| 36 | </style> | 34 | </style> |
src/assets/images/parkName.png
0 → 100644
1.17 KB
src/assets/style/mixin.scss
src/assets/style/reset.css
| @@ -10,7 +10,7 @@ body { | @@ -10,7 +10,7 @@ body { | ||
| 10 | font-size: 1.4rem; | 10 | font-size: 1.4rem; |
| 11 | line-height: 1.5; | 11 | line-height: 1.5; |
| 12 | color: #333333; | 12 | color: #333333; |
| 13 | - background-color: white; | 13 | + background-color: #f7f7f7; |
| 14 | height: 100%; | 14 | height: 100%; |
| 15 | overflow-x: hidden; | 15 | overflow-x: hidden; |
| 16 | -webkit-overflow-scrolling: touch; | 16 | -webkit-overflow-scrolling: touch; |
src/components/geomagnetism.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="hello"> | ||
| 3 | - 1 | 2 | + <div class=""> |
| 3 | + <ul class="dici-wrap"> | ||
| 4 | + <li> | ||
| 5 | + <p class="parkName">赤峰市万达A区停车场</p> | ||
| 6 | + <ul class="diciList"> | ||
| 7 | + <li> | ||
| 8 | + 编号 ：B8888B8888 | ||
| 9 | + </li> | ||
| 10 | + <li> | ||
| 11 | + 故障时间 ：2019-01-91 15:31:00 | ||
| 12 | + </li> | ||
| 13 | + </ul> | ||
| 14 | + <ul class="diciList"> | ||
| 15 | + <li> | ||
| 16 | + 编号 ：B8888B8888 | ||
| 17 | + </li> | ||
| 18 | + <li> | ||
| 19 | + 故障时间 ：2019-01-91 15:31:00 | ||
| 20 | + </li> | ||
| 21 | + </ul> | ||
| 22 | + </li> | ||
| 23 | + <li> | ||
| 24 | + <p class="parkName">赤峰市万达A区停车场</p> | ||
| 25 | + <ul class="diciList"> | ||
| 26 | + <li> | ||
| 27 | + 编号 ：B8888B8888 | ||
| 28 | + </li> | ||
| 29 | + <li> | ||
| 30 | + 故障时间 ：2019-01-91 15:31:00 | ||
| 31 | + </li> | ||
| 32 | + </ul> | ||
| 33 | + </li> | ||
| 34 | + </ul> | ||
| 4 | </div> | 35 | </div> |
| 5 | </template> | 36 | </template> |
| 6 | 37 | ||
| 7 | <script> | 38 | <script> |
| 8 | export default { | 39 | export default { |
| 9 | name: 'geomagnetism', | 40 | name: 'geomagnetism', |
| 10 | - data () { | ||
| 11 | - return { | ||
| 12 | - msg: 'Welcome to Your Vue.js App' | ||
| 13 | - } | 41 | + data() { |
| 42 | + return {} | ||
| 43 | + }, | ||
| 44 | + created() { | ||
| 45 | + document.title = '地磁故障' | ||
| 14 | } | 46 | } |
| 15 | } | 47 | } |
| 16 | </script> | 48 | </script> |
| 17 | 49 | ||
| 18 | <!-- Add "scoped" attribute to limit CSS to this component only --> | 50 | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| 19 | <style scoped lang="scss"> | 51 | <style scoped lang="scss"> |
| 20 | -.hello{ | 52 | + .dici-wrap > li { |
| 53 | + background-color: $whiteBg; | ||
| 54 | + margin-bottom: 12px; | ||
| 55 | + padding: 15px 15px; | ||
| 56 | + } | ||
| 21 | 57 | ||
| 22 | -} | 58 | + .parkName { |
| 59 | + font-size: 1.8rem; | ||
| 60 | + font-weight: 600; | ||
| 61 | + padding-left: 2.5rem; | ||
| 62 | + background: url("../assets/images/parkName.png") no-repeat 0 center; | ||
| 63 | + background-size: 1.8rem 1.8rem; | ||
| 64 | + } | ||
| 65 | + .diciList{ | ||
| 66 | + background-color: #fafafa; | ||
| 67 | + border-radius: 4px; | ||
| 68 | + padding: 0 15px; | ||
| 69 | + margin-top: 12px; | ||
| 70 | + >li{ | ||
| 71 | + height: 4.5rem; | ||
| 72 | + line-height: 4.5rem; | ||
| 73 | + position: relative; | ||
| 74 | + &:first-child:after{ | ||
| 75 | + @include border-1px(#D9D9D9, bottom) | ||
| 76 | + opacity: .5; | ||
| 77 | + } | ||
| 78 | + } | ||
| 79 | + } | ||
| 23 | </style> | 80 | </style> |
src/components/screen.vue
src/filters/index.js
0 → 100644
| 1 | +function formateday() { | ||
| 2 | + let date = new Date() | ||
| 3 | + let str = '' | ||
| 4 | + let year = date.getFullYear() | ||
| 5 | + let month = date.getMonth()+1<10? "0"+ (date.getMonth()+1) : date.getMonth()+1 | ||
| 6 | + let day = date.getDate()<10 ? "0"+date.getDate() : date.getDate() | ||
| 7 | + str = year +"-"+ month +"-"+ day | ||
| 8 | + return str | ||
| 9 | +} | ||
| 10 | + | ||
| 11 | +function formateTime() { | ||
| 12 | + let date = new Date() | ||
| 13 | + let str = '' | ||
| 14 | + let hours = date.getHours()<10? "0"+date.getHours() : date.getHours() | ||
| 15 | + let minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes(); | ||
| 16 | + let seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds(); | ||
| 17 | + | ||
| 18 | + str = hours+":"+minutes+":"+seconds | ||
| 19 | + return str | ||
| 20 | +} | ||
| 21 | + | ||
| 22 | +function formaterTotal(val) { | ||
| 23 | + // console.log(val) | ||
| 24 | + // console.log(typeof val) | ||
| 25 | + let str = val.toString() | ||
| 26 | + let newStr = '' | ||
| 27 | + let count = 0 | ||
| 28 | + // for(let i=str.length-1;i>=0;i--){ | ||
| 29 | + // if(count % 3 == 0 && count!= 0){ | ||
| 30 | + // newStr = str.charAt(i)+","+newStr | ||
| 31 | + // }else{ | ||
| 32 | + // newStr = str.charAt(i)+newStr | ||
| 33 | + // } | ||
| 34 | + // count++ | ||
| 35 | + // } | ||
| 36 | + return str.split("") | ||
| 37 | +} | ||
| 38 | + | ||
| 39 | +export { formateday, formateTime, formaterTotal } |
src/main.js
| @@ -4,6 +4,17 @@ import Vue from 'vue' | @@ -4,6 +4,17 @@ import Vue from 'vue' | ||
| 4 | import App from './App' | 4 | import App from './App' |
| 5 | require ('./assets/style/reset.css') | 5 | require ('./assets/style/reset.css') |
| 6 | 6 | ||
| 7 | +Vue.filter('dataFilter',function () { | ||
| 8 | + let date = new Date() | ||
| 9 | + let str = '' | ||
| 10 | + let hours = date.getHours()<10? "0"+date.getHours() : date.getHours() | ||
| 11 | + let minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes(); | ||
| 12 | + let seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds(); | ||
| 13 | + | ||
| 14 | + str = hours+":"+minutes+":"+seconds | ||
| 15 | + return str | ||
| 16 | +}) | ||
| 17 | + | ||
| 7 | Vue.config.productionTip = false | 18 | Vue.config.productionTip = false |
| 8 | 19 | ||
| 9 | /* eslint-disable no-new */ | 20 | /* eslint-disable no-new */ |