cantyonion/WebIndex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改移动端细节

Browse Source
This commit is contained in:
Jeffrey Hsu 2024-10-02 11:11:24 +08:00
parent c267761a34
commit 2557e65ace
3 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -3,7 +3,7 @@
</script>
<template>
<div class="min-h-screen w-screen bg-blue-50">
<div class="min-h-screen bg-blue-50">
<router-view/>
</div>
</template>

2
src/components/card/IntroCard.vue
View File

@ -38,7 +38,7 @@ const littleWidget: Widget[] = [
</div>
<!-- 文字部分 -->
<div class="container flex-1 px-8 flex flex-col justify-between">
<div class="container flex-1 px-4 sm:px-8 flex flex-col justify-between">
<div class="text-4xl">Jeffrey Hsu</div>
<div class="text-2xl text-gray-400">你好👋，很高兴认识你！</div>
<!-- <vue-typed-js :strings="['First text', 'Second Text']">-->

32
src/views/home/HomeView.vue
View File

@ -22,23 +22,25 @@ onMounted(async () => {
<!-- 个人介绍 -->
<intro-card/>
<!-- 标题部分 -->
<div class="text-2xl mb-4 text-white font-bold flex justify-between">
<div class="bg-rose-500 w-max rounded-2xl overflow-hidden">
<div class="inline-block py-2 px-4 bg-rose-600 rounded-2xl">
<font-awesome-icon :icon="['fas', 'blog']"/>
<div class="px-4 sm:px-0 w-full">
<!-- 标题部分 -->
<div class="text-2xl mb-4 text-white font-bold flex justify-between">
<div class="bg-rose-500 w-max rounded-2xl overflow-hidden">
<div class="inline-block py-2 px-4 bg-rose-600 rounded-2xl">
<font-awesome-icon :icon="['fas', 'blog']"/>
</div>
<span class="px-4">最新博文</span>
</div>
<span class="px-4">最新博文</span>
<a class="bg-rose-500 rounded-2xl py-2 px-4" href="/blog/">
<font-awesome-icon :icon="['fas', 'chevron-right']"/>
</a>
</div>
<a class="bg-rose-500 rounded-2xl py-2 px-4" href="/blog/">
<font-awesome-icon :icon="['fas', 'chevron-right']"/>
</a>
</div>
<!-- 内容 -->
<div :class="{'justify-center': !hasPosts}" class="container flex">
<span v-if="!hasPosts" class="text-2xl font-bold">最近没有动态</span>
<div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 w-full">
<article-card v-for="item in recentPosts" :key="item.cid" :post="item"/>
<!-- 内容 -->
<div :class="{'justify-center': !hasPosts}" class="container flex">
<span v-if="!hasPosts" class="text-2xl font-bold">最近没有动态</span>
<div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 w-full">
<article-card v-for="item in recentPosts" :key="item.cid" :post="item"/>
</div>
</div>
</div>
</div>