From edd5d422a9acdf0ec8f7d383dfb03fd1855a20ad Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Thu, 5 Aug 2021 10:43:05 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20=E4=BD=9C=E5=93=81=E9=9B=86=20UI?=
 =?UTF-8?q?=20=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/portfolio/list.vue | 286 ++++++++++++++-------------
 pages/portfolio/_portfolio_id.vue    |  37 ++--
 2 files changed, 168 insertions(+), 155 deletions(-)

diff --git a/components/common/portfolio/list.vue b/components/common/portfolio/list.vue
index 8112f98..eac6477 100644
--- a/components/common/portfolio/list.vue
+++ b/components/common/portfolio/list.vue
@@ -1,36 +1,42 @@
 <template>
   <div class="wrapper">
     <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-card :body-style="{ padding: '0px' }">
-            <div style="padding: 0;">
-              <el-image :src="portfolio.headImgUrl" style="width:281px;height: 281px;" fit="cover"></el-image>
-            </div>
-            <div style="padding: 0 10px;">
-              <h4 class="article-header-md">
-                <el-link rel="nofollow" @click="onRouter('portfolio',portfolio.idPortfolio)" :underline="false">
-                  <span v-html="portfolio.portfolioTitle"></span>
-                </el-link>
-              </h4>
-            </div>
-            <div class="text-muted article-summary-md" v-html="portfolio.portfolioDescription"></div>
+          <el-card :body-style="{ padding: '20px' }">
+            <el-col :span="12">
+              <el-image :src="portfolio.headImgUrl" style="width:96px;height: 96px;border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;" fit="cover"
+                        :preview-src-list="[portfolio.headImgUrl]"></el-image>
+            </el-col>
+            <el-col :span="12" style="padding-top: 30px;text-align: right;">
+              <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>
+            </el-col>
+            <el-col style="padding-bottom: 20px;font-size: 14px;">
+              <span>{{ portfolio.articleNumber || 0 }} 篇文章</span>
+            </el-col>
           </el-card>
         </el-col>
         <el-col v-else style="margin-bottom: 20px;">
-          <el-card :body-style="{ padding: '0px' }">
-            <div style="padding: 0;">
-              <el-image style="width:281px;height: 281px;" fit="cover">
+          <el-card :body-style="{ padding: '20px' }">
+            <el-col :span="12">
+              <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>
-            </div>
-            <div style="padding: 0 10px;">
-              <h4 class="article-header-md">
-                <el-link rel="nofollow" @click="onRouter('portfolio',portfolio.idPortfolio)" :underline="false">
-                  {{ portfolio.portfolioTitle }}
-                </el-link>
-              </h4>
-            </div>
-            <div class="text-muted article-summary-md">{{ portfolio.portfolioDescription }}</div>
+            </el-col>
+            <el-col :span="12" style="padding-top: 30px;text-align: right;">
+              <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>
+            </el-col>
+            <el-col style="padding-bottom: 20px;font-size: 14px;">
+              <span>{{ portfolio.articleNumber || 0 }} 篇文章</span>
+            </el-col>
           </el-card>
         </el-col>
       </el-col>
@@ -54,142 +60,142 @@
 </template>
 
 <script>
