+
+
{{ tag }}
-
+
@@ -72,20 +72,18 @@ article.push(...originCopy)
background-position: center;
background-attachment: fixed;
background-size: cover;
+ overflow: auto;
position: relative;
+ left: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
+ transition: left .4s ease-in-out;
}
.article-time-line {
width: 100%;
padding: 16px 64px 64px 64px;
- height: calc(100% - 120px);
- position: absolute;
- left: 0;
- top: 120px;
- overflow: auto;
border-radius: 12px;
display: flex;
}
@@ -102,20 +100,14 @@ article.push(...originCopy)
-webkit-line-clamp: 2;
}
-.article-time-line.hidden {
- left: -100%;
-}
-
-.article-time-line,
-.space {
- transition: left .4s ease-in-out;
-}
-
.space {
- margin: 0 64px 14px 64px;
- position: absolute;
+ padding: 0 64px 14px 64px;
+ position: sticky;
+ z-index: 1;
width: 100%;
left: 0;
+ top: 0;
+ background-color: var(--vp-c-bg);
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
@@ -127,8 +119,8 @@ article.push(...originCopy)
margin: 0;
}
-.space.hidden {
- left: -100%
+#main-page.hidden {
+ left: -100%;
}
.current-tag::before {
diff --git a/components/Rail.vue b/components/Rail.vue
index 0c3f881..0cb9651 100644
--- a/components/Rail.vue
+++ b/components/Rail.vue
@@ -9,10 +9,25 @@ import { ref } from 'vue'
let show = ref(true)
const emit = defineEmits(['visible-change'])
-function onRailClick() {
+const debounce = (fn, time) => {
+ let timer = null;
+ return (...argu) => {
+ if(timer) {
+ clearTimeout(timer)
+ }
+ timer = setTimeout(() => {
+ fn.apply(null, argu)
+ clearTimeout(timer)
+ timer = null
+ }, time)
+ }
+}
+
+const onRailClick = () => {
emit('visible-change', !show.value)
- setTimeout(() => show.value = !show.value, 1000)
+ show.value = !show.value
}
+