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

- 添加 underBorder 类样式,用于美化输入框
- 新增主题描述文本颜色变量和样式
- 调整知识库列表头部样式,增加按钮和调整布局
This commit is contained in:
陈昱达
2025-04-22 20:09:25 +08:00
parent 9907878b89
commit 6886d58807
4 changed files with 26 additions and 6 deletions

View File

@@ -0,0 +1,12 @@
.underBorder {
border: unset;
.el-input__inner {
border: unset;
}
.el-input-group__prepend {
background: #fff;
border: unset;
padding: 0 0 0 10px;
}
}

View File

@@ -5,9 +5,14 @@ $--color-primary-disabled: #155aef24;
$--color-primary-danger: #ff0000;
$--color-primary-danger-light: lighten($--color-primary-danger, 5%); //高亮颜色
$--color-primary-danger-disabled: #ff000024;
$--color-primary-desc-text: #51525d;
:root {
--swiper-theme-color: #0a6dff;
--color-primary: #0a6dff;
--color-primary-disabled: #155aef24;
--color-primary-danger: #ff0000;
}
.theme-primary-desc-text {
color: $--color-primary-desc-text;
}

View File

@@ -1,6 +1,7 @@
@import 'renderSass/theme';
@import 'renderSass/button';
@import 'renderSass/dialog';
@import 'renderSass/input';
html,
body,

View File

@@ -2,19 +2,21 @@
<div id="index-container" class="container index-container">
<el-row>
<el-col :span="8">
<el-input placeholder="输入知识库名称" clearable v-model="nameLike">
<el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
<el-input placeholder="输入知识库名称" clearable v-model="nameLike" size="medium" class="underBorder">
<template slot="prepend">
<el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
</template>
</el-input>
</el-col>
</el-row>
<div slot="header" class="clearfix">
<div slot="header" class="clearfix mt30">
<h3>知识库列表</h3>
<p class="mt10 fs14" style="line-height: 20px">
<p class="mt20 fs14 theme-primary-desc-text" style="line-height: 10px">
易商数智知识库平台旨在为用户提供更便捷更灵敏更全面的知识存储和操作平台用户可以通过创建不同的知识库完成对系统内知识的细分和储备
</p>
<p class="mt10 fs14" style="line-height: 20px">同时也可以通过修改和删除操作对系统内知识体系进行修正和优化</p>
<el-button type="text" disabled class="mt10">操作文档</el-button>
<p class="mt10 fs14 theme-primary-desc-text" style="line-height: 15px">同时也可以通过修改和删除操作对系统内知识体系进行修正和优化</p>
<el-button type="primary" class="mt20 render-button" plain>操作文档</el-button>
</div>
<div class="card-body">