看板页面

src/views/base/dataBoard/components/Header.vue

@@ -0,0 +1,108 @@
+<template>
+  <header class="dataBoardHeader">
+    <div class='topTitle'></div>
+    <div class='time-chsoose'>
+      <span class='title'>时间选择</span>
+      <span class='time-show'>{{time}}</span>
+      <el-date-picker
+        v-model="time"
+        type="date"
+        value-format='yyyy-MM-dd'
+        :clearable='false'
+        style='position: absolute;right: 0px;width: 119px;top:-2px;opacity: 0;'
+      >
+      </el-date-picker>
+    </div>
+    <div
+      type="text"
+      class="screen-btn"
+      :title="isFullScreen?'退出全屏':'全屏'"
+      @click="changeFullScreen"
+    >
+      <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
+      <svg-icon v-else icon-class="fullScreenView" />
+    </div>
+  </header>
+</template>
+
+<script>
+import moment from 'moment'
+export default {
+  name: 'DataBoardHeader',
+  props: {
+    isFullScreen: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+  },
+  data() {
+    return {
+      time: moment().format('YYYY-MM-DD')
+    }
+  },
+  computed: {},
+  methods: {
+    changeFullScreen() {
+      this.$emit('screenfullChange')
+    },
+    exportPDF() {
+      this.$emit('exportPDF')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.dataBoardHeader {
+	background: url('../../../../assets/images/dataBoard/head.png') no-repeat;
+	height: 99px;
+	background-size: 100%;
+	background-position: 0 0;
+	position: relative;
+	.topTitle{
+		width: 465px;
+		height: 77px;
+    background: url('../../../../assets/images/dataBoard/data-board-title.png') no-repeat;
+    background-size: 100%;
+    position: absolute;
+    left: 731px;
+    top:19px;
+  }
+  .time-chsoose {
+    width: 212px;
+		height: 33px;
+    background: url('../../../../assets/images/dataBoard/time-choose.png') no-repeat;
+    background-size: 100%;
+    position: absolute;
+    right: 63px;
+    top:49px;
+    .title {
+      font-size: 18px;
+      color: #082049;
+      letter-spacing: 1px;
+      position: relative;
+      top: 4px;
+      left: 8px
+    }
+    .time-show {
+      font-size: 18px;
+      color: #FFFFFF;
+      line-height: 18px;
+      position: relative;
+      top: 4px;
+      left: 28px;
+    }
+  }
+	.screen-btn{
+		color: #00fff0;
+    height: 32px;
+    line-height: 32px;
+		font-size: 32px;
+		position: absolute;
+		right: 22px;
+		top:47px;
+	}
+}
+</style>