Commit 9808a4b6cb70f3c966a7effbc217f081a43dbd51
1 parent
09015c8f
公用头部
Showing
7 changed files
with
63 additions
and
8 deletions
config/index.js
| ... | ... | @@ -13,7 +13,7 @@ module.exports = { |
| 13 | 13 | proxyTable: {}, |
| 14 | 14 | |
| 15 | 15 | // Various Dev Server settings |
| 16 | - host: '192.168.1.7', // can be overwritten by process.env.HOST | |
| 16 | + host: '192.168.101.26', // can be overwritten by process.env.HOST | |
| 17 | 17 | port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined |
| 18 | 18 | autoOpenBrowser: false, |
| 19 | 19 | errorOverlay: true, | ... | ... |
src/App.vue
src/assets/img/time-wrap.png
0 → 100644
1.9 KB
src/components/headerCommon.vue
| 1 | 1 | <template> |
| 2 | 2 | <div class="headercommon"> |
| 3 | - | |
| 3 | + <h3>丹阳停车运营监控中心</h3> | |
| 4 | + <div class="time-wrap"> | |
| 5 | + <p>{{timedate}}</p> | |
| 6 | + <p>{{time}}</p> | |
| 7 | + </div> | |
| 4 | 8 | </div> |
| 5 | 9 | </template> |
| 6 | 10 | |
| 7 | 11 | <script> |
| 12 | +import { getNowFormatDate, getNowFormatTime } from '../utils/formatetime' | |
| 8 | 13 | export default { |
| 9 | 14 | name: 'HelloWorld', |
| 15 | + created() { | |
| 16 | + }, | |
| 10 | 17 | data() { |
| 11 | 18 | return { |
| 12 | - msg: 'Welcome to Your Vue.js App' | |
| 19 | + timedate: getNowFormatDate(), | |
| 20 | + time: getNowFormatTime() | |
| 13 | 21 | } |
| 14 | 22 | } |
| 15 | 23 | } |
| ... | ... | @@ -20,7 +28,30 @@ export default { |
| 20 | 28 | .headercommon { |
| 21 | 29 | width: 100%; |
| 22 | 30 | height: 77px; |
| 23 | - /*background: url("../assets/img/headerbg.svg");*/ | |
| 24 | - background: #f00; | |
| 31 | + position: relative; | |
| 32 | + | |
| 33 | + } | |
| 34 | + .headercommon h3{ | |
| 35 | + width: 1200px; | |
| 36 | + margin: 0 auto; | |
| 37 | + line-height: 77px; | |
| 38 | + background: url("../assets/img/headerbg.svg") no-repeat center center; | |
| 39 | + /*background: #f00;*/ | |
| 40 | + font-size: 27px; | |
| 41 | + text-align: center; | |
| 42 | + font-weight:800; | |
| 43 | + color:rgba(255,255,255,1); | |
| 44 | + } | |
| 45 | + .time-wrap{ | |
| 46 | + position: absolute; | |
| 47 | + right: 12px; | |
| 48 | + top:20px; | |
| 49 | + padding-left: 44px; | |
| 50 | + background: url("../assets/img/time-wrap.png") no-repeat 0 center; | |
| 51 | + text-align: left; | |
| 52 | + font-size:16px; | |
| 53 | + font-weight:400; | |
| 54 | + color:rgba(255,255,255,1); | |
| 55 | + line-height:18px; | |
| 25 | 56 | } |
| 26 | 57 | </style> | ... | ... |
src/styles/reset.css
src/utils/formatetime.js
0 → 100644
| 1 | +export function getNowFormatDate() { | |
| 2 | + var date = new Date(); | |
| 3 | + var seperator1 = "-"; | |
| 4 | + var year = date.getFullYear(); | |
| 5 | + var month = date.getMonth() + 1; | |
| 6 | + var strDate = date.getDate(); | |
| 7 | + if (month >= 1 && month <= 9) { | |
| 8 | + month = "0" + month; | |
| 9 | + } | |
| 10 | + if (strDate >= 0 && strDate <= 9) { | |
| 11 | + strDate = "0" + strDate; | |
| 12 | + } | |
| 13 | + var currentdate = year + seperator1 + month + seperator1 + strDate; | |
| 14 | + return currentdate; | |
| 15 | +} | |
| 16 | + | |
| 17 | +export function getNowFormatTime() { | |
| 18 | + var date = new Date(); | |
| 19 | + var seperator1 = ":"; | |
| 20 | + var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); | |
| 21 | + var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); | |
| 22 | + var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); | |
| 23 | + var curentTime = hour + seperator1 + minute + seperator1 + second | |
| 24 | + return curentTime | |
| 25 | +} | ... | ... |