style(layout): 调整主区域样式

- 移除 .main-section 的背景色和内边距
- 调整 .container-title 的样式和布局
- 统一表单样式和间距
- 优化表格样式

src/App.vue

@@ -25,6 +25,9 @@
   padding: 24px;
   background: #fff;
   max-width: 1200px;
+  margin-bottom: 16px;
+  padding-left: 32px;
+  box-shadow: inset -1px -1px 1px #e8e8e8;
 }
 
 .full-container-p24 {
@@ -39,8 +42,9 @@
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
   color: #0094fe;
-  margin: 15px 0 15px 0;
-  padding-left: 20px;
+  margin: 16px 0 10px 0;
+  padding-left: 16px;
+  max-width: 1200px;
 }
 .container-second-title {
   font-size: 16px;

src/components/ShipInfo.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="container-title">船舶信息</div>
     <div
-      class="pl50 pt10 bgf df jcsb pr20"
+      class="pt10 bgf df jcsb pr20"
       v-if="route.name == 'shipOwnerDetail' || route.name == 'shipDetail'"
       style="max-width: 1200px"
     >

src/layout/Layout.vue

@@ -53,14 +53,12 @@ const route = useRoute();
 
 .main-section {
   position: absolute;
-  background: #fff;
   top: 132px;
   right: 0;
   left: 160px;
   bottom: 0;
   overflow-y: auto;
   margin-left: 20px;
-  padding-left: 30px;
 }
 
 .footer {

src/views/fireSafetyManage/fireSafetyTemplateDetail.vue

@@ -1,112 +1,114 @@
 <template>
-  <div class="pt40 pl30" style="width: 600px">
-    <el-form
-      :model="ruleForm"
-      :rules="rules"
-      ref="ruleFormRef"
-      label-width="140px"
-      label-position="left"
-    >
-      <el-form-item class="mb30" prop="securityCheckName" label="安检名称">
-        <el-input
-          style="width: 280px"
-          v-model="ruleForm.securityCheckName"
-        ></el-input>
-      </el-form-item>
-      <el-form-item class="mb30" prop="securityCheckTarget" label="安检目标">
-        <el-input
-          style="width: 280px"
-          v-model="ruleForm.securityCheckTarget"
-        ></el-input>
-      </el-form-item>
-      <el-form-item class="mb30" prop="securityCheckFocus" label="排查重点">
-        <el-input
-          style="width: 280px"
-          v-model="ruleForm.securityCheckFocus"
-        ></el-input>
-      </el-form-item>
-      <el-form-item class="mb30" prop="shipLength" label="选择适用船长">
-        <div class="df aic" style="width: 100%">
+  <div class="line-container-p24">
+    <div class="pt40 pl30">
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleFormRef"
+        label-width="140px"
+        label-position="left"
+      >
+        <el-form-item class="mb30" prop="securityCheckName" label="安检名称">
           <el-input
-            style="width: 130px"
-            v-model="ruleForm.minShipLen"
-            :disabled="ruleForm.isAllShip === 1"
+            style="width: 280px"
+            v-model="ruleForm.securityCheckName"
           ></el-input>
-          <div class="mr10 ml10">-</div>
+        </el-form-item>
+        <el-form-item class="mb30" prop="securityCheckTarget" label="安检目标">
           <el-input
-            style="width: 130px"
-            v-model="ruleForm.maxShipLen"
-            :disabled="ruleForm.isAllShip === 1"
+            style="width: 280px"
+            v-model="ruleForm.securityCheckTarget"
           ></el-input>
-          <el-checkbox
-            class="ml20"
-            v-model="ruleForm.isAllShip"
-            label="所有船舶"
-            size="large"
-            :true-value="1"
-            :false-value="0"
-            :true-label="1"
-            :false-label="0"
-          />
+        </el-form-item>
+        <el-form-item class="mb30" prop="securityCheckFocus" label="排查重点">
+          <el-input
+            style="width: 280px"
+            v-model="ruleForm.securityCheckFocus"
+          ></el-input>
+        </el-form-item>
+        <el-form-item class="mb30" prop="shipLength" label="选择适用船长">
+          <div class="df aic" style="width: 100%">
+            <el-input
+              style="width: 130px"
+              v-model="ruleForm.minShipLen"
+              :disabled="ruleForm.isAllShip === 1"
+            ></el-input>
+            <div class="mr10 ml10">-</div>
+            <el-input
+              style="width: 130px"
+              v-model="ruleForm.maxShipLen"
+              :disabled="ruleForm.isAllShip === 1"
+            ></el-input>
+            <el-checkbox
+              class="ml20"
+              v-model="ruleForm.isAllShip"
+              label="所有船舶"
+              size="large"
+              :true-value="1"
+              :false-value="0"
+              :true-label="1"
+              :false-label="0"
+            />
+          </div>
+        </el-form-item>
+        <div class="df aic jcsb mb20 mt50">
+          <el-button class="mr30" type="primary" @click="addNewItem">
+            添加新检查项目
+          </el-button>
+          <el-button-group v-show="ruleForm.items.length > 1">
+            <el-button
+              v-for="(item, index) in ruleForm.items"
+              @click="itemIndex = index"
+              :type="itemIndex == index ? 'primary' : ''"
+            >
+              {{ item.checkItemName || "新检查项目" }}
+            </el-button>
+          </el-button-group>
         </div>
-      </el-form-item>
-      <div class="df aic jcsb mb20 mt50">
-        <el-button class="mr30" type="primary" @click="addNewItem">
-          添加新检查项目
-        </el-button>
-        <el-button-group v-show="ruleForm.items.length > 1">
+        <el-form-item class="mb30" label="项目名称" prop="checkItemName">
+          <el-input
+            style="width: 280px"
+            v-model="ruleForm.items[itemIndex].checkItemName"
+          ></el-input>
+        </el-form-item>
+        <el-form-item class="mb30" label="项目类型" prop="checkItemTypeName">
+          <el-select
+            style="width: 280px"
+            v-model="ruleForm.items[itemIndex].checkItemTypeName"
+            value-key="checkItemTypeName"
+            placeholder="请选择安全检查项目类型"
+            @change="selectChange"
+          >
+            <el-option
+              v-for="item in templateTypeSelect"
+              :label="item.value"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item class="mb30" label="项目备注" prop="checkItemRemark">
+          <el-input
+            style="width: 280px"
+            v-model="ruleForm.items[itemIndex].checkItemRemark"
+          ></el-input>
+        </el-form-item>
+        <div class="df jcfe">
           <el-button
-            v-for="(item, index) in ruleForm.items"
-            @click="itemIndex = index"
-            :type="itemIndex == index ? 'primary' : ''"
+            v-show="ruleForm.items.length > 1"
+            size="small"
+            type="primary"
+            @click="removeItem"
           >
-            {{ item.checkItemName || "新检查项目" }}
+            移除当前项目
           </el-button>
-        </el-button-group>
-      </div>
-      <el-form-item class="mb30" label="项目名称" prop="checkItemName">
-        <el-input
-          style="width: 280px"
-          v-model="ruleForm.items[itemIndex].checkItemName"
-        ></el-input>
-      </el-form-item>
-      <el-form-item class="mb30" label="项目类型" prop="checkItemTypeName">
-        <el-select
-          style="width: 280px"
-          v-model="ruleForm.items[itemIndex].checkItemTypeName"
-          value-key="checkItemTypeName"
-          placeholder="请选择安全检查项目类型"
-          @change="selectChange"
-        >
-          <el-option
-            v-for="item in templateTypeSelect"
-            :label="item.value"
-            :value="item"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item class="mb30" label="项目备注" prop="checkItemRemark">
-        <el-input
-          style="width: 280px"
-          v-model="ruleForm.items[itemIndex].checkItemRemark"
-        ></el-input>
-      </el-form-item>
-      <div class="df jcfe">
-        <el-button
-          v-show="ruleForm.items.length > 1"
-          size="small"
-          type="primary"
-          @click="removeItem"
-        >
-          移除当前项目
+        </div>
+      </el-form>
+      <div class="dialog-footer df aic jcfe">
+        <el-button @click="resetForm">重置</el-button>
+        <el-button type="primary" @click="addFireSafetyTemplate(ruleForm)">
+          确定
         </el-button>
       </div>
-    </el-form>
-    <div class="dialog-footer df aic jcfe">
-      <el-button @click="resetForm">重置</el-button>
-      <el-button type="primary" @click="addFireSafetyTemplate(ruleForm)">
-        确定
-      </el-button>
     </div>
   </div>
 </template>

src/views/shipManage/shipDetail.vue

@@ -18,96 +18,100 @@
       @onSubmit="getCrewList"
     ></CrewInfo> -->
   </div>
-  <el-table border :data="crews" stripe style="width: 1000px">
-    <el-table-column align="center" type="index" label="序号" width="80" />
-    <el-table-column
-      align="center"
-      prop="fullname"
-      label="船员姓名"
-      min-width="120"
-    />
-    <el-table-column
-      align="center"
-      prop="expiryAt"
-      label="适任证书有效期"
-      min-width="120"
-    >
-      <template v-slot="scope">
-        {{ subTimeStr(scope.row.crewCertExpiryDate) }}
-      </template>
-    </el-table-column>
-    <el-table-column align="center" label="详情" min-width="120">
-      <template #default="scope">
-        <div class="df aic jcc">
-          <el-button type="primary" @click="shipOwnerDetail(scope.row.id)">
-            查看详情
-          </el-button>
-        </div>
-      </template>
-    </el-table-column>
-  </el-table>
-  <div class="df aic jcfe mt40 mr20">
-    <el-pagination
-      :current-page="crewCurrentPage"
-      @current-change="crewPageChange"
-      background
-      layout="prev, pager, next"
-      :total="crewTotal"
-    />
+  <div class="line-container-p24">
+    <el-table border :data="crews" stripe style="width: 1000px">
+      <el-table-column align="center" type="index" label="序号" width="80" />
+      <el-table-column
+        align="center"
+        prop="fullname"
+        label="船员姓名"
+        min-width="120"
+      />
+      <el-table-column
+        align="center"
+        prop="expiryAt"
+        label="适任证书有效期"
+        min-width="120"
+      >
+        <template v-slot="scope">
+          {{ subTimeStr(scope.row.expiryAt, 10) }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="详情" min-width="120">
+        <template #default="scope">
+          <div class="df aic jcc">
+            <el-button type="primary" @click="shipOwnerDetail(scope.row.id)">
+              查看详情
+            </el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="df aic jcfe mt40 mr20">
+      <el-pagination
+        :current-page="crewCurrentPage"
+        @current-change="crewPageChange"
+        background
+        layout="prev, pager, next"
+        :total="crewTotal"
+      />
+    </div>
   </div>
   <div class="container-title">船舶图片</div>
-  <div v-if="medias.length" class="medias-content df ffw">
-    <div class="pic-container">
-      <div v-for="(item, index) in medias" :key="item" class="pic-main">
-        <div :class="['box', index % 2 == 0 ? '' : 'bottom-box']">
-          <div class="card-note">
-            {{ item.shipName }} 拍摄于
-            <br />
-            {{ item.createTime }}
-            <br />
-            天气 : {{ item.weather?.weather }} - 气温 :
-            {{ item.weather?.temperature }}℃
-          </div>
-          <div class="medias-box mb10" style="position: relative">
-            <el-image
-              v-if="item.mediaType == 1"
-              style="width: 100%; height: 100%"
-              fit="contain"
-              :src="item.downloadUrl"
-              @click="openMediaModal(item.downloadUrl, 1, '图片查看')"
-            ></el-image>
+  <div class="line-container-p24">
+    <div v-if="medias.length" class="medias-content df ffw">
+      <div class="pic-container">
+        <div v-for="(item, index) in medias" :key="item" class="pic-main">
+          <div :class="['box', index % 2 == 0 ? '' : 'bottom-box']">
+            <div class="card-note">
+              {{ item.shipName }} 拍摄于
+              <br />
+              {{ item.createTime }}
+              <br />
+              天气 : {{ item.weather?.weather }} - 气温 :
+              {{ item.weather?.temperature }}℃
+            </div>
+            <div class="medias-box mb10" style="position: relative">
+              <el-image
+                v-if="item.mediaType == 1"
+                style="width: 100%; height: 100%"
+                fit="contain"
+                :src="item.downloadUrl"
+                @click="openMediaModal(item.downloadUrl, 1, '图片查看')"
+              ></el-image>
+            </div>
+            <el-button
+              v-if="item.audit == 0"
+              style="display: block; margin: 0 auto"
+              size="small"
+              type="primary"
+              @click="auditAbnormalShip(item.id)"
+            >
+              审核通过
+            </el-button>
           </div>
-          <el-button
-            v-if="item.audit == 0"
-            style="display: block; margin: 0 auto"
-            size="small"
-            type="primary"
-            @click="auditAbnormalShip(item.id)"
-          >
-            审核通过
-          </el-button>
+          <div :class="['s-line', index % 2 == 0 ? '' : 'top210px']"></div>
+          <div class="point"></div>
+          <div class="l-line" v-if="index + 1 != medias.length"></div>
         </div>
-        <div :class="['s-line', index % 2 == 0 ? '' : 'top210px']"></div>
-        <div class="point"></div>
-        <div class="l-line" v-if="index + 1 != medias.length"></div>
       </div>
+      <el-dialog v-model="mediaModal" :title="modalTitle">
+        <el-image
+          v-if="modalType == 1"
+          style="height: 60vh; display: flex"
+          fit="contain"
+          :src="currentUrl"
+          :preview-src-list="modalPreview"
+        ></el-image>
+        <video
+          v-else
+          autoplay
+          controls
+          style="width: 100%; height: 60vh"
+          :src="currentUrl"
+        ></video>
+      </el-dialog>
     </div>
-    <el-dialog v-model="mediaModal" :title="modalTitle">
-      <el-image
-        v-if="modalType == 1"
-        style="height: 60vh; display: flex"
-        fit="contain"
-        :src="currentUrl"
-        :preview-src-list="modalPreview"
-      ></el-image>
-      <video
-        v-else
-        autoplay
-        controls
-        style="width: 100%; height: 60vh"
-        :src="currentUrl"
-      ></video>
-    </el-dialog>
   </div>
 </template>
 <script setup>

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -475,29 +475,28 @@
           />
         </div>
       </div>
+      <div
+        class="df aic jcfe pr20"
+        v-if="!shipOwnerForm.shipInfo.id && isBindShipVisible"
+      >
+        <el-button @click="cancelBindShip">取消绑定</el-button>
+        <el-button type="primary" :loading="bindShipLoading" @click="addShip">
+          绑定船舶
+        </el-button>
+      </div>
+      <div class="df jcc mt30 mb30" v-if="!route.query.shipOwnerId">
+        <el-button @click="router.replace('/shipOwnerManage/shipOwnerList')">
+          取消
+        </el-button>
+        <el-button
+          type="primary"
+          :loading="saveShipOwnerLoading"
+          @click="saveShipOwner"
+        >
+          保存
+        </el-button>
+      </div>
     </div>
-    <div
-      class="df aic jcfe pr20 pb30"
-      v-if="!shipOwnerForm.shipInfo.id && isBindShipVisible"
-    >
-      <el-button @click="cancelBindShip">取消绑定</el-button>
-      <el-button type="primary" :loading="bindShipLoading" @click="addShip">
-        绑定船舶
-      </el-button>
-    </div>
-  </div>
-
-  <div class="df jcc mt30 mb30" v-if="!route.query.shipOwnerId">
-    <el-button @click="router.replace('/shipOwnerManage/shipOwnerList')">
-      取消
-    </el-button>
-    <el-button
-      type="primary"
-      :loading="saveShipOwnerLoading"
-      @click="saveShipOwner"
-    >
-      保存
-    </el-button>
   </div>
 </template>
 <script setup>

src/views/shipSecurityManage/shipCheckTemplateDetail.vue

@@ -1,88 +1,90 @@
 <template>
-  <div class="pt40 pl30" style="width: 600px">
-    <el-form
-      :model="ruleForm"
-      :rules="rules"
-      ref="ruleFormRef"
-      label-width="140px"
-      label-position="left"
-    >
-      <el-form-item class="mb30" prop="securityCheckName" label="安检名称">
-        <el-input
-          style="width: 280px"
-          v-model="ruleForm.securityCheckName"
-        ></el-input>
-      </el-form-item>
-      <el-form-item class="mb30" prop="shipLength" label="选择适用船长">
-        <div class="df aic" style="width: 100%">
+  <div class="line-container-p24">
+    <div class="pt40 pl30" style="width: 600px">
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleFormRef"
+        label-width="140px"
+        label-position="left"
+      >
+        <el-form-item class="mb30" prop="securityCheckName" label="安检名称">
           <el-input
-            style="width: 130px"
-            v-model="ruleForm.minShipLen"
+            style="width: 280px"
+            v-model="ruleForm.securityCheckName"
           ></el-input>
-          <div class="mr10 ml10">-</div>
+        </el-form-item>
+        <el-form-item class="mb30" prop="shipLength" label="选择适用船长">
+          <div class="df aic" style="width: 100%">
+            <el-input
+              style="width: 130px"
+              v-model="ruleForm.minShipLen"
+            ></el-input>
+            <div class="mr10 ml10">-</div>
+            <el-input
+              style="width: 130px"
+              v-model="ruleForm.maxShipLen"
+            ></el-input>
+          </div>
+        </el-form-item>
+        <div class="df aic jcsb mb20 mt50">
+          <el-button class="mr30" type="primary" @click="addNewItem">
+            添加新检查项目
+          </el-button>
+          <el-button-group v-show="ruleForm.items.length > 1">
+            <el-button
+              v-for="(item, index) in ruleForm.items"
+              @click="itemIndex = index"
+              :type="itemIndex == index ? 'primary' : ''"
+            >
+              {{ item.checkItemName || "新检查项目" }}
+            </el-button>
+          </el-button-group>
+        </div>
+        <el-form-item class="mb30" label="项目名称" prop="checkItemName">
           <el-input
-            style="width: 130px"
-            v-model="ruleForm.maxShipLen"
+            style="width: 280px"
+            v-model="ruleForm.items[itemIndex].checkItemName"
           ></el-input>
-        </div>
-      </el-form-item>
-      <div class="df aic jcsb mb20 mt50">
-        <el-button class="mr30" type="primary" @click="addNewItem">
-          添加新检查项目
-        </el-button>
-        <el-button-group v-show="ruleForm.items.length > 1">
+        </el-form-item>
+        <el-form-item class="mb30" label="项目类型" prop="checkItemTypeName">
+          <el-select
+            style="width: 280px"
+            v-model="ruleForm.items[itemIndex].checkItemTypeName"
+            value-key="checkItemTypeName"
+            placeholder="请选择安全检查项目类型"
+            @change="selectChange"
+          >
+            <el-option
+              v-for="item in templateTypeSelect"
+              :label="item.value"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item class="mb30" label="项目备注" prop="checkItemRemark">
+          <el-input
+            style="width: 280px"
+            v-model="ruleForm.items[itemIndex].checkItemRemark"
+          ></el-input>
+        </el-form-item>
+        <div class="df jcfe">
           <el-button
-            v-for="(item, index) in ruleForm.items"
-            @click="itemIndex = index"
-            :type="itemIndex == index ? 'primary' : ''"
+            v-show="ruleForm.items.length > 1"
+            size="small"
+            type="primary"
+            @click="removeItem"
           >
-            {{ item.checkItemName || "新检查项目" }}
+            移除当前项目
           </el-button>
-        </el-button-group>
-      </div>
-      <el-form-item class="mb30" label="项目名称" prop="checkItemName">
-        <el-input
-          style="width: 280px"
-          v-model="ruleForm.items[itemIndex].checkItemName"
-        ></el-input>
-      </el-form-item>
-      <el-form-item class="mb30" label="项目类型" prop="checkItemTypeName">
-        <el-select
-          style="width: 280px"
-          v-model="ruleForm.items[itemIndex].checkItemTypeName"
-          value-key="checkItemTypeName"
-          placeholder="请选择安全检查项目类型"
-          @change="selectChange"
-        >
-          <el-option
-            v-for="item in templateTypeSelect"
-            :label="item.value"
-            :value="item"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item class="mb30" label="项目备注" prop="checkItemRemark">
-        <el-input
-          style="width: 280px"
-          v-model="ruleForm.items[itemIndex].checkItemRemark"
-        ></el-input>
-      </el-form-item>
-      <div class="df jcfe">
-        <el-button
-          v-show="ruleForm.items.length > 1"
-          size="small"
-          type="primary"
-          @click="removeItem"
-        >
-          移除当前项目
+        </div>
+      </el-form>
+      <div class="dialog-footer df aic jcfe">
+        <el-button @click="resetForm">重置</el-button>
+        <el-button type="primary" @click="addSecurityTemplate(ruleForm)">
+          确定
         </el-button>
       </div>
-    </el-form>
-    <div class="dialog-footer df aic jcfe">
-      <el-button @click="resetForm">重置</el-button>
-      <el-button type="primary" @click="addSecurityTemplate(ruleForm)">
-        确定
-      </el-button>
     </div>
   </div>
 </template>

src/views/workStation/certsManage.vue

@@ -69,7 +69,7 @@
             :value="item.type"
           />
         </el-select>
-        <el-table border :data="tableData" stripe style="width: 1000px">
+        <el-table border :data="tableData" stripe>
           <el-table-column
             align="center"
             type="index"