邓淳远、崔鹏宇、翁思扬组云计算期末项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

436 lines
28 KiB

4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta http-equiv="Content-Language" content="en">
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  9. <title>广场</title>
  10. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
  11. <meta name="description" content="Huge selection of charts created with the React ChartJS Plugin">
  12. <meta name="msapplication-tap-highlight" content="no">
  13. <link href="../static/css/charts.css" rel="stylesheet">
  14. <link href="../static/css/main.css" rel="stylesheet">
  15. <script src="../static/js/ip.js"></script>
  16. <script src="../static/js/jquery-3.5.1.min.js"></script>
  17. <script>
  18. // wsy
  19. var cookie = {
  20. setCookie: function (name, value) {
  21. document.cookie = name + '=' + value + ';';
  22. },
  23. getCookie: function (name) {
  24. var arr = document.cookie.split('; ');
  25. for (var i = 0; i < arr.length; i++) {
  26. var arr2 = arr[i].split('=');
  27. if (arr2[0] == name) {
  28. return arr2[1];
  29. }
  30. }
  31. return '';
  32. },
  33. removeCookie: function (name) {
  34. cookie.setCookie(name, '', -1)
  35. }
  36. };
  37. // wsy:这个phonenum可能需要用什么传参的方式得到
  38. var phonenum = cookie.getCookie("phonenum");
  39. if(phonenum == ""){
  40. window.location.href = "/login";
  41. //phonenum = "1";
  42. }
  43. $(document).ready(function () { getContent('collection'); });
  44. </script>
  45. <style>
  46. .standard-input {
  47. height: 100px;
  48. width: 500px;
  49. background-color: aliceblue;
  50. margin-top: 1em;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
  56. <div class="app-header header-shadow">
  57. <div class="app-header__logo">
  58. <div class="logo-src"></div>
  59. <div class="header__pane ml-auto">
  60. <div>
  61. <button type="button" class="hamburger close-sidebar-btn hamburger--elastic" data-class="closed-sidebar">
  62. <span class="hamburger-box">
  63. <span class="hamburger-inner"></span>
  64. </span>
  65. </button>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="app-header__mobile-menu">
  70. <div>
  71. <button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
  72. <span class="hamburger-box">
  73. <span class="hamburger-inner"></span>
  74. </span>
  75. </button>
  76. </div>
  77. </div>
  78. <div class="app-header__menu">
  79. <span>
  80. <button type="button" class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
  81. <span class="btn-icon-wrapper">
  82. <i class="fa fa-ellipsis-v fa-w-6"></i>
  83. </span>
  84. </button>
  85. </span>
  86. </div>
  87. </div>
  88. <div class="ui-theme-settings">
  89. <button type="button" id="TooltipDemo" class="btn-open-options btn btn-warning">
  90. <i class="fa fa-cog fa-w-16 fa-spin fa-2x"></i>
  91. </button>
  92. <div class="theme-settings__inner">
  93. <div class="scrollbar-container">
  94. <div class="theme-settings__options-wrapper">
  95. <h3 class="themeoptions-heading">布局选项
  96. </h3>
  97. <div class="p-3">
  98. <ul class="list-group">
  99. <li class="list-group-item">
  100. <div class="widget-content p-0">
  101. <div class="widget-content-wrapper">
  102. <div class="widget-content-left mr-3">
  103. <div class="switch has-switch switch-container-class" data-class="fixed-header">
  104. <div class="switch-animate switch-on">
  105. <input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
  106. </div>
  107. </div>
  108. </div>
  109. <div class="widget-content-left">
  110. <div class="widget-heading">固定网页头部
  111. </div>
  112. <div class="widget-subheading">使标题顶部固定,始终可见。
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. </li>
  118. <li class="list-group-item">
  119. <div class="widget-content p-0">
  120. <div class="widget-content-wrapper">
  121. <div class="widget-content-left mr-3">
  122. <div class="switch has-switch switch-container-class" data-class="fixed-sidebar">
  123. <div class="switch-animate switch-on">
  124. <input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
  125. </div>
  126. </div>
  127. </div>
  128. <div class="widget-content-left">
  129. <div class="widget-heading">固定网页侧栏
  130. </div>
  131. <div class="widget-subheading">使侧边栏保持固定,始终可见。
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. </li>
  137. </ul>
  138. </div>
  139. <h3 class="themeoptions-heading">
  140. <div>
  141. 网页头部选项
  142. </div>
  143. <button type="button" class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-header-cs-class" data-class="">
  144. 恢复默认
  145. </button>
  146. </h3>
  147. <div class="p-3">
  148. <ul class="list-group">
  149. <li class="list-group-item">
  150. <h5 class="pb-2">选择配色
  151. </h5>
  152. <div class="theme-settings-swatches">
  153. <div class="swatch-holder bg-primary switch-header-cs-class" data-class="bg-primary header-text-light">
  154. </div>
  155. <div class="swatch-holder bg-secondary switch-header-cs-class" data-class="bg-secondary header-text-light">
  156. </div>
  157. <div class="swatch-holder bg-success switch-header-cs-class" data-class="bg-success header-text-dark">
  158. </div>
  159. <div class="swatch-holder bg-info switch-header-cs-class" data-class="bg-info header-text-dark">
  160. </div>
  161. <div class="swatch-holder bg-warning switch-header-cs-class" data-class="bg-warning header-text-dark">
  162. </div>
  163. <div class="swatch-holder bg-danger switch-header-cs-class" data-class="bg-danger header-text-light">
  164. </div>
  165. <div class="swatch-holder bg-light switch-header-cs-class" data-class="bg-light header-text-dark">
  166. </div>
  167. <div class="swatch-holder bg-dark switch-header-cs-class" data-class="bg-dark header-text-light">
  168. </div>
  169. <div class="swatch-holder bg-focus switch-header-cs-class" data-class="bg-focus header-text-light">
  170. </div>
  171. <div class="swatch-holder bg-alternate switch-header-cs-class" data-class="bg-alternate header-text-light">
  172. </div>
  173. <div class="divider">
  174. </div>
  175. <div class="swatch-holder bg-vicious-stance switch-header-cs-class" data-class="bg-vicious-stance header-text-light">
  176. </div>
  177. <div class="swatch-holder bg-midnight-bloom switch-header-cs-class" data-class="bg-midnight-bloom header-text-light">
  178. </div>
  179. <div class="swatch-holder bg-night-sky switch-header-cs-class" data-class="bg-night-sky header-text-light">
  180. </div>
  181. <div class="swatch-holder bg-slick-carbon switch-header-cs-class" data-class="bg-slick-carbon header-text-light">
  182. </div>
  183. <div class="swatch-holder bg-asteroid switch-header-cs-class" data-class="bg-asteroid header-text-light">
  184. </div>
  185. <div class="swatch-holder bg-royal switch-header-cs-class" data-class="bg-royal header-text-light">
  186. </div>
  187. <div class="swatch-holder bg-warm-flame switch-header-cs-class" data-class="bg-warm-flame header-text-dark">
  188. </div>
  189. <div class="swatch-holder bg-night-fade switch-header-cs-class" data-class="bg-night-fade header-text-dark">
  190. </div>
  191. <div class="swatch-holder bg-sunny-morning switch-header-cs-class" data-class="bg-sunny-morning header-text-dark">
  192. </div>
  193. <div class="swatch-holder bg-tempting-azure switch-header-cs-class" data-class="bg-tempting-azure header-text-dark">
  194. </div>
  195. <div class="swatch-holder bg-amy-crisp switch-header-cs-class" data-class="bg-amy-crisp header-text-dark">
  196. </div>
  197. <div class="swatch-holder bg-heavy-rain switch-header-cs-class" data-class="bg-heavy-rain header-text-dark">
  198. </div>
  199. <div class="swatch-holder bg-mean-fruit switch-header-cs-class" data-class="bg-mean-fruit header-text-dark">
  200. </div>
  201. <div class="swatch-holder bg-malibu-beach switch-header-cs-class" data-class="bg-malibu-beach header-text-light">
  202. </div>
  203. <div class="swatch-holder bg-deep-blue switch-header-cs-class" data-class="bg-deep-blue header-text-dark">
  204. </div>
  205. <div class="swatch-holder bg-ripe-malin switch-header-cs-class" data-class="bg-ripe-malin header-text-light">
  206. </div>
  207. <div class="swatch-holder bg-arielle-smile switch-header-cs-class" data-class="bg-arielle-smile header-text-light">
  208. </div>
  209. <div class="swatch-holder bg-plum-plate switch-header-cs-class" data-class="bg-plum-plate header-text-light">
  210. </div>
  211. <div class="swatch-holder bg-happy-fisher switch-header-cs-class" data-class="bg-happy-fisher header-text-dark">
  212. </div>
  213. <div class="swatch-holder bg-happy-itmeo switch-header-cs-class" data-class="bg-happy-itmeo header-text-light">
  214. </div>
  215. <div class="swatch-holder bg-mixed-hopes switch-header-cs-class" data-class="bg-mixed-hopes header-text-light">
  216. </div>
  217. <div class="swatch-holder bg-strong-bliss switch-header-cs-class" data-class="bg-strong-bliss header-text-light">
  218. </div>
  219. <div class="swatch-holder bg-grow-early switch-header-cs-class" data-class="bg-grow-early header-text-light">
  220. </div>
  221. <div class="swatch-holder bg-love-kiss switch-header-cs-class" data-class="bg-love-kiss header-text-light">
  222. </div>
  223. <div class="swatch-holder bg-premium-dark switch-header-cs-class" data-class="bg-premium-dark header-text-light">
  224. </div>
  225. <div class="swatch-holder bg-happy-green switch-header-cs-class" data-class="bg-happy-green header-text-light">
  226. </div>
  227. </div>
  228. </li>
  229. </ul>
  230. </div>
  231. <h3 class="themeoptions-heading">
  232. <div>网页侧栏选项</div>
  233. <button type="button" class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-sidebar-cs-class" data-class="">
  234. 恢复默认
  235. </button>
  236. </h3>
  237. <div class="p-3">
  238. <ul class="list-group">
  239. <li class="list-group-item">
  240. <h5 class="pb-2">选择配色
  241. </h5>
  242. <div class="theme-settings-swatches">
  243. <div class="swatch-holder bg-primary switch-sidebar-cs-class" data-class="bg-primary sidebar-text-light">
  244. </div>
  245. <div class="swatch-holder bg-secondary switch-sidebar-cs-class" data-class="bg-secondary sidebar-text-light">
  246. </div>
  247. <div class="swatch-holder bg-success switch-sidebar-cs-class" data-class="bg-success sidebar-text-dark">
  248. </div>
  249. <div class="swatch-holder bg-info switch-sidebar-cs-class" data-class="bg-info sidebar-text-dark">
  250. </div>
  251. <div class="swatch-holder bg-warning switch-sidebar-cs-class" data-class="bg-warning sidebar-text-dark">
  252. </div>
  253. <div class="swatch-holder bg-danger switch-sidebar-cs-class" data-class="bg-danger sidebar-text-light">
  254. </div>
  255. <div class="swatch-holder bg-light switch-sidebar-cs-class" data-class="bg-light sidebar-text-dark">
  256. </div>
  257. <div class="swatch-holder bg-dark switch-sidebar-cs-class" data-class="bg-dark sidebar-text-light">
  258. </div>
  259. <div class="swatch-holder bg-focus switch-sidebar-cs-class" data-class="bg-focus sidebar-text-light">
  260. </div>
  261. <div class="swatch-holder bg-alternate switch-sidebar-cs-class" data-class="bg-alternate sidebar-text-light">
  262. </div>
  263. <div class="divider">
  264. </div>
  265. <div class="swatch-holder bg-vicious-stance switch-sidebar-cs-class" data-class="bg-vicious-stance sidebar-text-light">
  266. </div>
  267. <div class="swatch-holder bg-midnight-bloom switch-sidebar-cs-class" data-class="bg-midnight-bloom sidebar-text-light">
  268. </div>
  269. <div class="swatch-holder bg-night-sky switch-sidebar-cs-class" data-class="bg-night-sky sidebar-text-light">
  270. </div>
  271. <div class="swatch-holder bg-slick-carbon switch-sidebar-cs-class" data-class="bg-slick-carbon sidebar-text-light">
  272. </div>
  273. <div class="swatch-holder bg-asteroid switch-sidebar-cs-class" data-class="bg-asteroid sidebar-text-light">
  274. </div>
  275. <div class="swatch-holder bg-royal switch-sidebar-cs-class" data-class="bg-royal sidebar-text-light">
  276. </div>
  277. <div class="swatch-holder bg-warm-flame switch-sidebar-cs-class" data-class="bg-warm-flame sidebar-text-dark">
  278. </div>
  279. <div class="swatch-holder bg-night-fade switch-sidebar-cs-class" data-class="bg-night-fade sidebar-text-dark">
  280. </div>
  281. <div class="swatch-holder bg-sunny-morning switch-sidebar-cs-class" data-class="bg-sunny-morning sidebar-text-dark">
  282. </div>
  283. <div class="swatch-holder bg-tempting-azure switch-sidebar-cs-class" data-class="bg-tempting-azure sidebar-text-dark">
  284. </div>
  285. <div class="swatch-holder bg-amy-crisp switch-sidebar-cs-class" data-class="bg-amy-crisp sidebar-text-dark">
  286. </div>
  287. <div class="swatch-holder bg-heavy-rain switch-sidebar-cs-class" data-class="bg-heavy-rain sidebar-text-dark">
  288. </div>
  289. <div class="swatch-holder bg-mean-fruit switch-sidebar-cs-class" data-class="bg-mean-fruit sidebar-text-dark">
  290. </div>
  291. <div class="swatch-holder bg-malibu-beach switch-sidebar-cs-class" data-class="bg-malibu-beach sidebar-text-light">
  292. </div>
  293. <div class="swatch-holder bg-deep-blue switch-sidebar-cs-class" data-class="bg-deep-blue sidebar-text-dark">
  294. </div>
  295. <div class="swatch-holder bg-ripe-malin switch-sidebar-cs-class" data-class="bg-ripe-malin sidebar-text-light">
  296. </div>
  297. <div class="swatch-holder bg-arielle-smile switch-sidebar-cs-class" data-class="bg-arielle-smile sidebar-text-light">
  298. </div>
  299. <div class="swatch-holder bg-plum-plate switch-sidebar-cs-class" data-class="bg-plum-plate sidebar-text-light">
  300. </div>
  301. <div class="swatch-holder bg-happy-fisher switch-sidebar-cs-class" data-class="bg-happy-fisher sidebar-text-dark">
  302. </div>
  303. <div class="swatch-holder bg-happy-itmeo switch-sidebar-cs-class" data-class="bg-happy-itmeo sidebar-text-light">
  304. </div>
  305. <div class="swatch-holder bg-mixed-hopes switch-sidebar-cs-class" data-class="bg-mixed-hopes sidebar-text-light">
  306. </div>
  307. <div class="swatch-holder bg-strong-bliss switch-sidebar-cs-class" data-class="bg-strong-bliss sidebar-text-light">
  308. </div>
  309. <div class="swatch-holder bg-grow-early switch-sidebar-cs-class" data-class="bg-grow-early sidebar-text-light">
  310. </div>
  311. <div class="swatch-holder bg-love-kiss switch-sidebar-cs-class" data-class="bg-love-kiss sidebar-text-light">
  312. </div>
  313. <div class="swatch-holder bg-premium-dark switch-sidebar-cs-class" data-class="bg-premium-dark sidebar-text-light">
  314. </div>
  315. <div class="swatch-holder bg-happy-green switch-sidebar-cs-class" data-class="bg-happy-green sidebar-text-light">
  316. </div>
  317. </div>
  318. </li>
  319. </ul>
  320. </div>
  321. </div>
  322. </div>
  323. </div>
  324. </div>
  325. <div class="app-main">
  326. <div class="app-sidebar sidebar-shadow">
  327. <div class="app-header__logo">
  328. <div class="logo-src"></div>
  329. <div class="header__pane ml-auto">
  330. <div>
  331. <button type="button" class="hamburger close-sidebar-btn hamburger--elastic" data-class="closed-sidebar">
  332. <span class="hamburger-box">
  333. <span class="hamburger-inner"></span>
  334. </span>
  335. </button>
  336. </div>
  337. </div>
  338. </div>
  339. <div class="app-header__mobile-menu">
  340. <div>
  341. <button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
  342. <span class="hamburger-box">
  343. <span class="hamburger-inner"></span>
  344. </span>
  345. </button>
  346. </div>
  347. </div>
  348. <div class="app-header__menu">
  349. <span>
  350. <button type="button" class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
  351. <span class="btn-icon-wrapper">
  352. <i class="fa fa-ellipsis-v fa-w-6"></i>
  353. </span>
  354. </button>
  355. </span>
  356. </div>
  357. <div class="scrollbar-sidebar">
  358. <div class="app-sidebar__inner">
  359. <ul class="vertical-nav-menu">
  360. <li class="app-sidebar__heading">个人中心</li>
  361. <li>
  362. <a href="\personal">
  363. <i class="metismenu-icon pe-7s-browser">
  364. </i>我的集锦
  365. </a>
  366. </li>
  367. <li class="app-sidebar__heading">广场</li>
  368. <li>
  369. <a href="\square" class="mm-active">
  370. <i class="metismenu-icon pe-7s-display2">
  371. </i>用户集锦
  372. </a>
  373. </li>
  374. </ul>
  375. </div>
  376. </div>
  377. </div>
  378. <div class="app-main__outer">
  379. <div class="app-main__inner">
  380. <div class="app-page-title">
  381. <div class="page-title-wrapper">
  382. <div class="page-title-heading">
  383. <div class="page-title-icon">
  384. <i class="pe-7s-bandaid icon-gradient bg-amy-crisp">
  385. </i>
  386. </div>
  387. <div>用户集锦
  388. <div class="page-title-subheading">单击集锦查看信息
  389. </div>
  390. </div>
  391. </div>
  392. <div class="page-title-actions">
  393. <!--搜索集锦-->
  394. <form>
  395. <i class="nav-link-icon fa fa-search"></i>&nbsp;
  396. <input type="text" name="" id="search">
  397. <input type="button" value="search" onclick="getContent('collection')">
  398. </form>
  399. </div>
  400. </div>
  401. </div>
  402. <div class="row" id="recommend">
  403. <!-- 集锦样例 -->
  404. <div class="col-md-4" v-for="item in textList":key="item.id" v-bind:item='item'>
  405. <div class="card mb-3 bg-arielle-smile widget-chart text-white card-border">
  406. <div class="widget-numbers" v-on:click="jump_to('start.add',item.name,item.id);"><span>{{item.name}}</span></div><br>
  407. <div class="widget-subheading"><i class="fa fa-tags"></i>&nbsp;&nbsp;<span>{{item.tag}}</span></div>
  408. <!-- 未点赞时的状态:点击超链接以增加赞 -->
  409. <div class="widget-description text-danger" v-if="item.isLike!=true"><i class="pe-7s-like" v-on:click="like(item.order)"></i>&nbsp;<span class="pr-1">{{item.like}}</span></div>
  410. <!-- 点赞后的状态:点击超链接以取消赞 -->
  411. <div class="widget-description text-danger" v-if="item.isLike==true"><i class="fa fa-heart" v-on:click="unlike(item.order)"></i>&nbsp;<span class="pr-1">{{item.like}}</span></div>
  412. </div>
  413. </div>
  414. </div>
  415. </div>
  416. </div>
  417. </div>
  418. <script type="text/javascript" src="../static/assets/scripts/main.js"></script>
  419. <script src="../static/js/wsy.js"></script>
  420. </body>
  421. </html>