@uxda/appkit 1.2.80 → 3.2.20

package/src/balance/components/AccountView.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="account-view">
     <div class="scroll-content">
-      <page-header
-        color-mode="dark"
-        title="我的账户"
-        :class="{ 'with-background': scrolled > 0 }"
-        @close="onPageHeaderClose"
-      />
+      <page-header title="我的账户" :class="{ 'with-background': scrolled > 0 }" @close="onPageHeaderClose" />
       <div class="row jusify-right">
         <div class="small-bean-button" @click="onSecondBalanceButtonClick">
           <label>收支明细</label>
@@ -15,94 +10,70 @@
       <div class="balance">
         <div class="bean-box spa-between">
           <div class="bean-img">
-            <img
-              class="bean-icon"
-              src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-bean.png"
-            />
+            <img class="bean-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-bean.png" />
             <div class="bean-tag tag">云豆</div>
           </div>
           <div class="rule" @click="rulesPopupOpen = true">规则说明</div>
         </div>
         <div class="bean-counts spa-between">
-          <div class="counts number">{{ balance.total || 0 }}</div>
+          <div class="counts number">{{ formatAmount(balance.total || 0) }}</div>
           <div class="pay" @click="gotoRecharge">云豆充值</div>
         </div>
       </div>
       <Tip />
-      <div class="rights-card" v-if="balance.privileges.corporateStar">
+      <div class="rights-card" v-if="balance.privileges?.corporateStar">
         <div class="title">企明星权益</div>
         <div class="list">
-          <div
-            class="item star-item"
-            v-for="(item, index) in balance.privileges.corporateStar"
-            :key="index"
-          >
+          <div class="item star-item" v-for="(item, index) in balance.privileges.corporateStar" :key="index">
             <div class="item-count">
-              <span>{{ item.count }}</span
-              ><span>{{ item.unit }}</span>
+              <span>{{ formatAmount(item.count || 0) }}</span><span>{{ item.unit }}</span>
             </div>
             <div class="item-title">
               <div>{{ item.title }}</div>
               <div class="item-title-button" v-if="item.id">
-                <div @click="gotoTrade(item)">超值换购</div>
-                <img
-                  class="button-icon"
-                  src="https://cdn.ddjf.com/static/images/bpms-workBench/button-hg.svg"
-                />
+                <div @click="gotoTrade(item)">企明星优惠充值</div>
+                <img class="button-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/button-hg.svg" />
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="rights-card" v-if="balance.privileges.aiapprove">
+      <div class="rights-card" v-if="balance.privileges?.aiapprove">
         <div class="title">AI审批权益</div>
         <div class="list">
           <div class="item" v-for="(item, index) in balance.privileges.aiapprove" :key="index">
-            <div class="item-count">{{ item.count }}{{ item.unit }}</div>
+            <div class="item-count">{{ formatAmount(item.count || 0) }}{{ item.unit }}</div>
+            <div class="item-title">{{ item.title }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="rights-card" v-if="balance.privileges?.signkit">
+        <div class="title">电子签约权益</div>
+        <div class="list">
+          <div class="item" v-for="(item, index) in balance.privileges.signkit" :key="index">
+            <div class="item-count">{{ formatAmount(item.count || 0) }}{{ item.unit }}</div>
             <div class="item-title">{{ item.title }}</div>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <nut-popup
-    pop-class="consumption-rules-popup"
-    v-model:visible="rulesPopupOpen"
-    :close-on-click-overlay="false"
-  >
+  <nut-popup pop-class="consumption-rules-popup" v-model:visible="rulesPopupOpen" :close-on-click-overlay="false">
     <consumption-rules @complete="rulesPopupOpen = false" />
   </nut-popup>
-  <nut-popup
-    position="bottom"
-    :style="{ height: '40%' }"
-    round
-    :close-on-click-overlay="true"
-    v-model:visible="datePickerOpen"
-  >
-    <date-filter
-      v-if="datePickerOpen"
-      :from="filtering.dateFrom"
-      :to="filtering.dateTo"
-      @reset="onDateReset"
-      @complete="onDateFilterComplete"
-    />
+  <nut-popup position="bottom" :style="{ height: '40%' }" round :close-on-click-overlay="true"
+    v-model:visible="datePickerOpen">
+    <date-filter v-if="datePickerOpen" :from="filtering.dateFrom" :to="filtering.dateTo" @reset="onDateReset"
+      @complete="onDateFilterComplete" />
   </nut-popup>
-  <nut-popup
-    position="bottom"
-    :style="{ height: '75%' }"
-    round
-    :close-on-click-overlay="true"
-    v-model:visible="filterOpen"
-  >
-    <consumption-filter
-      :modelValue="[
-        filtering.账户类型,
-        filtering.收入还是支出,
-        filtering.交易类型,
-        filtering.权益类目,
-      ]"
-      @complete="onFilterComplete"
-    />
+  <nut-popup position="bottom" :style="{ height: '75%' }" round :close-on-click-overlay="true"
+    v-model:visible="filterOpen">
+    <consumption-filter :modelValue="[
+      filtering.账户类型,
+      filtering.收入还是支出,
+      filtering.交易类型,
+      filtering.权益类目,
+    ]" @complete="onFilterComplete" />
   </nut-popup>
   <app-drawer v-model="secondBalanceOpen" title="收支明细">
     <div class="operation-box">
