productIntroduce.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. {% load staticfiles %}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
  7. <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
  8. <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
  9. <link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}">
  10. <link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}">
  11. <link rel="stylesheet" href="{% static '/lib/css/viewer.css' %}">
  12. <style>
  13. body{
  14. background: #fff;
  15. }
  16. .borderLine {
  17. border: 1px solid #e8e8e8;
  18. box-shadow: 0px 0px 13px 0px #d9d9d9;
  19. padding: 10px;
  20. border-radius: 5px;
  21. }
  22. .row{
  23. margin: 0;
  24. }
  25. .equipItem{
  26. display: flex;
  27. }
  28. .equipItem >img{
  29. width: 180px;
  30. height: 180px;
  31. cursor: pointer;
  32. }
  33. .equipItem .describe{
  34. min-width: 100px;
  35. padding-left: 10px;
  36. }
  37. .equipItem .describe h3{
  38. font-size: 16px;
  39. font-weight: 700;
  40. letter-spacing: 1px;
  41. color: #585858;
  42. white-space: nowrap;
  43. text-overflow: ellipsis;
  44. overflow: hidden;
  45. cursor: pointer;
  46. }
  47. .equipItem .describe h3:hover,.equipItem .describe .txt:hover{
  48. color: #000;
  49. }
  50. .equipItem .describe .txt{
  51. line-height: 22px;
  52. letter-spacing: 1px;
  53. font-size: 12px;
  54. max-height: 65px;
  55. overflow: hidden;
  56. position: relative;
  57. cursor: pointer;
  58. /* overflow : hidden;
  59. text-overflow: ellipsis;
  60. display: -webkit-box;
  61. -webkit-line-clamp: 2;
  62. -webkit-box-orient: vertical; */
  63. }
  64. .equipItem .describe .txt:after {
  65. position: absolute;
  66. content: "...";
  67. right: 0;
  68. bottom: 0;
  69. background: #fff;
  70. width: 24px;
  71. }
  72. .equipItem .describe button{
  73. position: absolute;
  74. right: 37px;
  75. bottom: 24px;
  76. color: #fff;
  77. background: #5fb5ff;
  78. padding: 5px 10px;
  79. border: none;
  80. border-radius: 3px;
  81. }
  82. .equipItem .describe button:hover{
  83. background: #2589df;
  84. }
  85. </style>
  86. <body>
  87. <div class="content">
  88. <div class="page-header">
  89. <h1>
  90. <font style="vertical-align: inherit;">
  91. <font style="vertical-align: inherit;">
  92. 网上商城
  93. </font>
  94. </font>
  95. </h1>
  96. </div>
  97. <div class="row docs-pictures">
  98. <div class="col-xs-6 col-md-4 col-lg-4 ">
  99. <div class="borderLine equipItem">
  100. <img data-original="{% static '/img/haloIcon4.png' %}" src="{% static '/img/equipImg/wlwcdb.png' %}" alt="1">
  101. <div class="describe">
  102. <h3>物联网虫情测报灯</h3>
  103. <div class="txt">物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯</div>
  104. <button>联系客服</button>
  105. </div>
  106. </div>
  107. </div>
  108. <div class="col-xs-6 col-md-4 col-lg-4 ">
  109. <div class="borderLine equipItem">
  110. <img data-original="{% static '/img/haloIcon4.png' %}" src="{% static '/img/equipImg/bzy.png' %}" alt="">
  111. <div class="describe">
  112. <h3>物联网虫情测报灯</h3>
  113. <div class="txt">物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯物联物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯侧水哦花费说的佛舍凤凰网我违法和违法位分为开了房宏伟哈佛好未发货未of文化佛为哈佛已维护服务 王宏恩菲维护费 我还佛维护费位</div>
  114. <button>联系客服</button>
  115. </div>
  116. </div>
  117. </div>
  118. <div class="col-xs-6 col-md-4 col-lg-4 ">
  119. <div class="borderLine equipItem">
  120. <img data-original="{% static '/img/haloIcon4.png' %}" src="{% static '/img/equipImg/wlwscd.png' %}" alt="">
  121. <div class="describe">
  122. <h3>物联网虫情测报灯</h3>
  123. <div class="txt">物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯物联网虫情测报灯物联网虫情</div>
  124. <button>联系客服</button>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  131. <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
  132. <script src="{% static '/lib/js/viewer.js' %}"></script>
  133. <!-- <script src="{% static '/lib/layui/layui.all.js' %}"></script> -->
  134. <script src="{% static '/js/common.js' %}?versions=0.5.0"></script>
  135. <script>
  136. $.ajaxSetup({
  137. data: {
  138. csrfmiddlewaretoken: '{{ csrf_token }}'
  139. },
  140. });
  141. var $images = $('.docs-pictures');
  142. $images.viewer();
  143. </script>
  144. <script>
  145. </script>
  146. </body>
  147. </html>