<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>About</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
	<script src="assets/lib/vue/vue.min.js"></script>
	<link rel="stylesheet" href="assets/css/common.css" type="text/css" />
	<link rel="stylesheet" href="assets/css/header.css" type="text/css" />
	<link rel="stylesheet" href="assets/css/piece.css" type="text/css" />
	<style>
		.banner {
			width: 100%;
			position: relative;
		}

		.banner .background {
			width: 100%;
			height: auto;
			z-index: 1;
			filter: blur(5px);
		}

		.banner .content {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.banner .content .icon {
			width: 60px;
			height: 60px;
			margin-bottom: 12px;
		}

		.banner .content .name {
			font-size: 26px;
			color: #333333;
		}
	</style>
</head>

<body>
<div id="app" v-cloak>
	<div class="header">
		<div class="btn" @click="onClickBack"><img class="icon" src="assets/icons/left.svg"></div>
		<div class="text">{{ lang.title }}</div>
		<div class="btn"></div>
	</div>
	<div class="content">
		<div class="banner">
			<img class="background" src="assets/images/home.png" />
			<div class="content">
				<img class="icon" src="assets/images/icon.png" />
				<div class="name">{{ lang.app_name }}</div>
			</div>
		</div>
		<div class="settings">
			<div class="piece">
				<div class="piece-items">
					<a class="piece-item">
						<div class="piece-item-content">
							<div class="piece-item-key">{{ lang.version_current }}</div>
							<div class="piece-item-val">{{ info.version }}</div>
						</div>
					</a>
					<a class="piece-item" @click="onClickCheckVersion">
						<div class="piece-item-content">
							<div class="piece-item-key">{{ lang.version_check }}</div>
							<div class="piece-item-move"><img src="assets/icons/right.svg" /></div>
						</div>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>
</body>

</html>

<script>
	var app = new Vue({
		"el": "#app",
		"data": {
			lang:{
				title			: "关于应用",
				app_name		: "HCCast",
				version_current	: "当前版本",
				version_check	: "检查新版本",
			},
			info:{
				version			: "1.0",
			}
		},
		"created": function () {
			if (typeof ($android) !== "undefined") {
				//加载语言
				this.lang = Object.assign(this.lang, JSON.parse($android.onGetLang()));
				//加载数据
				var data = JSON.parse($android.onGetData());
				this.info = Object.assign(this.info, data.info);
			}
		},
		"methods": {
			onClickBack: function () {
				if(typeof($android) == "undefined"){
					location.href = "index.html"
					return;
				}
				$android.onClickBack();
			},
			onClickCheckVersion(){
				if(typeof($android) == "undefined"){
					return;
				}
				$android.onClickCheckVersion();
			},
		}
	})
</script>