添加我的装备页面模版
This commit is contained in:
roozen
parent
1ae72023ad
commit
7924746076
|
|
@ -0,0 +1,202 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page')}"
|
||||||
|
xmlns:th="http://www.thymeleaf.org">
|
||||||
|
|
||||||
|
<th:block th:fragment="content">
|
||||||
|
|
||||||
|
<div class="page" id="body-wrap">
|
||||||
|
|
||||||
|
<!-- 头部导航栏 -->
|
||||||
|
<header class="not-top-img" id="page-header">
|
||||||
|
<nav th:replace="~{modules/nav :: nav(title = null)}"></nav>
|
||||||
|
</header>
|
||||||
|
<main class="layout hide-aside" id="content-inner">
|
||||||
|
<div id="page">
|
||||||
|
<div class="author-content author-content-item essayPage single"
|
||||||
|
th:style="'background:url('+${theme.config.todo.backgroundImg}+') left 28% / cover no-repeat !important;'">
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="author-content-item-tips" th:text="${theme.config.todo.smallTitle}"></div>
|
||||||
|
<span class="author-content-item-title" th:text="${theme.config.todo.bigTitle}"></span>
|
||||||
|
<div class="content-bottom">
|
||||||
|
<div class="tips" th:text="${theme.config.todo.detail}"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="equipment">
|
||||||
|
<div class="equipment-item">
|
||||||
|
<h2 class="equipment-item-title">生产力</h2>
|
||||||
|
<div class="equipment-item-description">提升自己生产效率的硬件设备</div>
|
||||||
|
<div class="equipment-item-content">
|
||||||
|
<div class="equipment-item-content-item">
|
||||||
|
<div class="equipment-item-content-item-cover"><img
|
||||||
|
class="equipment-item-content-item-image entered loaded"
|
||||||
|
data-lazy-src="https://p.zhheo.com/YnW8cc21590681686120255749.png!cover"
|
||||||
|
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a7902b8de.png'"
|
||||||
|
alt="翻新 MacBookPro" data-ll-status="loaded"
|
||||||
|
src="https://p.zhheo.com/YnW8cc21590681686120255749.png!cover"></div>
|
||||||
|
<div class="equipment-item-content-item-info">
|
||||||
|
<div class="equipment-item-content-item-name"
|
||||||
|
onclick="rm.rightmenuCopyText("翻新 MacBookPro");btf.snackbarShow("已复制装备名称");">
|
||||||
|
翻新 MacBookPro
|
||||||
|
</div>
|
||||||
|
<div class="equipment-item-content-item-specification">M1Pro 32G / 1TB</div>
|
||||||
|
<div class="equipment-item-content-item-description">
|
||||||
|
屏幕显示效果好、色彩准确、对比度强、性能强劲、续航优秀。可以用来开发和设计。
|
||||||
|
</div>
|
||||||
|
<div class="equipment-item-content-item-toolbar">
|
||||||
|
<a class="equipment-item-content-item-link" href="/"
|
||||||
|
target="_blank">查看文章</a>
|
||||||
|
<a class="bber-reply"
|
||||||
|
onclick="rm.rightMenuCommentText("翻新 MacBookPro M1Pro 32G / 1TB 屏幕显示效果好、色彩准确、对比度强、性能强劲、续航优秀。可以用来开发和设计。");"
|
||||||
|
data-pjax-state="">
|
||||||
|
<i class="heofont icon-chat-1-fill"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
/* 我的装备 */
|
||||||
|
.equipment-item-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 0 -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-item-content-item {
|
||||||
|
width: calc(25% - 12px);
|
||||||
|
border-radius: 12px;
|
||||||
|
border: var(--style-border-always);
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 8px 6px;
|
||||||
|
background: var(--heo-card-bg);
|
||||||
|
box-shadow: var(--heo-shadow-border);
|
||||||
|
min-height: 400px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.equipment-item-content-item {
|
||||||
|
width: calc(50% - 12px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.equipment-item-content-item {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-item-content-item-info {
|
||||||
|
padding: 8px 16px 16px 16px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-item-content-item-name {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
cursor: pointer;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-item-content-item-name:hover {
|
||||||
|
color: var(--heo-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-item-content-item-specification {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--heo-secondtext);
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-item-content-item-description {
|
||||||
|
line-height: 20px;
|
||||||
|
color: var(--heo-secondtext);
|
||||||
|
height: 60px;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.equipment-item-content-item-link {
|
||||||
|
font-size: 12px;
|
||||||
|
background: var(--heo-gray-op);
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.equipment-item-content-item-link:hover {
|
||||||
|
background: var(--heo-main);
|
||||||
|
color: var(--heo-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2.equipment-item-title {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-item-description {
|
||||||
|
line-height: 1;
|
||||||
|
margin: 4px 0 8px 0;
|
||||||
|
color: var(--heo-secondtext);
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-item-content-item-cover {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
background: var(--heo-secondbg);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.equipment-item-content-item-image {
|
||||||
|
object-fit: cover;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#equipment {
|
||||||
|
margin-top: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-item-content-item-toolbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 12px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.bber-reply {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
<!-- 底部 -->
|
||||||
|
<footer th:replace="~{modules/footer :: footer}"></footer>
|
||||||
|
<!-- 卡片顶部气泡效果 -->
|
||||||
|
<script th:if="${theme.config.other.bubbleEnable}" async data-pjax
|
||||||
|
th:src="${assets_link + '/libs/canvas/bubble.js'}"></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -37,6 +37,10 @@ spec:
|
||||||
description: 追番页面
|
description: 追番页面
|
||||||
screenshot:
|
screenshot:
|
||||||
file: bangumis.html
|
file: bangumis.html
|
||||||
|
- name: 我的装备页面模版
|
||||||
|
description: 我的装备页面
|
||||||
|
screenshot:
|
||||||
|
file: equipment.html
|
||||||
description: Halo 2.x Theme base on Thymeleaf, Referring to Butterfly and Heo
|
description: Halo 2.x Theme base on Thymeleaf, Referring to Butterfly and Heo
|
||||||
logo: https://liuzhihang.com/upload/logo.jpg
|
logo: https://liuzhihang.com/upload/logo.jpg
|
||||||
website: https://liuzhihang.com
|
website: https://liuzhihang.com
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue