medical/pages/leave/index.vue

<template>
	<view>
		<!-- 头部导航 -->
		<view class="tesx">
			<view :class="tobu == 1 ? 'con' : ''" @click="to(1)" style="margin-right: 20rpx;">概览</view>
			<view :class="tobu == 2 ? 'con' : ''" @click="to(2)">记录</view>
		</view>
		
		<!-- 概览 -->
		<view v-if="tobu == 1">
			<view class="choice" style="border: 0;">
				<view class="choice-left">全校</view>
				<view>2022.10.19 ~ 2022.12.09</view>
			</view>
			
			<!-- 总人数 -->
			<view class="total">
				总请假人数
				<br>
				<text class="total-txt" style="font-size: 49rpx;">152</text>人
				
				<view class="line"></view>
			</view>
			
			
		</view>
		
		<!-- 记录 -->
		<view v-if="tobu == 2">
			
			<view class="choice">
				<view class="choice-left">全校</view>
				<view>2022.10.19 ~ 2022.12.09</view>
			</view>
			
			<view class="record" v-for="item in dato">
				<view style="color: #000; font-weight: 600; margin-bottom: 23rpx;">
					Messis的请假
					<text style="color: rgba(0,0,0,0.60); font-weight: 500; float: right; display: inline-block;">2022.12.01</text>
				</view>
				
				<view class="information">
					<text>请假类型：</text>
					<text>病假</text>
				</view>
				
				<view class="information">
					<text>学生姓名：</text>
					<text>Messis</text>
				</view>
				
				<view class="information">
					<text>所在班级：</text>
					<text>一年级（1）班</text>
				</view>
				
				<view class="information">
					<text>开始时间：</text>
					<text>2020-09-04 上午</text>
				</view>
				
				<view class="information">
					<text>结束时间：</text>
					<text>2020-09-04 下午</text>
				</view>
				
				<view class="information">
					<text>请假天数：</text>
					<text>1天</text>
				</view>
			</view>
			
		</view>
		
		<!-- 悬浮按钮 -->
		<view class="suspension" @click="toAdd" v-if="tobu ==  1">
			<image src="../../static/icon.svg"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				providerList: [],
				version: '',
				handle: 'Mba',
				tobu: '1',
				dato: [{}, {}]
				
			}
		},
		onLoad() {
			
		},
		methods: {
			// 点击改变是否观察或者处理记录
			to(data){
				this.tobu = data
				
			},

			// 跳转新增
			toAdd(){
				uni.navigateTo({
					url: '/pages/addLeave/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		// padding: 0 32rpx;
		/* background-color: #D9D9D9; */
		background-color: #F5F5F5 !important;
	}
	
	.tesx{
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: rgba(0,0,0,0.60);
		height: 128rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
	}
	
	.con{
		font-size: 40rpx;
		font-weight: 600;
		color: #000;
	}
	
	.choice{
		height: 96rpx;
		line-height: 96rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(0,0,0,0.10);
	}
	
	.choice-left{
		float: left;
		margin-right: 114rpx;
	}
	
	// 概览
	.total{
		height: 302rpx;
		box-sizing: border-box;
		padding: 36rpx 22rpx;
		background-color: #fff;
		border-radius: 32rpx;
		margin: 20rpx 32rpx 0;
		font-size: 25rpx;
	}
	
	.total-txt{
		 font-weight: 600;
		 margin-top: 6rpx;
		 margin-right: 15rpx;
		 display: inline-block;
	}
	
	// 记录
	.record{
		padding: 32rpx 37rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: rgba(0,0,0,0.60);
		border-bottom: 1px solid rgba(0,0,0,0.10);
	}
	
	.information{
		height: 47rpx;
		line-height: 47rpx;
	}
	
	
	.suspension{
		width: 96rpx;
		height: 96rpx;
		border-radius: 50px;
		background-color: #7b5df0;
		position:fixed;
		right: 32rpx;
		bottom: 168rpx;
	}
	
	.suspension image{
		width: 100%;
		height: 100%;
	}
</style>