Files
quinn-bbc/src/main/resources/templates/user/index.html

185 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>用户中心-Quinn</title>
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
<style>
#table-title tr th{
border: none;
}
</style>
</head>
<body style="background: #f2f2f2;">
<div th:replace="~{common/header::header(activeUrl='user')}"></div>
<main role="main" class="container">
<div class="row" >
<aside class="col-md-3 blog-sidebar" th:fragment="userShowPanel">
<div class="p-4 my-3 bg-white rounded">
<div class="mb-0">
<p class="text-center">
<img th:src="${session.loginUser.getAvatar()}" style="border-radius: 50%" width="128" height="128">
</p>
<div class="text-center">
<span th:text="${session.loginUser.getUsername()}"></span>
<br>
<small>
<!--<span class="badge badge-primary">普通用户</span>-->
<span
th:class="${session.loginUser.getRoleId()==2?'badge badge-warning':'badge badge-success'}"
th:text="${session.loginUser.getRoleId()==2?'Vip会员':'普通用户'}">
</span>
</small>
<p class="text-center">
<small th:text="${userInfo.getIntro()}"></small>
</p>
<p>
<span th:each="hobby:${infoHobbys}"
th:text="${hobby}"
class="badge badge-light mr-1"></span>
</p>
<p>
<button type="button" onclick="donate()" class="btn btn-outline-primary btn-sm btn-block">赞助服务器</button>
</p>
<p>
<table class="table">
<thead id="table-title">
<tr>
<th scope="col">论坛</th>
<th scope="col">问题</th>
<th scope="col">回复</th>
</tr>
</thead>
<tbody>
<tr>
<td th:text="${blogCount}">0</td>
<td th:text="${questionCount}">0</td>
<td th:text="${commentCount}">0</td>
</tr>
</tbody>
</table>
</p>
</div>
</div>
</div>
</aside>
<div class="col-md-9 blog-main">
<div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2 mb-0">
<nav class="nav nav-pills">
<a class="nav-link active"
th:href="@{'/user/blog/'+${session.loginUser.getUid()}+'/1/10'}">
<svg class="bi bi-receipt-cutoff" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v13h-1V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51L2 2.118V15H1V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zM0 15.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z"/>
<path fill-rule="evenodd" d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-8a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
</svg>
论坛
</a>
<a class="nav-link"
th:href="@{'/user/question/'+${session.loginUser.getUid()}+'/1/10'}">
<svg class="bi bi-question-square" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
<path d="M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
</svg>
问答
</a>
<a class="nav-link"
th:href="@{'/user/comment/'+${session.loginUser.getUid()}+'/1/10'}">
<svg class="bi bi-chat-dots" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"/>
<path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
回复
</a>
</nav>
</h6>
<div th:each="blog:${blogList}" class="media text-muted pt-3">
<!-- 头像 -->
<img th:src="${blog.getAuthorAvatar()}" style="border-radius: 5px " width="32" height="32">
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray" style="margin-left: 5px">
<!-- 标题 -->
<a th:text="${blog.getTitle()}"
th:href="@{'/blog/read/'+${blog.getBid()}}"
class="text-dark font-weight-bold text-decoration-none d-block">
</a>
<!-- 浏览量 -->
<span>
<svg class="bi bi-eye-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
<path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
</svg>
[[${blog.getViews()}]]
</span>
<!-- 时间 -->
<span th:text="${#dates.format(blog.getGmtUpdate(),'yyyy-MM-dd')}"
class="badge badge-light float-right">
</span>
</p>
</div>
<!--分页-->
<nav aria-label="Page navigation example" class="mt-4">
<ul class="pagination justify-content-center pagination-sm">
<li th:class="${pageParam.hasPrevious()==true?'page-item':'page-item disabled'}">
<a class="page-link" th:href="@{'/user/blog/'+${session.loginUser.getUid()}+'/'+${pageParam.getCurrent()-1}+'/10'}" tabindex="">Previous</a>
</li>
<li class="page-item" th:if="${pageParam.hasPrevious()}">
<a class="page-link" th:href="@{'/user/blog/'+${session.loginUser.getUid()}+'/'+${pageParam.getCurrent()-1}+'/10'}" th:text="${pageParam.getCurrent()-1}"></a>
</li>
<li class="page-item active">
<a class="page-link" th:href="@{'/user/blog/'+${session.loginUser.getUid()}+'/'+${pageParam.getCurrent()}+'/10'}" th:text="${pageParam.getCurrent()}"></a>
</li>
<li class="page-item" th:if="${pageParam.hasNext()}">
<a class="page-link" th:href="@{'/user/blog/'+${session.loginUser.getUid()}+'/'+${pageParam.getCurrent()+1}+'/10'}" th:text="${pageParam.getCurrent()+1}"></a>
</li>
<li th:class="${pageParam.hasNext()==true?'page-item':'page-item disabled'}">
<a class="page-link" th:href="@{'/user/blog/'+${session.loginUser.getUid()}+'/'+${pageParam.getCurrent()+1}+'/10'}" >Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</main>
<div th:replace="~{common/footer::footer}"></div>
<a class="to-top">返回顶部</a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>
<script th:src="@{/js/jquery-ui.min.js}"></script>
<script th:src="@{/live/js/addlive2d.js}"></script>
<!-- layer 赞赏码 -->
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script>
// 后台读取
function donate(){
axios.get('/user/donate/1').then(response => {
console.log();
layer.photos({
photos: response.data,
anim: 5 //0-6的选择指定弹出图片动画类型默认随机请注意3.0之前的版本用shift参数
});
})
}
</script>
</body>
</html>