@@ -111,29 +82,18 @@
           <div class="title">收支明细</div>
           <div class="time" @click="openDateFilter" v-show="filtering.dateFrom">
             <div class="text number">{{ dateRangeDisplay }}</div>
-            <img
-              style="margin-top: -2px"
-              class="time-icon"
-              src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-down.png"
-            />
+            <img style="margin-top: -2px" class="time-icon"
+              src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-down.png" />
           </div>
         </div>
         <div class="search" @click="filterOpen = true">
           <span class="text">筛选</span>
-          <img
-            class="time-icon"
-            src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-select-icon.png"
-          />
+          <img class="time-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-select-icon.png" />
         </div>
       </div>
       <div class="operation-list">
-        <scroll-view
-          class="operation-scroll"
-          :scroll-y="true"
-          @scroll="onScroll"
-          :lower-threshold="50"
-          @scrolltolower="onReachBottom"
-        >
+        <scroll-view class="operation-scroll" :scroll-y="true" @scroll="onScroll" :lower-threshold="100"
+          @scrolltolower="onReachBottom">
           <div class="box" v-if="consumptionGroups.length > 0">
             <div class="box-detail" v-for="(item, index) in consumptionGroups" :key="index">
               <div class="title number">{{ item.date }}</div>
@@ -178,7 +138,8 @@ import { AppDrawer, PageHeader, WithPaging } from '../../shared'
 import dayjs from 'dayjs'
 import EmptyView from '../../shared/components/EmptyView.vue'
 import Tip from './Tip.vue'
-import groupBy from 'lodash/groupBy'
+import groupBy from 'lodash-es/groupBy'
+import { useAmount } from '../../shared/composables/useAmount'
 
 const refreshing = ref(false)
 
@@ -189,6 +150,7 @@ const props = withDefaults(defineProps<AccountViewProps>(), {
   app: '',
 })
 
+const { formatAmount } = useAmount()
 const emit = defineEmits(['recharge', 'trade'])
 
 const filterOpen = ref<boolean>(false)
@@ -300,6 +262,7 @@ async function loadConsumptions(append: boolean = false) {
       } else {
         reachedLastPage.value = false
       }
+    }).finally(() => {
       Taro.hideLoading()
     })
 }
