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

54
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>

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>