新增 船务公司管理

src/App.vue

@@ -40,6 +40,14 @@ export default {
 
 .aside {
   width: 220px;
+  white-space: nowrap;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.aside::-webkit-scrollbar {
+  display: none;
 }
 
 .footer {
@@ -237,4 +245,8 @@ export default {
 .mr20 {
   margin-right: 20px;
 }
+
+.mr40 {
+  margin-right: 40px;
+}
 </style>

src/apis/fetch.js

@@ -420,4 +420,54 @@ export default {
   uploadUFile(data) {
     return $http("/ufile/upload", data);
   },
+
+  // 获取省
+  getProvince(data) {
+    return $http("/region/province", data);
+  },
+
+  // 获取市
+  getCity(data) {
+    return $http("/region/city", data);
+  },
+
+  // 获取区
+  getArea(data) {
+    return $http("/region/area", data);
+  },
+
+  // 添加船务公司
+  addShippingCompany(data) {
+    return $http("/shipping/add", data);
+  },
+
+  // 船务公司列表
+  getShippingCompanyList(data) {
+    return $http("/shipping/list", data);
+  },
+
+  // 船务公司详情
+  getShippingCompanyDetail(data) {
+    return $http("/shipping/detail", data);
+  },
+
+  // 添加船务公司子账号
+  addShippingCompanyAccount(data) {
+    return $http("/shipping/detail/account/add", data);
+  },
+
+  // 船务公司子账号列表
+  getShippingCompanyAccountList(data) {
+    return $http("/shipping/detail/account/list", data);
+  },
+
+  // 启用/禁用船务公司
+  enableDisableShippingCompany(data) {
+    return $http("/shipping/enableDisable", data);
+  },
+
+  // 船务公司更新有效期
+  updateShippingCompanyExpiredTime(data) {
+    return $http("/shipping/updateExpiredTime", data);
+  },
 };

src/components/Aside.vue

@@ -1,7 +1,7 @@
 <template>
   <el-menu
     :default-active="this.$store.state.currentMenuItem"
-    style="width: 220px; height: 100%"
+    style="width: 200px; height: 100%"
     background-color="#141B29"
     text-color="#fff"
     active-text-color="#ffd04b"
@@ -78,6 +78,16 @@ export default {
           },
         ],
       },
+      {
+        icon: "User",
+        title: "船务公司管理",
+        items: [
+          {
+            path: "/shippingManage/shippingCompanyList",
+            name: "船务公司列表",
+          },
+        ],
+      },
       {
         icon: "Ship",
         title: "船舶信息",

src/router/index.js

@@ -73,6 +73,25 @@ const router = createRouter({
       },
       component: () => import("../views/shipOwnerManage/shipOwnerList.vue"),
     },
+    {
+      path: "/shippingManage/shippingCompanyList",
+      name: "shippingCompanyList",
+      meta: {
+        title: "船务公司列表",
+      },
+      component: () =>
+        import("../views/shippingManage/shippingCompanyList.vue"),
+    },
+
+    {
+      path: "/shippingManage/shippingCompanyDetail",
+      name: "shippingCompanyDetail",
+      meta: {
+        title: "船务公司详情",
+      },
+      component: () =>
+        import("../views/shippingManage/shippingCompanyDetail.vue"),
+    },
 
     {
       path: "/voyage/voyageAdd",

src/views/shippingManage/shippingCompanyDetail.vue

@@ -0,0 +1,452 @@
+<template>
+  <div class="line-container-p24">
+    <i class="el-icon-arrow-left"></i>
+    <div
+      class="dib go-back ml8"
+      @click="router.replace('/shippingManage/shippingCompanyList')"
+    >
+      返回船务公司列表
+    </div>
+  </div>
+  <div class="container-title">船务公司信息</div>
+  <div class="line-container-p24">
+    <div class="df aic">
+      <div class="normal-label">船务公司名称</div>
+      <div class="show-input">{{ detail.companyName }}</div>
+      <div class="normal-label">联系人</div>
+      <div class="show-input">{{ detail.contactName }}</div>
+      <div class="normal-label">联系人手机号</div>
+      <div class="show-input">{{ detail.contactPhone }}</div>
+    </div>
+    <div class="df aic mt20" style="font-size: 13px; color: #333">
+      <div class="normal-label" style="margin-right: 40px">详细地址</div>
+      <div class="mr10">{{ detail.province }}</div>
+      <div class="mr10">{{ detail.city }}</div>
+      <div class="mr10">{{ detail.area }}</div>
+      <div class="mr10">{{ detail.address }}</div>
+    </div>
+    <div class="df aic mt20">
+      <div class="normal-label" style="margin-right: 40px">过期时间</div>
+      <el-date-picker
+        v-model="expiredTime"
+        class="mr20"
+        type="datetime"
+        format="YYYY/MM/DD"
+        value-format="YYYY/MM/DD"
+        placeholder="过期时间"
+        :disabled="!expiredTimeEditable"
+      ></el-date-picker>
+      <el-button
+        v-if="!expiredTimeEditable"
+        @click="editExpiredTime"
+        size="mini"
+        type="primary"
+      >
+        修改
+      </el-button>
+      <el-button
+        v-if="expiredTimeEditable"
+        @click="submitExpiredTime"
+        size="mini"
+        type="primary"
+      >
+        提交
+      </el-button>
+      <el-button
+        v-if="expiredTimeEditable"
+        @click="cancelExpiredTime"
+        size="mini"
+      >
+        取消
+      </el-button>
+    </div>
+  </div>
+  <div class="container-title">账号信息</div>
+  <div class="line-container-p24">
+    <div style="display: flex; justify-content: space-between">
+      <div style="display: flex">
+        <el-input
+          placeholder="名称/手机号"
+          prefix-icon="el-icon-search"
+          v-model="term"
+          clearable
+          style="width: 330px"
+        ></el-input>
+        <div class="seach-btn" @click="getShippingCompanyAccountList(1)">
+          查询
+        </div>
+      </div>
+      <div class="cargo-owner-add" @click="dialogFormVisible = true">
+        添加账号
+      </div>
+      <el-dialog
+        title="添加账号"
+        v-model="dialogFormVisible"
+        @closed="resetForm"
+      >
+        <template v-slot:default>
+          <el-form
+            :model="ruleForm"
+            :rules="rules"
+            ref="form"
+            label-width="110px"
+            label-position="left"
+          >
+            <el-form-item label="船务公司名称">
+              {{ detail.companyName }}
+            </el-form-item>
+            <el-form-item prop="userName" label="姓名">
+              <el-input
+                style="width: 280px"
+                v-model="ruleForm.userName"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="phone" label="手机号">
+              <el-input
+                style="width: 280px"
+                v-model="ruleForm.phone"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="password" label="密码">
+              <el-input
+                style="width: 280px"
+                v-model="ruleForm.password"
+              ></el-input>
+            </el-form-item>
+            <!-- <el-form-item prop="cargo" label="关联货种">
+              <el-select
+                v-model="ruleForm.cargo"
+                placeholder="请选择"
+                style="width: 280px"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.key"
+                />
+              </el-select>
+            </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="addShippingCompanyAccount(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="phone"
+          label="手机号"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="password"
+          label="密码"
+          min-width="160"
+          align="center"
+        ></el-table-column>
+      </el-table>
+      <div style="width: 100%; text-align: right; margin-top: 43px">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :current-page="currentPage"
+          :total="total"
+          @current-change="pageChange"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, h, reactive, toRefs, onMounted } from "vue";
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
+import store from "../../store";
+import router from "../../router";
+import { useRoute } from "vue-router";
+import api from "../../apis/fetch";
+import { subTimeStr } from "../../utils/utils";
+
+const route = useRoute();
+let detail = ref({});
+async function getShippingCompanyDetail() {
+  let res = await api.getShippingCompanyDetail({
+    shippingId: route.query.id,
+  });
+  if (res.data.status == 0) {
+    detail.value = res.data.result;
+    expiredTime.value = res.data.result.expiredTime;
+  } else {
+    console.log(res);
+  }
+}
+
+let tableData = ref([]);
+let term = ref("");
+let currentPage = ref(1);
+let total = ref(0);
+let dialogFormVisible = ref(false);
+let form = ref(null);
+
+async function getShippingCompanyAccountList(page) {
+  currentPage.value = page || currentPage.value;
+  let res = await api.getShippingCompanyAccountList({
+    shippingId: route.query.id,
+    currentPage: currentPage.value,
+    size: 10,
+    term: term.value,
+  });
+  if (res.data.status == 0) {
+    tableData.value = res.data.result;
+    total.value = res.data.total;
+  } else {
+    tableData.value = [];
+    total.value = 0;
+  }
+}
+
+const ruleForm = ref({
+  userName: "",
+  phone: "",
+  password: "",
+  cargo: "",
+});
+const rules = ref({
+  userName: [{ required: true, message: "请填写姓名", trigger: "blur" }],
+  phone: [
+    { required: true, message: "请填写手机号", trigger: "blur" },
+    { min: 11, max: 11, message: "请正确填写手机号", trigger: "blur" },
+  ],
+  password: [{ required: false, message: "请填写密码", trigger: "blur" }],
+  cargo: [{ required: true, message: "请选择货种", trigger: "blur" }],
+});
+
+let options = ref([]);
+
+async function getCargoList() {
+  let res = await api.getCargoList({
+    shippingId: route.query.id,
+  });
+  options.value = res.data.result;
+}
+
+function resetForm() {
+  dialogFormVisible.value = false;
+
+  form.value.resetFields();
+}
+
+function pageChange(e) {
+  currentPage.value = e;
+  getShippingCompanyAccountList();
+}
+
+async function addShippingCompanyAccount() {
+  form.value.validate(async (valid) => {
+    if (valid) {
+      let { userName, phone, password, cargo } = ruleForm.value;
+
+      let res = await api.addShippingCompanyAccount({
+        shippingId: route.query.id,
+        userName,
+        phone,
+        password,
+        cargo,
+      });
+      console.log(res);
+      if (res.data.status == 0) {
+        ElNotification.success({
+          title: "添加成功",
+          duration: 2000,
+          message: `${userName}:${res.data.msg}`,
+          type: "success",
+        });
+        resetForm();
+        getShippingCompanyAccountList();
+      } else {
+        ElNotification.error({
+          title: "失败",
+          duration: 3000,
+          message: res.data.msg,
+        });
+      }
+    } else {
+      return false;
+    }
+  });
+}
+
+let expiredTime = ref("");
+let expiredTimeEditable = ref(false);
+let expiredTimeCache = "";
+function editExpiredTime() {
+  expiredTimeCache = expiredTime.value;
+  expiredTimeEditable.value = true;
+}
+async function submitExpiredTime() {
+  let res = await api.updateShippingCompanyExpiredTime({
+    expiredTime: expiredTime.value,
+    shippingId: route.query.id,
+  });
+  if (res.data.status == 0) {
+    expiredTimeEditable.value = false;
+  } else {
+    console.log(res);
+  }
+}
+function cancelExpiredTime() {
+  expiredTime.value = expiredTimeCache;
+  expiredTimeEditable.value = false;
+}
+
+onMounted(() => {
+  getShippingCompanyDetail();
+  getShippingCompanyAccountList();
+});
+</script>
+<style scoped>
+.go-back {
+  font-size: 16px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #333d43;
+  line-height: 100%;
+  cursor: pointer;
+}
+
+.normal-label {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #353a42;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.show-input {
+  width: 200px;
+  height: 32px;
+  background: #ffffff;
+  border-radius: 2px;
+  border: 1px solid #dee0e3;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #333333;
+  line-height: 32px;
+  padding-left: 12px;
+  margin-right: 40px;
+}
+
+.radio-btns {
+  height: 38px;
+  width: 103px;
+  border: 1px solid #1486f9;
+  line-height: 38px;
+  text-align: center;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0094fe;
+  cursor: pointer;
+}
+
+.left-radius {
+  border-top-left-radius: 19px;
+  border-bottom-left-radius: 19px;
+}
+
+.right-radius {
+  border-top-right-radius: 19px;
+  border-bottom-right-radius: 19px;
+}
+.currentbtn {
+  background: #1486f9;
+  color: #fff;
+}
+
+.seach-btn {
+  display: inline-block;
+  width: 60px;
+  height: 38px;
+  background: #0094fe;
+  border-radius: 2px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  text-align: center;
+  line-height: 38px;
+  margin-left: 15px;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.seach-btn {
+  display: inline-block;
+  width: 60px;
+  height: 38px;
+  background: #0094fe;
+  border-radius: 2px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  text-align: center;
+  line-height: 38px;
+  margin-left: 15px;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.cargo-owner-add {
+  width: 120px;
+  height: 36px;
+  border-radius: 2px;
+  border: 1px solid #0094fe;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0094fe;
+  line-height: 36px;
+  text-align: center;
+  cursor: pointer;
+  margin-right: 20px;
+}
+
+:deep().el-dialog {
+  width: 560px;
+  padding: 20px 50px;
+  border-radius: 6px;
+}
+
+:deep() .el-dialog__title {
+  font-size: 18px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0094fe;
+}
+</style>

src/views/shippingManage/shippingCompanyList.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="full-container-p24">
+    <div style="display: flex; justify-content: space-between">
+      <div style="display: flex">
+        <el-input
+          placeholder="请输入船务名称/联系人/联系人手机号"
+          prefix-icon="el-icon-search"
+          v-model="term"
+          clearable
+          style="width: 330px"
+        ></el-input>
+        <div class="seach-btn" @click="getShippingCompanyList(1)">查询</div>
+      </div>
+      <div class="cargo-owner-add" @click="dialogFormVisible = true">
+        添加船务公司
+      </div>
+      <el-dialog title="添加船务公司" v-model="dialogFormVisible">
+        <template v-slot:default>
+          <el-form
+            :model="ruleForm"
+            :rules="rules"
+            ref="form"
+            label-width="110px"
+            label-position="left"
+          >
+            <el-form-item prop="companyName" label="船务公司名称">
+              <el-input
+                style="width: 190px"
+                v-model="ruleForm.companyName"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="contactName" label="联系人">
+              <el-input
+                style="width: 190px"
+                v-model="ruleForm.contactName"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="contactPhone" label="联系人手机号">
+              <el-input
+                style="width: 190px"
+                v-model="ruleForm.contactPhone"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="areaCode" label="省/市/区县">
+              <el-select
+                @change="
+                  (cityCode = ''),
+                    (cityOptions = []),
+                    (ruleForm.areaCode = ''),
+                    (areaOptions = []),
+                    getCity()
+                "
+                class="mb10"
+                v-model="provinceCode"
+                placeholder="请选择省"
+              >
+                <el-option
+                  v-for="item in provinceOptions"
+                  :key="item.key"
+                  :label="item.value"
+                  :value="item.key"
+                />
+              </el-select>
+              <el-select
+                @change="
+                  ((ruleForm.areaCode = ''), (areaOptions = [])), getArea()
+                "
+                class="mb10"
+                v-model="cityCode"
+                placeholder="请选择市"
+              >
+                <el-option
+                  v-for="item in cityOptions"
+                  :key="item.key"
+                  :label="item.value"
+                  :value="item.key"
+                />
+              </el-select>
+              <el-select v-model="ruleForm.areaCode" placeholder="请选择区县">
+                <el-option
+                  v-for="item in areaOptions"
+                  :key="item.key"
+                  :label="item.value"
+                  :value="item.key"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="address" label="详细地址">
+              <el-input
+                style="width: 190px"
+                v-model="ruleForm.address"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="expiredTime" label="过期时间">
+              <el-date-picker
+                v-model="ruleForm.expiredTime"
+                type="datetime"
+                format="YYYY/MM/DD"
+                value-format="YYYY/MM/DD"
+                placeholder="过期时间"
+              ></el-date-picker>
+            </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="addShippingCompany(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="companyName"
+          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="contactPhone"
+          label="联系人手机号"
+          min-width="160"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createTime"
+          label="入驻时间"
+          min-width="200"
+          align="center"
+        >
+          <template v-slot="scope">
+            {{ subTimeStr(scope.row.createTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-button
+              @click="shippingCompanyDetail(scope.row.id, 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"
+          :current-page="currentPage"
+          :total="total"
+          @current-change="pageChange"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, h, reactive, toRefs, onMounted } from "vue";
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
+import store from "../../store";
+import router from "../../router";
+import md5 from "md5";
+import api from "../../apis/fetch";
+import { subTimeStr } from "../../utils/utils";
+
+let currentPage = ref(1);
+let term = ref("");
+let tableData = ref([]);
+let total = ref(0);
+let dialogFormVisible = ref(false);
+let form = ref(null);
+const ruleForm = ref({
+  companyName: "",
+  contactName: "",
+  contactPhone: "",
+  areaCode: "",
+  address: "",
+});
+const rules = ref({
+  companyName: [
+    { required: true, message: "请填写船务公司名称", trigger: "blur" },
+  ],
+  contactName: [{ required: false, message: "请填写联系人", trigger: "blur" }],
+  contactPhone: [
+    { required: false, message: "请填写手机号", trigger: "blur" },
+    { min: 11, max: 11, message: "请正确填写手机号", trigger: "blur" },
+  ],
+  areaCode: [{ required: true, message: "请选择地区", trigger: "blur" }],
+  address: [{ required: true, message: "请填写详细地址", trigger: "blur" }],
+  expiredTime: [
+    { required: false, message: "请填写过期时间", trigger: "blur" },
+  ],
+});
+async function getShippingCompanyList(page) {
+  currentPage.value = page || currentPage.value;
+  let res = await api.getShippingCompanyList({
+    currentPage: currentPage.value,
+    size: 10,
+    term: term.value,
+  });
+  if (res.data.status == 0) {
+    tableData.value = res.data.result;
+    total.value = res.data.total;
+  } else {
+    tableData.value = [];
+    total.value = 0;
+  }
+}
+function resetForm() {
+  dialogFormVisible.value = false;
+
+  form.value.resetFields();
+}
+async function addShippingCompany() {
+  form.value.validate(async (valid) => {
+    if (valid) {
+      let {
+        companyName,
+        contactName,
+        contactPhone,
+        expiredTime,
+        areaCode,
+        address,
+      } = ruleForm.value;
+      let res = await api.addShippingCompany({
+        companyName,
+        contactName,
+        contactPhone,
+        expiredTime,
+        areaCode,
+        address,
+      });
+      console.log(res);
+      if (res.data.status == 0) {
+        ElNotification.success({
+          title: "添加成功",
+          duration: 0,
+          message: `${companyName}:${res.data.msg}`,
+          type: "success",
+        });
+        resetForm();
+        getShippingCompanyList();
+      } else {
+        ElNotification.error({
+          title: "失败",
+          duration: 3000,
+          message: res.data.msg,
+        });
+      }
+    } else {
+      return false;
+    }
+  });
+}
+
+async function shippingCompanyDetail(id) {
+  router.push({
+    path: "/shippingManage/shippingCompanyDetail",
+    query: {
+      id,
+    },
+  });
+}
+function pageChange(e) {
+  currentPage.value = e;
+  getShippingCompanyList();
+}
+
+let provinceOptions = ref([]);
+let provinceCode = ref("");
+let cityOptions = ref([]);
+let cityCode = ref("");
+let areaOptions = ref([]);
+async function getProvince() {
+  let { data } = await api.getProvince({});
+  provinceOptions.value = data.result;
+}
+
+async function getCity() {
+  let { data } = await api.getCity({
+    provinceCode: provinceCode.value,
+  });
+  cityOptions.value = data.result;
+}
+
+async function getArea() {
+  let { data } = await api.getArea({
+    cityCode: cityCode.value,
+  });
+  areaOptions.value = data.result;
+}
+onMounted(() => {
+  getShippingCompanyList();
+  getProvince();
+});
+</script>
+<style scoped>
+.seach-btn {
+  display: inline-block;
+  width: 60px;
+  height: 38px;
+  background: #0094fe;
+  border-radius: 2px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  text-align: center;
+  line-height: 38px;
+  margin-left: 15px;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.cargo-owner-add {
+  width: 120px;
+  height: 36px;
+  border-radius: 2px;
+  border: 1px solid #0094fe;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0094fe;
+  line-height: 36px;
+  text-align: center;
+  cursor: pointer;
+  margin-right: 20px;
+}
+
+:deep().el-dialog {
+  width: 560px;
+  padding: 20px 50px;
+  border-radius: 6px;
+}
+
+:deep() .el-dialog__title {
+  font-size: 18px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0094fe;
+}
+</style>