<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" ">
	<title id=" idtitle"> 薪必果通知 </title>
	<link rel="stylesheet" href="/css/ele/chalk.css">
	<link rel="stylesheet" href="/css/main.css">
	<link rel="stylesheet" href="/css/fontawesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/autocomplete.css">

	<script src="/js/vue/vue.min.js"></script>
	<script src="/js/vue/vue-router.min.js"></script>
	<script src="/js/vue/vuex.min.js"></script>
	<script src="/js/ele/index.js"></script>
	<style>
		body {
			padding: 0px;
			margin: 0px;
		}

		#loading {
			background-color: #2c3e50;
			height: 100%;
			width: 100%;
			position: fixed;
			z-index: 9999;
			margin-top: 0px;
			top: 0px;
		}

		#loading-center {
			width: 100%;
			height: 100%;
			position: relative;
		}

		#loading-center-absolute {
			position: absolute;
			left: 50%;
			top: 50%;
			height: 50px;
			width: 50px;
			margin-top: -25px;
			margin-left: -25px;
			-ms-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			-webkit-animation: loading-center-absolute 1.5s infinite;
			animation: loading-center-absolute 1.5s infinite;

		}

		.object {
			width: 25px;
			height: 25px;
			background-color: #FFF;
			float: left;

		}

		#object_one {
			-webkit-animation: object_one 1.5s infinite;
			animation: object_one 1.5s infinite;
		}

		#object_two {
			-webkit-animation: object_two 1.5s infinite;
			animation: object_two 1.5s infinite;
		}

		#object_three {
			-webkit-animation: object_three 1.5s infinite;
			animation: object_three 1.5s infinite;
		}

		#object_four {
			-webkit-animation: object_four 1.5s infinite;
			animation: object_four 1.5s infinite;
		}


		@-webkit-keyframes loading-center-absolute {
			100% {
				-webkit-transform: rotate(-45deg);
			}

		}

		@keyframes loading-center-absolute {
			100% {
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}
		}

		@-webkit-keyframes object_one {
			25% {
				-webkit-transform: translate(0, -50px) rotate(-180deg);
			}

			100% {
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}

		}

		@keyframes object_one {
			25% {
				transform: translate(0, -50px) rotate(-180deg);
				-webkit-transform: translate(0, -50px) rotate(-180deg);
			}

			100% {
				transform: translate(0, 0) rotate(-180deg);
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		@-webkit-keyframes object_two {
			25% {
				-webkit-transform: translate(50px, 0) rotate(-180deg);
			}

			100% {
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

			/* {
			"icon": "tool-order", "title":"商标列表", "type":"default", "key":"myTmList", "isOnGrid":true
		}

		, */

		@keyframes object_two {
			25% {
				transform: translate(50px, 0) rotate(-180deg);
				-webkit-transform: translate(50px, 0) rotate(-180deg);
			}

			100% {
				transform: translate(0, 0) rotate(-180deg);
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		@-webkit-keyframes object_three {
			25% {
				-webkit-transform: translate(-50px, 0) rotate(-180deg);
			}

			100% {
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		@keyframes object_three {
			25% {
				transform: translate(-50px, 0) rotate(-180deg);
				-webkit-transform: translate(-50px, 0) rotate(-180deg);
			}

			100% {
				transform: translate(0, 0) rotate(-180deg);
				-webkit-transform: rtranslate(0, 0) rotate(-180deg);
			}
		}

		@-webkit-keyframes object_four {
			25% {
				-webkit-transform: translate(0, 50px) rotate(-180deg);
			}

			100% {
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}

		@keyframes object_four {
			25% {
				transform: translate(0, 50px) rotate(-180deg);
				-webkit-transform: translate(0, 50px) rotate(-180deg);
			}

			100% {
				transform: translate(0, 0) rotate(-180deg);
				-webkit-transform: translate(0, 0) rotate(-180deg);
			}
		}
		
		.el-input__inner {
			border: none;
			border-radius: 0px;
			padding: 0px;
			color: #ddd
		}
		.el-input__inner {
			color: #2F2F2F;
		}
		.page_header {
			width:100%;
			text-align: center;
		}

		.modifybtn {
			margin: 20px auto;
			width:300px;
			height:40px;
			text-align: center;
			background:#2b85e4;
			border-radius:20px;
			font-size:16px;
			font-family:HiraginoSansGB-W3;
			font-weight:normal;
			color: #fff;
		}

		.payinfo {
			clear: both;
			margin: 0px 5%;
		}
		.payinfo .title {
			width:40%;
			float:left;
			font-size: 14px;
			font-weight: 600;
			color: #313131;
		}
		.payinfo .content {
			widows: 60%;
			float:left;
			text-align: right;
			padding-left: 10px;
			font-size: 14px;
			color: #313131;
		}
	</style>
</head>

<body style="overflow: auto;">
	<div id="loading">
		<div id="loading-center">
			<div id="loading-center-absolute">
				<div class="object" id="object_one"></div>
				<div class="object" id="object_two"></div>
				<div class="object" id="object_three"></div>
				<div class="object" id="object_four"></div>
			</div>
		</div>
	</div>
	<div id="app">
		<el-container>
			<div style="margin-top:10px;text-align: center;width: 100%;line-height: 40px;">
				<div style="width:100%;border-bottom:solid 1px #eee;padding-bottom: 5px;">
					<span  style="width:300px;color: #000000;font-size: 18px;font-weight: 700;text-align: center;"> 薪必果通知 </span>
				</div>
				<div style="margin: 0px 20px;">
					<img width="100%" src="https://gsb-zc.oss-cn-beijing.aliyuncs.com//zc_wxapplethc_1566299205626.jpg" />
					<div style="margin-top:15px;width:100%;text-align: center;font-size: 15px;font-weight: 600;">
						报酬发放详细信息
					</div>
					<div style="width:100%;height: 1px;background-color: darkgray;margin-top:10px;"></div>
					<div style="width: 100%;margin-top: 10px;">
						<div class="payinfo">
							<span class="title">客户姓名：</span>
							<span class="content">{{username}}</span>
						</div>
						<div class="payinfo">
							<span class="title">发放状态：</span>
							<span class="content">已发放</span>
						</div>
						<div class="payinfo">
							<span class="title">佣金金额：</span>
							<span class="content">{{amout}}</span>
						</div>
						<div class="payinfo">
							<span class="title">个税金额：</span>
							<span class="content">{{income}}</span>
						</div>
						<div class="payinfo">
							<span class="title">发放时间：</span>
							<span class="content">{{notifyTime}}</span>
						</div>
					</div>
				</div>
			</div>
		</el-container>
	</div>
	<script src="/js/vue/jquery.min.js"></script>
	<script src="/js/vue/base64.js"></script>
	<script src="/js/vue/axios.min.js"></script>
	<script src="/js/paynotify.js"></script>
</html>