yunqueai/ai_wht_wechat
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
sjk
2026-01-06 19:36:42 +08:00
parent 15b579d64a
commit 19942144fb
261 changed files with 24034 additions and 5477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
figma_html_page/toast状态.html Normal file
View File

@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Toast状态</title>
<link rel="stylesheet" href="css/common.css">
<style>
.toast-demo-container {
padding: 40px 20px;
display: flex;
flex-direction: column;
gap: 40px;
}
.toast-row {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
}
.toast-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.toast-label {
font-size: 14px;
color: #333;
}
.toast-box {
background: rgba(76, 76, 76, 0.95);
border-radius: 12px;
padding: 24px 28px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
min-width: 136px;
}
.toast-box .icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.toast-box .icon svg {
width: 36px;
height: 36px;
}
.toast-box .text {
color: #fff;
font-size: 14px;
text-align: center;
line-height: 1.5;
}
.toast-box .loading-spinner {
width: 32px;
height: 32px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="toast-demo-container">
<div class="toast-row">
<div class="toast-item">
<div class="toast-box">
<div class="icon">
<svg viewBox="0 0 36 36" fill="none">
<path d="M8 18L15 25L28 11" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="text">登录成功</div>
</div>
<div class="toast-label">成功</div>
</div>
<div class="toast-item">
<div class="toast-box">
<div class="icon">
<svg viewBox="0 0 36 36" fill="none">
<circle cx="18" cy="18" r="14" stroke="#fff" stroke-width="2"/>
<text x="18" y="24" text-anchor="middle" fill="#fff" font-size="18" font-weight="500">i</text>
</svg>
</div>
<div class="text">请先选择商品</div>
</div>
<div class="toast-label">提示具体问题</div>
</div>
<div class="toast-item">
<div class="toast-box">
<div class="icon">
<div class="loading-spinner"></div>
</div>
<div class="text">获取验证中</div>
</div>
<div class="toast-label">验证中</div>
</div>
</div>
<div class="toast-row">
<div class="toast-item">
<div class="toast-box">
<div class="icon">
<svg viewBox="0 0 36 36" fill="none">
<circle cx="18" cy="18" r="14" stroke="#fff" stroke-width="2"/>
<text x="18" y="24" text-anchor="middle" fill="#fff" font-size="18" font-weight="500">i</text>
</svg>
</div>
<div class="text">绑定失败，手机<br>号未注册账号</div>
</div>
<div class="toast-label">失败</div>
</div>
</div>
</div>
</div>
</body>
</html>