mirror of
http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git
synced 2025-12-08 02:16:49 +08:00
feat(render): 添加自定义步骤样式并应用到知识库创建页面- 新增 steps.scss 文件,定义自定义步骤样式
- 在 theme.scss 中添加成功状态颜色变量- 更新 renderUi.scss,引入新的步骤样式 - 修改知识库创建页面,使用自定义步骤样式并添加步骤图标
This commit is contained in:
93
src/assets/sass/renderSass/steps.scss
Normal file
93
src/assets/sass/renderSass/steps.scss
Normal file
@@ -0,0 +1,93 @@
|
||||
.render-steps {
|
||||
&.el-steps--simple {
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
}
|
||||
& .el-step__icon {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
&.is-text {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
& .el-step {
|
||||
background: #fff;
|
||||
&.is-horizontal {
|
||||
& .el-step__line {
|
||||
background: #ebeef2;
|
||||
top: 9px;
|
||||
left: 45px;
|
||||
right: 10px;
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
&.is-simple {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& .el-step__arrow {
|
||||
&:after,
|
||||
&:before {
|
||||
background: unset;
|
||||
}
|
||||
&:before {
|
||||
width: 100%;
|
||||
border-top: 1px solid #ddd;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
transform: scaleY(0.4);
|
||||
}
|
||||
}
|
||||
& .el-step__title {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
& .el-step__title {
|
||||
background: #fff;
|
||||
z-index: 9;
|
||||
padding-right: 20px;
|
||||
}
|
||||
& .el-step__head,
|
||||
& .el-step__title {
|
||||
&.is-process {
|
||||
color: $--color-primary;
|
||||
|
||||
& .is-text {
|
||||
& .icon-text {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
color: #ffffff;
|
||||
font-style: normal;
|
||||
background: $--color-primary;
|
||||
padding: 2px 5px;
|
||||
border-radius: 8px;
|
||||
border: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-text {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
padding: 2px 5px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.el-step__title {
|
||||
&.is-success {
|
||||
color: $--color-primary-success;
|
||||
background: #fff;
|
||||
z-index: 8;
|
||||
padding: 0 20px 0 0;
|
||||
}
|
||||
}
|
||||
@@ -12,6 +12,7 @@ $--color-primary-table-button-hover: #e3e5f1;
|
||||
$--color-primary-label: #70778d;
|
||||
$--color-primary-button-color: #4f47f5;
|
||||
$--color-primary-button-background: #4f47f51a;
|
||||
$--color-primary-success: #02a838;
|
||||
|
||||
:root {
|
||||
--swiper-theme-color: #4f47f5ff;
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
@import 'renderSass/label';
|
||||
@import 'renderSass/radio';
|
||||
@import 'renderSass/drawer';
|
||||
@import 'renderSass/steps';
|
||||
|
||||
html,
|
||||
body,
|
||||
|
||||
@@ -5,10 +5,25 @@
|
||||
<h3>创建知识库</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<el-steps :active="active" simple finish-status="success">
|
||||
<el-step title="文件上传/预处理"></el-step>
|
||||
<el-step title="拆分配置"></el-step>
|
||||
<el-step title="题词配置"></el-step>
|
||||
<el-steps :active="active" simple finish-status="success" class="render-steps">
|
||||
<el-step title="文件上传/预处理">
|
||||
<template slot="icon">
|
||||
<div class="icon-text" v-if="active === 0">STEP1</div>
|
||||
<div class="icon-text" v-else>1</div>
|
||||
</template>
|
||||
</el-step>
|
||||
<el-step title="拆分配置">
|
||||
<template slot="icon">
|
||||
<div class="icon-text" v-if="active === 1">STEP2</div>
|
||||
<div class="icon-text" v-else>2</div>
|
||||
</template>
|
||||
</el-step>
|
||||
<el-step title="题词配置">
|
||||
<template slot="icon">
|
||||
<div class="icon-text" v-if="active === 2">STEP3</div>
|
||||
<div class="icon-text" v-else>3</div>
|
||||
</template>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
|
||||
<div class="components">
|
||||
|
||||
Reference in New Issue
Block a user