通讯

src/assets/styles/element-ui.scss

@@ -610,8 +610,8 @@
 }
 
 .custom-input {
-  height: 24px;
-  line-height: 24px;
+  height: 32px;
+  line-height: 32px;
   position: relative;
   .el-input__icon {
     font-size: 14px;
@@ -626,12 +626,15 @@
     font-size: 14px;
     color: #a7ccdf;
     font-family: PingFang SC;
-    height: 24px;
-    line-height: 24px;
+    height: 32px;
+    line-height: 32px;
     &::placeholder {
       color: #a7ccdf;
     }
   }
+  .el-input__wrapper.is-focus {
+    box-shadow: none;
+  }
   &::before {
     content: '';
     position: absolute;
@@ -661,26 +664,29 @@
   .el-input__wrapper {
     box-shadow: none;
     background-color: rgba(26, 144, 255, 0.15) !important;
-    border: 4px solid rgba(26, 144, 255, 0.15) !important;
+    border: 1px solid rgba(26, 144, 255, 0.15) !important;
   }
   .el-input__inner {
-    font-size: 38px;
+    font-size: 14px;
     color: #a0c7dc;
     font-family: PingFang SC;
-    height: 72px;
-    line-height: 72px;
+    height: 24px;
+    line-height: 24px;
     &::placeholder {
       color: #a0c7dc;
     }
   }
+  .el-input__wrapper.is-focus {
+    box-shadow: none;
+  }
   &::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     z-index: 2;
-    width: 12px;
-    height: 12px;
+    width: 4px;
+    height: 4px;
     background: url('@/assets/images/inputIcon1.png') no-repeat;
     background-size: 100% 100%;
   }
@@ -690,8 +696,8 @@
     right: 0;
     bottom: 0;
     z-index: 2;
-    width: 12px;
-    height: 12px;
+    width: 4px;
+    height: 4px;
     background: url('@/assets/images/inputIcon2.png') no-repeat;
     background-size: 100% 100%;
   }

src/components/Dialog/index.vue

