peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
祝梦园 2023-08-28 12:59:49 +08:00
parent 12aa4bf27a
commit 921cd9cc05
4 changed files with 107 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
components/archive/list.vue
View File

@ -1,51 +1,41 @@
<template> <template>
<el-row class="wrapper"> <div class="wrapper">
<el-col :xs="24" :sm="24" :xl="24" style="margin: 0 auto;"> <el-row>
<el-col v-for="article in articles.list" :key="article.idArticle" style="padding-bottom: 1rem;"> <el-col :xs="24" :sm="24" :xl="24">
<el-card>
<div class="card-body d-flex flex-column"> <el-col v-for="article in articles.list" :key="article.idArticle" style="padding-bottom: 1rem;">
<el-link :href="article.articleLink" style="margin-bottom: .5rem;"> <el-card style="cursor: pointer" @click.native="routerArticle(article.articleLink)">
<h4> <div class="card-body d-flex flex-column">
<span v-if="isPerfect(article.articlePerfect)" style="color: gold;" title="优选"> <span v-if="isPerfect(article.articlePerfect)" style="color: gold;" title="优选">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
style="fill: #FFB71B;"><path style="fill: #FFB71B;"><path
d="M12 22c3.859 0 7-3.141 7-7s-3.141-7-7-7c-3.86 0-7 3.141-7 7s3.14 7 7 7zm0-12c2.757 0 5 2.243 5 5s-2.243 5-5 5-5-2.243-5-5 2.243-5 5-5zm-1-8H7v5.518a8.957 8.957 0 0 1 4-1.459V2zm6 0h-4v4.059a8.957 8.957 0 0 1 4 1.459V2z"></path><path d="M12 22c3.859 0 7-3.141 7-7s-3.141-7-7-7c-3.86 0-7 3.141-7 7s3.14 7 7 7zm0-12c2.757 0 5 2.243 5 5s-2.243 5-5 5-5-2.243-5-5 2.243-5 5-5zm-1-8H7v5.518a8.957 8.957 0 0 1 4-1.459V2zm6 0h-4v4.059a8.957 8.957 0 0 1 4 1.459V2z"></path><path
d="m10.019 15.811-.468 2.726L12 17.25l2.449 1.287-.468-2.726 1.982-1.932-2.738-.398L12 11l-1.225 2.481-2.738.398z"></path></svg> d="m10.019 15.811-.468 2.726L12 17.25l2.449 1.287-.468-2.726 1.982-1.932-2.738-.398L12 11l-1.225 2.481-2.738.398z"></path></svg>
</span> </span>
<span v-html="article.articleTitle"></span> <span style="font-size: 20px" v-html="article.articleTitle"> </span>
</h4> <el-tag size="mini" v-for="tag in article.tags" :key="tag.idTag" style="margin-right: 10px"> {{ tag.tagTitle }}</el-tag>
</el-link>
<el-tag <div style="min-height: 100px" class="text-muted article-summary-md" v-html="article.articlePreviewContent"></div>
style="margin-left: 0.5rem;" <el-row>
v-for="tag in article.tags" <el-col :xs="3" :sm="1" :xl="1" class="mr-3">
:key="tag.idTag" <el-avatar v-if="article.articleAuthorAvatarUrl" size="medium"
size="mini" :src="article.articleAuthorAvatarUrl"></el-avatar>
effect="plain"> <el-avatar v-else size="medium"
# {{ tag.tagTitle }} src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
</el-tag> </el-col>
<div class="text-muted article-summary-md" v-html="article.articlePreviewContent"></div> <el-col :xs="20" :sm="20" :xl="20">
<el-row class="pt-5">
<el-col :xs="3" :sm="1" :xl="1" class="mr-3">
<el-avatar v-if="article.articleAuthorAvatarUrl" size="medium"
:src="article.articleAuthorAvatarUrl"></el-avatar>
<el-avatar v-else size="medium"
src="https://static.rymcu.com/article/1578475481946.png"></el-avatar>
</el-col>
<el-col :xs="16" :sm="16" :xl="16">
<div>
<el-link target="_blank" :href="'/user/' + article.articleAuthor.userAccount" class="text-default"> <el-link target="_blank" :href="'/user/' + article.articleAuthor.userAccount" class="text-default">
{{ article.articleAuthorName }} {{ article.articleAuthorName }}
</el-link> </el-link>
<small class="d-block text-muted">{{ article.timeAgo }}</small> <small class="d-block text-muted">{{ article.timeAgo }}</small>
</div> </el-col>
</el-col> <el-col class="text-right" :xs="1" :sm="2" :xl="2" style="margin-top: 10px">
<el-col class="text-right"> <el-link rel="nofollow" :underline="false" title="总浏览数"><i class="el-icon-s-data" style="color: #C0C4CC;"></i><span
<el-link rel="nofollow" :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: #C0C4CC;">{{ article.articleViewCount }}</span>
style="color: red;">{{ article.articleViewCount }}</span> </el-link>
</el-link> </el-col>
</el-col> </el-row>
</el-row> </div>
</div>
</el-card> </el-card>
</el-col> </el-col>
<el-col> <el-col>
@ -61,8 +51,9 @@
</el-pagination> </el-pagination>
</div> </div>
</el-col> </el-col>
</el-col> </el-col>
</el-row> </el-row>
</div>
</template> </template>
<script> <script>
@ -79,7 +70,12 @@ export default {
}, },
isPerfect(articlePerfect) { isPerfect(articlePerfect) {
return articlePerfect === '1'; return articlePerfect === '1';
},
routerArticle(row) {
this.$router.push(row)
} }
} }
} }
</script> </script>

