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

💄 文章列表样式调整

Browse Source 
文章列表样式调整
This commit is contained in:
ronger 2023-08-30 20:15:18 +08:00 committed by GitHub
commit ad31bdc5df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 103 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/archive/list.vue
View File

@ -1,47 +1,37 @@
<template>
<el-row class="wrapper">
<el-col :xs="24" :sm="24" :xl="24" style="margin: 0 auto;">
<div class="wrapper">
<el-row>
<el-col :xs="24" :sm="24" :xl="24">
<el-col v-for="article in articles.list" :key="article.idArticle" style="padding-bottom: 1rem;">
<el-card>
<el-card style="cursor: pointer" @click.native="routerArticle(article.articleLink)">
<div class="card-body d-flex flex-column">
<el-link :href="article.articleLink" style="margin-bottom: .5rem;">
<h4>
<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"
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="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 v-html="article.articleTitle"></span>
</h4>
</el-link>
<el-tag
style="margin-left: 0.5rem;"
v-for="tag in article.tags"
:key="tag.idTag"
size="mini"
effect="plain">
# {{ tag.tagTitle }}
</el-tag>
<div class="text-muted article-summary-md" v-html="article.articlePreviewContent"></div>
<el-row class="pt-5">
<span style="font-size: 20px" v-html="article.articleTitle"> </span>
<el-tag size="mini" v-for="tag in article.tags" :key="tag.idTag" style="margin-right: 10px"> {{ tag.tagTitle }}</el-tag>
<div style="min-height: 100px" class="text-muted article-summary-md" v-html="article.articlePreviewContent"></div>
<el-row>
<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-col :xs="20" :sm="20" :xl="20">
<el-link target="_blank" :href="'/user/' + article.articleAuthor.userAccount" class="text-default">
{{ article.articleAuthorName }}
</el-link>
<small class="d-block text-muted">{{ article.timeAgo }}</small>
</div>
</el-col>
<el-col class="text-right">
<el-link rel="nofollow" :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span
style="color: red;">{{ article.articleViewCount }}</span>
<el-col class="text-right" :xs="1" :sm="2" :xl="2" style="margin-top: 10px">
<el-link rel="nofollow" :underline="false" title="总浏览数"><i class="el-icon-s-data" style="color: #C0C4CC;"></i><span
style="color: #C0C4CC;">{{ article.articleViewCount }}</span>
</el-link>
</el-col>
</el-row>
@ -63,6 +53,7 @@
</el-col>
</el-col>
</el-row>
</div>
</template>
<script>
@ -79,7 +70,12 @@ export default {
},
isPerfect(articlePerfect) {
return articlePerfect === '1';
},
routerArticle(row) {
this.$router.push(row)
}
}
}
</script>

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

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

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

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

43
layouts/default.vue
View File

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