ui修改

src/views/BankCard.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="container">
+    <!-- Add Toast component -->
+    <Toast ref="toast" />
     <!-- 导航栏 -->
     <div class="nav-bar">
       <div class="back-btn" @click="$router.back()">
@@ -9,95 +11,67 @@
     </div>
 
     <div class="main">
-      <div class="income-card funs">
-        <div class="u-field u-border-bottom">
-          <div class="u-field-inner u-label-postion-left">
-            <div class="u-label">
-              <span class="u-label-text">开户银行</span>
-            </div>
-            <div class="fild-body">
-              <div class="u-flex-1 u-flex">
-                <input 
-                  type="text" 
-                  class="u-field__input-wrap"
-                  placeholder="输入银行名称"
-                  v-model="formData.banktype"
-                  :disabled="!!bankInfo.status"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
+      <!-- 顶部提示文字 -->
+      <div class="header-text">
+        <div class="sub-text">绑定银行卡</div>
+        <div class="sub-text">为了保证您的账户资金安全</div>
+        <div class="sub-text">请先完成银行卡绑定</div>
       </div>
 
-      <div class="income-card funs">
-        <div class="u-field u-border-bottom">
-          <div class="u-field-inner u-label-postion-left">
-            <div class="u-label">
-              <span class="u-label-text">开户地址</span>
-            </div>
-            <div class="fild-body">
-              <div class="u-flex-1 u-flex">
-                <input 
-                  type="text" 
-                  class="u-field__input-wrap"
-                  placeholder="输入银行开户地址"
-                  v-model="formData.address"
-                  :disabled="!!bankInfo.status"
-                />
-              </div>
-            </div>
-          </div>
+      <div class="form-container">
+        <div class="form-item">
+          <div class="form-label">姓名</div>
+          <input 
+            type="text" 
+            class="form-input"
+            placeholder="输入姓名"
+            v-model="formData.lastname"
+            :disabled="!!bankInfo.status"
+          />
         </div>
-      </div>
 
-      <div class="income-card funs">
-        <div class="u-field u-border-bottom">
-          <div class="u-field-inner u-label-postion-left">
-            <div class="u-label">
-              <span class="u-label-text">卡号姓名</span>
-            </div>
-            <div class="fild-body">
-              <div class="u-flex-1 u-flex">
-                <input 
-                  type="text" 
-                  class="u-field__input-wrap"
-                  placeholder="输入银行卡绑定姓名"
-                  v-model="formData.lastname"
-                  :disabled="!!bankInfo.status"
-                />
-              </div>
-            </div>
-          </div>
+        <div class="form-item">
+          <div class="form-label">银行名称</div>
+          <input 
+            type="text" 
+            class="form-input"
+            placeholder="输入银行名称"
+            v-model="formData.banktype"
+            :disabled="!!bankInfo.status"
+          />
         </div>
-      </div>
 
-      <div class="income-card funs">
-        <div class="u-field u-border-bottom">
-          <div class="u-field-inner u-label-postion-left">
-            <div class="u-label">
-              <span class="u-label-text">银行账号</span>
-            </div>
-            <div class="fild-body">
-              <div class="u-flex-1 u-flex">
-                <input 
-                  type="text" 
-                  class="u-field__input-wrap"
-                  placeholder="输入银行卡账号"
-                  v-model="formData.banknum"
-                  :disabled="!!bankInfo.status"
-                />
-              </div>
-            </div>
-          </div>
+        <div class="form-item">
+          <div class="form-label">开户行</div>
+          <input 
+            type="text" 
+            class="form-input"
+            placeholder="输入银行卡开户行"
+            v-model="formData.address"
+            :disabled="!!bankInfo.status"
+          />
+        </div>
+
+        <div class="form-item">
+          <div class="form-label">银行卡号</div>
+          <input 
+            type="text" 
+            class="form-input"
+            placeholder="输入银行卡号"
+            v-model="formData.banknum"
+            :disabled="!!bankInfo.status"
+          />
         </div>
-      </div>
 
-      <div 
-        class="mt30 h40 lh40 tc white bgBlue radius28 ft14 w90 mauto"
-        @click="handleSubmit"
-      >
-        {{ bankInfo.status ? '已绑定' : '确认绑定' }}
+        <div style="display: flex;justify-content: center;align-items: center;">
+          <button 
+            class="submit-btn"
+            @click="handleSubmit"
+            :disabled="!!bankInfo.status"
+          >
+            {{ bankInfo.status ? '已绑定' : '立即绑定' }}
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -105,9 +79,13 @@
 
 <script>
 import { getBankInfo } from '@/api/profile';
