档案样式

src/components/cus/CusButton.vue

@@ -14,16 +14,23 @@
   </template>
   <template v-else-if="type === 'table-edit'">
     <div class="cus-table-button __hover">
-      <SvgIcon :name="icon || 'edit'" size="12" color="var(--cus-main-color)"/>{{ title || '编辑' }}
+      <SvgIcon :name="icon || 'edit'" size="12" color="#4996FF"/>{{ title || '编辑' }}
     </div>
   </template>
   <template v-else-if="type === 'table-del'">
-    <div class="cus-table-button del __hover">
+    <div class="cus-table-button table-del __hover">
       <SvgIcon :name="icon || 'del'" size="12" color="#f56c6c"/>{{ title || '删除' }}
     </div>
   </template>
+  <template v-else-if="type === 'add'">
+    <div class="cus-button add __hover">
+      {{ title || '新增' }}
+    </div>
+  </template>
   <template v-else>
-    <el-button plain>{{ title }}</el-button>
+    <div class="cus-button __hover">
+      {{ title }}
+    </div>
   </template>
 </template>
 
@@ -54,15 +61,30 @@ const state: any = reactive({})
   display: inline-flex;
   align-items: center;
   border-radius: 2px;
-  border: 1px solid var(--cus-main-color);
+  border: 1px solid #4996FF;
   padding: 0 8px;
   gap: 4px;
   font-weight: 400;
-  font-size: 12px;
-  color: var(--cus-main-color);
-  &.del {
+  font-size: 14px;
+  color: #4996FF;
+  &.table-del {
     border-color: #f56c6c;
     color: #f56c6c;
   }
 }
+.cus-button {
+  height: 40px;
+  padding: 0 16px;
+  border-radius: 4px;
+  background: #6DA3EF;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
+  font-size: 16px;
+  color: #FFFFFF;
+  &.add {
+    background-color: #2FBCCD;
+  }
+}
 </style>

src/components/cus/CusDialog.vue

@@ -4,6 +4,7 @@
         --cus-dialog_height: ${height};
         --cus-dialog_max-height: ${maxHeight};
         --cus-dialog_min-height: ${minHeight};
+        background-color: transparent;
       `"
       :modal-class="`
         ${uuid}

src/components/cus/CusSearchButtons.vue

