parent
071afe3388
commit
e4ba339b5c
@ -1,16 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="m-banner animate__animated animate__slideInDown"
|
:style="{ background: 'url(' + bannerUrl + ') center center / cover no-repeat' }"
|
||||||
:style="{ background: 'url(' + props.bannerUrl + ') center center / cover no-repeat' }"
|
class="m-banner animate__animated animate__fadeInDown"
|
||||||
></div>
|
></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<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({
|
const route = useRoute()
|
||||||
bannerUrl: String
|
const bannerUrl = ref('')
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
bannerUrl.value = (await getPageByName(route.name)).data.bannerUrl
|
||||||
})
|
})
|
||||||
</script>
|
</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>
|
<template>
|
||||||
<Banner :bannerUrl="data.bannerUrl" />
|
<Banner />
|
||||||
<div class="m-content">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import Banner from '@/components/Banner.vue'
|
import Banner from '@/components/Banner.vue'
|
||||||
import { ref } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { getArticleList } from '@/api/article.js'
|
||||||
|
|
||||||
const data = ref({
|
const articleList = ref([])
|
||||||
bannerUrl: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-1p38v3.png'
|
|
||||||
|
onMounted(async () => {
|
||||||
|
const { data } = await getArticleList()
|
||||||
|
articleList.value = data.articleList
|
||||||
|
// console.log(articleList.value)
|
||||||
})
|
})
|
||||||
</script>
|
</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>
|
<template>
|
||||||
<div class="home-banner animate__animated animate__fadeIn"></div>
|
<div
|
||||||
<div class="m-content">
|
class="home-banner animate__animated animate__fadeIn animate__slow"
|
||||||
<el-row :gutter="20">
|
:style="{ background: 'url(' + bannerUrl + ') center center / cover no-repeat' }"
|
||||||
<el-col :span="18">
|
>
|
||||||
<BlogList />
|
<h1 class="site-name">{{ siteName }}</h1>
|
||||||
</el-col>
|
</div>
|
||||||
<el-col :span="6"
|
<div class="home-content">
|
||||||
><div class="grid-content ep-bg-purple" />
|
<div class="article-list">
|
||||||
<UserInfo />
|
<el-card
|
||||||
</el-col>
|
class="card-box animate__animated animate__zoomIn"
|
||||||
</el-row>
|
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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import BlogList from '../../components/BlogList.vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import UserInfo from '../../components/UserInfo.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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.home-banner {
|
.home-banner {
|
||||||
background: url('https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/wallhaven-x6l5vl.jpg')
|
// background: url('http://cdn.liuyx.cc/wallhaven-m3dm1k.png') center center / cover no-repeat;
|
||||||
center center / cover no-repeat;
|
|
||||||
height: 100vh;
|
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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in new issue