<template>
    <div>
        <div class="headers">
            <div class="headers-left">
                <div class="imgs">

                </div>
                <div class="img-right">
                    <div class="name-title">微育科技</div>
                    <div class="right-name">数智科创 · 通达未来 </div>
                </div>
            </div>
            <div class="headers-right">
                <div class="rights">
                  

                    添加科技成果
                   

                </div>
            </div>
        </div>
        
        <div class="contents">
            <div class="content-left">
                
                <div class="content-lefts">
                    <div class="leftss">

                        

                        <div class="leftss-header">
                            <div class="headerss">
                                <div>科技成果信息编辑</div>
                                     <div @click="btnEdint"> <el-button 
                                    style="background-color: #5165f7;color:white;">保存</el-button>
                                    <el-button 
                                    @click="closeguan"
                                    style="width: 82px;">取消</el-button>
                            </div>
                            </div>
                        </div>
                       
                        
                      <div>

                      
                      </div>


                    </div>
                    <div  class="renwu-area">
                        <div class="table-area" style="margin-top: 30px;">
                            <div class="table-header">
                                <div>
                                    <span class="times"> 关联知识产权    </span>
                                </div>
                                <div>
                                    <el-button 
                                   
                                    style="width: 82px;" @click="btnAdd" type="primary" plain size="mini">编辑关联</el-button>
                                </div>
                            </div>
                        </div>
                      
                        <div class="content-areas">
                         <div class="contents-left">
                           <span style="margin-left: 20px;">科技成果名称</span>
                         </div>
                         <div class="contents-right">
                            <span style="margin-left: 20px;">
                                <el-input v-model="input" placeholder="请输入内容"></el-input>
                            </span>
                         </div>
                         <div class="contents-left">
                           <span style="margin-left: 20px;">转化时间</span>
                         </div>
                         <div class="contents-right">
                            <span style="margin-left: 20px;">
                                <el-date-picker
                                v-model="value1"
                                type="datetime"
                                placeholder="选择日期时间">
                                </el-date-picker>
                            </span>
                         </div>
                         <div class="contents-left">
                           <span style="margin-left: 20px;">科技成果来源</span>
                         </div>
                         <div class="contents-right">
                            <span style="margin-left: 20px;">
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </span>
                         </div>
                       </div>
                       <div class="content-areas" style="margin-top: -0px;">
                         <div class="contents-left">
                           <span style="margin-left: 20px;">科技成果类型</span>
                         </div>
                         <div class="contents-right">
                            <span style="margin-left: 20px;">
                                发明专利
                            </span>
                         </div>
                         <div class="contents-left">
                           <span style="margin-left: 20px;">成果转化形式</span>
                         </div>
                         <div class="contents-right">
                            <span style="margin-left: 20px;">
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </span>
                         </div>
                         <div class="contents-left">
                           <span style="margin-left: 20px;">成果转化结果</span>
                         </div>
                         <div class="contents-right">
                            <span style="margin-left: 20px;">
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </span>
                         </div>
                       </div>
                    </div>
                    <div  class="renwu-area">
                        <div class="table-area" style="margin-top: 30px;">
                            <div class="table-header">
                                <div>
                                    <span class="times"> 关联知识产权    </span>
                                </div>
                                <div>
                                    <el-button 
                                   
                                    style="width: 82px;" type="primary" plain size="mini">编辑关联</el-button>
                                </div>
                            </div>
                        </div>
                        <el-table
                     
                            :data="tableData"
                            border
                            style="width: 100%;margin-top: 12px;">
                            <el-table-column
                               align="center"
                            prop="date"
                            label="序号"
                            width="80"
                            >
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="产权名称"
                           >
                            </el-table-column>
                            <el-table-column
                               align="center"
                            prop="address"
                            label="类型类型"
                             width="150"
                            >
                            </el-table-column>
                            <el-table-column
                           align="center"
                            prop="address"
                            label="获得方式"
                             width="150"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="操作"
                                width="80">
                                <template slot-scope="scope">
                                    <el-button @click="btnwendangxiang(scope.row)" type="text" size="small" style="color: #F56C6C;">删除</el-button>
                                
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div  class="renwu-area">
                        <div class="table-area" style="margin-top: 30px;">
                            <div class="table-header">
                                <div>
                                    <span class="times"> 关联产品服务    </span>
                                </div>
                                <div>
                                    <el-button 
                                   
                                    style="width: 82px;" type="primary" plain size="mini">编辑关联</el-button>
                                </div>
                            </div>
                        </div>
                        <el-table
                     
                            :data="tableData"
                            border
                            style="width: 100%;margin-top: 12px;">
                            <el-table-column
                               align="center"
                            prop="date"
                            label="序号"
                            width="80"
                            >
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="产品（服务）名称"
                           >
                            </el-table-column>
                            <el-table-column
                               align="center"
                            prop="address"
                            label="是否是主要产品(服务)"
                             width="150"
                            >
                            </el-table-column>
                            <el-table-column
                           align="center"
                            prop="address"
                            label="收入类型"
                             width="150"
                            >
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="操作"
                                width="80">
                                <template slot-scope="scope">
                                    <el-button @click="btnwendangxiang(scope.row)" type="text" size="small" style="color: #F56C6C;">删除</el-button>
                                
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
             
            </div>
          
        </div>
        <el-dialog :visible.sync="dialogVisible" width="60%"  :before-close="closeOK">
            <div class="dialog-header">
            <div class="dialogss">
                <div>关联产品服务</div>
                <div>
                    <el-button type="primary"  size="small" style="background-color: rgb(81, 101, 247);">添加</el-button>
                    <el-button size="small" @click="dialogVisible=false">取消</el-button>
                </div>
            </div>
            </div>
            <div class="content-table">
                       
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%"
                           @selection-change="handleSelectionChange"
                        >
                        <el-table-column
                        align="center"
                        type="selection"
                        width="55">
                        </el-table-column>
                        <el-table-column
                        prop="date"
                        label="产品服务名称"
                        align="center"
                       >
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="是否是主要产品(服务)"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="收入类型"
                        align="center"
                        >
                        </el-table-column>
                       
                    </el-table>
                </div>
           
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dialogVisible:false,
            active:0,
            listDate:[
                {
                    name:'检查报告'
                },
                {
                    name:'检查意见'
                },

                {
                    name:'阶段成果'
                },
                {
                    name:'经费投入'
                },
               
            ],
            value1:"",
            yuanright: 0,
            tables: [
                {
                    name: '有效'
                },
                {
                    name: '无效'
                },
            ],
            shu: 0,
           
            lastActiveKey: 'headerActiveIndex',
            tableData: [
                {
                    date: "其中",
                    name: "",
                    address: "",
                  
                },
                { date: "其他项目", name: "5000", address: "4000" },
            ],

            tableData2: [
       
            { date: "2025", name: "年度审计报告及财务情况说明书", address: "7500" },]
        }
    },

    created() {

    },

    watch: {

    },

    methods: {
        //打开弹框
        btnAdd(){
            this.dialogVisible=true
        },
        //取消
        closeguan(){
            this.$router.go(-1)
        },
        btnNmae(e){
            this.active=e
        },
        //切换时效性
        btnYuan(e) {
            this.yuanright = e
        },
        //编辑跳转
        btnEdint() {
            
        },
        btnShang() {
            this.$router.push('/annual')
        }

    }
}
</script>
<style>
.el-tooltip__popper.is-dark {
    color: #F04B4B !important;
    background: #FCF1EB !important;
}

