modul.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <title>title</title>
  7. <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  8. <style>
  9. html,body{
  10. background: transparent;
  11. -webkit-touch-callout: none;
  12. font-family: Tahoma, Geneva, sans-serif;
  13. font-style: normal;
  14. margin: 0;
  15. }
  16. #dialog{
  17. background-color: #fff;
  18. position: absolute; margin: auto;
  19. left: 0; right: 0; top: -150px; bottom: 0;
  20. width: 260px; height: 260px;
  21. opacity: 0;
  22. text-align: center;
  23. padding: 20px 0;
  24. box-sizing: border-box;
  25. -webkit-border-radius: 5px;
  26. border-radius: 5px;
  27. }
  28. #dialog.in{
  29. opacity: 1;
  30. }
  31. .name{
  32. font-size: 25px;
  33. color: #000;
  34. /*font-weight: bold;*/
  35. }
  36. .head{
  37. width: 90px;
  38. height: 90px;
  39. background: url("../../image/header.png") no-repeat;
  40. background-size: cover;
  41. border-radius: 50%;
  42. }
  43. .del{
  44. color: #bdc3c7;
  45. font-size: 16px;
  46. margin: 15px 0;
  47. }
  48. .phone{
  49. font-size: 20px;
  50. }
  51. .call_phone{
  52. position: absolute;
  53. bottom: -30px;
  54. left: 100px;
  55. width: 60px;
  56. height: 60px;
  57. background: url("../../image/mobile_icon.png") no-repeat;
  58. background-size: cover;
  59. border-radius: 50%;z-index: 100;
  60. }
  61. .close{
  62. position: absolute;
  63. top: -8px;
  64. right: -8px;
  65. width: 30px;
  66. height: 30px;
  67. background: url("../../image/close.png") no-repeat;
  68. background-size: cover;
  69. background-position: center;
  70. border-radius: 50%;
  71. z-index: 100;
  72. }
  73. </style>
  74. </head>
  75. <body>
  76. <div id="dialog">
  77. <span class="head"></span>
  78. <p class="name"></p>
  79. <p class="del"></p>
  80. <p class="phone"></p>
  81. <span class="call_phone" tapmode onclick="call_phone()"></span>
  82. <span class="close" tapmode onclick="api.closeFrame()"></span>
  83. </div>
  84. </body>
  85. <script type="text/javascript" src="../../script/api.js"></script>
  86. <script type="text/javascript" src="../../script/config.js"></script>
  87. <script type="text/javascript">
  88. $api.addCls(dialog,'in');
  89. apiready = function(){
  90. api.parseTapmode();
  91. $api.html($api.dom('.name'), api.pageParam.username);
  92. $api.html($api.dom('.del'), String(api.pageParam.delp) == 'null'?'无':api.pageParam.delp);
  93. $api.html($api.dom('.phone'), String(api.pageParam.mobile) == 'null'?'无':api.pageParam.mobile);
  94. if (String(api.pageParam.avatar) == 'null') {
  95. $api.css($api.dom('.head'), 'background:url(http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png) no-repeat;background-size:cover');
  96. }else {
  97. $api.css($api.dom('.head'), 'background:url('+api.pageParam.avatar+') no-repeat;background-size:cover');
  98. }
  99. };
  100. function call_phone() {
  101. if ($api.html($api.dom('.phone')) == "无") {
  102. api.alert({
  103. title: '提示',
  104. msg: '暂无手机号',
  105. });
  106. }else {
  107. api.call({
  108. type: 'tel_prompt',
  109. number: $api.html($api.dom('.phone'))
  110. });
  111. }
  112. }
  113. </script>
  114. </html>