index.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
  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. <style>
  126. .newest-list-pro {
  127. display: flex;
  128. overflow: hidden;
  129. }
  130. .newest-item-x {
  131. /* display: none; */
  132. position: relative;
  133. top: -5px;
  134. margin-left: 5px;
  135. font-size: 5px;
  136. }
  137. .newest-item:hover .newest-item-x{
  138. display: inline-flex;
  139. }
  140. </style>
  141. <div class="newest-list" style="flex:1;">
  142. <!-- <div class="newest-item i18n-text" i18n="landingpage_Newest"
  143. style="color:#000000;font-weight: bold;cursor: default;">Newest</div>
  144. -->
  145. <div style="margin-right:15px;">
  146. <select class="selectpicker filter-menu" data-width="100px" id="filter-select">
  147. <option class="i18n-text" i18n="landingpage_filter_newest">Newest</option>
  148. <option class="i18n-text" i18n="landingpage_filter_popular">Popular</option>
  149. <option class="i18n-text" i18n="landingpage_filter_clicked">Clicked</option>
  150. </select>
  151. </div>
  152. <div class="newest-list-pro ">
  153. </div>
  154. <div style="flex:1;"></div>
  155. <div class="newest-item more-arrow" style=" margin: 0px 20px;width:280px;text-align: center;">
  156. <div class="search-list" >
  157. <div class="search-item">
  158. <div class="input-group">
  159. <input type="text" class="form-control i18n-placeholder landingpage_search" data-toggle="dropdown"
  160. i18n="landingpage_search" placeholder="" aria-describedby="basic-addon2" style="height:42px; width: 220px;">
  161. <span class="input-group-addon" style="
  162. padding: 0px;
  163. " id="basic-addon2">
  164. <button type="button" class="querybtn" style=" width: 50px;
  165. height: 40px; border: 0;">
  166. <i class="glyphicon glyphicon-search query"></i>
  167. </button>
  168. </span>
  169. <style>
  170. .filterstyle{
  171. padding: 20px;
  172. width: 460px;
  173. }
  174. .filterstyle span{
  175. padding: 10px;
  176. display: block;
  177. overflow-wrap: break-word;
  178. color: rgba(24, 24, 24, 1);
  179. font-size: 14px;
  180. font-family: Avenir-Roman;
  181. white-space: nowrap;
  182. line-height: 19px;
  183. text-align: left;
  184. }
  185. .filterstyle button{
  186. margin: 5px;
  187. padding: 5px 16px;
  188. font-size: 14px;
  189. color: rgba(130, 130, 130, 1);
  190. }
  191. </style>
  192. <ul class="dropdown-menu dropdown-menu-right filter-menu filterstyle" aria-labelledby="dropdownMenu1">
  193. <li>
  194. <span class="i18n-text" i18n="landingpage_Resent searches">Resent searches</span>
  195. <div class="resentlist">
  196. </div>
  197. </li>
  198. <li>
  199. <span class="i18n-text" i18n="landingpage_Trending searches">Trending searches</span>
  200. <div class="trendinglist">
  201. </div>
  202. </li>
  203. </ul>
  204. </div>
  205. </div>
  206. </div>
  207. </div>
  208. </div>
  209. </div>
  210. <div class="row-fluid jpcontainer">
  211. <div class="span12">
  212. <style>
  213. .filter-menu .dropdown-toggle{
  214. border:0px !important;
  215. outline: 0px !important;
  216. background-color: #ffffff !important;
  217. }
  218. .filter-menu .dropdown-toggle:focus{
  219. outline: 0px !important;
  220. }
  221. .main4{
  222. width: 100%;
  223. height: 8px;
  224. background-color: rgba(239, 241, 244, 1);
  225. margin-top: 51px;
  226. }
  227. .imguploadspan img {
  228. width: 33%;
  229. max-width: 270px;
  230. max-height: 270px;
  231. border: 0px;
  232. border-radius: 5px;
  233. margin-top: 3px;
  234. min-width: 50px;
  235. }
  236. .Follow {
  237. margin-top: 25px;
  238. float: right;
  239. border: 0px;
  240. height: 48px;
  241. border-radius: 8px;
  242. background-color: rgba(239, 241, 244, 1);
  243. width: 90px;
  244. overflow-wrap: break-word;
  245. color: rgba(24, 24, 24, 1);
  246. ;
  247. font-size: 16px;
  248. font-family: Avenir-Medium;
  249. white-space: nowrap;
  250. line-height: 22px;
  251. text-align: center;
  252. }
  253. .Following {
  254. background-color: rgba(248, 61, 90, 1);
  255. color: rgba(255, 255, 255, 1);
  256. }
  257. .title{
  258. overflow-wrap: break-word;
  259. color: rgba(24, 24, 24, 1);
  260. font-size: 28px;
  261. font-family: Avenir-Black;
  262. white-space: nowrap;
  263. line-height: 28px;
  264. text-align: left;
  265. }
  266. .date{
  267. overflow-wrap: break-word;
  268. color: rgba(130, 130, 130, 1);
  269. font-size: 16px;
  270. font-family: Avenir-Medium;
  271. white-space: nowrap;
  272. line-height: 22px;
  273. text-align: left;
  274. }
  275. .txt{
  276. overflow-wrap: break-word;
  277. color: rgba(24, 24, 24, 1);
  278. font-size: 16px;
  279. font-family: Avenir-Roman;
  280. line-height: 22px;
  281. text-align: left;
  282. overflow: hidden;
  283. text-overflow: ellipsis;
  284. }
  285. </style>
  286. <div class="imguploadlist">
  287. </div>
  288. </div>
  289. </div>
  290. </div>
  291. <script src="../../js/bootstrap.min.js"></script>
  292. <script src="../../assets/js/moments.js"></script>
  293. <script src="../../assets/plugin/template-web.js"></script>
  294. <script id="flow-photos" type="text/html" >
  295. {{each objs obj index}}
  296. <dd >
  297. <div class="span12 " style="margin: 30px 0; overflow-wrap: break-word;
  298. color: rgba(24, 24, 24, 1);
  299. font-size: 18px;
  300. font-family: PingFangSC-Medium;
  301. white-space: nowrap;">
  302. <img src="{{obj.logo}}" style="width: 60px;height: 60px;" >
  303. {{obj.name}}
  304. <button type="button" style=" {{obj.isfollow?'display: none;':''}}" i18n="head_Following" class="Follow Following i18n-text">Following</button>
  305. <button type="button" style=" {{!obj.isfollow?'display: none;':''}}" i18n="head_Follow" class="Follow Following2 i18n-text">Follow</button>
  306. </div>
  307. <div class="span12 title" style="margin: 10px 0; ">
  308. {{obj.title}}
  309. </div>
  310. <div class="span12 date" style="margin: 10px 0;">
  311. {{obj.date}}
  312. </div>
  313. <div class="span12 txt " style="margin: 10px 0;">
  314. {{obj.txt}}
  315. </div>
  316. <div class="span12 imguploadspan" style="margin: 20px 0;">
  317. {{each obj.list ob index2}}
  318. <img data-original="{{ob}}"
  319. src="{{ob}}">
  320. {{/each}}
  321. </div>
  322. <div class="span12 " style="margin: 0;">
  323. <div class="main4 "></div>
  324. </div>
  325. </dd>
  326. {{/each}}
  327. </script>
  328. <script src="../../assets/plugin/bootstrap-select/js/bootstrap-select.js"></script>
  329. <script src="../../js/viewer-jquery.min.js"></script>
  330. </main>
  331. </body>
  332. </html>