.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; } }