userLP3.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  5. <meta charset="utf-8">
  6. <meta name="renderer" content="webkit">
  7. <meta name="apple-mobile-web-app-capable" content="yes" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  9. <title></title>
  10. <style type="text/css">
  11. div{
  12. -webkit-box-sizing: border-box;
  13. -moz-box-sizing: border-box;
  14. -o-box-sizing: border-box;
  15. box-sizing: border-box;
  16. }
  17. body{padding: 0px;margin: 0px;}
  18. .mask{
  19. margin: 0;
  20. padding: 0;
  21. width: 100%;
  22. height: 100%;
  23. position: fixed;
  24. _position: absolute;
  25. left: 0;
  26. top: 0;
  27. bottom: 0;
  28. right: 0;
  29. opacity: 0.4;
  30. filter: Alpha(opacity=40);
  31. display: block;
  32. background: #000;
  33. z-index: -1;
  34. }
  35. .pop{
  36. width: 100%;
  37. height: auto;
  38. margin: 0 auto;
  39. position: relative;
  40. border-radius: 6px;
  41. background-color: #fff;
  42. }
  43. .pop .logo{text-align: center; padding:6px 0px 0px;}
  44. .pop .logo img{width: 130px;}
  45. .pop .content{
  46. text-align: center;
  47. padding: 10px;
  48. color: #47aef9;
  49. }
  50. .close_btn{
  51. display: block;
  52. border-radius: 25px;
  53. width: 22px;
  54. height: 22px;
  55. position: absolute;
  56. top: 0px;
  57. right: 0px;
  58. margin-left: -20px;
  59. line-height: 40px;
  60. text-align: center;
  61. color: #fff;
  62. font-size: 30px;
  63. font-family: 'Arial';
  64. background: url(<%=public_path%>img/man/userLP3/clase_btn.png) no-repeat center center;
  65. background-size: 50% 50%;
  66. }
  67. .banner_img{
  68. width: 100%;
  69. height:auto;
  70. position: relative;
  71. overflow: hidden;
  72. border-radius: 6px 6px 0px 0px;
  73. }
  74. .banner_img img{width: 100%;height: auto; display: block;}
  75. .title{
  76. font-size: 24px;
  77. margin-top: 5px;
  78. }
  79. .desc{
  80. font-size: 14px;
  81. }
  82. .word{
  83. color: #333;
  84. font-size: 14px;
  85. padding-top: 8px;
  86. font-weight: bold;
  87. }
  88. .word span{
  89. color: #ff6600;
  90. display: inline-block;
  91. }
  92. .banner_btn{
  93. font-size: 18px;
  94. color: #000;
  95. border-radius: 6px;
  96. margin-top: 18px;
  97. margin-bottom:15px;
  98. background-image: -moz-linear-gradient( 12deg, rgb(250,222,100) 0%, rgb(253,164,75) 100%);
  99. background-image: -webkit-linear-gradient( 12deg, rgb(250,222,100) 0%, rgb(253,164,75) 100%);
  100. background-image: -ms-linear-gradient( 12deg, rgb(250,222,100) 0%, rgb(253,164,75) 100%);
  101. box-shadow: 0px 4px 8.4px 1.6px rgba(107, 49, 150, 0.34);
  102. overflow: hidden;
  103. text-decoration: none;
  104. line-height: 2.4;
  105. display: inline-block;
  106. width: 60%;
  107. max-width: 200px;
  108. }
  109. @media only screen and (max-width : 320px){
  110. .title{font-size: 20px;}
  111. }
  112. </style>
  113. </head>
  114. <body>
  115. <div id="pop" class="pop">
  116. <div class="banner_img">
  117. <img src="<%=public_path%>img/man/userLP3/banner_bg1.jpg">
  118. </div>
  119. <div class="content">
  120. <div class="logo"><img src="<%=public_path%>img/man/userLP3/cd_logo.png"></div>
  121. <%if(vouchers > 0){%>
  122. <div class="word">Congratulations! You have got a <span>Gift Packages</span> and <span><%=vouchers%></span> free vouchers! Please check your backpack for more details.</div>
  123. <%}%>
  124. <a class="banner_btn" href="qpidnetwork://app/open?service=live&module=main&listtype=1">Enjoy Now</a>
  125. </div>
  126. <a class="close_btn" href="qpidnetwork://app/closewindow"></a>
  127. </div>
  128. </body>
  129. </html>