|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
|
|
|
<title>分享APP</title>
|
|
|
|
<!--REM自适应布局JS-->
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../../lib/css/mui.min.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../../lib/css/basic.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../css/base.css" />
|
|
|
|
<script src="../../../lib/js/mui.min.js"></script>
|
|
|
|
<script src="../../../lib/js/vue.js"></script>
|
|
|
|
<script src="../../../lib/js/app.js"></script>
|
|
|
|
<script src="../../js/base/rem-layout.js"></script>
|
|
|
|
<script src="../../js/language/wallet_language.js"></script>
|
|
|
|
<script type="text/javascript" src="../../js/my/my_ajax.js"></script>
|
|
|
|
</head>
|
|
|
|
<style>
|
|
|
|
.protocol-box {
|
|
|
|
position: fixed;
|
|
|
|
bottom: 0.25rem;
|
|
|
|
font-size: 0.28rem;
|
|
|
|
text-align: center;
|
|
|
|
width: 100%;
|
|
|
|
color: #666 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
#logo-content {
|
|
|
|
width: 100%;
|
|
|
|
height: 2.5rem;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
#logo-content #logo {
|
|
|
|
position: absolute;
|
|
|
|
width: 80px;
|
|
|
|
top: .6rem;
|
|
|
|
left: calc(50% - 40px);
|
|
|
|
height: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.app-name {
|
|
|
|
font-size: 0.3rem;
|
|
|
|
text-align: center;
|
|
|
|
margin-bottom: .2rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.version {
|
|
|
|
width: 100%;
|
|
|
|
font-size: 0.25rem;
|
|
|
|
text-align: center;
|
|
|
|
margin-bottom: .5rem;
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.version img {
|
|
|
|
margin-top: 2.5rem;
|
|
|
|
width: 2rem;
|
|
|
|
height: 2rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.version p {
|
|
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
|
|
margin-top: .2rem;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<div id="data-info">
|
|
|
|
<header class="mui-bar mui-bar-nav app-header app-header-darkly">
|
|
|
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
|
|
|
<h1 class="mui-title" data-text="WalletMyAboutUsTitle">{{langue.about}}</h1>
|
|
|
|
</header>
|
|
|
|
<div class="mui-content">
|
|
|
|
<div id="logo-content">
|
|
|
|
<img id="logo" src="../../img/logo.png" />
|
|
|
|
</div>
|
|
|
|
<p class="app-name">{{langue.name}}</p>
|
|
|
|
<div class="version">
|
|
|
|
<img src="../../img/flame_code.png" alt="" />
|
|
|
|
<p>{{langue.note}}</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="protocol-box">
|
|
|
|
<p>
|
|
|
|
{{langue.name}}</br>
|
|
|
|
Copyright © 2019 Zhixin Corporation.</br>
|
|
|
|
All Rights Reserved.
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
//1、每个页面写自己的国际化语言变量,例子:
|
|
|
|
var langues = {
|
|
|
|
zh_CN: {
|
|
|
|
cancel: '取消',
|
|
|
|
about: '分享App',
|
|
|
|
name: '智信链',
|
|
|
|
note: '扫描二维码即分享',
|
|
|
|
|
|
|
|
},
|
|
|
|
zh_HK: {
|
|
|
|
cancel: '取消',
|
|
|
|
about: '分享App',
|
|
|
|
name: '智信鏈',
|
|
|
|
note: '掃描二維碼即分享',
|
|
|
|
},
|
|
|
|
en_US: {
|
|
|
|
cancel: 'Cancel',
|
|
|
|
about: 'Share',
|
|
|
|
name: 'Zhixin',
|
|
|
|
note: 'Scan QR code to share',
|
|
|
|
}
|
|
|
|
};
|
|
|
|
//2、页面上所有需要国际化的文字,包括提示,都通过Vue去引用,例子:
|
|
|
|
var langueKey = app.getLanguageLocalStorage(); //获取国际化语种
|
|
|
|
var langue = langues[langueKey]; // 获取国际化语种数据
|
|
|
|
var dataInfo = new Vue({
|
|
|
|
el: "#data-info",
|
|
|
|
data: {
|
|
|
|
langue: langue,
|
|
|
|
}
|
|
|
|
});
|
|
|
|
//3、每个页面都需要加上以下的方法:
|
|
|
|
window.addEventListener('switchLangueData', function(e) {
|
|
|
|
//dataInfo为Vue对象的名称
|
|
|
|
dataInfo.langue = langues[e.detail];
|
|
|
|
});
|
|
|
|
</script>
|