parent
071afe3388
commit
e4ba339b5c
@ -1,16 +1,25 @@
|
||||
<template>
|
||||
<div
|
||||
class="m-banner animate__animated animate__slideInDown"
|
||||
:style="{ background: 'url(' + props.bannerUrl + ') center center / cover no-repeat' }"
|
||||
:style="{ background: 'url(' + bannerUrl + ') center center / cover no-repeat' }"
|
||||
class="m-banner animate__animated animate__fadeInDown"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { getPageByName } from '@/api/page.js'
|
||||
|
||||
const props = defineProps({
|
||||
bannerUrl: String
|
||||
const route = useRoute()
|
||||
const bannerUrl = ref('')
|
||||
|
||||
onMounted(async () => {
|
||||
bannerUrl.value = (await getPageByName(route.name)).data.bannerUrl
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.animate__fadeInDown {
|
||||
--animate-duration: 1.7s;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<el-card shadow="hover" class="user-info">
|
||||
<!-- 头像 -->
|
||||
<div class="avatar">
|
||||
<el-avatar :size="100" :src="userInfo.avatar" />
|
||||
</div>
|
||||
<!-- 名称 -->
|
||||
<h2>{{ userInfo.name }}</h2>
|
||||
<!-- 简述 -->
|
||||
<p>{{ userInfo.description }}</p>
|
||||
<!-- 分类统计 -->
|
||||
<div class="classification">
|
||||
<div class="class-item">
|
||||
<router-link to="/tags">
|
||||
<div>标签</div>
|
||||
<div class="class-item-nums">{{ userInfo.tags }}</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="class-item">
|
||||
<router-link to="/categories">
|
||||
<div>分类</div>
|
||||
<div class="class-item-nums">{{ userInfo.categories }}</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="class-item">
|
||||
<router-link to="/archives">
|
||||
<div>归档</div>
|
||||
<div class="class-item-nums">{{ userInfo.archives }}</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 一些图标 -->
|
||||
<div class="icons">
|
||||
<a :href="userInfo.github"><svg-icon name="github"></svg-icon></a>
|
||||
<a :href="userInfo.gitee"><svg-icon name="gitee"></svg-icon></a>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const userInfo = ref({
|
||||
name: 'Liuyx',
|
||||
avatar: 'https://liuyxcc.github.io/img/avatar.png',
|
||||
description: '抓住现在，做好自己',
|
||||
tags: 0,
|
||||
categories: 0,
|
||||
archives: 0,
|
||||
github: 'https://github.com/liuyxcc',
|
||||
gitee: 'https://gitee.com/liuyxcc'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-card {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.user-info {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
.avatar {
|
||||
}
|
||||
.classification {
|
||||
display: flex;
|
||||
padding: 20px 10px;
|
||||
box-sizing: border-box;
|
||||
.class-item {
|
||||
width: 33.3%;
|
||||
.class-item-nums {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icons {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +1,43 @@
|
||||
<template>
|
||||
<Banner :bannerUrl="data.bannerUrl" />
|
||||
<Banner />
|
||||
<div class="m-content">
|
||||
<el-card shadow="hover">Archives</el-card>
|
||||
<el-card>
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="article in articleList"
|
||||
:key="article._id"
|
||||
:timestamp="article.createTime"
|
||||
type="primary"
|
||||
>
|
||||
<router-link :to="'/articles/' + article._id">
|
||||
{{ article.title }}
|
||||
</router-link>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Banner from '@/components/Banner.vue'
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getArticleList } from '@/api/article.js'
|
||||
|
||||
const data = ref({
|
||||
bannerUrl: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-1p38v3.png'
|
||||
const articleList = ref([])
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await getArticleList()
|
||||
articleList.value = data.articleList
|
||||
// console.log(articleList.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.el-timeline {
|
||||
padding: 20px 40px;
|
||||
font-size: 17px;
|
||||
.el-timeline-item {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,27 +1,278 @@
|
||||
<!--
|
||||
* @Author: liuyx 1517482303@qq.com
|
||||
* @Date: 2022-11-10 08:03:12
|
||||
* @LastEditTime: 2022-12-19 07:44:43
|
||||
* @Description: 主页
|
||||
-->
|
||||
<template>
|
||||
<div class="home-banner animate__animated animate__fadeIn"></div>
|
||||
<div class="m-content">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="18">
|
||||
<BlogList />
|
||||
</el-col>
|
||||
<el-col :span="6"
|
||||
><div class="grid-content ep-bg-purple" />
|
||||
<UserInfo />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div
|
||||
class="home-banner animate__animated animate__fadeIn animate__slow"
|
||||
:style="{ background: 'url(' + bannerUrl + ') center center / cover no-repeat' }"
|
||||
>
|
||||
<h1 class="site-name">{{ siteName }}</h1>
|
||||
</div>
|
||||
<div class="home-content">
|
||||
<div class="article-list">
|
||||
<el-card
|
||||
class="card-box animate__animated animate__zoomIn"
|
||||
v-for="item in blogList"
|
||||
:key="item"
|
||||
>
|
||||
<div class="article-item">
|
||||
<!-- 文章图片 -->
|
||||
<div class="cover-container">
|
||||
<router-link :to="'/articles/' + item._id">
|
||||
<img :src="item.cover" alt="" class="cover" />
|
||||
</router-link>
|
||||
</div>
|
||||
<!-- 文章标题和简述 -->
|
||||
<div class="article-content">
|
||||
<router-link :to="'/articles/' + item._id">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
</router-link>
|
||||
<div class="article-info">
|
||||
<span><svg-icon name="calendar" class="icon"></svg-icon>{{ item.createTime }}</span>
|
||||
<span class="separator">|</span>
|
||||
<span><svg-icon name="category" class="icon"></svg-icon>{{ item.category }}</span>
|
||||
<span class="separator">|</span>
|
||||
<span v-for="tag in item.tagList" :key="tag._id"
|
||||
><svg-icon name="tag" class="icon"></svg-icon>{{ tag.name }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="description">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="site-info">
|
||||
<div class="info-container">
|
||||
<el-card class="animate__animated animate__zoomIn">
|
||||
<!-- 头像 -->
|
||||
<div class="avatar">
|
||||
<el-avatar :size="100" :src="siteInfo.avatar" />
|
||||
</div>
|
||||
<!-- 名称 -->
|
||||
<h2>{{ siteInfo.author }}</h2>
|
||||
<!-- 简述 -->
|
||||
<p>{{ siteInfo.intro }}</p>
|
||||
<!-- 分类统计 -->
|
||||
<div class="classification">
|
||||
<div class="class-item">
|
||||
<router-link to="/tags">
|
||||
<div>标签</div>
|
||||
<div class="class-item-nums">{{ tagNum }}</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="class-item">
|
||||
<router-link to="/categories">
|
||||
<div>分类</div>
|
||||
<div class="class-item-nums">{{ categoryNum }}</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="class-item">
|
||||
<router-link to="/archives">
|
||||
<div>归档</div>
|
||||
<div class="class-item-nums">{{ archiveNum }}</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 一些图标 -->
|
||||
<div class="icons">
|
||||
<a :href="siteInfo.github"><svg-icon name="github"></svg-icon></a>
|
||||
<a :href="siteInfo.gitee"><svg-icon name="gitee"></svg-icon></a>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="notice animate__animated animate__zoomIn">
|
||||
<h3 style="margin-bottom: 10px"><svg-icon name="notice" /> 公告</h3>
|
||||
{{ siteInfo.notice }}
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BlogList from '../../components/BlogList.vue'
|
||||
import UserInfo from '../../components/UserInfo.vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getSiteInfo } from '../../api/site'
|
||||
import { getArticleList } from '../../api/article'
|
||||
import { getPageByName } from '@/api/page.js'
|
||||
|
||||
const siteName = ref('')
|
||||
const blogList = ref([])
|
||||
const siteInfo = ref({})
|
||||
const tagNum = ref(0)
|
||||
const categoryNum = ref(0)
|
||||
const archiveNum = ref(0)
|
||||
const bannerUrl = ref('')
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await getSiteInfo()
|
||||
siteName.value = data.siteName
|
||||
bannerUrl.value = (await getPageByName('首页')).data.bannerUrl
|
||||
getBlogList()
|
||||
getInfo()
|
||||
})
|
||||
|
||||
const getBlogList = async () => {
|
||||
const { data } = await getArticleList()
|
||||
blogList.value = data.articleList
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const getInfo = async () => {
|
||||
const { data } = await getSiteInfo()
|
||||
console.log(data)
|
||||
siteInfo.value = data
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home-banner {
|
||||
background: url('https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-x6l5vl.jpg')
|
||||
center center / cover no-repeat;
|
||||
// background: url('http://cdn.liuyx.cc/wallhaven-m3dm1k.png') center center / cover no-repeat;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.site-name {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
color: #eee;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
}
|
||||
.home-content {
|
||||
display: flex;
|
||||
margin: 20px auto;
|
||||
}
|
||||
@media screen and (min-width: 960px) {
|
||||
.home-content {
|
||||
width: 80%;
|
||||
.article-list {
|
||||
width: 75%;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.site-info {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.home-content {
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.card-box {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.article-item {
|
||||
display: flex;
|
||||
height: 256px;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
.cover-container {
|
||||
overflow: hidden;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
}
|
||||
.cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-top-left-radius: 11px;
|
||||
border-bottom-left-radius: 11px;
|
||||
transform: scale(1);
|
||||
transition: transform 1s ease 0s;
|
||||
overflow: hidden;
|
||||
}
|
||||
&:hover .cover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.article-content {
|
||||
padding: 0 40px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
font-size: 1.35em;
|
||||
&:hover {
|
||||
color: #8e8cd8;
|
||||
}
|
||||
}
|
||||
.article-info {
|
||||
font-size: 0.85em;
|
||||
margin: 0.85em 0;
|
||||
}
|
||||
.separator {
|
||||
margin: 0 8px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
.icon {
|
||||
vertical-align: -0.33em;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.description {
|
||||
margin-top: 15px;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.article-item {
|
||||
display: block;
|
||||
height: inherit;
|
||||
.cover-container {
|
||||
width: 100vw;
|
||||
.cover {
|
||||
border-radius: 11px 11px 0 0 !important;
|
||||
}
|
||||
}
|
||||
.article-content {
|
||||
height: 202px;
|
||||
padding: 20px 30px;
|
||||
.description {
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-container {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
.avatar {
|
||||
}
|
||||
.classification {
|
||||
display: flex;
|
||||
padding: 20px 10px;
|
||||
box-sizing: border-box;
|
||||
.class-item {
|
||||
width: 33.3%;
|
||||
.class-item-nums {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icons {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.notice {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue