feat: 添加了几个图标
This commit is contained in:
539943419 committed
1 parent
50def8fc50
commit
e2079c5388
12 files changed
+124
-29
No files matched your search
+45
-13
@@ -14,14 +14,14 @@
|
||||
<ChevronDown />
|
||||
</div>
|
||||
</div>
|
||||
</miao-divider-left >
|
||||
</miao-divider-left>
|
||||
</div>
|
||||
<div :class="['content-items-wrap', item.show ? '' : 'content-items-wrap-hide']">
|
||||
<div v-for="(cItem) in item.content" :key="cItem.name" class="content-item">
|
||||
<div class="content-item-name">{{ cItem.name }}</div>
|
||||
<div class="content-item-description">{{ cItem.description }}</div>
|
||||
<div class="content-item-link-wrap">
|
||||
<div>link:</div>
|
||||
<div class="content-item-link-wrap-icon"> <link-icon /></div>
|
||||
<a v-for="link in (cItem.links ?? [])" :href="link.url" target="_blank">{{ link.name }}</a>
|
||||
<NuxtLink v-for="link in (cItem.nuxtLinks ?? [])" :to="link.to">{{ link.name }}</NuxtLink>
|
||||
</div>
|
||||
@@ -36,7 +36,8 @@
|
||||
import { reactive } from 'vue';
|
||||
import miaoDividerLeft from '~/components/miaoDivider-left.vue';
|
||||
// @ts-ignore
|
||||
import ChevronDown from "@vicons/ionicons5/ChevronDown"
|
||||
import ChevronDown from "~/components/icons/ChevronDown.vue";
|
||||
import linkIcon from '~/components/icons/link.vue';
|
||||
|
||||
type PageContent = {
|
||||
subTitle: string,
|
||||
@@ -62,7 +63,7 @@ const PageContent = reactive<PageContent[]>([
|
||||
show: true,
|
||||
content: [
|
||||
{
|
||||
name: 'miaoDirectory',
|
||||
name: 'MiaoDirectory',
|
||||
description: '有个插件功能的单文件文件托管服务',
|
||||
links: [
|
||||
{
|
||||
@@ -76,7 +77,7 @@ const PageContent = reactive<PageContent[]>([
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'miaoShare',
|
||||
name: 'MiaoShare',
|
||||
description: '多了个加密环节的文件分享平台',
|
||||
links: [
|
||||
{
|
||||
@@ -86,7 +87,7 @@ const PageContent = reactive<PageContent[]>([
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'miaoBlog',
|
||||
name: 'MiaoBlog',
|
||||
description: '施工中，不过不要抱有太大期待',
|
||||
links: [
|
||||
{
|
||||
@@ -101,7 +102,7 @@ const PageContent = reactive<PageContent[]>([
|
||||
show: true,
|
||||
content: [
|
||||
{
|
||||
name: 'genshin-gacha',
|
||||
name: 'Genshin-Gacha',
|
||||
description: '通过模拟来计算抽卡成功率的小工具',
|
||||
nuxtLinks: [
|
||||
{
|
||||
@@ -111,7 +112,7 @@ const PageContent = reactive<PageContent[]>([
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'miaoTracker',
|
||||
name: 'MiaoTracker',
|
||||
description: '仅仅是个接口而已，用来查询开发者的位置记录',
|
||||
nuxtLinks: [
|
||||
{
|
||||
@@ -135,6 +136,26 @@ const PageContent = reactive<PageContent[]>([
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Nuxt',
|
||||
description: 'Nuxt官方文档',
|
||||
links: [
|
||||
{
|
||||
name: 'Nuxt',
|
||||
url: 'https://nuxt.com/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Element-plus',
|
||||
description: 'element-plus官方文档',
|
||||
links: [
|
||||
{
|
||||
name: 'element-plus',
|
||||
url: 'https://element-plus.org/zh-CN/guide/design.html'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
])
|
||||
@@ -252,14 +273,15 @@ const switchItemShow = (item: PageContent) => {
|
||||
}
|
||||
|
||||
.content-item-name {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
padding-bottom: 5px;
|
||||
background-color: #15aa87ce;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
padding: 3px 10px 5px;
|
||||
letter-spacing: 0px;
|
||||
margin-bottom: 10px;
|
||||
// font-family: PT Serif, Serif;
|
||||
// font-weight: 600;
|
||||
}
|
||||
@@ -281,10 +303,14 @@ const switchItemShow = (item: PageContent) => {
|
||||
user-select: none;
|
||||
padding-right: 10px;
|
||||
|
||||
&>div {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
&-icon {
|
||||
// font-size: 14px;
|
||||
// font-weight: 300;
|
||||
margin-right: 10px;
|
||||
height: 16px;
|
||||
aspect-ratio: 1;
|
||||
transform: translateY(0px) rotate(-45deg);
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
&>a {
|
||||
@@ -321,4 +347,10 @@ const switchItemShow = (item: PageContent) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 999px) {
|
||||
.main .content-wrap .content .content-items-wrap {
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+31
-6
@@ -6,15 +6,21 @@
|
||||
</header>
|
||||
<p class="post-summary">{{ post.summary }}...</p>
|
||||
<footer class="post-footer">
|
||||
<div class="post-date">{{ formatDate(post.date, 'yy-MM-dd HH:mm:ss') }}</div>
|
||||
<div class="post-date">
|
||||
<time-icon class="post-date-icon" />
|
||||
<span>
|
||||
{{ formatDate(post.date, 'yy-MM-dd HH:mm:ss') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="post-tags">
|
||||
<bookmark class="post-tags-icon" />
|
||||
<div v-for="tag in post.tags">{{ tag }}</div>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<div class="posts-skeleton" v-if="!isInit">
|
||||
<div class="posts-skeleton-item" v-for="_ in range(5)">
|
||||
<el-skeleton :rows="5" />
|
||||
<el-skeleton :rows="3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -22,6 +28,8 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import useDefaultStore from '~/hooks/pinia/useDefaultStore';
|
||||
import timeIcon from '~/components/icons/time.vue'
|
||||
import bookmark from '~/components/icons/tag.vue'
|
||||
import type { postItem } from '~/types/post';
|
||||
|
||||
const store = useDefaultStore()
|
||||
@@ -43,7 +51,11 @@ onMounted(async () => {
|
||||
// router.push('/posts/temp')
|
||||
// await sleep(1000)
|
||||
postsData.value = await getData()
|
||||
isInit.value = true
|
||||
isInit.value = true;
|
||||
(async () => {
|
||||
const res = await $fetch('/api/test/testDir')
|
||||
console.log(res)
|
||||
})()
|
||||
// console.log(postsData.value)
|
||||
})
|
||||
|
||||
@@ -52,12 +64,13 @@ onMounted(async () => {
|
||||
<style lang="scss" scoped>
|
||||
.posts-wrapper {
|
||||
// height: 50vh;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
padding: 10px 20px;
|
||||
|
||||
// background-color: #15aa87;
|
||||
.posts-item {
|
||||
margin: 10px 20px;
|
||||
margin: 10px 0px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
&:not(:last-child) {
|
||||
@@ -97,18 +110,29 @@ onMounted(async () => {
|
||||
font-weight: 200;
|
||||
|
||||
.post-date {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
&-icon {
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, .54);
|
||||
font-weight: 200;
|
||||
|
||||
&-icon {
|
||||
height: 10px;
|
||||
transform: rotate(-90deg) translate(-1px, -1px);
|
||||
// margin-right: -3px;
|
||||
}
|
||||
|
||||
&>div {
|
||||
cursor: pointer;
|
||||
transition: color .2s linear;
|
||||
@@ -124,6 +148,7 @@ onMounted(async () => {
|
||||
.posts-skeleton {
|
||||
&-item {
|
||||
padding: 10px 20px;
|
||||
// border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="md-wrapper">
|
||||
<div class="md" v-if="isInit">
|
||||
<div class="md-title">{{ title }}</div>
|
||||
<n-divider />
|
||||
<div class="md-divider"></div>
|
||||
<div v-html="renderedData"></div>
|
||||
</div>
|
||||
<div v-else class="md-skeleton-item">
|
||||
@@ -88,4 +88,11 @@ onMounted(async () => {
|
||||
font-size: 42px;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
.md-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #e8e8e8;
|
||||
margin: 30px 0;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user