知识库管理页面改版画写完成

src/router/index.js

@@ -56,6 +56,7 @@ export const moduleRoutes = {
     { path: '/agentKnowledgeAdd', component: () => import('@/views/modules/agent/knowledge/add'), name: 'agentKnowledgeAdd', meta: { title: '创建知识库', isTab: false } },
     { path: '/agentKnowledgeDetail', component: () => import('@/views/modules/agent/knowledge/detail'), name: 'agentKnowledgeDetail', meta: { title: '知识库详情', isTab: false } },
     { path: '/agentKnowledgeCategory', component: () => import('@/views/modules/agent/knowledgeCategory'), name: 'agentKnowledgeCategory', meta: { title: '类目管理', isTab: false } },
+    { path: '/agentKnowledgeFile', component: () => import('@/views/modules/agent/knowledge/file'), name: 'agentKnowledgeFile', meta: { title: '知识库文件', isTab: false } },
     { path: '/agentQuestionnaireSchedule', component: () => import('@/views/modules/agent/questionnaire/schedule'), name: 'agentQuestionnaireSchedule', meta: { title: '问卷作答进度', isTab: false } },
     { path: '/agentQuestionnaireReport', component: () => import('@/views/modules/agent/questionnaire/report'), name: 'agentQuestionnaireReport', meta: { title: '问卷报告', isTab: false } },
     { path: '/agentQuestionnaireDetail', component: () => import('@/views/modules/agent/questionnaire/detail'), name: 'agentQuestionnaireDetail', meta: { title: '问卷详情', isTab: false } },

src/views/modules/agent/knowledge.vue

@@ -13,26 +13,33 @@
         </div>
         <template v-if="list.length">
             <div class="list">
-                <div class="item adfac" v-for="(item, index) in list" :key="index">
-                    <div class="i_name adfac">
-                        <img src="@/assets/images/agent/book_mini.png">
-                        <div class="in_name">
-                            <p class="i_text">{{ item.name }}</p>
-                            <p class="i_tip">{{ item.intro }}</p>
+                <div class="item" v-for="(item, index) in list" :key="index" @click.self="handleFileList(item)">
+                    <div class="i_top adfac">
+                        <img src="@/assets/images/agent/file_mini.png">
+                        <div class="texts">
+                            <p>{{ '创衡 - 团队教练知识库' }}</p>
+                            <p><span>{{ 13 }}</span>文档·<span>{{ 22 }}</span>千字符·<span>{{ 0 }}</span>关联应用</p>
                         </div>
                     </div>
-                    <div class="i_num adffcacjb">
-                        <p class="i_tip">知识数</p>
-                        <p class="i_text">{{item.num}}</p>
+                    <div class="i_txt" v-if="index===0">
                     </div>
-                    <div class="i_time adffcacjb">
-                        <p class="i_tip">更新时间</p>
-                        <p class="i_text">{{item.time}}</p>
+                    <div class="i_txt" v-if="index===1">
+                        {{ 'useful for when you want to answer queries about the 一百个小故事_酒太白.txt' }}
                     </div>
-                    <div class="i_opreations adfacjb">
-                        <div class="io_pre" @click="handleDetail(item)">查看</div>
-                        <div class="io_pre">编辑</div>
-                        <div class="io_pre">删除</div>
+                    <div class="i_bottom adfacjb">
+                        <div class="ib_l adfac" @click="handleTag">
+                            <img src="@/assets/images/agent/tag_mini.png">
+                            <span>添加标签</span>
+                        </div>
+                        <div class="ib_r">
+                            <el-popover placement="bottom" width="128" trigger="click" v-model="pvisibles[index]">
+                                <div class="tl_czs">
+                                    <div class="tlc_pre" @click="handleSet(item,index)">设置</div>
+                                    <div class="tlc_pre del" @click="handleDelete(item)">删除</div>
+                                </div>
+                                <img slot="reference" src="@/assets/images/agent/more_mini.png" @click="handleShowPop(index)">
+                            </el-popover>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -43,11 +50,11 @@
                 <p>暂无知识库</p>
             </div>
         </template>
-        <el-dialog width="40%" :visible.sync="show" title="创建空知识库" @close="cancel">
+        <el-dialog width="579px" :visible.sync="show" title="创建空知识库" @close="cancel">
             <div class="zsk_tip">空知识库中还没有文档，你可以在今后任何时候上传文档至该知识库</div>
             <el-form ref="zskRef" :model="form" :rules="rules" label-width="100px" style="width: 90%;margin: 0 auto;" label-position="top">
                 <el-form-item label="知识库名称" prop="baseName">
-                    <el-input v-model="form.baseName" placeholder="请输入备注"></el-input>
+                    <el-input v-model="form.baseName" placeholder="请输入知识库名称"></el-input>
                 </el-form-item>
             </el-form>
             <div class="demo-drawer__footer" style="display: flex;justify-content: end;">
@@ -55,6 +62,38 @@
                 <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
             </div>
         </el-dialog>
+        <el-dialog width="30%" :visible.sync="tagShow" title="新增标签" @close="tagShow=false">
+            <div class="ed_box">
+                <div class="eb_title">已有标签</div>
+                <div class="eb_list">
+                    <div class="ebl_item adfacjb" v-for="(item, index) in tagList" :key="index">
+                        <div class="el_l">
+                            <el-input v-model="item.name" placeholder="请输入标签名称"></el-input>
+                        </div>
+                        <img src="@/assets/images/agent/delete_mini.png" class="el_r" @click="handleDeleteTag(item,index)">
+                    </div>
+                </div>
+                <div class="eb_add" @click="handleAddTag">+添加标签</div>
+            </div>
+            <div class="demo-drawer__footer" style="display: flex;justify-content: end;margin-top: 100px;">
+                <el-button :loading="buttonLoading2" type="primary" @click="submitForm2">确 定</el-button>
+                <el-button @click="cancel2" style="margin-right: 5%;">取 消</el-button>
+            </div>
+        </el-dialog>
+        <el-dialog width="579px" :visible.sync="setShow" title="知识库设置" @close="cancel3">
+            <el-form ref="setRef" :model="zskForm" :rules="zskRules" label-width="120px" style="width: 90%;margin: 0 auto;" label-position="top">
+                <el-form-item label="知识库名称" prop="aaa">
+                    <el-input v-model="zskForm.aaa" placeholder="请输入知识库名称"></el-input>
+                </el-form-item>
+                <el-form-item label="知识库描述" prop="bbb">
+                    <el-input type="textarea" :rows="2" v-model="zskForm.bbb" placeholder="请输入知识库描述"></el-input>
+                </el-form-item>
+            </el-form>
+            <div class="demo-drawer__footer" style="display: flex;justify-content: end;">
+                <el-button :loading="buttonLoading3" type="primary" @click="submitForm3">保存</el-button>
+                <el-button @click="cancel3" style="margin-right: 5%;">取 消</el-button>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
@@ -65,15 +104,15 @@
     const queryParams = ref({
         name: ''
     })
+    const pvisibles = ref([false,false])
     const show = ref(false)
-    const list = ref([
-        {
-            name: '知识库1',
-            intro: '这是一个知识库的简介，可以简要描述一下这个知识库的内容。',
-            num: 20,
-            time: '2023-04-01 09:21'
-        }
-    ])
+    const tagShow = ref(false)
+    const buttonLoading = ref(false)
+    const buttonLoading2 = ref(false)
+    const buttonLoading3 = ref(false)
+    const setShow = ref(false)
+    const tagList = ref([])
+    const list = ref([1,1])
     const form = ref({
         id:'',
         baseName: ''
@@ -83,8 +122,20 @@
             { required: true, message: '请输入知识库名称', trigger: 'blur' }
         ]
     })
