share.blade.php 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>分享梦想页</title>
  6. <script src="/base/js/jquery-2.1.1.min.js"></script>
  7. <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  8. <style>
  9. body{
  10. padding: 0;
  11. margin: 0;
  12. }
  13. p{
  14. -webkit-margin-before: 0.1em;
  15. -webkit-margin-after: 0.1em;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <img style="width: 100%; height: 100%;" src="{{!empty($dream->img) ? $dream->img->pic : ''}}
  21. ">
  22. <p style="font-size: 17px; padding: 0 10px">{{$dream->name}}</p>
  23. <div style="border-bottom: 1px solid #DEDEDE">
  24. <p id="about" style="font-size: 13px; padding: 0 10px; color: #919191;white-space: nowrap;overflow:hidden;text-overflow:ellipsis">
  25. {{$dream->about}}
  26. </p>
  27. <p style="text-align: center">
  28. <img src="/base/img/down.svg" alt="" id="down">
  29. <img src="/base/img/up.svg" alt="" id="up">
  30. </p>
  31. </div>
  32. <div style="border-bottom: 1px solid #DEDEDE; height: 50px; padding: 5px 10px;">
  33. <div style="float:left;">
  34. <p>{{$days}}</p>
  35. <p style="font-size: 13px; color: #919191">剩余时间</p>
  36. </div>
  37. <div style="float:right;">
  38. <p style="text-align: right">{{$dream->mark}}</p>
  39. <p style="font-size: 13px;; color: #919191">当前获得梦想分数</p>
  40. </div>
  41. </div>
  42. <div style="clear:both; height: 50px; padding: 5px 10px;">
  43. <div style="float:left;">
  44. <p>{{$dream->get_coin}}</p>
  45. <p style="font-size: 13px; color: #919191">目前已获梦想币</p>
  46. </div>
  47. <div style="float:right;">
  48. <p style="text-align: right">{{$dream->coin}}</p>
  49. <p style="font-size: 13px; color: #919191">我要求的梦想币</p>
  50. </div>
  51. </div>
  52. <div style="padding: 0 10px 20px 10px">
  53. <div style="background-color:#E6E6E6; width: 100%;">
  54. <div style="width: {{($dream->get_coin / $dream->coin)}} %; background: #FF6600; height: 5px">
  55. </div>
  56. </div>
  57. </div>
  58. </body>
  59. </html>
  60. <script>
  61. $(function () {
  62. $('#up').hide();
  63. var str = $('#about').html();
  64. new_str = str.replace(/\n/g,"<br/>");
  65. $('#about').html(new_str);
  66. $('#up').click(function () {
  67. $(this).hide();
  68. $('#down').show();
  69. $('#about').css('white-space','nowrap');
  70. });
  71. $('#down').click(function () {
  72. $(this).hide();
  73. $('#up').show();
  74. $('#about').css('white-space','normal');
  75. });
  76. });
  77. </script>