ElectronClient/tax-guidance/pages/index/index.vue

<template>
	<view class="page-container tn-gradient-bg__cool-5">
		<cheader></cheader>
		<div class="index-body">
			<div class="body-title">
				<span class="title-mian">紫云纳税服务综合管理系统</span>
				<span class="title-child">智能导税</span>
			</div>
			<div class="body-content">
				<div class="emp-content">
					<image src="/static/header_no.png" class="emp-image"></image>
					<p class="emp-name emp-p">{{'欧阳永叔'}}</p>
					<p class="emp-id emp-p">工号:{{'123456789'}}</p>
					<tn-button width="180px" height="50px" @click="loginOutAction">退    出</tn-button>
				</div>
				<div style="width: 2vw;"></div>
				<div class="btn-content">
					<div class="btn-row1">
						<div class="row1-item1 col-center" @click="goToTable">
							<uni-icons type="staff-filled" size="60" color="#fff"></uni-icons>
							<p class="btn-p">今日进厅</p>
						</div>
						<div class="row1-item2 col-center">
							<uni-icons type="notification-filled" size="60" color="#fff"></uni-icons>
							<p class="btn-p">今日预约</p>
						</div>
						<div class="row1-item3 col-center">
							<uni-icons type="list" size="60" color="#fff"></uni-icons>
							<p class="btn-p">票号管理</p>
						</div>
					</div>
					<div style="height: 2vh;"></div>
					<div class="btn-row2">
						<div class="row2-item1">
							<div class="row2-item1-top row-center">
								<uni-icons type="email-filled" size="60" color="#fff"></uni-icons>
								<p class="btn-p">信息推送</p>
							</div>
							<div style="height: 2vh;"></div>
							<div class="row2-item1-bottom row-center">
								<uni-icons type="download-filled" size="60" color="#fff"></uni-icons>
								<p class="btn-p">台账登记</p>
							</div>
						</div>
						<div class="row2-item2">
							<div class="row2-item2-left col-center">
								<uni-icons type="checkbox-filled" size="60" color="#fff"></uni-icons>
								<p class="btn-p">注册码验证</p>
							</div>
							<div style="width: 2vh;"></div>
							<div class="row2-item2-center col-center">
								<uni-icons type="auth-filled" size="60" color="#fff"></uni-icons>
								<p class="btn-p">网格员</p>
							</div>
							<div style="width: 2vh;"></div>
							<div class="row2-item2-right col-center">
								<uni-icons type="home-filled" size="60" color="#fff"></uni-icons>
								<p class="btn-p">一户式</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script setup>
	import cheader from '@/components/header.vue'
	
	let goToTable = ()=>{
		uni.navigateTo({
			url:'/pages/table/table'
		})
	}
	
	let loginOutAction = ()=>{
		uni.navigateTo({
			url:'/pages/login/login'
		})
	}
</script>

<style lang="scss">
	.index-body {
		height: 90vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.body-title {
			height: 6vh;
			margin-bottom: 2vh;

			.title-mian {
				background: linear-gradient(to bottom, #DEDEDE 10%, #fff 90%);
				/* 2. 将背景裁剪成文字形状 (需要-webkit-前缀) */
				-webkit-background-clip: text;
				background-clip: text;
				/* 3. 将文字颜色设为透明，显示出渐变背景 */
				color: transparent;
				/* 为了效果明显，可以设置一些字体样式 */
				font-size: 36px;
			}

			.title-child {
				background: linear-gradient(to bottom, #483D8B 10%, #8A2BE2 90%);
				/* 2. 将背景裁剪成文字形状 (需要-webkit-前缀) */
				-webkit-background-clip: text;
				background-clip: text;
				/* 3. 将文字颜色设为透明，显示出渐变背景 */
				color: transparent;
				/* 为了效果明显，可以设置一些字体样式 */
				font-size: 36px;
			}
		}

		.body-content {
			display: flex;
			flex-direction: row;

			.emp-content {
				height: 60vh;
				width: 20vw;
				background-color: #ffffff50;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 30px;
				
				.emp-image{
					height: 30vh;
					padding: 4px;
					border: 1px solid #ddd;
				}
				
				.emp-p{
					color: #fff;
					font-size: 20px;
					font-weight: 800;
				}
				
				.emp-name{
					margin-top: 20px;
					margin-bottom: 5px;
				}
				
				.emp-id{
					margin-bottom: 20px;
				}
			}

			.btn-content {

				.btn-row1 {
					height: 22vh;
					width: 60vw;
					display: grid;
					grid-template-columns: repeat(3, 1fr);

					.row1-item1 {
						background-color: #990066;
						margin-right: 2vh;
					}

					.row1-item2 {
						background-color: #993366;
						margin-right: 2vh;
					}

					.row1-item3 {
						background-color: #996666;
					}
				}

				.btn-row2 {
					height: 36vh;
					width: 60vw;
					display: grid;
					grid-template-columns: repeat(3, 1fr);

					.row2-item1 {
						margin-right: 2vh;
						display: flex;
						flex-direction: column;
						
						.row2-item1-top{
							flex: 1;
							background-color: #33cc66;
						}
						
						.row2-item1-bottom{
							flex: 1;
							background-color: #cc9966;
						}
					}

					.row2-item2 {
						grid-column: span 2;
						display: flex;
						flex-direction: row;
						
						.row2-item2-left{
							flex: 1;
							background-color: #99ffcc;
						}
						
						.row2-item2-center{
							flex: 1;
							background-color: #cccccc;
						}
						
						.row2-item2-right{
							flex: 1;
							background-color: #cc99cc;
						}
					}
				}
			}
		}
	}
	
	.col-center{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.row-center{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.btn-p{
		font-size: 22px;
		font-weight: 800;
		color: #fff;
		margin: 8px;
		text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	}
</style>