@uxda/appkit 4.3.8 → 4.3.12

package/src/payment/components/RightsPicker.vue

@@ -1,106 +1,106 @@
-<template>
-  <nut-grid
-    class="trade-picker"
-    :column-num="3"
-    :gutter="10"
-    :border="false">
-    <nut-grid-item
-      class="tile"
-      v-for="(amount, index) in items"
-      :class="{selected: state.selected === index}"
-      @click="() => onGridItemClick(index)"
-      :key="index">
-      <div class="tag">{{ amount.paymentDesc }}</div>
-      <h4 class="token-line number">{{ amount.priceRightNum }}笔</h4>
-      <h5>¥<span class="number">{{ amount.paymentAmount }}</span></h5>
-    </nut-grid-item>
-  </nut-grid>
-</template>
-
-<script lang="ts" setup>
-import { reactive } from 'vue'
-
-// 充值金额选取
-
-export type Amount = {
-  id: string,
-  paymentAmount: number
-  paymentDesc: string
-  priceRightNum: number
-}
-
-interface AmountPickerProps {
-  items: Amount[],
-  selected?: number
-}
-
-const emit = defineEmits<{
-  (event: 'change', selected: number): void
-}>()
-
-withDefaults(
-  defineProps<AmountPickerProps>(),
-  {
-    items: () => [],
-    selected: () => 0
-  }
-)
-
-const state = reactive({
-  selected: 0
-})
-
-const onGridItemClick = (index: number) => {
-  state.selected = index
-  emit('change', state.selected)
-}
-</script>
-
-<style lang="scss">
-.trade-picker {
-  padding: 14px 0 14px 14px;
-  .nut-grid-item__content {
-    border: solid 2px transparent;
-    background: linear-gradient(#f5f5f5, #f5f5f5) padding-box,
-      linear-gradient(to bottom, #cccccc88, #cccccc88) border-box;
-    border-radius: 5px;
-  }
-  .tile {
-    height: 80px;
-    position: relative;
-    overflow: hidden;
-    &.selected {
-      .nut-grid-item__content {
-        background: linear-gradient(#FFF7E3, #FEFDE6) padding-box,
-          linear-gradient(to bottom, #efd082, #ffb877) border-box;
-      }
-    }
-    .tag{
-      position: absolute;
-      left: 0;
-      top: 0;
-      background: linear-gradient(90deg, #FD6701 0%, #FF9349 100%);
-      color: #fff;
-      font-size: 10px;
-      padding:0 10px;
-      line-height: 17px;
-      height: 17px;;
-      border-radius: 10px 100px 100px 0px;
-    }
-  }
-  h4.token-line {
-    color: #FD6701;
-    font-weight: 600;
-    line-height: 25px;
-    font-size: 18px;
-  }
-  h5 {
-    line-height: 18px;
-    color: #353535;
-    font-weight: 600;
-    opacity: 0.6;
-    margin-top: 4px;
-    font-size: 12px;
-  }
-}
+<template>
+  <nut-grid
+    class="trade-picker"
+    :column-num="3"
+    :gutter="10"
+    :border="false">
+    <nut-grid-item
+      class="tile"
+      v-for="(amount, index) in items"
+      :class="{selected: state.selected === index}"
+      @click="() => onGridItemClick(index)"
+      :key="index">
+      <div class="tag">{{ amount.paymentDesc }}</div>
+      <h4 class="token-line number">{{ amount.priceRightNum }}笔</h4>
+      <h5>¥<span class="number">{{ amount.paymentAmount }}</span></h5>
+    </nut-grid-item>
+  </nut-grid>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+// 充值金额选取
+
+export type Amount = {
+  id: string,
+  paymentAmount: number
+  paymentDesc: string
+  priceRightNum: number
+}
+
+interface AmountPickerProps {
+  items: Amount[],
+  selected?: number
+}
+
+const emit = defineEmits<{
+  (event: 'change', selected: number): void
+}>()
+
+withDefaults(
+  defineProps<AmountPickerProps>(),
+  {
+    items: () => [],
+    selected: () => 0
+  }
+)
+
+const state = reactive({
+  selected: 0
+})
+
+const onGridItemClick = (index: number) => {
+  state.selected = index
+  emit('change', state.selected)
+}
+</script>
+
+<style lang="scss">
+.trade-picker {
+  padding: 14px 0 14px 14px;
+  .nut-grid-item__content {
+    border: solid 2px transparent;
+    background: linear-gradient(#f5f5f5, #f5f5f5) padding-box,
+      linear-gradient(to bottom, #cccccc88, #cccccc88) border-box;
+    border-radius: 5px;
+  }
+  .tile {
+    height: 80px;
+    position: relative;
+    overflow: hidden;
+    &.selected {
+      .nut-grid-item__content {
+        background: linear-gradient(#FFF7E3, #FEFDE6) padding-box,
+          linear-gradient(to bottom, #efd082, #ffb877) border-box;
+      }
+    }
+    .tag{
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: linear-gradient(90deg, #FD6701 0%, #FF9349 100%);
+      color: #fff;
+      font-size: 10px;
+      padding:0 10px;
+      line-height: 17px;
+      height: 17px;;
+      border-radius: 10px 100px 100px 0px;
+    }
+  }
+  h4.token-line {
+    color: #FD6701;
+    font-weight: 600;
+    line-height: 25px;
+    font-size: 18px;
+  }
+  h5 {
+    line-height: 18px;
+    color: #353535;
+    font-weight: 600;
+    opacity: 0.6;
+    margin-top: 4px;
+    font-size: 12px;
+  }
+}
 </style>