@@ -30,7 +30,7 @@ interface Props {
   modelValue?: boolean;
   type?: string;
   title?: string;
-  hideTitle: boolean;
+  hideTitle?: boolean;
   width?: string;
   height?: string;
   cancelText?: string;

src/components/LineWidthSelect/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="select-container">
+    <div class="select-box" @click="handleShow">
+      <div class="text1" :style="{ height: modelValue + 'px' }"></div>
+      <div class="icon"></div>
+    </div>
+    <div v-show="show" class="select-content">
+      <div v-for="(item, index) in options" :key="index" :class="modelValue === item.value ? 'item item-active' : 'item'" @click="handleClick(item.value)">
+        <div class="text1" :style="{ height: item.value + 'px' }"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="LineWidthSelect">
+interface Props {
+  modelValue: boolean;
+  options: object[];
+}
+const props = withDefaults(defineProps<Props>(), {});
+const emits = defineEmits('update:modelValue');
+
+let show = ref();
+const handleShow = () => {
+  show.value = true;
+};
+const handleClick = (value: string) => {
+  emits('update:modelValue', value);
+  show.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.select-container {
+  position: relative;
+}
+.select-box {
+  width: 118px;
+  height: 22px;
+  line-height: 22px;
+  background-color: rgba(26, 144, 255, 0.15) !important;
+  border: 1px solid rgba(26, 144, 255, 0.15) !important;
+  padding: 4px 8px !important;
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 6px;
+    height: 6px;
+    background: url('@/assets/images/inputIcon1.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 6px;
+    height: 6px;
+    background: url('@/assets/images/inputIcon2.png') no-repeat;
+    background-size: 100% 100%;
+  }
+  .text1 {
+    flex: 1;
+    height: 1px;
+    background-color: #9dc2da;
+    margin-right: 15px;
+  }
+  .icon {
+    width: 7px;
+    height: 13px;
+    background: url('@/assets/images/select.png') no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.select-content {
+  position: absolute;
+  left: 0;
+  bottom: -65px;
+  width: 100%;
+  background-color: #113a84;
+  border: 1px solid #124b9d;
+  box-shadow: inset 0 0 20px #1a90ff80 !important;
+  z-index: 9;
+  padding: 6px 0;
+  .item {
+    height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 10px !important;
+    cursor: pointer;
+    &:hover {
+      background-color: #1c335f;
+    }
+  }
+  .item-active {
+    background-color: #1c335f;
+  }
+  .text1 {
+    flex: 1;
+    height: 1px;
+    background-color: #9dc2da;
+  }
+}
+</style>

src/types/components.d.ts

@@ -70,6 +70,7 @@ declare module 'vue' {
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
     Index2: typeof import('./../components/Dialog/index2.vue')['default']
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
+    LineWidthSelect: typeof import('./../components/LineWidthSelect/index.vue')['default']
     Map: typeof import('./../components/Map/index.vue')['default']
     ModalVideo: typeof import('./../components/HKVideo/modal-video.vue')['default']
     MultiInstanceUser: typeof import('./../components/Process/multiInstanceUser.vue')['default']

src/views/globalMap/RightMenu/CommunicationSupport.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog custom-show type="lg" title="通讯保障" hide-footer @close="handleClose">
+  <Dialog custom-show type="lg" title="通讯保障" height="650px" hide-footer @close="handleClose">
     <div class="content">
       <div class="left-content">
         <el-input v-model="queryParams.keyword" class="custom-input" placeholder="组织架构搜索">
@@ -243,43 +243,46 @@ const handleClose = () => {
   display: flex;
   margin-top: 12px;
   .left-content {
-    width: 910px;
-    padding-right: 30px;
+    width: 350px;
+    height: 560px;
+    overflow-y: auto;
+    padding-right: 10px;
     border-right: 1px solid #2187ff;
   }
   .middle-content {
-    width: 910px;
-    padding: 0 30px;
+    width: 350px;
+    height: 560px;
+    padding: 0 10px;
     border-right: 1px solid #2187ff;
     .search-box {
+      height: 32px;
       display: flex;
       .select-box {
         flex-shrink: 0;
         width: 176px !important;
         height: 56px;
         line-height: 56px;
-        margin: 0 10px;
+        margin-right: 10px;
         color: #83a3be;
-        font-size: 32px;
+        font-size: 14px;
       }
     }
     .user-box {
-      margin-left: 10px;
       width: 100%;
-      height: 100%;
       .user-table {
         padding: 15px 0;
         display: flex;
         flex-direction: column;
-        font-size: 38px;
+        font-size: 14px;
         color: #fbffff;
         .tr {
+          min-height: 32px;
           background-color: #102e76;
         }
         .tr,
         .tr2 {
           display: flex;
-          padding: 6px 0;
+          padding: 5px 0;
           .td {
             flex: 1;
             display: flex;
@@ -298,17 +301,18 @@ const handleClose = () => {
           }
         }
         .table-content {
-          height: 858px;
+          height: 300px;
           overflow-y: auto;
         }
         .tr2 {
-          margin-top: 10px;
+          margin-top: 8px;
           background-color: #122868;
         }
         .phone-icon {
-          width: 62px;
-          height: 63px;
+          width: 31px;
+          height: 31.5px;
           background: url('@/assets/images/emergencyCommandMap/communication/phone.png');
+          background-size: 100% 100%;
           cursor: pointer;
         }
       }
@@ -319,7 +323,7 @@ const handleClose = () => {
     .el-scrollbar {
       .el-select-dropdown__item {
         color: #b1cae0;
-        font-size: 32px;
+        font-size: 14px;
         height: 56px;
         line-height: 56px;
       }
@@ -328,7 +332,7 @@ const handleClose = () => {
   .input {
     background: transparent;
     color: #83a3be;
-    font-size: 32px;
+    font-size: 14px;
     outline: none;
     appearance: none;
     height: 100%;
@@ -338,18 +342,17 @@ const handleClose = () => {
     }
   }
   .tree-container {
-    margin-top: 15px;
     display: flex;
     .tree-box {
       width: 100%;
-      height: 920px;
+      height: 528px;
       overflow-y: auto;
       padding: 15px 8px;
       :deep(.el-tree) {
         height: 100%;
         background-color: transparent;
         color: #fbffff;
-        font-size: 38px;
+        font-size: 14px;
         .el-tree-node__content {
           height: auto;
           padding-top: 10px;
@@ -359,7 +362,7 @@ const handleClose = () => {
         }
         .el-tree-node__expand-icon {
           color: #297cfc;
-          font-size: 23px;
+          font-size: 7px;
         }
         .el-tree-node:focus > .el-tree-node__content,
         .el-tree-node__content:hover {
@@ -370,14 +373,14 @@ const handleClose = () => {
   }
   .select-box2 {
     margin-left: 30px;
-    width: 910px;
+    width: 400px;
     height: 100%;
     .select-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       color: #fbffff;
-      font-size: 32px;
+      font-size: 14px;
       border-bottom: 1px solid #247dff;
       padding: 20px;
       .left-item {
@@ -395,15 +398,15 @@ const handleClose = () => {
       }
     }
     .select-content {
-      height: 858px;
+      height: 450px;
       overflow-y: auto;
       .box-item {
         border-bottom: 1px solid #247dff;
-        padding: 20px;
+        padding: 7px;
         position: relative;
         .line {
           color: #fff;
-          font-size: 38px;
+          font-size: 14px;
           display: flex;
           .text1 {
             margin-right: 35px;
@@ -417,9 +420,10 @@ const handleClose = () => {
           right: 10px;
           top: 50px;
           cursor: pointer;
-          width: 29px;
-          height: 29px;
+          width: 9px;
+          height: 9px;
           background: url('@/assets/images/emergencyCommandMap/communication/close.png') no-repeat;
+          background-size: 100% 100%;
         }
       }
     }

src/views/globalMap/RightMenu/OnlinePlotting/EditDialog.vue

@@ -1,19 +1,13 @@
 <template>
-  <div class="edit-dialog">
-    <div class="close-btn" @click="cancel"></div>
-    <div class="gradient-text">保存提示</div>
+  <Dialog custom-show title="保存提示" type="sm" hide-footer @close="cancel" @confirm="submitForm">
     <div class="line">
       <div class="tip-icon"></div>
       <div class="tip-item">
         <div class="tip-text">是否保存当前预案？如果是，请输入预案名称：</div>
-        <el-input class="custom-input2" v-model="editData.pattern_name" placeholder="请输入" />
+        <el-input class="custom-input2" v-model="editData.pattern_name" placeholder="请输入" style="margin: 10px 0"/>
       </div>
     </div>
-    <div class="footer">
-      <div class="btn" @click="cancel">取消</div>
-      <div class="btn2" @click="submitForm">确定</div>
-    </div>
-  </div>
+  </Dialog>
 </template>
 
 <script lang="ts" setup name="EditDialog">

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="menu-content">
-    <div class="gradient-text title">实时标绘</div>
+    <div class="gradient-text common-dialog-title">实时标绘</div>
     <div class="line">
       <div class="tabs1">
         <div v-for="(item, index) in menu" :key="index" :class="menuActive1 === index ? 'tab tab_active' : 'tab'" @click="clickTab(index)">
@@ -50,7 +50,7 @@
           <div v-show="menuActive2 === 0" class="line3">
             <LineWidthSelect v-model="mouseToolState.lineWidth" :options="lineWidthOptions" />
             <div class="color-container">
-              <el-color-picker v-model="mouseToolState.color" popper-class="custom-color-picker" show-alpha />
+              <el-color-picker v-model="mouseToolState.color" size="small" popper-class="custom-color-picker" show-alpha />
             </div>
           </div>
           <div class="tab-list">
@@ -693,20 +693,15 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1584px;
-  height: 1772px;
+  width: 612px;
+  height: 685px;
   background: url('@/assets/images/map/rightMenu/onlinePlotting/dialog.png') no-repeat;
-  padding: 130px 45px 20px 50px;
-  font-size: 36px;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
   color: #ffffff;
 }
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 30px;
-  left: 140px;
-}
+
 
 :deep(.el-color-dropdown__link-btn) {
   display: none;
@@ -717,48 +712,51 @@ onMounted(() => {
   align-items: center;
 }
 .tabs1 {
-  margin-top: 45px;
   display: flex;
   .tab {
-    width: 316px;
-    height: 77px;
-    line-height: 77px;
+    width: 123px;
+    height: 30px;
+    line-height: 30px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/tab.png') no-repeat;
+    background-size: 100% 100%;
     cursor: pointer;
-    font-size: 44px;
+    font-size: 16px;
     color: #b7c1d5;
     font-family: YouSheBiaoTiHei;
-    padding-left: 60px;
+    padding-left: 28px;
     &:hover {
-      width: 317px;
-      height: 83px;
+      width: 123px;
+      height: 30px;
       color: #ffffff;
       background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive.png') no-repeat;
+      background-size: 100% 100%;
     }
   }
   .tab_active {
-    width: 317px;
-    height: 83px;
+    width: 123px;
+    height: 30px;
     color: #ffffff;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive.png') no-repeat;
+    background-size: 100% 100%;
   }
 }
 .btn1 {
-  width: 440px;
-  height: 120px;
+  width: 176px;
+  height: 48px;
   background: url('@/assets/images/map/rightMenu/onlinePlotting/btn1.png') no-repeat;
+  background-size: 100% 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  font-size: 32px;
+  font-size: 14px;
   color: #edfaff;
-  margin-bottom: -57px;
   .icon1 {
-    width: 42px;
-    height: 42px;
+    width: 22px;
+    height: 22px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/screenshot.png') no-repeat;
-    margin-right: 12px;
+    background-size: 100% 100%;
+    margin-right: 6px;
   }
 }
 .box1 {
@@ -766,10 +764,11 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 1490px;
-  height: 96px;
+  width: 100%;
+  height: 36px;
   background: url('@/assets/images/map/rightMenu/onlinePlotting/box1.png') no-repeat;
-  padding: 25px 30px;
+  background-size: 100% 100%;
+  padding: 10px 12px;
   .box-item {
     display: flex;
     align-items: center;
@@ -780,96 +779,100 @@ onMounted(() => {
   align-items: center;
   cursor: pointer;
   .revoke-icon {
-    width: 48px;
-    height: 50px;
-    margin-right: 10px;
+    width: 24px;
+    height: 25px;
+    margin-right: 3px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/revoke.png') no-repeat;
+    background-size: 100% 100%;
   }
   .delete-icon {
-    width: 50px;
-    height: 50px;
-    margin-right: 10px;
+    width: 25px;
+    height: 25px;
+    margin-right: 3px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/delete.png') no-repeat;
+    background-size: 100% 100%;
   }
   .edit-icon {
-    width: 46px;
-    height: 46px;
-    margin-right: 10px;
+    width: 23px;
+    height: 23px;
+    margin-right: 3px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/edit.png') no-repeat;
+    background-size: 100% 100%;
   }
   .cancel-icon {
-    width: 50px;
-    height: 50px;
-    margin-right: 10px;
+    width: 25px;
+    height: 25px;
+    margin-right: 3px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/cancel.png') no-repeat;
+    background-size: 100% 100%;
   }
   .save-icon {
-    width: 46px;
-    height: 46px;
-    margin-right: 10px;
+    width: 23px;
+    height: 23px;
+    margin-right: 3px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/save.png') no-repeat;
+    background-size: 100% 100%;
   }
   .share-icon {
-    width: 46px;
-    height: 48px;
-    margin-right: 10px;
+    width: 23px;
+    height: 24px;
+    margin-right: 3px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/share.png') no-repeat;
+    background-size: 100% 100%;
   }
   .setting-icon {
-    width: 48px;
-    height: 50px;
-    margin-right: 10px;
+    width: 24px;
+    height: 25px;
+    margin-right: 3px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/setting.png') no-repeat;
+    background-size: 100% 100%;
   }
   .merge-icon {
-    width: 52px;
-    height: 52px;
-    margin-right: 10px;
+    width: 26px;
+    height: 26px;
+    margin-right: 3px;
     background: url('@/assets/images/map/rightMenu/onlinePlotting/merge.png') no-repeat;
+    background-size: 100% 100%;
   }
 }
 .line2 {
-  width: 3px;
-  height: 24px;
-  background-color: #a7ccdf;
-  margin: 0 70px;
-}
-.line2 {
-  width: 3px;
-  height: 24px;
+  width: 1px;
+  height: 10px;
   background-color: #a7ccdf;
-  margin: 0 38px;
+  margin: 0 10px;
 }
 .tabs2 {
-  width: 300px;
-  min-width: 300px;
-  height: 1340px;
+  width: 115px;
+  min-width: 115px;
+  height: 460px;
   background: url('@/assets/images/map/rightMenu/onlinePlotting/tabBg.png') no-repeat;
-  background-size: 300px 1188px;
+  background-size: 100% 100%;
   overflow-y: auto;
-  padding: 30px 0;
+  padding: 10px 0;
   .tab {
     width: 100%;
-    height: 99px;
+    height: 35px;
     cursor: pointer;
     color: #eaf3fc;
-    font-size: 38px;
-    padding: 0 60px;
+    font-size: 14px;
+    padding: 0 25px;
     display: flex;
     align-items: center;
     &:hover {
       background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive2.png') no-repeat;
+      background-size: 100% 100%;
     }
   }
   .tab_active {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive2.png') no-repeat;
+    background-size: 100% 100%;
   }
 }
 .tab-content {
   display: flex;
-  margin-top: 20px;
+  margin-top: 6px;
   .tab-content2 {
-    padding: 20px 45px;
+    padding: 18px 15px;
     display: flex;
     flex-direction: column;
     .line {
@@ -886,63 +889,69 @@ onMounted(() => {
       flex-wrap: wrap;
       align-content: baseline;
       .icon {
-        width: 160px;
-        height: 88px;
-        margin-bottom: 20px;
+        width: 45px;
+        height: 25px;
+        margin-bottom: 8px;
       }
       .tab {
         &:nth-child(3n-1) {
-          margin: 40px 50px 0;
+          margin: 18px 27px 0;
         }
       }
     }
     .tab {
-      width: 333px;
-      height: 235px;
+      width: 129px;
+      height: 91px;
       background: url('@/assets/images/map/rightMenu/onlinePlotting/box2.png') no-repeat;
-      padding: 27px;
+      background-size: 100% 100%;
+      padding: 7px;
       cursor: pointer;
       position: relative;
-      font-size: 38px;
+      font-size: 14px;
       color: #eaf3fc;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      margin-top: 40px;
+      margin-top: 18px;
       &:hover {
         background: url('@/assets/images/map/rightMenu/onlinePlotting/boxHover2.png') no-repeat;
+        background-size: 100% 100%;
       }
       .checked1 {
         position: absolute;
-        top: 30px;
-        right: 30px;
-        width: 32px;
-        height: 32px;
+        top: 3px;
+        right: 3px;
+        width: 13px;
+        height: 13px;
         background: url('@/assets/images/map/rightMenu/onlinePlotting/checked1.png') no-repeat;
+        background-size: 100% 100%;
       }
       .checked2 {
         position: absolute;
-        top: 30px;
-        right: 30px;
-        width: 36px;
-        height: 36px;
+        top: 3px;
+        right: 3px;
+        width: 13px;
+        height: 13px;
         background: url('@/assets/images/map/rightMenu/onlinePlotting/checked2.png') no-repeat;
+        background-size: 100% 100%;
       }
     }
     .tab_active {
       background: url('@/assets/images/map/rightMenu/onlinePlotting/boxActive2.png') no-repeat;
+      background-size: 100% 100%;
     }
   }
 }
 
 .tipTitle {
-  position: absolute;
-  top: 0;
-  left: -2745px;
+  position: fixed;
+  top: 123px;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 2;
   padding: 10px 30px;
-  font-size: 38px;
+  font-size: 18px;
   color: #fff;
   background-color: rgba(0, 0, 0, 0.4);
   border-radius: 10px;
@@ -953,23 +962,23 @@ onMounted(() => {
     color: #000;
     .table-header {
       display: flex;
-      font-size: 38px;
+      font-size: 14px;
       width: 100%;
       background-color: #194ba0;
       .th {
-        padding: 25px 30px;
+        padding: 11px;
         flex: 1;
         color: #edfaff;
         &:last-child {
           flex: unset;
-          width: 620px;
+          width: 180px;
         }
       }
     }
     .tr {
       display: flex;
-      font-size: 38px;
-      width: 1487px;
+      font-size: 14px;
+      height: 32px;
       background: url('@/assets/images/map/rightMenu/onlinePlotting/tr.png') no-repeat;
       background-size: 100% 100%;
       margin-top: 10px;
@@ -977,7 +986,7 @@ onMounted(() => {
         background: url('@/assets/images/map/rightMenu/onlinePlotting/trActive.png') no-repeat;
       }
       .td {
-        padding: 25px 30px;
+        padding: 11px;
         color: #edfaff;
         flex: 1;
         .icon {
@@ -987,7 +996,6 @@ onMounted(() => {
       }
       .td2 {
         flex: unset;
-        width: 620px;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -997,25 +1005,31 @@ onMounted(() => {
 }
 
 .color-container {
-  width: 80px;
-  height: 50px;
+  width: 31px;
+  height: 22px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   background-color: #0d3980;
-  border: 4px solid #0b5fbb;
-  margin-left: 20px;
+  border: 1px solid #0b5fbb;
+  margin-left: 8px;
   :deep(.el-color-picker) {
-    height: 60px !important;
+    height: 14px !important;
+    .el-color-picker__trigger {
+      width: 14px;
+      height: 14px;
+      padding: 0;
+      border: none;
+    }
   }
   &::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
-    width: 12px;
-    height: 12px;
+    width: 6px;
+    height: 6px;
     background: url('@/assets/images/inputIcon1.png') no-repeat;
   }
   &::after {
@@ -1023,13 +1037,13 @@ onMounted(() => {
     position: absolute;
     right: 0;
     bottom: 0;
-    width: 12px;
-    height: 12px;
+    width: 6px;
+    height: 6px;
     background: url('@/assets/images/inputIcon2.png') no-repeat;
   }
 }
 .params-box {
-  margin: 30px 0;
+  margin: 10px 0;
 }
 .footer {
   display: flex;