Merge pull request #289 from jamebal/dev

style: 优化文件列表样式
jamebal · Sep 24, 2024 · 01e7a66 · 01e7a66
2 parents 33d9b64 + c95e7e7
commit 01e7a66
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/src/components/Icon/IconFile.vue b/src/components/Icon/IconFile.vue
@@ -152,7 +152,6 @@ export default {
     }
   },
   mounted() {
-    console.log(this.item, this.gridWidth)
   },
   computed: {
     findIconClass() {

diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
@@ -305,6 +305,7 @@
       <!--list布局-->
       <div
         v-show="fileList.length > 0"
+        ref="fileListTableContainer"
         id="v-draw-rectangle"
         :style="{ width: '100%', height: clientHeight + 'px' }"
       >
@@ -323,6 +324,7 @@
           :pagination-show="false"
           style="width: 100%;margin: 20px 0 0 0;"
           stripe
+          :fit="true"
           :cell-style="rowStyle"
           :height-change="false"
           :row-class-name="tableRowClassName"
@@ -358,7 +360,8 @@
               v-if="index === 2"
               :key="index"
               :show-overflow-tooltip="true"
-              max-width="200"
+              min-width="200"
+              :width="tableHeadNameWidth"
               :index="index"
               :prop="item.name"
               :label="item.label"
@@ -467,8 +470,8 @@
                 overflow: 'auto',
                 'box-shadow':
                   fileListScrollTop > 0
-                    ? '#a5a7a8 0px 0px 3px'
-                    : '#ffffff 0px 0px 0px',
+                    ? '-1px -1px 4px #00152914'
+                    : '-1px -1px 4px #ffffff',
               }"
             >
               <van-grid-item
@@ -998,6 +1001,7 @@ export default {
       isIndeterminate: false,
       isSelectAll: false,
       clientHeight: 500,
+      tableHeadNameWidth: 500,
       // 表头数据
       tableHead: [
         {
@@ -1544,6 +1548,7 @@ export default {
       this.pinSelect(row, event)
     },
     containerResize() {
+      // gird视图
       const container = document.querySelector('.dashboard-container')
       let clientWidth = container.clientWidth
       this.clientHeight = document.documentElement.clientHeight - this.lessClientHeight
@@ -1570,6 +1575,12 @@ export default {
         }
         this.getFileListEnter()
       }
+      this.$nextTick(() => {
+        // list 视图
+        const fileListTableWidth = this.$refs.fileListTableContainer.offsetWidth
+        this.tableHeadNameWidth = fileListTableWidth - (80 + 200 + 250) - 50
+      })
+
       // 使列表可拖拽
       this.rowDrop()
       this.darwRectangle()
@@ -3135,7 +3146,7 @@ export default {
         if (columnIndex === 0) {
           return {
             backgroundColor: '#e0f3fc !important',
-            borderRadius: '3px 0 0 3px',
+            borderRadius: '5px 0 0 5px',
             borderLeft: '1px solid #409eff',
             borderTop: '1px solid #409eff',
             borderBottom: '1px solid #409eff',
@@ -3144,7 +3155,7 @@ export default {
         if (columnIndex === 3) {
           return {
             backgroundColor: '#e0f3fc !important',
-            borderRadius: '0 3px 3px 0',
+            borderRadius: '0 5px 5px 0',
             borderRight: '1px solid #409eff',
             borderTop: '1px solid #409eff',
             borderBottom: '1px solid #409eff',
@@ -4575,6 +4586,7 @@ export default {
 }
 
 >>> .el-table {
+  padding-left: 20px;
   th.gutter {
     display: table-cell !important;
   }
@@ -4594,4 +4606,5 @@ export default {
 .mt-5 {
   margin-top: 5px;
 }
+
 </style>
diff --git a/src/components/popover/MenuPopover.vue b/src/components/popover/MenuPopover.vue
@@ -86,9 +86,10 @@ export default {
 <style lang="scss" scoped>
   .newFileMenu ul {
     list-style: none;
-    padding-inline-start: 0px;
+    padding-inline-start: 0;
     margin-top: 0;
     margin-bottom: 0;
+    padding: 0 5px;
   }
   .newFileMenu li {
     cursor: pointer;

diff --git a/src/styles/home-index.scss b/src/styles/home-index.scss
@@ -43,6 +43,7 @@
   padding-inline-start: 0;
   margin-top: 0;
   margin-bottom: 0;
+  padding: 0 5px;
 }
 .newFileMenu li {
   cursor: pointer;
@@ -286,7 +287,7 @@
 }
 
 >>> .van-grid {
-  padding-left: 10px;
+  padding-left: 20px;
 }
 
 >>> .van-grid-item__content .svg-icon{

diff --git a/src/views/home/mobile/index.vue b/src/views/home/mobile/index.vue
@@ -1538,9 +1538,10 @@ input {
 
 .newFileMenu ul {
   list-style: none;
-  padding-inline-start: 0px;
+  padding-inline-start: 0;
   margin-top: 0;
   margin-bottom: 0;
+  padding: 0 5px;
 }
 
 .newFileMenu {