.el-tooltip__popper .popper__arrow {
    border-top-color: #FCF1EB !important;
    /* 上方箭头 */
}

.el-tooltip__popper .popper__arrow::after {
    border-top-color: #FCF1EB !important;
}

/* 其他方向的箭头（按需添加） */
.el-tooltip__popper[x-placement^='bottom'] .popper__arrow {
    border-bottom-color: #FCF1EB !important;
}

.el-tooltip__popper[x-placement^='left'] .popper__arrow {
    border-left-color: #FCF1EB !important;
}

.el-tooltip__popper[x-placement^='right'] .popper__arrow {
    border-right-color: #FCF1EB !important;
}
</style>
<style scoped>
/deep/ .el-input__prefix{
  height: 100%;
    left: 5px;
    transition: all .3s;
    position: relative !important;
    top: -51px  !important;
}
.selects2{
    width: 90%;
}
.adds{
    width: 30px;
    height: 20px;
    background: #DCE0FD;
    color: #5065F6;
    position: relative;
    left: 54px;
    font-size: 14px;
    text-align: center;
    line-height: 18px;
    cursor: pointer;
}
.lies:hover .closes {
    opacity: 1;; /* 鼠标滑过 .lies 时才显示 */
}
.closes{
    background: #FCF1EB;
    width: 20px;
    height: 30px;
    position: relative;
    top: 5px;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    color: #F04B4B;
    font-size: 20px;
    opacity: 0;
}
.first-border{
    /* border-top: 1px solid #DCE0FD */
}
.liee{
    background-color: #DCE0FD;
    color: #17192C;
    text-align:center
}
.content-areas{
    display: flex;
    height: 50px;
    flex-wrap: wrap;
}
.contents-left{
    width: 30%;
    border: 1px solid #DCE0FD;
    background: #EDEFFE;;
    line-height: 50px;
    font-size: 14px;
    color: #363636;
    
}
.contents-right{
    flex: 1;
    border: 1px solid #DCE0FD;
    line-height: 50px;
    font-size: 14px;
    color: #363636;
    display: flex
}
.content-areas2{
    position: relative;
    top: 1px;

}
.table-name{
    margin-left: 20px;
}
.rightss2{
    background: #EDEFFE;
}
.rightss1{
    border-left: none !important;
    border-right: none !important;
   
}
.rightss{
    height: 100%;
    border: 1px solid #DCE0FD;
    width: 100%;
    border-top: none;

}
.lie{
    border: 1px solid #3333;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border-right: none;
    border: none;
    border-bottom: 1px solid #EDEFFE
}
.lies{
display: flex;
/* border-bottom: 1px solid #EDEFFE */
}
.zhuyi{
   color: #5165f7;
    font-size: 14px;
    text-align: center;
    position: relative;
    top: -12px;
}
:deep(.el-input__wrapper) {
  box-shadow: none !important;
  padding-left: 7 !important;
  background: none !important;
}
/* 去掉内部输入框的padding */
:deep(.el-input__inner) {
    padding-left: 7 !important;
  border: none !important;
  background: none !important;
}
.th1{
    width: 120px;         /* 设置固定宽度（可以根据需要调整） */
  font-size: 13px;      /* 字体大小比默认小 */
  text-align: right;    /* 右对齐 */
  padding-right: 8px;
  border-right: 1px solid #DCE0FD;
  background: #EDEFFE !important;
  border-bottom: 1px solid #DCE0FD !important;
}
.container {
    width: 72%;
   margin: 0 auto;
}

