添加我的装备页面模版
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: 追番页面
|
||||
screenshot:
|
||||
file: bangumis.html
|
||||
- name: 我的装备页面模版
|
||||
description: 我的装备页面
|
||||
screenshot:
|
||||
file: equipment.html
|
||||
description: Halo 2.x Theme base on Thymeleaf, Referring to Butterfly and Heo
|
||||
logo: https://liuzhihang.com/upload/logo.jpg
|
||||
website: https://liuzhihang.com
|
||||
|
|
|
|||
Loading…
Reference in New Issue