contact.html 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>系统设置</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link href="../../css/mui.min.css" rel="stylesheet" />
  8. <link href="../../css/animate.min.css" rel="stylesheet" />
  9. <link href="../../css/iconfont.css" rel="stylesheet" />
  10. <style>
  11. .mui-content{margin-top: 54px;}
  12. .mui-table-view-cell>a:not(.mui-btn){color: darkgray;}
  13. .mui-table-view-cell{padding: 13px;text-align: left;border-bottom: 1px solid #e7e7e7;font-size: 15px;}
  14. .mui-table-view-cell:last-child{border: 0px;}
  15. .mui-table-view-cell{border-bottom: 1px solid #efefef;}
  16. .mui-table-view:before{background-color: rgba(200, 199, 204, 0);}
  17. .mui-table-view:after{background-color: rgba(200, 199, 204, 0);}
  18. .mui-table-view-cell:after{background-color: rgba(200, 199, 204, 0);}
  19. .mui-pull-right{margin-right: 20px;font-size: 14px;}
  20. .bg{padding: 15px;text-align: center;}
  21. .m_box {padding: 10px 10px 10px 10px;margin-top: -20px;box-shadow: 0 1px 6px #dbdbdb;}
  22. .icon{margin-right: 8px;font-size: 20px;font-weight: bold;}
  23. </style>
  24. </head>
  25. <body>
  26. <header class="mui-bar mui-bar-nav">
  27. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  28. <h1 class="mui-title">客服</h1>
  29. </header>
  30. <div class="mui-content bg animated fadeInUp" id="app">
  31. <div class="m_box">
  32. <ul class="mui-table-view">
  33. <li class="mui-table-view-cell" style="margin-top: -10px;">
  34. <a class="mui-navigate-right" @click="op(1)">
  35. <span class="mui-pull-right">{{qq}}</span>
  36. <i class="icon iconfont icon-qq_out_" style="color: #FF5722;"></i>官方QQ</a>
  37. </li>
  38. <li class="mui-table-view-cell">
  39. <a class="mui-navigate-right" @click="op(2)">
  40. <span class="mui-pull-right">{{group}}</span>
  41. <i class="icon iconfont icon-QQqun" style="color:#FF5722;"></i>官方QQ群</a>
  42. </li>
  43. <li class="mui-table-view-cell" style="margin-bottom: -10px;">
  44. <a class="mui-navigate-right" :href=" 'tel:'+phone">
  45. <span class="mui-pull-right">{{phone}}</span>
  46. <i class="icon iconfont icon-shoujihao" style="color: #607D8B;"></i>客服电话</a>
  47. </li>
  48. </ul>
  49. </div>
  50. </div>
  51. <script src="../../js/mui.min.js"></script>
  52. <script src="../../js/app.js"></script>
  53. <script src="../../js/vue.min.js"></script>
  54. <script type="text/javascript">
  55. //操作
  56. mui.plusReady(function() {
  57. var vm = new Vue({
  58. el: "#app",
  59. data:{
  60. phone:getConstant().phone,
  61. qq:getConstant().qq,
  62. group:getConstant().group
  63. },
  64. methods: {
  65. op: function(flag) {
  66. switch(flag) {
  67. case 1:
  68. callqq(vm.qq);
  69. break;
  70. case 2:
  71. mui.toast("已复制,请打开qq搜索添加群");
  72. copy(vm.group);
  73. break;
  74. }
  75. }
  76. }
  77. })
  78. })
  79. </script>
  80. </body>
  81. </html>