@uxda/appkit 1.1.2 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -80,7 +80,7 @@ import { AccountView } from '@uxda/appkit'
80
80
  ```
81
81
  ```html
82
82
  <template>
83
- <account-view @recharge=onAccountViewRecharge />
83
+ <account-view app="crm" @recharge=onAccountViewRecharge />
84
84
  <template>
85
85
  ```
86
86
 
@@ -161,3 +161,28 @@ $app.requestPayment({
161
161
  })
162
162
  ```
163
163
 
164
+ ## Hooks (Vue Composables)
165
+
166
+ ### useTabbar
167
+ 用于获取或设置 custom tab bar
168
+
169
+ ```typescript
170
+ import { useTabbar } from '@uxda/appkit-next'
171
+
172
+ onMounted(() => {
173
+ const { setTab } = useTabbar()
174
+ setTab('home')
175
+ })
176
+ ```
177
+ 以上代码用于切换到 /pages/home/index 时, 设置 tab bar 选中项为 'home'
178
+ 在 custom-tab-bar/index.vue 需要做以下设置
179
+
180
+ ```typescript
181
+ import { useSafeArea, useTabbar } from '@uxda/appkit-next'
182
+
183
+ const { onTabChange } = useTabbar()
184
+ onTabChange((value: string) => {
185
+ selected.value = value
186
+ })
187
+ ```
188
+ 以上代码设置响应页面内的 setTab() 动作
package/dist/appkit.css CHANGED
@@ -173,7 +173,7 @@ page {
173
173
  font-family: 'DIN alternate', 'Barlow Condensed', 'Roboto Condensed', sans-serif-condensed-light;
174
174
  }