+import Toast from '@/components/Toast.vue';
 
 export default {
   name: 'BankCard',
+  components: {
+    Toast
+  },
   data() {
     return {
       bankInfo: {},
@@ -126,16 +104,25 @@ export default {
     async getBankInfo() {
       try {
         const res = await getBankInfo();
-        this.bankInfo = res.data;
-        if (this.bankInfo.status) {
-          this.formData = {
-            banktype: this.bankInfo.banktype,
-            address: this.bankInfo.address,
-            lastname: this.bankInfo.lastname,
-            banknum: this.bankInfo.banknum
+        if (res && res.data) {
+          this.bankInfo = res.data;
+          if (this.bankInfo && this.bankInfo.status) {
+            this.formData = {
+              banktype: this.bankInfo.banktype || '',
+              address: this.bankInfo.address || '',
+              lastname: this.bankInfo.lastname || '',
+              banknum: this.bankInfo.banknum || ''
+            };
+          }
+        } else {
+          this.bankInfo = {
+            status: false
           };
         }
       } catch (error) {
+        this.bankInfo = {
+          status: false
+        };
         console.error('获取银行卡信息失败:', error);
       }
     },
@@ -143,23 +130,23 @@ export default {
       if (this.bankInfo.status) return;
       
       if (!this.formData.banktype) {
-        alert('请输入开户银行');
+        this.$refs.toast.show('请输入开户银行', 'warning');
         return;
       }
       if (!this.formData.address) {
-        alert('请输入开户地址');
+        this.$refs.toast.show('请输入开户地址', 'warning');
         return;
       }
       if (!this.formData.lastname) {
-        alert('请输入卡号姓名');
+        this.$refs.toast.show('请输入卡号姓名', 'warning');
         return;
       }
       if (!this.formData.banknum) {
-        alert('请输入银行账号');
+        this.$refs.toast.show('请输入银行账号', 'warning');
         return;
       }
       // TODO: 实现银行卡绑定逻辑
-      alert('银行卡绑定成功');
+      this.$refs.toast.show('银行卡绑定成功', 'success');
       await this.getBankInfo();
     }
   }
@@ -169,12 +156,14 @@ export default {
 <style scoped>
 .container {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: url('../assets/dabag.png') no-repeat;
+  background-size: cover;
+  background-position: center;
 }
 
 .nav-bar {
   height: 44px;
-  background-color: #ed4b39;
+  background-color: transparent;
   color: #fff;
   display: flex;
   align-items: center;
@@ -206,93 +195,82 @@ export default {
   font-weight: 500;
 }
 
-.main {
-  padding: 15px;
-}
-
-.income-card {
-  background: #fff;
-  border-radius: 8px;
-  margin-bottom: 10px;
+.header-text {
+  padding: 40px 20px;
+  color: #fff;
 }
 
-.u-field {
-  padding: 10px 15px;
+.title-text {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 15px;
 }
 
-.u-field-inner {
-  display: flex;
-  align-items: center;
-}
-
-.u-label {
-  flex: 0 0 65px;
+.sub-text {
   font-size: 14px;
-  color: #333;
+  line-height: 1.5;
+  font-weight: bold;
 }
 
-.fild-body {
-  flex: 1;
+.form-container {
+  background: #fff;
+  border-radius: 8px;
+  margin: 0 20px;
+  padding: 20px;
 }
 
-.u-flex-1 {
-  flex: 1;
+.form-item {
+  /* margin-bottom: 20px; */
 }
 
-.u-flex {
-  display: flex;
+.form-label {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8px;
 }
 
-.u-field__input-wrap {
+.form-input {
   width: 100%;
-  height: 24px;
-  line-height: 24px;
+  height: 44px;
   border: none;
-  outline: none;
+  background: #fff;
   font-size: 14px;
+  padding: 0;
   color: #333;
-  background: transparent;
 }
 
-.u-field__input-wrap::placeholder {
+.form-input::placeholder {
   color: #999;
 }
 
-.u-field__input-wrap:disabled {
-  color: #666;
-}
-
-.u-border-bottom {
-  position: relative;
+.form-input:focus {
+  outline: none;
 }
 
-.u-border-bottom::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 1px;
-  background: rgba(85, 89, 105, 0.12);
-  transform: scaleY(0.5);
+.form-input:disabled {
+  color: #666;
+  background: #f5f5f5;
 }
 
-.mt30 { margin-top: 30px; }
-.h40 { height: 40px; }
-.lh40 { line-height: 40px; }
-.tc { text-align: center; }
-.white { color: #fff; }
-.ft14 { font-size: 14px; }
-.w90 { width: 90%; }
-.mauto { margin: 0 auto; }
-.radius28 { border-radius: 28px; }
-
-.bgBlue {
-  background: #ed4b39;
+.submit-btn {
+  width: 60%;
+  height: 44px;
+  background: #FF6B6B;
+  border-radius: 22px;
+  border: none;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
   cursor: pointer;
 }
 
-.bgBlue:active {
+.submit-btn:active {
   opacity: 0.9;
 }
+
+.submit-btn:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
 </style> 

src/views/Member.vue

@@ -9,136 +9,49 @@
     </div>
 
     <!-- 用户信息卡片 -->
-    <div class="userinfo-card">
-      <div class="card-box">
-        <div class="user-section">
-          <div class="avatar-wrap">
-            <div class="avatar">
-              <img :src="userInfo.avatar" alt="头像">
-            </div>
-          </div>
-          <div class="portrait-box">
-            <div class="info-box"></div>
-            <div class="tuan">
-              <div class="ma">账 号： {{ userInfo.mobile }}</div>
-            </div>
-            <div class="tuan">
-              <div class="ma">邀请码 {{ userInfo.salt }}</div>
-              <div class="fuzi" @click="copyInviteCode">复 制</div>
-            </div>
-          </div>
+    <div class="header-info">
+      <div class="user-info">
+        <div class="avatar">
+          <img src="@/assets/hongqi.png" alt="红旗">
         </div>
-        <div class="balance-card-wrap">
-          <div class="balance-card">
-            <div class="tit">我的邀请收益</div>
-            <div class="xia">
-              <div class="num">
-                <span>{{ userInfo.xianjin || 0 }}</span>
-              </div>
-            </div>
-            <div class="tit" style="font-size: 3.4vw;">邀请好友立享返佣 ！</div>
+        <div class="account-info">
+          <div>账号：{{ userInfo.mobile }}</div>
+          <div class="invite-code">
+            <span>邀请码</span>
+            <button class="copy-btn" @click="copyInviteCode">复制</button>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- 主要内容区域 -->
-    <div class="main">
-      <!-- 收益卡片 -->
-      <div class="income-card funs" style="margin-top: 0;">
-        <div class="tit1">
-          <span>我的收益</span>
-          <div class="arrow-right">
-            <img src="@/assets/arrow-right.png" alt="箭头">
-          </div>
-        </div>
-        <div class="show-content">
-          <div class="view-category">
-            <div class="num1">
-              <span>{{ userInfo.totleonemo || 0 }}</span>
-            </div>
-            <div class="text">一级收益</div>
-          </div>
-          <div class="line"></div>
-          <div class="view-category">
-            <div class="num1">
-              <span>{{ userInfo.totletwomo || 0 }}</span>
-            </div>
-            <div class="text">二级收益</div>
-          </div>
-          <div class="line"></div>
-          <div class="view-category">
-            <div class="num1">
-              <span>{{ userInfo.totlethreemo || 0 }}</span>
-            </div>
-            <div class="text">三级收益</div>
-          </div>
-        </div>
-      </div>
+      <div class="title-text">我的团队</div>
 
-      <!-- 我的团队卡片 -->
-      <div class="income-card funs">
-        <div class="tit1">
-          <span>我的团队</span>
-          <div class="arrow-right">
-            <img src="@/assets/arrow-right.png" alt="箭头">
-          </div>
+      <!-- 团队数据 -->
+      <div class="team-stats">
+        <div class="stat-item">
+          <div class="stat-num">{{ userInfo.totleone || 0 }}</div>
+          <div class="stat-label">一级人数</div>
         </div>
-        <div class="show-content">
-          <div class="view-category">
-            <div class="num1">
-              <span>{{ userInfo.totleone || 0 }}</span>
-            </div>
-            <div class="text">一级人数</div>
-          </div>
-          <div class="line"></div>
-          <div class="view-category">
-            <div class="num1">
-              <span>{{ userInfo.totletwo || 0 }}</span>
-            </div>
-            <div class="text">二级人数</div>
-          </div>
-          <div class="line"></div>
-          <div class="view-category">
-            <div class="num1">
-              <span>{{ userInfo.totlethree || 0 }}</span>
-            </div>
-            <div class="text">三级人数</div>
-          </div>
+        <div class="stat-item">
+          <div class="stat-num">{{ userInfo.totletwo || 0 }}</div>
+          <div class="stat-label">二级人数</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-num">{{ userInfo.totlethree || 0 }}</div>
+          <div class="stat-label">三级人数</div>
         </div>
       </div>
 
-      <!-- 工具卡片 -->
-      <div class="tool-card funs">
-        <div class="tool-item flex listItem" @click="$router.push('/share')">
-          <div class="item-right">
-            <div class="view-text">邀请好友</div>
-            <div class="view-image-right">
-              <img src="@/assets/arrow-right.png" alt="箭头">
-            </div>
-          </div>
+      <!-- 功能列表 -->
+      <div class="function-list">
+        <div class="function-item" @click="$router.push('/share')">
+          <span>邀请好友</span>
         </div>
-        <div class="u-line"></div>
-        
-        <div class="tool-item flex listItem" @click="$router.push('/team-detail')">
-          <div class="item-right">
-            <div class="view-text">团队明细</div>
-            <div class="view-image-right">
-              <img src="@/assets/arrow-right.png" alt="箭头">
-            </div>
-          </div>
+        <div class="function-item" @click="$router.push('/team-detail')">
+          <span>团队明细</span>
         </div>
-        <div class="u-line"></div>
-        
-        <div class="tool-item flex listItem" @click="$router.push('/asset-center')">
-          <div class="item-right">
-            <div class="view-text">收益记录</div>
-            <div class="view-image-right">
-              <img src="@/assets/arrow-right.png" alt="箭头">
-            </div>
-          </div>
+        <div class="function-item" @click="$router.push('/asset-center')">
+          <span>收益记录</span>
         </div>
-        <div class="u-line"></div>
       </div>
     </div>
   </div>
@@ -195,13 +108,14 @@ export default {
 <style scoped>
 .container {
   min-height: 100vh;
-  background: #f5f5f5;
-  padding-bottom: 20px;
+  background: url('../assets/dabag.png') no-repeat;
+  background-size: cover;
+  background-position: center;
 }
 
 .nav-bar {
   height: 44px;
-  background-color: #ed4b39;
+  background-color: transparent;
   color: #fff;
   display: flex;
   align-items: center;
@@ -233,193 +147,102 @@ export default {
   font-weight: 500;
 }
 
-.userinfo-card {
-  background: #fff;
-  padding: 5px;
-  margin: 15px;
-  border-radius: 12px;
-}
-
-.card-box {
-  position: relative;
+.header-info {
+  padding: 20px;
+  color: #fff;
 }
 
-.user-section {
+.user-info {
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
 }
 
-.avatar-wrap {
+.avatar {
   width: 60px;
   height: 60px;
-  margin-right: 15px;
-}
-
-.avatar {
-  width: 100%;
-  height: 100%;
+  background: #fff;
   border-radius: 50%;
-  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15px;
 }
 
 .avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
 }
 
-.portrait-box {
+.account-info {
   flex: 1;
-}
-
-.tuan {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 10px;
   font-size: 14px;
-  font-weight: bold;
-}
-
-.ma {
-  color: #333;
-}
-
-.fuzi {
-  color: #ed4b39;
-  padding: 2px 8px;
-  border: 1px solid #ed4b39;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.balance-card {
-  background: url('../assets/memberbg.png');
-  background-size: cover;
-  background-position: center;
-  border-radius: 8px;
-  padding: 15px;
-  margin-top: 20px;
-  
 }
 
-.tit {
-  color: #fff;
-  font-size: 14px;
-  margin-bottom: 10px;
+.invite-code {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-}
-.tit1 {
-  color: #000;
-  font-size: 14px;
-  margin-bottom: 10px;
-  display: flex;
+  margin-top: 10px;
   justify-content: space-between;
-  align-items: center;
-}
-
-.arrow-right {
-  width: 5px;
-  height: 10px;
 }
 
-.arrow-right img {
-  width: 100%;
-  height: 100%;
-}
-
-.num {
-  font-size: 24px;
-  color: #fff;
+.copy-btn {
+  margin-left: 15px;
+  padding: 2px 15px;
+  background: #fff;
+  border: none;
+  font-size: 12px;
+  cursor: pointer;
+  color: #bb2d5c;
   font-weight: bold;
-  margin: 10px 0;
 }
-.num1{
-  font-size: 18px;
-  color: #000;
+
+.title-text {
+  font-size: 20px;
   font-weight: bold;
-  margin: 10px 0;
-}
-.main {
-  margin: 15px;
+  text-align: center;
+  margin: 30px 0;
 }
 
-.income-card {
+.team-stats {
   background: #fff;
   border-radius: 8px;
-  padding: 15px;
-  margin-bottom: 10px;
-}
-
-.show-content {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  margin-bottom: 20px;
 }
 
-.view-category {
+.stat-item {
   flex: 1;
   text-align: center;
+  padding: 15px 0;
+  color: #333;
 }
 
-.line {
-  width: 1px;
-  height: 30px;
-  background: rgba(0,0,0,0.1);
+.stat-num {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 5px;
 }
 
-.text {
-  font-size: 12px;
+.stat-label {
+  font-size: 14px;
   color: #666;
-  margin-top: 5px;
 }
 
-.tool-card {
+.function-list {
   background: #fff;
   border-radius: 8px;
 }
 
-.tool-item {
+.function-item {
   padding: 15px;
-  cursor: pointer;
-}
-
-.item-right {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-
-.view-text {
-  font-size: 14px;
+  border-bottom: 1px solid #eee;
   color: #333;
+  font-size: 14px;
 }
 
-.view-image-right {
-  width: 5px;
-  height: 10px;
-}
-
-.view-image-right img {
-  width: 100%;
-  height: 100%;
-}
-
-.u-line {
-  height: 1px;
-  background: rgba(0,0,0,0.1);
-  transform: scaleY(0.5);
-}
-
-.flex {
-  display: flex;
-}
-
-.listItem:active {
-  background: rgba(0,0,0,0.05);
+.function-item:last-child {
+  border-bottom: none;
 }
 </style> 

src/views/Mention.vue

@@ -8,64 +8,67 @@
       <div class="title">提现</div>
     </div>
 
-    <div style="width: 95%; margin: 0 auto;">
-      <div style="margin-top: 20px;">温馨提示</div>
-      <div style="margin-top: 10px;">所有提现经国务院批准，由中央财政部联合拨款支出，用于帮扶人民群众救助贫困家庭，全程无需任何的费用</div>
+    <!-- 温馨提示 -->
+    <div class="warning-section">
+      <div class="warning-title">温馨提示！</div>
+      <div class="warning-content">
+        提现资金是国务院国资委批准由国家四大基金打款到账您的银行卡，所有提现的资金均财政部门，银监会监管，零费用，不冻结，不风控，最快速到账您的银行卡
+      </div>
     </div>
 
-    <div class="ptb20 bgPart plr20">
-      <div class="bd_input ptb10 plr10 tc flex1 radius4">
-        <div class="flex between">
-          <span>当前币种</span>
-          <span>人民币</span>
+    <!-- 提现表单 -->
+    <div class="withdraw-form">
+      <div class="form-item1">
+        <div class="label">提现金额</div>
+        <div class="form-content">
+          <div class="amount-input">
+            <span class="currency">¥</span>
+            <input 
+              type="number" 
+              class="input-field" 
+              v-model="amount"
+              pattern="[0-9]*"
+            >
+          </div>
         </div>
       </div>
-      <div class="ft18"></div>
-      <div class="mt10">可用 {{ availableBalance }}元</div>
-      <div class="mt10">提现最小 {{ minWithdrawAmount }}元</div>
-      <div class="mt10">预计到账 {{ amount || '0.00' }}元</div>
-    </div>
 
-    <div class="plr20">
-      <div class="mb20">
-        <div>提现金额</div>
-        <div class="flex alcenter between bdb1f">
-          <input 
-            type="number" 
-            class="h40 flex1 input-uni" 
-            placeholder="最低提现金额20"
-            v-model="amount"
-            pattern="[0-9]*"
-          >
-          <div class="flex alcenter">
-            <span class="blue ft14 pr10 bdr_white50">元</span>
-            <div class="pl10" @click="setMaxAmount">全部</div>
+      <div class="available-amount">
+        <div class="amount-row">
+          <span>最多可提现金额：{{ availableBalance }}</span>
+          <span class="withdraw-all" @click="setMaxAmount">全部提现</span>
+        </div>
+      </div>
+
+      <div class="form-item">
+        <div class="label">提现至</div>
+        <div class="form-content">
+          <div class="bank-detail">
+            <div class="bank-name">中国银行...</div>
+            <div class="bank-number">(6217...)</div>
           </div>
         </div>
       </div>
 
-      <div class="mb20">
-        <div>登录密码</div>
-        <div class="flex alcenter between bdb1f h40">
+      <div class="form-item">
+        <div class="label">登录密码</div>
+        <div class="form-content">
           <input 
             :type="showPassword ? 'text' : 'password'"
-            class="h40 flex1 input-uni" 
+            class="input-field"
             placeholder="请输入登录密码"
             v-model="password"
           >
-          <img 
-            :src="require(`@/assets/${showPassword ? 'eye-open.png' : 'eye-close.png'}`)" 
-            class="eye-icon"
-            @click="togglePassword"
-          >
         </div>
       </div>
 
-      <div 
-        class="mt40 bgBlue radius4 ptb10 white ft14 tc mb10 withdraw-btn"
-        @click="handleWithdraw"
-      >
-        提现
+      <div style="display: flex;justify-content: center;align-items: center;">
+        <button 
+          class="submit-btn"
+          @click="handleWithdraw"
+        >
+        立即提现
+      </button>
       </div>
     </div>
 
@@ -231,15 +234,14 @@ export default {
 <style scoped>
 .vh100 {
   min-height: 100vh;
-  background:#fff;
-  background-size: 100% 100%;
-  background-position: 0 0;
-  background-repeat: no-repeat;
+  background: url('../assets/dabag.png') no-repeat;
+  background-size: cover;
+  background-position: center;
 }
 
 .nav-bar {
   height: 44px;
-  background-color: #ed4b39;
+  background-color: transparent;
   color: #fff;
   display: flex;
   align-items: center;
@@ -271,72 +273,119 @@ export default {
   font-weight: 500;
 }
 
-.ptb20 { padding: 20px 0; }
-.plr20 { padding: 0 20px; }
-.ptb10 { padding: 10px 0; }
-.plr10 { padding: 0 10px; }
-.mt10 { margin-top: 10px; }
-.mt40 { margin-top: 40px; }
-.mb20 { margin-bottom: 20px; }
-.mb10 { margin-bottom: 10px; }
-.pr10 { padding-right: 10px; }
-.pl10 { padding-left: 10px; }
+.warning-section {
+  padding: 20px;
+  color: #fff;
+}
 
-.bgPart {
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 8px;
-  margin :15px 0 ;
+.warning-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 15px;
 }
 
-.bd_input {
+.warning-content {
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.withdraw-form {
   background: #fff;
-  border: 1px solid #eee;
+  border-radius: 8px;
+  margin: 20px;
+  padding: 20px;
+  margin-bottom: 40px;
 }
 
-.flex { display: flex; }
-.between { justify-content: space-between;padding:  10px; }
-.alcenter { align-items: center; }
-.tc { text-align: center; }
-.flex1 { flex: 1; }
-.radius4 { border-radius: 4px; }
-.ft18 { font-size: 18px; }
-.ft14 { font-size: 14px; }
-.blue { color: #ed4b39; }
-.white { color: #fff; }
+.form-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 15px;
+  
+}
+.form-item1 {
+  margin-bottom: 15px;
+  
+}
+.label {
+  font-size: 14px;
+  color: #333;
+  font-weight: bold;
+  width: 70px;
+  flex-shrink: 0;
+  padding-top: 10px;
+}
 
-.bdb1f {
-  border-bottom: 1px solid #f5f5f5;
+.form-content {
+  flex: 1;
+  min-width: 0;
 }
 
-.bdr_white50 {
-  border-right: 1px solid rgba(255,255,255,0.5);
+.amount-input {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
 }
 
-.h40 {
-  height: 40px;
-  line-height: 40px;
+.currency {
+  font-size: 16px;
+  font-weight: bold;
+  margin-right: 10px;
 }
 
-.input-uni {
+.input-field {
+  width: 100%;
+  height: 40px;
   border: none;
+  font-size: 14px;
   outline: none;
   background: transparent;
-  width: 100%;
-  padding: 0 10px;
 }
 
-.eye-icon {
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
+.available-amount {
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
 }
 
-.bgBlue {
-  background: #ed4b39;
+.amount-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #666;
+  font-size: 14px;
+}
+
+.withdraw-all {
+  color: #FF6B6B;
+  text-decoration: underline;
+}
+
+.bank-detail {
+  padding: 5px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.bank-name, .bank-number {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.submit-btn {
+  width: 60%;
+  height: 44px;
+  background: #FF6B6B;
+  border-radius: 22px;
+  border: none;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  margin-top: 20px;
   cursor: pointer;
 }
 
-.withdraw-btn:active {
+.submit-btn:active {
   opacity: 0.9;
 }
 

src/views/Profile.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="usremei-container">
+    <!-- Add Toast component -->
+    <Toast ref="toast" />
     <!-- 第一个白色背景板块 -->
     <div class="profile-card">
       
@@ -147,8 +149,13 @@
 <script>
 import { getUserInfo } from '@/api/home';
 import { logout, cashOut, withdrawPension } from '@/api/profile';
+import Toast from '@/components/Toast.vue';
+
 export default {
   name: 'UsreMei',
+  components: {
+    Toast
+  },
   data() {
     return {
       userInfo: {},
@@ -175,23 +182,23 @@ export default {
     async handleCashOut() {
       try {
         await cashOut();
-        alert('套现成功');
+        this.$refs.toast.show('套现成功', 'success');
         // 刷新用户信息
         await this.getUserInfo();
       } catch (error) {
         console.error('套现失败:', error);
-        alert('套现失败，请重试');
+        this.$refs.toast.show('套现失败，请重试', 'error');
       }
     },
     async handlePensionWithdraw() {
       try {
         await withdrawPension();
-        alert('提现成功');
+        this.$refs.toast.show('提现成功', 'success');
         // 刷新用户信息
         await this.getUserInfo();
       } catch (error) {
         console.error('提现失败:', error);
-        alert('提现失败，请重试');
+        this.$refs.toast.show('提现失败，请重试', 'error');
       }
     },
     handleLogout() {
@@ -206,13 +213,16 @@ export default {
     async confirmLogout() {
       try {
         await logout();
-        alert('退出成功');
-        // 清除本地存储的token等信息
-        localStorage.removeItem('token');
-        // 跳转到登录页
-        this.$router.replace('/login');
+        this.$refs.toast.show('退出成功', 'success');
+        setTimeout(() => {
+          
+          // 清除本地存储的token等信息
+          localStorage.removeItem('token');
+          // 跳转到登录页
+          this.$router.replace('/login');
+        }, 2000);
       } catch (error) {
-        alert('退出失败，请重试');
+        this.$refs.toast.show('退出失败，请重试', 'error');
       } finally {
         this.showConfirm = false;
       }

src/views/Share.vue

@@ -15,7 +15,7 @@
       <div class="pt30">
         <div class="tc">
           <div class="tc_100">
-            <img class="logo-image" src="@/assets/logo.png" alt="Logo" />
+            <img class="logo-image" src="@/assets/hongqi.png" alt="Logo" />
           </div>
         </div>
 

src/views/UserCenter.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="vh100">
+    <!-- Add Toast component -->
+    <Toast ref="toast" />
     <!-- 导航栏 -->
     <div class="nav-bar">
       <div class="back-btn" @click="$router.back()">
@@ -8,47 +10,75 @@
       <div class="title">实名认证</div>
     </div>
 
-    <div class="plr20 ptb10">
-      <div class="flex alcenter between ptb10 ft16">
-        <div class="ft18 bold">认证信息</div>
-        <div class="blue2" @click="$router.push('/real-authentication')">实名认证</div>
+    <!-- 已认证状态 -->
+    <div v-if="userInfo.if_real === 1" class="auth-success">
+      <div class="success-icon">
+        <svg viewBox="64 64 896 896" data-icon="check-circle" width="80px" height="80px" fill="#52c41a" aria-hidden="true">
+          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
+        </svg>
       </div>
+      <div class="success-text">您已完成实名认证</div>
+    </div>
 
-      <div class="u-gap" style="height: 5px;"></div>
-
-      <div class="mt10 ft14">
-        <div class="flex alcenter mt10">
-          <img src="@/assets/tssp.png" class="wt15 h15" alt="提示" />
-          <div class="chengse ft14">丨为保障您的资产安全，请实名认证</div>
-        </div>
-
-        <div class="u-gap" style="height: 15px;"></div>
-        <div class="u-line"></div>
+    <!-- 未认证状态 -->
+    <div v-else>
+      <div style="color: #fff;font-size: 14px;padding: 40px 20px;font-weight: bold;">
+        实名认证<br/>
+        获得红旗资产18000元
       </div>
+      <!-- 认证表单 -->
+      <div class="form-container">
+        <div class="form-item">
+          <div class="form-label">姓名</div>
+          <input 
+            type="text" 
+            class="form-input" 
+            placeholder="请输入您的姓名"
+            v-model="formData.name"
+          >
+        </div>
 
-      <div class="u-gap" style="height: 15px;"></div>
-
-      <!-- 认证状态展示 -->
-      <div class="auth-info">
-        <div class="info-item">
-          <span class="label">认证状态：</span>
-          <span class="value" :class="userInfo.if_real === 1 ? 'text-success' : 'text-warning'">
-            {{ userInfo.if_real === 1 ? '已认证' : '未认证' }}
-          </span>
+        <div class="form-item">
+          <div class="form-label">身份证号码</div>
+          <input 
+            type="text" 
+            class="form-input" 
+            placeholder="请输入身份证号码"
+            v-model="formData.idCard"
+          >
+          <div style="display: flex;justify-content: center;align-items: center;">
+            <button 
+          class="submit-btn"
+          @click="handleSubmit"
+        >
+          提交实名认证
+        </button>
+          </div>
         </div>
+
+       
       </div>
     </div>
+
   </div>
 </template>
 
 <script>
-import { getUserInfo } from '@/api/home';
+import Toast from '@/components/Toast.vue';
+import { setReal, getUserInfo } from '@/api/home';
 
 export default {
-  name: 'UserCenter',
+  name: 'RealAuthentication',
+  components: {
+    Toast
+  },
   data() {
     return {
-      userInfo: {}
+      userInfo: {},
+      formData: {
+        realName: '',
+        idCard: ''
+      }
     }
   },
   created() {
@@ -60,7 +90,38 @@ export default {
         const res = await getUserInfo();
         this.userInfo = res.data;
       } catch (error) {
-        console.error('获取用户信息失败:', error);
+        this.$refs.toast.show('获取用户信息失败', 'error');
+      }
+    },
+    async handleSubmit() {
+      if (!this.formData.realName) {
+        this.$refs.toast.show('请输入姓名', 'warning');
+        return;
+      }
+      if (!this.formData.idCard) {
+        this.$refs.toast.show('请输入证件号码', 'warning');
+        return;
+      }
+
+      try {
+        const params = {
+          type: '身份证',
+          name: this.formData.realName,
+          idCard: this.formData.idCard
+        };
+
+        const res = await setReal(params);
+
+        if (res.code === 1) {
+          this.$refs.toast.show('认证信息提交成功', 'success');
+          setTimeout(() => {
+            this.$router.back();
+          }, 1500);
+        } else {
+          this.$refs.toast.show(res.msg || '认证失败，请重试', 'error');
+        }
+      } catch (error) {
+        this.$refs.toast.show('网络错误，请稍后重试', 'error');
       }
     }
   }
@@ -70,12 +131,13 @@ export default {
 <style scoped>
 .vh100 {
   min-height: 100vh;
-  background: #fff;
+  background: url('../assets/dabag.png') no-repeat ;
+  background-size: 100% 100%;
 }
 
 .nav-bar {
   height: 44px;
-  background-color: #ed4b39;
+  background-color: transparent;
   color: #fff;
   display: flex;
   align-items: center;
@@ -107,48 +169,110 @@ export default {
   font-weight: 500;
 }
 
-.plr20 { padding: 0 20px; }
-.ptb10 { padding: 10px; }
+.flex { display: flex; }
+.between { justify-content: space-between; }
+.alcenter { align-items: center; }
+.tc { text-align: center; }
+.tr { text-align: right; }
 .mt10 { margin-top: 10px; }
+.mt30 { margin-top: 30px; }
+.pl10 { padding-left: 10px; }
+.pr10 { padding-right: 10px; }
+.pt10 { padding-top: 10px; }
+.h40 { height: 40px; }
+.lh40 { line-height: 40px; }
 .ft14 { font-size: 14px; }
-.ft16 { font-size: 16px; }
-.ft18 { font-size: 18px; }
-.bold { font-weight: bold; }
+.white { color: #fff; }
+.bgwhite { background: #fff; }
+.flex1 { flex: 1; }
+.w90 { width: 90%; }
+.mauto { margin: 0 auto; }
 
-.flex { display: flex; }
-.alcenter { align-items: center; }
-.between { justify-content: space-between; }
+.radius4 { border-radius: 4px; }
+.radius28 { border-radius: 28px; }
 
-.blue2 { color: #007AFF; }
-.chengse { color: #ff6b00; }
+.bgBlue {
+  margin-top: 20px;
+  background: #ed4b39;
+  cursor: pointer;
+}
 
-.wt15 {
-  width: 15px;
-  height: 15px;
+.bgBlue:active {
+  opacity: 0.9;
 }
 
-.h15 {
-  height: 15px;
+.bdb_blue3 {
+  border-bottom: 1px solid rgba(85, 89, 105, 0.12);
 }
 
-.u-gap {
-  margin: 0;
+.input-uni {
+  border: none;
+  outline: none;
+  background: transparent;
 }
 
-.u-line {
-  margin: 0;
-  border-bottom: 1px solid rgba(85, 89, 105, 0.12);
+.bottom {
+  padding: 0 20px;
   width: 100%;
-  transform: scaleY(0.5);
+}
+
+.bottom ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.bottom li {
+  color: #666;
+  font-size: 12px;
+  line-height: 1.5;
+  margin-bottom: 10px;
+  padding-left: 15px;
+  position: relative;
+}
+
+.bottom li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 8px;
+  width: 4px;
+  height: 4px;
+  background: #666;
+  border-radius: 50%;
+}
+
+.auth-success {
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.success-icon {
+  margin-bottom: 20px;
+}
+
+.success-text {
+  font-size: 20px;
+  color: #52c41a;
+  font-weight: 500;
+  margin-bottom: 30px;
 }
 
 .auth-info {
-  margin-top: 20px;
+  background: #f8f8f8;
+  border-radius: 8px;
+  padding: 20px;
+  text-align: left;
 }
 
 .info-item {
   margin-bottom: 15px;
   font-size: 14px;
+  line-height: 1.5;
+}
+
+.info-item:last-child {
+  margin-bottom: 0;
 }
 
 .info-item .label {
@@ -160,11 +284,57 @@ export default {
   margin-left: 5px;
 }
 
-.text-success {
-  color: #52c41a;
+.form-container {
+  padding: 0 20px;
+}
+
+.form-item {
+  background: #fff;
+  padding: 18px;
+}
+
+.form-label {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.form-input {
+  width: 100%;
+  height: 44px;
+  border: none;
+  background: #fff;
+  font-size: 14px;
+  padding: 0;
+  color: #333;
+}
+
+.form-input::placeholder {
+  color: #999;
+}
+
+.form-input:focus {
+  outline: none;
+  border-bottom-color: #ed4b39;
+}
+
+.submit-btn {
+  width: 60%;
+  height: 44px;
+  background: #FF6B6B;
+  border-radius: 22px;
+  border: none;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  margin-top: 30px;
+  cursor: pointer;
+  
 }
 
-.text-warning {
-  color: #faad14;
+.submit-btn:active {
+  opacity: 0.9;
+  
 }
 </style> 

src/views/login.vue

@@ -3,8 +3,8 @@
     <div class="contents">
       <!-- 头部logo -->
       <div class="header">
-        <img src="@/assets/logo-home.png" alt="logo" />
-        <div class="title">农泉财富</div>
+        <img src="@/assets/hongqi.png" alt="logo" />
+        <div class="title">让理想飞扬</div>
       </div>
       <!-- 主体表单 -->
       <div class="main">
@@ -30,7 +30,7 @@
 
       <!-- 底部信息 -->
       <div class="footer">
-        <div>找回密码</div>
+        <div style="color: #fff;font-size: 14px;">找回密码</div>
         <span>|</span>
         <router-link to="register">注册账号</router-link>
       </div>
@@ -115,25 +115,29 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 50px 50px 50px 50px;
   img {
     width: 80px;
     width: 80px;
     object-fit: cover;
-    border-radius: 50%;
+    
   }
 }
 
 .title {
-  font-size: 24px;
-  color: #fff;
+  font-size: 10px;
+  color: #000;
   margin-top: 16px;
   font-weight: 500;
+  letter-spacing: 4px;
 }
 
 .main {
   width: 100%;
   max-width: 320px;
-  margin: 60px 0 0 0;
+  margin: 20px 0 0 0;
 }
 
 .wbutton {