💄 作品集 UI 更新

This commit is contained in:
ronger 2021-08-11 13:31:32 +08:00
parent edd5d422a9
commit 880e2c87ba

View File

@ -4,11 +4,15 @@
<el-card :body-style="{ padding: '20px', borderRadius: '16px' }">
<el-col style="padding-bottom: 20px;">
<el-col :span="8" v-if="portfolio.headImgUrl">
<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-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;">
<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>
@ -25,7 +29,7 @@
</el-link>
</el-col>
<el-col style="font-size: 14px;">
<span style="padding-right: 1rem;">文章</span> {{portfolio.articleNumber}}
<span style="padding-right: 1rem;">文章</span> {{ portfolio.articleNumber || 0 }}
</el-col>
<el-col style="margin-bottom: .5rem;font-size: 14px;" v-html="portfolio.portfolioDescription"></el-col>
</el-col>
@ -47,10 +51,10 @@
</template>
<script>
import {mapState} from 'vuex';
import ArticleList from "../../components/archive/list";
import {mapState} from 'vuex';
import ArticleList from "../../components/archive/list";
export default {
export default {
name: "PortfolioDetail",
components: {ArticleList},
validate({params, store}) {
@ -166,7 +170,7 @@
mounted() {
this.$store.commit('setActiveMenu', 'portfolioDetail');
}
}
}
</script>
<style scoped>