From 2ff7276688aa487ca879abb894edb4716d27c81b Mon Sep 17 00:00:00 2001
From: Zhang Minghan <zmh13054618081@dingtalk.com>
Date: Wed, 30 Aug 2023 18:12:30 +0800
Subject: [PATCH] update payment action

---
 app/src/components/icons/credit.vue |  3 +++
 app/src/views/SettingsView.vue      | 23 +++++++++++++++++++----
 2 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 app/src/components/icons/credit.vue

diff --git a/app/src/components/icons/credit.vue b/app/src/components/icons/credit.vue
new file mode 100644
index 0000000..d5bb00c
--- /dev/null
+++ b/app/src/components/icons/credit.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect x="48" y="96" width="416" height="320" rx="56" ry="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="60" d="M48 192h416M128 300h48v20h-48z"/></svg>
+</template>
diff --git a/app/src/views/SettingsView.vue b/app/src/views/SettingsView.vue
index a363812..6db1a44 100644
--- a/app/src/views/SettingsView.vue
+++ b/app/src/views/SettingsView.vue
@@ -123,6 +123,7 @@ function payment() {
           <wallet />
           <span class="text">余额</span>
           <span class="value money">{{ info.balance }}</span>
+          <a href="https://deeptrain.lightxi.com/home/wallet" target="_blank" class="action">充值</a>
         </div>
         <div class="row">
           <chart />
@@ -157,10 +158,7 @@ function payment() {
             <input type="number" v-model="form.count" class="buy-input" />
             <p class="pay-info">{{ count(form.count, form.type) }}</p>
           </div>
-          <div class="buy-action" @click="payment">
-            <buy />
-            购买
-          </div>
+          <div class="buy-action" @click="payment"><buy />购买</div>
         </div>
         <div class="split" />
 
@@ -193,6 +191,7 @@ function payment() {
   height: 100%;
   margin: 0;
   padding: 0;
+  overflow: hidden;
 }
 
 .wrapper {
@@ -217,6 +216,8 @@ function payment() {
   flex-grow: 1;
   padding: 24px 36px;
   height: max-content;
+  overflow-x: hidden;
+  touch-action: pan-y;
   overflow-y: auto;
   scrollbar-width: thin;
 }
@@ -525,6 +526,19 @@ function payment() {
   color: #eee;
 }
 
+.action {
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: .5s;
+  cursor: pointer;
+  color: #fff;
+  margin-right: -8px;
+  margin-top: -4px;
+  background: rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
+}
+
 @media (max-width: 460px) {
   .body {
     width: calc(100% - 32px);
@@ -532,6 +546,7 @@ function payment() {
   }
 
   .row {
+    width: calc(100% - 42px);
     transform: translateX(-8px);
   }