index.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script src="../../js/jquery-1.9.1.min.js"></script>
  7. <script src="../../js/jquery.i18n.properties.js"></script>
  8. <script src="../../assets/js/language.js"></script>
  9. <link rel="stylesheet" type="text/css" href="../../css/viewer.min.css" rel="stylesheet">
  10. <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" rel="stylesheet">
  11. <link rel="stylesheet" type="text/css" href="../../assets/plugin/bootstrap-select/css/bootstrap-select.css" />
  12. <style>
  13. .top {
  14. padding: 10px 50px 0px 50px;
  15. border-bottom: 1px solid #e8e8e8;
  16. display: flex;
  17. flex-flow: row nowrap;
  18. justify-content: space-between;
  19. align-items: center;
  20. height: 80px;
  21. box-sizing: border-box;
  22. font-family: Avenir-Black;
  23. }
  24. .top-item {
  25. padding: 0px 20px;
  26. line-height: 70px;
  27. font-weight: bold;
  28. cursor: pointer;
  29. }
  30. .top-item-active {
  31. border-bottom: 3px solid #f83d5a;
  32. color: #f83d5a;
  33. }
  34. .us-name-item {
  35. width: 160px;
  36. }
  37. .tool-box {
  38. padding: 5px 50px 20px 50px;
  39. border-bottom: 1px solid #f2f2f2;
  40. }
  41. .newest-list,
  42. .search-list {
  43. display: flex;
  44. flex-flow: row nowrap;
  45. justify-content: flex-start;
  46. align-items: center;
  47. /* height: 40px; */
  48. box-sizing: border-box;
  49. font-family: Arial;
  50. }
  51. .newest-list .newest-item {
  52. margin: 0px 40px 0px 0px;
  53. color: #999;
  54. cursor: pointer;
  55. white-space: nowrap;
  56. }
  57. .newest-list .newest-item .query {
  58. font-size: 16px;
  59. }
  60. .search-list .search-item {
  61. margin-right: 10px;
  62. }
  63. .search-list .search-item label {
  64. display: block;
  65. }
  66. .dropdown button {
  67. display: flex;
  68. flex-flow: row nowrap;
  69. justify-content: flex-start;
  70. align-items: center;
  71. }
  72. .project-box {
  73. padding: 25px 35px 20px 35px;
  74. }
  75. .bootstrap-select>.dropdown-toggle {
  76. padding-top: 10px;
  77. padding-bottom: 10px;
  78. padding-right: 32px;
  79. }
  80. .search-list .search-item .sel-icon,.newest-list .sel-icon{
  81. position: absolute;
  82. top: 50%;
  83. right: 10px;
  84. margin-top: -7px;
  85. vertical-align: middle;
  86. }
  87. .my-select {
  88. width: 280px !important;
  89. }
  90. .thumbnail {
  91. border: 0;
  92. }
  93. #project-photo-row {
  94. -webkit-column-width: 242px;
  95. /*Safari and Chrome*/
  96. -moz-column-width: 242px;
  97. /*Firefox*/
  98. -o-column-width: 242px;
  99. /*Opera*/
  100. -ms-column-width: 242px;
  101. /*IE*/
  102. column-width: 242px;
  103. }
  104. #project-photo-row>div {
  105. width: 242px;
  106. /*宽度根据实际情况调节,应与上面一致*/
  107. overflow: auto;
  108. /*防止内容溢出导致布局错位*/
  109. }
  110. </style>
  111. </head>
  112. <body>
  113. <div id="head"></div>
  114. <script>
  115. $(function() {
  116. $("#head").load("../head.html", function() {
  117. $("#common-navbar-head .active").removeClass("active")
  118. $("#common-navbar-head .head_li_Moments").addClass("active")
  119. });
  120. })
  121. </script>
  122. <main class="jpmain">
  123. <div class="container-fluid" style="padding:0;">
  124. <div class="tool-box">
  125. <div class="search-list" >
  126. <style>
  127. .newest-list-pro {
  128. display: flex;
  129. overflow: hidden;
  130. }
  131. .newest-item-x {
  132. /* display: none; */
  133. position: relative;
  134. top: -5px;
  135. margin-left: 5px;
  136. font-size: 5px;
  137. }
  138. .newest-item:hover .newest-item-x{
  139. display: inline-flex;
  140. }
  141. </style>
  142. <div class="newest-list" style="flex:1;">
  143. <!-- <div class="newest-item i18n-text" i18n="landingpage_Newest"
  144. style="color:#000000;font-weight: bold;cursor: default;">Newest</div>
  145. -->
  146. <div style="margin-right:15px;">
  147. <select class="selectpicker filter-menu" data-width="100px" id="filter-select">
  148. <option class="i18n-text" i18n="landingpage_filter_newest">Newest</option>
  149. <option class="i18n-text" i18n="landingpage_filter_popular">Popular</option>
  150. <option class="i18n-text" i18n="landingpage_filter_clicked">Clicked</option>
  151. </select>
  152. </div>
  153. <div class="newest-list-pro ">
  154. </div>
  155. <!-- <div style="flex:1;"></div> -->
  156. <div class="newest-item more-arrow" style=" margin: 0px 20px;width:20px;text-align: center;">
  157. <img src="../../assets/img/landing_right_arrow.png" style="display:none;">
  158. </div>
  159. </div>
  160. <div class="search-item">
  161. <div class="input-group">
  162. <input type="text" class="form-control i18n-placeholder landingpage_search" data-toggle="dropdown"
  163. i18n="landingpage_search" placeholder="" aria-describedby="basic-addon2" style="height:42px; width: 220px;">
  164. <span class="input-group-addon" style="
  165. padding: 0px;
  166. " id="basic-addon2">
  167. <button type="button" class="querybtn" style=" width: 50px;
  168. height: 40px; border: 0;">
  169. <i class="glyphicon glyphicon-search query"></i>
  170. </button>
  171. </span>
  172. <style>
  173. .filterstyle{
  174. padding: 20px;
  175. width: 460px;
  176. }
  177. .filterstyle span{
  178. padding: 10px;
  179. display: block;
  180. overflow-wrap: break-word;
  181. color: rgba(24, 24, 24, 1);
  182. font-size: 14px;
  183. font-family: Avenir-Roman;
  184. white-space: nowrap;
  185. line-height: 19px;
  186. text-align: left;
  187. }
  188. .filterstyle button{
  189. margin: 5px;
  190. padding: 5px 16px;
  191. font-size: 14px;
  192. color: rgba(130, 130, 130, 1);
  193. }
  194. </style>
  195. <ul class="dropdown-menu dropdown-menu-right filter-menu filterstyle" aria-labelledby="dropdownMenu1">
  196. <li>
  197. <span class="i18n-text" i18n="landingpage_Resent searches">Resent searches</span>
  198. <div class="resentlist">
  199. </div>
  200. </li>
  201. <li>
  202. <span class="i18n-text" i18n="landingpage_Trending searches">Trending searches</span>
  203. <div class="trendinglist">
  204. </div>
  205. </li>
  206. </ul>
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. <div class="row-fluid jpcontainer">
  212. <div class="span12">
  213. <style>
  214. .filter-menu .dropdown-toggle{
  215. border:0px !important;
  216. outline: 0px !important;
  217. background-color: #ffffff !important;
  218. }
  219. .filter-menu .dropdown-toggle:focus{
  220. outline: 0px !important;
  221. }
  222. .main4{
  223. width: 100%;
  224. height: 8px;
  225. background-color: rgba(239, 241, 244, 1);
  226. margin-top: 51px;
  227. }
  228. .imguploadspan img {
  229. width: 33%;
  230. max-width: 270px;
  231. max-height: 270px;
  232. border: 0px;
  233. border-radius: 5px;
  234. margin-top: 3px;
  235. min-width: 50px;
  236. }
  237. .Follow {
  238. margin-top: 25px;
  239. float: right;
  240. border: 0px;
  241. height: 48px;
  242. border-radius: 8px;
  243. background-color: rgba(239, 241, 244, 1);
  244. width: 90px;
  245. overflow-wrap: break-word;
  246. color: rgba(24, 24, 24, 1);
  247. ;
  248. font-size: 16px;
  249. font-family: Avenir-Medium;
  250. white-space: nowrap;
  251. line-height: 22px;
  252. text-align: center;
  253. }
  254. .Following {
  255. background-color: rgba(248, 61, 90, 1);
  256. color: rgba(255, 255, 255, 1);
  257. }
  258. .title{
  259. overflow-wrap: break-word;
  260. color: rgba(24, 24, 24, 1);
  261. font-size: 28px;
  262. font-family: Avenir-Black;
  263. white-space: nowrap;
  264. line-height: 28px;
  265. text-align: left;
  266. }
  267. .date{
  268. overflow-wrap: break-word;
  269. color: rgba(130, 130, 130, 1);
  270. font-size: 16px;
  271. font-family: Avenir-Medium;
  272. white-space: nowrap;
  273. line-height: 22px;
  274. text-align: left;
  275. }
  276. .txt{
  277. overflow-wrap: break-word;
  278. color: rgba(24, 24, 24, 1);
  279. font-size: 16px;
  280. font-family: Avenir-Roman;
  281. line-height: 22px;
  282. text-align: left;
  283. overflow: hidden;
  284. text-overflow: ellipsis;
  285. }
  286. </style>
  287. <div class="imguploadlist">
  288. </div>
  289. </div>
  290. </div>
  291. </div>
  292. <script src="../../js/bootstrap.min.js"></script>
  293. <script src="../../assets/js/moments.js"></script>
  294. <script src="../../assets/plugin/template-web.js"></script>
  295. <script id="flow-photos" type="text/html" >
  296. {{each objs obj index}}
  297. <dd >
  298. <div class="span12 " style="margin: 30px 0; overflow-wrap: break-word;
  299. color: rgba(24, 24, 24, 1);
  300. font-size: 18px;
  301. font-family: PingFangSC-Medium;
  302. white-space: nowrap;">
  303. <img src="{{obj.logo}}" style="width: 60px;height: 60px;" >
  304. {{obj.name}}
  305. <button type="button" style=" {{obj.isfollow?'display: none;':''}}" i18n="head_Following" class="Follow Following i18n-text">Following</button>
  306. <button type="button" style=" {{!obj.isfollow?'display: none;':''}}" i18n="head_Follow" class="Follow Following2 i18n-text">Follow</button>
  307. </div>
  308. <div class="span12 title" style="margin: 10px 0; ">
  309. {{obj.title}}
  310. </div>
  311. <div class="span12 date" style="margin: 10px 0;">
  312. {{obj.date}}
  313. </div>
  314. <div class="span12 txt " style="margin: 10px 0;">
  315. {{obj.txt}}
  316. </div>
  317. <div class="span12 imguploadspan" style="margin: 20px 0;">
  318. {{each obj.list ob index2}}
  319. <img data-original="{{ob}}"
  320. src="{{ob}}">
  321. {{/each}}
  322. </div>
  323. <div class="span12 " style="margin: 0;">
  324. <div class="main4 "></div>
  325. </div>
  326. </dd>
  327. {{/each}}
  328. </script>
  329. <script src="../../assets/plugin/bootstrap-select/js/bootstrap-select.js"></script>
  330. <script src="../../js/viewer-jquery.min.js"></script>
  331. </main>
  332. </body>
  333. </html>