@@ -40,7 +40,7 @@ import {
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 14px;
+      font-size: 16px;
       font-family: Microsoft YaHei;
       font-weight: 400;
       box-sizing: border-box;
@@ -49,18 +49,18 @@ import {
       }
     }
     .search {
-      width: 74px;
-      height: 32px;
-      background: var(--cus-main-color);
+      width: 65px;
+      height: 40px;
+      background: #4996FF;
       border-radius: 4px;
       color: #FFFFFF;
     }
     .reset {
-      width: 74px;
-      height: 32px;
-      border: 1px solid var(--cus-main-color);
+      width: 65px;
+      height: 40px;
       border-radius: 4px;
-      color: var(--cus-main-color);
+      background-color: #6FA6F1;
+      color: #FFFFFF;
     }
     .expand {
       color: var(--cus-main-color);

src/components/easyMap/component/form-draw/index.vue

@@ -432,7 +432,7 @@ export default defineComponent({
       toolsLayout: {
         width: 478,
         left: 10,
-        top: 10
+        top: 110
       },
       tab: '1',
       typeTab: 'default',
@@ -1193,7 +1193,7 @@ export default defineComponent({
 <style scoped lang="scss">
 $mapHeight: var(--easy-map-height);
 .base-draw-com {
-  height: calc($mapHeight - 40px - 20px);
+  height: calc($mapHeight - 250px);
   border-bottom: 1px solid #FFFFFF;
   position: relative;
   display: flex;

src/components/easyMap/component/tools-dialog.vue

@@ -13,19 +13,18 @@
     <div class="easy-map-tools-dialog">
       <div class="head">
         <div class="head-bg">
-          <img class="img-bg" src="../images/window-bg.png"/>
+          <img class="img-bg" src="@/assets/images/web/title-bg.png"/>
           <div class="color-bg"/>
         </div>
         <div class="head-content">
-          <div class="line"/>
           <div class="title">
             {{title}}
             <slot name="title"/>
           </div>
           <div class="buttons">
             <slot name="buttons"/>
-            <SvgIcon v-if="expend !== false" class="expend-button __hover" :class="{active: notExpend}" @click="notExpend = !notExpend" name="arrow_4" color="#ffffff" size="16"/>
-            <SvgIcon v-if="close !== false" class="__hover" @click="$emit('onClose')"  name="close_3" color="#ffffff" size="14"/>
+            <SvgIcon v-if="expend !== false" class="expend-button __hover" :class="{active: notExpend}" @click="notExpend = !notExpend" name="arrow_4" color="#ffffff" size="18"/>
+            <SvgIcon v-if="close !== false" class="__hover" @click="$emit('onClose')"  name="close_3" color="#ffffff" size="16"/>
           </div>
         </div>
       </div>
@@ -101,7 +100,7 @@
   .head {
     position: relative;
     width: 100%;
-    height: 40px;
+    height: 58px;
     display: flex;
     .head-bg {
       width: 100%;
@@ -109,6 +108,7 @@
       z-index: 1;
       opacity: 0.8;
       overflow: hidden;
+      border-radius: 16px 16px 0 0;
       .img-bg {
         user-select: none;
         width: 372px;
@@ -121,7 +121,7 @@
       .color-bg {
         width: calc(100% - 20px);
         height: 100%;
-        background-color: rgba(11, 68, 197);
+        background-color: rgba(88, 148, 235, 1);
         position: absolute;
         top: 0;
         right: 0;
@@ -135,17 +135,10 @@
       z-index: 2;
       display: flex;
       align-items: center;
-      .line {
-        width: 3px;
-        height: 16px;
-        background: #68C3FF;
-        margin-left: 10px;
-      }
       .title {
-        margin-left: 10px;
-        font-size: 16px;
-        font-family: PingFang SC-Medium, PingFang SC;
-        font-weight: 500;
+        margin-left: 24px;
+        font-weight: 400;
+        font-size: 20px;
         color: #FFFFFF;
         display: flex;
         line-height: 1;
@@ -153,7 +146,7 @@
       }
       .buttons {
         margin-left: auto;
-        margin-right: 10px;
+        margin-right: 24px;
         display: flex;
         align-items: center;
         .expend-button {
@@ -169,9 +162,10 @@
   .content {
     width: 100%;
     height: calc(100% - 40px);
-    background-color: rgba(7, 44, 145, 0.9);
+    background-color: rgba(0, 52, 159, 0.85);
     overflow: hidden;
     transition: height .2s;
+    border-radius: 0 0 16px 16px;
     &.not-expend {
       height: 0;
     }

src/components/easyMap/index.vue

@@ -336,7 +336,7 @@ export default defineComponent({
       resizeObserver: <any>null,
       comLayout: {
         formDraw: {
-          top: 10,
+          top: 110,
           left: 10
         }
       }
@@ -484,7 +484,7 @@ export default defineComponent({
     })
     const formDrawEdit = ({config, form}) => {
       state.comLayout.formDraw = {
-        top: 10,
+        top: 110,
         left: mapWidth.value - 478 - 10
       }
       state.toolsShow.formDraw = true

src/style/cus.scss

@@ -98,7 +98,7 @@
     .el-dialog {
       padding: 0;
       height: var(--cus-dialog_height);
-      $borderRadius: 8px;
+      $borderRadius: 16px;
       border-radius: $borderRadius;
       display: flex;
       flex-direction: column;
@@ -106,9 +106,9 @@
         padding: 0;
         margin: 0;
         ._cus-dialog-head {
-          height: 50px;
+          height: 58px;
           width: 100%;
-          background-color: var(--cus-main-color);
+          background-color: #4F8BE9;
           display: flex;
           align-items: center;
           border-radius: $borderRadius $borderRadius 0 0 ;
@@ -118,7 +118,25 @@
           color: #ffffff;
           padding: 0 20px 0 16px;
           box-sizing: border-box;
-          .__cdh-title {}
+          position: relative;
+          &:before {
+            content: "";
+            background-image: url("@/assets/images/web/title-bg.png");
+            border-top-left-radius: $borderRadius;
+            height: 100%;
+            width: 445px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 2;
+          }
+          .__cdh-title {
+            z-index: 3;
+            margin-left: 8px;
+            font-weight: 400;
+            font-size: 20px;
+            color: #FFFFFF;
+          }
           .__cdh-slot {}
           .__cdh-close {
             margin-left: auto;
@@ -132,6 +150,8 @@
         display: flex;
         overflow-y: hidden;
         flex: 1;
+        background-color: rgba(0, 52, 159, 0.7);
+        border-radius: 0 0 $borderRadius $borderRadius;
         .__cus-dialog-main {
           width: 100%;
           display: flex;
@@ -146,14 +166,12 @@
             align-items: center;
             box-sizing: border-box;
             >div {
-              margin-right: 10px;
-              height: 28px;
+              margin-right: 20px;
+              height: 40px;
               border-radius: 4px;
-              padding: 0 14px;
+              padding: 0 28px;
               line-height: 1;
-              font-size: 14px;
-              font-family: Microsoft YaHei;
-              font-weight: 400;
+              font-size: 16px;
               display: flex;
               align-items: center;
               justify-content: center;
@@ -163,13 +181,12 @@
               }
             }
             .__cus-dialog-foot_submit {
-              background: var(--cus-main-color);
+              background: #4996FF;
               color: #FFFFFF;
             }
             .__cus-dialog-foot_cancel {
-              background: #F8F8F8;
-              border: 1px solid #E4E4E4;
-              color: var(--cus-text-color-3);
+              background: #6FA2EA;
+              color: #FFFFFF;
             }
           }
           &.isFull {
@@ -606,4 +623,133 @@ em {
       }
     }
   }
+}
+
+.el-form-item__label {
+  color: #ffffff !important;
+  font-weight: 400;
+  font-size: 16px;
+}
+.el-form-item__content {
+  .unit {
+    color: #ffffff !important;
+    font-size: 16px !important;
+  }
+}
+.el-input__wrapper {
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border: 1px solid rgba(174, 208, 255, 1);
+  .el-input__inner {
+    color: #ffffff !important;
+  }
+}
+.el-select__wrapper {
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border: 1px solid rgba(174, 208, 255, 1);
+  .el-select__selected-item:not(.is-transparent) {
+    color: #ffffff !important;
+  }
+}
+.el-radio-group {
+  .el-radio__label {
+    color: #ffffff !important;
+  }
+}
+.el-upload {
+  background-color: transparent !important;
+  .upload-layout-card {
+    >div {
+      color: #ffffff !important;
+    }
+    .svg-icon {
+      >* {
+        fill: #ffffff !important;
+      }
+    }
+  }
+}
+.cus-table {
+  .el-table__inner-wrapper {
+    &:before {
+      background-color: #3864bb;
+    }
+  }
+  .el-table__header {
+    .el-table__cell {
+      height: 40px;
+      background-color: #135EC6 !important;
+      .cell {
+        color: rgba(129, 175, 255, 1) !important;
+        font-size: 16px !important;
+      }
+    }
+  }
+  .el-table__body-wrapper {
+    background-color: #17439E;
+    .hover-row {
+      opacity: 0.75;
+    }
+    .el-table__cell {
+      height: 60px;
+      background-color: #17439E !important;
+      border-color: #3864bb !important;
+      .cell {
+        color: #ffffff !important;
+        font-size: 16px !important;
+      }
+    }
+  }
+  .el-table__empty-text {
+    color: #ffffff;
+  }
+  .el-checkbox__inner {
+    width: 20px;
+    height: 20px;
+    &:after {
+      width: 6px;
+      height: 12px;
+      left: 5px;
+    }
+  }
+}
+.el-loading-mask {
+  background-color: rgba(1, 29, 71, 0.7) !important;
+}
+.cus-table-page {
+  .el-pagination__total {
+    color: #ffffff !important;
+    font-size: 16px !important;
+  }
+  .el-pagination__sizes {
+    .el-select__selected-item > span {
+      font-size: 16px !important;
+    }
+  }
+  .btn-prev, .btn-next {
+    background-color: transparent !important;
+    color: #ffffff !important;
+    font-size: 16px !important;
+  }
+  .el-pager {
+    >li {
+      color: #ffffff !important;
+      background-color: transparent !important;
+      font-size: 16px !important;
+      &.is-active {
+        color: #135EC6 !important;
+        background-color: #ffffff !important;
+      }
+    }
+  }
+  .el-pagination__jump {
+    >span {
+      font-size: 16px !important;
+      color: #ffffff !important;
+    }
+    .el-input__inner {
+      font-size: 16px !important;
+    }
+  }
 }

src/style/index.scss

@@ -8,7 +8,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  font-family: "PingFang SC";
+  font-family: SourceHanSansSC;
 }
 
 html, body, #app {

src/views/web/archive/detail.vue

@@ -3,90 +3,95 @@
     :show="show"
     :title="titleCpt"
     @onClose="$emit('update:show', false)"
-    width="70%"
-    max-height="90%"
+    width="800px"
+    height="auto"
     @onSubmit="onSubmit"
     :loading="state.loading"
   >
     <div class="__cus-dialog-form">
-      <CusForm ref="ref_form" label-width="100px">
-        <CusFormColumn
-          :span="12"
-          required
-          label="船名号"
-          v-model:param="state.form.name"
-        />
-        <CusFormColumn
-          :span="12"
-          required
-          label="船舶类型"
-          v-model:param="state.form.type"
-          link="select"
-          :options="DictionaryStore.shipTypeList"
-        />
-        <CusFormColumn
-          :span="12"
-          required
-          label="持证类型"
-          v-model:param="state.form.certType"
-          link="select"
-          :options="DictionaryStore.certTypeList"
-        />
-        <CusFormColumn
-          :span="12"
-          required
-          label="最大航速"
-          v-model:param="state.form.maxSpeed"
-          link="number"
-          unit="节"
-          :decimal="2"
-        />
-        <CusFormColumn
-          :span="12"
-          required
-          label="船长"
-          v-model:param="state.form.length"
-          link="number"
-          unit="米"
-          :decimal="2"
-        />
-        <CusFormColumn
-          :span="12"
-          required
-          label="船宽"
-          v-model:param="state.form.width"
-          link="number"
-          unit="米"
-          :decimal="2"
-        />
-        <CusFormColumn
-          :span="12"
-          label="北斗终端号"
-          v-model:param="state.form.beidouId"
-        />
-        <CusFormColumn
-          :span="12"
-          label="MMSI"
-          v-model:param="state.form.mmsi"
-        />
-        <CusFormColumn
-          :span="12"
-          label="重点船舶"
-          v-model:param="state.form.important"
-          link="radio"
-          :options="DictionaryStore.importantList"
-        />
-        <CusFormColumn
-          :span="12"
-          label="船舶照片"
-          v-model:param="state.form.indexUrl"
-          link="upload"
-          layout="card"
-          type="img"
-          :limit="1"
-          limitNoUpload
-          :delRule="(file) => true"
-        />
+      <CusForm ref="ref_form" label-width="80px">
+        <el-col :span="11">
+          <CusFormColumn
+            :span="24"
+            required
+            label="船名号"
+            v-model:param="state.form.name"
+          />
+          <CusFormColumn
+            :span="24"
+            required
+            label="船舶类型"
+            v-model:param="state.form.type"
+            link="select"
+            :options="DictionaryStore.shipTypeList"
+          />
+          <CusFormColumn
+            :span="24"
+            required
+            label="持证类型"
+            v-model:param="state.form.certType"
+            link="select"
+            :options="DictionaryStore.certTypeList"
+          />
+          <CusFormColumn
+            :span="24"
+            required
+            label="最大航速"
+            v-model:param="state.form.maxSpeed"
+            link="number"
+            unit="节"
+            :decimal="2"
+          />
+          <CusFormColumn
+            :span="24"
+            required
+            label="船长"
+            v-model:param="state.form.length"
+            link="number"
+            unit="米"
+            :decimal="2"
+          />
+          <CusFormColumn
+            :span="24"
+            required
+            label="船宽"
+            v-model:param="state.form.width"
+            link="number"
+            unit="米"
+            :decimal="2"
+          />
+        </el-col>
+        <el-col :span="12" :offset="1">
+          <CusFormColumn
+            :span="24"
+            label="船舶照片"
+            v-model:param="state.form.indexUrl"
+            link="upload"
+            layout="card"
+            type="img"
+            :limit="1"
+            limitNoUpload
+            :delRule="(file) => true"
+            cardHeight="118px"
+          />
+          <CusFormColumn
+            :span="24"
+            label="重点船舶"
+            v-model:param="state.form.important"
+            link="radio"
+            :options="DictionaryStore.importantList"
+          />
+          <CusFormColumn
+            :span="24"
+            label="北斗终端号"
+            v-model:param="state.form.beidouId"
+          />
+          <CusFormColumn
+            :span="24"
+            label="MMSI"
+            v-model:param="state.form.mmsi"
+          />
+        </el-col>
       </CusForm>
     </div>
   </CusDialog>
@@ -160,7 +165,7 @@ const onSubmit = () => {
 }
 const initDetail = () => {
   state.loading = true
-  shipArchiveDetail({id: props.transfer.id}).then(res => {
+  shipArchiveDetail(proxy.$util.formatGetParam({id: props.transfer.id})).then(res => {
     state.form = Object.assign(res.data, {indexUrl: []})
     state.loading = false
   })
@@ -190,4 +195,10 @@ const initDictionary = () => {
 :deep(.upload-layout-card_item) {
   background-color: #999999;
 }
+.__cus-dialog-form {
+  margin: 20px;
+  background: rgba(88, 148, 235, 0.2);
+  border-radius: 8px;
+  padding: 26px 54px;
+}
 </style>

src/views/web/archive/index.vue

@@ -11,7 +11,7 @@
   >
     <div class="__cus-dialog-form">
       <div class="filter">
-        <CusForm labelWidth="100px" @handleEnter="onSearch">
+        <CusForm labelWidth="80px" @handleEnter="onSearch">
           <CusFormColumn
             :span="6"
             label="船名号"
@@ -45,8 +45,8 @@
         </CusForm>
       </div>
       <div class="buttons">
-        <CusButton type="main" title="新增" style="margin-left: auto;" @click="onAdd"/>
-        <CusButton type="del" title="批量删除"/>
+        <CusButton type="add" style="margin-left: auto;" @click="onAdd"/>
+        <CusButton type="del" title="批量删除" @click="onDelMore"/>
       </div>
       <div class="table" v-loading="state.query.loading">
         <CusTable
@@ -55,6 +55,7 @@
           :total="state.query.result.total"
           :data="state.query.result.data"
           :table-head="state.query.tableHead"
+          v-model:selected="state.query.selected"
           @handlePage="onPage"
         >
           <template #type-column-value="{scope}">
@@ -99,6 +100,7 @@ const state: any = reactive({
       pageNum: 1,
       pageSize: 10
     },
+    selected: [],
     tableHead: [
       {value: 'name', label: '船名号', width: 200},
       {value: 'maxSpeed', label: '最大航速', width: 200},
@@ -150,7 +152,7 @@ const onPage = (pageNum, pageSize) => {
   }
   state.query.loading = true
   shipArchiveList(params).then(res => {
-    state.query.result.total = res.total
+    state.query.result.total = 100
     state.query.result.data = res.rows
     state.query.loading = false
   })
@@ -194,6 +196,24 @@ const onDel = (row) => {
     })
   }).catch(() => {})
 }
+const onDelMore = () => {
+  if (state.query.selected.length == 0) {
+    ElMessage.warning('请至少选择一条数据！')
+    return
+  }
+  ElMessageBox.confirm(`请确认是否批量删除${state.query.selected.length}条数据?`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  } as any).then(() => {
+    state.loading = true
+    shipArchiveDelete({id: state.query.selected.map(v => v.id).join(',')}).then(res => {
+      ElMessage.success('删除成功！')
+      state.loading = false
+      onSearch()
+    })
+  }).catch(() => {})
+}
 </script>
 
 <style lang="scss" scoped>
@@ -203,11 +223,18 @@ const onDel = (row) => {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  padding: 24px;
+  .filter {
+    background: rgba(88, 148, 235, 0.2);
+    border-radius: 8px;
+    padding: 26px 54px;
+  }
   .buttons {
     display: flex;
+    gap: 16px;
+    margin: 24px 0;
   }
   .table {
-    margin-top: 10px;
     flex: 1;
     overflow: hidden;
   }

src/views/web/components/drag-window.vue

@@ -13,19 +13,18 @@
     <div class="drag-window">
       <div class="head">
         <div class="head-bg">
-          <img class="img-bg" src="@/assets/images/web/window-bg.png"/>
+          <img class="img-bg" src="@/assets/images/web/title-bg.png"/>
           <div class="color-bg"/>
         </div>
         <div class="head-content">
-          <div class="line"/>
           <div class="title">
             {{title}}
             <slot name="title"/>
           </div>
           <div class="buttons">
             <slot name="buttons"/>
-            <SvgIcon v-if="expend !== false" class="expend-button __hover" :class="{active: state.notExpend}" @click="state.notExpend = !state.notExpend" name="arrow_4" color="#ffffff" size="16"/>
-            <SvgIcon v-if="close !== false" class="__hover" @click="$emit('onClose')"  name="close_3" color="#ffffff" size="14"/>
+            <SvgIcon v-if="expend !== false" class="expend-button __hover" :class="{active: state.notExpend}" @click="state.notExpend = !state.notExpend" name="arrow_4" color="#ffffff" size="18"/>
+            <SvgIcon v-if="close !== false" class="__hover" @click="$emit('onClose')"  name="close_3" color="#ffffff" size="16"/>
           </div>
         </div>
       </div>
@@ -77,7 +76,7 @@ const setZ = () => {
   .head {
     position: relative;
     width: 100%;
-    height: 40px;
+    height: 58px;
     display: flex;
     .head-bg {
       width: 100%;
@@ -85,6 +84,7 @@ const setZ = () => {
       z-index: 1;
       opacity: 0.8;
       overflow: hidden;
+      border-radius: 16px 16px 0 0;
       .img-bg {
         user-select: none;
         width: 372px;
@@ -97,7 +97,7 @@ const setZ = () => {
       .color-bg {
         width: calc(100% - 20px);
         height: 100%;
-        background-color: rgba(11, 68, 197);
+        background-color: rgba(88, 148, 235, 1);
         position: absolute;
         top: 0;
         right: 0;
@@ -111,17 +111,10 @@ const setZ = () => {
       z-index: 2;
       display: flex;
       align-items: center;
-      .line {
-        width: 3px;
-        height: 16px;
-        background: #68C3FF;
-        margin-left: 10px;
-      }
       .title {
-        margin-left: 10px;
-        font-size: 16px;
-        font-family: PingFang SC-Medium, PingFang SC;
-        font-weight: 500;
+        margin-left: 24px;
+        font-weight: 400;
+        font-size: 20px;
         color: #FFFFFF;
         display: flex;
         line-height: 1;
@@ -129,7 +122,7 @@ const setZ = () => {
       }
       .buttons {
         margin-left: auto;
-        margin-right: 10px;
+        margin-right: 24px;
         display: flex;
         align-items: center;
         .expend-button {
@@ -145,9 +138,10 @@ const setZ = () => {
   .content {
     width: 100%;
     height: calc(100% - 40px);
-    background-color: rgba(7, 44, 145, 0.9);
+    background-color: rgba(0, 52, 159, 0.85);
     overflow: hidden;
     transition: height .2s;
+    border-radius: 0 0 16px 16px;
     &.not-expend {
       height: 0;
     }

src/views/web/config/index.vue

@@ -114,8 +114,8 @@ const props = defineProps({
 const state: any = reactive({
   layout: {
     width: 400,
-    left: 70,
-    top: 10
+    left: 85,
+    top: 110
   },
   tab: 2,
   loading: false,
@@ -310,7 +310,7 @@ defineExpose({
 <style lang="scss" scoped>
 $mapHeight: var(--easy-map-height);
 .config {
-  height: calc($mapHeight - 40px - 20px);
+  height: calc($mapHeight - 250px);
   padding: 12px 10px;
   .tabs {
     display: flex;

src/views/web/index.vue

@@ -73,6 +73,7 @@
       <trackPointCom ref="ref_trackPoint"/>
       <trackArchiveCom/>
     </div>
+    <div class="layout-foot"></div>
   </div>
 </template>
 
@@ -128,24 +129,43 @@ watch(() => ShipMapStore.trackMap, (n) => {
   height: 100%;
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
   .layout-head {
-    width: 100%;
-    height: 60px;
+    position: absolute;
+    width: calc(100% - 75px * 2);
+    height: 124px;
+    top: 0;
+    z-index: 2;
     background-image: url("@/assets/images/web/head-bg.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
     display: flex;
-    align-items: center;
+    justify-content: center;
     .layout-head-title {
-      margin-left: 40px;
-      font-family: Microsoft YaHei;
+      line-height: 68px;
       font-weight: bold;
-      font-size: 30px;
+      font-size: 36px;
       color: #FFFFFF;
+      text-shadow: 2px 2px 0px rgba(46, 86, 156, 1);
     }
   }
+  .layout-foot {
+    position: absolute;
+    width: calc(100% - 75px * 2);
+    height: 59px;
+    bottom: 0;
+    z-index: 2;
+    background-image: url("@/assets/images/web/foot-bg.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
   .layout-content {
-    flex: 1;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
     position: relative;
     >* {
       position: absolute;
@@ -155,29 +175,31 @@ watch(() => ShipMapStore.trackMap, (n) => {
       height: 100%;
     }
     .content-tools {
-      top: 10px;
-      left: 10px;
+      top: 17px;
+      left: 0px;
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 10px;
-      width: 44px;
-      background-color: rgba(255,255,255,0.4);
-      border-radius: 8px;
-      padding: 10px 0;
+      gap: 18px;
+      background-image: url("@/assets/images/web/tools-bg.png");
+      background-size: 100% 100%;
+      width: 75px;
+      height: calc(100% - 17px);
+      padding-top: 78px;
       .tools-item {
-        width: 32px;
-        height: 32px;
+        width: 48px;
+        height: 48px;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 8px;
         &:hover {
-          background: linear-gradient(180deg, #b2ccfb 100%, #7ba2e5 100%);
+          background-image: url("@/assets/images/web/tools-item-bg.png");
+          background-size: 100% 100%;
         }
         >img {
-          width: 20px;
-          height: 20px;
+          width: 32px;
+          height: 32px;
         }
       }
     }

src/views/web/warning/index.vue

@@ -86,8 +86,8 @@ const props = defineProps({
 const state: any = reactive({
   layout: {
     width: 400,
-    left: 70,
-    top: 10
+    left: 85,
+    top: 110
   },
   query: {
     loading: false,
@@ -156,7 +156,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 $mapHeight: var(--easy-map-height);
 .warning {
-  height: calc($mapHeight - 40px - 20px);
+  height: calc($mapHeight - 250px);
   padding: 12px 10px;
   display: flex;
   flex-direction: column;

vite.config.ts

@@ -107,27 +107,27 @@ export default defineConfig({
         api: "modern-compiler" // or 'modern'
       }
     },
-    // postcss: {
-    //   plugins: [
-    //     postcsspxtoviewport({
-    //       unitToConvert: 'px',
-    //       viewportWidth: 1920,
-    //       unitPrecision: 5, // 单位转换后保留的精度
-    //       propList: ['*'], // 能转化为vw的属性列表
-    //       viewportUnit: 'vw', // 希望使用的视口单位
-    //       fontViewportUnit: 'vw', // 字体使用的视口单位
-    //       selectorBlackList: ['ignore-'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
-    //       minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
-    //       mediaQuery: true, // 媒体查询里的单位是否需要转换单位
-    //       replace: true, //  是否直接更换属性值，而不添加备用属性
-    //       exclude: [], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
-    //       include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
-    //       landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
-    //       landscapeUnit: 'vw', // 横屏时使用的单位
-    //       landscapeWidth: 1628, // 横屏时使用的视口宽度
-    //     }),
-    //   ]
-    // }
+    postcss: {
+      plugins: [
+        postcsspxtoviewport({
+          unitToConvert: 'px',
+          viewportWidth: 1920,
+          unitPrecision: 5, // 单位转换后保留的精度
+          propList: ['*'], // 能转化为vw的属性列表
+          viewportUnit: 'vw', // 希望使用的视口单位
+          fontViewportUnit: 'vw', // 字体使用的视口单位
+          selectorBlackList: ['ignore-'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
+          minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
+          mediaQuery: true, // 媒体查询里的单位是否需要转换单位
+          replace: true, //  是否直接更换属性值，而不添加备用属性
+          exclude: [], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+          include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
+          landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
+          landscapeUnit: 'vw', // 横屏时使用的单位
+          landscapeWidth: 1628, // 横屏时使用的视口宽度
+        }),
+      ]
+    }
   },
   build: {
     outDir: "sea-warning-web",