2020-10-16-x
2020-10-16
todo-list
record-list
- 突然明白了前端显示结构和后端逻辑结构之间的差异，例如：贴吧的回复，在逻辑结构上就是一棵树，但是在网页上不能用树这种结构来显示，一级回复直接显示，二级回复折叠起来，二级回复的回复还是用二级回复显示只不过在回复请前添加回复xxx
- 根据网页的显示再来修改数据的逻辑结构，所以回复就不再是一棵多层子节点的树了，只能是一棵两层节点的树
- 概念定义
- 评论：针对需求的第一级留言
- 回复: 不是直接针对需求进行留言
- 一级回复：针对评论进行留言，父回复id为空
- 二级回复： 针对回复进行留言，父回复id不为空
- 程序的数据结构还是需要考虑前端的显示不能只纯粹的用逻辑结构来展示
home-record-list
reference-site-list
theme
- 本文标题：2020-10-16-x
- 本文作者：Xplorist
- 创建时间：2020-10-16 13:30:13
-
本文链接：https://xplorist.tech/2020/10/16/3562fd9cb2bc/
-
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
$tools-item-width = 2.2rem
$tools-item-font-size = 1.1rem
$tools-item-border-radius = 0.1rem
.side-tools-container {
position relative
.tools-item {
width $tools-item-width
height $tools-item-width
margin-bottom 0.2rem
color var(--default-text-color)
font-size $tools-item-font-size
background var(--background-color)
border-right none
border-radius $tools-item-border-radius
box-shadow 0.1rem 0.1rem 0.2rem var(--shadow-color)
cursor pointer
i {
color var(--default-text-color)
}
&:hover {
color var(--background-color)
background var(--primary-color)
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
i {
color var(--background-color)
}
}
+keep-tablet() {
width $tools-item-width * 0.9
height $tools-item-width * 0.9
margin-bottom 0.2rem
font-size $tools-item-font-size * 0.9
}
&.rss {
a {
width 100%
height 100%
border-radius $tools-item-border-radius
&:hover {
color var(--background-color)
background var(--primary-color)
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
}
}
}
}
.side-tools-list {
transform translateX(100%)
opacity 0
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
.tool-expand-width {
+keep-tablet() {
display none
}
}
&.show {
transform translateX(0)
opacity 1
}
}
.exposed-tools-list {
if (hexo-config('style.scroll.percent.enable') == true) {
.tool-scroll-to-top {
display none
&.show {
display flex
}
&:hover {
.percent {
display none
}
.arrow-up {
display flex
}
}
.arrow-up {
display none
}
.percent {
display flex
font-size 1rem
}
}
}
}
}
