MiniPrograms/pages/home/home.vue

<template>
	<view class="home-container">
		<!-- 头部区域 -->
		<view class="home-topinfo">
			<image class="children-avatar" src="../../static/boy.png"></image>
			<view class="children-name">
				<text class="name">张小伟</text>
				<text class="detail">学习近况</text>
			</view>
		</view>
		<!-- 步骤条区域 -->
		<view class="steps-box">
			<uni-steps :options="stepsValue" direction="column" :active="active"></uni-steps>
		</view>
		<!-- 卡片区域 -->
		<view class="home-card">
			<text class="card-title">文本卡片</text>
			<text class="card-content">这里是卡片的内容，显示重要通知等等消息</text>
		</view>
		<!-- 数据展示 -->
		<view class="chart-card">
			<line-chart class="home-line-chart"></line-chart>
		</view>

		<view class="chart-card">
			<wyb-table ref="table" :headers="headers" :contents="contents" height="600rpx" :urlCol="urlCol"></wyb-table>
		</view>

	</view>
	</view>
</template>

<script>
	export default {
		data() {
			const theUrl = '/pages/demos/noticeBar-demo/more' // 本地的某个页面
			const httpUrl = 'https://ext.dcloud.net.cn/plugin?id=2667' // 某个网址
			
			return {
				active: 0,

				stepsValue: [{
					title: '开学时间',
					desc: '2011-11-11'
				}, {
					title: '开学考试',
					desc: '2018-11-12'
				}, {
					title: '期中考试',
					desc: '2028-11-13'
				}, {
					title: '期末考试',
					desc: '2023-11-14'
				}],

				headers: [{
					label: '姓名',
					key: 'name'
				}, {
					label: '年龄',
					key: 'age'
				}, {
					label: '学院',
					key: 'collage'
				}, {
					label: '成绩',
					key: 'score'
				}, {
					label: '路由',
					key: 'url'
				}, {
					label: '网址',
					key: 'link'
				}],
				contents: [{
					name: '刘一',
					age: '',
					collage: '信息学院',
					score: '99',
					url: ['查看更多', theUrl],
					link: ''
				}, {
					name: '陈二',
					age: '18',
					collage: '商学院',
					score: '98',
					url: ['我带参数', theUrl, {
						name: '陈二'
					}],
					link: ''
				}, {
					name: '张三',
					age: '22',
					collage: '统计与数学学院',
					score: '97',
					url: ['查看更多', theUrl],
					link: ''
				}, {
					name: '李四',
					age: '19',
					collage: '城市与环境学院',
					score: '96',
				 url: '',
					link: ['访问网址', httpUrl]
				}, {
					name: '王五',
					age: '20',
					collage: '旅游与酒店管理学院',
					score: '95',
					url: ['查看更多', theUrl],
					link: ''
				}, {
					name: '赵六 ',
					age: '20',
					collage: '',
					score: '88',
					url: ['查看更多', theUrl],
					link: ''
				}, {
					name: '孙七',
					age: '21',
					collage: '',
					score: '95',
					url: '',
					link: ['访问网址', httpUrl]
				}, {
					name: '周八 ',
					age: '21',
					collage: '会计学院',
					score: '85',
					url: ['查看更多', theUrl],
					link: ''
				}, {
					name: '吴九 ',
					age: '20',
					collage: '',
					score: '91',
					url: ['查看更多', theUrl],
					link: ''
				}, {
					name: '郑十',
					age: '19',
					collage: '',
					score: '95',
					url: '',
					link: ['访问网址', httpUrl]
				}],
				urlCol: [{
					type: 'route',
					key: 'url'
				}, {
					type: 'http',
					key: 'link'
				}]
			}
		},
	
	onLoad() {
			this.updateSteps();
		},
		methods: {
			//更新时间表
			updateSteps() {
				let aData = new Date();
				let Today = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
				for (let i = 0; i < this.stepsValue.length; i++) {
					let timeNow = new Date(Today).getTime();
					let time = new Date(this.stepsValue[this.active].desc).getTime();
					let time2 = new Date(this.stepsValue[this.active + 1].desc).getTime();
					if (timeNow > time && timeNow > time2) {
						this.active += 1;
					}
				}
			}
		},
	}
</script>

<style lang="scss">
	.home-container {
		height: 100%;

		.home-topinfo {
			height: 400rpx;
			background: linear-gradient(#0080ff, #fafafa);
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.children-avatar {
				margin-top: 10px;
				margin-left: 20px;
				width: 48px;
				height: 48px;
				border-radius: 25px;
				border: 1px solid #FFFFFF;
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

			}

			.children-name {
				margin-top: 12px;
				margin-left: 10px;
				display: flex;
				flex-direction: column;

				.name {
					color: #6b778d;
					font-size: 13px;
					margin: 2px 0px 0px 5px;
				}

				.detail {
					color: #3B4144;
					font-weight: bold;
					margin: 5px 0px 0px 5px;
				}
			}
		}

		.steps-box {
			margin: -45px 17px 17px 17px;
		}

		.home-card {
			margin: 10px 17px 17px 17px;
			background-color: #FFFFFF;
			overflow: hidden;
			text-overflow: ellipsis;
			flex: 1 1 auto;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			border-radius: 10px;
			padding: 3px;


			.card-title {
				font-size: 15px;
				margin: 10px;
			}

			.card-content {
				font-size: 12px;
				margin: 0px 10px 10px 10px;
			}
		}

		.chart-card {
			margin: 0 7px 7px 7px;

			.home-line-chart {
				margin-top: 45px
			}
		}

	}
</style>