.tabBar__wrap { overflow: auto; margin-bottom: 0.15rem; } .tabBar__tab { position: relative; width: 1.6rem; height: 0.5rem; line-height: 0.5rem; text-align: center; font-size: 0.18rem; font-weight: bold; color: #000000; background-color: #E2E8EA; float: left; margin-right: 5px; transition: all .2s ease-in-out; cursor: pointer; } .tabBar__tab:hover { background-color: #ffffff; } .tabBar__tab.activated { background-color: #ffffff; } .tabBar__tab.activated::after { content: ' '; width: 100%; height: 2px; background-color: #295AD7; position: absolute; left: 0; bottom: 0; } /** 以下的 height 100% 属于深层嵌套,就为了不用js计算 ===start=== **/ :global(.combination-page__mainTab.ant-tabs) { height: 100%; } :global(.combination-page__mainTab.ant-tabs > .ant-tabs-content) { /* 减去 ant-tabs-bar 的高度 */ height: calc(100% - 0.65rem); } :global(.combination-page__mainTab.ant-tabs > .ant-tabs-content > .ant-tabs-tabpane.ant-tabs-tabpane-active) { height: 100%; } .mainTabContent { height: 100%; overflow: hidden auto; } /** 以上的 height 100% 属于深层嵌套,就为了不用js计算 ===end=== **/ .mainTipZone { padding: 2px 0.2rem; background: rgba(129,211,248,0.3); border: 1px solid #81d3f8; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; } .mainTipZone > :global(.anticon), .mainTipZone > span { vertical-align: middle; font-size: 12px; } .img { width : auto; max-height: 100%; position : relative; top : 50%; transform : translateY(-50%); }