init

index.html

@@ -25,6 +25,7 @@
       #app {
         height: 100%;
         width: 100%;
+        background: #f2f3f5;
       }
     </style>
   </head>

package.json

@@ -13,7 +13,7 @@
     "@element-plus/icons-vue": "^2.0.6",
     "axios": "^0.21.1",
     "copy-to-clipboard": "^3.3.1",
-    "element-plus": "^2.2.20",
+    "element-plus": "^2.2.25",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
     "vite-plugin-compression": "^0.3.5",

src/App.vue

@@ -1,47 +1,11 @@
 <template>
-  <div v-if="this.$store.state.isLogin" class="main-container">
-    <HeaderVue class="header"></HeaderVue>
-    <div class="main-app">
-      <div class="aside"><AsideVue></AsideVue></div>
-      <div class="section">
-        <div class="first-title">
-          {{ this.$store.state.firstTitle }}
-        </div>
-        <div class="main-section"><router-view></router-view></div>
-      </div>
-    </div>
-    <FooterVue></FooterVue>
-  </div>
-  <router-view v-else></router-view>
+  <Layout></Layout>
 </template>
 
-<script>
-import HeaderVue from "./components/Header.vue";
-import AsideVue from "./components/Aside.vue";
-import FooterVue from "./components/Footer.vue";
-export default {
-  components: {
-    HeaderVue,
-    AsideVue,
-    FooterVue,
-  },
-  data() {
-    return {};
-  },
-};
+<script setup>
+import Layout from "./layout/Layout.vue";
 </script>
 <style>
-.main-container {
-  height: 100%;
-  width: 100%;
-  min-height: 800px;
-  min-width: 1200px;
-}
-
-.aside {
-  width: 220px;
-}
-
 .footer {
   text-align: center;
 }
@@ -70,12 +34,6 @@ export default {
   padding-left: 20px;
 }
 
