钱包首页

This commit is contained in:
2025-09-23 21:53:52 +08:00
parent 186d5b8a3a
commit 4c95923d2f
7 changed files with 60 additions and 37 deletions

View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 6.33301L8 10.333L4 6.33301H12Z" fill="#333333" stroke="#333333" stroke-width="1.33333" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 229 B

View File

@@ -0,0 +1,12 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4797_12170)">
<path d="M12 10.6663C13.4728 10.6663 14.6667 9.47244 14.6667 7.99967C14.6667 6.52691 13.4728 5.33301 12 5.33301" stroke="#333333" stroke-width="1.33333" stroke-linejoin="round"/>
<path d="M4.00001 5.33301C2.52725 5.33301 1.33334 6.52691 1.33334 7.99967C1.33334 9.47244 2.52725 10.6663 4.00001 10.6663" stroke="#333333" stroke-width="1.33333" stroke-linejoin="round"/>
<path d="M4 10.6663V10.4997V9.66634V7.99967V5.33301C4 3.12387 5.79087 1.33301 8 1.33301C10.2091 1.33301 12 3.12387 12 5.33301V10.6663C12 12.8755 10.2091 14.6663 8 14.6663" stroke="#333333" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_4797_12170">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 880 B

View File

@@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 8.00277V14H14V8" stroke="#333333" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11 7.66699L8 10.667L5 7.66699" stroke="#333333" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.99725 2V10.6667" stroke="#333333" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 469 B

View File

@@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 12.6663C10.1296 12.6663 12.6667 10.1293 12.6667 6.99967C12.6667 3.87007 10.1296 1.33301 7 1.33301C3.8704 1.33301 1.33333 3.87007 1.33333 6.99967C1.33333 10.1293 3.8704 12.6663 7 12.6663Z" stroke="#333333" stroke-width="1.33333" stroke-linejoin="round"/>
<path d="M8.88566 4.78103C8.40309 4.29847 7.73643 4 7.00003 4C6.26366 4 5.59699 4.29847 5.11443 4.78103" stroke="#333333" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.0739 11.0737L13.9023 13.9022" stroke="#333333" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 695 B

View File

@@ -166,7 +166,7 @@
// 表单区域
.form_section {
margin-bottom: 48px;
margin-bottom: 16px;
box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
.form_group {

View File

@@ -6,10 +6,11 @@
padding: 5px;
.wallet_main_card {
background: white;
background: #000;
border-radius: 20px;
padding: 12px 20px 32px;
margin-bottom: 8px;
color: #fff;
.card_header {
display: flex;
@@ -20,7 +21,6 @@
.header_title {
font-size: 12px;
font-weight: 400;
color: #000;
line-height: 1.5;
}
@@ -46,9 +46,8 @@
.currency_symbol {
font-family: 'DingTalk JinBuTi', sans-serif;
font-size: 20px;
font-size: 32px;
font-weight: 400;
color: #000;
line-height: 0.8;
}
@@ -60,42 +59,37 @@
font-family: 'DingTalk JinBuTi', sans-serif;
font-size: 32px;
font-weight: 400;
color: #000;
line-height: 0.75;
}
.decimal_amount {
font-family: 'DingTalk JinBuTi', sans-serif;
font-size: 20px;
font-size: 32px;
font-weight: 400;
color: #000;
line-height: 0.8;
}
}
}
.withdraw_btn {
background: #000;
color: white;
background: #fff;
border: none;
border-radius: 20px;
padding: 8px 20px;
font-size: 14px;
font-weight: 400;
line-height: 1.29;
width: 68px;
height: 34px;
&:active {
background: #333;
}
margin: unset;
display: flex;
justify-content: center;
align-items: center;
}
}
.available_amount {
font-size: 12px;
font-weight: 400;
color: #000;
line-height: 1.5;
text-align: left;
}
@@ -122,8 +116,8 @@
flex: 1;
.function_icon {
width: 12px;
height: 12px;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
@@ -172,6 +166,24 @@
display: flex;
align-items: center;
gap: 4px;
position: relative;
padding-right: 16px;
&::before, &::after {
content: '';
display: block;
width: 2px;
height: 8px;
border-radius: 2px;
background: #000;
transform: translateX(-3.5px) rotate(-45deg);
position: absolute;
right: 0;
}
&::after {
transform: translateX(3px) rotate(45deg);
}
.current_month {
font-size: 12px;
@@ -179,11 +191,6 @@
color: #000;
line-height: 1.5;
}
.dropdown_arrow {
font-size: 10px;
color: #000;
}
}
}

View File

@@ -1,5 +1,5 @@
import React, { useState } from "react";
import { View, Text, Input, Button } from "@tarojs/components";
import { View, Text, Input, Button, Image } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import "./index.scss";
import { CommonPopup } from "@/components";
@@ -284,27 +284,19 @@ const WalletPage: React.FC = () => {
{/* 功能按钮区域 */}
<View className="function_buttons">
<View className="function_item">
<View className="function_icon">
<Text className="icon_text">📄</Text>
</View>
<Text className="function_text"></Text>
<Image className="function_icon" src={require("@/static/wallet/arrow-down.svg")} />
</View>
<View className="function_item">
<View className="function_icon">
<Text className="icon_text">🔍</Text>
</View>
<Image className="function_icon" src={require("@/static/wallet/search.svg")} />
<Text className="function_text"></Text>
</View>
<View className="function_item">
<View className="function_icon">
<Text className="icon_text"></Text>
</View>
<Image className="function_icon" src={require("@/static/wallet/download.svg")} />
<Text className="function_text"></Text>
</View>
<View className="function_item">
<View className="function_icon">
<Text className="icon_text">💬</Text>
</View>
<Image className="function_icon" src={require("@/static/wallet/custom-service.svg")} />
<Text className="function_text"></Text>
</View>
</View>
@@ -316,7 +308,6 @@ const WalletPage: React.FC = () => {
<Text className="history_title"></Text>
<View className="month_selector">
<Text className="current_month">2025-09</Text>
<Text className="dropdown_arrow"></Text>
</View>
</View>