From 608b8aac59dd0ab5c93bc54d5a9bb8e7d9c8858a Mon Sep 17 00:00:00 2001
From: "lijie.hu" <lijieofhu@gmail.com>
Date: Mon, 1 Apr 2024 16:01:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=87=E4=BB=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |   6 ++
 package.json                                  |   1 +
 .../lj-text-dashboard.component.css           |  10 +-
 .../lj-text-dashboard.component.html          |   2 +-
 .../lj-text-dashboard.component.ts            |   9 ++
 .../data-v/second1/second1.component.html     |  38 ++++++-
 .../data-v/second1/second1.component.less     |  96 +++++++++++++++++-
 .../data-v/second1/second1.component.ts       |  31 +-----
 .../lj-ag-grid-component.component.html       |   8 +-
 .../lj-ag-grid-component.component.less       |   7 ++
 .../lj-ag-grid-component.component.ts         |  10 +-
 src/assets/car-status-bg.png                  | Bin 0 -> 17311 bytes
 src/assets/lock.svg                           |   1 +
 src/assets/unLock.svg                         |   1 +
 yarn.lock                                     |   5 +
 15 files changed, 187 insertions(+), 38 deletions(-)
 create mode 100644 src/assets/car-status-bg.png
 create mode 100644 src/assets/lock.svg
 create mode 100644 src/assets/unLock.svg

diff --git a/package-lock.json b/package-lock.json
index 2bb4f8a..3f507de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "@types/signalr": "^2.4.3",
         "@types/three": "^0.162.0",
         "ag-grid-angular": "^31.0.2",
+        "autofit.js": "^3.1.0",
         "echarts": "^5.5.0",
         "moment": "^2.30.1",
         "mqtt": "^5.3.6",
@@ -5615,6 +5616,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/autofit.js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/autofit.js/-/autofit.js-3.1.0.tgz",
+      "integrity": "sha512-zX/2VbpxdDcgDDCT1A0psuF8Phs8QbmFXstvLkqrrOcv33LQttCh2J6GVs84585+LfMAfacemxRXIidrFXu02g=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.16",
       "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.16.tgz",
diff --git a/package.json b/package.json
index 1c6198c..afb20ac 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@types/signalr": "^2.4.3",
     "@types/three": "^0.162.0",
     "ag-grid-angular": "^31.0.2",
+    "autofit.js": "^3.1.0",
     "echarts": "^5.5.0",
     "moment": "^2.30.1",
     "mqtt": "^5.3.6",
diff --git a/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css
index 266fdf7..e257242 100644
--- a/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css
+++ b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css
@@ -15,8 +15,8 @@
   
  
   .chart-button {
-    width: 175px;
-height: 51px;
+    width: 17rem;
+    height: 5;
     margin: 5px;
     font-size: 28px;
     line-height: 22px;
@@ -29,4 +29,10 @@ height: 51px;
     background-size: contain; /* 或者可以使用 'contain' 根据你的需要 */
     border-width: 0;
   }
+  
+  .chart-container {
+    width: 10rem;
+    height: 10rem;
+  }
+  
   
\ No newline at end of file
diff --git a/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.html b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.html
index adf5b20..0917fe1 100644
--- a/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.html
+++ b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.html
@@ -1,6 +1,6 @@
 <div class="chart-card">
   <div class="chart-container">
-    <div *ngIf="chartId" id="{{ chartId }}" style="width: 15rem; height: 15rem"></div>
+    <div *ngIf="chartId" id="{{ chartId }}" class="chart-container"></div>
   </div>
   <p class="chart-text">{{ text }}</p>
   <button class="chart-button">1#重磅</button>
diff --git a/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.ts b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.ts
index 89e1aa2..c5a2e03 100644
--- a/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.ts
+++ b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.ts
@@ -2,7 +2,9 @@ import { CommonModule } from '@angular/common';
 import { Component, Input, OnInit, ViewChild, inject } from '@angular/core';
 import { ModalHelper, _HttpClient } from '@delon/theme';
 import { SHARED_IMPORTS } from '@shared';
