yxy/uniapp/pages/teacher/message.vue

<template>
	

	<view class="teacher_box">
		<view class="jie_card">
			<view class="xiaoxi_title">
				您的借单号为212322131231的借单审批未通过!
			</view>
			<uv-line></uv-line>
			<view class="xiaoxi_title xiaoxi_box">
				<text>驳回理由：没有写清楚借用的具体时间，请重新修改提交</text>
			</view>
			<view class="xiaoxi_title xiaoxi_box">
				<text>审批人：王文杰</text>
			</view>
			<view class="xiaoxi_title xiaoxi_box2">
				<view class="xiaoxi_zt">
					借单驳回
				</view>
				<view class="xiaoxi_time">
					2024-02-14 10:32:24
				</view>
			</view>
		</view>
		<view class="jie_card">
			<view class="xiaoxi_title">
				您的借单号为212322131231的借单审批通过!
			</view>
			<uv-line></uv-line>
			<view class="xiaoxi_title xiaoxi_box">
				<text>管理员备注：12号14点前到一楼实验室来领取</text>
			</view>
			<view class="xiaoxi_title xiaoxi_box">
				<text>审批人：王文杰</text>
			</view>
			<view class="xiaoxi_title xiaoxi_box2">
				<view class="xiaoxi_zt" style="background-color: #2d8cf0;">
					借单通过
				</view>
				<view class="xiaoxi_time">
					2024-02-14 10:32:24
				</view>
			</view>
		</view>
		<view class="jie_card">
			<view class="xiaoxi_title">
				您的借单号为212322131231的借单即将逾期！
			</view>
			<uv-line></uv-line>
			<view class="xiaoxi_title xiaoxi_box">
				<text>约定归还时间：2024-02-14</text>
			</view>
			<view class="xiaoxi_title xiaoxi_box">
				<text>请及时归还！</text>
			</view>
			<view class="xiaoxi_title xiaoxi_box2">
				<view class="xiaoxi_zt" style="background-color: #ed4014">
					借单逾期
				</view>
				<view class="xiaoxi_time">
					2024-02-14 10:32:24
				</view>
			</view>
		</view>
		
		
		<view style="width: 100%; height: 10vh;">
			
		</view>
		
	</view>

</template>
<script setup>
	import {ref} from 'vue'
	import {
		requestApi
	} from '@/api/request.js'
	// onShow是uni-app中的一个全局生命周期函数，当页面从后台进入前台显示时会被触发。
	import {
		onShow,
	} from '@dcloudio/uni-app'
	
</script>



<style lang="less">
	page {
		background-color: rgb(244, 245, 249);
		overflow: hidden;
	}

	.search {
		padding: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
	}
	.xiaoxi_zt{
		background-color:#ff9900 ;
		float: left;
		padding: 7rpx;
		color: #fff;
		font-size: 20rpx;
	}
	.xiaoxi_title{
		margin: 15rpx 0;
	}
	swiper {
		min-height: 95vh;
		// overflow-y:auto;
	}
	.xiaoxi_box{
		font-size: 25rpx;
		color: #808695;
	}
	.xiaoxi_box2{
		margin-top: 30rpx;
		font-size: 25rpx;
		color: #808695;
		height: 50rpx;
	}
	.xiaoxi_time{
		float: right;
	}
	.jie_card {
		width: 90%;
		margin: 20rpx auto;
		// height: 250rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 10rpx 20rpx;
	}

	.jie_card_title {
		width: 100%;
		height: 70rpx;
		line-height: 80rpx;
	}

	.jie_swiper {
		// min-height: 1000rpx;
		background-color: rgb(244, 245, 249);
	}

	.jie_card_title_text {
		margin-left: 15rpx;
		line-height: center;
	}

	.jie_tags {
		float: right;
		background-color: #E1F3D8;
		width: 90rpx;
		height: 40rpx;
		margin-top: 20rpx;
		border-radius: 20rpx 0 0 20rpx;
		font-size: 20rpx;
		padding-left: 10rpx;
		line-height: 40rpx;
		color: #529B2E;
	}

	.jie_contend {
		margin-left: 15rpx;
		margin-top: 15rpx;
		float: left;
	}

	.jie_contend_text {
		margin-bottom: 10rpx;
	}

	.jie_contend_text1 {
		color: #606266;
	}

	.jie_contend_text2 {
		color: #303133;
	}
	.teacher_box{
		height: 90vh;
		overflow-y:auto
		
	}
	.jie_card_ztai {
		width: 120rpx;
		height: 120rpx;
		background-color: #F89898;
		border-radius: 50%;
		line-height: 120rpx;
		float: right;
		color: #fff;
		font-size: 25rpx;
		text-align: center;
		margin-top: 30rpx;
		margin-right: 40rpx;
	}
	
</style>