21
components/layouts/pc/header.vue
View File

@ -1,12 +1,10 @@
<template> <template>
<el-row :gutter="20" justify="space-between" type="flex"> <el-row :gutter="20" justify="space-between" type="flex">
<el-col :md="4" :span="4" :xs="8"> <el-col :md="4" :span="4" :xs="8">
<a class="navbar-brand" href="/" rel="nofollow"> <a class="navbar-brand" href="/" rel="nofollow">
<img alt="RYMCU" class="navbar-brand-img" src="@/assets/rymcu.png"> <img alt="RYMCU" class="navbar-brand-img" src="@/assets/rymcu.png">
</a> </a>
</el-col> </el-col>
<el-col :md="14" :span="10" :xs="0" style="max-height: 58px;overflow: hidden"> <el-col :md="14" :span="10" :xs="0" style="max-height: 58px;overflow: hidden">
<el-menu :default-active="activeMenu" @select="handleSelectMenu" mode="horizontal" <el-menu :default-active="activeMenu" @select="handleSelectMenu" mode="horizontal"
style="margin-top: -2px;border: 0;"> style="margin-top: -2px;border: 0;">
@ -18,7 +16,7 @@
</el-menu> </el-menu>
</el-col> </el-col>
<el-col :md="10" :span="10" :xs="16" style="line-height: 60px"> <el-col :md="10" :span="10" :xs="16" style="margin-top: 12px">
<client-only> <client-only>
<el-col style="text-align: right;" v-if="loggedIn"> <el-col style="text-align: right;" v-if="loggedIn">
<el-popover <el-popover
@ -39,7 +37,7 @@
</svg> </svg>
</el-button> </el-button>
</el-input> </el-input>
<el-button circle size="small" slot="reference"> <el-button circle size="small" slot="reference" style="background-color: transparent">
<svg height="14" style="fill: rgba(0, 0, 0, 1);" viewBox="0 0 24 24" width="14" <svg height="14" style="fill: rgba(0, 0, 0, 1);" viewBox="0 0 24 24" width="14"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<path <path
@ -49,6 +47,7 @@
</svg> </svg>
</el-button> </el-button>
</el-popover> </el-popover>
<el-link :underline="false" href="/portfolio/post" rel="nofollow" <el-link :underline="false" href="/portfolio/post" rel="nofollow"
style="padding-left: 10px;padding-right: 10px;">创建作品集 style="padding-left: 10px;padding-right: 10px;">创建作品集
</el-link> </el-link>
@ -171,6 +170,7 @@ export default {
this.getUnreadNotifications(); this.getUnreadNotifications();
} }
}, },
methods: { methods: {
querySearchAsync() { querySearchAsync() {
this.$router.push({ this.$router.push({
@ -329,6 +329,7 @@ export default {
.navbar-brand { .navbar-brand {
color: inherit; color: inherit;
margin-right: 1rem; margin-right: 1rem;
font-size: 1.25rem; font-size: 1.25rem;
white-space: nowrap; white-space: nowrap;
font-weight: 600; font-weight: 600;
@ -338,7 +339,7 @@ export default {
} }
.navbar-brand-img { .navbar-brand-img {
height: 3rem; height: 60px;
line-height: 3rem; line-height: 3rem;
vertical-align: top; vertical-align: top;
width: auto; width: auto;
@ -351,4 +352,14 @@ export default {
.search-result-type { .search-result-type {
padding-right: 5px; padding-right: 5px;
} }
.el-menu {
background-color: transparent !important;
}
.icon_sun {
cursor: pointer;
margin: 0 5px;
}
</style> </style>

46
components/layouts/pc/main.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<el-container> <el-container>
<el-header> <el-header>
<header-view/> <header-view v-bind="$attrs" v-on="$listeners"/>
</el-header> </el-header>
<el-main> <el-main>
<nuxt/> <nuxt/>
@ -33,27 +33,29 @@
</template> </template>
<script> <script>
import {mapState} from 'vuex'; import {mapState} from 'vuex';
import HeaderView from "./header"; import HeaderView from "./header";
import FooterView from "./footer"; import FooterView from "./footer";
import wx from "~/assets/weixin.png"; import wx from "~/assets/weixin.png";
import gzh from "~/assets/rymcugzh.jpg"; import gzh from "~/assets/rymcugzh.jpg";
export default { export default {
name: "PcMain", name: "PcMain",
components: { components: {
HeaderView, HeaderView,
FooterView FooterView
}, },
computed: { props: [],
...mapState('global', []),
isPostArticle() { computed: {
if (this.$route.name === 'article-post-article_id') { ...mapState('global', []),
return false; isPostArticle() {
} if (this.$route.name === 'article-post-article_id') {
return true; return false;
} }
}, return true;
}
},
data() { data() {
return { return {
isShow: false, isShow: false,
@ -84,7 +86,7 @@
<style scoped> <style scoped>
.el-header { .el-header {
/*padding-bottom: 1rem;*/ /*padding-bottom: 1rem;*/
background: #fff; /*background: #fff;*/
border-bottom: 1px solid rgba(0, 40, 100, 0.12); border-bottom: 1px solid rgba(0, 40, 100, 0.12);
z-index: 80; z-index: 80;
} }
@ -100,7 +102,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
padding-top: 1.2rem; padding-top: 1.2rem;
background: #fff; /*background: #fff;*/
border-top: 1px solid rgba(0, 40, 100, 0.12); border-top: 1px solid rgba(0, 40, 100, 0.12);
z-index: 80; z-index: 80;
} }

50
layouts/default.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div> <body >
<pc-main-view v-if="!isMobile"/> <pc-main-view v-if="!isMobile" />
<mobile-main-view v-else/> <mobile-main-view v-else/>
</div> </body>
</template> </template>
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
@ -15,25 +15,34 @@ export default Vue.extend({
PcMainView, PcMainView,
MobileMainView MobileMainView
}, },
computed: { computed: {
theme() { theme() {
return this.$store.state.global.theme return this.$store.state.global.theme
}, },
isMobile() { isMobile() {
return this.$store.state.global.isMobile return this.$store.state.global.isMobile
} },
},
methods: {
} }
}) })
</script> </script>
<style> <style>
body { body {
margin: 0; margin: 0;
display: block; display: block;
overflow-wrap: break-word; overflow-wrap: break-word;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
background-color: rgb(246, 247, 248); /*background-color: rgb(246, 247, 248);*/
overflow-x: hidden; overflow-x: hidden;
font-family: "PingFang SC", sans-serif;
} }
a, li { a, li {
@ -105,22 +114,27 @@ p {
} }
.article-summary-md { .article-summary-md {
position: relative;
line-height: 1.4em; line-height: 1.4em;
/* 3 times the line-height to show 3 lines */ margin: 10px 0;
height: 4.2em; min-height: 60px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-break: break-all;
} }
.article-summary-md::after { /*.article-summary-md::after {*/
content: "..."; /* content: "...";*/
font-weight: bold; /* font-weight: bold;*/
position: absolute; /* position: absolute;*/
bottom: 0; /* bottom: 0;*/
right: 0; /* right: 0;*/
padding: 0 20px 1px 45px; /* padding: 0 20px 1px 45px;*/
/*background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;*/ /* !*background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;*!*/
} /*}*/
.article-summary-sd { .article-summary-sd {
position: relative; position: relative;