涧川
GitHub
commit
9a5fafcff3
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<header-view/>
|
||||
<header-view v-bind="$attrs" v-on="$listeners"/>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<nuxt/>
|
||||
@ -45,6 +45,8 @@
|
||||
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;
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<body >
|
||||
<pc-main-view v-if="!isMobile" />
|
||||
<mobile-main-view v-else/>
|
||||
</div>
|
||||
</body>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
@ -15,25 +15,34 @@ export default Vue.extend({
|
||||
PcMainView,
|
||||
MobileMainView
|
||||
},
|
||||
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.state.global.theme
|
||||
},
|
||||
isMobile() {
|
||||
return this.$store.state.global.isMobile
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: block;
|
||||
overflow-wrap: break-word;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: rgb(246, 247, 248);
|
||||
/*background-color: rgb(246, 247, 248);*/
|
||||
overflow-x: hidden;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
|
||||
|
||||
}
|
||||
|
||||
a, li {
|
||||
@ -105,22 +114,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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user