<template>
	<view class="message_page">
		<view class="message_content">
			<view class="message_data">
				<view class="message_box">
					<view class="message_type">类型</view>
					<view class="messages_block">消息</view>
				</view>
				<view class="message_box">
					<view class="message_type">工单审批</view>
					<view class="messages_block">工单号：</view>
				</view>
				<view class="message_box">
					<view class="message_type">设备停机</view>
					<view class="messages_block">设备名称：</view>
				</view>
				<view class="message_box">
					<view class="message_type">出材率预警</view>
					<view class="messages_block">工单号：</view>
				</view>
				<view class="message_box noborbot">
					<view class="message_type">设备保修</view>
					<view class="messages_block">设备名称：</view>
				</view>
				<view class="con_but">
					<view class="but_rat"><view class="t-icon t-icon-shenpizhida icon22"></view>审批</view>
					<view class="but_del"><view class="t-icon t-icon-shezhi icon22 padd_rigth5"></view>删除</view>
				</view>
			</view>
		</view>
		<view class="message_button">
			
		</view>
	</view>
</template>

<script>
</script>

<style>
	.message_page{height: 100vh;color: #fff;background-color: #060B26;}
	.message_content{padding: 14px;}
	.message_data{background: #1C2755;padding: 0 12px;border-radius: 8px;font-size: 13px;}
	.message_box{display: flex;line-height: 44px;border-bottom: 1px solid #2D3A6F;}
	.message_type{width: 25%;}
	.con_but{    display: flow-root;padding-bottom: 15px;}
	.but_del{    float: right;display: flex;align-items: center;justify-content: center;width: 76px;
height: 33px;border-radius: 22.5px;
    border: 1px solid #fff;margin-right: 10px;}
	.but_rat{    float: right;display: flex;align-items: center;justify-content: center;width: 76px;
height: 33px;border-radius: 22.5px;
border: 1px solid #009688;color: #009688;}
	
</style>