Pārlūkot izejas kodu

perf(views): 优化“设备分组”页面样式

1. 使得 Tab 内容撑满容器
2. 保持 Tab 在内容滚动时处于顶部
wangcong 1 mēnesi atpakaļ
vecāks
revīzija
3756affdcd
1 mainītis faili ar 11 papildinājumiem un 1 dzēšanām
  1. 11 1
      src/views/device-group/DeviceGroup.vue

+ 11 - 1
src/views/device-group/DeviceGroup.vue

@@ -57,7 +57,7 @@ const handleTabClick = (activeKey: string | number) => {
 </script>
 
 <template>
-  <div>
+  <div class="device-group-container">
     <ATabs class="device-group-tab" v-model:active-key="activeKey" @tab-click="handleTabClick">
       <ATabPane v-for="item in aiSmartCtrlTabs" :key="item.name" :tab="translateNavigation(item.name)">
         <component v-if="renderView" :is="item.component" :device-group-id="Number(deviceGroupId)" />
@@ -67,10 +67,20 @@ const handleTabClick = (activeKey: string | number) => {
 </template>
 
 <style lang="scss" scoped>
+.device-group-container {
+  height: 100%;
+  overflow: hidden;
+}
+
 :deep(.device-group-tab) {
+  height: 100%;
   font-weight: 500;
   line-height: 22px;
 
+  .ant-tabs-content {
+    height: 100%;
+  }
+
   &.ant-tabs-top > .ant-tabs-nav {
     .ant-tabs-tab {
       padding: 8px 0;