@@ -440,65 +403,76 @@ onMounted(() => {
 <style lang="scss">
 .account-view {
   height: 100vh;
+
   .scroll-content {
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUwIiBoZWlnaHQ9IjQwNiIgdmlld0JveD0iMCAwIDc1MCA0MDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zODIuNSA0MDcuNUM1NzcuMzU3IDQwNy41IDc1My43ODggMzgxLjI0OCA4ODEuNTIxIDMzOC43OTFDOTQ1LjM4NiAzMTcuNTYzIDk5Ny4xMDQgMjkyLjI3NiAxMDMyLjg3IDI2NC4xNzFDMTA2OC42MiAyMzYuMDcxIDEwODguNSAyMDUuMDk3IDEwODguNSAxNzIuNUMxMDg4LjUgMTM5LjkwMyAxMDY4LjYyIDEwOC45MjkgMTAzMi44NyA4MC44Mjg5Qzk5Ny4xMDQgNTIuNzI0NSA5NDUuMzg2IDI3LjQzNjcgODgxLjUyMSA2LjIwODk4Qzc1My43ODggLTM2LjI0ODIgNTc3LjM1NyAtNjIuNSAzODIuNSAtNjIuNUMxODcuNjQzIC02Mi41IDExLjIxMjIgLTM2LjI0ODIgLTExNi41MjIgNi4yMDg5OEMtMTgwLjM4NiAyNy40MzY3IC0yMzIuMTA0IDUyLjcyNDUgLTI2Ny44NjcgODAuODI4OUMtMzAzLjYyNCAxMDguOTI5IC0zMjMuNSAxMzkuOTAzIC0zMjMuNSAxNzIuNUMtMzIzLjUgMjA1LjA5NyAtMzAzLjYyNCAyMzYuMDcxIC0yNjcuODY3IDI2NC4xNzFDLTIzMi4xMDQgMjkyLjI3NiAtMTgwLjM4NiAzMTcuNTYzIC0xMTYuNTIyIDMzOC43OTFDMTEuMjEyMiAzODEuMjQ4IDE4Ny42NDMgNDA3LjUgMzgyLjUgNDA3LjVaIiBmaWxsPSIjM0IzOTNDIiBzdHJva2U9ImJsYWNrIi8+Cjwvc3ZnPgo=');
-    background-position: center -200px;
+    background-image: url('https://cdn.ddjf.com/static/images/customer-center/blue-bg.png');
+    background-position: center 0;
     background-repeat: no-repeat;
+    background-size: 100% 200px;
   }
+
   .page-header {
-    background-color: #3b393c;
+    background-color: transparent;
     position: sticky;
     top: 0;
     z-index: 1;
     transition: background-color 0.3s;
+
     &.with-background {
       background-color: #3b393c;
+      color: #fff;
     }
   }
+
   .spa-between {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
+
   .row {
     display: flex;
     flex-direction: row;
     margin: 10px 15px;
   }
+
   .jusify-right {
     justify-content: flex-end;
   }
+
   .small-bean-button {
     height: 22px;
     border-radius: 11px;
-    border: 1px solid #ffffff10;
-    background-color: #ffffff18;
-    display: inline-block;
+    background-color: #fff;
+    display: inline-flex;
+    align-items: center;
     padding: 0 10px;
-    line-height: 22px;
-    color: #e7caad;
+    color: #353535;
     font-size: 12px;
+
     label {
-      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDZMMTYgMTJMMTAgMThWNloiIGZpbGw9IiNFN0NBQUQiIHN0cm9rZT0iI0U3Q0FBRCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDZMMTYgMTJMMTAgMThWNloiIGZpbGw9IiMzNTM1MzUiIHN0cm9rZT0iIzM1MzUzNSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
       padding-right: 18px;
       background-repeat: no-repeat;
       background-position: right center;
       background-size: 16px;
     }
   }
+
   .balance {
     border-radius: 15px;
-    background: linear-gradient(105deg, #f4e2ce 1.88%, #debb9b 98.18%);
-    box-shadow: 0px -10px 9px -3px rgba(0, 0, 0, 0.33);
+    background: linear-gradient(90deg, #FFEBC1 0%, #FFB875 100%);
     height: 112px;
     padding: 20px;
     margin: 0 15px;
     box-sizing: border-box;
     font-size: 10px;
+
     .bean-img {
       display: flex;
       justify-content: flex-start;
       align-items: center;
+
       .bean-icon {
         display: block;
         font-size: 0;
@@ -506,6 +480,7 @@ onMounted(() => {
         height: 20px;
         margin-right: 4px;
       }
+
       .bean-tag {
         color: #353535;
         height: 15px;
@@ -515,23 +490,28 @@ onMounted(() => {
         padding-left: 5px;
         padding-right: 10px;
       }
+
       .tag {
         background: #ff8320;
         color: #fff;
       }
     }
+
     .rule {
       color: #353535;
       opacity: 0.5;
     }
   }
+
   .bean-counts {
     margin-top: 12px;
+
     .counts {
       color: #3d3835;
       font-size: 32px;
       font-weight: 700;
     }
+
     .pay {
       padding: 0 20px;
       height: 32px;
@@ -544,6 +524,7 @@ onMounted(() => {
     }
   }
 }
+
 .consumption-rules-popup {
   border-radius: 16px;
   width: 70%;
@@ -557,6 +538,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   height: calc(100vh - 87px);
+
   .operation-title {
     padding: 10px 15px;
     background: #fff;
@@ -565,11 +547,13 @@ onMounted(() => {
     &.with-shadow {
       box-shadow: 0px 1px 10px 0px #99999933;
     }
+
     .text {
       color: #353535;
       font-size: 12px;
       opacity: 0.5;
     }
+
     .time-icon {
       display: block;
       font-size: 0;
@@ -577,15 +561,18 @@ onMounted(() => {
       height: 12px;
       margin-left: 4px;
     }
+
     .search-time {
       display: flex;
       align-items: center;
+
       .title {
         color: #000;
         font-weight: 500;
         font-size: 17px;
         margin-right: 10px;
       }
+
       .time {
         height: 22px;
         padding-right: 5px;
@@ -594,6 +581,7 @@ onMounted(() => {
         align-items: center;
       }
     }
+
     .search {
       display: flex;
       align-items: center;
@@ -601,20 +589,25 @@ onMounted(() => {
       padding-left: 5px;
     }
   }
+
   .spa-between {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
+
   .operation-list {
     flex: 1;
     width: 100%;
+
     .operation-scroll {
-      height: calc(100vh - 130px);
-      padding: 0 15px;
+      height: calc(100vh - 132px);
       box-sizing: border-box;
     }
+
     .box {
+      padding: 0 10px;
+
       &-detail {
         .title {
           line-height: 22px;
@@ -624,6 +617,7 @@ onMounted(() => {
           opacity: 0.5;
           margin-bottom: 10px;
         }
+
         .item {
           border-radius: 5px;
           background: rgba(255, 255, 255, 0.5);
@@ -632,6 +626,7 @@ onMounted(() => {
           padding: 12px 10px;
           display: flex;
           margin-bottom: 10px;
+
           &-type {
             background: linear-gradient(113.95deg, #f4e2ce 1.2%, #debb9b 77.63%);
             width: 30px;
@@ -644,25 +639,31 @@ onMounted(() => {
             color: #000;
             text-align: center;
           }
+
           &-detail {
             flex: 1;
+
             .item-info {
               padding: 0;
               font-size: 14px;
               font-weight: 700;
               color: #000;
+
               &-type {
                 line-height: 15px;
               }
+
               &-title {
                 font-weight: 400;
                 opacity: 0.8;
                 font-size: 11px;
               }
+
               &-amount {
                 color: #9e7b5a;
               }
             }
+
             &-remark {
               opacity: 0.3;
               line-height: 15px;
@@ -671,6 +672,7 @@ onMounted(() => {
           }
         }
       }
+
       &-not-text {
         opacity: 0.4;
         color: #353535;
@@ -682,12 +684,15 @@ onMounted(() => {
     }
   }
 }
+
 .rights-card {
   margin: 10px 15px 0px;
-  background: #fff8f3;
+  background: rgb(255, 248, 243, 0.8);
   border-radius: 5px;
-  box-shadow: 0px 5px 18.9px 2px #0000000d;
   padding: 15px 20px;
+  box-shadow: 0px 5px 18.9px 2px #0000000D;
+
+
   .title {
     height: 25px;
     line-height: 25px;
@@ -699,24 +704,29 @@ onMounted(() => {
     padding-left: 5px;
     padding-right: 12px;
   }
+
   .list {
     display: flex;
     flex-wrap: wrap;
+
     .item {
       width: 50%;
       margin-top: 15px;
+
       .item-count {
         font-size: 20px;
         color: #353535;
         font-weight: 700;
         line-height: 23px;
       }
+
       .item-title {
         line-height: 23px;
         color: #987356;
         font-size: 11px;
         display: flex;
         align-items: center;
+
         .item-title-button {
           padding: 0 27rpx;
           height: 54rpx;
@@ -730,6 +740,7 @@ onMounted(() => {
           margin-left: 40rpx;
           display: flex;
           align-items: center;
+
           .button-icon {
             display: block;
             width: 24rpx;
@@ -740,6 +751,7 @@ onMounted(() => {
         }
       }
     }
+
     .star-item {
       width: 100%;
     }

package/src/balance/components/BalanceCard.vue

@@ -5,28 +5,23 @@
         <div class="card-row-left">
           <div class="bean-box">
             <div class="bean-icon-box">
-              <img
-                class="bean-icon"
-                src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-bean.png"
-              />
+              <img class="bean-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-bean.png" />
             </div>
             <span class="baan-name">云豆</span>
           </div>
-          <div class="bean-nums number">{{ balance.total || 0 }}</div>
+          <div class="bean-nums number">{{ formatAmount(balance.total || 0) }}</div>
         </div>
         <div class="card-row-right">
           <div class="account-info-entry" @click="gotoDetail">
             <div class="account-info-name">账户明细</div>
             <div class="account-info-icon">
-              <img
-                class="icon"
-                src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-to.png"
-              />
+              <img class="icon"
+                src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1IDI3LjVDMjEuOTAzNiAyNy41IDI3LjUgMjEuOTAzNiAyNy41IDE1QzI3LjUgOC4wOTY0NCAyMS45MDM2IDIuNSAxNSAyLjVDOC4wOTY0NCAyLjUgMi41IDguMDk2NDQgMi41IDE1QzIuNSAyMS45MDM2IDguMDk2NDQgMjcuNSAxNSAyNy41WiIgZmlsbD0iIzM1MzUzNSIgc3Ryb2tlPSIjMzUzNTM1IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTEgMTUuMTU2MkgxOS4zMTI1IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuODQ3MjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTUuMTU2NyAxMUwxOS4zMTMgMTUuMTU2MkwxNS4xNTY3IDE5LjMxMjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS44NDcyMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=" />
             </div>
           </div>
         </div>
       </div>
-      <div class="line"></div>
+      <!-- <div class="line"></div>
       <div class="card-row">
         <div class="card-row-left desc">权益使用时自动扣减云豆</div>
         <div class="card-row-right">
@@ -38,7 +33,7 @@
             />
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -48,6 +43,7 @@ import { ref } from 'vue'
 import { endpoints, useHttp } from '../api'
 import { Balance } from '../types'
 import { useDidShow } from '@tarojs/taro'
+import { useAmount } from '../../shared/composables/useAmount'
 
 type BalanceCardProps = {
   app: string
@@ -56,6 +52,7 @@ const props = withDefaults(defineProps<BalanceCardProps>(), {
   app: '',
 })
 
+const { formatAmount } = useAmount()
 const balance = ref<Balance>({
   total: 0,
   privileges: [],
@@ -104,24 +101,29 @@ defineExpose({
 <style lang="scss">
 .account-card {
   .card {
-    background: #2f2f2f;
+    background: linear-gradient(90deg, #FFEBC1 0%, #FFB875 100%);
     border-radius: 10px;
-    padding: 13px 20px;
+    padding: 14px 20px;
     margin: 0;
+
     .card-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
+
       .card-row-left {
         display: flex;
         flex-direction: column;
+
         .bean-box {
           display: flex;
           align-items: center;
+
           .bean-icon-box {
             width: 20px;
             height: 20px;
             margin-right: 8px;
+
             .bean-icon {
               display: block;
               font-size: 0;
@@ -129,32 +131,36 @@ defineExpose({
               height: 100%;
             }
           }
+
           .baan-name {
-            color: #f3d59d;
-            font-weight: 600;
-            font-size: 11px;
+            color: #375264;
+            font-size: 16px;
           }
         }
+
         .bean-nums {
-          color: #fff;
-          line-height: 22px;
-          font-weight: 500;
-          font-size: 16px;
+          color: #353535;
+          line-height: 25px;
+          font-weight: bold;
+          font-size: 20px;
           margin-top: 3px;
         }
       }
+
       .desc {
         font-size: 10px;
         color: #ccc;
         line-height: 14px;
       }
     }
+
     .line {
       margin: 6px 0px 8px 0px;
       height: 0.5px;
       background: rgb(195, 195, 195);
       opacity: 0.2;
     }
+
     .card-row-right {
       .pay {
         padding: 0 8px;
@@ -165,6 +171,7 @@ defineExpose({
         font-size: 12px;
         display: flex;
         align-items: center;
+
         .pay-icon {
           display: block;
           font-size: 0;
@@ -173,6 +180,7 @@ defineExpose({
           margin-left: 6px;
         }
       }
+
       .account-info-entry {
         display: flex;
         align-items: center;
@@ -180,17 +188,19 @@ defineExpose({
         height: 28px;
         line-height: 28px;
         border-radius: 14px;
-        background: linear-gradient(90deg, #ffebc1 0%, #ffd7a7 52.29%, #ffb875 100%);
+        background: rgba(255, 255, 255, 0.8);
+
         .account-info-name {
-          color: #975213;
+          color: #353535;
           font-size: 13px;
           font-weight: 500;
           margin-right: 8px;
         }
+
         .account-info-icon {
-          width: 14px;
-          height: 14px;
-          border-radius: 7px;
+          width: 15px;
+          height: 15px;
+
           .icon {
             display: block;
             font-size: 0;