@uxda/appkit 4.0.0 → 4.0.3

package/src/balance/components/DateFilter.vue

@@ -1,236 +1,226 @@
-<template>
-  <div class="consumption-date-filter">
-    <div class="date-filter-header">日期选择</div>
-    <div class="content">
-      <div class="title">自定义</div>
-      <div class="time">
-        <div
-          class="item"
-          :class="focused === 'from' ? 'current' : ''"
-          @click="switchDateInput('from')">
-          {{ formatDate(result.from) }}
-        </div>
-        <div class="line">-</div>
-        <div
-          class="item"
-          :class="focused === 'to' ? 'current' : ''"
-          @click="switchDateInput('to')">
-          {{ formatDate(result.to) }}
-        </div>
-      </div>
-    </div>
-    <div class="buttons spa-between">
-      <div class="btn" @click="reset">重置</div>
-      <div class="btn confirm" @click="onOkClick">确定</div>
-    </div>
-    <div class="bottom"></div>
-  </div>
-  <nut-datepicker
-    v-model="focusedDate"
-    v-model:visible="datePickerOpen"
-    :min-date="minDate"
-    :max-date="maxDate"
-    :is-show-chinese="false"
-    :three-dimensional="false"
-    @confirm="onDatePickerComplete"></nut-datepicker>
-</template>
-
-<script lang="ts" setup>
-import { reactive, ref, watch } from 'vue'
-
-type DateFilterProps = {
-  from: string,
-  to: string,
-}
-
-const props = defineProps<DateFilterProps>()
-
-const emit = defineEmits(['complete', 'reset'])
-
-watch(
-  () => `${props.from}${props.to}`,
-  () => {
-    result.from = props.from
-    result.to = props.to
-  }
-)
-
-/**
- * 日期范围结果
- */
-const result = reactive<DateFilterProps>({...props})
-
-/**
- * 目前激活的日期输入框
- */
-const focused = ref<string>('from')
-const focusedDate = ref<any>(props.from)
-
-const minDate = ref<any>()
-const maxDate = ref<Date>(new Date())
-const datePickerOpen = ref<boolean>(false)
-
-/**
- * 日期重置
- */
-function reset() {
-  emit('reset')
-}
-
-/**
- * 确认，提交新时间
- */
-function onOkClick() {
-  emit('complete', result)
-}
-
-function formatDate (date: string) {
-  const [year, month, day] = date.split('-')
-  return year + '年' + month + '月' + day + '日'
-}
-
-function onDatePickerComplete ({ selectedValue, selectedOptions }) {
-  let time = selectedOptions.map((val: any) => val.text).join('-')
-  if (focused.value === 'from') {
-    // 如果选择的时间比结束时间大，结束时间改为开始时间
-    result.from = new Date(time) > new Date(result.to)
-      ? result.to
-      : time
-  } else {
-    result.to = time
-  }
-}
-
-/**
- * 切换时间逻辑：初始化时有时间，默认聚焦开始时间
- * 当选择开始时间大于结束时间，结束时间改为开始时间
- * 时间选择器都要小于当前时间，结束时间的时间选择器要以开始时间为最小值，
- */
- function switchDateInput (shift: string) {
-  // 要设置一下结束时间的起始值 开始时间往前倒5年
-  if (shift === 'from') {
-    let time = result.from
-      .split('-')
-      .map(Number)
-    minDate.value = new Date(time[0] - 5, 1, 1)
-  } else {
-    let time = result.from
-      .split('-')
-      .map(Number)
-    minDate.value = new Date(time[0], time[1] - 1, time[2])
-  }
-  focusedDate.value = new Date(result[shift])
-  focused.value = shift
-  datePickerOpen.value = true
-}
-
-</script>
-<style lang="scss">
-.consumption-date-filter {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  .date-filter-header {
-    text-align: center;
-    height: 44px;
-    line-height: 44px;
-    color: #353535;
-    font-size: 17px;
-    background-color: #f5f5f5;
-  }
-  .content {
-    flex: 1;
-    margin: 15px;
-    overflow-y: scroll;
-    color: #353535;
-    font-size: 13px;
-    .title {
-      opacity: 0.6;
-      line-height: 18px;
-    }
-    .info {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      grid-gap: 10px;
-      margin: 10px 0;
-      .item {
-        height: 30px;
-        line-height: 30px;
-        border: 1px solid #ccc;
-        border-radius: 6px;
-        text-align: center;
-      }
-      .current {
-        border: 1px solid;
-        border-image-source: linear-gradient(
-          180deg,
-          rgba(239, 208, 130, 0.8) 0%,
-          rgba(255, 185, 120, 0.8) 100%
-        );
-        background: linear-gradient(
-            180deg,
-            rgba(239, 208, 130, 0.8) 0%,
-            rgba(255, 185, 120, 0.8) 100%
-          ),
-          linear-gradient(180deg, #fff7e3 0%, #fefde6 100%);
-      }
-    }
-  }
-  .buttons {
-    margin: 0 15px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .btn {
-      flex: 1;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      border: 1px solid #ccc;
-      box-sizing: border-box;
-      color: #666;
-      font-size: 16px;
-      border-radius: 6px;
-    }
-    .confirm {
-      margin-left: 11px;
-      color: #000;
-      border: none;
-      background: linear-gradient(
-        90deg,
-        #ffebc1 0%,
-        #ffd7a7 52.29%,
-        #ffb875 100%
-      );
-    }
-  }
-  .time {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 10px 0 30px 0;
-    .line {
-      margin: 0 8px;
-    }
-    .item {
-      height: 30px;
-      line-height: 30px;
-      padding: 0 15px;
-      font-size: 13px;
-      color: #353535;
-      border: 1px solid transparent;
-      box-sizing: border-box;
-      background: rgba(#f5f5f5, 0.8);
-      border-radius: 6px;
-    }
-    .current {
-      border: 1px solid #353535;
-    }
-  }
-  .bottom {
-    height: 32px;
-    background: #fff;
-  }
-}
-</style>
+<template>
+  <div class="consumption-date-filter">
+    <div class="date-filter-header">日期选择</div>
+    <div class="content">
+      <div class="title">自定义</div>
+      <div class="time">
+        <div
+          class="item"
+          :class="focused === 'from' ? 'current' : ''"
+          @click="switchDateInput('from')"
+        >
+          {{ formatDate(result.from) }}
+        </div>
+        <div class="line">-</div>
+        <div class="item" :class="focused === 'to' ? 'current' : ''" @click="switchDateInput('to')">
+          {{ formatDate(result.to) }}
+        </div>
+      </div>
+    </div>
+    <div class="buttons spa-between">
+      <div class="btn" @click="reset">重置</div>
+      <div class="btn confirm" @click="onOkClick">确定</div>
+    </div>
+    <div class="bottom"></div>
+  </div>
+  <nut-popup v-model:visible="datePickerOpen" position="bottom">
+    <nut-date-picker
+      v-model="focusedDate"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :is-show-chinese="false"
+      :three-dimensional="false"
+      @cancel="datePickerOpen = false"
+      @confirm="onDatePickerComplete"
+    ></nut-date-picker>
+  </nut-popup>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, watch } from 'vue'
+
+type DateFilterProps = {
+  from: string
+  to: string
+}
+
+const props = defineProps<DateFilterProps>()
+
+const emit = defineEmits(['complete', 'reset'])
+
+watch(
+  () => `${props.from}${props.to}`,
+  () => {
+    result.from = props.from
+    result.to = props.to
+  }
+)
+
+/**
+ * 日期范围结果
+ */
+const result = reactive<DateFilterProps>({ ...props })
+
+/**
+ * 目前激活的日期输入框
+ */
+const focused = ref<string>('from')
+const focusedDate = ref<any>(props.from)
+
+const minDate = ref<any>()
+const maxDate = ref<Date>(new Date())
+const datePickerOpen = ref<boolean>(false)
+
+/**
+ * 日期重置
+ */
+function reset() {
+  emit('reset')
+}
+
+/**
+ * 确认，提交新时间
+ */
+function onOkClick() {
+  emit('complete', result)
+}
+
+function formatDate(date: string) {
+  const [year, month, day] = date.split('-')
+  return year + '年' + month + '月' + day + '日'
+}
+
+function onDatePickerComplete({ selectedValue, selectedOptions }) {
+  let time = selectedOptions.map((val: any) => val.text).join('-')
+  if (focused.value === 'from') {
+    // 如果选择的时间比结束时间大，结束时间改为开始时间
+    result.from = new Date(time) > new Date(result.to) ? result.to : time
+  } else {
+    result.to = time
+  }
+  datePickerOpen.value = false
+}
+
+/**
+ * 切换时间逻辑：初始化时有时间，默认聚焦开始时间
+ * 当选择开始时间大于结束时间，结束时间改为开始时间
+ * 时间选择器都要小于当前时间，结束时间的时间选择器要以开始时间为最小值，
+ */
+function switchDateInput(shift: string) {
+  // 要设置一下结束时间的起始值 开始时间往前倒5年
+  if (shift === 'from') {
+    let time = result.from.split('-').map(Number)
+    minDate.value = new Date(time[0] - 5, 1, 1)
+  } else {
+    let time = result.from.split('-').map(Number)
+    minDate.value = new Date(time[0], time[1] - 1, time[2])
+  }
+  focusedDate.value = new Date(result[shift])
+  focused.value = shift
+  datePickerOpen.value = true
+}
+</script>
+<style lang="scss">
+.consumption-date-filter {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  .date-filter-header {
+    text-align: center;
+    height: 44px;
+    line-height: 44px;
+    color: #353535;
+    font-size: 17px;
+    background-color: #f5f5f5;
+  }
+  .content {
+    flex: 1;
+    margin: 15px;
+    overflow-y: scroll;
+    color: #353535;
+    font-size: 13px;
+    .title {
+      opacity: 0.6;
+      line-height: 18px;
+    }
+    .info {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-gap: 10px;
+      margin: 10px 0;
+      .item {
+        height: 30px;
+        line-height: 30px;
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        text-align: center;
+      }
+      .current {
+        border: 1px solid;
+        border-image-source: linear-gradient(
+          180deg,
+          rgba(239, 208, 130, 0.8) 0%,
+          rgba(255, 185, 120, 0.8) 100%
+        );
+        background: linear-gradient(
+            180deg,
+            rgba(239, 208, 130, 0.8) 0%,
+            rgba(255, 185, 120, 0.8) 100%
+          ),
+          linear-gradient(180deg, #fff7e3 0%, #fefde6 100%);
+      }
+    }
+  }
+  .buttons {
+    margin: 0 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .btn {
+      flex: 1;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border: 1px solid #ccc;
+      box-sizing: border-box;
+      color: #666;
+      font-size: 16px;
+      border-radius: 6px;
+    }
+    .confirm {
+      margin-left: 11px;
+      color: #000;
+      border: none;
+      background: linear-gradient(90deg, #ffebc1 0%, #ffd7a7 52.29%, #ffb875 100%);
+    }
+  }
+  .time {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 10px 0 30px 0;
+    .line {
+      margin: 0 8px;
+    }
+    .item {
+      height: 30px;
+      line-height: 30px;
+      padding: 0 15px;
+      font-size: 13px;
+      color: #353535;
+      border: 1px solid transparent;
+      box-sizing: border-box;
+      background: rgba(#f5f5f5, 0.8);
+      border-radius: 6px;
+    }
+    .current {
+      border: 1px solid #353535;
+    }
+  }
+  .bottom {
+    height: 32px;
+    background: #fff;
+  }
+}
+</style>

package/src/balance/components/SecondBalance.vue

@@ -1,71 +1,71 @@
-<template>
-  <div class="second-balance">
-    <page-header title="权益余额" />
-    <div class="positions" v-if="data.length">
-      <div class="position" v-for="(item, index) in data" :key="index">
-        <div class="icon"></div>
-        <label class="title">{{ item.title }}</label>
-        <label class="number amount">{{ item.count }}{{ item.unit }}</label>
-      </div>
-    </div>
-    <empty-view v-else />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Privilege } from "../types";
-import EmptyView from "../../shared/components/EmptyView.vue";
-
-// 权益余额
-// 由账户页 AccountView 使用 AppDrawer 弹出
-type SecondBalanceProps = {
-  data: Privilege[];
-};
-
-withDefaults(defineProps<SecondBalanceProps>(), {
-  data: () => [],
-});
-</script>
-
-<style lang="scss">
-.second-balance {
-  width: 100vw;
-  .positions {
-    padding: 15px;
-    .position {
-      border-radius: 5px;
-      background: #f7f8fa;
-      height: 54px;
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      margin-bottom: 10px;
-      padding: 0 10px;
-      gap: 10px;
-      .icon {
-        width: 30px;
-        height: 30px;
-        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjIyODUgMzcuMjY0M0wxMy43OTk5IDQyLjc1QzEzLjYyODUgNDMuMDkyOSAxMy43OTk5IDQzLjUyMTQgMTQuMjI4NSA0My41MjE0TDE4Ljg1NzEgNDMuNzc4NkMxOS4wMjg1IDQzLjc3ODYgMTkuMTE0MiA0My44NjQzIDE5LjE5OTkgNDMuOTVMMjIuMDI4NSA0Ny43MjE0QzIyLjI4NTcgNDcuOTc4NiAyMi43MTQyIDQ3Ljk3ODYgMjIuODg1NyA0Ny43MjE0TDI2LjE0MjggNDIuMzIxNEMyNi4zMTQyIDQyLjA2NDMgMjYuMjI4NSA0MS44MDcxIDI1Ljk3MTQgNDEuNjM1N0wxNy45MTQyIDM3LjA5MjlDMTcuNjU3MSAzNy4wMDcxIDE3LjM5OTkgMzcuMDkyOSAxNy4yMjg1IDM3LjI2NDNaTTQyLjc3MTQgMzcuMTc4Nkw0Ni4xOTk5IDQyLjY2NDNDNDYuMzcxNCA0My4wMDcxIDQ2LjE5OTkgNDMuNDM1NyA0NS43NzE0IDQzLjQzNTdMNDEuMTQyOCA0My42OTI5QzQwLjk3MTQgNDMuNjkyOSA0MC44ODU3IDQzLjc3ODYgNDAuNzk5OSA0My44NjQzTDM3Ljk3MTQgNDcuNjM1N0MzNy43MTQyIDQ3Ljg5MjkgMzcuMjg1NyA0Ny44OTI5IDM3LjExNDIgNDcuNjM1N0wzMy44NTcxIDQyLjIzNTdDMzMuNjg1NyA0MS45Nzg2IDMzLjc3MTQgNDEuNzIxNCAzNC4wMjg1IDQxLjU1TDQyLjA4NTcgMzcuMDA3MUM0Mi4zNDI4IDM2LjgzNTcgNDIuNTk5OSAzNi45MjE0IDQyLjc3MTQgMzcuMTc4NlpNNDIuMDg1NyAxOC40OTI5TDMxLjE5OTkgMTIuMzIxNEMzMC40Mjg1IDExLjg5MjkgMjkuMzk5OSAxMS44OTI5IDI4LjYyODUgMTIuMzIxNEwxNy44Mjg1IDE4LjQwNzFDMTcuMDU3MSAxOC44MzU3IDE2LjU0MjggMTkuNjkyOSAxNi41NDI4IDIwLjU1VjMyLjgwNzFDMTYuNTQyOCAzMy42NjQzIDE3LjA1NzEgMzQuNTIxNCAxNy44Mjg1IDM0Ljk1TDI4LjcxNDIgNDEuMTIxNEMyOS40ODU3IDQxLjU1IDMwLjUxNDIgNDEuNTUgMzEuMjg1NyA0MS4xMjE0TDQyLjA4NTcgMzUuMTIxNEM0Mi44NTcxIDM0LjY5MjkgNDMuMzcxNCAzMy44MzU3IDQzLjM3MTQgMzIuOTc4NlYyMC43MjE0QzQzLjM3MTQgMTkuNzc4NiA0Mi44NTcxIDE4LjkyMTQgNDIuMDg1NyAxOC40OTI5Wk0zNi45NDI4IDIzLjcyMTRMMzAuNTk5OSAzMi44OTI5QzMwLjQyODUgMzMuMTUgMzAuMDg1NyAzMy4zMjE0IDI5Ljc0MjggMzMuMzIxNEMyOS4zOTk5IDMzLjMyMTQgMjkuMDU3MSAzMy4xNSAyOC44ODU3IDMyLjg5MjlMMjIuNzk5OSAyMy43MjE0QzIyLjQ1NzEgMjMuMjkyOSAyMi42Mjg1IDIyLjYwNzEgMjMuMDU3MSAyMi4zNUMyMy40ODU3IDIyLjA5MjkgMjQuMTcxNCAyMi4xNzg2IDI0LjQyODUgMjIuNjA3MUwyOS42NTcxIDMwLjQ5MjlMMzUuMTQyOCAyMi41MjE0QzM1LjQ4NTcgMjIuMDkyOSAzNi4wODU3IDIxLjkyMTQgMzYuNTE0MiAyMi4yNjQzQzM3LjE5OTkgMjIuNjkyOSAzNy4yODU3IDIzLjI5MjkgMzYuOTQyOCAyMy43MjE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="),
-          linear-gradient(100deg, #f4e2ce -67.2%, #debb9b 98.15%);
-        background-repeat: no-repeat;
-        border-radius: 15px;
-        background-size: 30px;
-        flex-basis: 30px;
-        flex-grow: 0;
-      }
-      .title {
-        flex-grow: 1;
-        color: #353535;
-        font-size: 14px;
-        font-weight: 500;
-      }
-      .amount {
-        flex-grow: 0;
-        color: #9e7b5a;
-        font-size: 14px;
-        font-weight: 700;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="second-balance">
+    <page-header title="权益余额" />
+    <div class="positions" v-if="data.length">
+      <div class="position" v-for="(item, index) in data" :key="index">
+        <div class="icon"></div>
+        <label class="title">{{ item.title }}</label>
+        <label class="number amount">{{ item.count }}{{ item.unit }}</label>
+      </div>
+    </div>
+    <empty-view v-else />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Privilege } from "../types";
+import EmptyView from "../../shared/components/EmptyView.vue";
+
+// 权益余额
+// 由账户页 AccountView 使用 AppDrawer 弹出
+type SecondBalanceProps = {
+  data: Privilege[];
+};
+
+withDefaults(defineProps<SecondBalanceProps>(), {
+  data: () => [],
+});
+</script>
+
+<style lang="scss">
+.second-balance {
+  width: 100vw;
+  .positions {
+    padding: 15px;
+    .position {
+      border-radius: 5px;
+      background: #f7f8fa;
+      height: 54px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      margin-bottom: 10px;
+      padding: 0 10px;
+      gap: 10px;
+      .icon {
+        width: 30px;
+        height: 30px;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjIyODUgMzcuMjY0M0wxMy43OTk5IDQyLjc1QzEzLjYyODUgNDMuMDkyOSAxMy43OTk5IDQzLjUyMTQgMTQuMjI4NSA0My41MjE0TDE4Ljg1NzEgNDMuNzc4NkMxOS4wMjg1IDQzLjc3ODYgMTkuMTE0MiA0My44NjQzIDE5LjE5OTkgNDMuOTVMMjIuMDI4NSA0Ny43MjE0QzIyLjI4NTcgNDcuOTc4NiAyMi43MTQyIDQ3Ljk3ODYgMjIuODg1NyA0Ny43MjE0TDI2LjE0MjggNDIuMzIxNEMyNi4zMTQyIDQyLjA2NDMgMjYuMjI4NSA0MS44MDcxIDI1Ljk3MTQgNDEuNjM1N0wxNy45MTQyIDM3LjA5MjlDMTcuNjU3MSAzNy4wMDcxIDE3LjM5OTkgMzcuMDkyOSAxNy4yMjg1IDM3LjI2NDNaTTQyLjc3MTQgMzcuMTc4Nkw0Ni4xOTk5IDQyLjY2NDNDNDYuMzcxNCA0My4wMDcxIDQ2LjE5OTkgNDMuNDM1NyA0NS43NzE0IDQzLjQzNTdMNDEuMTQyOCA0My42OTI5QzQwLjk3MTQgNDMuNjkyOSA0MC44ODU3IDQzLjc3ODYgNDAuNzk5OSA0My44NjQzTDM3Ljk3MTQgNDcuNjM1N0MzNy43MTQyIDQ3Ljg5MjkgMzcuMjg1NyA0Ny44OTI5IDM3LjExNDIgNDcuNjM1N0wzMy44NTcxIDQyLjIzNTdDMzMuNjg1NyA0MS45Nzg2IDMzLjc3MTQgNDEuNzIxNCAzNC4wMjg1IDQxLjU1TDQyLjA4NTcgMzcuMDA3MUM0Mi4zNDI4IDM2LjgzNTcgNDIuNTk5OSAzNi45MjE0IDQyLjc3MTQgMzcuMTc4NlpNNDIuMDg1NyAxOC40OTI5TDMxLjE5OTkgMTIuMzIxNEMzMC40Mjg1IDExLjg5MjkgMjkuMzk5OSAxMS44OTI5IDI4LjYyODUgMTIuMzIxNEwxNy44Mjg1IDE4LjQwNzFDMTcuMDU3MSAxOC44MzU3IDE2LjU0MjggMTkuNjkyOSAxNi41NDI4IDIwLjU1VjMyLjgwNzFDMTYuNTQyOCAzMy42NjQzIDE3LjA1NzEgMzQuNTIxNCAxNy44Mjg1IDM0Ljk1TDI4LjcxNDIgNDEuMTIxNEMyOS40ODU3IDQxLjU1IDMwLjUxNDIgNDEuNTUgMzEuMjg1NyA0MS4xMjE0TDQyLjA4NTcgMzUuMTIxNEM0Mi44NTcxIDM0LjY5MjkgNDMuMzcxNCAzMy44MzU3IDQzLjM3MTQgMzIuOTc4NlYyMC43MjE0QzQzLjM3MTQgMTkuNzc4NiA0Mi44NTcxIDE4LjkyMTQgNDIuMDg1NyAxOC40OTI5Wk0zNi45NDI4IDIzLjcyMTRMMzAuNTk5OSAzMi44OTI5QzMwLjQyODUgMzMuMTUgMzAuMDg1NyAzMy4zMjE0IDI5Ljc0MjggMzMuMzIxNEMyOS4zOTk5IDMzLjMyMTQgMjkuMDU3MSAzMy4xNSAyOC44ODU3IDMyLjg5MjlMMjIuNzk5OSAyMy43MjE0QzIyLjQ1NzEgMjMuMjkyOSAyMi42Mjg1IDIyLjYwNzEgMjMuMDU3MSAyMi4zNUMyMy40ODU3IDIyLjA5MjkgMjQuMTcxNCAyMi4xNzg2IDI0LjQyODUgMjIuNjA3MUwyOS42NTcxIDMwLjQ5MjlMMzUuMTQyOCAyMi41MjE0QzM1LjQ4NTcgMjIuMDkyOSAzNi4wODU3IDIxLjkyMTQgMzYuNTE0MiAyMi4yNjQzQzM3LjE5OTkgMjIuNjkyOSAzNy4yODU3IDIzLjI5MjkgMzYuOTQyOCAyMy43MjE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="),
+          linear-gradient(100deg, #f4e2ce -67.2%, #debb9b 98.15%);
+        background-repeat: no-repeat;
+        border-radius: 15px;
+        background-size: 30px;
+        flex-basis: 30px;
+        flex-grow: 0;
+      }
+      .title {
+        flex-grow: 1;
+        color: #353535;
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .amount {
+        flex-grow: 0;
+        color: #9e7b5a;
+        font-size: 14px;
+        font-weight: 700;
+      }
+    }
+  }
+}
+</style>