smart online - tree node text ellipsis & block style

src/views/questioncenter/components/smart-online.vue

@@ -1,9 +1,8 @@
 <template>
   <div>
     <el-card class="mb10">
-      <mx-condition ref="condition" :query-params="queryParams" :require-fields="requireFields" @query="handleQuery"
-                    @invalid="handleInvalidQuery"
-      ></mx-condition>
+      <mx-condition ref="condition" :query-params="queryParams" :require-fields="requireFields"
+                    @query="handleQuery" @invalid="handleInvalidQuery"></mx-condition>
     </el-card>
     <el-container>
       <el-aside width="284px" style="padding-bottom: 104px">
@@ -21,7 +20,11 @@
             highlight-current
             ref="treeChapter"
             :expand-on-click-node="false"
-          ></el-tree>
+          >
+            <template #default="{node}">
+              <span class="width100 text-ellipsis" :title="node.label">{{ node.label }}</span>
+            </template>
+          </el-tree>
           <el-tree
             v-show="tabActive == 1"
             :data="knowTreeList"
@@ -31,7 +34,11 @@
             :expand-on-click-node="false"
             highlight-current
             ref="tree"
-          ></el-tree>
+          >
+            <template #default="{node}">
+              <span class="width100 text-ellipsis" :title="node.label">{{ node.label }}</span>
+            </template>
+          </el-tree>
         </div>
       </el-aside>
       <el-main style="padding: 0; background: #fff">
@@ -43,11 +50,7 @@
               <input type="checkbox"/>
               <span>过滤已做题</span>
             </div>
-            <div
-              class="btn"
-              style="cursor: pointer"
-              @click="httpDiagnosticRecords(1)"
-            >
+            <div class="btn" style="cursor: pointer" @click="httpDiagnosticRecords(1)">
               诊断记录
             </div>
           </div>
@@ -67,11 +70,7 @@
         </div>
         <!-- 主题内容 -->
         <div class="main_con" v-show="tabActive == 1">
-          <div
-            class="con_item"
-            v-for="item in knowList"
-            :key="item.knowledgeId"
-          >
+          <div class="con_item" v-for="item in knowList" :key="item.knowledgeId">
             <img src="@/assets/images/img_bg_tongbulianxi.png" alt=""/>
             <div class="con_info">
               <p class="tit">{{ item.knowledgeName }}</p>
@@ -443,6 +442,7 @@ export default {
   font-weight: 500;
   color: #343434;
   line-height: 22px;
+  padding-right: 30px;
 }
 
 .main_con .con_item .con_info .count {
@@ -452,7 +452,7 @@ export default {
   font-weight: 400;
   color: #717171;
   line-height: 17px;
-  margin-top: 8px;
+  margin-top: 40px;
 }
 
 .main_con .con_item .con_info .btn {
@@ -465,7 +465,7 @@ export default {
   line-height: 17px;
   padding: 4px 12px;
   background: #47c6a2;
-  margin-top: 20px;
+  margin-top: 10px;
   text-align: center;
 }