gesture-setpassword.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>设置手势密码-创业帮</title>
  6. <meta name="keywords" content="设置手势密码-创业帮">
  7. <meta name="description" content="设置手势密码-创业帮">
  8. <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
  9. <meta name="apple-mobile-web-app-capable" content="yes">
  10. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  11. <meta content="telephone=no" name="format-detection">
  12. <meta content="email=no" name="format-detection">
  13. <meta name="apple-mobile-web-app-title" content="设置手势密码-创业帮">
  14. <meta http-equiv="Cache-Control" content="no-siteapp">
  15. <link rel="stylesheet" href="./static/css/main.css">
  16. </head>
  17. <body class="gesture">
  18. <div id="app" v-cloak>
  19. <van-nav-bar class="gesture_password" title="设置手势密码" :right-text="righttitle" @click-right="goindex"></van-nav-bar>
  20. <div class="df cm">
  21. <ul class="df titlelogo">
  22. <li class="df cm" v-for="item in 9" :key="item"><span class="db" :class="item === 1 || item === 4 || item &gt; 6 ? 'bgblue': ''"></span></li>
  23. </ul>
  24. </div>
  25. <div id="inputpassword" @click="goinput"></div>
  26. <div id="comeback" @click="comeback"></div>
  27. <div class="lock"></div>
  28. </div>
  29. <script src="./static/js/klm-vv.min.js"></script>
  30. <script src="./static/js/appfunc.min.js"></script>
  31. <script src="./static/js/klm-axios-config.js"></script>
  32. <script src="./static/js/publicfn.js"></script>
  33. <script src="./static/js/H5lock.js"> </script>
  34. <script>
  35. // 在 #app 标签下渲染一个组件
  36. let app = new Vue({
  37. el: '#app',
  38. data() {
  39. return {
  40. righttitle:'',
  41. userimg:"./static/images/user-img-color@3x.png",
  42. timer:'',
  43. }
  44. },
  45. created(){
  46. if(PublicLib.getCookieInfo('issetting') !== '1') {
  47. this.righttitle = '跳过';
  48. };
  49. },
  50. mounted() {
  51. //- 根据内存中的变量进行判断
  52. if(PublicLib.getCookieInfo('issetting') !== '1') {
  53. //- 初始化手势密码
  54. new H5lock({
  55. //- 单位:px
  56. //- 圆圈个数
  57. chooseType: 3,
  58. //- 连接线宽度
  59. linwidth: 2,
  60. //- 成功的颜色
  61. successcolor: '#2B84FF',
  62. //- 成功的背景色
  63. successbgcolor:'rgba(43, 132, 255, 0.1)',
  64. //- 失败的颜色
  65. wariningcolor:'#FF574D',
  66. //- 失败的背景色
  67. wariningbgcolor:'rgba(255, 87, 77, 0.1)',
  68. //- 初始化小圆点颜色
  69. initcolor:'#eee',
  70. //- 初始化小圆点大小 应该比滑动时小圆点小,不然会漏出来
  71. initr:12,
  72. //- 滑动时内部小圆点大小
  73. inr:12,
  74. //- 滑动时外部大圆点大小
  75. outr:29,
  76. //- 是否跳转到解锁界面
  77. isinput: true,
  78. //- 解锁半径
  79. range:29
  80. }).init();
  81. }else{
  82. //- 个人中心设置手势密码手势密码
  83. new H5lock({
  84. //- 单位:px
  85. //- 圆圈个数
  86. chooseType: 3,
  87. //- 连接线宽度
  88. linwidth: 2,
  89. //- 成功的颜色
  90. successcolor: '#2B84FF',
  91. //- 成功的背景色
  92. successbgcolor:'rgba(43, 132, 255, 0.1)',
  93. //- 失败的颜色
  94. wariningcolor:'#FF574D',
  95. //- 失败的背景色
  96. wariningbgcolor:'rgba(255, 87, 77, 0.1)',
  97. //- 初始化小圆点颜色
  98. initcolor:'#eee',
  99. //- 初始化小圆点大小 应该比滑动时小圆点小,不然会漏出来
  100. initr:12,
  101. //- 滑动时内部小圆点大小
  102. inr:12,
  103. //- 滑动时外部大圆点大小
  104. outr:29,
  105. //- 是否跳转到解锁界面
  106. isinput: false,
  107. //- 解锁半径
  108. range:29
  109. }).init();
  110. }
  111. },
  112. methods: {
  113. goindex(){
  114. PublicLib.GotoMain();
  115. PublicLib.putCookieInfo('step', 'close');
  116. //- PublicLib.Goto({Url:'index'});
  117. },
  118. goinput(){
  119. PublicLib.Goto({Url:'gesture-inputpassword'});
  120. },
  121. comeback(){
  122. //- PublicLib.Goto({Url:'user-setting'});
  123. PublicLib.GoBack({Level:1});
  124. PublicLib.putCookieInfo('issetting', '');
  125. },
  126. },
  127. });
  128. </script>
  129. </body>
  130. </html>