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

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

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,66 +12,80 @@
     <el-col style="margin: .5rem;">
       <el-button size="small" @click="createTopic" plain>创建专题</el-button>
     </el-col>
-    <el-col :span="8" style="margin-bottom: .5rem;" v-for="topic in topics.list" :key="topic.idTopic">
+
-      <el-card>
+
-        <div class="card-body d-flex flex-column">
+
+  </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 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 :span="20" >
-            <el-col>
+            <el-link rel="nofollow" @click="onRouter('admin-topic-detail',topic.topicUri)" :underline="false">
-              <el-col>
+              <span style="font-size: 20px;font-weight: bold"> {{ topic.topicTitle }}</span>
-                <el-link rel="nofollow" @click="onRouter('admin-topic-detail',topic.topicUri)" :underline="false"><h4>{{
+            </el-link>
-                    topic.topicTitle
+            <div class="text-muted article-summary-md text-content">{{ topic.topicDescription }}</div>
-                  }}</h4>
-                </el-link>
-              </el-col>
-              <el-col>
-                <div class="text-muted article-summary-md">{{ topic.topicDescription }}</div>
-              </el-col>
-            </el-col>
           </el-col>
-        </div>
+        </el-row>
-      </el-card>
+
-    </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",
+  name: "topics",
-    middleware: 'auth',
+  middleware: 'auth',
-    fetch() {
+  fetch() {
-      let {store, params, error} = this.$nuxt.context
+    let {store, params, error} = this.$nuxt.context
-      return Promise.all([
+    return Promise.all([
-        store
+      store
-          .dispatch('topic/fetchList', params)
+        .dispatch('topic/fetchList', params)
-          .catch(err => error({statusCode: 404}))
+        .catch(err => error({statusCode: 404}))
-      ])
+    ])
-    },
+  },
-    computed: {
+  computed: {
-      ...mapState({
+    ...mapState({
-        topics: state => state.topic.list.data
+      topics: state => state.topic.list.data
+    })
+  },
+  methods: {
+    onRouter(item, data) {
+      this.$router.push({
+        path: '/admin/topic/' + data
       })
     },
-    methods: {
+    createTopic() {
-      onRouter(item, data) {
+      let _ts = this;
-        this.$router.push({
+      _ts.$router.push({
-          path: '/admin/topic/' + data
+        path: '/admin/topic/post'
-        })
+      })
-      },
-      createTopic() {
-        let _ts = this;
-        _ts.$router.push({
-          path: '/admin/topic/post'
-        })
-      }
     }
   }
+}
 </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>