index.html 9.4 KB

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