MiniPrograms/pages/subscribe/subscribe.vue

<template>
	<view class="container">
		<!-- 头部区域 -->
		<top-box v-bind:timeStamp="timeStamp"></top-box>
		<!-- 列表区域 -->
		<view class="card-box">
			<view class="card-item"></view>
			<view class="card-item"></view>
			<view class="card-item"></view>
			<view class="card-item"></view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_parent', ['parentinfo'])
		},
		data() {
			return {
				//时间戳
				timeStamp: '',
			}
		},
		methods:{
			//更新时间戳
			getTimeStamp() {
				var date = new Date(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				this.timeStamp = (hour + ':' + minute).toString();
			}
		},
		onLoad() {
			this.getTimeStamp()
		},
		//刷新页面
		onPullDownRefresh() {
			this.getTimeStamp()
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100%;
		overflow-x: hidden; //隐藏多余的页面
		
		.home-topinfo {
			background: linear-gradient(#ffd200, #f1f3f5);
		}
		.card-box {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: -50rpx 20rpx 0 20rpx;
			justify-content: space-between;
			.card-item{
				margin: 10rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background-color: #FFFFFF;
				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
				border-radius: 16rpx;
				width: 100%;
				height: 250rpx;
			}
			}
	}
</style>