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,7 +13,7 @@ module.exports = { | ||
| 13 | proxyTable: {}, | 13 | proxyTable: {}, |
| 14 | 14 | ||
| 15 | // Various Dev Server settings | 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 | port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined | 17 | port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined |
| 18 | autoOpenBrowser: false, | 18 | autoOpenBrowser: false, |
| 19 | errorOverlay: true, | 19 | errorOverlay: true, |
src/App.vue
| @@ -21,8 +21,6 @@ export default { | @@ -21,8 +21,6 @@ export default { | ||
| 21 | #app { | 21 | #app { |
| 22 | width: 100%; | 22 | width: 100%; |
| 23 | height: 100%; | 23 | height: 100%; |
| 24 | - display: flex; | ||
| 25 | - flex-direction: column; | ||
| 26 | font-family: 'Avenir', Helvetica, Arial, sans-serif; | 24 | font-family: 'Avenir', Helvetica, Arial, sans-serif; |
| 27 | -webkit-font-smoothing: antialiased; | 25 | -webkit-font-smoothing: antialiased; |
| 28 | -moz-osx-font-smoothing: grayscale; | 26 | -moz-osx-font-smoothing: grayscale; |
src/assets/img/time-wrap.png
0 → 100644
1.9 KB
src/components/headerCommon.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="headercommon"> | 2 | <div class="headercommon"> |
| 3 | - | 3 | + <h3>丹阳停车运营监控中心</h3> |
| 4 | + <div class="time-wrap"> | ||
| 5 | + <p>{{timedate}}</p> | ||
| 6 | + <p>{{time}}</p> | ||
| 7 | + </div> | ||
| 4 | </div> | 8 | </div> |
| 5 | </template> | 9 | </template> |
| 6 | 10 | ||
| 7 | <script> | 11 | <script> |
| 12 | +import { getNowFormatDate, getNowFormatTime } from '../utils/formatetime' | ||
| 8 | export default { | 13 | export default { |
| 9 | name: 'HelloWorld', | 14 | name: 'HelloWorld', |
| 15 | + created() { | ||
| 16 | + }, | ||
| 10 | data() { | 17 | data() { |
| 11 | return { | 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,7 +28,30 @@ export default { | ||
| 20 | .headercommon { | 28 | .headercommon { |
| 21 | width: 100%; | 29 | width: 100%; |
| 22 | height: 77px; | 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 | </style> | 57 | </style> |
src/styles/reset.css
| @@ -45,6 +45,7 @@ html, body { | @@ -45,6 +45,7 @@ html, body { | ||
| 45 | background: url("../assets/img/bg.jpg") no-repeat; | 45 | background: url("../assets/img/bg.jpg") no-repeat; |
| 46 | background-size: 100% 100%; | 46 | background-size: 100% 100%; |
| 47 | overflow: hidden; | 47 | overflow: hidden; |
| 48 | + /*box-sizing: border-box;*/ | ||
| 48 | } | 49 | } |
| 49 | 50 | ||
| 50 | ol, ul { | 51 | ol, ul { |
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 | +} |
src/views/mainContainer.vue