首页样式

src/views/home/components/HomeHeader.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class='header'>
+    <span class='title'>生产驾驶舱</span>
+    <span class='time'>刷新时间：{{time}}</span>
+    <svg-icon icon-class="refresh" class='refresh-btn' @click='refreshData'/>
+    <el-button type="text" class="screen-btn" @click="changeFullScreen">
+			<svg-icon v-if="isFullScreen" icon-class="unFullscreen" />
+			<svg-icon v-else icon-class="fullscreen" />
+		</el-button>
+  </div>
+</template>
+<script>
+import moment from 'moment/moment';
+export default {
+  props: {
+		isFullScreen: false
+	},
+  data() {
+    return {
+      time: moment().format('HH:mm:ss YYYY.MM.DD')
+    }
+  },
+  methods: {
+    changeFullScreen() {
+      this.$emit('screenfullChange');
+    },
+    refreshData() {
+      this.time = moment().format('HH:mm:ss YYYY.MM.DD')
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.header {
+  position: relative;
+  .title {
+    font-size: 28px;
+    color:'#000';
+    letter-spacing: 2px;
+    margin-right: 10px;
+  }
+  .time {
+    font-size: 14px;
+    color:'#000';
+    margin-right: 8px;
+  }
+  .refresh-btn {
+    font-size: 16px;
+    cursor: pointer;
+  }
+  .screen-btn {
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 32px;
+  }
+}
+
+</style>