|
|
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <meta charset="utf-8">
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta http-equiv="Content-Language" content="en">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>广场</title>
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
- <meta name="description" content="Huge selection of charts created with the React ChartJS Plugin">
- <meta name="msapplication-tap-highlight" content="no">
- <link href="../static/css/charts.css" rel="stylesheet">
- <link href="../static/css/main.css" rel="stylesheet">
- <script src="../static/js/jquery-3.5.1.min.js"></script>
- <script>
- // wsy
- $(document).ready(function () { getContent('collection'); });
- </script>
-
- <style>
- .standard-input {
- height: 100px;
- width: 500px;
- background-color: aliceblue;
- margin-top: 1em;
- }
- </style>
- </head>
-
- <body>
-
- <div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
- <div class="app-header header-shadow">
- <div class="app-header__logo">
- <div class="logo-src"></div>
- <div class="header__pane ml-auto">
- <div>
- <button type="button" class="hamburger close-sidebar-btn hamburger--elastic" data-class="closed-sidebar">
- <span class="hamburger-box">
- <span class="hamburger-inner"></span>
- </span>
- </button>
- </div>
- </div>
- </div>
- <div class="app-header__mobile-menu">
- <div>
- <button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
- <span class="hamburger-box">
- <span class="hamburger-inner"></span>
- </span>
- </button>
- </div>
- </div>
- <div class="app-header__menu">
- <span>
- <button type="button" class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
- <span class="btn-icon-wrapper">
- <i class="fa fa-ellipsis-v fa-w-6"></i>
- </span>
- </button>
- </span>
- </div>
- </div>
-
- <div class="ui-theme-settings">
- <button type="button" id="TooltipDemo" class="btn-open-options btn btn-warning">
- <i class="fa fa-cog fa-w-16 fa-spin fa-2x"></i>
- </button>
- <div class="theme-settings__inner">
- <div class="scrollbar-container">
- <div class="theme-settings__options-wrapper">
- <h3 class="themeoptions-heading">布局选项
- </h3>
- <div class="p-3">
- <ul class="list-group">
- <li class="list-group-item">
- <div class="widget-content p-0">
- <div class="widget-content-wrapper">
- <div class="widget-content-left mr-3">
- <div class="switch has-switch switch-container-class" data-class="fixed-header">
- <div class="switch-animate switch-on">
- <input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
- </div>
- </div>
- </div>
- <div class="widget-content-left">
- <div class="widget-heading">固定网页头部
- </div>
- <div class="widget-subheading">使标题顶部固定，始终可见。
- </div>
- </div>
- </div>
- </div>
- </li>
- <li class="list-group-item">
- <div class="widget-content p-0">
- <div class="widget-content-wrapper">
- <div class="widget-content-left mr-3">
- <div class="switch has-switch switch-container-class" data-class="fixed-sidebar">
- <div class="switch-animate switch-on">
- <input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
- </div>
- </div>
- </div>
- <div class="widget-content-left">
- <div class="widget-heading">固定网页侧栏
- </div>
- <div class="widget-subheading">使侧边栏保持固定，始终可见。
- </div>
- </div>
- </div>
- </div>
- </li>
- </ul>
- </div>
- <h3 class="themeoptions-heading">
- <div>
- 网页头部选项
- </div>
- <button type="button" class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-header-cs-class" data-class="">
- 恢复默认
- </button>
- </h3>
- <div class="p-3">
- <ul class="list-group">
- <li class="list-group-item">
- <h5 class="pb-2">选择配色
- </h5>
- <div class="theme-settings-swatches">
- <div class="swatch-holder bg-primary switch-header-cs-class" data-class="bg-primary header-text-light">
- </div>
- <div class="swatch-holder bg-secondary switch-header-cs-class" data-class="bg-secondary header-text-light">
- </div>
- <div class="swatch-holder bg-success switch-header-cs-class" data-class="bg-success header-text-dark">
- </div>
- <div class="swatch-holder bg-info switch-header-cs-class" data-class="bg-info header-text-dark">
- </div>
- <div class="swatch-holder bg-warning switch-header-cs-class" data-class="bg-warning header-text-dark">
- </div>
- <div class="swatch-holder bg-danger switch-header-cs-class" data-class="bg-danger header-text-light">
- </div>
- <div class="swatch-holder bg-light switch-header-cs-class" data-class="bg-light header-text-dark">
- </div>
- <div class="swatch-holder bg-dark switch-header-cs-class" data-class="bg-dark header-text-light">
- </div>
- <div class="swatch-holder bg-focus switch-header-cs-class" data-class="bg-focus header-text-light">
- </div>
- <div class="swatch-holder bg-alternate switch-header-cs-class" data-class="bg-alternate header-text-light">
- </div>
- <div class="divider">
- </div>
- <div class="swatch-holder bg-vicious-stance switch-header-cs-class" data-class="bg-vicious-stance header-text-light">
- </div>
- <div class="swatch-holder bg-midnight-bloom switch-header-cs-class" data-class="bg-midnight-bloom header-text-light">
- </div>
- <div class="swatch-holder bg-night-sky switch-header-cs-class" data-class="bg-night-sky header-text-light">
- </div>
- <div class="swatch-holder bg-slick-carbon switch-header-cs-class" data-class="bg-slick-carbon header-text-light">
- </div>
- <div class="swatch-holder bg-asteroid switch-header-cs-class" data-class="bg-asteroid header-text-light">
- </div>
- <div class="swatch-holder bg-royal switch-header-cs-class" data-class="bg-royal header-text-light">
- </div>
- <div class="swatch-holder bg-warm-flame switch-header-cs-class" data-class="bg-warm-flame header-text-dark">
- </div>
- <div class="swatch-holder bg-night-fade switch-header-cs-class" data-class="bg-night-fade header-text-dark">
- </div>
- <div class="swatch-holder bg-sunny-morning switch-header-cs-class" data-class="bg-sunny-morning header-text-dark">
- </div>
- <div class="swatch-holder bg-tempting-azure switch-header-cs-class" data-class="bg-tempting-azure header-text-dark">
- </div>
- <div class="swatch-holder bg-amy-crisp switch-header-cs-class" data-class="bg-amy-crisp header-text-dark">
- </div>
- <div class="swatch-holder bg-heavy-rain switch-header-cs-class" data-class="bg-heavy-rain header-text-dark">
- </div>
- <div class="swatch-holder bg-mean-fruit switch-header-cs-class" data-class="bg-mean-fruit header-text-dark">
- </div>
- <div class="swatch-holder bg-malibu-beach switch-header-cs-class" data-class="bg-malibu-beach header-text-light">
- </div>
- <div class="swatch-holder bg-deep-blue switch-header-cs-class" data-class="bg-deep-blue header-text-dark">
- </div>
- <div class="swatch-holder bg-ripe-malin switch-header-cs-class" data-class="bg-ripe-malin header-text-light">
- </div>
- <div class="swatch-holder bg-arielle-smile switch-header-cs-class" data-class="bg-arielle-smile header-text-light">
- </div>
- <div class="swatch-holder bg-plum-plate switch-header-cs-class" data-class="bg-plum-plate header-text-light">
- </div>
- <div class="swatch-holder bg-happy-fisher switch-header-cs-class" data-class="bg-happy-fisher header-text-dark">
- </div>
- <div class="swatch-holder bg-happy-itmeo switch-header-cs-class" data-class="bg-happy-itmeo header-text-light">
- </div>
- <div class="swatch-holder bg-mixed-hopes switch-header-cs-class" data-class="bg-mixed-hopes header-text-light">
- </div>
- <div class="swatch-holder bg-strong-bliss switch-header-cs-class" data-class="bg-strong-bliss header-text-light">
- </div>
- <div class="swatch-holder bg-grow-early switch-header-cs-class" data-class="bg-grow-early header-text-light">
- </div>
- <div class="swatch-holder bg-love-kiss switch-header-cs-class" data-class="bg-love-kiss header-text-light">
- </div>
- <div class="swatch-holder bg-premium-dark switch-header-cs-class" data-class="bg-premium-dark header-text-light">
- </div>
- <div class="swatch-holder bg-happy-green switch-header-cs-class" data-class="bg-happy-green header-text-light">
- </div>
- </div>
- </li>
- </ul>
- </div>
- <h3 class="themeoptions-heading">
- <div>网页侧栏选项</div>
- <button type="button" class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-sidebar-cs-class" data-class="">
- 恢复默认
- </button>
- </h3>
- <div class="p-3">
- <ul class="list-group">
- <li class="list-group-item">
- <h5 class="pb-2">选择配色
- </h5>
- <div class="theme-settings-swatches">
- <div class="swatch-holder bg-primary switch-sidebar-cs-class" data-class="bg-primary sidebar-text-light">
- </div>
- <div class="swatch-holder bg-secondary switch-sidebar-cs-class" data-class="bg-secondary sidebar-text-light">
- </div>
- <div class="swatch-holder bg-success switch-sidebar-cs-class" data-class="bg-success sidebar-text-dark">
- </div>
- <div class="swatch-holder bg-info switch-sidebar-cs-class" data-class="bg-info sidebar-text-dark">
- </div>
- <div class="swatch-holder bg-warning switch-sidebar-cs-class" data-class="bg-warning sidebar-text-dark">
- </div>
- <div class="swatch-holder bg-danger switch-sidebar-cs-class" data-class="bg-danger sidebar-text-light">
- </div>
- <div class="swatch-holder bg-light switch-sidebar-cs-class" data-class="bg-light sidebar-text-dark">
- </div>
- <div class="swatch-holder bg-dark switch-sidebar-cs-class" data-class="bg-dark sidebar-text-light">
- </div>
- <div class="swatch-holder bg-focus switch-sidebar-cs-class" data-class="bg-focus sidebar-text-light">
- </div>
- <div class="swatch-holder bg-alternate switch-sidebar-cs-class" data-class="bg-alternate sidebar-text-light">
- </div>
- <div class="divider">
- </div>
- <div class="swatch-holder bg-vicious-stance switch-sidebar-cs-class" data-class="bg-vicious-stance sidebar-text-light">
- </div>
- <div class="swatch-holder bg-midnight-bloom switch-sidebar-cs-class" data-class="bg-midnight-bloom sidebar-text-light">
- </div>
- <div class="swatch-holder bg-night-sky switch-sidebar-cs-class" data-class="bg-night-sky sidebar-text-light">
- </div>
- <div class="swatch-holder bg-slick-carbon switch-sidebar-cs-class" data-class="bg-slick-carbon sidebar-text-light">
- </div>
- <div class="swatch-holder bg-asteroid switch-sidebar-cs-class" data-class="bg-asteroid sidebar-text-light">
- </div>
- <div class="swatch-holder bg-royal switch-sidebar-cs-class" data-class="bg-royal sidebar-text-light">
- </div>
- <div class="swatch-holder bg-warm-flame switch-sidebar-cs-class" data-class="bg-warm-flame sidebar-text-dark">
- </div>
- <div class="swatch-holder bg-night-fade switch-sidebar-cs-class" data-class="bg-night-fade sidebar-text-dark">
- </div>
- <div class="swatch-holder bg-sunny-morning switch-sidebar-cs-class" data-class="bg-sunny-morning sidebar-text-dark">
- </div>
- <div class="swatch-holder bg-tempting-azure switch-sidebar-cs-class" data-class="bg-tempting-azure sidebar-text-dark">
- </div>
- <div class="swatch-holder bg-amy-crisp switch-sidebar-cs-class" data-class="bg-amy-crisp sidebar-text-dark">
- </div>
- <div class="swatch-holder bg-heavy-rain switch-sidebar-cs-class" data-class="bg-heavy-rain sidebar-text-dark">
- </div>
- <div class="swatch-holder bg-mean-fruit switch-sidebar-cs-class" data-class="bg-mean-fruit sidebar-text-dark">
- </div>
- <div class="swatch-holder bg-malibu-beach switch-sidebar-cs-class" data-class="bg-malibu-beach sidebar-text-light">
- </div>
- <div class="swatch-holder bg-deep-blue switch-sidebar-cs-class" data-class="bg-deep-blue sidebar-text-dark">
- </div>
- <div class="swatch-holder bg-ripe-malin switch-sidebar-cs-class" data-class="bg-ripe-malin sidebar-text-light">
- </div>
- <div class="swatch-holder bg-arielle-smile switch-sidebar-cs-class" data-class="bg-arielle-smile sidebar-text-light">
- </div>
- <div class="swatch-holder bg-plum-plate switch-sidebar-cs-class" data-class="bg-plum-plate sidebar-text-light">
- </div>
- <div class="swatch-holder bg-happy-fisher switch-sidebar-cs-class" data-class="bg-happy-fisher sidebar-text-dark">
- </div>
- <div class="swatch-holder bg-happy-itmeo switch-sidebar-cs-class" data-class="bg-happy-itmeo sidebar-text-light">
- </div>
- <div class="swatch-holder bg-mixed-hopes switch-sidebar-cs-class" data-class="bg-mixed-hopes sidebar-text-light">
- </div>
- <div class="swatch-holder bg-strong-bliss switch-sidebar-cs-class" data-class="bg-strong-bliss sidebar-text-light">
- </div>
- <div class="swatch-holder bg-grow-early switch-sidebar-cs-class" data-class="bg-grow-early sidebar-text-light">
- </div>
- <div class="swatch-holder bg-love-kiss switch-sidebar-cs-class" data-class="bg-love-kiss sidebar-text-light">
- </div>
- <div class="swatch-holder bg-premium-dark switch-sidebar-cs-class" data-class="bg-premium-dark sidebar-text-light">
- </div>
- <div class="swatch-holder bg-happy-green switch-sidebar-cs-class" data-class="bg-happy-green sidebar-text-light">
- </div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <div class="app-main">
- <div class="app-sidebar sidebar-shadow">
- <div class="app-header__logo">
- <div class="logo-src"></div>
- <div class="header__pane ml-auto">
- <div>
- <button type="button" class="hamburger close-sidebar-btn hamburger--elastic" data-class="closed-sidebar">
- <span class="hamburger-box">
- <span class="hamburger-inner"></span>
- </span>
- </button>
- </div>
- </div>
- </div>
- <div class="app-header__mobile-menu">
- <div>
- <button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
- <span class="hamburger-box">
- <span class="hamburger-inner"></span>
- </span>
- </button>
- </div>
- </div>
- <div class="app-header__menu">
- <span>
- <button type="button" class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
- <span class="btn-icon-wrapper">
- <i class="fa fa-ellipsis-v fa-w-6"></i>
- </span>
- </button>
- </span>
- </div>
- <div class="scrollbar-sidebar">
- <div class="app-sidebar__inner">
- <ul class="vertical-nav-menu">
- <li class="app-sidebar__heading">个人中心</li>
- <li>
- <a href="personal.html">
- <i class="metismenu-icon pe-7s-browser">
- </i>我的集锦
- </a>
- </li>
- <li class="app-sidebar__heading">广场</li>
- <li>
- <a href="square.html" class="mm-active">
- <i class="metismenu-icon pe-7s-display2">
- </i>用户集锦
- </a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="app-main__outer">
- <div class="app-main__inner">
- <div class="app-page-title">
- <div class="page-title-wrapper">
- <div class="page-title-heading">
- <div class="page-title-icon">
- <i class="pe-7s-bandaid icon-gradient bg-amy-crisp">
- </i>
- </div>
- <div>用户集锦
- <div class="page-title-subheading">单击集锦查看信息
- </div>
- </div>
- </div>
- <div class="page-title-actions">
- <!--搜索集锦-->
- <form>
- <i class="nav-link-icon fa fa-search"></i>
- <input type="text" name="" id="search">
- <input type="button" value="search" onclick="getContent('collection')">
- </form>
- </div>
- </div>
- </div>
-
- <div class="row" id="recommend">
- <!-- 集锦样例 -->
- <div class="col-md-4" v-for="item in textList":key="item.id" v-bind:item='item'>
- <div class="card mb-3 bg-arielle-smile widget-chart text-white card-border">
- <div class="widget-numbers" v-on:click="jump_to('add.html',item.name,id);"><span>{{item.name}}</span></div><br>
- <div class="widget-subheading"><i class="fa fa-tags"></i> <span>{{item.tag}}</span></div>
- <!-- 未点赞时的状态：点击超链接以增加赞 -->
- <div class="widget-description text-danger" v-if="item.isLike!=true"><i class="pe-7s-like" v-on:click="like(item.order)"></i> <span class="pr-1">{{item.like}}</span></div>
- <!-- 点赞后的状态：点击超链接以取消赞 -->
- <div class="widget-description text-danger" v-if="item.isLike==true"><i class="fa fa-heart" v-on:click="unlike(item.order)"></i> <span class="pr-1">{{item.like}}</span></div>
- </div>
- </div>
-
- </div>
- </div>
-
-
- </div>
- </div>
- <script type="text/javascript" src="../static/assets/scripts/main.js"></script>
- <script src="../static/js/wsy.js"></script>
-
- </body>
- </html>
|