-    const buttonLoading = ref(false)
     const zskRef = ref(null)
+    const setRef = ref(null)
+    const zskForm = ref({
+        aaa: '',
+        bbb: ''
+    })
+    const zskRules = ref({
+        aaa: [
+            { required: true, message: '请输入知识库名称', trigger: 'blur' }
+        ],
+        bbb: [
+            { required: true, message: '请输入知识库描述', trigger: 'blur' }
+        ]
+    })
 
     const submitForm = () => {
         proxy.$refs.zskRef.validate((valid) => {
@@ -101,13 +152,72 @@
         proxy.$refs.zskRef.resetFields()
     }
 
+    const handleFileList = (item) => {
+        proxy.$router.push({path: 'agentKnowledgeFile', query:{title: item.title||'知识库标题'}})
+    }
+
+    const handleShowPop = (index) => {
+        pvisibles.value[index] = true;
+    }
+
+    const handleSet = (item,index) => {
+        setShow.value = true;
+        pvisibles.value[index] = false;
+    }
 
-    const handleAdd = () => {
-        proxy.$router.push('agentKnowledgeAdd')
+    const handleDelete = (item) => {
+        proxy.$confirm('删除知识库是不可逆的。用户将无法再访问您的知识库，所有的提示配置和日志将被永久删除。', '删除后无法恢复，确认删除吗？', {
+            confirmButtonText: '确定',
+            confirmButtonColor: '#FD4F66',
+            cancelButtonText: '取消',
+            type: 'warning'
+        }).then(() => {
+            
+        }).catch(() => {});
+    }
+
+    const handleTag = () => {
+        tagShow.value = true;
+    }
+    const handleDeleteTag = (item, index) => {
+        tagList.value.splice(index, 1);
     }
 
-    const handleDetail = (item) => {
-        proxy.$router.push({path:'/agentKnowledgeDetail',query:{title:item.name}})
+    const handleAddTag = () => {
+        tagList.value.push({name: ''});
+    }
+
+    const submitForm2 = () => {
+        buttonLoading2.value = true;
+        setTimeout(() => {
+            tagShow.value = false;
+            buttonLoading2.value = false;
+        }, 1000)
+    }
+    const cancel2 = () => {
+        tagShow.value = false;
+    }
+
+    const submitForm3 = () => {
+        proxy.$refs.setRef.validate((valid) => {
+            if (valid) {
+                buttonLoading3.value = true;
+                setTimeout(() => {
+                    setShow.value = false;
+                    buttonLoading3.value = false;
+                }, 1000)
+            } else {
+                return false;
+            }
+        });
+    }
+    const cancel3 = () => {
+        setShow.value = false;
+        zskForm.value = {
+            aaa: '',
+            bbb: ''
+        }
+        proxy.$refs.setRef.resetFields();
     }
 </script>
 
@@ -165,69 +275,82 @@
         }
 
         .list{
-            padding: 0 20px;
+            margin-left: -16rpx;
+            display: flex;
+            flex-wrap: nowrap;
             .item{
-                padding: 22px 0;
-                box-shadow: inset 0px -1px 0px 0px #F2F2F2;
-                .i_text{
-                    font-family: PingFang-SC, PingFang-SC;
-                    font-weight: bold;
-                    font-size: 14px;
-                    color: #111111;
-                    line-height: 14px;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    margin-top: 12px;
+                width: calc(100% / 3 - 16px);
+                margin: 26px 0 0 16px;
+                min-height: 168px;
+                background: #FFFFFF;
+                border-radius: 8px;
+                border: 1px solid #E5E7EB;
+                padding: 16px;
+                box-sizing: border-box;
+                position: relative;
+                cursor: pointer;
+                .i_top{
+                    &>img{
+                        width: 36px;
+                        height: 36px;
+                    }
+                    .texts{
+                        padding-left: 16px;
+                        p{
+                            font-family: PingFang-SC, PingFang-SC;
+                            font-weight: bold;
+                            font-size: 14px;
+                            color: #393939;
+                            line-height: 14px;
+                            &:last-child{
+                                font-family: PingFangSC, PingFang SC;
+                                font-weight: 400;
+                                font-size: 14px;
+                                color: #A4A4A4;
+                                line-height: 14px;
+                                margin-top: 8px;
+                                span{
+                                    font-weight: bold;
+                                    color: #6B7280;
+                                    margin: 0 2px;
+                                }
+                            }
+                        }
+                    }
                 }
-                .i_tip{
+                .i_txt{
                     font-family: PingFangSC, PingFang SC;
                     font-weight: 400;
                     font-size: 14px;
-                    color: #9CA3AF;
-                    line-height: 14px;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
+                    color: #A4A4A4;
+                    line-height: 24px;
+                    margin-top: 16px;
                 }
-                .i_name{
-                    width: calc(100% - 712px);
-                    img{
-                        width: 20px;
-                        height: 18px;
-                    }
-                    .in_name{
-                        margin-left: 22px;
-                        .i_text{
-                            margin-top: 0;
+                .i_bottom{
+                    width: calc(100% - 32px);
+                    position: absolute;
+                    left: 16px;
+                    bottom: 16px;
+                    .ib_l{
+                        cursor: pointer;
+                        img{
+                            width: 16px;
+                            height: 16px;
                         }
-                        .i_tip{
-                            margin-top: 12px;
+                        span{
+                            font-family: PingFangSC, PingFang SC;
+                            font-weight: 400;
+                            font-size: 14px;
+                            color: #A4A4A4;
+                            line-height: 24px;
+                            margin-left: 6px;
                         }
                     }
-                }
-                .i_num{
-                    width: 112px;
-                }
-                .i_time{
-                    width: 424px;
-                }
-                .i_opreations{
-                    width: 176px;
-                    .io_pre{
-                        width: 48px;
-                        height: 32px;
-                        background: #F6F9FC;
-                        border-radius: 6px;
-                        font-family: PingFangSC, PingFang SC;
-                        font-weight: 400;
-                        font-size: 14px;
-                        color: #6B7280;
-                        line-height: 32px;
-                        text-align: center;
+                    .ib_r{
                         cursor: pointer;
-                        &:hover{
-                            color: #761E6A;
+                        img{
+                            width: 32px;
+                            height: 32px;
                         }
                     }
                 }
@@ -260,4 +383,62 @@
             margin: -30px 0 20px;
         }
     }
+
+    .tl_czs{
+        .tlc_pre{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 14px;
+            color: #393939;
+            line-height: 20px;
+            padding: 14px 20px;
+            border-bottom: 1px solid #E5E7EB;
+            cursor: pointer;
+            &.del{
+                color: #FD4F66;
+                border: none;
+            }
+        }
+    }
+
+    .ed_box{
+        .eb_title{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 14px;
+            color: #252525;
+            line-height: 20px;
+        }
+        .eb_list{
+            margin-top: 3px;
+            .ebl_item{
+                margin-top: 10px;
+                .el_l{
+                    width: calc(100% - 44px);
+                }
+                .el_r{
+                    width: 18px;
+                    height: 18px;
+                    cursor: pointer;
+                }
+            }
+        }
+        .eb_add{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 14px;
+            color: #761E6A;
+            line-height: 20px;
+            margin-top: 17px;
+            cursor: pointer;
+        }
+    }
+
+    ::v-deep .el-dialog__title{
+        font-weight: bold !important;
+    }
+    ::v-deep .el-dialog{
+        margin-top: 25vh !important;
+    }
+    
 </style>

src/views/modules/agent/knowledge/file.vue

@@ -0,0 +1,298 @@
+<template>
+    <div class="page">
+        <div class="top adfac">
+            <img src="@/assets/images/agent/arrow_left.png" @click="handleBack">
+            <div class="spans">
+                <span>知识库</span>
+                <span class="last">&nbsp;/&nbsp;{{ title }}</span>
+            </div>
+        </div>
+        <div class="content">
+            <div class="c_top adfacjb">
+                <div class="ct_l adfac">
+                    <p>文件</p>
+                    <el-input placeholder="搜索" suffix-icon="el-icon-search" v-model="queryParams.filename"></el-input>
+                </div>
+                <div class="ct_r">
+                    <el-button type="primary" icon="el-icon-plus" @click="handleAddFile">添加文件</el-button>
+                </div>
+            </div>
+            <template v-if="list.length">
+                <el-table :data="list" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无文件" max-height="578px" style="margin-top: 16px;">
+                    <el-table-column label="序号" width="50">
+                        <template #default="scope">
+                            {{ scope.$index + 1 }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="文件名称" prop="aaa"></el-table-column>
+                    <el-table-column label="字符数" prop="bbb"></el-table-column>
+                    <el-table-column label="上传时间" prop="ccc"></el-table-column>
+                    <el-table-column label="状态" prop="ddd">
+                        <template #default="scope">
+                            <el-switch v-model="value" active-color="#833478" inactive-color="#833478" active-text="可用" inactive-text="已禁用"></el-switch>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="200">
+                        <template #default="scope">
+                            <el-button link type="text" size="mini" @click="handleSetName(scope.row)">重命名</el-button>
+                            <el-button link type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <el-row style="display: flex;justify-content: center;">
+                    <el-pagination
+                        @size-change="handleSizeChange"
+                        @current-change="handleCurrentChange"
+                        :current-page="queryParams.page"
+                        :page-sizes="[5, 10, 20, 50]"
+                        :page-size="10"
+                        layout="total, sizes, prev, pager, next, jumper"
+                        :total="total"
+                        v-show="total > 0">
+                    </el-pagination>
+                </el-row>
+            </template>
+            <template v-else>
+                <div class="empty">
+                    <img src="@/assets/images/agent/file_mini.png">
+                    <p>还没有文档</p>
+                    <p class="tip">您可以上传文件，从网站同步，或者从网络应用程序 (如概念、GitHub等) 同步。</p>
+                    <el-button type="default" icon="el-icon-plus" @click="handleAddFile">添加文件</el-button>
+                </div>
+            </template>
+        </div>
+        <el-dialog width="40%" :visible.sync="show" title="上传文本文件" @close="cancel">
+            <div class="cs_upload">
+                <el-upload
+                    class="upload-demo"
+                    drag
+                    action=""
+                    multiple>
+                    <i class="el-icon-upload"></i>
+                    <div class="el-upload__text">点击或拖拽文件上传</div>
+                    <div class="el-upload__text" style="font-size: 12px;color: #C1C7D2;line-height: 20px;margin-top: 8px;">
+                        已支持 TXT、 MARKDOWN、 MDX、 PDF、 HTML、 XLSX、 XLS、 DOCX、 CSV、 VTT、<br> PROPERTIES、 MD、 HTM，每个文件不超过 15MB。
+                    </div>
+                </el-upload>
+            </div>
+            <div class="demo-drawer__footer" style="display: flex;justify-content: end;">
+                <el-button :loading="buttonLoading" type="primary" @click="submitForm">确认</el-button>
+                <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
+            </div>
+        </el-dialog>
+        <el-dialog width="579px" :visible.sync="setShow" title="知识库设置" @close="cancel2">
+            <el-form ref="setRef" :model="zskForm" :rules="zskRules" label-width="120px" style="width: 90%;margin: 0 auto;" label-position="top">
+                <el-form-item label="知识库名称" prop="aaa">
+                    <el-input v-model="zskForm.aaa" placeholder="请输入知识库名称"></el-input>
+                </el-form-item>
+            </el-form>
+            <div class="demo-drawer__footer" style="display: flex;justify-content: end;">
+                <el-button :loading="buttonLoading2" type="primary" @click="submitForm2">保存</el-button>
+                <el-button @click="cancel2" style="margin-right: 5%;">取 消</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup name="">
+    import { ref, getCurrentInstance, onMounted } from 'vue'
+    const { proxy } = getCurrentInstance();
+    
+    const title = ref('')
+    const list = ref([])
+    const show = ref(false)
+    const buttonLoading = ref(false)
+    const queryParams = ref({
+        page: 1,
+        limit: 10,
+        filename:''
+    })
+    const total = ref(0)
+    const loading = ref(false)
+    const setShow = ref(false)
+    const buttonLoading2 = ref(false)
+    const setRef = ref(null)
+    const zskForm = ref({
+        aaa: ''
+    })
+    const zskRules = ref({
+        aaa: [
+            { required: true, message: '请输入知识库名称', trigger: 'blur' }
+        ]
+    })
+
+    const handleBack = () => {
+        proxy.$router.go(-1)
+    }
+
+    const handleAddFile = () => {
+        show.value = true
+    }
+
+    const cancel = () => {
+        show.value = false;
+    }
+
+    const submitForm = () => {
+        buttonLoading.value = true;
+        setTimeout(() => {
+            show.value = false;
+            buttonLoading.value = false;
+            list.value = [...list.value, {id: 1}]
+        }, 2000)
+    }
+
+    const getList = () => {
+        loading.value = true;
+        setTimeout(() => {
+            total.value = list.value.length
+            loading.value = false;
+        }, 1000)
+    }
+    const handleSizeChange = (val) => {
+        queryParams.value.limit = val;
+        getList()
+    }
+
+    const handleCurrentChange = (val) => {
+        queryParams.value.page = val;
+        getList()
+    }
+
+    const handleSetName = (item) => {
+        setShow.value = true;
+    }
+    async function handleDelete(row) {
+        await proxy?.$modal.confirm('确认删除文件【' + row.realName + '】吗？').finally(() => loading.value = false);
+        // let res = await deleteCoach([row.id]);
+        // if (res.code === 0) proxy?.$modal.msgSuccess("删除成功");
+        // else return proxy?.$modal.msgError(res.msg);
+        // await getList();
+    }
+
+    const submitForm2 = () => {
+        proxy.$refs.setRef.validate((valid) => {
+            if (valid) {
+                buttonLoading2.value = true;
+                setTimeout(() => {
+                    setShow.value = false;
+                    buttonLoading2.value = false;
+                }, 2000)
+            } else {
+                return false;
+            }
+        });
+    }
+
+    const cancel2 = () => {
+        setShow.value = false;
+        zskForm.value = {
+            aaa: ''
+        }
+        proxy.$refs.setRef.resetFields();
+    }
+
+    onMounted(() => {
+        title.value = proxy.$route.query.title;
+        getList()
+    })
+</script>
+
+<style scoped lang="scss">
+    .page{
+        background: #FAFAFA;
+        .top{
+            width: 100%;
+            height: 64px;
+            background: #FFFFFF;
+            border-bottom: 1px solid #F3F4F6;
+            
+            img{
+                width: 36px;
+                height: 36px;
+                margin-left: 16px;
+                cursor: pointer;
+            }
+            .spans{
+                display: flex;
+                align-items: center;
+                margin-left: 23px;
+                span{
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #6B7280;
+                    line-height: 14px;
+                    &.last{
+                        color: #111111;
+                    }
+                }
+            }
+        }
+        
+        .content{
+            width: calc(100% - 24px);
+            height: calc(100vh - 88px);
+            margin: 12px;
+            background: #FFFFFF;
+            border-radius: 6px 6px 0px 0px;
+            border: 1px solid #F3F4F6;
+            padding: 24px 20px;
+            box-sizing: border-box;
+            .ct_l{
+                p{
+                    font-family: PingFang-SC, PingFang-SC;
+                    font-weight: bold;
+                    font-size: 16px;
+                    color: #252525;
+                    line-height: 22px;
+                    width: 60px;
+                }
+            }
+
+            .empty{
+                width: 780px;
+                height: 236px;
+                background: #F9FAFB;
+                border-radius: 8px;
+                
+                margin: 220px auto 0;
+                padding: 36px 49px;
+                box-sizing: border-box;
+                img{
+                    width: 36px;
+                    height: 36px;
+                }
+                p{
+                    font-family: PingFang-SC, PingFang-SC;
+                    font-weight: bold;
+                    font-size: 16px;
+                    color: #393939;
+                    line-height: 16px;
+                    margin-top: 16px;
+                    &.tip{
+                        font-size: 14px;
+                        color: #999999;
+                        margin-bottom: 30px;
+                    }
+                }
+            }
+        }
+    }
+    
+    .cs_upload{
+        width: calc(100% - 20px);
+        margin: -10px auto 30px;
+    }
+
+    ::v-deep .el-dialog__title{
+        font-weight: bold !important;
+    }
+    ::v-deep .el-dialog{
+        margin-top: 25vh !important;
+    }
+    ::v-deep .el-upload,::v-deep .el-upload-dragger{
+        width: 100% !important;
+        background: #FAFAFB !important;
+    }
+</style>