Skip to content

Commit

Permalink
fix: fix style
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChenKS12138
ChenKS12138 committed Jun 23, 2024
1 parent e25dc15 commit 13b4e94
Show file tree
Hide file tree
Showing 8 changed files with 149 additions and 130 deletions.
1 change: 1 addition & 0 deletions src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@ declare module '@vue/runtime-core' {
DarkMode: typeof import('./components/DarkMode.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
ShadowBox: typeof import('./components/ShadowBox.vue')['default']
}
}
69 changes: 20 additions & 49 deletions src/components/ArticleWrapper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ const { frontmatter } = defineProps<{
const headings = frontmatter.headings;
console.log(frontmatter.headings)
useHead({
title: frontmatter.title,
meta: [
Expand All @@ -43,72 +41,45 @@ watch(isDark, () => {
</script>

<template>
<div class="flex items-start wrapper">
<div class="headings">
<div class="headings-content">
<article-heading :headings="headings" />
</div>
</div>
<div class="content-wrapper">
<shadow-box>
<template #left-toc>
<article-heading :headings="headings" />
</template>
<template #title-content>
<div class="h-55 -mt-55 flex flex-col items-center text-white">
<div class="font-bold text-3xl">{{ frontmatter.title }}</div>
<div class="text-lg mt-2">{{ dayjs(frontmatter.date).format('YYYY-MM-DD') }}</div>
<div class="mt-2 italic">{{ (frontmatter.tags || []).map(x => `#${x}`).join(' ') }}</div>
</div>
<slot></slot>
<!-- <div class="rounded bg-gray mt-10 p-1 text-white italic indent-md text-lg">
CC BY-SA 3.0协议 。转载请注明出处!
</div> -->
<div class="mt-20">
<Giscus v-if="showGiscus" ref="giscusRef" id="comments" repo="ChenKS12138/ChenKS12138.github.io"
repoId="MDEwOlJlcG9zaXRvcnkyNzA4Njc3ODM=" category="Announcements" categoryId="DIC_kwDOECUdR84Cd10_"
mapping="og:title" reactionsEnabled="1" emitMetadata="0" inputPosition="bottom" :theme="discusTheme"
lang="zh-CN" loading="lazy" />
</template>
<div class="flex items-start wrapper">
<div class="content-wrapper">
<slot></slot>
<div class="rounded bg-gray mt-10 p-1 text-white italic indent-md text-lg">
CC BY-SA 3.0协议 。转载请注明出处!
</div>
<div class="mt-20">
<Giscus v-if="showGiscus" ref="giscusRef" id="comments" repo="ChenKS12138/ChenKS12138.github.io"
repoId="MDEwOlJlcG9zaXRvcnkyNzA4Njc3ODM=" category="Announcements"
categoryId="DIC_kwDOECUdR84Cd10_" mapping="og:title" reactionsEnabled="1" emitMetadata="0"
inputPosition="bottom" :theme="discusTheme" lang="zh-CN" loading="lazy" />
</div>
</div>
</div>
</div>
</shadow-box>
</template>

<style scoped>
.wrapper {
margin-left: -23rem;
@media screen and (max-width: 770px) {
margin-left: 0rem;
flex-direction: column;
align-items: flex-start;
}
}
.headings {
min-width: 23rem;
position: sticky;
top: 1rem;
padding-right: 1rem;
display: flex;
justify-content: flex-end;
width: 0;
@media screen and (max-width: 770px) {
justify-content: flex-start;
/* display: none; */
}
}
.headings-content {
max-width: 15rem;
max-height: 50rem;
overflow-y: scroll;
@apply mr-8 pr-4 mt-20;
@media screen and (max-width: 770px) {
display: none;
}
}
.content-wrapper {
width: calc(100% - 23rem)
width: 100%;
}
</style>

Expand Down
71 changes: 71 additions & 0 deletions src/components/ShadowBox.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<template>
<div>
<div class="title-content">
<slot name="title-content"></slot>
</div>
<div class="box-container">
<div class="left-toc">
<slot name="left-toc"></slot>
</div>
<div class="content-container">
<slot></slot>
</div>
</div>
</div>
</template>

<style scoped>
.title-content {
position: relative;
z-index: 2;
width: 80%;
margin: 0 auto;
margin-bottom: 1rem;
}
.box-container {
@apply max-w-4/5;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
margin: 0 auto;
@media screen and (max-width: 1200px) {
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
}
.left-toc {
max-width: 300px;
position: sticky;
top: 3rem;
padding-top: 1rem;
padding-right: 1rem;
max-height: 800px;
overflow-y: scroll;
@media screen and (max-width: 1200px) {
display: none;
}
}
.content-container {
@apply min-h-2xl p-5 relative bg-white <lg: (p-2) lg: w-4xl color-text-comm dark:(color-bg-dark text-white);
top: -80px;
z-index: 4;
border-radius: 8px;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
/* min-width: 80%; */
/* width: calc(100 - 300px); */
max-width: 100%;
}
</style>
18 changes: 1 addition & 17 deletions src/layouts/default.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,6 @@ const links = [
to: '/about',
label: '关于'
},
// {
// to: '/RSS',
// label: 'RSS'
// }
]
</script>
Expand All @@ -50,9 +46,7 @@ const links = [
<div class="flex flex-col" style="min-height: 100vh;">
<div class="w-full header-cover-bg min-h-sm"></div>
<div class="content-container-wrapper dark:bg-dark">
<div class="content-container">
<router-view></router-view>
</div>
<router-view />
</div>
</div>
</template>
Expand Down Expand Up @@ -98,14 +92,4 @@ const links = [
@apply <lg: text-sm flex-1;
background-color: rgb(235, 235, 235);
}
.content-container {
@apply min-h-2xl p-5 relative max-w-4/5 bg-white <lg: (p-2) lg: w-4xl color-text-comm dark:(color-bg-dark text-white);
top: -80px;
z-index: 4;
margin: 0 auto;
border-radius: 8px;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
</style>
14 changes: 0 additions & 14 deletions src/pages/RSS.vue
View file

This file was deleted.

28 changes: 15 additions & 13 deletions src/pages/about.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,21 @@ const config = {
</script>

<template>
<div class="about-container">
<img class="avatar mb-2" :src="config.avatar" alt="avatar">
<div class="text-3xl mb-2">{{ config.name }}</div>
<div class="leading-loose italic" v-for="item in config.intro" :key="item">{{ item }}</div>
</div>
<div class="about-icon-container mt-2">
<a class="block" target="_blank" href="https://github.com/ChenKS12138">
<div class="i-carbon-logo-github text-2xl bg-dark dark:bg-white" />
</a>
<a class="block" target="_blank" href="https://twitter.com/ChenKS12138">
<div class="i-carbon-logo-twitter text-2xl bg-dark dark:bg-white" />
</a>
</div>
<shadow-box>
<div class="about-container">
<img class="avatar mb-2" :src="config.avatar" alt="avatar">
<div class="text-3xl mb-2">{{ config.name }}</div>
<div class="leading-loose italic" v-for="item in config.intro" :key="item">{{ item }}</div>
</div>
<div class="about-icon-container mt-2">
<a class="block" target="_blank" href="https://github.com/ChenKS12138">
<div class="i-carbon-logo-github text-2xl bg-dark dark:bg-white" />
</a>
<a class="block" target="_blank" href="https://twitter.com/ChenKS12138">
<div class="i-carbon-logo-twitter text-2xl bg-dark dark:bg-white" />
</a>
</div>
</shadow-box>
</template>

<style scoped>
Expand Down
44 changes: 23 additions & 21 deletions src/pages/article-list.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,30 +44,32 @@ const groupedArticles = computed(() => Array.from(
</script>

<template>
<div class="tag-container">
<div class="tag-item" :data-selected="selectedTag === ''" @click="selectedTag = ''">
ALL
</div>
<div class="tag-item" :data-selected="selectedTag === tagItem ? 'true' : ''" v-for="tagItem in allTags"
@click="selectedTag = tagItem">
{{ tagItem }}
<shadow-box>
<div class="tag-container">
<div class="tag-item" :data-selected="selectedTag === ''" @click="selectedTag = ''">
ALL
</div>
<div class="tag-item" :data-selected="selectedTag === tagItem ? 'true' : ''" v-for="tagItem in allTags"
@click="selectedTag = tagItem">
{{ tagItem }}
</div>
</div>
</div>
<div class="articles-container">
<div>Total: {{ articles.length }}</div>
<div class="articles-divider border-t dark:border-white"></div>
<div class="mt-2" v-for="[year, yearArticles] in groupedArticles" :key="year">
<div class="text-xl">{{ year }}</div>
<div class="ml-5 mt-2 mb-8">
<router-link class="article-link" v-for="article in yearArticles" :to="article.path">
<div class="flex justify-between my-3 dark:text-white">
<div>{{ article.title }}</div>
<div>{{ article.monthAndDay }}</div>
</div>
</router-link>
<div class="articles-container">
<div>Total: {{ articles.length }}</div>
<div class="articles-divider border-t dark:border-white"></div>
<div class="mt-2" v-for="[year, yearArticles] in groupedArticles" :key="year">
<div class="text-xl">{{ year }}</div>
<div class="ml-5 mt-2 mb-8">
<router-link class="article-link" v-for="article in yearArticles" :to="article.path">
<div class="flex justify-between my-3 dark:text-white">
<div>{{ article.title }}</div>
<div>{{ article.monthAndDay }}</div>
</div>
</router-link>
</div>
</div>
</div>
</div>
</shadow-box>
</template>

<style scoped>
Expand Down
34 changes: 18 additions & 16 deletions src/pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,25 @@ useHead({
</script>
<template>
<div v-for="(article, idx) in articles" :key="article.path" class="article-item flex-col md:(flex-row)"
@click="go(article.path)">
<div class="md:(pr-4 w-4\/5)">
<div class="article-item-title">{{ article.data.title }}</div>
<div class="article-item-brief">{{ article.brief }}</div>
<div class="article-item-meta">
<span class="mr-6 ">{{ article.data.date }}</span>
<span class="italic">{{ (article.data.tags).join(", ") }}</span>
<shadow-box>
<div v-for="(article, idx) in articles" :key="article.path" class="article-item flex-col md:(flex-row)"
@click="go(article.path)">
<div class="md:(pr-4 w-4\/5)">
<div class="article-item-title">{{ article.data.title }}</div>
<div class="article-item-brief">{{ article.brief }}</div>
<div class="article-item-meta">
<span class="mr-6 ">{{ article.data.date }}</span>
<span class="italic">{{ (article.data.tags).join(", ") }}</span>
</div>
</div>
<div class="h-40 " v-if="article.data.coverImage">
<img :src="article.data.coverImage" class="article-item-image" alt="">
</div>
</div>
<div class="h-40 " v-if="article.data.coverImage">
<img :src="article.data.coverImage" class="article-item-image" alt="">
</div>
</div>
<router-link class="text--link" to="/article-list">
<div class="dark:text-white">查看全部</div>
</router-link>
<router-link class="text--link" to="/article-list">
<div class="dark:text-white">查看全部</div>
</router-link>
</shadow-box>
</template>


Expand All @@ -43,7 +45,7 @@ useHead({
0 17px 50px 0 rgba(0, 0, 0, 0.19) !important;
@media screen and (max-width: 770px) {
width: 100%;
max-width: 100%;
}
}
Expand Down

0 comments on commit 13b4e94

Please sign in to comment.