You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

135 lines
3.3 KiB

<!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];
});
5 years ago
</script>