h1 {
    color: #333;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 24px;
}

.department-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.department-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.department-table tr{
    border: 1px solid #DCE0FD;
    cursor: pointer;
}

.department-table th {
   
    /* 淡紫色表头 */
    color: #5a4a6a;
    font-weight: 600;
    text-align: left;
    padding: 16px 20px;

}

.department-table td {
    background-color: white;
    padding: 5px 20px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

.department-table tr:last-child td {
    border-bottom: none;
}

.department-table tr:hover td {
    background-color: #f9f9f9;
    transition: background-color 0.2s;
}

.empty-value {
    color: #999;
    font-style: italic;
}

.footer {
    text-align: center;
    margin-top: 25px;
    color: #888;
    font-size: 14px;
}

.contents {
    width: 90%;
    margin: 0 auto;
}

:deep .el-dialog__body {
    padding: 0 !important;
}

.dialog-footer {
    text-align: center;
    margin: 0 auto;
    margin-top: 12px;
}

.dialog-header {
    width: 100%;
    height: 54px;
    background: #F7F7FA;
    text-align: center;
    line-height: 54px;
    position: relative;
    top: -28px;
    color: #363636;
    font-weight: bold;
    font-size: 18px
}

:deep .el-tooltip__popper.is-dark {
    color: #F04B4B !important;
}

.footer {
    display: flex;
    justify-content: end;
    margin-top: 20px;
}

.tianjia {
    position: relative;
    top: -9px;
    background-color: #5065F6;
}

.tianjia2 {
    position: relative;
    top: -9px;
    background-color: #EDEFFE;
    color: #5065F6;
}

::v-deep .el-table thead {
    background-color: #DCE0FD !important;
    color: #363636 !important;
}

::v-deep .el-table__header th {
    background-color: #DCE0FD !important;
    color: #363636 !important;
}
.input-with-select{
    border: 1px solid #3333;
}

.content-table {
    width: 90%;
    margin: 0 auto;
    margin-top: 14px;
}

.formitem {
    position: relative;
    top: -5px;
}

::deep .el-form-item__label {
    font-size: 15px !important;
}

.selects {
    width: 100px;
    border: 1px solid #3333;
}

.headers-name {
    font-size: 15px;
    position: relative;
    top: 14px;
}

.tubiao {
    position: relative;
    top: 22px;
    z-index: 99;
    left: -20px;
    cursor: pointer;
}

.headers {
    display: flex;
    justify-content: space-between
}
.area-name{
margin-left: 30px;
cursor: pointer;
}
.active{
   
    border-bottom: 3px solid #5165f7;
    height: 45px;
}
.header-area{
    display: flex;
    position: relative;
    left: -30px;
}
.rightss3{
    border-right: none;
    border-left: none;
}
.table-name{
    margin-left: 20px;
}
.rightss2{
    background: #EDEFFE;
}
.rightss1{
    border-left: none !important;
    border-right: none !important;
   
}
.rightss{
    height: 100%;
    border: 1px solid #DCE0FD;
    width: 100%;
    border-top: none;

}
.content-areas2{
    position: relative;
    top: 1px;

}
.contents-right{
    flex: 1;
    border: 1px solid #DCE0FD;
    line-height: 50px;
    font-size: 14px;
    color: #363636;
    display: flex
}
.contents-left{
    width: 12%;
    border: 1px solid #DCE0FD;
    background: #EDEFFE;;
    line-height: 50px;
    font-size: 14px;
    color: #363636;
    
}
.content-areas{
    display: flex;
    height: 50px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.tab-area{
    margin-top: 24px;
}
.namess{
    color: #5B5E72;
    font-size: 13px;
    margin-left: 12px;
}
.names{
    font-size: 14px;
    color: #363636;
}
:deep .el-tooltip__popper.is-dark {
    color: #F04B4B !important;
}

.right-area {
    width: 90%;
    margin: 0 auto;
    height: 80vh;
    background: #f8f8f8;
}

.right-header {
    width: 90%;
    margin: 0 auto;
}

.ths {
    text-align: center;
    background: #DCE0FD !important;
    color: #363636;
}

.tou {
    height: 30px;
    line-height: 30px;
    color: #606266;
    text-align: center;
}

.financial-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.financial-table th,
.financial-table td {
    border: 1px solid #ddd;
    padding: 8px 7px;
    text-align: center;
}

.financial-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.financial-table .nested-label {
   
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}

.table-right {
    flex: 1;
}

.table-left {
    flex: 1;
}

.content-table {
   
    width: 90%;
    margin: 0 auto;
    margin-top: 14px;
}

/* 默认情况（有效）左边圆角 */
.left-radius {
    border-bottom-left-radius: 16px !important;
    border-top-left-radius: 16px !important;
}

/* 无效情况右边圆角 */
.right-radius {
    border-bottom-right-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

.yuan-left {
    flex: 1;
    text-align: center;
    line-height: 30px;
    background: #f8f8f8;
    /* border-bottom-left-radius: 16px;
    border-top-left-radius: 16px; */
    cursor: pointer;
}

.yuanright {
    flex: 1;
    background: #5165f7;
    color: white;

    /* border-bottom-right-radius: 16px;
    border-top-right-radius: 16px;  */
    text-align: center;
    line-height: 30px;
    cursor: pointer;

}

.youxiaos {
    position: relative;
    top: 6px;
    left: -12px;
    cursor: pointer;
}

/* 修改.yuan的样式，移除外层圆角 */
.yuan {
    width: 100px;
    height: 30px;
    background: white;
    display: flex;
    font-size: 14px;
    overflow: hidden;
    /* 关键：确保内部div的圆角效果不被截断 */
}

/* 默认状态下两个按钮的外侧圆角 */
.yuan-left:first-child {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.yuan-left:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* 选中状态样式 */
.yuanright {
    background: #5165f7;
    color: white;
}
.dialogss{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
}
/* 选中"有效"时的样式 */
.yuan-left.left-radius {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 选中"无效"时的样式 */
.yuan-left.right-radius {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}


.times {
    position: relative;
    top: 3px;
}

.youxiao {
    color: #5B5D76;
    font-size: 13px;
}

.table-header {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
}

.table-area {
    margin-top: 12px;
    font-size: 15px;
}

.leftss-header {
    display: flex;
    height: 80px;
    line-height: 80px;
 
    font-weight: bold;
    justify-content: space-between;
    background: #EDEFFE;
}

.leftss {
    width: 100%;
    margin: 0 auto;
    margin-top: 15px;
}

.content-lefts {
    background: white;
    height: 100%;
    width: 86%;
    margin: 0 auto;
}

.content-left {
  flex: 1;
  padding-right: 12px;
  min-height: 100%;  /* 确保最小高度填满父容器 */
}

.content-right {
    width: 600px;
    min-height: 100%;
    background: white;
}

.contents {
    width: 100%;
  min-height: calc(100vh - 70px);  /* 70px 是 headers 的高度 */
  background: #f8f8f8;
  display: flex;
  margin-top: 6px;
}


.shu {
    width: 3px;
    height: 18px;
    background: #5165f7;
    position: relative;
    display: inline-block;
    top: 7px;
}

::v-deep .el-table thead {
    background-color: #DCE0FD !important;
    color: #363636 !important;
    font-weight: bold;
}

::v-deep .el-table__header th {
    background-color: #DCE0FD !important;
    color: #363636 !important;
    font-weight: bold;
}

.renwu-area{
    width: 90%;
    margin: 0 auto;
}


.rights {
    width: 96%;
    height: 100%;
    margin: 0 auto;
    line-height: 88px;
    display: flex;
    position: relative;
    left: 32vw;
    top: -6px;
}

.name-title {
    position: relative;
    top: -6px;
    font-weight: bold;
}

.right-name {
    font-size: 12px;
}

.img-right {
    font-size: 14px;
    position: relative;
    top: 35px;
    height: 40px;
    margin-left: 12px;
}
.headerss{
    width: 96%;
    margin: 0 auto;
    display: flex;
    font-size: 20px;
    justify-content: space-between;
}
.imgs {
    width: 42px;
    height: 40px;
    background: #5165f7;
    border-radius: 6px;
    position: relative;
    top: 26px;
    margin-left: 24px
}

.headers-right {
    flex: 1;
    background: white;
   
}

.headers-left {
    width: 222px;
    height: 100%;
    display: flex;
    background: white;
}

.headers {
    width: 100%;
    height: 70px;
    display: flex;
}





.patent-container {
      max-width: 1000px;
      margin: 0 auto;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }
    .patent-header {
      background: linear-gradient(135deg, #6a5acd, #8a7dff);
      color: white;
      padding: 20px 30px;
      text-align: center;
    }
    .patent-header h1 {
      font-size: 24px;
      margin-bottom: 10px;
      font-weight: 600;
    }
    .patent-header p {
      opacity: 0.9;
      font-size: 14px;
    }
    .search-box {
      padding: 15px 30px;
      background-color: #f8f9fa;
      border-bottom: 1px solid #eaeaea;
    }
    .search-box input {
      width: 100%;
      padding: 10px 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
      transition: border-color 0.3s;
    }
    .search-box input:focus {
      outline: none;
      border-color: #8a7dff;
      box-shadow: 0 0 0 2px rgba(138, 125, 255, 0.2);
    }
    .patent-table {
      width: 100%;
      border-collapse: collapse;
    }
    .patent-table th {
      background-color: #f0e6ff;
      color: #5a4fcf;
      padding: 12px 15px;
      text-align: left;
      font-weight: 600;
      border-bottom: 1px solid #ddd;
    }
    .patent-table td {
      padding: 12px 15px;
      border-bottom: 1px solid #f0f0f0;
      transition: background-color 0.2s;
    }
    .patent-table tr:hover td {
      background-color: #f9f7ff;
    }
    .patent-table tr:last-child td {
      border-bottom: none;
    }
    .status-badge {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
    }
    .status-paid {
      background-color: #e8f5e9;
      color: #2e7d32;
    }
    .patent-footer {
      padding: 15px 30px;
      text-align: center;
      color: #777;
      font-size: 14px;
      border-top: 1px solid #eaeaea;
      background-color: #fafafa;
    }


    .shu{
  width: 10px;
    height: 20px;
    background: #5165f7;
    position: relative;
    top: -24px;
    left: 40%;
}
.active{
    color: #5165f7 !important;
}
.rights-names{
    margin-left: 32px;
    cursor: pointer;
}
.rights{
    width: 96%;
    height: 100%;
    margin: 0 auto;
    line-height: 94px;
    display: flex;
    position: relative;
    left: -27px;
    display: flex;
    justify-content: center;
}
.name-title{
    position: relative;
    top: -6px;
    font-weight: bold;
}
.right-name{
    font-size: 12px;
}
.img-right{
    font-size: 14px;
    position: relative;
    top: 40px;
    height: 40px;
    margin-left: 12px;
}
.imgs{
    width: 45px;
    height: 46px;
    background: #5165f7;
    border-radius: 6px;
    position: relative;
    top: 26px;
    margin-left: 24px
}
.headers-right{
    flex: 1;
    background: white;
  
}
.headers-left{
    width: 222px;
    height: 100%;
    display: flex;
    background: white;
    border-right: 1px solid #EDEFFE;
}
.headers{
  width: 100%;
    height: 90px;
    display: flex
;
    border-bottom: 1px solid #EDEFFE;
}
</style>