about.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>关于</title>
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. <!-- 挂接mui样式 -->
  9. <link href="../css/mui.css" rel="stylesheet" />
  10. <!-- 挂接app样式 -->
  11. <link rel="stylesheet" type="text/css" href="../css/app.css" />
  12. <link rel="stylesheet" type="text/css" href="../css/app.new.css" />
  13. <!-- 引入字体 -->
  14. <link rel="stylesheet" type="text/css" href="../fonts/TTTGB-Medium.css" />
  15. <!-- 引入数字字体 -->
  16. <link rel="stylesheet" type="text/css" href="../fonts/font-time.css" />
  17. <!-- 本页独有样式 -->
  18. <style type="text/css">
  19. /* 内容框架样式 */
  20. .cr-content {
  21. display: flex;
  22. align-items: center;
  23. flex-direction: column;
  24. }
  25. /* App图标容器样式 */
  26. .cr-app-icon-panel {
  27. background-color: rgb(255, 255, 255);
  28. width: 100px;
  29. height: 100px;
  30. border-radius: 50px;
  31. display: flex;
  32. align-items: center;
  33. justify-content: center;
  34. margin-top: 40px;
  35. box-shadow: 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220);
  36. }
  37. /* App图标样式 */
  38. .cr-app-icon-panel>img {
  39. width: 60px;
  40. height: 60px;
  41. }
  42. /* App名称样式 */
  43. .cr-app-name {
  44. font-size: 24px;
  45. font-family: 'TTTGB-Medium';
  46. color: rgb(203, 203, 203);
  47. margin: 20px 0px 30px 0px;
  48. text-shadow: 0 0 2px rgb(255, 255, 255), 0 0 2px rgb(255, 255, 255), 0 0 2px rgb(255, 255, 255), 0 0 2px rgb(255, 255, 255);
  49. text-shadow: 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220), 0 0 3px rgb(115, 185, 220);
  50. }
  51. /* 信息组标题样式 */
  52. .mui-table-view-divider {
  53. line-height: 24px;
  54. font-size: 14px;
  55. padding-left: 5px !important;
  56. }
  57. /* 单元格样式 */
  58. .mui-table-view-cell {
  59. line-height: 15px;
  60. }
  61. /* 行标题样式 */
  62. .mui-table-view-cell>span:nth-child(1) {
  63. font-size: 13px;
  64. color: rgb(69, 69, 69);
  65. }
  66. /* 行内容样式 */
  67. .mui-table-view-cell>span:nth-child(2) {
  68. font-size: 12px;
  69. color: rgb(87, 137, 247);
  70. float: right;
  71. }
  72. </style>
  73. </head>
  74. <body>
  75. <div class="mui-content cr-content">
  76. <div class="cr-app-icon-panel">
  77. <img src="../img/login/icon.png" />
  78. </div>
  79. <span class="cr-app-name"></span>
  80. </div>
  81. <ul class="mui-table-view">
  82. </ul>
  83. </body>
  84. </html>
  85. <!-- 引入mui脚本 -->
  86. <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
  87. <!-- 引入jQuery脚本 -->
  88. <script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
  89. <!-- 引入通用脚本 -->
  90. <script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
  91. <!-- 引入webview脚本 -->
  92. <script src="../js/webview.js" type="text/javascript" charset="utf-8"></script>
  93. <!-- 引入存储脚本 -->
  94. <script src="../js/save.js" type="text/javascript" charset="utf-8"></script>
  95. <!-- 本页独有脚本 -->
  96. <script type="text/javascript">
  97. mui.init();
  98. /* 初始化完成 */
  99. plusInit(function() {
  100. plus.runtime.getProperty(plus.runtime.appid, function(info) {
  101. plus.io.resolveLocalFileSystemURL('_www/manifest.json', function(entry) {
  102. entry.file(function(file) {
  103. var fileReader = new plus.io.FileReader();
  104. fileReader.readAsText(file, 'utf-8');
  105. fileReader.onloadend = function(evt) {
  106. var data = JSON.parse(evt.target.result);
  107. showAbout(info, data);
  108. }
  109. }, function(err) {
  110. printToConsole("读取文件错误:" + JSON.stringify(err));
  111. });
  112. }, function(err) {
  113. printToConsole("获取文件错误:" + JSON.stringify(err));
  114. });
  115. });
  116. })
  117. /**
  118. * 展示关于信息
  119. * @param {JSON} info 通过plus.runtime.getProperty读取的信息
  120. * @param {JSON} data 读取manifest.json的信息
  121. */
  122. function showAbout(info, data) {
  123. var infoHtml = "";
  124. /* 赋值应用名称 */
  125. $('.cr-app-name').html(info.name);
  126. /* 组装相关信息 */
  127. infoHtml += "<li class='mui-table-view-divider'>基本信息</li>";
  128. infoHtml += "<li class='mui-table-view-cell'>";
  129. infoHtml += "<span>应用名称</span>";
  130. infoHtml += "<span>" + info.name + "</span>";
  131. infoHtml += "</li>"
  132. infoHtml += "<li class='mui-table-view-cell'>";
  133. infoHtml += "<span>版本</span>";
  134. infoHtml += "<span>" + info.version + "</span>";
  135. infoHtml += "</li>"
  136. infoHtml += "<li class='mui-table-view-cell'>";
  137. infoHtml += "<span>内部版本</span>";
  138. infoHtml += "<span>" + info.versionCode + "</span>";
  139. infoHtml += "</li>"
  140. infoHtml += "<li class='mui-table-view-divider'>版权信息</li>";
  141. infoHtml += "<li class='mui-table-view-cell'>";
  142. infoHtml += "<span>版权所有</span>";
  143. infoHtml += "<span>" + info.author + "</span>";
  144. infoHtml += "</li>"
  145. infoHtml += "<li class='mui-table-view-cell'>";
  146. infoHtml += "<span>公司网站</span>";
  147. infoHtml += "<span>" + data.developer.url + "</span>";
  148. infoHtml += "</li>"
  149. infoHtml += "<li class='mui-table-view-divider'>技术支持</li>";
  150. infoHtml += "<li class='mui-table-view-cell'>";
  151. infoHtml += "<span>技术支持邮箱</span>";
  152. infoHtml += "<span>" + data.developer.email + "</span>";
  153. infoHtml += "</li>"
  154. infoHtml += "<li class='mui-table-view-cell'>";
  155. infoHtml += "<span>技术支持电话</span>";
  156. infoHtml += "<span>" + data.developer.phone + "</span>";
  157. infoHtml += "</li>"
  158. infoHtml += "<li class='mui-table-view-cell'>";
  159. infoHtml += "<span>办公电话</span>";
  160. infoHtml += "<span>" + data.developer.tel + "</span>";
  161. infoHtml += "</li>"
  162. /* 展示信息 */
  163. $('.mui-table-view').html(infoHtml);
  164. }
  165. </script>