share.blade.php 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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. <h4 style="text-align: center; font-weight: normal; width: 100%; border-bottom: 1px solid #DEDEDE; padding-bottom: 15px">分享梦想页</h4>
  21. <img style="width: 100%; height: 100%;" src="{{!empty($dream->img) ? $dream->img->pic : ''}}
  22. ">
  23. <p style="font-size: 17px; padding: 0 10px">{{$dream->name}}</p>
  24. <div style="border-bottom: 1px solid #DEDEDE">
  25. <p id="about" style="font-size: 13px; padding: 0 10px; color: #919191;white-space: nowrap">
  26. {{--{!! $dream->about !!}--}}
  27. {{str_replace('<br/>','/n',$dream->about)}}
  28. {{--{{mb_substr($dream->about,0,8)}} ...--}}
  29. </p>
  30. <p style="text-align: center">
  31. <img src="/base/img/down.svg" alt="" id="down">
  32. <img src="/base/img/up.svg" alt="" id="up">
  33. </p>
  34. </div>
  35. <div style="border-bottom: 1px solid #DEDEDE; height: 50px; padding: 5px 10px;">
  36. <div style="float:left;">
  37. <p>{{$days}}</p>
  38. <p style="font-size: 13px; color: #919191">剩余时间</p>
  39. </div>
  40. <div style="float:right;">
  41. <p style="text-align: right">{{$dream->mark}}</p>
  42. <p style="font-size: 13px;; color: #919191">当前获得梦想分数</p>
  43. </div>
  44. </div>
  45. <div style="clear:both; height: 50px; padding: 5px 10px;">
  46. <div style="float:left;">
  47. <p>{{$dream->get_coin}}</p>
  48. <p style="font-size: 13px; color: #919191">目前已获梦想币</p>
  49. </div>
  50. <div style="float:right;">
  51. <p style="text-align: right">{{$dream->coin}}</p>
  52. <p style="font-size: 13px; color: #919191">我要求的梦想币</p>
  53. </div>
  54. </div>
  55. <div style="padding: 0 10px">
  56. <div style="background-color:#E6E6E6; width: 100%;">
  57. <div style="width: {{($dream->get_coin / $dream->coin)}} %; background: #FF6600; height: 5px">
  58. </div>
  59. </div>
  60. </div>
  61. </body>
  62. </html>
  63. <script>
  64. $(function () {
  65. $('#up').hide();
  66. var str = $('#about').html();
  67. new_str = str.replace(/\n/g,"<br/>");
  68. $('#about').html(new_str);
  69. $('#up').click(function () {
  70. $(this).hide();
  71. $('#down').show();
  72. $('#about').css('white-space','nowrap');
  73. });
  74. $('#down').click(function () {
  75. $(this).hide();
  76. $('#up').show();
  77. $('#about').css('white-space','normal');
  78. });
  79. });
  80. </script>