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

💄 作品集 UI 更新

Browse Source
This commit is contained in:
ronger 2021-08-05 10:43:05 +08:00
parent e13326fa41
commit edd5d422a9
2 changed files with 168 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
components/common/portfolio/list.vue
View File

@ -1,36 +1,42 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<el-row class="row-cards row-deck" :gutter="20"> <el-row class="row-cards row-deck" :gutter="20">
<el-col :xs="24" :sm="10" :md="8" v-for="portfolio in portfolios.portfolios" :key="portfolio.idPortfolio"> <el-col :xs="24" :sm="12" :md="12" v-for="portfolio in portfolios.portfolios" :key="portfolio.idPortfolio">
<el-col v-if="portfolio.headImgUrl" style="margin-bottom: 20px;"> <el-col v-if="portfolio.headImgUrl" style="margin-bottom: 20px;">
<el-card :body-style="{ padding: '0px' }"> <el-card :body-style="{ padding: '20px' }">
<div style="padding: 0;"> <el-col :span="12">
<el-image :src="portfolio.headImgUrl" style="width:281px;height: 281px;" fit="cover"></el-image> <el-image :src="portfolio.headImgUrl" style="width:96px;height: 96px;border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;" fit="cover"
</div> :preview-src-list="[portfolio.headImgUrl]"></el-image>
<div style="padding: 0 10px;"> </el-col>
<h4 class="article-header-md"> <el-col :span="12" style="padding-top: 30px;text-align: right;">
<el-link rel="nofollow" @click="onRouter('portfolio',portfolio.idPortfolio)" :underline="false"> <el-button @click="onRouter('portfolio', portfolio.idPortfolio)" round>阅读</el-button>
</el-col>
<el-col style="padding-top: 20px;font-size: 16px;line-height: 22px;font-weight: 500;margin-bottom: 4px;">
<span v-html="portfolio.portfolioTitle"></span> <span v-html="portfolio.portfolioTitle"></span>
</el-link> </el-col>
</h4> <el-col style="padding-bottom: 20px;font-size: 14px;">
</div> <span>{{ portfolio.articleNumber || 0 }} 篇文章</span>
<div class="text-muted article-summary-md" v-html="portfolio.portfolioDescription"></div> </el-col>
</el-card> </el-card>
</el-col> </el-col>
<el-col v-else style="margin-bottom: 20px;"> <el-col v-else style="margin-bottom: 20px;">
<el-card :body-style="{ padding: '0px' }"> <el-card :body-style="{ padding: '20px' }">
<div style="padding: 0;"> <el-col :span="12">
<el-image style="width:281px;height: 281px;" fit="cover"> <el-image style="width:96px;height: 96px;border-radius: 10px;border: #f5f7fa solid 2px;">
<div slot="error" style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;">
无图片
</div>
</el-image> </el-image>
</div> </el-col>
<div style="padding: 0 10px;"> <el-col :span="12" style="padding-top: 30px;text-align: right;">
<h4 class="article-header-md"> <el-button @click="onRouter('portfolio', portfolio.idPortfolio)" round>阅读</el-button>
<el-link rel="nofollow" @click="onRouter('portfolio',portfolio.idPortfolio)" :underline="false"> </el-col>
{{ portfolio.portfolioTitle }} <el-col style="padding-top: 20px;font-size: 16px;line-height: 22px;font-weight: 500;margin-bottom: 4px;">
</el-link> <span v-html="portfolio.portfolioTitle"></span>
</h4> </el-col>
</div> <el-col style="padding-bottom: 20px;font-size: 14px;">
<div class="text-muted article-summary-md">{{ portfolio.portfolioDescription }}</div> <span>{{ portfolio.articleNumber || 0 }} 篇文章</span>
</el-col>
</el-card> </el-card>
</el-col> </el-col>
</el-col> </el-col>
@ -54,7 +60,7 @@
</template> </template>
<script> <script>
export default { export default {
name: "PortfolioList", name: "PortfolioList",
props: { props: {
portfolios: { portfolios: {
@ -73,22 +79,22 @@
this.$emit('currentChange', page); this.$emit('currentChange', page);
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
body { body {
overflow-x: hidden; overflow-x: hidden;
} }
.card { .card {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
position: relative; position: relative;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
width: 100%; width: 100%;
} }
.card { .card {
position: relative; position: relative;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@ -100,18 +106,18 @@
background-clip: border-box; background-clip: border-box;
border: 1px solid rgba(0, 40, 100, 0.12); border: 1px solid rgba(0, 40, 100, 0.12);
border-radius: 3px; border-radius: 3px;
} }
.card-profile .card-header { .card-profile .card-header {
height: 20rem; height: 20rem;
background-size: cover; background-size: cover;
} }
.card-header:first-child { .card-header:first-child {
border-radius: calc(3px - 1px) calc(3px - 1px) 0 0; border-radius: calc(3px - 1px) calc(3px - 1px) 0 0;
} }
.card-header { .card-header {
background: none; background: none;
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;
display: -ms-flexbox; display: -ms-flexbox;
@ -119,24 +125,24 @@
min-height: 3.5rem; min-height: 3.5rem;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
} }
.card-header { .card-header {
padding: 1.5rem 1.5rem; padding: 1.5rem 1.5rem;
margin-bottom: 0; margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.03); background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 40, 100, 0.12); border-bottom: 1px solid rgba(0, 40, 100, 0.12);
} }
.card-body { .card-body {
-ms-flex: 1; -ms-flex: 1;
flex: 1; flex: 1;
margin: 0; margin: 0;
padding: 1.5rem 1.5rem; padding: 1.5rem 1.5rem;
position: relative; position: relative;
} }
.card-profile-img { .card-profile-img {
max-width: 6rem; max-width: 6rem;
margin-top: -5rem; margin-top: -5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -144,52 +150,52 @@
border-radius: 100%; border-radius: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #ffffff; background-color: #ffffff;
} }
.card-img-top { .card-img-top {
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-top-right-radius: 3px; border-top-right-radius: 3px;
} }
.card-img-top { .card-img-top {
width: 100%; width: 100%;
border-top-left-radius: calc(3px - 1px); border-top-left-radius: calc(3px - 1px);
border-top-right-radius: calc(3px - 1px); border-top-right-radius: calc(3px - 1px);
} }
.mb-3, .my-3 { .mb-3, .my-3 {
margin-bottom: 0.75rem !important; margin-bottom: 0.75rem !important;
} }
h3, .h3 { h3, .h3 {
font-size: 1.5rem; font-size: 1.5rem;
} }
.mb-4, .my-4 { .mb-4, .my-4 {
margin-bottom: 1rem !important; margin-bottom: 1rem !important;
} }
.article-header-md { .article-header-md {
position: relative; position: relative;
line-height: 1.4em; line-height: 1.4em;
height: 1.4em; height: 1.4em;
overflow: hidden; overflow: hidden;
} }
.article-header-md a { .article-header-md a {
font-weight: bold; font-weight: bold;
font-size: 1em; font-size: 1em;
} }
.article-summary-md { .article-summary-md {
position: relative; position: relative;
line-height: 1.4em; line-height: 1.4em;
height: 4.2em; height: 4.2em;
overflow: hidden; overflow: hidden;
} }
.el-col-6 { .el-col-6 {
padding-right: 0.75rem; padding-right: 0.75rem;
padding-left: 0.75rem; padding-left: 0.75rem;
} }
</style> </style>

37
pages/portfolio/_portfolio_id.vue
View File

@ -1,34 +1,41 @@
<template> <template>
<el-row class="wrapper"> <el-row class="wrapper">
<el-col> <el-col style="padding: 20px;">
<el-col> <el-card :body-style="{ padding: '20px', borderRadius: '16px' }">
<el-col> <el-col style="padding-bottom: 20px;">
<el-col :span="6"> <el-col :span="8" v-if="portfolio.headImgUrl">
<el-image style="width: 200px;" :src="portfolio.headImgUrl"></el-image> <el-image style="width: 200px;height: 200px;border-radius: 16px;background: #f5f7fa;border: #f5f7fa solid 1px;" :src="portfolio.headImgUrl" :preview-src-list="[portfolio.headImgUrl]"></el-image>
</el-col>
<el-col :span="8" v-else>
<el-image style="width: 200px;height: 200px;border-radius: 16px;background: #f5f7fa;border: #f5f7fa solid 1px;">
<div slot="error" style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;">
无图片
</div>
</el-image>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-col> <el-col style="font-size: 24px;line-height: 34px;font-weight: 500;margin-bottom: 12px;">
<h1>{{ portfolio.portfolioTitle }}</h1> <span>{{ portfolio.portfolioTitle }}</span>
</el-col> </el-col>
<el-col style="margin-bottom: .5rem;"> <el-col style="font-size: 14px;">
<span class="text-default" style="padding-right: 1rem;">作者</span> <span style="padding-right: 1rem;">作者</span>
<el-link target="_blank" :href="'/user/' + portfolio.portfolioAuthor.userAccount" class="text-default"> <el-link target="_blank" :href="'/user/' + portfolio.portfolioAuthor.userAccount">
<el-avatar :src="portfolio.portfolioAuthorAvatarUrl" :size="16"></el-avatar> <el-avatar :src="portfolio.portfolioAuthorAvatarUrl" :size="16"></el-avatar>
{{ portfolio.portfolioAuthorName }} {{ portfolio.portfolioAuthorName }}
</el-link> </el-link>
</el-col> </el-col>
<el-col style="margin-bottom: .5rem;"> <el-col style="font-size: 14px;">
<span class="text-default" style="padding-right: 1rem;">文章</span> {{portfolio.articleNumber}}篇 <span style="padding-right: 1rem;">文章</span> {{portfolio.articleNumber}} 篇
</el-col> </el-col>
<el-col style="margin-bottom: .5rem;" v-html="portfolio.portfolioDescription"></el-col> <el-col style="margin-bottom: .5rem;font-size: 14px;" v-html="portfolio.portfolioDescription"></el-col>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="22">
<el-col v-if="isAuthor" style="margin-top: .5rem;text-align: right;"> <el-col v-if="isAuthor" style="margin-top: .5rem;text-align: right;">
<el-button @click="managerPortfolio(portfolio.idPortfolio)" plain>管理</el-button> <el-button @click="managerPortfolio(portfolio.idPortfolio)" plain>管理</el-button>
</el-col> </el-col>
</el-col> </el-col>
</el-col> </el-col>
</el-col> </el-card>
</el-col> </el-col>
<el-col> <el-col>
<el-divider></el-divider> <el-divider></el-divider>