Ver Fonte

更新 导出按钮样式

wzh há 3 anos atrás
pai
commit
aa238e0f69
1 ficheiros alterados com 38 adições e 23 exclusões
  1. 38 23
      src/views/voyage/voyageList.vue

+ 38 - 23
src/views/voyage/voyageList.vue

@@ -123,30 +123,41 @@
           @click="voyageAddDialogVisible = true"
           >添加航次</el-button
         >
-        <div>
-          <el-button
-            type="primary"
-            size="small"
-            @click="showExportModal('航次列表')"
-            style="margin-left: 10px; margin-bottom: 10px"
-            >导出航次列表</el-button
-          >
-          <el-button
-            type="primary"
-            size="small"
-            @click="showExportModal('航次跟踪')"
-            >导出航次跟踪</el-button
-          >
-          <el-button
-            type="primary"
-            size="small"
-            @click="showExportModal('卸货记录')"
-            >导出卸货记录</el-button
-          >
-          <el-button type="primary" size="small" @click="downloadFYDI"
-            >下载FYDI指数</el-button
+        <el-popover placement="bottom" :width="100" trigger="hover">
+          <template #reference>
+            <el-button size="medium" type="primary">导出</el-button>
+          </template>
+          <div
+            style="
+              display: flex;
+              flex-direction: column;
+              height: 180px;
+              justify-content: space-between;
+            "
           >
-        </div>
+            <el-button
+              type="primary"
+              size="medium"
+              @click="showExportModal('航次列表')"
+              >导出航次列表</el-button
+            >
+            <el-button
+              type="primary"
+              size="medium"
+              @click="showExportModal('航次跟踪')"
+              >导出航次跟踪</el-button
+            >
+            <el-button
+              type="primary"
+              size="medium"
+              @click="showExportModal('卸货记录')"
+              >导出卸货记录</el-button
+            >
+            <el-button type="primary" size="medium" @click="downloadFYDI"
+              >下载FYDI指数</el-button
+            >
+          </div>
+        </el-popover>
       </div>
     </div>
     <el-dialog
@@ -1064,4 +1075,8 @@ onMounted(() => {
 .el-radio:last-child {
   margin-right: 20px;
 }
+
+.el-button {
+  margin-left: 0;
+}
 </style>