problem_detail.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. {% extends "base.html" %}
  2. {% block headcss %}
  3. {% load staticfiles %}
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7. <meta charset="utf-8" />
  8. <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
  9. <style type="text/css">
  10. body{
  11. overflow: hidden;
  12. }
  13. .problemItem{
  14. position: relative;
  15. padding-bottom: 10px;
  16. line-height: 24px;
  17. }
  18. .userHeadImg{
  19. width: 4%;
  20. }
  21. .userHeadImg img{
  22. width: 50px;
  23. height: 50px;
  24. border-radius: 50%;
  25. }
  26. .userProblemMsg{
  27. width: 94%;
  28. margin-top: 13px;
  29. font-size: 14px;
  30. }
  31. .userMsg,.respond{
  32. color: #999;
  33. position: relative;
  34. }
  35. .userMsg::before{
  36. content: '';
  37. border-top: 1px solid #999;
  38. position: absolute;
  39. left: 50px;
  40. top: 10px;
  41. right: 110px;
  42. }
  43. .problemTitl{
  44. font-size: 20px;
  45. color: #302e2e;
  46. line-height: 36px;
  47. }
  48. .problemDetial{
  49. width: 85%;
  50. overflow: hidden;
  51. white-space: nowrap;
  52. text-overflow: ellipsis;
  53. }
  54. .lookAll{
  55. position: absolute;
  56. right: 26px;
  57. bottom: 2px;
  58. }
  59. .lookAll:hover{
  60. color: #4C8FBD;
  61. }
  62. #addDetial{
  63. margin: 0px;
  64. width: 450px;
  65. height: 60px;
  66. resize: none;
  67. padding: 6px;
  68. }
  69. #addTitle{
  70. width: 450px;
  71. }
  72. .addQuestion{
  73. padding: 10px 20px;
  74. }
  75. .searchBtn{
  76. margin-bottom: 10px;
  77. }
  78. #addQuestion{
  79. display: none;
  80. }
  81. .commentParent{
  82. margin: 3px 50px;
  83. background: #eee;
  84. padding-bottom: 10px;
  85. }
  86. </style>
  87. </head>
  88. <body>
  89. <div class="content">
  90. <div id="content-header">
  91. <h1 class="tb-fpsb" style="display: inline-block;">帮助中心</h1>
  92. <span id="">
  93. > 问题反馈
  94. </span>
  95. <a class="refresh" onclick="addQuestion()" href="javascript:;" style="float: right;"><i class="add"><img src="{% static '/img/addicon.png' %}" alt="" width="28"></i>我要评论&nbsp;&nbsp; </a>
  96. </div>
  97. <div class="user-manage-top">
  98. <!-- 问题列表 -->
  99. <div class="problemList">
  100. <ul>
  101. <li class="problemItem clearfix">
  102. <div class="fl userHeadImg">
  103. <img src="{% static '/img/addicon.png' %}" alt="">
  104. </div>
  105. <div class="fl userProblemMsg">
  106. <div class="userMsg">
  107. <span class="userName"><a href=""></a>用户名</span>
  108. <span class="publishTime fr">2017-10-05发布</span>
  109. </div>
  110. <div class="problemTitl">标题</div>
  111. <div class="respond">
  112. <i class="fa fa-check" aria-hidden="true"></i>已回答
  113. <!-- <i class="fa fa-question-circle-o fa-lg"></i>未回答 -->
  114. </div>
  115. <div class="problemDetialBox">
  116. 问题详情:<span>问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题</span>
  117. </div>
  118. </div>
  119. </li>
  120. <!-- 评论 -->
  121. <li class="problemItem">
  122. <div class="commentParent clearfix">
  123. <div class="fl userHeadImg">
  124. <img src="{% static '/img/addicon.png' %}" alt="">
  125. </div>
  126. <div class="fl userProblemMsg">
  127. <div class="">
  128. <span class="userName"><a href=""></a>用户名</span>
  129. <span class="publishTime">2017-10-05发布</span>
  130. </div>
  131. <div class="problemDetialBox">
  132. <span>问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题</span>
  133. </div>
  134. </div>
  135. </div>
  136. </li>
  137. <li class="problemItem">
  138. <div class="commentParent clearfix">
  139. <div class="fl userHeadImg">
  140. <img src="{% static '/img/addicon.png' %}" alt="">
  141. </div>
  142. <div class="fl userProblemMsg">
  143. <div class="">
  144. <span class="userName"><a href=""></a>用户名</span>
  145. <span class="publishTime">2017-10-05发布</span>
  146. </div>
  147. <div class="problemDetialBox">
  148. <span>问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题</span>
  149. </div>
  150. </div>
  151. </div>
  152. </li>
  153. </ul>
  154. </div>
  155. </div>
  156. </div>
  157. <!-- 我要提问 -->
  158. <div id="addQuestion">
  159. <form id="addQuestionForm" action="" method="post">
  160. <div class="addQuestion">
  161. <div>评&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;论:
  162. <textarea name="addDetial" id="addDetial" maxlength="200" placeholder="请输入评论"></textarea>
  163. </div>
  164. </div>
  165. </form>
  166. </div>
  167. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  168. <script src="{% static '/lib/layui/layui.all.js' %}"></script>
  169. <script type="text/javascript">
  170. $.ajaxSetup({
  171. data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
  172. });
  173. </script>
  174. <script src="{% static '/js/helpcenter/problem_detail.js' %}?versions=0.5.4"></script>
  175. </body>
  176. </html>
  177. {% endblock headcss %}