更新 航次列表功能样式部局

src/views/voyage/voyageList.vue

@@ -72,6 +72,7 @@
           size="small"
           v-auth="'DOWNLOADVOYAGELIST'"
           @click="showExportModal('航次列表')"
+          style="margin-left: 10px; margin-bottom: 10px"
           >导出航次列表</el-button
         >
         <el-button
@@ -289,94 +290,111 @@
       />
     </div> -->
     <div
-      class="df aic jcsb mt20"
-      style="font-size: 14px; color: #333; width: 1300px"
+      class="df aic jcfs mt20"
+      style="
+        font-size: 14px;
+        color: #333;
+        width: calc(100vw - 300px);
+        flex-wrap: wrap;
+      "
     >
-      <div>装货港:</div>
-      <el-select
-        style="width: 120px"
-        v-model="voyageListPostData.loadPortId"
-        placeholder="装货港"
-        size="small"
-        @change="getVoyageList"
-        @focus="getPortSelect"
-        filterable
-      >
-        <el-option
-          v-for="item in portOptions"
-          :key="item"
-          :label="item.value"
-          :value="item.key"
-        />
-      </el-select>
-      <div>卸货港:</div>
-      <el-select
-        style="width: 120px"
-        v-model="voyageListPostData.discPortId"
-        placeholder="卸货港"
-        size="small"
-        @change="getVoyageList"
-        @focus="getPortSelect"
-        filterable
-      >
-        <el-option
-          v-for="item in portOptions"
-          :key="item"
-          :label="item.value"
-          :value="item.key"
-        />
-      </el-select>
-      <div>预计到港时间:</div>
-      <el-select
-        style="width: 120px"
-        v-model="voyageListPostData.isArrived"
-        placeholder="到港状态"
-        size="small"
-        @change="getVoyageList"
-      >
-        <el-option label="已到港" :value="0" />
-        <el-option label="未到港" :value="1" />
-      </el-select>
-      <div>航次状态:</div>
-      <el-select
-        style="width: 120px"
-        v-model="voyageListPostData.abnormalStatus"
-        placeholder="航次状态"
-        size="small"
-        @change="getVoyageList"
-      >
-        <el-option label="正常" :value="0" />
-        <el-option label="异常" :value="1" />
-      </el-select>
-      <div>货种:</div>
-      <el-select
-        style="width: 100px"
-        v-model="voyageListPostData.cargo"
-        placeholder="货种"
-        size="small"
-        @change="getVoyageList"
-        @focus="getCargoSelect"
-        filterable
-      >
-        <el-option
-          v-for="item in cargoOptions"
-          :key="item"
-          :label="item.key"
-          :value="item.value"
-        />
-      </el-select>
-      <div>保险状态:</div>
-      <el-select
-        style="width: 120px"
-        v-model="voyageListPostData.hasInsurance"
-        placeholder="保险状态"
-        size="small"
-        @change="getVoyageList"
-      >
-        <el-option label="未购买" :value="0" />
-        <el-option label="已购买" :value="1" />
-      </el-select>
-      <el-button @click="resetFilter" class="ml20" size="small" type="primary"
+      <div class="df jcsb aic mb10 mr20">
+        <div class="mr10">装货港:</div>
+        <el-select
+          style="width: 120px"
+          v-model="voyageListPostData.loadPortId"
+          placeholder="装货港"
+          size="small"
+          @change="getVoyageList"
+          @focus="getPortSelect"
+          filterable
+        >
+          <el-option
+            v-for="item in portOptions"
+            :key="item"
+            :label="item.value"
+            :value="item.key"
+          />
+        </el-select>
+      </div>
+      <div class="df jcsb aic mb10 mr20">
+        <div class="mr10">卸货港:</div>
+        <el-select
+          style="width: 120px"
+          v-model="voyageListPostData.discPortId"
+          placeholder="卸货港"
+          size="small"
+          @change="getVoyageList"
+          @focus="getPortSelect"
+          filterable
+        >
+          <el-option
+            v-for="item in portOptions"
+            :key="item"
+            :label="item.value"
+            :value="item.key"
+          />
+        </el-select>
+      </div>
+      <div class="df jcsb aic mb10 mr20">
+        <div class="mr10">预计到港时间:</div>
+        <el-select
+          style="width: 120px"
+          v-model="voyageListPostData.isArrived"
+          placeholder="到港状态"
+          size="small"
+          @change="getVoyageList"
+        >
+          <el-option label="已到港" :value="0" />
+          <el-option label="未到港" :value="1" />
+        </el-select>
+      </div>
+      <div class="df jcsb aic mb10 mr20">
+        <div class="mr10">航次状态:</div>
+        <el-select
+          style="width: 120px"
+          v-model="voyageListPostData.abnormalStatus"
+          placeholder="航次状态"
+          size="small"
+          @change="getVoyageList"
+        >
+          <el-option label="正常" :value="0" />
+          <el-option label="异常" :value="1" />
+        </el-select>
+      </div>
+      <div class="df jcsb aic mb10 mr20">
+        <div class="mr10">货种:</div>
+        <el-select
+          style="width: 100px"
+          v-model="voyageListPostData.cargo"
+          placeholder="货种"
+          size="small"
+          @change="getVoyageList"
+          @focus="getCargoSelect"
+          filterable
+        >
+          <el-option
+            v-for="item in cargoOptions"
+            :key="item"
+            :label="item.key"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="df jcsb aic mb10 mr20">
+        <div class="mr10">保险状态:</div>
+        <el-select
+          style="width: 120px"
+          v-model="voyageListPostData.hasInsurance"
+          placeholder="保险状态"
+          size="small"
+          @change="getVoyageList"
+        >
+          <el-option label="未购买" :value="0" />
+          <el-option label="已购买" :value="1" />
+        </el-select>
+      </div>
+      <el-button @click="resetFilter" class="mb10" size="small" type="primary"
         >重置</el-button
       >
     </div>