Jinan_app/pages/index/index.vue

<template>
	<Dindex v-if="shenfen=='battalion'&&!isSupervisor"></Dindex>
	<Zindex v-else-if="shenfen=='brigade'"></Zindex>
	<Jindex v-else></Jindex>
</template>

<script>
	import Dindex from "../../components/index/dadui.vue"
	import Jindex from "../../components/index/jiuyuanzhan.vue"
	import Zindex from "../../components/index/zhidui.vue"
	export default {
		components: {
			Dindex,
			Jindex,
			Zindex
		},
		data() {
			return {
				shenfen: "",
				isSupervisor: false
			}
		},
		onLoad() {
			let roles = uni.getStorageSync("user").roles
			let isSupervisor = roles.find(item => {
				return item.name.indexOf('检查') != -1
			})
			isSupervisor ? this.isSupervisor = true : this.isSupervisor = false
			this.shenfen = uni.getStorageSync("user").organizationLevel
		},
		onReady() {

		},
		methods: {
			

		}

	}
</script>

<style lang="scss">
	.top {
		position: relative;
		top: 0;
		left: 0;
	}

	.pure_top {
		width: 100%;
		height: 220rpx;
		position: absolute;
		z-index: 0;
		overflow: hidden;

	}

	.pure_top::after {
		content: "";
		width: 100%;
		height: 220rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		border-radius: 0 0 100% 100%;
		background: linear-gradient(180deg, #57B5FF 0%, #616DFD 100%);
	}

	.month_color {
		border-radius: 48rpx;

		background-color: #317AFF;
		color: #fff;
	}

	.month_color2 {
		color: #B5B5B5;
	}

	.calendar {
		z-index: 1;
		position: relative;
		left: 74rpx;
		top: 20rpx;
		width: 80%;
		height: 120rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 20px 1px #C1D7FF;
		background: #fff;

		view {
			height: 60rpx;
		}

		.date_year {
			box-sizing: border-box;
			display: flex;
			background-color: #fff;
			padding: 10rpx 0 0 10rpx;
		}

		.monthbox {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: row;

			.month_class {

				width: 48rpx;
				height: 48rpx;
				text-align: center;
			}
		}


	}

	button {
		width: 140rpx;
		height: 70rpx;
		color: #fff;
		border-radius: 34rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		background-color: #327AFE;
	}

	.taskbox {
		width: 90%;
		margin: 40rpx auto;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		position: relative;
		left: 0;
		z-index: 10;

		.itembox {

			.top {
				margin-top: 30rpx;
				height: 60rpx;
				display: flex;

				.left {
					display: flex;
					flex: 1;

					img {
						width: 50rpx;
						height: 50rpx;
					}

					text {
						margin-right: 10rpx;
					}
				}

				.right {
					color: #909090;
					display: flex;

					.progress {
						margin-top: 6rpx;
						margin-right: 10rpx;
						height: 34rpx;
						flex: 1;
						background: #E4E7EC;

						.color {

							height: 100%;
							background-color: #14B389;
						}
					}
				}
			}
		}
	}

	.charts-box {
		// background-color: #5687fd;
		height: 250rpx;
		position: relative;

		img {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		display: flex;
		justify-content: center;
		align-items: center;

		.tagbox {
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10rpx 0;
			font-size: 32rpx;

			.tag {
				width: 20rpx;
				height: 20rpx;
				border-radius: 20rpx;
			}
		}
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.login-box {
		display: flex;
		background: #8f8f94;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;

		.login-text {
			color: #fff;
			width: 60%;
			display: flex;
			font-size: 36rpx;
			padding-left: 40rpx;
			align-items: center;
		}

		.login-button {
			flex: 1;
			text-align: center;
			margin-top: 20rpx;

		}
	}

	.listbox {
		width: 90%;
		margin: -10rpx auto 0 auto;

		.item {
			background-color: #fff;
			margin: 20rpx 0;
			padding: 20rpx;

			.namebox {
				display: flex;
				margin-bottom: 10rpx;

				.name {
					font-weight: 600;
					font-size: 36rpx;
					width: 70%;
					height: 60rpx;
					line-height: 60rpx;
				}

				.tag {
					text-align: center;
					width: 180rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #FF6F51;
					border: 1px solid #FF6F51;
					background: rgba(255, 111, 81, 0.2400);
					border-radius: 40rpx 40rpx 40rpx 40rpx;
				}

				.tag2 {
					text-align: center;
					width: 180rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #14B488;
					border: 1px solid rgba(30, 232, 177, 0.8);
					background: rgba(30, 232, 177, 0.24);
					border-radius: 40rpx 40rpx 40rpx 40rpx;
				}
			}
		}
	}

	.typebox {
		display: flex;
		margin: 14rpx 0;

		.type {
			width: 50%;
			// border-left: #327AFE 6rpx solid;
			font-size: 32rpx;
			font-weight: 600;
			padding-left: 10rpx;
		}

		.result {
			width: 50%;
			text-align: right;
			color: #FF6F51;
		}
	}

	.staffbox {
		display: flex;
		margin: 6rpx 0;
		font-size: 30rpx;

		.staff {
			display: flex;
			color: rgba(16, 15, 25, 0.48);

			.zhu {

				color: #100F19;
			}

			view {
				margin-right: 20rpx;
			}

			img {
				width: 40rpx;
				height: 40rpx;
				min-width: 40rpx;
				min-height: 40rpx;
			}
		}

		.jiancha {
			color: #FFBA19;
			margin-right: 10rpx;

		}

	}

	.implement {

		margin-bottom: 10rpx;

		.button {
			width: 100%;
			height: 100%;
			padding-top: 20rpx;
		}

		img {
			width: 100rpx;
			height: 100rpx;
		}

		// button {
		// 	float: right;
		// 	width: 80rpx;
		// 	height: 40rpx;
		// 	line-height: 40rpx;
		// 	margin-top: 20rpx;
		// }
	}
</style>