封装看板跳转页面

components/MyHeader.vue

@@ -1,6 +1,13 @@
 <template>
 	<view class="header">
 		<view class="header-title">车间物流监控</view>
+		<view class="data_box">
+			<view class="time">{{time}}</view>
+			<view class="date_item">
+				<view class="year">{{year}}</view>
+				<view class="year">{{ date }}</view>
+			</view>
+		</view>
 		<view class="exit_btn iconfont" @tap="toBack">&#xe85b;</view>
 	</view>
 </template>
@@ -10,15 +17,43 @@
 		name:"MyHeader",
 		data() {
 			return {
-				
+				timer: null,
+				time: '',
+				year: '',
+				date: '',
+				week: ''
 			};
 		},
+		mounted () {
+			this.timer = window.setInterval(this.updateTime, 1000)
+		},
 		methods: {
+			updateTime () {
+				let cd = new Date()
+				let year = cd.getFullYear()
+				let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
+				let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
+				let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
+				let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
+				let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
+				var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+				let myddy = new Date().getDay()
+				let week = weekday[myddy]
+				this.time = `${hh}:${mm}:${ss}`
+				this.year = `${year}`
+				this.date = `${month}.${date}`
+				this.week = `${week}`
+			},
 			toBack () {
 				uni.redirectTo({
 					url: '/pages/setup'
 				})
 			}
+		},
+		beforeDestroy () {
+			this.$once('hook:beforeDestroy', () => {
+				clearInterval(this.timer)
+			})
 		}
 	}
 </script>
@@ -29,19 +64,19 @@
 	left 0
 	top 0
 	width 100%
-	height 181px
+	height 96px
 	background center / 100% url('../static/image/header_bg.png') no-repeat
 .header-title
 	width: 50%;
 	height: 100%;
-	padding-top 26px
-	font-size: 60px;
+	padding-top: 14px;
+	font-size: 30px;
 	font-family: 'YouSheBiaoTiHei';
 	font-weight: 400;
 	color: transparent;
-	line-height: 44px;
+	line-height: 24px;
 	opacity: 0.89;
-	letter-spacing 10px
+	letter-spacing 5px
 	background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
 	filter: drop-shadow(#092F6D 1px 4px 1px);
 	-webkit-background-clip: text;
@@ -50,8 +85,8 @@
 	margin: 0 auto;
 .exit_btn
 	position absolute
-	left 15px
-	top 29px
+	left 10px
+	top 10px
 	height 28px
 	width 28px
 	line-height 28px
@@ -59,4 +94,25 @@
 	color #aecaf5
 	text-align: center;
 	cursor: pointer;
+.data_box
+	position absolute
+	right 10px
+	top 10px
+	display: flex
+	justify-content: flex-end
+.time
+	font-size: 28px;
+	line-height: 28px;
+	font-family: 'YouSheBiaoTiHei';
+	color: #AECAF5;
+.date_item
+	margin-left 5px
+.year
+	font-size: 12px;
+	font-family: 'YouSheBiaoTiHei';
+	color: #AECAF5;
+	line-height: 21px;
+	opacity: 0.7;
+	&:last-child
+		line-height: 0px
 </style>