175
175
  .account-card .card {
176
- background: #2F2F2F;
176
+ background: #2f2f2f;
177
177
  border-radius: 10px;
178
178
  padding: 13px 20px;
179
179
  margin: 0;
@@ -203,7 +203,7 @@ page {
203
203
  height: 100%;
204
204
  }
205
205
  .account-card .card .card-row .card-row-left .bean-box .baan-name {
206
- color: #F3D59D;
206
+ color: #f3d59d;
207
207
  font-weight: 600;
208
208
  font-size: 11px;
209
209
  }
@@ -228,8 +228,8 @@ page {
228
228
  .account-card .card .card-row-right .pay {
229
229
  padding: 0 8px;
230
230
  line-height: 18px;
231
- color: #FFD6A5;
232
- border: 1px solid #FFD6A5;
231
+ color: #ffd6a5;
232
+ border: 1px solid #ffd6a5;
233
233
  border-radius: 9px;
234
234
  font-size: 12px;
235
235
  display: flex;
@@ -249,7 +249,7 @@ page {
249
249
  height: 28px;
250
250
  line-height: 28px;
251
251
  border-radius: 14px;
252
- background: linear-gradient(90deg, #FFEBC1 0%, #FFD7A7 52.29%, #FFB875 100%);
252
+ background: linear-gradient(90deg, #ffebc1 0%, #ffd7a7 52.29%, #ffb875 100%);
253
253
  }
254
254
  .account-card .card .card-row-right .account-info-entry .account-info-name {
255
255
  color: #975213;
@@ -504,7 +504,7 @@ page {
504
504
  }
505
505
  .second-balance .positions .position {
506
506
  border-radius: 5px;
507
- background: #F7F8FA;
507
+ background: #f7f8fa;
508
508
  height: 54px;
509
509
  display: flex;
510
510
  align-items: center;
@@ -516,7 +516,7 @@ page {
516
516
  .second-balance .positions .position .icon {
517
517
  width: 30px;
518
518
  height: 30px;
519
- background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjIyODUgMzcuMjY0M0wxMy43OTk5IDQyLjc1QzEzLjYyODUgNDMuMDkyOSAxMy43OTk5IDQzLjUyMTQgMTQuMjI4NSA0My41MjE0TDE4Ljg1NzEgNDMuNzc4NkMxOS4wMjg1IDQzLjc3ODYgMTkuMTE0MiA0My44NjQzIDE5LjE5OTkgNDMuOTVMMjIuMDI4NSA0Ny43MjE0QzIyLjI4NTcgNDcuOTc4NiAyMi43MTQyIDQ3Ljk3ODYgMjIuODg1NyA0Ny43MjE0TDI2LjE0MjggNDIuMzIxNEMyNi4zMTQyIDQyLjA2NDMgMjYuMjI4NSA0MS44MDcxIDI1Ljk3MTQgNDEuNjM1N0wxNy45MTQyIDM3LjA5MjlDMTcuNjU3MSAzNy4wMDcxIDE3LjM5OTkgMzcuMDkyOSAxNy4yMjg1IDM3LjI2NDNaTTQyLjc3MTQgMzcuMTc4Nkw0Ni4xOTk5IDQyLjY2NDNDNDYuMzcxNCA0My4wMDcxIDQ2LjE5OTkgNDMuNDM1NyA0NS43NzE0IDQzLjQzNTdMNDEuMTQyOCA0My42OTI5QzQwLjk3MTQgNDMuNjkyOSA0MC44ODU3IDQzLjc3ODYgNDAuNzk5OSA0My44NjQzTDM3Ljk3MTQgNDcuNjM1N0MzNy43MTQyIDQ3Ljg5MjkgMzcuMjg1NyA0Ny44OTI5IDM3LjExNDIgNDcuNjM1N0wzMy44NTcxIDQyLjIzNTdDMzMuNjg1NyA0MS45Nzg2IDMzLjc3MTQgNDEuNzIxNCAzNC4wMjg1IDQxLjU1TDQyLjA4NTcgMzcuMDA3MUM0Mi4zNDI4IDM2LjgzNTcgNDIuNTk5OSAzNi45MjE0IDQyLjc3MTQgMzcuMTc4NlpNNDIuMDg1NyAxOC40OTI5TDMxLjE5OTkgMTIuMzIxNEMzMC40Mjg1IDExLjg5MjkgMjkuMzk5OSAxMS44OTI5IDI4LjYyODUgMTIuMzIxNEwxNy44Mjg1IDE4LjQwNzFDMTcuMDU3MSAxOC44MzU3IDE2LjU0MjggMTkuNjkyOSAxNi41NDI4IDIwLjU1VjMyLjgwNzFDMTYuNTQyOCAzMy42NjQzIDE3LjA1NzEgMzQuNTIxNCAxNy44Mjg1IDM0Ljk1TDI4LjcxNDIgNDEuMTIxNEMyOS40ODU3IDQxLjU1IDMwLjUxNDIgNDEuNTUgMzEuMjg1NyA0MS4xMjE0TDQyLjA4NTcgMzUuMTIxNEM0Mi44NTcxIDM0LjY5MjkgNDMuMzcxNCAzMy44MzU3IDQzLjM3MTQgMzIuOTc4NlYyMC43MjE0QzQzLjM3MTQgMTkuNzc4NiA0Mi44NTcxIDE4LjkyMTQgNDIuMDg1NyAxOC40OTI5Wk0zNi45NDI4IDIzLjcyMTRMMzAuNTk5OSAzMi44OTI5QzMwLjQyODUgMzMuMTUgMzAuMDg1NyAzMy4zMjE0IDI5Ljc0MjggMzMuMzIxNEMyOS4zOTk5IDMzLjMyMTQgMjkuMDU3MSAzMy4xNSAyOC44ODU3IDMyLjg5MjlMMjIuNzk5OSAyMy43MjE0QzIyLjQ1NzEgMjMuMjkyOSAyMi42Mjg1IDIyLjYwNzEgMjMuMDU3MSAyMi4zNUMyMy40ODU3IDIyLjA5MjkgMjQuMTcxNCAyMi4xNzg2IDI0LjQyODUgMjIuNjA3MUwyOS42NTcxIDMwLjQ5MjlMMzUuMTQyOCAyMi41MjE0QzM1LjQ4NTcgMjIuMDkyOSAzNi4wODU3IDIxLjkyMTQgMzYuNTE0MiAyMi4yNjQzQzM3LjE5OTkgMjIuNjkyOSAzNy4yODU3IDIzLjI5MjkgMzYuOTQyOCAyMy43MjE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="), linear-gradient(100deg, #F4E2CE -67.2%, #DEBB9B 98.15%);
519
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjIyODUgMzcuMjY0M0wxMy43OTk5IDQyLjc1QzEzLjYyODUgNDMuMDkyOSAxMy43OTk5IDQzLjUyMTQgMTQuMjI4NSA0My41MjE0TDE4Ljg1NzEgNDMuNzc4NkMxOS4wMjg1IDQzLjc3ODYgMTkuMTE0MiA0My44NjQzIDE5LjE5OTkgNDMuOTVMMjIuMDI4NSA0Ny43MjE0QzIyLjI4NTcgNDcuOTc4NiAyMi43MTQyIDQ3Ljk3ODYgMjIuODg1NyA0Ny43MjE0TDI2LjE0MjggNDIuMzIxNEMyNi4zMTQyIDQyLjA2NDMgMjYuMjI4NSA0MS44MDcxIDI1Ljk3MTQgNDEuNjM1N0wxNy45MTQyIDM3LjA5MjlDMTcuNjU3MSAzNy4wMDcxIDE3LjM5OTkgMzcuMDkyOSAxNy4yMjg1IDM3LjI2NDNaTTQyLjc3MTQgMzcuMTc4Nkw0Ni4xOTk5IDQyLjY2NDNDNDYuMzcxNCA0My4wMDcxIDQ2LjE5OTkgNDMuNDM1NyA0NS43NzE0IDQzLjQzNTdMNDEuMTQyOCA0My42OTI5QzQwLjk3MTQgNDMuNjkyOSA0MC44ODU3IDQzLjc3ODYgNDAuNzk5OSA0My44NjQzTDM3Ljk3MTQgNDcuNjM1N0MzNy43MTQyIDQ3Ljg5MjkgMzcuMjg1NyA0Ny44OTI5IDM3LjExNDIgNDcuNjM1N0wzMy44NTcxIDQyLjIzNTdDMzMuNjg1NyA0MS45Nzg2IDMzLjc3MTQgNDEuNzIxNCAzNC4wMjg1IDQxLjU1TDQyLjA4NTcgMzcuMDA3MUM0Mi4zNDI4IDM2LjgzNTcgNDIuNTk5OSAzNi45MjE0IDQyLjc3MTQgMzcuMTc4NlpNNDIuMDg1NyAxOC40OTI5TDMxLjE5OTkgMTIuMzIxNEMzMC40Mjg1IDExLjg5MjkgMjkuMzk5OSAxMS44OTI5IDI4LjYyODUgMTIuMzIxNEwxNy44Mjg1IDE4LjQwNzFDMTcuMDU3MSAxOC44MzU3IDE2LjU0MjggMTkuNjkyOSAxNi41NDI4IDIwLjU1VjMyLjgwNzFDMTYuNTQyOCAzMy42NjQzIDE3LjA1NzEgMzQuNTIxNCAxNy44Mjg1IDM0Ljk1TDI4LjcxNDIgNDEuMTIxNEMyOS40ODU3IDQxLjU1IDMwLjUxNDIgNDEuNTUgMzEuMjg1NyA0MS4xMjE0TDQyLjA4NTcgMzUuMTIxNEM0Mi44NTcxIDM0LjY5MjkgNDMuMzcxNCAzMy44MzU3IDQzLjM3MTQgMzIuOTc4NlYyMC43MjE0QzQzLjM3MTQgMTkuNzc4NiA0Mi44NTcxIDE4LjkyMTQgNDIuMDg1NyAxOC40OTI5Wk0zNi45NDI4IDIzLjcyMTRMMzAuNTk5OSAzMi44OTI5QzMwLjQyODUgMzMuMTUgMzAuMDg1NyAzMy4zMjE0IDI5Ljc0MjggMzMuMzIxNEMyOS4zOTk5IDMzLjMyMTQgMjkuMDU3MSAzMy4xNSAyOC44ODU3IDMyLjg5MjlMMjIuNzk5OSAyMy43MjE0QzIyLjQ1NzEgMjMuMjkyOSAyMi42Mjg1IDIyLjYwNzEgMjMuMDU3MSAyMi4zNUMyMy40ODU3IDIyLjA5MjkgMjQuMTcxNCAyMi4xNzg2IDI0LjQyODUgMjIuNjA3MUwyOS42NTcxIDMwLjQ5MjlMMzUuMTQyOCAyMi41MjE0QzM1LjQ4NTcgMjIuMDkyOSAzNi4wODU3IDIxLjkyMTQgMzYuNTE0MiAyMi4yNjQzQzM3LjE5OTkgMjIuNjkyOSAzNy4yODU3IDIzLjI5MjkgMzYuOTQyOCAyMy43MjE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="), linear-gradient(100deg, #f4e2ce -67.2%, #debb9b 98.15%);
520
520
  background-repeat: no-repeat;
521
521
  border-radius: 15px;
522
522
  background-size: 30px;
@@ -531,7 +531,7 @@ page {
531
531
  }
532
532
  .second-balance .positions .position .amount {
533
533
  flex-grow: 0;
534
- color: #9E7B5A;
534
+ color: #9e7b5a;
535
535
  font-size: 14px;
536
536
  font-weight: 700;
537
537
  }
@@ -544,14 +544,14 @@ page {
544
544
  background-repeat: no-repeat;
545
545
  }
546
546
  .account-view .page-header {
547
- background-color: #3B393C;
547
+ background-color: #3b393c;
548
548
  position: sticky;
549
549
  top: 0;
550
550
  z-index: 1;
551
551
  transition: background-color 0.3s;
552
552
  }
553
553
  .account-view .page-header.with-background {
554
- background-color: #3B393C;
554
+ background-color: #3b393c;
555
555
  }
556
556
  .account-view.popupOpen {
557
557
  height: 100vh;
@@ -578,7 +578,7 @@ page {
578
578
  display: inline-block;
579
579
  padding: 0 10px;
580
580
  line-height: 22px;
581
- color: #E7CAAD;
581
+ color: #e7caad;
582
582
  font-size: 12px;
583
583
  }
584
584
  .account-view .small-bean-button label {
@@ -590,7 +590,7 @@ page {
590
590
  }
591
591
  .account-view .balance {
592
592
  border-radius: 15px;
593
- background: linear-gradient(105deg, #F4E2CE 1.88%, #DEBB9B 98.18%);
593
+ background: linear-gradient(105deg, #f4e2ce 1.88%, #debb9b 98.18%);
594
594
  box-shadow: 0px -10px 9px -3px rgba(0, 0, 0, 0.33);
595
595
  height: 112px;
596
596
  padding: 20px;
@@ -805,4 +805,87 @@ page {
805
805
  .balance-reminder .footer .recharge-button {
806
806
  color: #fff;
807
807
  background: var(--primary-button-background);
808
+ }
809
+ .ocr-id__img {
810
+ width: 20px;
811
+ height: 20px;
812
+ }
813
+ .dd-area {
814
+ display: flex;
815
+ justify-content: flex-end;
816
+ align-items: center;
817
+ }
818
+ .dd-area-value {
819
+ text-align: right;
820
+ color: black;
821
+ }
822
+ .dd-area-label {
823
+ color: var(--placeholder-color);
824
+ }
825
+ .dd-selector {
826
+ display: flex;
827
+ justify-content: flex-end;
828
+ align-items: center;
829
+ }
830
+ .dd-selector-value {
831
+ text-align: right;
832
+ color: black;
833
+ }
834
+ .dd-selector-label {
835
+ color: var(--placeholder-color);
836
+ }
837
+ .self-registration {
838
+ width: 100%;
839
+ height: 100%;
840
+ display: flex;
841
+ flex-direction: column;
842
+ }
843
+ .self-registration-body {
844
+ flex: 1;
845
+ padding: 12px;
846
+ overflow: auto;
847
+ }
848
+ .self-registration-banner {
849
+ width: 100%;
850
+ height: 170px;
851
+ }
852
+ .self-registration .nut-cell-group__warp {
853
+ border-radius: 5px;
854
+ margin: 12px 0 0;
855
+ }
856
+ .self-registration__input {
857
+ display: flex;
858
+ align-items: center;
859
+ }
860
+ .self-registration-bottom {
861
+ background-color: white;
862
+ padding-bottom: var(--safe-bottom-height);
863
+ }
864
+ .self-registration .experience-button {
865
+ margin: 7.5px 12px;
866
+ border-radius: 5px;
867
+ width: calc(100% - 24px);
868
+ }
869
+ .self-registration .nut-input-text {
870
+ text-align: right !important;
871
+ }
872
+ .self-registration .nut-form-item__label.required::before {
873
+ display: none;
874
+ }
875
+ .self-registration .nut-form-item__label.required::after {
876
+ content: "*";
877
+ color: #fa2c19;
878
+ margin-right: 4px;
879
+ }
880
+ .self-registration .nut-form-item__label {
881
+ width: unset;
882
+ }
883
+ .self-registration .input-placeholder {
884
+ color: #cccccc;
885
+ }
886
+ .self-registration .nut-radio__icon {
887
+ font-size: 16px;
888
+ }
889
+ .self-registration .nut-radio__icon--unchecked {
890
+ font-size: 16px;
808
891
  }