-  export default {
-    name: "PortfolioList",
-    props: {
-      portfolios: {
-        type: Object
-      }
+export default {
+  name: "PortfolioList",
+  props: {
+    portfolios: {
+      type: Object
+    }
+  },
+  methods: {
+    onRouter(name, data) {
+      this.$router.push(
+        {
+          path: `/${name}/${data}`
+        }
+      )
     },
-    methods: {
-      onRouter(name, data) {
-        this.$router.push(
-          {
-            path: `/${name}/${data}`
-          }
-        )
-      },
-      currentChange(page) {
-        this.$emit('currentChange', page);
-      }
+    currentChange(page) {
+      this.$emit('currentChange', page);
     }
   }
+}
 </script>
 
 <style scoped>
-  body {
-    overflow-x: hidden;
-  }
+body {
+  overflow-x: hidden;
+}
 
-  .card {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    position: relative;
-    margin-bottom: 1.5rem;
-    width: 100%;
-  }
+.card {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  position: relative;
+  margin-bottom: 1.5rem;
+  width: 100%;
+}
 
-  .card {
-    position: relative;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    min-width: 0;
-    word-wrap: break-word;
-    background-color: #fff;
-    background-clip: border-box;
-    border: 1px solid rgba(0, 40, 100, 0.12);
-    border-radius: 3px;
-  }
+.card {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+}
 
-  .card-profile .card-header {
-    height: 20rem;
-    background-size: cover;
-  }
+.card-profile .card-header {
+  height: 20rem;
+  background-size: cover;
+}
 
-  .card-header:first-child {
-    border-radius: calc(3px - 1px) calc(3px - 1px) 0 0;
-  }
+.card-header:first-child {
+  border-radius: calc(3px - 1px) calc(3px - 1px) 0 0;
+}
 
-  .card-header {
-    background: none;
-    padding: 0.5rem 1.5rem;
-    display: -ms-flexbox;
-    display: flex;
-    min-height: 3.5rem;
-    -ms-flex-align: center;
-    align-items: center;
-  }
+.card-header {
+  background: none;
+  padding: 0.5rem 1.5rem;
+  display: -ms-flexbox;
+  display: flex;
+  min-height: 3.5rem;
+  -ms-flex-align: center;
+  align-items: center;
+}
 
-  .card-header {
-    padding: 1.5rem 1.5rem;
-    margin-bottom: 0;
-    background-color: rgba(0, 0, 0, 0.03);
-    border-bottom: 1px solid rgba(0, 40, 100, 0.12);
-  }
+.card-header {
+  padding: 1.5rem 1.5rem;
+  margin-bottom: 0;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-bottom: 1px solid rgba(0, 40, 100, 0.12);
+}
 
-  .card-body {
-    -ms-flex: 1;
-    flex: 1;
-    margin: 0;
-    padding: 1.5rem 1.5rem;
-    position: relative;
-  }
+.card-body {
+  -ms-flex: 1;
+  flex: 1;
+  margin: 0;
+  padding: 1.5rem 1.5rem;
+  position: relative;
+}
 
-  .card-profile-img {
-    max-width: 6rem;
-    margin-top: -5rem;
-    margin-bottom: 1rem;
-    border: 3px solid #fff;
-    border-radius: 100%;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-    background-color: #ffffff;
-  }
+.card-profile-img {
+  max-width: 6rem;
+  margin-top: -5rem;
+  margin-bottom: 1rem;
+  border: 3px solid #fff;
+  border-radius: 100%;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+}
 
-  .card-img-top {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-  }
+.card-img-top {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
 
-  .card-img-top {
-    width: 100%;
-    border-top-left-radius: calc(3px - 1px);
-    border-top-right-radius: calc(3px - 1px);
-  }
+.card-img-top {
+  width: 100%;
+  border-top-left-radius: calc(3px - 1px);
+  border-top-right-radius: calc(3px - 1px);
+}
 
-  .mb-3, .my-3 {
-    margin-bottom: 0.75rem !important;
-  }
+.mb-3, .my-3 {
+  margin-bottom: 0.75rem !important;
+}
 
-  h3, .h3 {
-    font-size: 1.5rem;
-  }
+h3, .h3 {
+  font-size: 1.5rem;
+}
 
-  .mb-4, .my-4 {
-    margin-bottom: 1rem !important;
-  }
+.mb-4, .my-4 {
+  margin-bottom: 1rem !important;
+}
 
-  .article-header-md {
-    position: relative;
-    line-height: 1.4em;
-    height: 1.4em;
-    overflow: hidden;
-  }
+.article-header-md {
+  position: relative;
+  line-height: 1.4em;
+  height: 1.4em;
+  overflow: hidden;
+}
 
-  .article-header-md a {
-    font-weight: bold;
-    font-size: 1em;
-  }
+.article-header-md a {
+  font-weight: bold;
+  font-size: 1em;
+}
 
-  .article-summary-md {
-    position: relative;
-    line-height: 1.4em;
-    height: 4.2em;
-    overflow: hidden;
-  }
+.article-summary-md {
+  position: relative;
+  line-height: 1.4em;
+  height: 4.2em;
+  overflow: hidden;
+}
 
-  .el-col-6 {
-    padding-right: 0.75rem;
-    padding-left: 0.75rem;
-  }
+.el-col-6 {
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+}
 </style>
diff --git a/pages/portfolio/_portfolio_id.vue b/pages/portfolio/_portfolio_id.vue
index 795d443..0438266 100644
--- a/pages/portfolio/_portfolio_id.vue
+++ b/pages/portfolio/_portfolio_id.vue
@@ -1,34 +1,41 @@
 <template>
   <el-row class="wrapper">
-    <el-col>
-      <el-col>
-        <el-col>
-          <el-col :span="6">
-            <el-image style="width: 200px;" :src="portfolio.headImgUrl"></el-image>
+    <el-col style="padding: 20px;">
+      <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-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 :span="12">
-            <el-col>
-              <h1>{{ portfolio.portfolioTitle }}</h1>
+            <el-col style="font-size: 24px;line-height: 34px;font-weight: 500;margin-bottom: 12px;">
+              <span>{{ portfolio.portfolioTitle }}</span>
             </el-col>
-            <el-col style="margin-bottom: .5rem;">
-              <span class="text-default" style="padding-right: 1rem;">作者</span>
-              <el-link target="_blank" :href="'/user/' + portfolio.portfolioAuthor.userAccount" class="text-default">
+            <el-col style="font-size: 14px;">
+              <span style="padding-right: 1rem;">作者</span>
+              <el-link target="_blank" :href="'/user/' + portfolio.portfolioAuthor.userAccount">
                 <el-avatar :src="portfolio.portfolioAuthorAvatarUrl" :size="16"></el-avatar>
                 {{ portfolio.portfolioAuthorName }}
               </el-link>
             </el-col>
-            <el-col style="margin-bottom: .5rem;">
-              <span class="text-default" style="padding-right: 1rem;">文章</span> {{portfolio.articleNumber}}篇
+            <el-col style="font-size: 14px;">
+              <span style="padding-right: 1rem;">文章</span> {{portfolio.articleNumber}} 篇
             </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 :span="6">
+          <el-col :span="22">
             <el-col v-if="isAuthor" style="margin-top: .5rem;text-align: right;">
               <el-button @click="managerPortfolio(portfolio.idPortfolio)" plain>管理</el-button>
             </el-col>
           </el-col>
         </el-col>
-      </el-col>
+      </el-card>
     </el-col>
     <el-col>
       <el-divider></el-divider>