Merge remote-tracking branch 'origin/master'

front/admin-front/.eslintignore

@@ -2,3 +2,4 @@ build/*.js
 src/assets
 public
 dist
+*

front/admin-front/package.json

@@ -4,7 +4,7 @@
   "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
   "author": "Pan <panfree23@gmail.com>",
   "scripts": {
-    "dev": "vue-cli-service serve --mode dev",
+    "dev": "vue-cli-service serve --mode test",
     "build:prod": "vue-cli-service build --mode prod",
     "build:test": "vue-cli-service build --mode test",
     "preview": "node build/index.js --preview",

front/admin-front/src/api/constant.js

@@ -3,4 +3,4 @@ export default {
   baseIp: process.env.VUE_APP_BASE_IP,
   systemId: "90703bb0ee2883f1a0c70bd28cf261cd",
   systemGroupId: "7651d3cf64e941f38aaff653049a129c",
-};
+};

front/admin-front/src/assets/address/Stroke-2.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 10.5L6.66667 3H12.9167L11.6667 7.99993H15L7.5 18L8.75 10.5H5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

front/admin-front/src/assets/address/add_circle.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_485_667" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_485_667)">
+<path d="M11 17H13V13H17V11H13V7H11V11H7V13H11V17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="#2980FF"/>
+</g>
+</svg>

front/admin-front/src/assets/address/award_star.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_165_243" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<rect width="16" height="16" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_165_243)">
+<path d="M8.00001 15.5332L5.76667 13.3332H2.66667V10.2332L0.466675 7.99989L2.66667 5.76655V2.66655H5.76667L8.00001 0.466553L10.2333 2.66655H13.3333V5.76655L15.5333 7.99989L13.3333 10.2332V13.3332H10.2333L8.00001 15.5332ZM6.05001 10.8332L8.00001 9.64989L9.95001 10.8332L9.43334 8.61655L11.1667 7.11655L8.88334 6.93322L8.00001 4.83322L7.11667 6.93322L4.83334 7.11655L6.56667 8.61655L6.05001 10.8332Z" fill="#F2C94C"/>
+</g>
+</svg>

front/admin-front/src/assets/address/close.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_687_118" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_687_118)">
+<path d="M5.33341 15.8334L4.16675 14.6667L8.83342 10.0001L4.16675 5.33341L5.33341 4.16675L10.0001 8.83342L14.6667 4.16675L15.8334 5.33341L11.1667 10.0001L15.8334 14.6667L14.6667 15.8334L10.0001 11.1667L5.33341 15.8334Z" fill="#828282"/>
+</g>
+</svg>

front/admin-front/src/assets/address/content_copy.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_447_1560" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<rect width="16" height="16" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_447_1560)">
+<path d="M6.17967 11.8718C5.84292 11.8718 5.55575 11.7551 5.31813 11.5218C5.08053 11.2884 4.96173 11.0034 4.96173 10.6667V3.07694C4.96173 2.7402 5.08053 2.45516 5.31813 2.22183C5.55575 1.98849 5.84292 1.87183 6.17967 1.87183H11.7566C12.089 1.87183 12.373 1.98956 12.6085 2.22503C12.844 2.46049 12.9617 2.74447 12.9617 3.07694V10.6667C12.9617 10.9991 12.844 11.2831 12.6085 11.5186C12.373 11.754 12.089 11.8718 11.7566 11.8718H6.17967ZM6.17967 10.8718H11.7566C11.8207 10.8718 11.8709 10.8526 11.9072 10.8141C11.9435 10.7756 11.9617 10.7265 11.9617 10.6667V3.07694C11.9617 3.01284 11.9435 2.96263 11.9072 2.92629C11.8709 2.88997 11.8207 2.87181 11.7566 2.87181H6.17967C6.11983 2.87181 6.06855 2.88997 6.02582 2.92629C5.98307 2.96263 5.9617 3.01284 5.9617 3.07694V10.6667C5.9617 10.7265 5.98307 10.7756 6.02582 10.8141C6.06855 10.8526 6.11983 10.8718 6.17967 10.8718ZM3.83353 14.2051C3.50106 14.2051 3.21708 14.0874 2.98162 13.8519C2.74615 13.6164 2.62842 13.3324 2.62842 13V5.03848C2.62842 4.8966 2.67628 4.7778 2.772 4.68208C2.86772 4.58635 2.98652 4.53849 3.1284 4.53849C3.27028 4.53849 3.38908 4.58635 3.4848 4.68208C3.58053 4.7778 3.6284 4.8966 3.6284 5.03848V13C3.6284 13.0513 3.64977 13.0983 3.6925 13.141C3.73523 13.1837 3.78225 13.2051 3.83353 13.2051H9.79502C9.9369 13.2051 10.0557 13.253 10.1514 13.3487C10.2472 13.4444 10.295 13.5632 10.295 13.7051C10.295 13.847 10.2472 13.9658 10.1514 14.0615C10.0557 14.1572 9.9369 14.2051 9.79502 14.2051H3.83353Z" fill="#FF6F61"/>
+</g>
+</svg>

front/admin-front/src/assets/address/delete.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_485_702" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_485_702)">
+<path d="M5.83325 17.5C5.37492 17.5 4.98256 17.3368 4.65617 17.0104C4.32978 16.684 4.16659 16.2917 4.16659 15.8333V5H3.33325V3.33333H7.49992V2.5H12.4999V3.33333H16.6666V5H15.8333V15.8333C15.8333 16.2917 15.6701 16.684 15.3437 17.0104C15.0173 17.3368 14.6249 17.5 14.1666 17.5H5.83325ZM14.1666 5H5.83325V15.8333H14.1666V5ZM7.49992 14.1667H9.16658V6.66667H7.49992V14.1667ZM10.8333 14.1667H12.4999V6.66667H10.8333V14.1667Z" fill="#EB5757"/>
+</g>
+</svg>

front/admin-front/src/assets/address/done_all.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_687_61" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_687_61)">
+<path d="M5.58333 15.0001L0.875 10.2917L2.0625 9.12508L6.77083 13.8334L5.58333 15.0001ZM10.2917 15.0001L5.58333 10.2917L6.75 9.10425L10.2917 12.6459L17.9583 4.97925L19.125 6.16675L10.2917 15.0001ZM10.2917 10.2917L9.10417 9.12508L13.2292 5.00008L14.4167 6.16675L10.2917 10.2917Z" fill="#2980FF"/>
+</g>
+</svg>

front/admin-front/src/assets/address/download.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_463_1863" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_463_1863)">
+<path d="M6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V15H6V18H18V15H20V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6ZM12 16L7 11L8.4 9.55L11 12.15V4H13V12.15L15.6 9.55L17 11L12 16Z" fill="#222222"/>
+</g>
+</svg>

front/admin-front/src/assets/address/eyeglasses.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_649_2384" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_649_2384)">
+<path d="M5.70825 12.5C6.13881 12.5 6.52422 12.375 6.8645 12.125C7.20478 11.875 7.44436 11.5486 7.58325 11.1458L7.89575 10.1875C8.11797 9.52081 8.06242 8.90623 7.72909 8.34373C7.39575 7.78123 6.91659 7.49998 6.29159 7.49998H3.35409L3.74992 10.7708C3.81936 11.2569 4.03811 11.6666 4.40617 12C4.77422 12.3333 5.20825 12.5 5.70825 12.5ZM14.2916 12.5C14.7916 12.5 15.2256 12.3333 15.5937 12C15.9617 11.6666 16.1805 11.2569 16.2499 10.7708L16.6458 7.49998H13.7291C13.1041 7.49998 12.6249 7.7847 12.2916 8.35415C11.9583 8.92359 11.9027 9.54165 12.1249 10.2083L12.4166 11.1458C12.5555 11.5486 12.7951 11.875 13.1353 12.125C13.4756 12.375 13.861 12.5 14.2916 12.5ZM5.70825 14.1666C4.79159 14.1666 3.9895 13.8646 3.302 13.2604C2.6145 12.6562 2.2152 11.8958 2.10409 10.9791L1.66659 7.49998H0.833252V5.83331H6.29159C6.9027 5.83331 7.46172 5.98262 7.96867 6.28123C8.47561 6.57984 8.87492 6.98609 9.16659 7.49998H10.8541C11.1458 6.98609 11.5451 6.57984 12.052 6.28123C12.5589 5.98262 13.118 5.83331 13.7291 5.83331H19.1666V7.49998H18.3333L17.8958 10.9791C17.7846 11.8958 17.3853 12.6562 16.6978 13.2604C16.0103 13.8646 15.2083 14.1666 14.2916 14.1666C13.4999 14.1666 12.7881 13.941 12.1562 13.4896C11.5242 13.0382 11.0833 12.4375 10.8333 11.6875L10.5208 10.75C10.493 10.6528 10.4652 10.5521 10.4374 10.4479C10.4096 10.3437 10.3819 10.1944 10.3541 9.99998H9.64575C9.61797 10.1666 9.5902 10.3021 9.56242 10.4062C9.53464 10.5104 9.50686 10.6111 9.47909 10.7083L9.16659 11.6666C8.91659 12.4166 8.47561 13.0208 7.84367 13.4791C7.21172 13.9375 6.49992 14.1666 5.70825 14.1666Z" fill="white"/>
+</g>
+</svg>

front/admin-front/src/assets/address/file_download_done.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_468_2071" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21">
+<rect y="0.5" width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_468_2071)">
+<path d="M4.99984 17.1667C4.76373 17.1667 4.56581 17.0868 4.40609 16.9271C4.24637 16.7674 4.1665 16.5694 4.1665 16.3333C4.1665 16.0972 4.24637 15.8993 4.40609 15.7396C4.56581 15.5799 4.76373 15.5 4.99984 15.5H14.9998C15.2359 15.5 15.4339 15.5799 15.5936 15.7396C15.7533 15.8993 15.8332 16.0972 15.8332 16.3333C15.8332 16.5694 15.7533 16.7674 15.5936 16.9271C15.4339 17.0868 15.2359 17.1667 14.9998 17.1667H4.99984ZM7.95817 13.4792C7.84706 13.4792 7.74289 13.4618 7.64567 13.4271C7.54845 13.3924 7.45817 13.3333 7.37484 13.25L3.83317 9.70833C3.68039 9.55556 3.604 9.35417 3.604 9.10417C3.604 8.85417 3.68039 8.65278 3.83317 8.5C3.98595 8.34722 4.18039 8.27083 4.4165 8.27083C4.65261 8.27083 4.84706 8.34722 4.99984 8.5L7.95817 11.4583L14.9998 4.41667C15.1526 4.26389 15.3505 4.1875 15.5936 4.1875C15.8366 4.1875 16.0346 4.26389 16.1873 4.41667C16.3401 4.56944 16.4165 4.76736 16.4165 5.01042C16.4165 5.25347 16.3401 5.45139 16.1873 5.60417L8.5415 13.25C8.45817 13.3333 8.36789 13.3924 8.27067 13.4271C8.17345 13.4618 8.06928 13.4792 7.95817 13.4792Z" fill="white"/>
+</g>
+</svg>

front/admin-front/src/assets/address/filter_list.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8">
+<mask id="mask0_235_3842" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_235_3842)">
+<path d="M8.54159 14.7915V13.5416H11.4582V14.7915H8.54159ZM5.20825 10.4646V9.21463H14.7915V10.4646H5.20825ZM2.70825 6.13767V4.8877H17.2915V6.13767H2.70825Z" fill="#222222"/>
+</g>
+</g>
+</svg>

front/admin-front/src/assets/address/link_off.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_352_1398" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_352_1398)">
+<path d="M19.2499 16.4501L17.7499 14.9001C18.4166 14.7167 18.9582 14.3625 19.3749 13.8376C19.7916 13.3126 19.9999 12.7 19.9999 12C19.9999 11.1667 19.7082 10.4584 19.1249 9.87505C18.5416 9.29172 17.8332 9.00005 16.9999 9.00005H12.9999V7.00005H16.9999C18.3832 7.00005 19.5624 7.48755 20.5374 8.46255C21.5124 9.43755 21.9999 10.6167 21.9999 12C21.9999 12.95 21.7541 13.825 21.2624 14.625C20.7707 15.425 20.0999 16.0334 19.2499 16.4501ZM15.8499 13L13.8499 11H15.9999V13H15.8499ZM19.7999 22.6L1.3999 4.20005L2.7999 2.80005L21.1999 21.2001L19.7999 22.6ZM10.9999 17.0001H6.9999C5.61657 17.0001 4.4374 16.5126 3.4624 15.5375C2.4874 14.5625 1.9999 13.3834 1.9999 12C1.9999 10.85 2.3499 9.82505 3.0499 8.92505C3.7499 8.02505 4.6499 7.43338 5.7499 7.15005L7.5999 9.00005H6.9999C6.16657 9.00005 5.45824 9.29172 4.8749 9.87505C4.29157 10.4584 3.9999 11.1667 3.9999 12C3.9999 12.8334 4.29157 13.5417 4.8749 14.125C5.45824 14.7084 6.16657 15 6.9999 15H10.9999V17.0001ZM7.9999 13V11H9.6249L11.5999 13H7.9999Z" fill="#EB5757"/>
+</g>
+</svg>

front/admin-front/src/assets/address/page_info.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_351_1392" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_351_1392)">
+<path d="M17.5 20.5C16.5333 20.5 15.7083 20.1583 15.025 19.475C14.3417 18.7917 14 17.9667 14 17C14 16.0333 14.3417 15.2083 15.025 14.525C15.7083 13.8417 16.5333 13.5 17.5 13.5C18.4667 13.5 19.2917 13.8417 19.975 14.525C20.6583 15.2083 21 16.0333 21 17C21 17.9667 20.6583 18.7917 19.975 19.475C19.2917 20.1583 18.4667 20.5 17.5 20.5ZM17.5 18.5C17.9167 18.5 18.2708 18.3542 18.5625 18.0625C18.8542 17.7708 19 17.4167 19 17C19 16.5833 18.8542 16.2292 18.5625 15.9375C18.2708 15.6458 17.9167 15.5 17.5 15.5C17.0833 15.5 16.7292 15.6458 16.4375 15.9375C16.1458 16.2292 16 16.5833 16 17C16 17.4167 16.1458 17.7708 16.4375 18.0625C16.7292 18.3542 17.0833 18.5 17.5 18.5ZM3 18V16H12V18H3ZM6.5 10.5C5.53333 10.5 4.70833 10.1583 4.025 9.475C3.34167 8.79167 3 7.96667 3 7C3 6.03333 3.34167 5.20833 4.025 4.525C4.70833 3.84167 5.53333 3.5 6.5 3.5C7.46667 3.5 8.29167 3.84167 8.975 4.525C9.65833 5.20833 10 6.03333 10 7C10 7.96667 9.65833 8.79167 8.975 9.475C8.29167 10.1583 7.46667 10.5 6.5 10.5ZM6.5 8.5C6.91667 8.5 7.27083 8.35417 7.5625 8.0625C7.85417 7.77083 8 7.41667 8 7C8 6.58333 7.85417 6.22917 7.5625 5.9375C7.27083 5.64583 6.91667 5.5 6.5 5.5C6.08333 5.5 5.72917 5.64583 5.4375 5.9375C5.14583 6.22917 5 6.58333 5 7C5 7.41667 5.14583 7.77083 5.4375 8.0625C5.72917 8.35417 6.08333 8.5 6.5 8.5ZM12 8V6H21V8H12Z" fill="#1C1B1F"/>
+</g>
+</svg>

front/admin-front/src/assets/address/tips_and_updates.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_448_1841" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_448_1841)">
+<path d="M17.8774 7.12258L16.8748 6.66685L17.8774 6.21113L18.3332 5.20854L18.7889 6.21113L19.7915 6.66685L18.7889 7.12258L18.3332 8.12517L17.8774 7.12258ZM15.1379 3.19542L13.6377 2.50019L15.1379 1.80496L15.8332 0.304688L16.5284 1.80496L18.0287 2.50019L16.5284 3.19542L15.8332 4.69569L15.1379 3.19542ZM7.49982 17.9809C7.07889 17.9809 6.71591 17.8351 6.41088 17.5434C6.10587 17.2518 5.94 16.8955 5.91328 16.4745H9.08636C9.05964 16.8955 8.89377 17.2518 8.58875 17.5434C8.28373 17.8351 7.92075 17.9809 7.49982 17.9809ZM4.99982 15.3207C4.82273 15.3207 4.6743 15.2607 4.55452 15.1409C4.43473 15.0211 4.37484 14.8726 4.37484 14.6954C4.37484 14.5182 4.43473 14.3698 4.55452 14.2502C4.6743 14.1305 4.82273 14.0707 4.99982 14.0707H9.99982C10.1769 14.0707 10.3253 14.1306 10.4451 14.2505C10.5649 14.3703 10.6248 14.5188 10.6248 14.696C10.6248 14.8731 10.5649 15.0215 10.4451 15.1412C10.3253 15.2608 10.1769 15.3207 9.99982 15.3207H4.99982ZM4.50303 12.9168C3.63018 12.3741 2.93921 11.665 2.43013 10.7894C1.92105 9.91391 1.6665 8.95638 1.6665 7.91685C1.6665 6.29294 2.23274 4.91474 3.36521 3.78225C4.4977 2.64978 5.8759 2.08354 7.49982 2.08354C9.12373 2.08354 10.5019 2.64978 11.6344 3.78225C12.7669 4.91474 13.3331 6.29294 13.3331 7.91685C13.3331 8.95638 13.0786 9.91391 12.5695 10.7894C12.0604 11.665 11.3695 12.3741 10.4966 12.9168H4.50303ZM4.87482 11.6669H10.1248C10.7498 11.2224 11.2325 10.6738 11.5727 10.021C11.913 9.36824 12.0832 8.66685 12.0832 7.91685C12.0832 6.63908 11.6387 5.55574 10.7498 4.66685C9.86093 3.77797 8.77759 3.33352 7.49982 3.33352C6.22204 3.33352 5.13871 3.77797 4.24982 4.66685C3.36093 5.55574 2.91648 6.63908 2.91648 7.91685C2.91648 8.66685 3.08662 9.36824 3.4269 10.021C3.76718 10.6738 4.24982 11.2224 4.87482 11.6669Z" fill="#EB5757"/>
+</g>
+</svg>

front/admin-front/src/assets/address/unfold_more.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8">
+<mask id="mask0_131_246" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_131_246)">
+<path d="M10 17.1955L6.52246 13.7179L7.42627 12.8141L10 15.3878L12.5737 12.8141L13.4775 13.7179L10 17.1955ZM7.42627 7.23715L6.52246 6.33332L10 2.85577L13.4775 6.33332L12.5737 7.23715L10 4.66342L7.42627 7.23715Z" fill="#222222"/>
+</g>
+</g>
+</svg>

front/admin-front/src/assets/address/upload.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_649_2394" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_649_2394)">
+<path d="M4.99992 16.6666C4.54159 16.6666 4.14922 16.5035 3.82284 16.1771C3.49645 15.8507 3.33325 15.4583 3.33325 15V12.5H4.99992V15H14.9999V12.5H16.6666V15C16.6666 15.4583 16.5034 15.8507 16.177 16.1771C15.8506 16.5035 15.4583 16.6666 14.9999 16.6666H4.99992ZM9.16658 13.3333V6.54165L6.99992 8.70831L5.83325 7.49998L9.99992 3.33331L14.1666 7.49998L12.9999 8.70831L10.8333 6.54165V13.3333H9.16658Z" fill="#2980FF"/>
+</g>
+</svg>

front/admin-front/src/assets/address/vertical_align_bottom.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_649_2389" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_649_2389)">
+<path d="M3.33325 17.5V15.8333H16.6666V17.5H3.33325ZM9.99992 14.1667L5.83325 10L6.99992 8.83333L9.16658 11V2.5H10.8333V11L12.9999 8.83333L14.1666 10L9.99992 14.1667Z" fill="#2980FF"/>
+</g>
+</svg>

front/admin-front/src/assets/airdrop/add.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_608_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_608_2)">
+<path d="M9.16663 15.8334V10.8334H4.16663V9.16669H9.16663V4.16669H10.8333V9.16669H15.8333V10.8334H10.8333V15.8334H9.16663Z" fill="white"/>
+</g>
+</svg>

front/admin-front/src/assets/airdrop/add_photo_alternate.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_645_1374" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_645_1374)">
+<path d="M4.16667 17.5C3.70833 17.5 3.31597 17.3368 2.98958 17.0104C2.66319 16.684 2.5 16.2917 2.5 15.8333V4.16667C2.5 3.70833 2.66319 3.31597 2.98958 2.98958C3.31597 2.66319 3.70833 2.5 4.16667 2.5H11.6667V4.16667H4.16667V15.8333H15.8333V8.33333H17.5V15.8333C17.5 16.2917 17.3368 16.684 17.0104 17.0104C16.684 17.3368 16.2917 17.5 15.8333 17.5H4.16667ZM14.1667 7.5V5.83333H12.5V4.16667H14.1667V2.5H15.8333V4.16667H17.5V5.83333H15.8333V7.5H14.1667ZM5 14.1667H15L11.875 10L9.375 13.3333L7.5 10.8333L5 14.1667Z" fill="#2980FF"/>
+</g>
+</svg>

front/admin-front/src/assets/airdrop/airline_seat_recline_extra.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_131_376" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<rect width="16" height="16" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_131_376)">
+<path d="M5.66667 4.00004C5.3 4.00004 4.98611 3.86949 4.725 3.60837C4.46389 3.34726 4.33333 3.03337 4.33333 2.66671C4.33333 2.30004 4.46389 1.98615 4.725 1.72504C4.98611 1.46393 5.3 1.33337 5.66667 1.33337C6.03333 1.33337 6.34722 1.46393 6.60833 1.72504C6.86944 1.98615 7 2.30004 7 2.66671C7 3.03337 6.86944 3.34726 6.60833 3.60837C6.34722 3.86949 6.03333 4.00004 5.66667 4.00004ZM9.33333 13.3334H5.03333C4.66667 13.3334 4.33056 13.2028 4.025 12.9417C3.71944 12.6806 3.52778 12.3667 3.45 12L2 4.66671H3.36667L4.83333 12H9.33333V13.3334ZM13 14.6667L11.0667 11.3334H6.43333C6.11111 11.3334 5.83056 11.2362 5.59167 11.0417C5.35278 10.8473 5.2 10.5889 5.13333 10.2667L4.4 6.70004C4.27778 6.16671 4.40278 5.69449 4.775 5.28337C5.14722 4.87226 5.6 4.66671 6.13333 4.66671C6.52222 4.66671 6.875 4.78337 7.19167 5.01671C7.50833 5.25004 7.71111 5.56671 7.8 5.96671L8.53333 9.33337H10.7C10.9333 9.33337 11.15 9.39449 11.35 9.51671C11.55 9.63893 11.7111 9.80004 11.8333 10L14.1667 14L13 14.6667Z" fill="#222222"/>
+</g>
+</svg>

front/admin-front/src/assets/airdrop/airplanemode_active.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_131_385" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<rect width="16" height="16" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_131_385)">
+<path d="M5.66665 14.6667V13.6667L6.99998 12.6667V9.00004L1.33331 10.6667V9.33337L6.99998 6.00004V2.33337C6.99998 2.0556 7.0972 1.81949 7.29165 1.62504C7.48609 1.4306 7.7222 1.33337 7.99998 1.33337C8.27776 1.33337 8.51387 1.4306 8.70831 1.62504C8.90276 1.81949 8.99998 2.0556 8.99998 2.33337V6.00004L14.6666 9.33337V10.6667L8.99998 9.00004V12.6667L10.3333 13.6667V14.6667L7.99998 14L5.66665 14.6667Z" fill="#2980FF"/>
+</g>
+</svg>

front/admin-front/src/assets/airdrop/check.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_644_1302" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_644_1302)">
+<path d="M9.5501 18L3.8501 12.3L5.2751 10.875L9.5501 15.15L18.7251 5.97498L20.1501 7.39998L9.5501 18Z" fill="#1C1B1F"/>
+</g>
+</svg>

front/admin-front/src/assets/airdrop/clock_loader_60.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_644_1322" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_644_1322)">
+<path d="M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM6.325 17.675L12 12V4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 13.0667 4.2 14.0917 4.6 15.075C5 16.0583 5.575 16.925 6.325 17.675Z" fill="#2980FF"/>
+</g>
+</svg>

front/admin-front/src/assets/airdrop/dangerous.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_131_394" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<rect width="16" height="16" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_131_394)">
+<path d="M5.5 14L2 10.5V5.5L5.5 2H10.5L14 5.5V10.5L10.5 14H5.5ZM6.1 10.8333L8 8.93333L9.9 10.8333L10.8333 9.9L8.93333 8L10.8333 6.1L9.9 5.16667L8 7.06667L6.1 5.16667L5.16667 6.1L7.06667 8L5.16667 9.9L6.1 10.8333Z" fill="#EB5757"/>
+</g>
+</svg>

front/admin-front/src/assets/airdrop/done_all.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_790_99" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_790_99)">
+<path d="M5.58333 15L0.875 10.2916L2.0625 9.12496L6.77083 13.8333L5.58333 15ZM10.2917 15L5.58333 10.2916L6.75 9.10413L10.2917 12.6458L17.9583 4.97913L19.125 6.16663L10.2917 15ZM10.2917 10.2916L9.10417 9.12496L13.2292 4.99996L14.4167 6.16663L10.2917 10.2916Z" fill="#2980FF"/>
+</g>
+</svg>

front/admin-front/src/assets/airdrop/file_download_done.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_131_353" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<rect width="16" height="16" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_131_353)">
+<path d="M3.33332 13.3334V12H12.6667V13.3334H3.33332ZM6.36665 10.6667L2.56665 6.87004L3.51665 5.91669L6.36665 8.76669L12.4811 2.65002L13.4333 3.60002L6.36665 10.6667Z" fill="#828282"/>
+</g>
+</svg>

front/admin-front/src/assets/airdrop/filter_list.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8">
+<mask id="mask0_131_241" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_131_241)">
+<path d="M8.54169 14.7917V13.5417H11.4583V14.7917H8.54169ZM5.20836 10.4647V9.21476H14.7916V10.4647H5.20836ZM2.70835 6.1378V4.88782H17.2916V6.1378H2.70835Z" fill="#222222"/>
+</g>
+</g>
+</svg>

front/admin-front/src/assets/airdrop/link_off.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_493_517" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_493_517)">
+<path d="M19.2499 16.4501L17.7499 14.9001C18.4166 14.7167 18.9582 14.3625 19.3749 13.8376C19.7916 13.3126 19.9999 12.7 19.9999 12C19.9999 11.1667 19.7082 10.4584 19.1249 9.87505C18.5416 9.29172 17.8332 9.00005 16.9999 9.00005H12.9999V7.00005H16.9999C18.3832 7.00005 19.5624 7.48755 20.5374 8.46255C21.5124 9.43755 21.9999 10.6167 21.9999 12C21.9999 12.95 21.7541 13.825 21.2624 14.625C20.7707 15.425 20.0999 16.0334 19.2499 16.4501ZM15.8499 13L13.8499 11H15.9999V13H15.8499ZM19.7999 22.6L1.3999 4.20005L2.7999 2.80005L21.1999 21.2001L19.7999 22.6ZM10.9999 17.0001H6.9999C5.61657 17.0001 4.4374 16.5126 3.4624 15.5375C2.4874 14.5625 1.9999 13.3834 1.9999 12C1.9999 10.85 2.3499 9.82505 3.0499 8.92505C3.7499 8.02505 4.6499 7.43338 5.7499 7.15005L7.5999 9.00005H6.9999C6.16657 9.00005 5.45824 9.29172 4.8749 9.87505C4.29157 10.4584 3.9999 11.1667 3.9999 12C3.9999 12.8334 4.29157 13.5417 4.8749 14.125C5.45824 14.7084 6.16657 15 6.9999 15H10.9999V17.0001ZM7.9999 13V11H9.6249L11.5999 13H7.9999Z" fill="#EB5757"/>
+</g>
+</svg>

front/admin-front/src/assets/airdrop/page_info.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_493_522" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_493_522)">
+<path d="M17.5 20.5C16.5333 20.5 15.7083 20.1583 15.025 19.475C14.3417 18.7917 14 17.9667 14 17C14 16.0333 14.3417 15.2083 15.025 14.525C15.7083 13.8417 16.5333 13.5 17.5 13.5C18.4667 13.5 19.2917 13.8417 19.975 14.525C20.6583 15.2083 21 16.0333 21 17C21 17.9667 20.6583 18.7917 19.975 19.475C19.2917 20.1583 18.4667 20.5 17.5 20.5ZM17.5 18.5C17.9167 18.5 18.2708 18.3542 18.5625 18.0625C18.8542 17.7708 19 17.4167 19 17C19 16.5833 18.8542 16.2292 18.5625 15.9375C18.2708 15.6458 17.9167 15.5 17.5 15.5C17.0833 15.5 16.7292 15.6458 16.4375 15.9375C16.1458 16.2292 16 16.5833 16 17C16 17.4167 16.1458 17.7708 16.4375 18.0625C16.7292 18.3542 17.0833 18.5 17.5 18.5ZM3 18V16H12V18H3ZM6.5 10.5C5.53333 10.5 4.70833 10.1583 4.025 9.475C3.34167 8.79167 3 7.96667 3 7C3 6.03333 3.34167 5.20833 4.025 4.525C4.70833 3.84167 5.53333 3.5 6.5 3.5C7.46667 3.5 8.29167 3.84167 8.975 4.525C9.65833 5.20833 10 6.03333 10 7C10 7.96667 9.65833 8.79167 8.975 9.475C8.29167 10.1583 7.46667 10.5 6.5 10.5ZM6.5 8.5C6.91667 8.5 7.27083 8.35417 7.5625 8.0625C7.85417 7.77083 8 7.41667 8 7C8 6.58333 7.85417 6.22917 7.5625 5.9375C7.27083 5.64583 6.91667 5.5 6.5 5.5C6.08333 5.5 5.72917 5.64583 5.4375 5.9375C5.14583 6.22917 5 6.58333 5 7C5 7.41667 5.14583 7.77083 5.4375 8.0625C5.72917 8.35417 6.08333 8.5 6.5 8.5ZM12 8V6H21V8H12Z" fill="#1C1B1F"/>
+</g>
+</svg>

front/admin-front/src/assets/airdrop/unfold_more.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8">
+<mask id="mask0_131_246" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_131_246)">
+<path d="M10 17.1955L6.52246 13.7179L7.42627 12.8141L10 15.3878L12.5737 12.8141L13.4775 13.7179L10 17.1955ZM7.42627 7.23715L6.52246 6.33332L10 2.85577L13.4775 6.33332L12.5737 7.23715L10 4.66342L7.42627 7.23715Z" fill="#222222"/>
+</g>
+</g>
+</svg>

front/admin-front/src/layout/components/Sidebar/index.vue

@@ -95,7 +95,7 @@ export default {
 <style lang="scss" scoped>
 .hamburger {
   position: absolute;
-  top: 90.2%;
+  bottom: 10%;
 }
 .divider {
   width: 360px;
@@ -132,4 +132,4 @@ export default {
   cursor: pointer;
   margin-left: -20px;
 }
-</style>
+</style>

front/admin-front/src/router/index.js

@@ -110,7 +110,7 @@ export const constantRoutes = [{
     path: '/autoplay',
     component: Layout,
     meta: {
-      title: '自动化交互',
+      title: '交互管理',
       icon: 'autoplay'
     },
     children: [{
@@ -118,7 +118,7 @@ export const constantRoutes = [{
       name: 'autoplay',
       component: () => import('@/views/autoplay/index'),
       meta: {
-        title: '自动化交互',
+        title: '交互管理',
         icon: 'autoplay'
       }
     }]
@@ -137,20 +137,19 @@ export const constantRoutes = [{
       }
     }]
   },
-  {
-    path: '/strategy',
-    component: Layout,
-    children: [{
-      path: 'index',
-      name: 'strategy',
-      component: () => import('@/views/strategy/index'),
-      meta: {
-        title: '策略管理',
-        icon: 'strategy'
-      }
-    }]
-  },
-
+  // {
+  //   path: '/strategy',
+  //   component: Layout,
+  //   children: [{
+  //     path: 'index',
+  //     name: 'strategy',
+  //     component: () => import('@/views/strategy/index'),
+  //     meta: {
+  //       title: '策略管理',
+  //       icon: 'strategy'
+  //     }
+  //   }]
+  // },
   {
     path: '/address',
     component: Layout,
@@ -189,4 +188,4 @@ export function resetRouter() {
   router.matcher = newRouter.matcher // reset router
 }
 
-export default router
+export default router

front/admin-front/src/views/address/index.vue

@@ -1,112 +1,1309 @@
 <template>
-  <div class="">
-    <el-row style="margin: 0 0 48px 0">
-      <el-col :span="2">
-        <div class="">
-          <div class="totalCount-number">{{ this.totalCount }}</div>
-          <div class="totalCount-text">地址数量</div>
-        </div>
-      </el-col>
+  <div class="app-container">
+    <div class="app-container-head">
+      <div class="app-container-head-left">
+        <div class="app-container-head-left-item">
+          <div class="app-container-head-left-item-count">
+            {{ head.all }}
+          </div>
+          <div class="app-container-head-left-item-name">
+            所有
+          </div>
+        </div>
+        <div class="app-container-head-left-divider"/>
+        <div class="app-container-head-left-item">
+          <div class="app-container-head-left-item-count">
+            {{ head.bulk }}
+          </div>
+          <div class="app-container-head-left-item-name">
+            批处理账户
+          </div>
+        </div>
+        <div class="app-container-head-left-divider"/>
+        <div class="app-container-head-left-item">
+          <div class="app-container-head-left-item-count">
+            {{ head.boutique }}
+          </div>
+          <div class="app-container-head-left-item-name">
+            精品账户
+          </div>
+        </div>
+      </div>
+      <div class="app-container-head-right">
+        <div class="app-container-head-right-button1">
+          导出地址
+        </div>
+        <div class="app-container-head-right-button1">
+          下载 KeyStore
+        </div>
+        <div class="app-container-head-right-button1" @click="drawerImport = true">
+          <img src="../../assets/address/upload.svg" alt="upload">
+          导入
+        </div>
+        <div class="app-container-head-right-button2" @click="drawerAddress = true">
+          <img src="../../assets/address/eyeglasses.svg" alt="eyeglasses">
+          观察地址
+        </div>
+      </div>
+    </div>
+    <div class="app-container-table">
+      <div class="app-container-table-title">
+        <div class="app-container-table-title-left">
+          地址列表
+        </div>
+        <div class="app-container-table-title-right">
+          总计数量: {{table.totalNumber}}
+        </div>
+      </div>
+      <div class="app-container-table-select">
+        <div @click="table.walletNameGroupIndex = index" v-for="(item,index) in table.walletNameGroup" :class="index === table.walletNameGroupIndex ? 'app-container-table-select-item-active' : 'app-container-table-select-item'">
+          {{item}}
+        </div>
+      </div>
+      <div class="app-container-table-screening">
+        <div class="app-container-table-screening-item">
+          时间
+          <img src="../../assets/address/unfold_more.svg" alt="unfold_more">
+        </div>
+        <div class="app-container-table-screening-item">
+          Gas消耗
+          <img src="../../assets/address/unfold_more.svg" alt="unfold_more">
+        </div>
+      </div>
+      <div class="app-container-table-main">
+        <el-table
+          :data="tableData"
+          style="width: 100%">
+          <el-table-column
+            label="账户地址"
+            width="490">
+            <template v-slot="scope">
+              <div class="accountAddress">
+                <div class="img">
 
-      <el-col :span="3" :offset="15">
-        <el-button type="primary" class="btn-add" @click="generateAddress">
-          批量生成地址
-        </el-button>
-      </el-col>
-      <el-col :span="3">
-        <el-button type="primary" class="btn-add" @click="downloadAddress">
-          批量下载地址
-        </el-button>
-      </el-col>
-    </el-row>
+                </div>
+                <div class="walletName">
+                  钱包名称
+                </div>
+                <div class="walletAddress">
+                  0x00581a605...ca48ddebe60b2a4ca4da
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="Gas消耗/USDT"
+            width="410">
+            <template v-slot="scope">
+              <div class="gas">
+                783239.22
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="type"
+            width="255">
+            <template v-slot="scope">
+              <div class="type">
+                <div class="bulk" v-if="table.walletNameGroupIndex !== 0">
+                  <img src="../../assets/address/precision_manufacturing.svg" alt="precision_manufacturing">
+                  批量3
+                </div>
+                <div class="boutique" v-if="table.walletNameGroupIndex === 0">
+                  <img src="../../assets/address/award_star.svg" alt="award_star">
+                  精品号
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="最后操作时间"
+            width="180">
+            <template v-slot="scope">
+              <div class="lastTime">
+                19点20分
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column align="right">
+            <template v-slot="scope">
+              <div class="view" @click="drawerView = true">
+                查看
+              </div>
+            </template>
+          </el-table-column>
 
-    <div class="block-title">地址列表</div>
-    <el-table :data="tableData" style="width: 100%">
-      <el-table-column prop="address" label="地址账号" width="420">
-        <template slot-scope="{ row }">
-          {{row.groupName}} <span style="margin-left:10px"></span> {{row.address}}
-        </template>
-      </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <el-drawer
+      :visible.sync="drawerView"
+      :with-header="false">
+      <div class="drawerView-container">
+        <div class="drawerView-container-head">
+          <div class="drawerView-container-title">
+            钱包名称
+          </div>
+          <div class="drawerView-container-walletAddress">
+            0x00581a605...ca48ddebe60b2a4ca4da
+          </div>
+          <div class="drawerView-container-statistics">
+            <div class="drawerView-container-statistics-item">
+              <div class="drawerView-container-statistics-item-title">
+                累计花费
+              </div>
+              <div class="drawerView-container-statistics-item-amounts">
+                <span class="number">89.11</span>
+                <span class="currency">USDT</span>
+              </div>
+            </div>
+            <div class="drawerView-container-statistics-item">
+              <div class="drawerView-container-statistics-item-title">
+                剩余本金
+              </div>
+              <div class="drawerView-container-statistics-item-amounts">
+                <span class="number">700.00</span>
+                <span class="currency">USDT</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="drawerView-container-main">
+          <div class="drawerView-container-title">
+            钱包活动
+          </div>
+          <div class="drawerView-container-total">
+            总计钱包: 222
+          </div>
+          <div class="drawerView-container-table-screening">
+            <div class="drawerView-container-table-screening-item">
+              钱包活动
+              <img src="../../assets/address/filter_list.svg" alt="filter_list">
+            </div>
+            <div class="drawerView-container-table-screening-item">
+              时间
+              <img src="../../assets/address/filter_list.svg" alt="filter_list">
+            </div>
+            <div class="drawerView-container-table-screening-item">
+              余额
+              <img src="../../assets/address/unfold_more.svg" alt="unfold_more">
+            </div>
+          </div>
+          <div class="drawerView-container-table-main">
+            <div v-for="item in drawerViewTableData" class="drawerView-container-table-main-item">
+              <div class="activity">
+                <div class="activity-item" v-if="item.activity === 'Mint'" style="background: #F2C94C;">
+                  {{item.activity}}
+                </div>
+                <div class="activity-item" v-if="item.activity === 'Swap'" style="background: #6FCF97;">
+                  {{item.activity}}
+                </div>
+              </div>
+              <div class="time">
+                {{item.time}}
+              </div>
+              <div class="balance">
+                {{item.balance}}
+              </div>
+              <div class="link">
+                详情
+              </div>
 
-      <!-- <el-table-column prop="groupName" label="地址组"> </el-table-column> -->
-      <el-table-column prop="" label="gas消耗"> </el-table-column>
-      <el-table-column prop="" label="地址余额"> </el-table-column>
-      <el-table-column prop="addressType" label="地址类型">
-        <template slot-scope="{ row }">
-          <el-tag v-if="row.addressType === 1" type="info">批量号</el-tag>
-          <el-tag v-else>精品号</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
-    </el-table>
-    <el-pagination
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-      :current-page.sync="page"
-      :page-sizes="[10, 15, 25, 35]"
-      :page-size.sync="pageSize"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="totalCount"
-    >
-    </el-pagination>
-    <SaveOrUpdate ref="SaveOrUpdate" />
-    <download ref="download"></download>
+            </div>
+          </div>
+        </div>
+        <div class="drawerView-container-footer">
+          <div class="pagination">
+            <el-pagination
+              small
+              layout="prev, pager, next"
+              :total="1000">
+            </el-pagination>
+          </div>
+          <div class="manageAccount">
+            <img src="../../assets/address/page_info.svg" alt="page_info">
+            管理账号
+          </div>
+          <div class="disassociation">
+            <img src="../../assets/address/link_off.svg" alt="link_off">
+            取消关联
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+    <el-drawer
+      :visible.sync="drawerAddress"
+      :with-header="false">
+      <div class="drawerAddress-container">
+        <div class="drawerAddress-container-head">
+          <div class="drawerAddress-container-head-left">
+            <div class="drawerAddress-container-title">
+              添加地址
+            </div>
+            <div class="drawerAddress-container-tip">
+              添加观察地址
+            </div>
+          </div>
+          <div class="drawerAddress-container-head-right">
+            <div class="cancellation">
+              <img src="../../assets/address/close.svg" alt="close">
+              取消
+            </div>
+            <div class="complete">
+              <img src="../../assets/address/done_all.svg" alt="done_all">
+              完成
+            </div>
+          </div>
+        </div>
+        <div class="drawerAddress-container-main">
+          <div class="item" v-for="(item,index) in addressArr">
+            <div class="title">
+              <div class="name">
+                钱包地址
+              </div>
+              <div class="delete">
+                <img src="../../assets/address/delete.svg" alt="delete">
+                删除
+              </div>
+            </div>
+            <div class="input">
+              <el-select v-model="value" placeholder="选择公链">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <el-input v-model="input" placeholder="输入钱包名称"></el-input>
+            </div>
+            <div class="input">
+              <el-select v-model="value" placeholder="选择类型">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+              <el-input v-model="input" placeholder="输入钱包地址"></el-input>
+            </div>
+          </div>
+          <div class="addAddress" @click="addressArr.push({})">
+            <img src="../../assets/address/add_circle.svg" alt="add_circle">
+            新增观察地址
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+    <el-drawer
+      :visible.sync="drawerImport"
+      :with-header="false"
+      @closed="completeGeneration = false">
+      <div class="drawerImport-container">
+        <div class="drawerImport-container-head">
+          <div class="drawerImport-container-head-left">
+            <div class="drawerImport-container-title">
+              导入钱包地址
+            </div>
+            <div class="drawerImport-container-tip">
+              仅支持Keystore导入
+            </div>
+          </div>
+        </div>
+        <div class="drawerImport-container-main" v-if="!completeGeneration">
+          <div class="select">
+            <div :class="drawerImportSelect === 0 ? 'select-item-active' : 'select-item'" @click="drawerImportSelect = 0">
+              导入钱包
+            </div>
+            <div :class="drawerImportSelect === 1 ? 'select-item-active' : 'select-item'" @click="drawerImportSelect = 1">
+              创建钱包
+            </div>
+          </div>
+          <div class="importWallet" v-if="drawerImportSelect === 0">
+            <div class="upload">
+              <el-upload
+                class="upload-demo"
+                drag
+                action="https://jsonplaceholder.typicode.com/posts/"
+                multiple>
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">将Keystore文件拖到此处，或<em>上传文件</em></div>
+              </el-upload>
+            </div>
+            <div class="inputTitle">
+              批量钱包名称
+            </div>
+            <div class="batchWalletName">
+              <el-input v-model="input" placeholder="选择/输入批量钱包名称"></el-input>
+              <el-select v-model="value" placeholder="选择类型">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="inputTitle">
+              钱包密码
+            </div>
+            <el-input v-model="input" placeholder="设置钱包密码"></el-input>
+            <div class="confirm">
+              <img src="../../assets/address/file_download_done.svg" alt="file_download_done">
+              确认导入
+            </div>
+          </div>
+          <div class="createWallet" v-if="drawerImportSelect === 1">
+            <div class="inputTitle">
+              批量钱包名称
+            </div>
+            <el-input v-model="input" placeholder="输入批量钱包名称"></el-input>
+            <div class="inputBox">
+              <div>
+                <div class="inputTitle">
+                  选择公链
+                </div>
+                <el-select style="width: 280px" v-model="value" placeholder="选择类型">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </div>
+              <div>
+                <div class="inputTitle">
+                  生成数量
+                </div>
+                <el-input style="width: 230px" v-model="input" placeholder="输入生成数量"></el-input>
+              </div>
+            </div>
+            <div class="inputBox">
+              <div>
+                <div class="inputTitle">
+                  钱包密码
+                </div>
+                <el-input style="width: 280px" v-model="input" placeholder="设置钱包密码"></el-input>
+              </div>
+              <div>
+                <div class="inputTitle">
+                  确认钱包密码
+                </div>
+                <el-input style="width: 230px" v-model="input" placeholder="设置钱包密码"></el-input>
+              </div>
+            </div>
+            <div class="confirm" @click="completeGeneration = true">
+              <img src="../../assets/address/Stroke-2.svg" alt="Stroke">
+              开始生成
+            </div>
+            <div class="tip">
+              <div class="title">
+                <img src="../../assets/address/tips_and_updates.svg" alt="tips_and_updates">
+                提示
+              </div>
+              <div class="description">
+                此密码为您账户钱包的 Keystore 密码，请妥善保管，
+                系统无法为您找回。
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="drawerImport-container-main" v-if="completeGeneration">
+          <div class="completeTip">
+            <img src="../../assets/address/Rectangle.png" alt="Rectangle">
+            <div class="description">
+              <div class="address">
+                成功生成 100 个钱包地址
+              </div>
+              <div class="tip">
+                请牢记您的 Keystore 文件及密码，系统无法帮你找回
+              </div>
+            </div>
+          </div>
+          <div class="addressListBox">
+            <div class="addressList">
+              <div class="addressList-item" v-for="(item,index) in addressList">
+                <div class="name">
+                  Address-{{index+1}}
+                </div>
+                <div class="address">
+                  {{item}}
+                  <img src="../../assets/address/content_copy.svg" alt="content_copy">
+                </div>
+              </div>
+              <div class="pagination">
+                <el-pagination
+                  small
+                  layout="prev, pager, next"
+                  :total="1000">
+                </el-pagination>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="drawerImport-container-footer" v-if="completeGeneration">
+          <div class="exportAddress">
+            <img src="../../assets/address/upload.svg" alt="upload">
+            导出地址
+          </div>
+          <div class="download">
+            <img src="../../assets/address/download.svg" alt="download">
+            下载Keystore
+          </div>
+        </div>
+      </div>
+    </el-drawer>
   </div>
+
 </template>
+
 <script>
-import { pageAddress, batchAddress } from "@/api/adress";
-import SaveOrUpdate from "./SaveOrUpdate.vue";
-import Download from "./download.vue";
 export default {
-  components: { SaveOrUpdate, Download },
   data() {
     return {
-      url: process.env.VUE_APP_BASE_API,
-      address: {
-        password: undefined,
-        groupName: undefined,
-        numWallet: undefined,
+      head: {
+        all:85,
+        bulk:85,
+        boutique:85
       },
-      tableData: [],
-      page: 1,
-      pageSize: 10,
-      totalCount: 0,
-    };
-  },
-  created() {
-    this.getAddresses();
+      table:{
+        totalNumber:22222,
+        walletNameGroup:['精品号','钱包组名称','钱包组名称'],
+        walletNameGroupIndex:0,
+      },
+      tableData: [
+        {
+        projectName:'Zk',
+        totalNumber:5,
+        completedNumber:2,
+        status:0,
+        gas:1,
+        officialWebsite:"https://nytimes.com",
+        startTime:'16/08/2013',
+        endTime:'16/08/2013'
+      }, {
+        projectName:'LayerZero',
+        totalNumber:4,
+        completedNumber:1,
+        status:1,
+        gas:23,
+        officialWebsite:"https://nytimes.com",
+        startTime:'16/08/2013',
+        endTime:'16/08/2013'
+      }, {
+        projectName:'StarkNet',
+        totalNumber:1,
+        completedNumber:0,
+        status:2,
+        gas:23,
+        officialWebsite:"https://nytimes.com",
+        startTime:'16/08/2013',
+        endTime:'16/08/2013'
+      }, {
+        projectName:'Sei',
+        totalNumber:3,
+        completedNumber:2,
+        status:3,
+        gas:23,
+        officialWebsite:"https://nytimes.com",
+        startTime:'16/08/2013',
+        endTime:'16/08/2013'
+      }
+      ],
+      drawerView:false,
+      drawerViewTableData:[
+        {
+          activity:'Mint',
+          time:'06:42',
+          txId:'',
+          balance:89.23
+        },
+        {
+          activity:'Swap',
+          time:'06:42',
+          txId:'',
+          balance:89.23
+        },
+        {
+          activity:'Mint',
+          time:'06:42',
+          txId:'',
+          balance:89.23
+        },
+        {
+          activity:'Swap',
+          time:'06:42',
+          txId:'',
+          balance:89.23
+        },
+        {
+          activity:'Swap',
+          time:'06:42',
+          txId:'',
+          balance:89.23
+        },
+        ],
+      drawerAddress:false,
+      addressArr:[
+        {},
+        {}
+      ],
+      options: [{
+        value: '选项1',
+        label: 'ETH'
+      }],
+      value: '',
+      input: '',
+      drawerImport:false,
+      drawerImportSelect:0,
+      completeGeneration:false,
+      addressList:[
+        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
+        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
+        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
+        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
+        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
+        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
+        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
+        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
+        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
+        '0xc63988ae669C41125ecB4e8113f4D0eF21874637',
+      ]
+    }
   },
   methods: {
-    generateAddress() {
-      this.$refs.SaveOrUpdate.addressModal = true;
-      this.$refs.SaveOrUpdate.resetField();
-      this.$refs.SaveOrUpdate.resetUserForm();
-    },
-    downloadAddress() {
-      this.$refs.download.downloadModal = true;
-      this.$refs.download.resetField();
-      this.$refs.download.resetUserForm();
-    },
-    getAddresses() {
-      pageAddress({
-        page: this.page,
-        pageSize: this.pageSize,
-      }).then((res) => {
-        this.tableData = res.records;
-        this.totalCount = res.total;
-      });
-    },
 
-    handleSizeChange(val) {
-      this.pageSize = val;
-      this.page = 1;
-      this.getAddresses();
-    },
-    handleCurrentChange(val) {
-      this.page = val;
-      this.getAddresses();
-    },
-  },
-  computed: {},
-};
-</script>
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container{
+  .app-container-head{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .app-container-head-left{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap:60px;
+      .app-container-head-left-item{
+        display: flex;
+        flex-direction: column;
+        gap:8px;
+        .app-container-head-left-item-count{
+          font-weight: 700;
+          font-size: 21px;
+          line-height: 28px;
+          color: #181818;
+        }
+        .app-container-head-left-item-name{
+          font-weight: 700;
+          font-size: 12px;
+          line-height: 16px;
+          color: #8e8f91;
+        }
+      }
+      .app-container-head-left-divider{
+        width: 1px;
+        height: 50px;
+        border-right:1px solid #e4e6ea;
+      }
+    }
+
+    .app-container-head-right{
+      display: flex;
+      align-items: center;
+      gap:24px;
+      .app-container-head-right-button1{
+        width: 148px;
+        height: 52px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
+        background: #f9fbff;
+        border-radius: 10px;
+        font-weight: 700;
+        font-size: 15px;
+        line-height: 20px;
+        color: #2980ff;
+        border: 1px solid #2980FF;
+        cursor: pointer;
+      }
+      .app-container-head-right-button2{
+        width: 148px;
+        height: 52px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
+        background: #4A76FF;
+        border-radius: 10px;
+        font-weight: 700;
+        font-size: 15px;
+        line-height: 20px;
+        color: #FFFFFF;
+        cursor: pointer;
+      }
+    }
+  }
+  .app-container-table{
+    margin-top: 80px;
+    .app-container-table-title{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .app-container-table-title-left{
+        font-weight: 700;
+        font-size: 21px;
+        line-height: 28px;
+        color: #181818;
+      }
+      .app-container-table-title-right{
+        font-weight: 400;
+        font-size: 21px;
+        line-height: 28px;
+        color: #898a8c;
+      }
+    }
+    .app-container-table-select{
+      display: flex;
+      align-items: center;
+      gap:56px;
+      border-bottom: 4px solid #f2f4f7;
+      width: 100%;
+      margin-top: 28px;
+      .app-container-table-select-item{
+        font-weight: 400;
+        font-size: 17px;
+        line-height: 22px;
+        color: #ABABAB;
+        padding-bottom: 16px;
+        margin-bottom: -4px;
+        border-bottom: 4px solid #f2f4f7;
+        cursor: pointer;
+      }
+      .app-container-table-select-item-active{
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 22px;
+        color: #2980FF;
+        padding-bottom: 16px;
+        margin-bottom: -4px;
+        border-bottom: 4px solid #2980FF;
+        cursor: pointer;
+      }
+    }
+    .app-container-table-screening{
+      display: flex;
+      align-items: center;
+      gap:100px;
+      padding: 20px 0;
+      margin: 40px 0;
+      border-top: 1px solid #f5f5f5;
+      border-bottom: 1px solid #f5f5f5;
+      .app-container-table-screening-item{
+        display: flex;
+        align-items: center;
+        gap:6px;
+        font-weight: 400;
+        font-size: 15px;
+        line-height: 20px;
+        color: #4d4d4e;
+      }
+    }
+    .app-container-table-main {
+      .accountAddress{
+        display: flex;
+        align-items: center;
+        gap:12px;
+        margin-left: 14px;
+        .img{
+          width: 26px;
+          height: 26px;
+          background: black;
+          border-radius: 50%;
+        }
+        .walletName{
+          font-weight: 700;
+          font-size: 15px;
+          line-height: 20px;
+          color: #181818;
+        }
+        .walletAddress{
+          font-weight: 400;
+          font-size: 15px;
+          line-height: 20px;
+          color: #181818;
+        }
+      }
+      .gas{
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 22px;
+        color: #2980FF;
+      }
+      .type{
+        .bulk{
+          width: fit-content;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap:4px;
+          padding: 5px 10px;
+          border: 1px solid #E0E0E0;
+          border-radius: 30px;
+          background: #edf2ff;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 16px;
+          color: #222222;
+        }
+        .boutique {
+          width: fit-content;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap:4px;
+          padding: 5px 10px;
+          border-radius: 30px;
+          background: #222222;
+          font-weight: 700;
+          font-size: 12px;
+          line-height: 16px;
+          color: #F2C94C;
+        }
+      }
+      .lastTime{
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 18px;
+        color: #898a8c;
+      }
+      .view{
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 18px;
+        color: #2980FF;
+        margin-right: 14px;
+        cursor: pointer;
+      }
+    }
+  }
+  .drawerView-container{
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    .drawerView-container-head{
+      padding: 56px 40px;
+      background: #FFFFFF;
+      .drawerView-container-title{
+        font-weight: 700;
+        font-size: 21px;
+        line-height: 28px;
+        color: #181818;
+        margin-bottom: 8px;
+      }
+      .drawerView-container-walletAddress{
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        color: #94c0ff;
+        margin-bottom: 24px;
+      }
+      .drawerView-container-statistics{
+        display: flex;
+        align-items: center;
+        gap:80px;
+        .drawerView-container-statistics-item{
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          .drawerView-container-statistics-item-title{
+            font-weight: 400;
+            font-size: 15px;
+            line-height: 20px;
+            color: #8c8c8c;
+          }
+          .drawerView-container-statistics-item-amounts{
+            font-weight: 700;
+            color: #222222;
+            .number{
+              font-size: 17px;
+              line-height: 22px;
+            }
+            .currency{
+              font-size: 12px;
+              line-height: 16px;
+            }
+          }
+        }
+      }
+    }
+    .drawerView-container-main{
+      padding: 36px 40px;
+      background: #f9fbff;
+      flex-grow: 1;
+      .drawerView-container-title{
+        font-weight: 700;
+        font-size: 21px;
+        line-height: 28px;
+        color: #181818;
+        margin-bottom: 8px;
+      }
+      .drawerView-container-total{
+        font-weight: 700;
+        font-size: 12px;
+        line-height: 16px;
+        color: #8e8f91;
+      }
+      .drawerView-container-table-screening{
+        margin-top: 28px;
+        margin-bottom: 24px;
+        height: 52px;
+        display: flex;
+        align-items: center;
+        gap:120px;
+        border-bottom: 1px solid #f5f5f5;
+        border-top: 1px solid #f5f5f5;
+        .drawerView-container-table-screening-item{
+          display: flex;
+          align-items: center;
+          gap:6px;
+          font-weight: 400;
+          font-size: 15px;
+          line-height: 20px;
+          color: #4d4d4e;
+        }
+      }
+      .drawerView-container-table-main{
+        display: flex;
+        flex-direction: column;
+        gap:16px;
+        .drawerView-container-table-main-item{
+          display: flex;
+          align-items: center;
+          height: 30px;
+          .activity{
+            width: 210px;
+            .activity-item{
+              width: 72px;
+              height: 30px;
+              border-radius: 30px;
+              font-weight: 700;
+              font-size: 14px;
+              line-height: 18px;
+              color: #222222;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+          .time{
+            font-weight: 400;
+            font-size: 15px;
+            line-height: 20px;
+            color: #ABABAB;
+            width: 200px;
+          }
+          .link{
+            font-weight: 400;
+            font-size: 15px;
+            line-height: 20px;
+            color: #2980FF;
+            white-space: nowrap;
+          }
+          .balance{
+            font-weight: 700;
+            font-size: 15px;
+            line-height: 20px;
+            color: #222222;
+            width: 120px;
+          }
+        }
+      }
+    }
+    .drawerView-container-footer {
+      height: 84px;
+      padding: 30px 10px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      .pagination{
+        width: 250px;
+      }
+      .manageAccount{
+        display: flex;
+        align-items: center;
+        gap:12px;
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 22px;
+        color: #222222;
+      }
+      .disassociation{
+        display: flex;
+        align-items: center;
+        gap:12px;
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 22px;
+        color: #EB5757;
+      }
+    }
+  }
+  .drawerAddress-container{
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    .drawerAddress-container-head{
+      padding: 56px 40px;
+      background: #FFFFFF;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .drawerAddress-container-head-left{
+        .drawerAddress-container-title{
+          font-weight: 700;
+          font-size: 21px;
+          line-height: 28px;
+          color: #181818;
+          margin-bottom: 8px;
+        }
+        .drawerAddress-container-tip{
+          font-weight: 700;
+          font-size: 12px;
+          line-height: 16px;
+          color: #919191;
+        }
+      }
+      .drawerAddress-container-head-right{
+        display: flex;
+        align-items: center;
+        gap:48px;
+        .cancellation{
+          width: 118px;
+          height: 52px;
+          background: #E0E0E0;
+          border-radius: 10px;
+          gap: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 700;
+          font-size: 15px;
+          line-height: 20px;
+          color: #828282;
+        }
+        .complete{
+          width: 118px;
+          height: 52px;
+          border: 2px solid #4A76FF;
+          border-radius: 10px;
+          gap:4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 700;
+          font-size: 15px;
+          line-height: 20px;
+          color: #2980FF;
+        }
+      }
+
+    }
+    .drawerAddress-container-main{
+      padding: 36px 40px;
+      background: #f9fbff;
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      gap:20px;
+      .item{
+        display: flex;
+        flex-direction: column;
+        gap:12px;
+        .title{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .name{
+            font-weight: 400;
+            font-size: 17px;
+            line-height: 22px;
+            color: #181818;
+          }
+          .delete{
+            display: flex;
+            align-items: center;
+            gap:4px;
+            font-weight: 700;
+            font-size: 15px;
+            line-height: 20px;
+            color: #EB5757;
+          }
+        }
+        .input{
+          display: flex;
+          align-items: center;
+          gap:24px;
+        }
+      }
+      .addAddress{
+        display: flex;
+        align-items: center;
+        gap:12px;
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 22px;
+        color: #2980FF;
+      }
+    }
+  }
+  .drawerImport-container{
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    .drawerImport-container-head{
+      padding: 56px 40px;
+      background: #FFFFFF;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .drawerImport-container-head-left{
+        .drawerImport-container-title{
+          font-weight: 700;
+          font-size: 21px;
+          line-height: 28px;
+          color: #181818;
+          margin-bottom: 8px;
+        }
+        .drawerImport-container-tip{
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 16px;
+          color: #919191;
+        }
+      }
+    }
+    .drawerImport-container-main{
+      padding: 36px 40px;
+      background: #f9fbff;
+      flex-grow: 1;
+      .select{
+        display: flex;
+        align-items: center;
+        gap:56px;
+        border-bottom: 4px solid #f2f4f7;
+        margin-bottom: 40px;
+        .select-item{
+          font-weight: 400;
+          font-size: 17px;
+          line-height: 22px;
+          color: #ABABAB;
+          padding-bottom: 16px;
+          margin-bottom: -4px;
+          border-bottom: 4px solid #f2f4f7;
+          cursor: pointer;
+        }
+        .select-item-active{
+          font-weight: 700;
+          font-size: 17px;
+          line-height: 22px;
+          color: #2980FF;
+          padding-bottom: 16px;
+          margin-bottom: -4px;
+          border-bottom: 4px solid #2980FF;
+          cursor: pointer;
+        }
+      }
+      .inputTitle{
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 18px;
+        color: #383838;
+        margin-bottom: 12px;
+      }
+      .confirm{
+      width: 100%;
+      height: 53px;
+      background: #2980FF;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap:8px;
+      margin-top: 28px;
+
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 21px;
+      color: #FFFFFF;
+    }
+      .importWallet{
+        .upload{
+          display: flex;
+          justify-content: center;
+          margin-bottom: 40px;
+        }
+        .batchWalletName{
+          display: flex;
+          align-items: center;
+          gap:20px;
+          margin-bottom: 28px;
+        }
+
+      }
+      .createWallet{
+        .inputBox{
+          display: flex;
+          gap:20px;
+          margin-top: 28px;
+          width: 100%;
+        }
+        .tip{
+          display: flex;
+          flex-direction: column;
+          gap:9px;
+          margin-top: 36px;
+          .title{
+            display: flex;
+            align-items: center;
+            gap:4px;
+            font-weight: 700;
+            font-size: 17px;
+            line-height: 22px;
+            color: #EB5757;
+          }
+          .description{
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 18px;
+            color: #EB5757;
+          }
+        }
+      }
+      .completeTip{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap:8px;
+        .description{
+          display: flex;
+          flex-direction: column;
+          gap:8px;
+          .address{
+            font-weight: 700;
+            font-size: 21px;
+            line-height: 28px;
+            color: #181818;
+          }
+          .tip{
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 18px;
+            color: #8e8f91;
+          }
+        }
+      }
+      .addressListBox{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin-top: 20px;
+        .addressList{
+          width: 402px;
+          background: #FFFFFF;
+          border: 1px solid #F5F5F5;
+          border-radius: 6px;
+          padding: 20px 34px;
+          display: flex;
+          flex-direction: column;
+          gap:8px;
+          .addressList-item{
+            display: flex;
+            flex-direction: column;
+            gap:4px;
+            .name{
+              font-weight: 400;
+              font-size: 12px;
+              line-height: 16px;
+              color: #9c9c9c;
+            }
+            .address{
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              font-weight: 500;
+              font-size: 12px;
+              line-height: 16px;
+              color: #212121;
+            }
+          }
+          .pagination{
+            display: flex;
+            justify-content: center;
+            margin-top: 20px;
+          }
+        }
+      }
+    }
+    .drawerImport-container-footer{
+      width: 100%;
+      height: 84px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 0 40px;
+      gap:60px;
+      .exportAddress{
+        display: flex;
+        align-items: center;
+        gap:12px;
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 22px;
+        color: #2980FF;
+      }
+      .download{
+        display: flex;
+        align-items: center;
+        gap:12px;
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 22px;
+        color: #222222;
+      }
+    }
+  }
+}
+::v-deep .el-table__body{
+  -webkit-border-vertical-spacing: 20px;
+  background: #f9fbff;
+}
+::v-deep .el-table__row{
+  border-radius: 10px;
+  background: white;
+  height: 58px;
+}
+::v-deep .el-table__row>td{
+  border: none;
+}
+::v-deep .el-table th.is-leaf{
+  border: none;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  color: #4d4d4e ;
+}
+::v-deep .el-table::before{
+  height: 0;
+}
+</style>
+

front/admin-front/src/views/address/index1.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="">
+    <el-row style="margin: 0 0 48px 0">
+      <el-col :span="2">
+        <div class="">
+          <div class="totalCount-number">{{ this.totalCount }}</div>
+          <div class="totalCount-text">地址数量</div>
+        </div>
+      </el-col>
+
+      <el-col :span="3" :offset="15">
+        <el-button type="primary" class="btn-add" @click="generateAddress">
+          批量生成地址
+        </el-button>
+      </el-col>
+      <el-col :span="3">
+        <el-button type="primary" class="btn-add" @click="downloadAddress">
+          批量下载地址
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <div class="block-title">地址列表</div>
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column prop="address" label="地址账号" width="420">
+        <template slot-scope="{ row }">
+          {{row.groupName}} <span style="margin-left:10px"></span> {{row.address}}
+        </template>
+      </el-table-column>
+
+      <!-- <el-table-column prop="groupName" label="地址组"> </el-table-column> -->
+      <el-table-column prop="" label="gas消耗"> </el-table-column>
+      <el-table-column prop="" label="地址余额"> </el-table-column>
+      <el-table-column prop="addressType" label="地址类型">
+        <template slot-scope="{ row }">
+          <el-tag v-if="row.addressType === 1" type="info">批量号</el-tag>
+          <el-tag v-else>精品号</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="page"
+      :page-sizes="[10, 15, 25, 35]"
+      :page-size.sync="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="totalCount"
+    >
+    </el-pagination>
+    <SaveOrUpdate ref="SaveOrUpdate" />
+    <download ref="download"></download>
+  </div>
+</template>
+<script>
+import { pageAddress, batchAddress } from "@/api/adress";
+import SaveOrUpdate from "./SaveOrUpdate.vue";
+import Download from "./download.vue";
+export default {
+  components: { SaveOrUpdate, Download },
+  data() {
+    return {
+      url: process.env.VUE_APP_BASE_API,
+      address: {
+        password: undefined,
+        groupName: undefined,
+        numWallet: undefined,
+      },
+      tableData: [],
+      page: 1,
+      pageSize: 10,
+      totalCount: 0,
+    };
+  },
+  created() {
+    this.getAddresses();
+  },
+  methods: {
+    generateAddress() {
+      this.$refs.SaveOrUpdate.addressModal = true;
+      this.$refs.SaveOrUpdate.resetField();
+      this.$refs.SaveOrUpdate.resetUserForm();
+    },
+    downloadAddress() {
+      this.$refs.download.downloadModal = true;
+      this.$refs.download.resetField();
+      this.$refs.download.resetUserForm();
+    },
+    getAddresses() {
+      pageAddress({
+        page: this.page,
+        pageSize: this.pageSize,
+      }).then((res) => {
+        this.tableData = res.records;
+        this.totalCount = res.total;
+      });
+    },
+
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.page = 1;
+      this.getAddresses();
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getAddresses();
+    },
+  },
+  computed: {},
+};
+</script>

front/admin-front/src/views/airdrop/index.vue

@@ -1,49 +1,327 @@
 <template>
   <div class="app-container">
-    <el-form ref="form" :model="form" label-width="120px">
-      <el-form-item label="Activity name">
-        <el-input v-model="form.name" />
-      </el-form-item>
-      <el-form-item label="Activity zone">
-        <el-select v-model="form.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Activity time">
-        <el-col :span="11">
-          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
-        </el-col>
-        <el-col :span="2" class="line">-</el-col>
-        <el-col :span="11">
-          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
-        </el-col>
-      </el-form-item>
-      <el-form-item label="Instant delivery">
-        <el-switch v-model="form.delivery" />
-      </el-form-item>
-      <el-form-item label="Activity type">
-        <el-checkbox-group v-model="form.type">
-          <el-checkbox label="Online activities" name="type" />
-          <el-checkbox label="Promotion activities" name="type" />
-          <el-checkbox label="Offline activities" name="type" />
-          <el-checkbox label="Simple brand exposure" name="type" />
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="Resources">
-        <el-radio-group v-model="form.resource">
-          <el-radio label="Sponsor" />
-          <el-radio label="Venue" />
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="Activity form">
-        <el-input v-model="form.desc" type="textarea" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Create</el-button>
-        <el-button @click="onCancel">Cancel</el-button>
-      </el-form-item>
-    </el-form>
+    <div class="app-container-head">
+      <div class="app-container-head-left">
+        <div class="app-container-head-left-item">
+          <div class="app-container-head-left-item-count">
+            {{ head.projectsNumber }}
+          </div>
+          <div class="app-container-head-left-item-name">
+            空投项目
+          </div>
+        </div>
+        <div class="app-container-head-left-divider"/>
+        <div class="app-container-head-left-item">
+          <div class="app-container-head-left-item-count">
+            {{ head.ongoingNumber }}
+          </div>
+          <div class="app-container-head-left-item-name">
+            正在进行
+          </div>
+        </div>
+      </div>
+      <div class="app-container-head-right">
+        <div class="app-container-head-right-button" @click="drawerProject = true">
+          <img src="../../assets/airdrop/add.svg" alt="add">
+          添加项目
+        </div>
+      </div>
+    </div>
+    <div class="app-container-table">
+      <div class="app-container-table-title">
+        <div class="app-container-table-title-left">
+          空投列表
+        </div>
+        <div class="app-container-table-title-right">
+          总计数量: {{table.totalNumber}}
+        </div>
+      </div>
+      <div class="app-container-table-screening">
+        <div class="app-container-table-screening-item">
+          账号类型
+          <img src="../../assets/airdrop/filter_list.svg" alt="filter_list">
+        </div>
+        <div class="app-container-table-screening-item">
+          余额
+          <img src="../../assets/airdrop/unfold_more.svg" alt="unfold_more">
+        </div>
+      </div>
+      <div class="app-container-table-main">
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          @row-click="drawerInfo = true">
+          <el-table-column
+            label="项目名称"
+            width="280">
+            <template v-slot="scope">
+              <div class="projectName">
+                {{scope.row.projectName}}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="任务总数/已完成"
+            width="385">
+            <template v-slot="scope">
+              <div class="progress">
+                <div class="score">
+                  {{scope.row.totalNumber}} / {{scope.row.completedNumber}}
+                </div>
+                <div class="progressBar">
+                  <el-progress :show-text="false" :stroke-width="12" :percentage="(scope.row.completedNumber/scope.row.totalNumber*100)"></el-progress>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="状态"
+            width="215">
+            <template v-slot="scope">
+              <div v-if="scope.row.status === 0" class="status-0" style="color: #828282">
+                <img src="../../assets/airdrop/file_download_done.svg" alt="file_download_done">
+                已空投
+              </div>
+              <div v-if="scope.row.status === 1" class="status-0" style="color: #EB5757">
+                <img src="../../assets/airdrop/dangerous.svg" alt="dangerous">
+                未空投
+              </div>
+              <div v-if="scope.row.status === 2" class="status-0" style="color: #2980FF">
+                <img src="../../assets/airdrop/airplanemode_active.svg" alt="airplanemode_active">
+                进行中
+              </div>
+              <div v-if="scope.row.status === 3" class="status-0" style="color: #222222">
+                <img src="../../assets/airdrop/airline_seat_recline_extra.svg" alt="airline_seat_recline_extra">
+                未开始
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="累计Gas"
+            width="170">
+            <template v-slot="scope">
+              <div class="gas">
+                {{scope.row.gas}}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="官网"
+            width="185">
+            <template v-slot="scope">
+              <div class="website">
+                <a target="_blank" :href="scope.row.officialWebsite">
+                  {{scope.row.officialWebsite}}
+                </a>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="开始时间"
+            width="130">
+            <template v-slot="scope">
+              <div class="startTime">
+                {{scope.row.startTime}}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="结束时间">
+            <template v-slot="scope">
+              <div class="endTime">
+                {{scope.row.endTime}}
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <el-drawer
+      :visible.sync="drawerProject"
+      :with-header="false">
+      <div class="drawerProject-container">
+        <div class="drawerProject-container-head">
+          <div class="drawerProject-container-head-left">
+            <div class="drawerProject-container-title">
+              添加项目
+            </div>
+            <div class="drawerProject-container-tip">
+              空投项目: 85
+            </div>
+          </div>
+          <div class="drawerProject-container-head-right">
+            <div class="cancellation">
+              <img src="../../assets/address/close.svg" alt="close">
+              取消
+            </div>
+            <div class="complete">
+              <img src="../../assets/address/done_all.svg" alt="done_all">
+              完成
+            </div>
+          </div>
+        </div>
+        <div class="drawerProject-container-main">
+          <div class="title1">
+            基本信息
+          </div>
+          <div class="info">
+            <el-upload
+              class="upload-demo"
+              action="https://jsonplaceholder.typicode.com/posts/"
+              :on-preview="handlePreview"
+              :on-remove="handleRemove"
+              :before-remove="beforeRemove"
+              multiple
+              :limit="3"
+              :on-exceed="handleExceed">
+              <div class="uploadImg">
+                <img src="../../assets/airdrop/add_photo_alternate.svg" alt="add_photo_alternate">
+                上传图片
+              </div>
+            </el-upload>
+            <el-input v-model="input" placeholder="输入项目名称"></el-input>
+          </div>
+          <el-input v-model="input" placeholder="预计投入USDT"></el-input>
+          <el-input v-model="input" placeholder="输入项目相关URL"></el-input>
+        </div>
+      </div>
+    </el-drawer>
+    <el-drawer
+      :visible.sync="drawerInfo"
+      :with-header="false"
+      @closed="record = false">
+      <div class="drawerInfo-container">
+        <div class="drawerInfo-container-head" v-if="record === false">
+          <div class="drawerInfo-container-head-left">
+            <div class="drawerInfo-container-title">
+              基本信息
+            </div>
+            <div class="drawerInfo-container-projectInfo" >
+              <div class="left">
+                <div class="avatar">
+
+                </div>
+                <div class="infoBox">
+                  <div class="projectName">
+                    zkSync Era
+                  </div>
+                  <div class="link">
+                    <img src="../../assets/airdrop/language.svg" alt="language">
+                    https://zksync.io/
+                  </div>
+                </div>
+              </div>
+              <div class="right">
+                <div class="type">
+                  <img src="../../assets/airdrop/done_all.svg" alt="done_all">
+                  已空投
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="drawerInfo-container-main" v-if="record === false">
+          <div class="title1" style="margin-bottom: 8px">
+            任务
+          </div>
+          <div class="title2">
+            总任务数:2
+          </div>
+          <div class="list">
+            <div class="list-item" v-for="(item,index) in 3">
+              <div class="title">
+                task
+              </div>
+              <div class="infoBox">
+                <div class="one">
+                  Bridge
+                </div>
+                <div class="two">
+                  任务名称
+                </div>
+                <div class="three" @click="record = true">
+                  执行记录
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="drawerInfo-container-footer" v-if="record === false">
+          <div class="item" style="color: #222222">
+            <img src="../../assets/airdrop/page_info.svg" alt="page_info">
+            管理项目
+          </div>
+          <div class="item" style="color: #EB5757">
+            <img src="../../assets/airdrop/link_off.svg" alt="link_off">
+            删除
+          </div>
+        </div>
+        <div class="drawerInfo-container-head" v-if="record === true">
+          <div class="drawerInfo-container-head-left">
+            <div class="title1" style="margin-bottom: 8px">
+              基本信息
+            </div>
+            <div class="title2">
+              交互任务批量执行记录
+            </div>
+          </div>
+
+        </div>
+        <div class="drawerInfo-container-main" v-if="record === true">
+          <div class="title1" style="margin-bottom: 8px">
+            交互记录
+          </div>
+          <div class="title2">
+            总计交互任务:3
+          </div>
+          <div class="table-th">
+            <div class="time">
+              时间
+            </div>
+            <div class="total">
+              累计金额
+            </div>
+            <div class="gas">
+              总GAS
+            </div>
+            <div class="status">
+              状态
+            </div>
+          </div>
+          <div class="table-list">
+            <div class="table-item" v-for="(item,index) in recordList">
+              <div class="time">
+                {{item.time}}
+              </div>
+              <div class="total">
+                {{item.total}}
+              </div>
+              <div class="gas">
+                {{item.gas}}
+              </div>
+              <div class="status" v-if="item.status === 0">
+                <img src="../../assets/airdrop/check.svg" alt="check"> 已完成
+              </div>
+              <div class="status" style="color: #2980FF" v-if="item.status === 1">
+                <img src="../../assets/airdrop/clock_loader_60.svg" alt="clock_loader_60"> 进行中
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div class="drawerInfo-container-footer" v-if="record === true">
+          <div class="item" style="color: #222222">
+            <img src="../../assets/airdrop/page_info.svg" alt="page_info">
+            管理
+          </div>
+          <div class="item" style="color: #EB5757">
+            <img src="../../assets/airdrop/link_off.svg" alt="link_off">
+            删除
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+
   </div>
 </template>
 
@@ -51,35 +329,603 @@
 export default {
   data() {
     return {
-      form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: ''
+      head: {
+        projectsNumber:85,
+        ongoingNumber:5
+      },
+      table:{
+        totalNumber:22222
+      },
+      tableData: [
+        {
+        projectName:'Zk',
+        totalNumber:5,
+        completedNumber:2,
+        status:0,
+        gas:1,
+        officialWebsite:"https://nytimes.com",
+        startTime:'16/08/2013',
+        endTime:'16/08/2013'
+      }, {
+        projectName:'LayerZero',
+        totalNumber:4,
+        completedNumber:1,
+        status:1,
+        gas:23,
+        officialWebsite:"https://nytimes.com",
+        startTime:'16/08/2013',
+        endTime:'16/08/2013'
+      }, {
+        projectName:'StarkNet',
+        totalNumber:1,
+        completedNumber:0,
+        status:2,
+        gas:23,
+        officialWebsite:"https://nytimes.com",
+        startTime:'16/08/2013',
+        endTime:'16/08/2013'
+      }, {
+        projectName:'Sei',
+        totalNumber:3,
+        completedNumber:2,
+        status:3,
+        gas:23,
+        officialWebsite:"https://nytimes.com",
+        startTime:'16/08/2013',
+        endTime:'16/08/2013'
       }
+      ],
+      drawerProject:false,
+      input:'',
+      drawerInfo:false,
+      record:false,
+      recordList:[
+        {
+          time:'09-09',
+          total:'金额',
+          gas:'Gas',
+          status:0,
+        },
+        {
+          time:'09-09',
+          total:'金额',
+          gas:'Gas',
+          status:0,
+        },
+        {
+          time:'09-09',
+          total:'金额',
+          gas:'Gas',
+          status:1,
+        },
+      ]
     }
   },
   methods: {
-    onSubmit() {
-      this.$message('submit!')
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
     },
-    onCancel() {
-      this.$message({
-        message: 'cancel!',
-        type: 'warning'
-      })
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${ file.name }？`);
     }
   }
 }
 </script>
 
-<style scoped>
-.line{
-  text-align: center;
+<style lang="scss" scoped>
+.app-container{
+  .app-container-head{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .app-container-head-left{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap:60px;
+      .app-container-head-left-item{
+        display: flex;
+        flex-direction: column;
+        gap:8px;
+        .app-container-head-left-item-count{
+          font-weight: 700;
+          font-size: 21px;
+          line-height: 28px;
+          color: #181818;
+        }
+        .app-container-head-left-item-name{
+          font-weight: 700;
+          font-size: 12px;
+          line-height: 16px;
+          color: #8e8f91;
+        }
+      }
+      .app-container-head-left-divider{
+        width: 1px;
+        height: 50px;
+        border-right:1px solid #e4e6ea;
+      }
+    }
+
+    .app-container-head-right{
+      .app-container-head-right-button{
+        width: 148px;
+        height: 52px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
+        background: #4A76FF;
+        border-radius: 10px;
+        font-weight: 700;
+        font-size: 15px;
+        line-height: 20px;
+        color: #FFFFFF;
+      }
+    }
+  }
+  .app-container-table{
+    margin-top: 80px;
+    .app-container-table-title{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .app-container-table-title-left{
+        font-weight: 700;
+        font-size: 21px;
+        line-height: 28px;
+        color: #181818;
+      }
+      .app-container-table-title-right{
+        font-weight: 400;
+        font-size: 21px;
+        line-height: 28px;
+        color: #898a8c;
+      }
+    }
+    .app-container-table-screening{
+      display: flex;
+      align-items: center;
+      gap:100px;
+      padding: 20px 0;
+      margin: 40px 0;
+      border-top: 1px solid #f5f5f5;
+      border-bottom: 1px solid #f5f5f5;
+      .app-container-table-screening-item{
+        display: flex;
+        align-items: center;
+        gap:6px;
+        font-weight: 400;
+        font-size: 15px;
+        line-height: 20px;
+        color: #4d4d4e;
+      }
+    }
+    .app-container-table-main {
+      .projectName{
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 22px;
+        color: #222222;
+      }
+      .progress{
+        display: flex;
+        align-items: center;
+        gap: 30px;
+        .score{
+          font-weight: 700;
+          font-size: 17px;
+          line-height: 22px;
+          color: #222222;
+        }
+        .progressBar{
+          width: 160px;
+        }
+      }
+      .status-0{
+        width: 76px;
+        height: 26px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap:4px;
+        background: #F5F5F5;
+        border: 1px solid #2980FF;
+        border-radius: 26px;
+
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+      }
+      .gas{
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 22px;
+        color: #181818;
+      }
+      .website{
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        text-decoration-line: underline;
+        color: #2980FF;
+      }
+      .startTime{
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 18px;
+        color: #898a8c;
+      }
+      .endTime{
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 18px;
+        color: #898a8c;
+      }
+    }
+  }
+  .drawerProject-container{
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    .title1{
+      font-weight: 700;
+      font-size: 21px;
+      line-height: 28px;
+      color: #181818;
+    }
+    .title2{
+      font-weight: 700;
+      font-size: 12px;
+      line-height: 16px;
+      color: #8e8f91;
+    }
+    .drawerProject-container-head{
+      padding: 56px 40px;
+      background: #FFFFFF;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .drawerProject-container-head-left{
+        .drawerProject-container-title{
+          font-weight: 700;
+          font-size: 21px;
+          line-height: 28px;
+          color: #181818;
+          margin-bottom: 8px;
+        }
+        .drawerProject-container-tip{
+          font-weight: 700;
+          font-size: 12px;
+          line-height: 16px;
+          color: #919191;
+        }
+      }
+      .drawerProject-container-head-right{
+        display: flex;
+        align-items: center;
+        gap:48px;
+        .cancellation{
+          width: 118px;
+          height: 52px;
+          background: #E0E0E0;
+          border-radius: 10px;
+          gap: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 700;
+          font-size: 15px;
+          line-height: 20px;
+          color: #828282;
+        }
+        .complete{
+          width: 118px;
+          height: 52px;
+          border: 2px solid #4A76FF;
+          border-radius: 10px;
+          gap:4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 700;
+          font-size: 15px;
+          line-height: 20px;
+          color: #2980FF;
+        }
+      }
+
+    }
+    .drawerProject-container-main{
+      padding: 36px 40px;
+      background: #f9fbff;
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      gap:24px;
+      .info{
+        display: flex;
+        align-items: center;
+        gap:24px;
+        .uploadImg{
+          display: flex;
+          align-items: center;
+          gap:4px;
+          width: 124px;
+          height: 52px;
+          border: 1px solid #2980FF;
+          border-radius: 40px;
+          padding: 0 20px;
+          font-weight: 400;
+          font-size: 15px;
+          line-height: 20px;
+          color: #2980FF;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+  .drawerInfo-container{
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    .title1{
+      font-weight: 700;
+      font-size: 21px;
+      line-height: 28px;
+      color: #181818;
+    }
+    .title2{
+      font-weight: 700;
+      font-size: 12px;
+      line-height: 16px;
+      color: #8e8f91;
+    }
+    .drawerInfo-container-head{
+      padding: 56px 40px;
+      background: #FFFFFF;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .drawerInfo-container-head-left{
+        width: 100%;
+        .drawerInfo-container-title{
+          font-weight: 700;
+          font-size: 21px;
+          line-height: 28px;
+          color: #181818;
+          margin-bottom: 24px;
+        }
+        .drawerInfo-container-projectInfo{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          .left{
+            display: flex;
+            align-items: center;
+            gap:24px;
+            .avatar{
+              width: 52px;
+              height: 52px;
+              border-radius: 50%;
+              background: black;
+            }
+            .infoBox{
+              display: flex;
+              flex-direction: column;
+              gap:8px;
+              .projectName{
+                font-weight: 700;
+                font-size: 17px;
+                line-height: 22px;
+                color: #222222;
+              }
+              .link{
+                display: flex;
+                align-items: center;
+                gap:12px;
+                font-weight: 700;
+                font-size: 15px;
+                line-height: 20px;
+                color: #2980FF;
+                text-decoration-line: underline;
+              }
+            }
+          }
+          .right{
+            display: flex;
+            justify-content: flex-end;
+            .type{
+              display: flex;
+              align-items: center;
+              gap:4px;
+              font-weight: 700;
+              font-size: 15px;
+              line-height: 20px;
+              color: #2980FF;
+              width: 117px;
+              height: 44px;
+              border: 1px solid #4A76FF;
+              border-radius: 30px;
+              justify-content: center;
+            }
+          }
+        }
+      }
+    }
+    .drawerInfo-container-main{
+      padding: 36px 40px;
+      background: #f9fbff;
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      .list{
+        display: flex;
+        flex-direction: column;
+        gap:24px;
+        margin-top: 24px;
+        .list-item{
+          .title{
+            font-weight: 400;
+            font-size: 17px;
+            line-height: 22px;
+            color: #181818;
+            margin-bottom: 12px;
+          }
+          .infoBox{
+            display: flex;
+            align-items: center;
+            gap:24px;
+            width: 100%;
+            .one{
+              width: 107px;
+              height: 52px;
+              border: 1px solid #E0E0E0;
+              border-radius: 10px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-weight: 700;
+              font-size: 15px;
+              line-height: 20px;
+              color: #222222;
+            }
+            .two{
+              flex-grow: 1;
+              height: 52px;
+              border: 1px solid #E0E0E0;
+              border-radius: 10px;
+              display: flex;
+              align-items: center;
+              padding-left: 20px;
+              font-weight: 700;
+              font-size: 15px;
+              line-height: 20px;
+              color: #2980FF;
+            }
+            .three{
+              width: 100px;
+              height: 52px;
+              border-radius: 10px;
+              background: #d6e1ff;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-weight: 700;
+              font-size: 15px;
+              line-height: 20px;
+              color: #2980FF;
+            }
+          }
+        }
+      }
+      .table-th{
+        margin-top: 42px;
+        margin-bottom: 22px;
+        display: flex;
+        align-items: center;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        color: #7d7e80;
+        width: 100%;
+        .time{
+          width: 190px;
+        }
+        .total{
+          width: 125px;
+        }
+        .gas{
+          width: 150px;
+        }
+        .status{
+          display: flex;
+          justify-content: flex-end;
+        }
+      }
+      .table-list{
+        display: flex;
+        flex-direction: column;
+        gap:28px;
+        .table-item{
+          display: flex;
+          align-items: center;
+          .time{
+            font-weight: 400;
+            font-size: 15px;
+            line-height: 20px;
+            color: #222222;
+            width: 190px;
+          }
+          .total{
+            font-weight: 700;
+            font-size: 15px;
+            line-height: 20px;
+            width: 125px;
+          }
+          .gas{
+            font-weight: 700;
+            font-size: 15px;
+            line-height: 20px;
+            width: 150px;
+          }
+          .status{
+            font-weight: 400;
+            font-size: 15px;
+            line-height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            gap:4px;
+            white-space: nowrap;
+          }
+        }
+      }
+
+    }
+    .drawerInfo-container-footer{
+      width: 100%;
+      height: 84px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 30px 40px;
+      gap:56px;
+      .item{
+        display: flex;
+        align-items: center;
+        gap:12px;
+        font-weight: 700;
+        font-size: 17px;
+        line-height: 22px;
+      }
+    }
+  }
+}
+::v-deep .el-table__row>td{
+  border: none;
+}
+::v-deep .el-table th.is-leaf{
+  border: none;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  color: #4d4d4e ;
+}
+::v-deep .el-table::before{
+  height: 0;
+}
+::v-deep .el-input__inner{
+  height: 52px;
+  border-radius: 10px;
 }
 </style>