+import autofit from 'autofit.js';
 import * as echarts from 'echarts';
+
 @Component({
   selector: 'app-data-v-lj-text-dashboard',
   standalone: true,
@@ -16,6 +18,13 @@ export class DataVLjTextDashboardComponent implements OnInit {
   ngOnInit(): void {
     // 使用 setTimeout 确保视图已经初始化
     setTimeout(() => this.initCharts(), 0);
+    // autofit.init();
+    // autofit.init({
+    //   dh: 1080,
+    //   dw: 1920,
+    //   el: 'body',
+    //   resize: true
+    // });
   }
 
   initCharts(): void {
diff --git a/src/app/routes/data-v/second1/second1.component.html b/src/app/routes/data-v/second1/second1.component.html
index 1e9b299..e489c6a 100644
--- a/src/app/routes/data-v/second1/second1.component.html
+++ b/src/app/routes/data-v/second1/second1.component.html
@@ -1,5 +1,5 @@
 <div nz-row [nzGutter]="[12, 12]" style="display: flex; justify-content: space-between">
-  <div style="display: flex; flex-direction: column; width: 40%">
+  <div style="display: flex; flex-direction: column; width: 23%">
     <app-data-v-lj-dashboard title="系统状态" style="width: 100%" />
     <lj-app-ag-grid-component
       style="width: 100%"
@@ -18,10 +18,42 @@
       [gridThemeClass]="gridThemedClass"
     />
   </div>
-  <div style="display: flex; flex-direction: column">
+
+  <div style="display: flex; flex-direction: column; width: 43%">
+    <!-- button-component.component.html -->
+    <div class="button-container">
+      <button class="lock-button">
+        <img class="logo" src="./assets/lock.svg" />
+      </button>
+      <button class="standard-button">概要</button>
+      <button class="standard-button">详情</button>
+      <!-- <button class="standard-button">操作</button> -->
+      <button class="standard-button">审计</button>
+      <button class="standard-button">校磅</button>
+    </div>
+    <div class="car-status-container">
+      <div class="row" *ngFor="let item of items; let i = index">
+        <div class="image-container">
+          <img src="http://openwrt.waitclopeo.com:3004/auseft/car0.jpg" alt="Car Image" />
+        </div>
+        <div class="image-container">
+          <img
+            src="https://img.jianbihua.com/sites/default/files/styles/photo640x425logofull/public/images/2019-11/20191115110304_360855.jpg"
+            alt="Long Image"
+          />
+        </div>
+        <div class="info-container">
+          <div class="info-button">车牌号: 苏E8888</div>
+          <div class="info-button">卡车种类:重型火卡</div>
+          <div class="info-button">重量:30吨</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div style="display: flex; flex-direction: column; width: 30%">
     <!-- </data-v-card> -->
     <lj-app-ag-grid-component
-      style="width: 100%"
       [showPageTurning]="false"
       [showEditButton]="true"
       title="今日汇总"
diff --git a/src/app/routes/data-v/second1/second1.component.less b/src/app/routes/data-v/second1/second1.component.less
index ffcbecb..7e5d933 100644
--- a/src/app/routes/data-v/second1/second1.component.less
+++ b/src/app/routes/data-v/second1/second1.component.less
@@ -169,4 +169,98 @@
 /* 设置横向滚动条滑块的颜色 */
 ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
     background-color: #00eff8;
-}
\ No newline at end of file
+}
+
+/* button-component.component.css */
+.button-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // background-color: #2c3e50; // 你可以根据需要调整颜色
+  }
+  
+  .lock-button, .standard-button, .highlighted-button {
+    margin: 5px;
+    padding: 10px 15px;
+    font-size: 20px;
+    color: white;
+    border: none;
+  }
+  
+  .lock-button {
+    background-color: transparent;
+  }
+  
+  .standard-button {
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 20px;
+    color: rgb(107 236 246 / 100%);
+    text-align: center;
+    background-color: rgb(33 48 105 / 100%);
+    border-radius: 3px;
+  }
+  
+  .highlighted-button {
+    background-color: #3498db; // 你可以根据需要调整颜色
+    border-radius: 10px;
+  }
+  
+  .fa-lock {
+    margin-right: 5px;
+  }
+
+  .logo{
+    width: 65px;
+    // height: ;
+  }
+
+  .car-status-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-image: url("/assets/car-status-bg.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+  
+  .row {
+    display: flex;
+    align-items: stretch; /* 保持相同高度 */
+    justify-content: space-between; /* 子组件间平均分布 */
+    margin-bottom: 20px; /* 每行之间的间距 */
+  }
+  
+  .image-container {
+    display: flex;
+    flex: 1; /* 三个子元素均匀分布 */
+    align-items: center; /* 图片居中 */
+    justify-content: center; /* 图片居中 */
+    margin: 0 10px; /* 子组件之间的间距 */
+  }
+  
+  .image-container img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain; /* 保持图片的宽高比 */
+  }
+  
+  .info-container {
+    display: flex;
+    flex: 1; /* 同样的，让信息容器也占据等同的空间 */
+    flex-direction: column;
+    justify-content: space-around;
+    margin: 0 10px;
+  }
+  
+  .info-button {
+    margin: 5px 0;
+    padding: 10px;
+    color: white;
+    text-align: center;
+    background-color: #007bff;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  }
+  
\ No newline at end of file
diff --git a/src/app/routes/data-v/second1/second1.component.ts b/src/app/routes/data-v/second1/second1.component.ts
index 734ab9c..7ddef72 100644
--- a/src/app/routes/data-v/second1/second1.component.ts
+++ b/src/app/routes/data-v/second1/second1.component.ts
@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { ModalHelper, TitleService, _HttpClient } from '@delon/theme';
 import { SHARED_IMPORTS } from '@shared';
@@ -29,6 +30,7 @@ import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/
     GridButtonValueRenderer,
     DataVTitleComponent,
     DataVLjDashboardComponent,
+    CommonModule,
     ...SHARED_IMPORTS,
     DataVLjCarInfoTableComponent
   ]
@@ -38,6 +40,7 @@ export class DataVSecond1Component implements OnInit {
   private readonly modal = inject(ModalHelper);
   private readonly elementRef = inject(ElementRef);
   private readonly titleService = inject(TitleService);
+  public items = [1, 2, 3];
 
   public chartDom = document.getElementById('main')!;
   // public myChart = echarts.init(this.chartDom);
@@ -55,41 +58,17 @@ export class DataVSecond1Component implements OnInit {
   rowData: object[] = [];
 
   colDefs1: ColDef[] = [
-    {
-      headerName: '序号',
-      valueGetter: function (params: any) {
-        return parseInt(params.node.id) + 1;
-      },
-      width: 90,
-      // flex: 2,
-      sortable: true,
-      unSortIcon: true,
-      field: 'xh'
-    },
-
-    { headerName: '任务名称', unSortIcon: true, width: 120, field: 'rwmc' },
     { headerName: '任务描述', unSortIcon: true, field: 'rwms', width: 120 },
     { headerName: '开始时间', headerClass: 'ag-header-center', unSortIcon: true, field: 'kssj', width: 180 },
-    { headerName: '计划完成时间', unSortIcon: true, field: 'jhwcsj', width: 180 },
+
     { headerName: '超期', width: 70, field: 'sfcq' },
     { headerName: '操作', width: 90, autoHeaderHeight: true, field: 'cz', cellRenderer: GridButtonValueRenderer }
   ];
 
   colDefs2: ColDef[] = [
-    {
-      headerName: '序号',
-      valueGetter: function (params: any) {
-        return parseInt(params.node.id) + 1;
-      },
-      width: 90,
-      unSortIcon: true,
-      field: 'xh'
-    },
-    { headerName: '任务名称', unSortIcon: true, field: 'rwmc' },
     { headerName: '任务描述', unSortIcon: true, field: 'rwms', minWidth: 170, flex: 1 },
     { headerName: '开始时间', unSortIcon: true, field: 'kssj', minWidth: 170, flex: 1 },
-    { headerName: '当前状态', field: 'dqzt' },
-    { headerName: '当前节点', field: 'dqjd' },
+
     { headerName: '实际完成时间', field: 'sjwcsj', minWidth: 170, flex: 1 },
     { headerName: '操作', autoHeaderHeight: true, width: 110, field: 'cz', cellRenderer: GridButtonValueRenderer }
   ];
diff --git a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html
index 2a9d8e8..751179c 100644
--- a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html
+++ b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.html
@@ -12,11 +12,11 @@
   nzXXl="12"
   title="{{ title }}"
 >
+  <!-- style="min-width: 500px" -->
   <ag-grid-angular
     #myGrid
-    style="min-width: 500px"
     [class]="gridThemeClass"
-    [pagination]="true"
+    (gridReady)="onGridReady($event)"
     [suppressPaginationPanel]="true"
     [suppressPaginationPanel]="true"
     [suppressScrollOnNewData]="true"
@@ -30,14 +30,14 @@
   <!-- 分页 -->
 
   <div [hidden]="!showPageTurning" class="grid-pagination">
-    <div class="page-total-style">共1222 {{ pageRowTotal }} 项数据</div>
+    <div class="page-total-style">共 {{ pageRowTotal }} 项数据</div>
     <nz-pagination
       [nzPageIndex]="pageIndex"
       [nzPageSize]="pageSize"
       [nzTotal]="pageRowTotal"
+      [className]="paginationThemeClass"
       (nzPageSizeChange)="nzPageSizeChange($event)"
       (nzPageIndexChange)="nzPageIndexChange($event)"
-      [className]="paginationThemeClass"
       nzShowSizeChanger
     />
   </div>
diff --git a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.less b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.less
index 2386fb8..b10d4d7 100644
--- a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.less
+++ b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.less
@@ -2,6 +2,8 @@
 @import 'ag-grid-community/styles/ag-grid.css';
 @import 'ag-grid-community/styles/ag-theme-quartz.css';
 
+
+
 .custom-label {
     display: inline-block;
     padding: 10px 20px; /* 内边距 */
@@ -32,3 +34,8 @@
   width: 100%;
   height: 100%;
 }
+
+/* stylelint-disable-next-line selector-class-pattern */
+.paginationThemeClass{
+  width: 100%;
+}
diff --git a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts
index bbcf95b..bc94f06 100644
--- a/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts
+++ b/src/app/routes/data-v/workstation/lj-ag-grid-component/lj-ag-grid-component.component.ts
@@ -24,7 +24,8 @@ export class LjAgGridComponentComponent implements OnInit {
   // };
 
   gridOptions: GridOptions = {
-    headerHeight: 0
+    headerHeight: 0,
+    suppressHorizontalScroll: false
 
     // columnDefs="columnDefs"
   };
@@ -120,6 +121,13 @@ export class LjAgGridComponentComponent implements OnInit {
     };
   }
   //每页数
+  onGridReady(params: any) {
+    console.log('onGridReady');
+    console.log(params);
+    setTimeout(() => {
+      params.api.sizeColumnsToFit();
+    }, 100);
+  }
   nzPageSizeChange(_pageSize: any) {
     this.pageSize = _pageSize;
   }
diff --git a/src/assets/car-status-bg.png b/src/assets/car-status-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..600777cb2f890f0e4572f235b856d803620e39af
GIT binary patch
literal 17311
zcmeHPdpK0<+g22v9CnEcW7jSn`Auny!DyFew-uf3oW^hLsFZPt!I&93AVOzjW5%W;
z#SoF>D2K5T)s!>CV1@>RVaAx#x7s^d`}^zr>pNZR50~p=t!F*!dGF_b@ArA%XWcwz
zk6N{S{c<HGrB#Q2K6pY&Nf{3OtXEqK{G~`%9|-(f6mSCdlTvQ8-iVTtq0-@l`%eYC
zjrHK)InEIJCa*1zb{X8Vyx#VdN_qOP_g<YosTmiM{q|8$<E6|Fms{|?7tD^{^QrrD
z{I@-2NyFn$;)>!&9u;gze#>FIh8;Wab3OQV^z!}J8K@dm?$xX82l^@BU&e{8RA(uI
zp_Bxgyo)6!(y47+G1tnz5bdWX#|mMxzU~9QIXjkV8rp;_En2Lirde+|QB{nbK9<@x
z{Y)@HNR>sj?38xFPqv7E9>@2fzFq}fZetL^eP~j`iJ&LpJY0*<#gXk4uXwbC)E{}-
zrICKde_8w6Y?PaOTcb0py-+wg66;gxe^j6L=UTW9x@(5TNZrlb6S%Vf$d_k-b>jEU
zc@?6h-mXf2;VTQb2b(b*w*XdKUGqLs%V*uHq=gIBOi#K8h*sN;%jcGG9c87Rn>cLm
zwNi%P9wM(a8#ZnUHfoah?@!e%mx;I%YVOqImxr3VpYi4F_LD5Zr*w2q+o_TMouJFN
zuL+jqn8k9b(jj_SAC{xwXUFH{7<0lt_afIJ#!@z@Bc##s*q)Nh9+P#?5ZS-inuGk(
z+ZfUBk$I(D{6NR7vXs~HDT7}gBHwY^lJ+pVWHuXt3>lpcz*?3o!sEI8&=9-H!8iOh
zh~i6G7<I4tC;;K`Ra;_TGF)AoZ$$kxxumNV*+Y;xlAZ;O=v8&?NFbX#vV?cwMpQ|T
zTv;{HQZkcjqV2F#YM<}H3{agoh1@(priM0YPZ!J75$WWRTBF$SGwOoE*mZjw%f>7E
z)9p@pWtn0;(Scl;9)9X<u@GiDn`f_q_h@Uz$(J?RnM^;b>=A+9&GcvY`r%3b^&@nm
zen8r=tGJIeKKIOyet&ATVWVgBX`GAo+@n3De@$fl5rqqV=S<^or<5yNF<o;`@?^7Z
z>Xl%(7DsqwQe0E~`=cx<({<jo(cTFj`Yo}K6B4T-Ed6Dpr|@(!I;`ntW{;KcM6^8B
z;02fUOCF{l7n8%IShN?<#s7`kFUW~ltCliLX^ff7#K~K#N84WzB^tR1!tCq#yL#{d
zB(Y0!=!p5{_jjrfsgKS^_mstIi&##Vh@Q2tE15XZ3l{#|cdOC*#7Y?H1VaZ)2>KL*
zQ1I{$R^&T(f%ijUspkF-)0?kFCRo3qH98v4`Q%@CJD@7CW`RcT-A@q_*P?Xx(4@b?
z-QT^7r?DocJrrKANq7YxHXN*~4=<pJ`#;_pcw&OMIGcY>QhMbRGK}7yH}_tdkjPs7
zH4^{~yz`GZe(#BPX0xoAU_U9nXNN4FsB6qc-af9e9m64hE?QPyXHW2-s2{NKI(>Z2
zGtyi}x~NS9R*#oH1jWW?@#^N%tbP66u?YL=&iKUM?zxXIl3ZDH6-GkbsB%16M4ZNN
zVjNA$_pBfGBgi%UC~p2<U!Ert=@Y?ee=Oocfg(+J&(N)SW<}v2Ud#kJvk5Li$QRi*
z-7+Czs|tIV_^9}G$QQH~t;Q9_!Q+$EG5!WAc%-Tp<K+j)Txsv#+T)una19*F1C3tU
zOF>H)EK)g!yn}|nGLYwCq|a=7-J=nx%_GhX$V$4f-xxwoGdNLgr4?ru!_jsWnP28-
zN6|mc#FfByZ0g`gm$2;`Dag>#!F+;#d%>mS?*;YB=WufhP*f+3*XSZHpYfZ*qB}yS
z04($xk%TB$Ggmo|Fgfa2<05|?)wT+T7@DnAcM`QH#Ez?$_1<{)uiYS4lkD*QAmQi?
z*b^KWRDNgWxwg^=baLS!N#0*)kK7(dX31hz%TTwF7yQu)PKw!<*u8fA4i-+L4>H2X
zMC{>`%J<E^YQCADgBvUDqVM)*@3(E@6a7X$YcU+gq|}a`F>J9meJ4dO*5|XebyGp(
zs;t#6fW5Kg9-tb>>+Z`M@JepAuAHUtOr)s<S=s>dW|HE@;~j_W$rcqfMtR=ne)dzU
zbl9esR}4bD=2jsOd0os?rJ-jN6N%%Bp-!)wCdC^QgAL~W_nQ?Px#?Sfw3MCCzc?wH
z1Vz!NFHL1ja~KI8(wY*_s+_6wE^DKO`pVhK#&ii)KCFl(hfvW|^;w6R&Eq`n<W@_!
z=PuJd*Fv)rKtpMm=jdLSLUO%j-TyJ(5K&y7Hy~+ytJ?|3aAX}VMEJ$2Tg{5>aKHs*
zLHe&Dik#Z<p0Yo|ZWtbRZy~7#v_{c(EnT(Y(`1THTMqGayu!bC8=f?gO!`jnx<xja
znc=W+3_U$_6`+poX8@j@6gp$KSbb!GBhkJi52^URX_YrIka2YbkvnC@Dqjsxlu4+T
zzD@U;LNQ&+!cP><c*lHUk8<&xaVPlptW#;z$m?g<)CM^0lxb*mU+Hj^5c(W+OmqX-
zNr}L-6WxYGjNIKwfvCqCfw~|ds0f#*T#-vLE-(e}VH>(f+*&st<vG1W0-K_jkCb3)
z-_T9mx=P}}^Qy{4?S0;IqnLj)j(!eC@n7UJCAY|_&giXYc9y>ko_W0MrS->tuzT&B
z^0>(BA>&cVlX|VBD(n5fZ1NPl7O&|FExYjD0_WHmCReQ!SUatRA#7`YTaD8K`FVKp
z#w|Bnz%d(Ks|hcu{f9KT8y<a_Er5e=D_L^zh>xF0YvCcce=x+{oeetzQWQRmwC*`~
z6F?sSuq>MVgEb5^*teZ+Y6jQhU?AI&OHh;`EI}Cu@e)Lp(1Zd_yO216^b({h7m8Vs
z_J&p{(4q-iTK*3&z->Zmq~g1&8C&cT7tzH#>AZ&+XDsf6GPnew6rrp&ya!|86nu^z
zvXNtBDFYWVe+P;PZ>!>sKy_`WMOr6wGMS)qQr20UnvW|-gBSQuC0kn){wdTV4pcXT
zOnr$D6sx~B4j?c<V3?<i2nY-i82<af@Oq#{YyK<%G?D%9n5ok&G1m0KJHWPUY6T59
zFI3(-T(JagI;hBxr?o_%Z4C?sgi0N21?XR^zSD%Sa*E6Z?FSz-HpDc<Nw0zw$Wowa
zzjRmiNsx5es-p=XIz-$LTD)FUIe6sS!~SicJ(2q>qRIZ7=nFe3Hfj48Z+x=9abnFp
zZUJW+0IgJV2MzM!o#7%aX4<*n<seswfE&B(O+Y@Jza1WZ;oWY_8z5Kx0g>f1r~~rB
z^k<tI)AQ>nKY?5=36I`pHnjre!+KzgXMN#Hhwnjx&BdnX{s!?9kPlF}z78c6uCF+O
z(DgN~{;SCdFqS;*&*tN+GxcB6%uK#6t*+Hgf*B!w#q>J3#;)=gEK9A`GHg}YLOwff
zHpDo+G)@2=&9SMO-2kST(*RSP=1u(yO7DZW=%6%Kfs6prfMNpS#0JWp&BqMj^Cy3L
z+fFs|OCPtlcJ*XOSb^&~L0=fDvDBV#=1^0JuXc0zrX~!@;nB;AjtwlxmuNsirDNMc
zq;(Y#Q0^=Cs(<64h+*Jt%3S2zh0|(~nR&W~V)ISoLb#ci<4{h`FLEHFfQSN`V7|_z
zP%=Qt03`#I43ND3TOL3%36e?wKi8T+*ftr&?xnvf`&ChM*L`OlxKRIe@nbE4Jb~rc
z|DIu>5TO!MEsL0%Cb?+W=V$$KlMO{jkESxqzOAa%G}R3M<x>|@d%eJT>r!=t%9abE
ziGiuTSiXY$!JDr@XE<1nvGj;F;qe(X*V42vZDC8(;ETVl-WM%C`kk&tsEeO8NoNh?
zh<U|8L2vg<!PwCqL?Q>f(X+*bOOzIgR#^nGMUj9rmCVF03flR(Yp6rMhaL8wr*Q53
zv<=vF+U_eI;pzZQZ+XL{!M^y_<*(!;nL(G_NFC|PG#5e3Mvj@{6sN$IWw2K~jkHWx
zR1xF~ku+EGIv3O9f%MsS&kJ;l(l={KWL(ljGm@~*D&!C&v%E-9Yvwk3HlUioN|D^C
zKz`QU7Jw9H1jJkTur(44@Na7DjeJOdWd15?#K$C>S>v*}I3(y@cYR0p<t(Xv6yT{7
zrB6J_aKw(B6+a_(6;Vjsw*s^{6R-%!lT1aOxz2|itY=s=Frd2&OAQ&6vpdekIv?ab
zT`1qG=`D}QNJw@$k`i(p&Yr!8a8m%oL-XOe3Wjcw0z2A-GZ`PEI|T1X69|f1uRXT(
zT4SV#?;(1oKhy=<imr*YyYOWiH*O$6eZc4QZ0ObMBreP1M{$Zdq0%2{v_+OlcskM`
zG_sQx-GQ&#+!oYh8v0?{LC<fnui8StQ!va<=iafk&6kWVT^+g}^tvS~kqO9rvZc2@
z{L&GI;&B6o<kv3DX~8K**mR1h_#EFNExIG1ebk${FR=bSgS972de|t)B8<VAu@xOy
z5vxOWb`7E{z#-hfM4g9BBby4+F>jJ|gy#J~ODn%b6d7y%ioQ}+502NUoJ}Z`PmvEZ
zY2(QA6aA^i&Z2gQSPDu<8%v*@lUFkM|Aepqn{BoC1;)GL*TbI-n3`N3?kFS#w4ii)
zf@@P%cTep{HBs!0XWR9SR>A_huWAiA{N6e8!AfD3L_ryBEt-CAc^fC*1$ygUYle}&
z$KV%QYinPv;|7MwoUxT|m)s;ZI2~z%x#F|?p(8Qm3Z3Q(VebZ@MbB@nDkCyTnz@@t
zbvZF@`QlZu;3Y|jMIp#$lE`@q2Kro=F4x;LRETK^f$dzXzOHpL5Ewlw;oLwei(e{^
zK^u&!Jvi7zX*3a!Ud>mI*Q-1~c>O8U!ioblBd@h;T&t7ZYK&|b{iAg@a@k5<(??|g
zUey?&q4?9}Ic#~UU~E@QZn?M;+f-pOBYt4p)Em`Q!KtLhr36n=SL*F9A0WMaf*U$e
zTaaLE478?M&B!W2N3;4gm+Rpgp0jI2ZfEp*N$w2C@>f1H+4{*pqF)R<!$zO7pFRKr
zigKO4>5S6QHy?rlAqc&gi5d^R(1=i+@~r-hdPc5Z2ZH%;YxeoKX8{(&(scJ;2xU0q
zD#~Z#a(Jy_gnly<aqM>L8M~TMLSMIo$!tUYG9wbP@3xlgSy*8KXq?X%RXwDjP4Jk3
zYynj)L<OCeeQ?^uNhNI;Jgq$tslH)WaA)<C)Z;S)sSAa~aGL^^AfK*@hDKf)t&9&e
z;L>>KUZR?i@{>t;x@DO3Pqd!trNQw3-1u(q&g^86{99&pgfeu|^S+P{fXJM^!o+yx
zC*>Bzk*u3cuQL-tsK4r*#q`G{;EMtKzkC<qZxp>#iqKD{vV>DBysf(enM0(+0rRt)
zwlHkQL0dD1Md8smE6~h^-a0iSL(H3;k2VXT!vK56?UKC<ou?7LK&`a<msJNBO0JNZ
nuknIn^DSNe58|duv1BAJPSe4j91MJML+P-s{lVOy+^_xzaHvOt

literal 0
HcmV?d00001

diff --git a/src/assets/lock.svg b/src/assets/lock.svg
new file mode 100644
index 0000000..6870397
--- /dev/null
+++ b/src/assets/lock.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711695655771" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2980" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M385.150849 385.662338l-128.895105 0 0-150.377622q0-49.102897 19.436563-91.556444t53.706294-74.677323 80.815185-50.637363 101.786214-18.413586q49.102897 0 94.625375 18.413586t80.815185 50.637363 56.263736 74.677323 20.971029 91.556444l0 150.377622-123.78022 0 0-121.734266q0-64.447552-35.804196-99.74026t-97.182817-35.292707q-55.240759 0-88.999001 35.292707t-33.758242 99.74026l0 121.734266zM826.053946 447.040959q27.62038 0 47.568432 19.948052t19.948052 47.568432l0 317.122877q0 27.62038-9.718282 51.66034t-26.597403 41.942058-39.896104 28.131868-50.637363 10.22977l-516.603397 0q-27.62038 0-50.125874-10.22977t-38.361638-27.108891-24.551449-39.384615-8.695305-48.07992l0-324.283716q0-27.62038 19.436563-47.568432t47.056943-19.948052l61.378621 0 128.895105 0 255.744256 0 123.78022 0 61.378621 0z" p-id="2981" fill="#97f6fb"></path></svg>
\ No newline at end of file
diff --git a/src/assets/unLock.svg b/src/assets/unLock.svg
new file mode 100644
index 0000000..aca8956
--- /dev/null
+++ b/src/assets/unLock.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711695639298" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2740" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M768.25422 0q48.810328 0 94.061569 18.303873t80.333664 50.33565 56.436941 74.740814 21.354518 91.519364l0 150.49851-123.042701 0 0-122.025819q0-64.063555-36.099305-99.654419t-97.112214-35.590864q-54.911619 0-88.468719 35.590864t-33.5571 99.654419l0 124.059583-128.12711 0 0-152.532274q0-48.810328 19.320755-91.519364t53.386296-74.740814 80.333664-50.33565 101.179742-18.303873zM766.220457 693.513406l0 87.451837 0 47.793446q0 27.455809-9.660377 51.860973t-26.438928 41.692155-39.658391 27.455809-50.33565 10.168818l-514.542205 0q-27.455809 0-49.82721-9.660377t-38.641509-26.438928-24.913605-39.14995-8.643496-47.793446l0-323.368421q0-28.472691 19.829196-47.793446t46.268123-19.320755l629.449851 0q28.472691 0 47.793446 19.320755t19.320755 47.793446l0 179.988083z" p-id="2741" fill="#97f6fb"></path></svg>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 05d03f8..3bcfdb5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2931,6 +2931,11 @@ asynckit@^0.4.0:
   resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
+autofit.js@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/autofit.js/-/autofit.js-3.1.0.tgz"
+  integrity sha512-zX/2VbpxdDcgDDCT1A0psuF8Phs8QbmFXstvLkqrrOcv33LQttCh2J6GVs84585+LfMAfacemxRXIidrFXu02g==
+
 autoprefixer@10.4.16:
   version "10.4.16"
   resolved "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.16.tgz"