style(knowledge): 优化知识库相关页面样式

- 调整知识库列表、详情、编辑等页面的样式布局
-优化文本显示效果，增加省略号处理
- 统一按钮样式和间距
- 调整滚动条和粘性元素的样式

src/views/knowledge/detail/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class=" render-container">
     <div class="clearfix flex align-items-c justify-content-b ">
-      <div class=" flex align-items-c j">
+      <div class=" flex align-items-c justify-content-b" style="flex:1">
         <div class="hover-back  mr5">
           <el-icon
             class="el-icon-arrow-left"
@@ -14,7 +14,7 @@
           :src="knowledgeImage ? knowledgeImage : knowledgePng_1"
           class="header-icon"
         />
-        <div class="ml20" style="flex:1">
+        <div class="ml10" style="flex:1">
           <div class="flex align-items-c">
             <div class="mr20 header" v-if="!editKnowledge">
               {{ knowledgeName ? knowledgeName : '' }}
@@ -32,17 +32,10 @@
               v-if="!editKnowledge"
             />
             <div v-else>
-              <el-button
-                type="primary"
-                size="medium"
-                class="render-button"
-                @click="saveKnowledgeName"
+              <el-button type="primary" size="medium" @click="saveKnowledgeName"
                 >保存</el-button
               >
-              <el-button
-                size="medium"
-                class="render-button"
-                @click="cancelKnowledgeName"
+              <el-button size="medium" @click="cancelKnowledgeName"
                 >取消</el-button
               >
             </div>
@@ -50,14 +43,14 @@
               segmentedMode | filterSegmentedMode
             }}</span>
           </div>
-          <p class="mt10 fs14" style="line-height: 20px">
+          <p class="mt10 fs14 knowledgeDesc" style="line-height: 20px">
             描述：{{ knowledgeDesc }}
           </p>
           <!--        <p class="mt10 fs14" style="line-height: 20px">分段模式：{{ segmentedMode | filterSegmentedMode }}</p>-->
         </div>
       </div>
 
-      <div style="flex:1" class="text-right">
+      <div style="margin-left: auto" class="text-right">
         <!--        <el-button type="primary" size="medium" class="normal-button" @click="jumpEditKnowledge">修改知识库</el-button>-->
         <el-button
           type="primary"
@@ -1033,7 +1026,7 @@ export default {
   line-height: 17px;
   text-align: left;
   font-style: normal;
-  margin-left: 20px;
+  margin-left: 10px;
   padding: 2px 5px;
 }
 
@@ -1074,4 +1067,13 @@ export default {
     border-radius: 5px;
   }
 }
+
+.knowledgeDesc {
+  display: -webkit-box; // 支持多行省略
+  -webkit-line-clamp: 1; // 限制为两行
+  -webkit-box-orient: vertical; // 垂直方向排列
+  overflow: hidden; // 隐藏超出部分
+  text-overflow: ellipsis; // 显示省略号
+  max-width: 80%; // 限制宽度
+}
 </style>