pinganxiaoyuan/monitorMobile/pages/work/index.vue

<template>
	<view class="page">
		<view class="header">
			工作台
		</view>
		<view class="card row" @click="NAV_TO('/pages/work/rollCall/index')">
			<view class="title">点名</view>
			<view class="des">通过人脸识别，提升学生点名效率</view>
			<view class="imgBox">
				<image src="/static/image/work/toRight1.png"></image>
			</view>
			<image src="/static/image/work/rollCall.png" class="modeLogo" mode=""></image>
		</view>
		<view class="gird">
			<view class="card row1" @click="NAV_TO('/pages/work/returnBed/index')">
				<view class="title">归寝</view>
				<view class="des">查看归寝情况</view>
				<view class="imgBox">
					<image src="/static/image/work/toRight.png"></image>
				</view>
				<image src="/static/image/work/returnBed.png" class="modeLogo" mode=""></image>
			</view>
			<view class="card row1" @click="NAV_TO('/pages/work/passengerFlow/index')">
				<view class="title">客流</view>
				<view class="des">查看客流情况</view>
				<view class="imgBox">
					<image src="/static/image/work/toRight.png"></image>
				</view>
				<image src="/static/image/work/passengerFlow.png" class="modeLogo" mode=""></image>
			</view>
			<view class="card" @click="NAV_TO('/pages/monitor/index')">
				<view class="title">监控管理</view>
				<view class="des">查看监控管理情况</view>
				<view class="imgBox">
					<image src="/static/image/work/toRight.png"></image>
				</view>
				<image src="/static/image/work/monitorManage.png" class="modeLogo" mode=""></image>
			</view>
			<view class="card">
				<view class="title">更多功能</view>
				<view class="des">敬请期待</view>
				<image src="/static/image/work/more.png" class="modeLogo" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		mounted(){
			
		},
		methods: {
			
		},
	}
</script>

<style lang="scss" scoped>
	.header{
		/* #ifdef H5*/
		padding-top: 42rpx;
		line-height: 56rpx;
		/* #endif */
		/* #ifndef H5*/
		padding-top: 88rpx;
		line-height: 88rpx;
		/* #endif */
		color: #fff;
		font-size: 34rpx;
		font-weight: 700;
	}
	.page{
		padding: 0 30rpx;
	}
	uni-page-body{
		/* #ifdef H5*/
		background-image: url('/static/image/work/bgh5.png');
		/* #endif */
		/* #ifndef H5*/
		background-image: url('/static/image/work/bg.png');
		/* #endif */
		background-position: top;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	.card{
		width: 100%;
		height: 240rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 40rpx;
		position: relative;
		margin-top: 26rpx;
		box-shadow: 0 0 20rpx rgba(0,0,0,0.1);
		.title{
			color: #0670ED;
			font-size: 34rpx;
			font-weight: 700;
		}
		.des{
			color: #0670ED;
			opacity: 0.8;
			font-size: 26rpx;
			margin-top: 14rpx;
		}
		.imgBox{
			margin-top: 30rpx;
			uni-image{
				height: 50rpx;
				width: 76rpx;
			}
		}
		.modeLogo{
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
		}
		&.row{
			background: linear-gradient(to right,#F1F7FF,#D0E5FF);
			.modeLogo{
				width: 160rpx;
				height: 160rpx;
			}
		}
		&.row1{
			background: linear-gradient(to bottom,#F4F9FF,#FCFDFF);
		}
	}
	.gird{
		display: flex;
		flex-wrap: wrap;
		.card{
			width:48.5%;
			margin-right: 3%;
			height: 300rpx;
			background-color: #FEFEFF;
			&:nth-child(2n){
				margin-right: 0rpx;
			}
			&:last-child{
				.title{
					color: #999999;
				}
				.des{
					color: #999999;
				}
			}
		}
		.imgBox{
			margin-top: 80rpx;
		}
	}
</style>