ToDo/pages/home/home.vue

<template>
	<view class="content">
		<view id="top1" class="status_bar"></view>
		<view id="top2" class="user">
			<view class="image">
				<image :src="avatar" mode="widthFix"></image>
			</view>
			<view class="nick" @click="toUser">
				<text>{{nick}}</text>
				<text class="icon iconfont icon-right"></text>
			</view>
		</view>
		<scroll-view class="task" scroll-y :style="{height:menuHeight+'px'}">
			<view :class="isShowSplit?'public':''">
				<navigator class="menu" url="../task/task?type=today">
					<image src="../../static/images/today.png" mode="widthFix"></image>
					<text>今日任务</text>
				</navigator>
				<navigator class="menu" url="../task/task?type=important">
					<image src="../../static/images/important.png" mode="widthFix"></image>
					<text>重要</text>
				</navigator>
				<navigator class="menu" url="../task/task?type=plan">
					<image src="../../static/images/plan.png" mode="widthFix"></image>
					<text>计划内</text>
				</navigator>
<!-- 				<navigator class="menu" url="../task/task?type=assigned">
					<image src="../../static/images/assigned.png" mode="widthFix"></image>
					<text>已分配给我</text>
				</navigator> -->
				<navigator class="menu" url="../task/task?type=task">
					<image src="../../static/images/tasks.png" mode="widthFix"></image>
					<text>任务</text>
				</navigator>
				<view class="menu" style="justify-content: space-between" @click="open">
					<view>
						<image src="../../static/images/report.png" mode="widthFix"></image>
						<text>汇报管理</text>
					</view>
					<text :class="isShowReportDetail?'icon iconfont icon-down':'icon iconfont icon-up'"
						style="margin-right: 50upx"></text>
				</view>
				<view v-if="isShowReportDetail" class="menu_detail">
					<navigator url="../dayreport/dayreport">
						<image src="../../static/images/huibao.png" mode="widthFix"></image>
						<text>个人日报</text>
					</navigator>
					<navigator url="../monthreport/monthreport">
						<image src="../../static/images/huibao.png" mode="widthFix"></image>
						<text>个人月报</text>
					</navigator>
					<navigator url="../dayreportform/dayreportform">
						<image src="../../static/images/baobiao.png" mode="widthFix"></image>
						<text>日汇报报表</text>
					</navigator>
				</view>
			</view>
			<view class="personal">
				<view v-for="item in menuList" :key="item.id">
					<view>{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
		<view id="bottom" class="bottom_bar">
			<!-- <view>
				<image src="../../static/images/plus.png" mode="widthFix"></image>
				<text>新建列表</text>
			</view>
			<image src="../../static/images/gplus.png" mode="widthFix"></image> -->
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import auth from '../../utils/js/auth.js'
	export default {
		data() {
			return {
				nick:'',
				avatar:'',								
				isShowSplit: false,
				isShowReportDetail: false,
				menuHeight: 0,
				menuList:[]
			}
		},
		onLoad() {
			if (!auth.getToken()) {
				uni.showModal({
					title: "未登录",
					content: "当前未登录，需要先登录才能继续",
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.reLaunch({
								url: "../login/login"
							})
						}
					}
				})
			}else{
				this.nick=auth.getNick()||auth.getName()
				this.avatar=auth.getAvatar()
			}
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
				success(res) {
					const w_height = res.windowHeight
					var query = uni.createSelectorQuery()
					query.select('#top1').boundingClientRect()
					query.select('#top2').boundingClientRect()
					query.select('#bottom').boundingClientRect()
					query.exec(function(res) {
						that.menuHeight = w_height - res[0].height - res[1].height - res[2].height
					})
				}
			})
		},
		methods: {
			toUser() {
				uni.navigateTo({
					url: "../user/user"
				})
			},

			open() {
				this.isShowReportDetail = !this.isShowReportDetail
			},
		}
	}
</script>

<style>
	@import url("../../utils/css/iconfont.css");

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.status_bar {
		width: 100%;
		height: calc(2*(var(--status-bar-height)));
	}

	.user {
		width: 100%;
		height: 50upx;
		display: flex;
	}

	.image {
		height: 50upx;
		width: 50upx;
		margin-left: 20upx;
		border-bottom: #C0C0C0 solid 1upx;
	}

	.image image {
		width: 100%;
	}

	.nick {
		height: 50upx;
		display: flex;
		align-items: center;
		border-bottom: #C0C0C0 solid 1upx;
	}

	.nick text {
		margin-left: 20upx;
		color: #999999;
		font-size: 25upx;
	}

	.task {
		margin-top: 50upx;
	}

	.public {
		border-bottom: #C0C0C0 solid 1upx;
	}

	.menu {
		height: 75upx;
		display: flex;
		align-items: center;
	}

	.menu view {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.menu image {
		width: 45upx;
		margin-left: 20upx;
	}

	.menu text {
		margin-left: 50upx;
		font-size: 30upx;
	}

	.menu_detail {
		margin-left: 80upx;
	}

	.menu_detail navigator {
		height: 75upx;
		display: flex;
		align-items: center;
	}

	.menu_detail image {
		width: 45upx;
	}

	.menu_detail text {
		margin-left: 50upx;
		font-size: 30upx;
	}

	.bottom_bar {
		width: 100%;
		height: 70upx;
		position: absolute;
		left: 0upx;
		bottom: 0upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bottom_bar view {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.bottom_bar image {
		width: 50upx;
		margin-left: 20upx;
		margin-right: 20upx;
	}
	
	.bottom_bar text{
		color: #0f32d3;
		margin-left: -10upx;
	}
	
	.personal{
		width: 100%;
	}
	
</style>