.formula_div{
    width: 1200px;
    height: 650px;
    position: absolute;
    right: -1640px;
    top: 34px;
    visibility: hidden;
    z-index: 100;
    background-color: #fff;
    display: flex;
}
.left_div{
    width: 1200px;
    height: 650px;
    margin-right: 16px;
    .tab_top{
        width: 100%;
        height: 82px;
        border: 1px solid #E6E6E6;
        border-top-left-radius: 4px;
        display: flex;
        .left_btn{
            width: 28px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #F5F5F5;
            cursor: pointer;
        }
        .center_conter{
            flex: 1;
            display: flex;
            .all_card{
                width: 84px;
                height: 60px;
                margin:10px 0;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                transition: all 0.5s;
                color:#666666;
                cursor: pointer;
                border-right: 1px solid #d2d2d2;
                .name{
                    text-align: center;
                    font-size: 12px;
                    color:#666666;
                    padding-top: 9px;
                }
                .pitchOn{
                    color:#1c92ff;
                    transition: all 0.5s;
                }
            }
        }
    }
}
.right_div{
    width: 300px;
    height: 897px;
    .right_top_card{
        width: 300px;
        height: 250px;
        padding: 24px 16px;
        background-color: #F5F5F5;
        border-radius: 2px;
        border:1px solid #E6E6E6;
        .title{
            font-size: 14px;
            color:#666666;
        }
    }
    .right_bottom_card{
        width: 300px;
        height: 500px;
        // padding:15px;
        margin-top: 16px;
        overflow: hidden;
    }
    .right_btn_card{
        padding: 12px;
    }
}
.absolute_div{
    width: 24px;
    text-align: center;
    line-height: 72px;
    position: absolute;
    background-color: #F0F0F0;
    top: 50%;
    left: -24px;
    transform: translateY(-50%);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    cursor: pointer;
}
.show {
    right: 0;
    animation: show_ani 1s;
    visibility: initial;
}
.dis{
    right: -1632px;
    animation: dis_ani 1s;
    visibility: hidden;
}
@keyframes show_ani{
    0%{
        right: -1632px;
        opacity: 0;
    }
    100%{
        right: 0;
        opacity: 1;
    }
}
@keyframes dis_ani{
    0%{
        visibility: initial;
        opacity: 1;
        right: 0;
    }
    100%{
        visibility: hidden;
        right: -1632px;
        opacity: 0;
    }
}

// tab基础组件
.basics_div{
    width: 82px;
    height: 60px;
    margin:10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    >.img_div{
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: pull_ani 1s;
    }
    .name{
        text-align: center;
        padding-top: 5px;
        font-size: 12px;
        color:#666666;
        width: 100%;
        display: inline-block;
        animation: pull_ani 1s;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .pitchOn{
        color:#1c92ff;
        animation: pull_ani 1s;
    }
    .pull_down{
        width: 151px;
        min-height: 180px;
        border:1px solid #c6c6c6;
        position: absolute;
        bottom: -190px;
        left: 0;
        z-index: 101;
        visibility: hidden;
        border-radius: 2px;
        overflow: hidden;
        .top_fuc{
            height: 160px;
            overflow-y: auto;
            background-color: #fff;
            .top_list{
                width: 100%;
                line-height: 24px;
                height: 24px;
                padding: 0 12px ;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                color:#666666;
            }
            .top_list:hover{
                color:#3661FF;
            }
        }
        .bottom_fuc{
            width: 100%;
            height: 30px;
            display: flex;
            align-items: center;
            border-top: 1px solid #c6c6c6;
            padding: 0 12px;
            background-color: #fff;
            font-size: 12px;
            cursor: pointer;
            >img{
                width: 13px;
                height: 16px;
                margin-right: 7px;
            }
        }
    }
    .pull_show{
        animation: pull_ani 0.5s;
        visibility: initial;
    }
    .pull_dis{
        animation: pull_dis 0.5s;
        visibility: hidden;
    }
}
@keyframes pull_ani {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes pull_dis {
    0%{
        opacity: 1;
        visibility: initial;
    }
    100%{
        opacity: 0;
        visibility: hidden;
    }
}

.preview_img {
    margin: 5px;
    display: flex;
    align-items: center;
    .preview_div {
        position: relative;
        &:hover {
            .mask {
                display: block;
            }
        }
        .mask {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            .icon_eye {
                position: absolute;
                top: 50%;
                left: 50%;
                color: #fff;
                transform: translate(-50%, -50%);
            }
        }
    }
}
.ulImageList{
  display: grid;
  grid-row: auto;
  grid-template-columns: repeat(auto-fill, 130px);
  //grid-auto-flow: column;
  justify-items: start;
  align-items: center;
  column-gap: 10px;
  .borderLi{
    border: 1px solid gray;
    display: grid;
    padding: 5px;
  }
}


.searchGrid{
	display: grid;
	justify-items: center;
	align-items: center;
	margin-bottom: 10px;
	grid-template-columns: repeat(auto-fill, 250px);
	gap: 10px;
	.itemX{
		width: 250px;
	}
}