🎨 简单修复专题管理页面列表

简单修复专题管理页面列表

components/archive/list.vue

@@ -12,7 +12,7 @@
                     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 style="font-size: 20px" v-html="article.articleTitle"> </span>
+              <span class="articleTitle" 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 class="text-muted article-summary-md" v-html="article.articlePreviewContent"></div>
@@ -81,5 +81,9 @@ export default {
 </script>
 
 <style scoped>
+.articleTitle {
+  font-size: 20px;
+  font-weight: 600;
+}
 
 </style>

pages/admin/topics.vue

@@ -1,5 +1,8 @@
 <template>
-  <el-row :gutter="8" style="margin-top: 20px;">
+  <div>
+
+
+  <el-row  style="margin-top: 20px;">
     <el-col style="margin-bottom: 1rem;">
       <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
@@ -9,35 +12,38 @@
     <el-col style="margin: .5rem;">
       <el-button size="small" @click="createTopic" plain>创建专题</el-button>
     </el-col>
+
+
+
+  </el-row>  <el-row :gutter="20">
   <el-col :span="8" style="margin-bottom: .5rem;" v-for="topic in topics.list" :key="topic.idTopic">
-      <el-card>
+    <el-card shadow="never">
       <div class="card-body d-flex flex-column">
+        <el-row :gutter="20">
           <el-col :span="4" style="text-align: right;">
-            <img :src="topic.topicIconPath" :alt="topic.topicTitle" class="topic-brand-img">
+            <img style="margin-right: 10px;" :src="topic.topicIconPath" :alt="topic.topicTitle"
+                 class="topic-brand-img">
           </el-col>
-          <el-col :span="20">
-            <el-col>
-              <el-col>
-                <el-link rel="nofollow" @click="onRouter('admin-topic-detail',topic.topicUri)" :underline="false"><h4>{{
-                    topic.topicTitle
-                  }}</h4>
+          <el-col :span="20" >
+            <el-link rel="nofollow" @click="onRouter('admin-topic-detail',topic.topicUri)" :underline="false">
+              <span style="font-size: 20px;font-weight: bold"> {{ topic.topicTitle }}</span>
             </el-link>
-              </el-col>
-              <el-col>
-                <div class="text-muted article-summary-md">{{ topic.topicDescription }}</div>
-              </el-col>
-            </el-col>
-          </el-col>
-        </div>
-      </el-card>
+            <div class="text-muted article-summary-md text-content">{{ topic.topicDescription }}</div>
           </el-col>
         </el-row>
+
+
+      </div>
+    </el-card>
+
+  </el-col>
+</el-row> </div>
 </template>
 
 <script>
-  import {mapState} from 'vuex';
+import {mapState} from 'vuex';
 
-  export default {
+export default {
   name: "topics",
   middleware: 'auth',
   fetch() {
@@ -66,9 +72,20 @@
       })
     }
   }
-  }
+}
 </script>
 
 <style scoped>
+.topic-brand-img {
+  margin-top: 40%;
+}
 
+.text-content {
+  height: 70px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 3;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
 </style>