-.main-section {
-  margin: 24px 0 0 24px;
-  height: calc(100% - 76px);
-  overflow-y: auto;
-}
-
 .line-container-p18 {
   padding: 18px;
   background: #fff;
@@ -91,56 +49,6 @@ export default {
   background: #fff;
 }
 
-.df {
-  display: flex;
-}
-
-.ffw {
-  flex-flow: wrap;
-}
-
-.jcsa {
-  justify-content: space-around;
-}
-.jcsb {
-  justify-content: space-between;
-}
-
-.aic {
-  align-items: center;
-}
-
-.dib {
-  display: inline-block;
-}
-
-.ml8 {
-  margin-left: 8px;
-}
-
-.jcfe {
-  justify-content: flex-end;
-}
-
-.mt20 {
-  margin-top: 20px;
-}
-.mb20 {
-  margin-bottom: 20px;
-}
-
-.mt30 {
-  margin-top: 30px;
-}
-
-.mr30 {
-  margin-right: 30px;
-}
-
-.mt50 {
-  margin-top: 50px;
-}
-
 .container-title {
   font-size: 18px;
   font-family: PingFangSC-Medium, PingFang SC;
@@ -193,48 +101,4 @@ export default {
   height: 100%;
   line-height: 100%;
 }
-
-.pointer {
-  cursor: pointer;
-}
-
-.el-upload-list__item-thumbnail {
-  object-fit: contain !important;
-}
-.el-input__inner {
-  text-align: center;
-  color: #777 !important;
-}
-.el-upload--picture-card {
-  border: none;
-}
-
-.ml20 {
-  margin-left: 20px;
-}
-
-.hr {
-  border-bottom: 2px solid #3b91fa;
-  opacity: 0.2;
-}
-
-.m10-0 {
-  margin: 10px 0;
-}
-
-.m30-0 {
-  margin: 30px 0;
-}
-
-.fww {
-  flex-wrap: wrap;
-}
-
-.tar {
-  text-align: right;
-}
-
-.mr20 {
-  margin-right: 20px;
-}
 </style>

src/components/RemoteSearch.vue

@@ -1,6 +1,6 @@
 <template>
   <el-autocomplete
-    v-model="value"
+    v-model="val"
     :fetch-suggestions="getSelectList"
     :placeholder="placeholder"
     @select="selectItem"
@@ -36,6 +36,7 @@ export default {
   },
   emits: ["input", "selectItem"],
   setup(props, { emit }) {
+    let val = ref("");
     let selectStr = ref("");
     const getSelectList = _.debounce(
       async (queryString, cb) => {

src/layout/AppMain.vue

@@ -0,0 +1,13 @@
+<template>
+  <router-view v-slot="{ Component, route }">
+    <keep-alive>
+      <component :is="Component" :key="route.path" />
+    </keep-alive>
+  </router-view>
+</template>
+<script setup>
+import { useRoute } from "vue-router";
+const route = useRoute();
+</script>
+
+<style scoped></style>

src/layout/Aside.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-menu
+    :default-active="this.$store.state.currentMenuItem"
+    style="width: 220px; height: 100%"
+    background-color="#141B29"
+    text-color="#fff"
+    active-text-color="#ffd04b"
+    :router="true"
+  >
+    <el-sub-menu v-for="(item, index) in menu" :key="item" :index="index + ''">
+      <template v-slot:title>
+        <el-icon :size="18">
+          <component :is="item.icon" />
+        </el-icon>
+        <span>{{ item.title }}</span>
+      </template>
+      <el-menu-item
+        v-for="son in item.items"
+        :index="son.path"
+        :key="son"
+        @click="changeIndex(son.path)"
+      >
+        {{ son.name }}
+      </el-menu-item>
+    </el-sub-menu>
+  </el-menu>
+</template>
+<script setup>
+import { ref } from "vue";
+
+let defaultActive = ref();
+function changeIndex(path) {
+  defaultActive.value = path;
+}
+let menu = [
+  {
+    icon: "Fold",
+    title: "首页",
+    items: [
+      {
+        path: "/index",
+        name: "首页",
+      },
+    ],
+  },
+  {
+    icon: "Avatar",
+    title: "船东管理",
+    items: [
+      {
+        path: "/shipOwnerManage/shipOwnerList",
+        name: "船东列表",
+      },
+    ],
+  },
+  {
+    icon: "Ship",
+    title: "船舶管理",
+    items: [
+      {
+        path: "/shipManage/shipList",
+        name: "船舶列表",
+      },
+    ],
+  },
+  {
+    icon: "Document",
+    title: "工作站",
+    items: [
+      {
+        path: "/workStation/certsManage",
+        name: "证书管理",
+      },
+      {
+        path: "/workStation/insuranceManage",
+        name: "保险管理",
+      },
+    ],
+  },
+];
+</script>
+<style scoped>
+.el-sub-menu__title i {
+  height: 20px;
+  margin-right: 10px;
+}
+</style>

src/layout/Footer.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="copyright">
+    <div class="in" @click="goBeian">
+      Copyright © 2021 河南省汇很多科技有限公司 豫ICP备 2021029101 号
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  setup() {
+    function goBeian() {
+      window.open("https://beian.miit.gov.cn/");
+    }
+    return {
+      goBeian,
+    };
+  },
+};
+</script>
+<style scoped>
+.copyright {
+  width: 100%;
+  height: 60px;
+  background: #b3c0d1;
+}
+
+.in {
+  width: 520px;
+  margin: 0 auto;
+  line-height: 60px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #333333;
+  opacity: 0.8;
+  cursor: pointer;
+}
+</style>

src/layout/Header.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="header">
+    <div class="left">
+      <img class="first" src="../assets/three.png" alt="" />
+      <div class="shu"></div>
+      <img class="logo" src="../assets/white-logo.png" alt="" />
+      <div
+        class="ml20"
+        style="color: #fff; font-size: 18px; height: 60px; padding-top: 50px"
+      >
+        version：{{ timelineData[0]?.version }}
+      </div>
+    </div>
+    <div class="right">
+      <div
+        @click="dialogVisible = true"
+        class="pointer"
+        style="padding-top: 6px"
+      >
+        <el-badge
+          :hidden="isNewMessage.length == 0"
+          :value="isNewMessage.length"
+          class="mr30"
+        >
+          <el-icon :size="size" color="#00a9dc">
+            <BellFilled />
+          </el-icon>
+        </el-badge>
+      </div>
+      <img class="user-icon" src="../assets/user.png" alt="" />
+      <div class="user">{{ userName }}</div>
+      <el-popover placement="bottom" trigger="hover" :width="280">
+        <div
+          style="
+            width: 100%;
+            height: 60vh;
+            overflow-y: auto;
+            padding-right: 10px;
+            margin-right: 10px;
+          "
+        >
+          <el-timeline>
+            <el-timeline-item
+              v-for="item in timelineData"
+              center
+              :timestamp="item.timer"
+              placement="top"
+              :key="item"
+            >
+              <div class="log-card">
+                <p style="margin-bottom: 10px">Version: {{ item.version }}</p>
+                <div
+                  style="margin-bottom: 5px; font-size: 12px"
+                  v-for="(item1, index) in item.remarks"
+                  :key="item1"
+                >
+                  {{ index + 1 }}. {{ item1.text }}
+                </div>
+              </div>
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+
+        <template #reference>
+          <el-badge value="new">
+            <div class="log">新功能日志</div>
+          </el-badge>
+        </template>
+      </el-popover>
+      <div class="quit" @click="quit">[退出]</div>
+    </div>
+    <el-dialog v-model="dialogVisible" title="拍照通知" width="30%">
+      <el-table :data="tableData[currentTableIndex - 1]" border>
+        <el-table-column align="center" type="index" />
+        <el-table-column align="center" property="shipName" label="船名" />
+        <el-table-column align="center" property="status" label="状态" />
+      </el-table>
+      <el-pagination
+        style="text-align: right; margin-top: 20px"
+        @current-change="pageChange"
+        background
+        layout="prev, pager, next"
+        :total="total"
+      ></el-pagination>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="dialogVisible = false">
+            确定
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import router from "../router";
+import store from "../store";
+import api from "../apis/fetch";
+import { onMounted, ref } from "vue";
+import { BellFilled } from "@element-plus/icons";
+import _ from "lodash";
+import { AnonymousLogin, tcb } from "../apis/cloudLogin";
+
+const db = tcb.database();
+const v = db.collection("huihenduo_versions");
+const __ = db.command;
+let userName = localStorage.staffName;
+function quit() {
+  localStorage.removeItem("staffPhone");
+  localStorage.removeItem("id");
+  localStorage.removeItem("status");
+  localStorage.removeItem("userType");
+  localStorage.removeItem("staffName");
+  store.commit("changeLogin", true);
+  router.push({ path: "/login" });
+}
+let dialogVisible = ref(false);
+let isNewMessage = ref([]);
+function isWithinTime(t0 = new Date()) {
+  let t1 = _.cloneDeep(t0);
+  let t2 = _.cloneDeep(t0);
+  t1.setHours(8);
+  t1.setMinutes(30);
+  t1.setSeconds(0);
+  t2.setHours(9);
+  t2.setMinutes(30);
+  t2.setSeconds(0);
+  let t00 = t0.getTime();
+  let t11 = t1.getTime();
+  let t22 = t2.getTime();
+  return t00 > t11 && t00 < t22;
+}
+function spArr(arr, num) {
+  //arr是你要分割的数组，num是以几个为一组
+  let newArr = []; //首先创建一个新的空数组。用来存放分割好的数组
+  for (let i = 0; i < arr.length; ) {
+    //注意：这里与for循环不太一样的是，没有i++
+    newArr.push(arr.slice(i, (i += num)));
+  }
+  return newArr;
+}
+let tableData = ref([]);
+let currentTableIndex = ref(1);
+let total = ref(0);
+function pageChange(c) {
+  currentTableIndex.value = c;
+}
+async function getUnphotographNotice() {
+  let { data } = await api.getUnphotographNotice();
+  if (data.status == 0) {
+    for (let i of data.result) {
+      isNewMessage.value.push({
+        shipName: i,
+        status: "未拍照",
+      });
+    }
+    total.value = isNewMessage.value.length;
+    tableData.value = spArr(isNewMessage.value, 10);
+  } else {
+    isNewMessage.value = 0;
+  }
+}
+onMounted(() => {
+  // getUnphotographNotice();
+  // setInterval(async () => {
+  //   if (isWithinTime()) {
+  //     getUnphotographNotice();
+  //   }
+  // }, 2 * 60 * 1000);
+  cloudLogin();
+});
+let timelineData = ref([]);
+async function cloudLogin() {
+  await AnonymousLogin();
+  getAbledVersions();
+}
+async function getAbledVersions() {
+  let res = await v
+    .aggregate()
+    .match({ deleted: __.neq(true) })
+    .sort({
+      createTime: -1,
+    })
+    .limit(10)
+    .end();
+  timelineData.value = res.data;
+}
+
+const size = 20;
+</script>
+<style scoped>
+.header {
+  width: 100%;
+  height: 60px;
+  background: #212029;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.left,
+.right {
+  display: flex;
+  align-items: center;
+}
+
+.first {
+  width: 22px;
+  height: 20px;
+  margin: 0 22px;
+}
+
+.shu {
+  width: 1px;
+  height: 60px;
+  background: #101015;
+  margin-right: 22px;
+}
+
+.logo {
+  width: 120px;
+  height: 40px;
+}
+
+.title {
+  font-size: 21px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  margin-left: 26px;
+}
+
+.user-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 16px;
+}
+
+.user,
+.quit,
+.log {
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+  cursor: pointer;
+  margin-right: 16px;
+}
+
+.log {
+  margin-right: 4px;
+}
+
+.quit {
+  margin-left: 26px;
+}
+
+.log-card p {
+  font-size: 10px;
+}
+</style>

src/layout/Layout.vue

@@ -0,0 +1,72 @@
+<template>
+  <HeaderVue v-if="store.state.isLogin" class="header"></HeaderVue>
+  <div v-if="store.state.isLogin" class="aside"><AsideVue></AsideVue></div>
+  <div v-if="store.state.isLogin && route.path != '/index'" class="first-title">
+    {{ this.$store.state.firstTitle }}
+  </div>
+  <div
+    :class="[
+      'main-section',
+      store.state.isLogin ? '' : 'login',
+      route.path == '/index' ? 'index' : '',
+    ]"
+  >
+    <AppMain></AppMain>
+  </div>
+</template>
+
+<script setup>
+import store from "../store";
+import { useRoute } from "vue-router";
+import HeaderVue from "./Header.vue";
+import AsideVue from "./Aside.vue";
+import FooterVue from "./Footer.vue";
+import AppMain from "./AppMain.vue";
+const route = useRoute();
+</script>
+<style scoped>
+.header {
+  position: absolute;
+}
+.aside {
+  position: absolute;
+  top: 60px;
+  bottom: 0;
+  width: 220px;
+}
+
+.first-title {
+  position: absolute;
+  top: 60px;
+  left: 220px;
+}
+
+.main-section {
+  position: absolute;
+  top: 132px;
+  right: 0;
+  left: 220px;
+  bottom: 0;
+  overflow-y: auto;
+  margin-left: 20px;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+}
+
+.login {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin-left: 0;
+}
+
+.index {
+  left: 220px;
+  top: 60px;
+  margin: 0;
+}
+</style>

src/main.js

@@ -58,4 +58,4 @@ app.config.globalProperties.check = () => {
   console.log("check");
 };
 
-app.use(router).use(ElementPlus).use(store).mount("#app");
+app.use(router).use(store).mount("#app");

src/styles/color.css

@@ -0,0 +1,76 @@
+.black {
+  color: #000 !important;
+}
+
+.c1 {
+  color: #111 !important;
+}
+
+.c2 {
+  color: #222 !important;
+}
+
+.c3 {
+  color: #333 !important;
+}
+
+.c4 {
+  color: #444 !important;
+}
+
+.c5 {
+  color: #555 !important;
+}
+
+.c6 {
+  color: #666 !important;
+}
+
+.c7 {
+  color: #777 !important;
+}
+
+.c8 {
+  color: #888 !important;
+}
+
+.c9 {
+  color: #999 !important;
+}
+
+.ca {
+  color: #aaa !important;
+}
+
+.cb {
+  color: #bbb !important;
+}
+
+.cc {
+  color: #ccc !important;
+}
+
+.cd {
+  color: #ddd !important;
+}
+
+.ce {
+  color: #eee !important;
+}
+
+.white {
+  color: #fff !important;
+}
+
+.red {
+  color: red !important;
+}
+
+.primary {
+  padding: 20px !important;
+  font-size: 32px !important;
+  border-radius: 52px !important;
+  color: #fff !important;
+  text-align: center !important;
+  background: linear-gradient(270deg, #0089fd 0%, #43a9ff 100%) !important;
+}

src/styles/font-size.css

@@ -0,0 +1,51 @@
+.fs20 {
+  font-size: 20px !important;
+}
+
+.fs22 {
+  font-size: 22px !important;
+}
+
+.fs24 {
+  font-size: 24px !important;
+}
+
+.fs26 {
+  font-size: 26px !important;
+}
+
+.fs28 {
+  font-size: 28px !important;
+}
+
+.fs30 {
+  font-size: 28px !important;
+}
+
+.fs32 {
+  font-size: 32px !important;
+}
+
+.fs34 {
+  font-size: 34px !important;
+}
+
+.fs36 {
+  font-size: 36px !important;
+}
+
+.fs38 {
+  font-size: 38px !important;
+}
+
+.fs40 {
+  font-size: 40px !important;
+}
+
+.fs48 {
+  font-size: 48px !important;
+}
+
+.fs50 {
+  font-size: 50px !important;
+}

src/styles/index.css

@@ -1,199 +1,52 @@
+@import "./margin.css";
+@import "./padding.css";
+@import "./font-size.css";
+@import "./color.css";
 
-.df {
-  display: flex;
+.tac {
+  text-align: center;
 }
 
-.ffw {
-  flex-flow: wrap;
+.tal {
+  text-align: left;
 }
 
-.jcsa {
-  justify-content: space-around;
+.tar {
+  text-align: right;
 }
-.jcsb {
-  justify-content: space-between;
+
+.df {
+  display: flex;
 }
 
-.jcfe {
-  justify-content: flex-end;
+.jcsb {
+  justify-content: space-between;
 }
 
 .jcc {
   justify-content: center;
 }
 
-.aic {
-  align-items: center;
-}
-
-
-.aifs {
-  align-items: flex-start;
-}
-
-.dib {
-  display: inline-block;
-}
-
-
-.pointer {
-  cursor: pointer;
-}
-
-.m0a{
-  margin: 0 auto;
-}
-
-.mt5{
-  margin-top: 5px;
-}
-
-.mt10{
-  margin-top: 10px;
-}
-
-.mt20{
-  margin-top: 20px;
-}
-
-.mt30{
-  margin-top: 30px;
-}
-
-.mt40{
-  margin-top: 40px;
-}
-
-.mr5{
-  margin-right: 5px;
-}
-
-.mr10{
-  margin-right: 10px;
-}
-
-.mr20{
-  margin-right: 20px;
-}
-
-.mr30{
-  margin-right: 30px;
-}
-
-.mb5{
-  margin-bottom: 5px;
-}
-
-.mb10{
-  margin-bottom: 10px;
-}
-
-.mb20{
-  margin-bottom: 20px;
-}
-
-.mb30{
-  margin-bottom: 30px;
-}
-
-.ml5{
-  margin-left: 5px;
-}
-
-.ml10{
-  margin-left: 10px;
-}
-
-.ml20{
-  margin-left: 20px;
-}
-
-.ml30{
-  margin-left: 30px;
-}
-
-.p5{
-  padding: 5px;
-}
-
-.p10{
-  padding: 10px;
-}
-
-.p20{
-  padding: 20px;
-}
-
-.p30{
-  padding: 30px;
-}
-
-.pt5{
-  padding-top: 5px;
-}
-
-.pt10{
-  padding-top: 10px;
-}
-
-.pt20{
-  padding-top: 20px;
-}
-
-.pt30{
-  padding-top: 30px;
-}
-
-.pr5{
-  padding-right: 5px;
-}
-
-.pr10{
-  padding-right: 10px;
-}
-
-.pr20{
-  padding-right: 20px;
-}
-
-.pr30{
-  padding-right: 30px;
-}
-
-.pb5{
-  padding-bottom: 5px;
-}
-
-.pb10{
-  padding-bottom: 10px;
-}
-
-.pb20{
-  padding-bottom: 20px;
-}
-
-.pb30{
-  padding-bottom: 30px;
-}
-
-.pl5{
-  padding-left: 5px;
+.jcfe {
+  justify-content: flex-end;
 }
 
-.pl10{
-  padding-left: 10px;
+.jcsa {
+  justify-content: space-around;
 }
 
-.pl20{
-  padding-left: 20px;
+.jcs {
+  justify-content: start;
 }
 
-.pl30{
-  padding-left: 30px;
+.aic {
+  align-items: center;
 }
 
-.tac{
-  text-align: center;
+.aib {
+  align-items: baseline;
 }
 
-
+.pointer{
+  cursor: pointer;
+}

src/styles/margin.css

@@ -0,0 +1,131 @@
+.m10 {
+  margin: 10px !important;
+}
+
+.m20 {
+  margin: 20px !important;
+}
+
+.m30 {
+  margin: 30px !important;
+}
+
+.m40 {
+  margin: 40px !important;
+}
+
+.m50 {
+  margin: 50px !important;
+}
+
+.m10a {
+  margin: 10px auto !important;
+}
+
+.m20a {
+  margin: 20px auto !important;
+}
+
+.m30a {
+  margin: 30px auto !important;
+}
+
+.m40a {
+  margin: 40px auto !important;
+}
+
+.m50a {
+  margin: 50px auto !important;
+}
+
+.mt10 {
+  margin-top: 10px !important;
+}
+
+.mt20 {
+  margin-top: 20px !important;
+}
+
+.mt30 {
+  margin-top: 30px !important;
+}
+
+.mt40 {
+  margin-top: 40px !important;
+}
+
+.mt50 {
+  margin-top: 50px !important;
+}
+
+.mt60 {
+  margin-top: 60px !important;
+}
+
+.mt80 {
+  margin-top: 80px !important;
+}
+
+.mt100 {
+  margin-top: 100px !important;
+}
+
+.mr10 {
+  margin-right: 10px !important;
+}
+
+.mr20 {
+  margin-right: 20px !important;
+}
+
+.mr30 {
+  margin-right: 30px !important;
+}
+
+.mr40 {
+  margin-right: 40px !important;
+}
+
+.mr50 {
+  margin-right: 50px !important;
+}
+
+.mb10 {
+  margin-bottom: 10px !important;
+}
+
+.mb20 {
+  margin-bottom: 20px !important;
+}
+
+.mb30 {
+  margin-bottom: 30px !important;
+}
+
+.mb40 {
+  margin-bottom: 40px !important;
+}
+
+.mb50 {
+  margin-bottom: 50px !important;
+}
+
+.ml10 {
+  margin-left: 10px !important;
+}
+
+.ml20 {
+  margin-left: 20px !important;
+}
+
+.ml30 {
+  margin-left: 30px !important;
+}
+
+.ml40 {
+  margin-left: 40px !important;
+}
+
+.ml50 {
+  margin-left: 50px !important;
+}

src/styles/padding.css

@@ -0,0 +1,99 @@
+.p10 {
+  padding: 10px !important;
+}
+
+.p20 {
+  padding: 20px !important;
+}
+
+.p30 {
+  padding: 30px !important;
+}
+
+.p40 {
+  padding: 40px !important;
+}
+
+.p50 {
+  padding: 50px !important;
+}
+
+.pt10 {
+  padding-top: 10px !important;
+}
+
+.pr10 {
+  padding-right: 10px !important;
+}
+
+.pb10 {
+  padding-bottom: 10px !important;
+}
+
+.pl10 {
+  padding-left: 10px !important;
+}
+
+.pt20 {
+  padding-top: 20px !important;
+}
+
+.pr20 {
+  padding-right: 20px !important;
+}
+
+.pb20 {
+  padding-bottom: 20px !important;
+}
+
+.pl20 {
+  padding-left: 20px !important;
+}
+
+.pt30 {
+  padding-top: 30px !important;
+}
+
+.pr30 {
+  padding-right: 30px !important;
+}
+
+.pb30 {
+  padding-bottom: 30px !important;
+}
+
+.pl30 {
+  padding-left: 30px !important;
+}
+
+.pt40 {
+  padding-top: 40px !important;
+}
+
+.pr40 {
+  padding-right: 40px !important;
+}
+
+.pb40 {
+  padding-bottom: 40px !important;
+}
+
+.pl40 {
+  padding-left: 40px !important;
+}
+
+.pt50 {
+  padding-top: 50px !important;
+}
+
+.pr50 {
+  padding-right: 50px !important;
+}
+
+.pb50 {
+  padding-bottom: 50px !important;
+}
+
+.pl50 {
+  padding-left: 50px !important;
+}

src/views/shipManage/shipDetail.vue

@@ -116,7 +116,7 @@
           <template v-slot="scope">
             <el-button
               @click="shipOwnerDetail(scope.row.userId, tableData)"
-              type="text"
+              text
               size="small"
             >
               查看详情
@@ -241,7 +241,7 @@
           <el-form-item prop="cargo" label="货种">
             <el-input v-model="voyageForm.cargo"></el-input>
           </el-form-item>
-          <el-form-item> </el-form-item>
+          <el-form-item></el-form-item>
           <el-form-item prop="tons" label="吨位">
             <el-input v-model="voyageForm.tons"></el-input>
           </el-form-item>
@@ -348,7 +348,7 @@
         <template v-slot="scope">
           <el-button
             @click="voyageDetail(scope.row.id, tableData)"
-            type="text"
+            text
             size="small"
           >
             查看详情

src/views/shipManage/shipList.vue

@@ -66,7 +66,7 @@
           <template v-slot="scope">
             <el-button
               @click="shipDetail(scope.row.shipId, tableData)"
-              type="text"
+              text
               size="small"
             >
               查看详情

src/views/shipOwnerManage/shipOwnerList.vue

@@ -86,7 +86,7 @@
           <template v-slot="scope">
             <el-button
               @click="shipOwnerDetail(scope.row.shipOwnerId, tableData)"
-              type="text"
+              text
               size="small"
             >
               查看详情