样式 更新

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="this.$store.state.isLogin" class="main-container">
     <HeaderVue class="header"></HeaderVue>
-    <div class="main">
+    <div class="main-app">
       <div class="aside"><AsideVue></AsideVue></div>
       <div class="section">
         <div class="first-title">
@@ -30,7 +30,7 @@ export default {
   },
 };
 </script>
-<style scoped>
+<style>
 .main-container {
   height: 100%;
   width: 100%;
@@ -45,7 +45,7 @@ export default {
 .footer {
   text-align: center;
 }
-.main {
+.main-app {
   width: 100%;
   height: calc(100% - 120px);
   display: flex;
@@ -72,9 +72,18 @@ export default {
 
 .main-section {
   margin: 24px 0 0 24px;
-  padding: 24px;
-  background: #fff;
   height: calc(100% - 140px);
   overflow: scroll;
 }
+
+.line-container {
+  padding: 24px;
+  background: #fff;
+}
+
+.full-container {
+  padding: 24px;
+  height: calc(100% - 48px);
+  background: #fff;
+}
 </style>

src/views/cargoOwnerManage/cargoOwnerList.vue

@@ -1,111 +1,113 @@
 <template>
-  <div style="display: flex; justify-content: space-between">
-    <div style="display: flex">
-      <el-input
-        placeholder="请输入货主名称/联系人/联系人手机号"
-        prefix-icon="el-icon-search"
-        v-model="term"
-        style="height: 32px; width: 330px; line-height: 32px"
-      ></el-input>
-      <div class="seach-btn" @click="getCargoOwnerList">查询</div>
-    </div>
-    <div class="cargo-owner-add" @click="dialogFormVisible = true">
-      添加货主
-    </div>
-    <el-dialog
-      title="添加货主"
-      :visible="dialogFormVisible"
-      v-model:visible="dialogFormVisible"
-    >
-      <template v-slot:default>
-        <el-form
-          :model="ruleForm"
-          :rules="rules"
-          ref="form"
-          label-width="110px"
-          label-position="left"
-        >
-          <el-form-item prop="userName" label="货主名称">
-            <el-input
-              style="width: 280px"
-              v-model="ruleForm.userName"
-            ></el-input>
-          </el-form-item>
-          <el-form-item prop="contactName" label="联系人">
-            <el-input
-              style="width: 280px"
-              v-model="ruleForm.contactName"
-            ></el-input>
-          </el-form-item>
-          <el-form-item prop="userPhone" label="联系人手机号">
-            <el-input
-              style="width: 280px"
-              v-model="ruleForm.userPhone"
-            ></el-input>
-          </el-form-item>
-        </el-form>
-      </template>
-      <template v-slot:footer>
-        <div class="dialog-footer">
-          <el-button @click="resetForm">取 消</el-button>
-          <el-button type="primary" @click="addCargoOwner(ruleForm)">
-            确 定
-          </el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-  <div style="margin-top: 24px">
-    <el-table :data="tableData" stripe style="width: 100%">
-      <el-table-column
-        type="index"
-        label="序号"
-        min-width="80"
-        align="center"
-      ></el-table-column>
-      <el-table-column
-        prop="userName"
-        label="货主"
-        min-width="120"
-        align="center"
-      ></el-table-column>
-      <el-table-column
-        prop="contactName"
-        label="联系人"
-        min-width="120"
-        align="center"
-      ></el-table-column>
-      <el-table-column
-        prop="userPhone"
-        label="联系人手机号"
-        min-width="160"
-        align="center"
-      ></el-table-column>
-      <el-table-column
-        prop="createTime"
-        label="入驻时间"
-        min-width="200"
-        align="center"
-      ></el-table-column>
-      <el-table-column label="操作" min-width="80" align="center">
-        <template v-slot="scope">
-          <el-button
-            @click="cargoOwnerDetail(scope.row, tableData)"
-            type="text"
-            size="small"
+  <div class="full-container">
+    <div style="display: flex; justify-content: space-between">
+      <div style="display: flex">
+        <el-input
+          placeholder="请输入货主名称/联系人/联系人手机号"
+          prefix-icon="el-icon-search"
+          v-model="term"
+          style="height: 32px; width: 330px; line-height: 32px"
+        ></el-input>
+        <div class="seach-btn" @click="getCargoOwnerList">查询</div>
+      </div>
+      <div class="cargo-owner-add" @click="dialogFormVisible = true">
+        添加货主
+      </div>
+      <el-dialog
+        title="添加货主"
+        :visible="dialogFormVisible"
+        v-model:visible="dialogFormVisible"
+      >
+        <template v-slot:default>
+          <el-form
+            :model="ruleForm"
+            :rules="rules"
+            ref="form"
+            label-width="110px"
+            label-position="left"
           >
-            查看详情
-          </el-button>
+            <el-form-item prop="userName" label="货主名称">
+              <el-input
+                style="width: 280px"
+                v-model="ruleForm.userName"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="contactName" label="联系人">
+              <el-input
+                style="width: 280px"
+                v-model="ruleForm.contactName"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="userPhone" label="联系人手机号">
+              <el-input
+                style="width: 280px"
+                v-model="ruleForm.userPhone"
+              ></el-input>
+            </el-form-item>
+          </el-form>
         </template>
-      </el-table-column>
-    </el-table>
-    <div style="width: 100%; text-align: right; margin-top: 43px">
-      <el-pagination
-        background
-        layout="prev, pager, next"
-        :total="total"
-        @current-change="pageChange"
-      ></el-pagination>
+        <template v-slot:footer>
+          <div class="dialog-footer">
+            <el-button @click="resetForm">取 消</el-button>
+            <el-button type="primary" @click="addCargoOwner(ruleForm)">
+              确 定
+            </el-button>
+          </div>
+        </template>
+      </el-dialog>
+    </div>
+    <div style="margin-top: 24px">
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column
+          type="index"
+          label="序号"
+          min-width="80"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="userName"
+          label="货主"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="contactName"
+          label="联系人"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="userPhone"
+          label="联系人手机号"
+          min-width="160"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createTime"
+          label="入驻时间"
+          min-width="200"
+          align="center"
+        ></el-table-column>
+        <el-table-column label="操作" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-button
+              @click="cargoOwnerDetail(scope.row, tableData)"
+              type="text"
+              size="small"
+            >
+              查看详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="width: 100%; text-align: right; margin-top: 43px">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="total"
+          @current-change="pageChange"
+        ></el-pagination>
+      </div>
     </div>
   </div>
 </template>