commit
This commit is contained in:
sjk
118
figma_html_page/bind-account.html
Normal file
118
figma_html_page/bind-account.html
Normal file
@@ -0,0 +1,118 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/bind-account.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none">
|
||||
<path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/>
|
||||
<path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/>
|
||||
<path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/>
|
||||
</svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none">
|
||||
<path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/>
|
||||
</svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none">
|
||||
<rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/>
|
||||
<rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/>
|
||||
<path d="M23 4V8C24.1046 8 25 7.10457 25 6V6C25 4.89543 24.1046 4 23 4Z" fill="#000"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn" onclick="history.back()">
|
||||
<svg viewBox="0 0 10 18">
|
||||
<path d="M9 1L1 9L9 17" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon">
|
||||
<svg width="20" height="4" viewBox="0 0 20 4" fill="none">
|
||||
<circle cx="2" cy="2" r="2" fill="#000"/>
|
||||
<circle cx="10" cy="2" r="2" fill="#000"/>
|
||||
<circle cx="18" cy="2" r="2" fill="#000"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/>
|
||||
<circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo">
|
||||
<svg width="56" height="56" viewBox="0 0 56 56" fill="none">
|
||||
<rect width="56" height="56" rx="12" fill="#FF2442"/>
|
||||
<path d="M16 22h6v12h-6zM22 22h6v12h-6zM28 22h6v12h-6zM34 22h6v12h-6z" fill="#fff" opacity="0"/>
|
||||
<text x="28" y="32" text-anchor="middle" fill="#fff" font-size="12" font-weight="600">小红书</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
|
||||
<div class="bind-form">
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" id="phoneInput" placeholder="输入手机号" maxlength="11" oninput="checkInputs()">
|
||||
</div>
|
||||
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" id="codeInput" placeholder="请输入验证码" maxlength="6" oninput="checkInputs()">
|
||||
<button class="get-code" id="getCodeBtn" onclick="getCode()">获取验证码</button>
|
||||
</div>
|
||||
|
||||
<button class="red-btn" id="bindBtn" onclick="doBind()">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
|
||||
<div class="toast-overlay" id="toastOverlay">
|
||||
<div class="toast">
|
||||
<div class="toast-icon">
|
||||
<svg viewBox="0 0 36 36">
|
||||
<path d="M8 18L15 25L28 12" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="toast-text">绑定成功</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast-overlay" id="loadingOverlay">
|
||||
<div class="toast">
|
||||
<div class="toast-loading"></div>
|
||||
<div class="toast-text">获取验证中</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast-overlay" id="failOverlay">
|
||||
<div class="toast">
|
||||
<div class="toast-icon info">
|
||||
<svg viewBox="0 0 32 32">
|
||||
<circle cx="16" cy="16" r="14" stroke="#fff" stroke-width="2" fill="none"/>
|
||||
<text x="16" y="21" text-anchor="middle" fill="#fff" font-size="16" font-weight="600">i</text>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="toast-text">绑定失败，手机<br>号未注册账号</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/bind-account.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
56
figma_html_page/css/bind-account.css
Normal file
56
figma_html_page/css/bind-account.css
Normal file
@@ -0,0 +1,56 @@
|
||||
.bind-content {
|
||||
padding: 40px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.xhs-logo {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.xhs-logo svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.bind-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bind-form .input-row {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.red-btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background: #FF2442;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
margin-top: 40px;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.red-btn:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
280
figma_html_page/css/common.css
Normal file
280
figma_html_page/css/common.css
Normal file
@@ -0,0 +1,280 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #fff;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 375px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-bar .time {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-bar .icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
height: 44px;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-bar .back-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-bar .back-btn svg {
|
||||
width: 10px;
|
||||
height: 18px;
|
||||
stroke: #000;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.nav-bar .nav-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav-bar .nav-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.green-btn {
|
||||
background: #07C160;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 14px 24px;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
transition: opacity 0.2s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.green-btn:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
.input-row .label {
|
||||
width: 56px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input-row .prefix {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.input-row input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.input-row input::placeholder {
|
||||
color: #C0C0C0;
|
||||
}
|
||||
|
||||
.input-row .get-code {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toast-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast {
|
||||
background: rgba(76, 76, 76, 0.9);
|
||||
border-radius: 12px;
|
||||
padding: 24px 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 136px;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toast-icon svg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
stroke: #fff;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.toast-icon.info svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.toast-text {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.toast-loading {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-overlay.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #fff;
|
||||
border-radius: 12px 12px 0 0;
|
||||
width: 100%;
|
||||
max-width: 375px;
|
||||
padding: 24px 16px;
|
||||
padding-bottom: 34px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
font-size: 17px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
.modal-btn.danger {
|
||||
color: #FA5151;
|
||||
}
|
||||
|
||||
.modal-btn.cancel {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.bottom-indicator {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 134px;
|
||||
height: 5px;
|
||||
background: #000;
|
||||
border-radius: 3px;
|
||||
}
|
||||
109
figma_html_page/css/generate-content.css
Normal file
109
figma_html_page/css/generate-content.css
Normal file
@@ -0,0 +1,109 @@
|
||||
.content {
|
||||
padding: 0 16px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.image-gallery {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
padding: 8px 0 16px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.image-gallery::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.image-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-item .delete-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.image-item.add-btn {
|
||||
background: #F5F5F5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-item.add-btn img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.article-section {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.article-content p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.article-content .section-title {
|
||||
margin-top: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
position: fixed;
|
||||
bottom: 34px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
max-width: 375px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
background: #fff;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
flex: 1;
|
||||
padding: 14px;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bottom-actions .green-btn {
|
||||
flex: 1;
|
||||
}
|
||||
74
figma_html_page/css/login.css
Normal file
74
figma_html_page/css/login.css
Normal file
@@ -0,0 +1,74 @@
|
||||
.login-content {
|
||||
padding: 60px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.app-subtitle {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.logo-placeholder {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
background: #E5E5E5;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.login-buttons {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.wechat-btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background: #07C160;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.wechat-btn:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.phone-btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.phone-btn:active {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
19
figma_html_page/css/phone-login.css
Normal file
19
figma_html_page/css/phone-login.css
Normal file
@@ -0,0 +1,19 @@
|
||||
.login-form {
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.login-form .input-row {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.login-form .green-btn {
|
||||
margin-top: 40px;
|
||||
}
|
||||
117
figma_html_page/css/profile.css
Normal file
117
figma_html_page/css/profile.css
Normal file
@@ -0,0 +1,117 @@
|
||||
.profile-content {
|
||||
padding: 16px;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.user-info .avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #F5F5F5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-info .avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-info .user-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.user-info .user-company {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.account-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #F0F0F0;
|
||||
cursor: pointer;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.row-label {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.row-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.row-value {
|
||||
font-size: 15px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-records {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 300px;
|
||||
color: #999;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.records-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.record-card {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.record-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.record-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.record-title {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
115
figma_html_page/css/select-product.css
Normal file
115
figma_html_page/css/select-product.css
Normal file
@@ -0,0 +1,115 @@
|
||||
.page-title {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
padding: 24px 0 20px;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E5E5E5;
|
||||
padding: 12px;
|
||||
padding-bottom: 16px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.product-card.selected {
|
||||
border-color: #07C160;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.product-card .checkbox {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.product-card .checkbox img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.product-card .checkbox .checked {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-card.selected .checkbox .unchecked {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-card.selected .checkbox .checked {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.product-image img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: 100px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.user-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.bottom-section {
|
||||
position: fixed;
|
||||
bottom: 34px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
max-width: 375px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.bottom-section .green-btn {
|
||||
border-radius: 8px;
|
||||
}
|
||||
130
figma_html_page/generate-content.html
Normal file
130
figma_html_page/generate-content.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<!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>生成内容</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/generate-content.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none">
|
||||
<path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/>
|
||||
<path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/>
|
||||
<path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/>
|
||||
</svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none">
|
||||
<path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/>
|
||||
</svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none">
|
||||
<rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/>
|
||||
<rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/>
|
||||
<path d="M23 4V8C24.1046 8 25 7.10457 25 6V6C25 4.89543 24.1046 4 23 4Z" fill="#000"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn" onclick="history.back()">
|
||||
<svg viewBox="0 0 10 18">
|
||||
<path d="M9 1L1 9L9 17" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon">
|
||||
<svg width="20" height="4" viewBox="0 0 20 4" fill="none">
|
||||
<circle cx="2" cy="2" r="2" fill="#000"/>
|
||||
<circle cx="10" cy="2" r="2" fill="#000"/>
|
||||
<circle cx="18" cy="2" r="2" fill="#000"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/>
|
||||
<circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="image-gallery">
|
||||
<div class="image-item">
|
||||
<div class="delete-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="8" cy="8" r="8" fill="#07C160"/>
|
||||
<path d="M5 5L11 11M11 5L5 11" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<img src="https://img.alicdn.com/imgextra/i1/O1CN01FH8C3f1VNpKrQq3hI_!!6000000002640-0-tps-800-800.jpg" alt="">
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="delete-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="8" cy="8" r="8" fill="#07C160"/>
|
||||
<path d="M5 5L11 11M11 5L5 11" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<img src="https://img.alicdn.com/imgextra/i3/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt="">
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="delete-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="8" cy="8" r="8" fill="#07C160"/>
|
||||
<path d="M5 5L11 11M11 5L5 11" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<img src="https://img.alicdn.com/imgextra/i2/O1CN01kpVlwu1HFkEwVXnKH_!!6000000000727-0-tps-800-800.jpg" alt="">
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="delete-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="8" cy="8" r="8" fill="#07C160"/>
|
||||
<path d="M5 5L11 11M11 5L5 11" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<img src="https://img.alicdn.com/imgextra/i4/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt="">
|
||||
</div>
|
||||
<div class="image-item add-btn">
|
||||
<img src="images/plus.svg" alt="添加">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-section">
|
||||
<h2 class="article-title">天冷必备！999感冒灵真的救了我</h2>
|
||||
|
||||
<div class="article-content">
|
||||
<p>最近这个天气真是绝了😭 昨天还穿短袖 今天直接降温10度！办公室一半人都在擤鼻涕…还好我常年备着 999感冒灵！真·家中神药！！</p>
|
||||
|
||||
<p class="section-title">🍊 亲测好用点：</p>
|
||||
<p>✅ 冲剂暖暖的超好喝！感冒初期喝一包 全身都舒服了～</p>
|
||||
<p>✅ 中西医结合配方 退烧+缓解鼻塞头疼都很可</p>
|
||||
<p>✅ 最关键的是不会犯困！打工人白天也能安心吃！</p>
|
||||
<p>（晚上睡前喝还能睡更香hhh)</p>
|
||||
|
||||
<p class="section-title">🌟 我的保命用法：</p>
|
||||
<p>感觉喉咙有点痒/打喷嚏👉立刻冲一包预防！</p>
|
||||
<p>已经中招的👉早晚各一包+疯狂喝水</p>
|
||||
<p>搭配VC泡腾片效果加倍✨</p>
|
||||
|
||||
<p class="section-title">🛒 购买小贴士：</p>
|
||||
<p>药店/某猫都有 建议家里&办公室各囤一盒！（尤其换季期！）真实分享！但凡有一个人不知道这个宝藏我都会伤心OK？！ #秋冬养生 #感冒灵 #家庭常备药 #换季保命哦对了，要保持原来那种"对闺蜜分享好物"的语气，不能变得太正式。加的内容要自然融入原来的段落里，不能显得突兀。"中西医结合"这个点可以展开说说，虽然不能太专业，但可以提...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-actions">
|
||||
<button class="btn-outline" onclick="regenerate()">换一换</button>
|
||||
<button class="green-btn" onclick="publish()">一键发布</button>
|
||||
</div>
|
||||
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
|
||||
<script src="js/generate-content.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
figma_html_page/images/Checkbox selected-1.png
Normal file
BIN
figma_html_page/images/Checkbox selected-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
4
figma_html_page/images/Checkbox selected-1.svg
Normal file
4
figma_html_page/images/Checkbox selected-1.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="20" height="20" rx="10" fill="#07C160"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.1427 13.5743L5 10.4316L5.78567 9.64589L8.53553 12.3957L14.8209 6.11035L15.6066 6.89603L8.92837 13.5743C8.71141 13.7912 8.35965 13.7912 8.1427 13.5743Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 376 B |
BIN
figma_html_page/images/Checkbox selected-2.png
Normal file
BIN
figma_html_page/images/Checkbox selected-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 960 B |
BIN
figma_html_page/images/Checkbox selected-3.png
Normal file
BIN
figma_html_page/images/Checkbox selected-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
figma_html_page/images/Checkbox selected.png
Normal file
BIN
figma_html_page/images/Checkbox selected.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 960 B |
4
figma_html_page/images/Checkbox selected.svg
Normal file
4
figma_html_page/images/Checkbox selected.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="20" height="20" rx="10" fill="#07C160"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.1427 13.5751L5 10.4324L5.78567 9.64674L8.53553 12.3966L14.8209 6.11121L15.6066 6.89688L8.92837 13.5751C8.71141 13.7921 8.35965 13.7921 8.1427 13.5751Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 376 B |
BIN
figma_html_page/images/Checkbox-1.png
Normal file
BIN
figma_html_page/images/Checkbox-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
3
figma_html_page/images/Checkbox-1.svg
Normal file
3
figma_html_page/images/Checkbox-1.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.75" y="0.75" width="18.5" height="18.5" rx="9.25" stroke="black" stroke-opacity="0.15" stroke-width="1.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 222 B |
BIN
figma_html_page/images/Checkbox-2.png
Normal file
BIN
figma_html_page/images/Checkbox-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 818 B |
BIN
figma_html_page/images/Checkbox-3.png
Normal file
BIN
figma_html_page/images/Checkbox-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
figma_html_page/images/Checkbox.png
Normal file
BIN
figma_html_page/images/Checkbox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 818 B |
3
figma_html_page/images/Checkbox.svg
Normal file
3
figma_html_page/images/Checkbox.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.75" y="0.75" width="18.5" height="18.5" rx="9.25" stroke="black" stroke-opacity="0.15" stroke-width="1.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 222 B |
BIN
figma_html_page/images/plus-1.png
Normal file
BIN
figma_html_page/images/plus-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 B |
3
figma_html_page/images/plus-1.svg
Normal file
3
figma_html_page/images/plus-1.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 11V3.5H13V11H20.5V13H13V20.5H11V13H3.5V11H11Z" fill="black" fill-opacity="0.3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 237 B |
BIN
figma_html_page/images/plus-2.png
Normal file
BIN
figma_html_page/images/plus-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 205 B |
BIN
figma_html_page/images/plus-3.png
Normal file
BIN
figma_html_page/images/plus-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 B |
BIN
figma_html_page/images/plus.png
Normal file
BIN
figma_html_page/images/plus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 205 B |
3
figma_html_page/images/plus.svg
Normal file
3
figma_html_page/images/plus.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 11V3.5H13V11H20.5V13H13V20.5H11V13H3.5V11H11Z" fill="black" fill-opacity="0.3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 237 B |
76
figma_html_page/index.html
Normal file
76
figma_html_page/index.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<!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>万花筒 - AI种草内容生成</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.index-container {
|
||||
max-width: 375px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.index-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.index-desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 40px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.page-list {
|
||||
text-align: left;
|
||||
}
|
||||
.page-list h3 {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
.page-link {
|
||||
display: block;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 8px;
|
||||
background: #F8F8F8;
|
||||
border-radius: 8px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.page-link:hover {
|
||||
background: #EFEFEF;
|
||||
}
|
||||
.page-link:active {
|
||||
background: #E5E5E5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="index-container">
|
||||
<h1 class="index-title">万花筒</h1>
|
||||
<p class="index-desc">AI种草内容生成工具<br>根据设计稿100%还原的HTML页面</p>
|
||||
|
||||
<div class="page-list">
|
||||
<h3>主要页面</h3>
|
||||
<a href="select-product.html" class="page-link">选择商品</a>
|
||||
<a href="generate-content.html" class="page-link">生成内容</a>
|
||||
|
||||
<h3>登录相关</h3>
|
||||
<a href="login.html" class="page-link">万花筒登录</a>
|
||||
<a href="phone-login.html" class="page-link">手机号登录</a>
|
||||
|
||||
<h3>个人中心</h3>
|
||||
<a href="profile.html" class="page-link">个人中心</a>
|
||||
<a href="bind-account.html" class="page-link">绑定小红书账号</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
77
figma_html_page/js/bind-account.js
Normal file
77
figma_html_page/js/bind-account.js
Normal file
@@ -0,0 +1,77 @@
|
||||
let countdown = 0;
|
||||
let timer = null;
|
||||
|
||||
function checkInputs() {
|
||||
const phone = document.getElementById('phoneInput').value;
|
||||
const code = document.getElementById('codeInput').value;
|
||||
const btn = document.getElementById('bindBtn');
|
||||
|
||||
if (phone.length === 11 && code.length >= 4) {
|
||||
btn.style.opacity = '1';
|
||||
} else {
|
||||
btn.style.opacity = '0.6';
|
||||
}
|
||||
}
|
||||
|
||||
function getCode() {
|
||||
const phone = document.getElementById('phoneInput').value;
|
||||
if (phone.length !== 11) {
|
||||
alert('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
if (countdown > 0) return;
|
||||
|
||||
const loadingOverlay = document.getElementById('loadingOverlay');
|
||||
loadingOverlay.style.display = 'flex';
|
||||
|
||||
setTimeout(() => {
|
||||
loadingOverlay.style.display = 'none';
|
||||
startCountdown();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
function startCountdown() {
|
||||
countdown = 60;
|
||||
const btn = document.getElementById('getCodeBtn');
|
||||
|
||||
timer = setInterval(() => {
|
||||
countdown--;
|
||||
if (countdown <= 0) {
|
||||
clearInterval(timer);
|
||||
btn.textContent = '获取验证码';
|
||||
btn.style.color = '#333';
|
||||
} else {
|
||||
btn.textContent = `${countdown}s`;
|
||||
btn.style.color = '#999';
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function doBind() {
|
||||
const phone = document.getElementById('phoneInput').value;
|
||||
const code = document.getElementById('codeInput').value;
|
||||
|
||||
if (phone.length !== 11) {
|
||||
alert('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
if (code.length < 4) {
|
||||
alert('请输入验证码');
|
||||
return;
|
||||
}
|
||||
|
||||
const toastOverlay = document.getElementById('toastOverlay');
|
||||
toastOverlay.style.display = 'flex';
|
||||
|
||||
setTimeout(() => {
|
||||
toastOverlay.style.display = 'none';
|
||||
localStorage.setItem('isBound', 'true');
|
||||
window.location.href = 'profile.html';
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.getElementById('bindBtn').style.opacity = '0.6';
|
||||
});
|
||||
12
figma_html_page/js/generate-content.js
Normal file
12
figma_html_page/js/generate-content.js
Normal file
@@ -0,0 +1,12 @@
|
||||
function regenerate() {
|
||||
alert('正在重新生成内容...');
|
||||
}
|
||||
|
||||
function publish() {
|
||||
const isLoggedIn = localStorage.getItem('isLoggedIn');
|
||||
if (!isLoggedIn) {
|
||||
window.location.href = 'login.html';
|
||||
} else {
|
||||
alert('发布成功！');
|
||||
}
|
||||
}
|
||||
10
figma_html_page/js/login.js
Normal file
10
figma_html_page/js/login.js
Normal file
@@ -0,0 +1,10 @@
|
||||
function wechatLogin() {
|
||||
localStorage.setItem('isLoggedIn', 'true');
|
||||
localStorage.setItem('userName', '星阿星');
|
||||
localStorage.setItem('userCompany', '北京乐航时代科技有限公司');
|
||||
window.location.href = 'select-product.html';
|
||||
}
|
||||
|
||||
function goPhoneLogin() {
|
||||
window.location.href = 'phone-login.html';
|
||||
}
|
||||
79
figma_html_page/js/phone-login.js
Normal file
79
figma_html_page/js/phone-login.js
Normal file
@@ -0,0 +1,79 @@
|
||||
let countdown = 0;
|
||||
let timer = null;
|
||||
|
||||
function checkInputs() {
|
||||
const phone = document.getElementById('phoneInput').value;
|
||||
const code = document.getElementById('codeInput').value;
|
||||
const btn = document.getElementById('loginBtn');
|
||||
|
||||
if (phone.length === 11 && code.length >= 4) {
|
||||
btn.style.opacity = '1';
|
||||
} else {
|
||||
btn.style.opacity = '0.6';
|
||||
}
|
||||
}
|
||||
|
||||
function getCode() {
|
||||
const phone = document.getElementById('phoneInput').value;
|
||||
if (phone.length !== 11) {
|
||||
alert('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
if (countdown > 0) return;
|
||||
|
||||
const loadingOverlay = document.getElementById('loadingOverlay');
|
||||
loadingOverlay.style.display = 'flex';
|
||||
|
||||
setTimeout(() => {
|
||||
loadingOverlay.style.display = 'none';
|
||||
startCountdown();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
function startCountdown() {
|
||||
countdown = 60;
|
||||
const btn = document.getElementById('getCodeBtn');
|
||||
|
||||
timer = setInterval(() => {
|
||||
countdown--;
|
||||
if (countdown <= 0) {
|
||||
clearInterval(timer);
|
||||
btn.textContent = '获取验证码';
|
||||
btn.style.color = '#333';
|
||||
} else {
|
||||
btn.textContent = `${countdown}s`;
|
||||
btn.style.color = '#999';
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function doLogin() {
|
||||
const phone = document.getElementById('phoneInput').value;
|
||||
const code = document.getElementById('codeInput').value;
|
||||
|
||||
if (phone.length !== 11) {
|
||||
alert('请输入正确的手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
if (code.length < 4) {
|
||||
alert('请输入验证码');
|
||||
return;
|
||||
}
|
||||
|
||||
const toastOverlay = document.getElementById('toastOverlay');
|
||||
toastOverlay.style.display = 'flex';
|
||||
|
||||
setTimeout(() => {
|
||||
toastOverlay.style.display = 'none';
|
||||
localStorage.setItem('isLoggedIn', 'true');
|
||||
localStorage.setItem('userName', '星阿星');
|
||||
localStorage.setItem('userCompany', '北京乐航时代科技有限公司');
|
||||
window.location.href = 'select-product.html';
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.getElementById('loginBtn').style.opacity = '0.6';
|
||||
});
|
||||
62
figma_html_page/js/profile.js
Normal file
62
figma_html_page/js/profile.js
Normal file
@@ -0,0 +1,62 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadUserInfo();
|
||||
});
|
||||
|
||||
function loadUserInfo() {
|
||||
const isLoggedIn = localStorage.getItem('isLoggedIn');
|
||||
const userName = localStorage.getItem('userName');
|
||||
const userCompany = localStorage.getItem('userCompany');
|
||||
const isBound = localStorage.getItem('isBound');
|
||||
|
||||
const userAvatar = document.getElementById('userAvatar');
|
||||
const userNameEl = document.getElementById('userName');
|
||||
const accountStatus = document.getElementById('accountStatus');
|
||||
const emptyRecords = document.getElementById('emptyRecords');
|
||||
const recordsGrid = document.getElementById('recordsGrid');
|
||||
|
||||
if (isLoggedIn && userName) {
|
||||
userAvatar.innerHTML = '<img src="https://img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" alt="">';
|
||||
|
||||
const userInfo = document.getElementById('userInfo');
|
||||
userInfo.innerHTML = `
|
||||
<div class="avatar" id="userAvatar">
|
||||
<img src="https://img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<div class="user-name">${userName}</div>
|
||||
<div class="user-company">${userCompany || ''}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (isBound) {
|
||||
accountStatus.textContent = userName;
|
||||
accountStatus.style.color = '#333';
|
||||
emptyRecords.style.display = 'none';
|
||||
recordsGrid.style.display = 'grid';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleAccountClick() {
|
||||
const isBound = localStorage.getItem('isBound');
|
||||
|
||||
if (isBound) {
|
||||
document.getElementById('unbindModal').classList.add('active');
|
||||
} else {
|
||||
window.location.href = 'bind-account.html';
|
||||
}
|
||||
}
|
||||
|
||||
function closeUnbindModal() {
|
||||
document.getElementById('unbindModal').classList.remove('active');
|
||||
}
|
||||
|
||||
function confirmUnbind() {
|
||||
localStorage.removeItem('isBound');
|
||||
closeUnbindModal();
|
||||
|
||||
document.getElementById('accountStatus').textContent = '未绑定';
|
||||
document.getElementById('accountStatus').style.color = '#999';
|
||||
document.getElementById('emptyRecords').style.display = 'flex';
|
||||
document.getElementById('recordsGrid').style.display = 'none';
|
||||
}
|
||||
35
figma_html_page/js/select-product.js
Normal file
35
figma_html_page/js/select-product.js
Normal file
@@ -0,0 +1,35 @@
|
||||
let selectedProducts = [];
|
||||
|
||||
function toggleSelect(card) {
|
||||
const productId = card.dataset.id;
|
||||
|
||||
if (card.classList.contains('selected')) {
|
||||
card.classList.remove('selected');
|
||||
selectedProducts = selectedProducts.filter(id => id !== productId);
|
||||
} else {
|
||||
card.classList.add('selected');
|
||||
selectedProducts.push(productId);
|
||||
}
|
||||
}
|
||||
|
||||
function goGenerate() {
|
||||
if (selectedProducts.length === 0) {
|
||||
showToast();
|
||||
return;
|
||||
}
|
||||
localStorage.setItem('selectedProducts', JSON.stringify(selectedProducts));
|
||||
window.location.href = 'generate-content.html';
|
||||
}
|
||||
|
||||
function goToProfile() {
|
||||
window.location.href = 'profile.html';
|
||||
}
|
||||
|
||||
function showToast() {
|
||||
const overlay = document.getElementById('toastOverlay');
|
||||
overlay.style.display = 'flex';
|
||||
|
||||
setTimeout(() => {
|
||||
overlay.style.display = 'none';
|
||||
}, 2000);
|
||||
}
|
||||
84
figma_html_page/login.html
Normal file
84
figma_html_page/login.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!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>万花筒</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/login.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none">
|
||||
<path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/>
|
||||
<path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/>
|
||||
<path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/>
|
||||
</svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none">
|
||||
<path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/>
|
||||
</svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none">
|
||||
<rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/>
|
||||
<rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/>
|
||||
<path d="M23 4V8C24.1046 8 25 7.10457 25 6V6C25 4.89543 24.1046 4 23 4Z" fill="#000"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn" onclick="history.back()">
|
||||
<svg viewBox="0 0 10 18">
|
||||
<path d="M9 1L1 9L9 17" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon">
|
||||
<svg width="20" height="4" viewBox="0 0 20 4" fill="none">
|
||||
<circle cx="2" cy="2" r="2" fill="#000"/>
|
||||
<circle cx="10" cy="2" r="2" fill="#000"/>
|
||||
<circle cx="18" cy="2" r="2" fill="#000"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/>
|
||||
<circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-content">
|
||||
<h1 class="app-title">万花筒</h1>
|
||||
<p class="app-subtitle">快速生成种草内容</p>
|
||||
|
||||
<div class="logo-placeholder"></div>
|
||||
|
||||
<div class="login-buttons">
|
||||
<button class="wechat-btn" onclick="wechatLogin()">
|
||||
<svg width="24" height="20" viewBox="0 0 24 20" fill="none">
|
||||
<path d="M8.5 7.5C9.32843 7.5 10 6.82843 10 6C10 5.17157 9.32843 4.5 8.5 4.5C7.67157 4.5 7 5.17157 7 6C7 6.82843 7.67157 7.5 8.5 7.5Z" fill="#fff"/>
|
||||
<path d="M15.5 7.5C16.3284 7.5 17 6.82843 17 6C17 5.17157 16.3284 4.5 15.5 4.5C14.6716 4.5 14 5.17157 14 6C14 6.82843 14.6716 7.5 15.5 7.5Z" fill="#fff"/>
|
||||
<path d="M12 0C5.373 0 0 4.373 0 9.5C0 12.5 1.5 15 4 16.5L3 20L7.5 17.5C8.9 17.8 10.4 18 12 18C18.627 18 24 13.627 24 8.5C24 3.373 18.627 0 12 0Z" fill="#fff"/>
|
||||
</svg>
|
||||
微信一键登录
|
||||
</button>
|
||||
|
||||
<button class="phone-btn" onclick="goPhoneLogin()">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M16.95 13.47L13.78 12.4C13.46 12.29 13.11 12.35 12.85 12.55L11.43 13.61C9.15 12.18 7.32 10.35 5.89 8.07L6.95 6.65C7.15 6.39 7.21 6.04 7.1 5.72L6.03 2.55C5.89 2.14 5.5 1.87 5.07 1.87H2.5C1.95 1.87 1.5 2.32 1.5 2.87C1.5 10.84 7.66 17 15.63 17C16.18 17 16.63 16.55 16.63 16V13.43C16.63 13 16.36 12.61 15.95 12.47L16.95 13.47Z" stroke="#333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
手机号登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
|
||||
<script src="js/login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
95
figma_html_page/phone-login.html
Normal file
95
figma_html_page/phone-login.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<!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>登录万花筒</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/phone-login.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none">
|
||||
<path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/>
|
||||
<path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/>
|
||||
<path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/>
|
||||
</svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none">
|
||||
<path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/>
|
||||
</svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none">
|
||||
<rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/>
|
||||
<rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/>
|
||||
<path d="M23 4V8C24.1046 8 25 7.10457 25 6V6C25 4.89543 24.1046 4 23 4Z" fill="#000"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn" onclick="history.back()">
|
||||
<svg viewBox="0 0 10 18">
|
||||
<path d="M9 1L1 9L9 17" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon">
|
||||
<svg width="20" height="4" viewBox="0 0 20 4" fill="none">
|
||||
<circle cx="2" cy="2" r="2" fill="#000"/>
|
||||
<circle cx="10" cy="2" r="2" fill="#000"/>
|
||||
<circle cx="18" cy="2" r="2" fill="#000"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/>
|
||||
<circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">登录万花筒</h1>
|
||||
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" id="phoneInput" placeholder="输入手机号" maxlength="11" oninput="checkInputs()">
|
||||
</div>
|
||||
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" id="codeInput" placeholder="请输入验证码" maxlength="6" oninput="checkInputs()">
|
||||
<button class="get-code" id="getCodeBtn" onclick="getCode()">获取验证码</button>
|
||||
</div>
|
||||
|
||||
<button class="green-btn" id="loginBtn" onclick="doLogin()">登录</button>
|
||||
</div>
|
||||
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
|
||||
<div class="toast-overlay" id="toastOverlay">
|
||||
<div class="toast">
|
||||
<div class="toast-icon">
|
||||
<svg viewBox="0 0 36 36">
|
||||
<path d="M8 18L15 25L28 12" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="toast-text">登录成功</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast-overlay" id="loadingOverlay">
|
||||
<div class="toast">
|
||||
<div class="toast-loading"></div>
|
||||
<div class="toast-text">获取验证中</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/phone-login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
123
figma_html_page/profile.html
Normal file
123
figma_html_page/profile.html
Normal file
@@ -0,0 +1,123 @@
|
||||
<!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>个人中心</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/profile.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none">
|
||||
<path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/>
|
||||
<path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/>
|
||||
<path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/>
|
||||
</svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none">
|
||||
<path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/>
|
||||
</svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none">
|
||||
<rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/>
|
||||
<rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/>
|
||||
<path d="M23 4V8C24.1046 8 25 7.10457 25 6V6C25 4.89543 24.1046 4 23 4Z" fill="#000"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn" onclick="history.back()">
|
||||
<svg viewBox="0 0 10 18">
|
||||
<path d="M9 1L1 9L9 17" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon">
|
||||
<svg width="20" height="4" viewBox="0 0 20 4" fill="none">
|
||||
<circle cx="2" cy="2" r="2" fill="#000"/>
|
||||
<circle cx="10" cy="2" r="2" fill="#000"/>
|
||||
<circle cx="18" cy="2" r="2" fill="#000"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/>
|
||||
<circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-content">
|
||||
<div class="user-info" id="userInfo">
|
||||
<div class="avatar" id="userAvatar">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="8" r="4" stroke="#999" stroke-width="2"/>
|
||||
<path d="M4 20C4 16.6863 7.58172 14 12 14C16.4183 14 20 16.6863 20 20" stroke="#999" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="user-name" id="userName">未登录</span>
|
||||
</div>
|
||||
|
||||
<div class="account-row" id="accountRow" onclick="handleAccountClick()">
|
||||
<span class="row-label">小红书账号</span>
|
||||
<div class="row-right">
|
||||
<span class="row-value" id="accountStatus">未绑定</span>
|
||||
<svg width="8" height="14" viewBox="0 0 8 14" fill="none">
|
||||
<path d="M1 1L7 7L1 13" stroke="#C0C0C0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">发布记录</div>
|
||||
|
||||
<div class="empty-records" id="emptyRecords">
|
||||
<span>暂无记录</span>
|
||||
</div>
|
||||
|
||||
<div class="records-grid" id="recordsGrid" style="display: none;">
|
||||
<div class="record-card">
|
||||
<div class="record-image">
|
||||
<img src="https://img.alicdn.com/imgextra/i1/O1CN01FH8C3f1VNpKrQq3hI_!!6000000002640-0-tps-800-800.jpg" alt="">
|
||||
</div>
|
||||
<p class="record-title">双十一卡诗精油买一波，哪个最好用？...</p>
|
||||
</div>
|
||||
<div class="record-card">
|
||||
<div class="record-image">
|
||||
<img src="https://img.alicdn.com/imgextra/i3/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt="">
|
||||
</div>
|
||||
<p class="record-title">卡诗护发精油怎么选？山茶花/黑钻/玻尿酸...</p>
|
||||
</div>
|
||||
<div class="record-card">
|
||||
<div class="record-image">
|
||||
<img src="https://img.alicdn.com/imgextra/i2/O1CN01kpVlwu1HFkEwVXnKH_!!6000000000727-0-tps-800-800.jpg" alt="">
|
||||
</div>
|
||||
<p class="record-title">黑钻 VS 新版卡诗鎏金山茶花到底选哪个？</p>
|
||||
</div>
|
||||
<div class="record-card">
|
||||
<div class="record-image">
|
||||
<img src="https://img.alicdn.com/imgextra/i4/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt="">
|
||||
</div>
|
||||
<p class="record-title">黑钻 VS 新版卡诗鎏金山茶花到底选哪个？</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="unbindModal">
|
||||
<div class="modal">
|
||||
<div class="modal-title">确定解绑</div>
|
||||
<div class="modal-message">解绑账号后将无法继续使用它登录小红书账号</div>
|
||||
<button class="modal-btn danger" onclick="confirmUnbind()">确定解绑</button>
|
||||
<button class="modal-btn cancel" onclick="closeUnbindModal()">取 消</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/profile.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
127
figma_html_page/select-product.html
Normal file
127
figma_html_page/select-product.html
Normal file
@@ -0,0 +1,127 @@
|
||||
<!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>选择商品</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/select-product.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none">
|
||||
<path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/>
|
||||
<path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/>
|
||||
<path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/>
|
||||
</svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none">
|
||||
<path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/>
|
||||
</svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none">
|
||||
<rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/>
|
||||
<rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/>
|
||||
<path d="M23 4V8C24.1046 8 25 7.10457 25 6V6C25 4.89543 24.1046 4 23 4Z" fill="#000"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn" onclick="history.back()">
|
||||
<svg viewBox="0 0 10 18">
|
||||
<path d="M9 1L1 9L9 17" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon">
|
||||
<svg width="20" height="4" viewBox="0 0 20 4" fill="none">
|
||||
<circle cx="2" cy="2" r="2" fill="#000"/>
|
||||
<circle cx="10" cy="2" r="2" fill="#000"/>
|
||||
<circle cx="18" cy="2" r="2" fill="#000"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/>
|
||||
<circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-title">选择商品</div>
|
||||
|
||||
<div class="product-grid" id="productGrid">
|
||||
<div class="product-card" data-id="1" onclick="toggleSelect(this)">
|
||||
<div class="checkbox">
|
||||
<img src="images/Checkbox.svg" class="unchecked" alt="">
|
||||
<img src="images/Checkbox selected.svg" class="checked" alt="">
|
||||
</div>
|
||||
<div class="product-image">
|
||||
<img src="https://img.alicdn.com/imgextra/i4/2206686532579/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt="感冒灵颗粒">
|
||||
</div>
|
||||
<div class="product-name">感冒灵颗粒</div>
|
||||
</div>
|
||||
|
||||
<div class="product-card" data-id="2" onclick="toggleSelect(this)">
|
||||
<div class="checkbox">
|
||||
<img src="images/Checkbox.svg" class="unchecked" alt="">
|
||||
<img src="images/Checkbox selected.svg" class="checked" alt="">
|
||||
</div>
|
||||
<div class="product-image">
|
||||
<img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01Qj0nPb1Vubp6RQRPN_!!2838892713.jpg" alt="电子血压仪">
|
||||
</div>
|
||||
<div class="product-name">电子血压仪</div>
|
||||
</div>
|
||||
|
||||
<div class="product-card" data-id="3" onclick="toggleSelect(this)">
|
||||
<div class="checkbox">
|
||||
<img src="images/Checkbox.svg" class="unchecked" alt="">
|
||||
<img src="images/Checkbox selected.svg" class="checked" alt="">
|
||||
</div>
|
||||
<div class="product-image">
|
||||
<img src="https://img.alicdn.com/imgextra/i3/2200724907121/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt="小林退热贴">
|
||||
</div>
|
||||
<div class="product-name">小林退热贴</div>
|
||||
</div>
|
||||
|
||||
<div class="product-card" data-id="4" onclick="toggleSelect(this)">
|
||||
<div class="checkbox">
|
||||
<img src="images/Checkbox.svg" class="unchecked" alt="">
|
||||
<img src="images/Checkbox selected.svg" class="checked" alt="">
|
||||
</div>
|
||||
<div class="product-image">
|
||||
<img src="https://img.alicdn.com/imgextra/i1/2201191528517/O1CN012gMFjB1aUxmMqhQE1_!!2201191528517.jpg" alt="芬必得布洛芬释...">
|
||||
</div>
|
||||
<div class="product-name">芬必得布洛芬释...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-avatar" id="userAvatar" onclick="goToProfile()">
|
||||
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01bFPkVE1K6bVqVYQhT_!!6000000001114-0-tps-200-200.jpg" alt="用户">
|
||||
</div>
|
||||
|
||||
<div class="bottom-section">
|
||||
<button class="green-btn" onclick="goGenerate()">去生成内容</button>
|
||||
</div>
|
||||
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
|
||||
<div class="toast-overlay" id="toastOverlay">
|
||||
<div class="toast">
|
||||
<div class="toast-icon info">
|
||||
<svg viewBox="0 0 32 32">
|
||||
<circle cx="16" cy="16" r="14" stroke-width="2"/>
|
||||
<text x="16" y="21" text-anchor="middle" fill="#fff" font-size="16" font-weight="600">i</text>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="toast-text">请先选择商品</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/select-product.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
128
figma_html_page/toast状态.html
Normal file
128
figma_html_page/toast状态.html
Normal 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>
|
||||
40
figma_html_page/万花筒登录-1.html
Normal file
40
figma_html_page/万花筒登录-1.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!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>万花筒</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-content { padding: 60px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.app-title { font-size: 28px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.app-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.logo-placeholder { width: 140px; height: 140px; background: #E5E5E5; border-radius: 8px; margin-bottom: 80px; }
|
||||
.login-buttons { width: 100%; display: flex; flex-direction: column; gap: 16px; }
|
||||
.wechat-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #07C160; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
.phone-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #333; background: #fff; border: 1px solid #E5E5E5; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="login-content">
|
||||
<h1 class="app-title">万花筒</h1>
|
||||
<p class="app-subtitle">快速生成种草内容</p>
|
||||
<div class="logo-placeholder"></div>
|
||||
<div class="login-buttons">
|
||||
<button class="wechat-btn">
|
||||
<svg width="24" height="20" viewBox="0 0 24 20" fill="none"><path d="M9.5 7C9.5 7.55228 9.05228 8 8.5 8C7.94772 8 7.5 7.55228 7.5 7C7.5 6.44772 7.94772 6 8.5 6C9.05228 6 9.5 6.44772 9.5 7Z" fill="#fff"/><path d="M13.5 7C13.5 7.55228 13.0523 8 12.5 8C11.9477 8 11.5 7.55228 11.5 7C11.5 6.44772 11.9477 6 12.5 6C13.0523 6 13.5 6.44772 13.5 7Z" fill="#fff"/><path d="M10.5 0C5.25329 0 1 3.58172 1 8C1 10.2091 2.10714 12.2091 3.85714 13.5714L3 17L6.71429 15.2857C7.89286 15.5714 9.17857 15.7143 10.5 15.7143C15.7467 15.7143 20 12.1326 20 8C20 3.86735 15.7467 0 10.5 0Z" fill="#fff"/></svg>
|
||||
微信一键登录
|
||||
</button>
|
||||
<button class="phone-btn">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M16.95 13.47L13.78 12.4C13.46 12.29 13.11 12.35 12.85 12.55L11.43 13.61C9.15 12.18 7.32 10.35 5.89 8.07L6.95 6.65C7.15 6.39 7.21 6.04 7.1 5.72L6.03 2.55C5.89 2.14 5.5 1.87 5.07 1.87H2.5C1.95 1.87 1.5 2.32 1.5 2.87C1.5 10.84 7.66 17 15.63 17C16.18 17 16.63 16.55 16.63 16V13.43C16.63 13 16.36 12.61 15.95 12.47L16.95 13.47Z" stroke="#333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
手机号登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
53
figma_html_page/万花筒登录.html
Normal file
53
figma_html_page/万花筒登录.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!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>万花筒</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-content { padding: 60px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.app-title { font-size: 28px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.app-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.logo-placeholder { width: 140px; height: 140px; background: #E5E5E5; border-radius: 8px; margin-bottom: 80px; }
|
||||
.login-buttons { width: 100%; display: flex; flex-direction: column; gap: 16px; }
|
||||
.wechat-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #07C160; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
.phone-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #333; background: #fff; border: 1px solid #E5E5E5; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-content">
|
||||
<h1 class="app-title">万花筒</h1>
|
||||
<p class="app-subtitle">快速生成种草内容</p>
|
||||
<div class="logo-placeholder"></div>
|
||||
<div class="login-buttons">
|
||||
<button class="wechat-btn">
|
||||
<svg width="24" height="20" viewBox="0 0 24 20" fill="none"><path d="M9.5 7C9.5 7.55228 9.05228 8 8.5 8C7.94772 8 7.5 7.55228 7.5 7C7.5 6.44772 7.94772 6 8.5 6C9.05228 6 9.5 6.44772 9.5 7Z" fill="#fff"/><path d="M13.5 7C13.5 7.55228 13.0523 8 12.5 8C11.9477 8 11.5 7.55228 11.5 7C11.5 6.44772 11.9477 6 12.5 6C13.0523 6 13.5 6.44772 13.5 7Z" fill="#fff"/><path d="M10.5 0C5.25329 0 1 3.58172 1 8C1 10.2091 2.10714 12.2091 3.85714 13.5714L3 17L6.71429 15.2857C7.89286 15.5714 9.17857 15.7143 10.5 15.7143C15.7467 15.7143 20 12.1326 20 8C20 3.86735 15.7467 0 10.5 0Z" fill="#fff"/></svg>
|
||||
微信一键登录
|
||||
</button>
|
||||
<button class="phone-btn">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M16.95 13.47L13.78 12.4C13.46 12.29 13.11 12.35 12.85 12.55L11.43 13.61C9.15 12.18 7.32 10.35 5.89 8.07L6.95 6.65C7.15 6.39 7.21 6.04 7.1 5.72L6.03 2.55C5.89 2.14 5.5 1.87 5.07 1.87H2.5C1.95 1.87 1.5 2.32 1.5 2.87C1.5 10.84 7.66 17 15.63 17C16.18 17 16.63 16.55 16.63 16V13.43C16.63 13 16.36 12.61 15.95 12.47L16.95 13.47Z" stroke="#333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
手机号登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
46
figma_html_page/万花筒登录_通过微信登录.html
Normal file
46
figma_html_page/万花筒登录_通过微信登录.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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>万花筒</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-content { padding: 60px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.app-title { font-size: 28px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.app-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.logo-placeholder { width: 140px; height: 140px; background: #E5E5E5; border-radius: 8px; margin-bottom: 80px; }
|
||||
.login-buttons { width: 100%; display: flex; flex-direction: column; gap: 16px; }
|
||||
.wechat-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #07C160; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
.phone-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #333; background: #fff; border: 1px solid #E5E5E5; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="login-content">
|
||||
<h1 class="app-title">万花筒</h1>
|
||||
<p class="app-subtitle">快速生成种草内容</p>
|
||||
<div class="logo-placeholder"></div>
|
||||
<div class="login-buttons">
|
||||
<button class="wechat-btn">
|
||||
<svg width="24" height="20" viewBox="0 0 24 20" fill="none"><path d="M9.5 7C9.5 7.55228 9.05228 8 8.5 8C7.94772 8 7.5 7.55228 7.5 7C7.5 6.44772 7.94772 6 8.5 6C9.05228 6 9.5 6.44772 9.5 7Z" fill="#fff"/><path d="M13.5 7C13.5 7.55228 13.0523 8 12.5 8C11.9477 8 11.5 7.55228 11.5 7C11.5 6.44772 11.9477 6 12.5 6C13.0523 6 13.5 6.44772 13.5 7Z" fill="#fff"/><path d="M10.5 0C5.25329 0 1 3.58172 1 8C1 10.2091 2.10714 12.2091 3.85714 13.5714L3 17L6.71429 15.2857C7.89286 15.5714 9.17857 15.7143 10.5 15.7143C15.7467 15.7143 20 12.1326 20 8C20 3.86735 15.7467 0 10.5 0Z" fill="#fff"/></svg>
|
||||
微信一键登录
|
||||
</button>
|
||||
<button class="phone-btn">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M16.95 13.47L13.78 12.4C13.46 12.29 13.11 12.35 12.85 12.55L11.43 13.61C9.15 12.18 7.32 10.35 5.89 8.07L6.95 6.65C7.15 6.39 7.21 6.04 7.1 5.72L6.03 2.55C5.89 2.14 5.5 1.87 5.07 1.87H2.5C1.95 1.87 1.5 2.32 1.5 2.87C1.5 10.84 7.66 17 15.63 17C16.18 17 16.63 16.55 16.63 16V13.43C16.63 13 16.36 12.61 15.95 12.47L16.95 13.47Z" stroke="#333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
手机号登录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast-overlay" style="display:flex">
|
||||
<div class="toast">
|
||||
<div class="toast-loading"></div>
|
||||
<div class="toast-text">登录中</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
55
figma_html_page/个人中心_已登录有记录-1.html
Normal file
55
figma_html_page/个人中心_已登录有记录-1.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!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>个人中心</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.profile-content { padding: 16px; padding-top: 24px; }
|
||||
.user-info { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
|
||||
.user-info .avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
|
||||
.user-info .avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.user-info .info .user-name { font-size: 18px; font-weight: 600; color: #333; }
|
||||
.user-info .info .user-company { font-size: 13px; color: #999; margin-top: 4px; }
|
||||
.account-row { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #F8F8F8; border-radius: 8px; margin-bottom: 24px; }
|
||||
.row-label { font-size: 16px; color: #333; }
|
||||
.row-right { display: flex; align-items: center; gap: 8px; }
|
||||
.row-value { font-size: 15px; color: #333; }
|
||||
.section-title { font-size: 14px; color: #999; margin-bottom: 16px; }
|
||||
.records-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.record-card { border-radius: 8px; overflow: hidden; }
|
||||
.record-image { width: 100%; aspect-ratio: 1; background: #F5F5F5; }
|
||||
.record-image img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.record-title { font-size: 13px; color: #333; line-height: 1.4; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="profile-content">
|
||||
<div class="user-info">
|
||||
<div class="avatar"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01bFPkVE1K6bVqVYQhT_!!6000000001114-0-tps-200-200.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="user-name">星阿星</div>
|
||||
<div class="user-company">北京乐航时代科技有限公司</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account-row">
|
||||
<span class="row-label">小红书账号</span>
|
||||
<div class="row-right">
|
||||
<span class="row-value">星阿星</span>
|
||||
<svg width="8" height="14" viewBox="0 0 8 14" fill="none"><path d="M1 1L7 7L1 13" stroke="#C0C0C0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title">发布记录</div>
|
||||
<div class="records-grid">
|
||||
<div class="record-card"><div class="record-image"><img src="https://img.alicdn.com/imgextra/i1/O1CN01FH8C3f1VNpKrQq3hI_!!6000000002640-0-tps-800-800.jpg" alt=""></div><p class="record-title">双十一卡诗精油买一波，哪个最好用？...</p></div>
|
||||
<div class="record-card"><div class="record-image"><img src="https://img.alicdn.com/imgextra/i3/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div><p class="record-title">卡诗精油怎么选？山茶花/黑钻/玻尿酸...</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
82
figma_html_page/个人中心_已登录有记录.html
Normal file
82
figma_html_page/个人中心_已登录有记录.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<!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>个人中心</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.profile-content { padding: 16px; padding-top: 24px; }
|
||||
.user-info { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
|
||||
.user-info .avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
|
||||
.user-info .avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.user-info .info .user-name { font-size: 18px; font-weight: 600; color: #333; }
|
||||
.user-info .info .user-company { font-size: 13px; color: #999; margin-top: 4px; }
|
||||
.account-row { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #F8F8F8; border-radius: 8px; margin-bottom: 24px; }
|
||||
.row-label { font-size: 16px; color: #333; }
|
||||
.row-right { display: flex; align-items: center; gap: 8px; }
|
||||
.row-value { font-size: 15px; color: #333; }
|
||||
.section-title { font-size: 14px; color: #999; margin-bottom: 16px; }
|
||||
.records-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.record-card { border-radius: 8px; overflow: hidden; }
|
||||
.record-image { width: 100%; aspect-ratio: 1; background: #F5F5F5; }
|
||||
.record-image img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.record-title { font-size: 13px; color: #333; line-height: 1.4; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-content">
|
||||
<div class="user-info">
|
||||
<div class="avatar"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01bFPkVE1K6bVqVYQhT_!!6000000001114-0-tps-200-200.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="user-name">星阿星</div>
|
||||
<div class="user-company">北京乐航时代科技有限公司</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account-row">
|
||||
<span class="row-label">小红书账号</span>
|
||||
<div class="row-right">
|
||||
<span class="row-value">星阿星</span>
|
||||
<svg width="8" height="14" viewBox="0 0 8 14" fill="none"><path d="M1 1L7 7L1 13" stroke="#C0C0C0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title">发布记录</div>
|
||||
<div class="records-grid">
|
||||
<div class="record-card">
|
||||
<div class="record-image"><img src="https://img.alicdn.com/imgextra/i1/O1CN01FH8C3f1VNpKrQq3hI_!!6000000002640-0-tps-800-800.jpg" alt=""></div>
|
||||
<p class="record-title">双十一卡诗精油买一波，哪个最好用？...</p>
|
||||
</div>
|
||||
<div class="record-card">
|
||||
<div class="record-image"><img src="https://img.alicdn.com/imgextra/i3/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div>
|
||||
<p class="record-title">卡诗精油怎么选？山茶花/黑钻/玻尿酸...</p>
|
||||
</div>
|
||||
<div class="record-card">
|
||||
<div class="record-image"><img src="https://img.alicdn.com/imgextra/i2/O1CN01kpVlwu1HFkEwVXnKH_!!6000000000727-0-tps-800-800.jpg" alt=""></div>
|
||||
<p class="record-title">黑钻 VS 新版卡诗鎏金山茶花到底选哪个？</p>
|
||||
</div>
|
||||
<div class="record-card">
|
||||
<div class="record-image"><img src="https://img.alicdn.com/imgextra/i4/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt=""></div>
|
||||
<p class="record-title">黑钻 VS 新版卡诗鎏金山茶花到底选哪个？</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
43
figma_html_page/个人中心_未登录无记录-1.html
Normal file
43
figma_html_page/个人中心_未登录无记录-1.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!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>个人中心</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.profile-content { padding: 16px; padding-top: 24px; }
|
||||
.user-info { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
|
||||
.user-info .avatar { width: 48px; height: 48px; border-radius: 50%; background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
|
||||
.user-info .user-name { font-size: 18px; font-weight: 600; color: #333; }
|
||||
.account-row { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #F8F8F8; border-radius: 8px; margin-bottom: 24px; }
|
||||
.row-label { font-size: 16px; color: #333; }
|
||||
.row-right { display: flex; align-items: center; gap: 8px; }
|
||||
.row-value { font-size: 15px; color: #999; }
|
||||
.section-title { font-size: 14px; color: #999; margin-bottom: 16px; }
|
||||
.empty-records { display: flex; align-items: center; justify-content: center; height: 300px; color: #999; font-size: 15px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="profile-content">
|
||||
<div class="user-info">
|
||||
<div class="avatar"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="8" r="4" stroke="#999" stroke-width="2"/><path d="M4 20C4 16.6863 7.58172 14 12 14C16.4183 14 20 16.6863 20 20" stroke="#999" stroke-width="2" stroke-linecap="round"/></svg></div>
|
||||
<span class="user-name">未登录</span>
|
||||
</div>
|
||||
<div class="account-row">
|
||||
<span class="row-label">小红书账号</span>
|
||||
<div class="row-right">
|
||||
<span class="row-value">未绑定</span>
|
||||
<svg width="8" height="14" viewBox="0 0 8 14" fill="none"><path d="M1 1L7 7L1 13" stroke="#C0C0C0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title">发布记录</div>
|
||||
<div class="empty-records">暂无记录</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
58
figma_html_page/个人中心_未登录无记录.html
Normal file
58
figma_html_page/个人中心_未登录无记录.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!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>个人中心</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.profile-content { padding: 16px; padding-top: 24px; }
|
||||
.user-info { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
|
||||
.user-info .avatar { width: 48px; height: 48px; border-radius: 50%; background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
|
||||
.user-info .user-name { font-size: 18px; font-weight: 600; color: #333; }
|
||||
.account-row { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #F8F8F8; border-radius: 8px; margin-bottom: 24px; }
|
||||
.row-label { font-size: 16px; color: #333; }
|
||||
.row-right { display: flex; align-items: center; gap: 8px; }
|
||||
.row-value { font-size: 15px; color: #999; }
|
||||
.section-title { font-size: 14px; color: #999; margin-bottom: 16px; }
|
||||
.empty-records { display: flex; align-items: center; justify-content: center; height: 300px; color: #999; font-size: 15px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-content">
|
||||
<div class="user-info">
|
||||
<div class="avatar">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="8" r="4" stroke="#999" stroke-width="2"/><path d="M4 20C4 16.6863 7.58172 14 12 14C16.4183 14 20 16.6863 20 20" stroke="#999" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<span class="user-name">未登录</span>
|
||||
</div>
|
||||
<div class="account-row">
|
||||
<span class="row-label">小红书账号</span>
|
||||
<div class="row-right">
|
||||
<span class="row-value">未绑定</span>
|
||||
<svg width="8" height="14" viewBox="0 0 8 14" fill="none"><path d="M1 1L7 7L1 13" stroke="#C0C0C0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title">发布记录</div>
|
||||
<div class="empty-records">暂无记录</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
63
figma_html_page/个人中心_解绑二次确认-1.html
Normal file
63
figma_html_page/个人中心_解绑二次确认-1.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!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>个人中心</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.profile-content { padding: 16px; padding-top: 24px; }
|
||||
.user-info { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
|
||||
.user-info .avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
|
||||
.user-info .avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.user-info .info .user-name { font-size: 18px; font-weight: 600; color: #333; }
|
||||
.user-info .info .user-company { font-size: 13px; color: #999; margin-top: 4px; }
|
||||
.account-row { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #F8F8F8; border-radius: 8px; margin-bottom: 24px; }
|
||||
.row-label { font-size: 16px; color: #333; }
|
||||
.row-right { display: flex; align-items: center; gap: 8px; }
|
||||
.row-value { font-size: 15px; color: #333; }
|
||||
.section-title { font-size: 14px; color: #999; margin-bottom: 16px; }
|
||||
.records-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.record-card { border-radius: 8px; overflow: hidden; }
|
||||
.record-image { width: 100%; aspect-ratio: 1; background: #F5F5F5; }
|
||||
.record-image img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.record-title { font-size: 13px; color: #333; line-height: 1.4; margin-top: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="profile-content">
|
||||
<div class="user-info">
|
||||
<div class="avatar"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01bFPkVE1K6bVqVYQhT_!!6000000001114-0-tps-200-200.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="user-name">星阿星</div>
|
||||
<div class="user-company">北京乐航时代科技有限公司</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account-row">
|
||||
<span class="row-label">小红书账号</span>
|
||||
<div class="row-right">
|
||||
<span class="row-value">星阿星</span>
|
||||
<svg width="8" height="14" viewBox="0 0 8 14" fill="none"><path d="M1 1L7 7L1 13" stroke="#C0C0C0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title">发布记录</div>
|
||||
<div class="records-grid">
|
||||
<div class="record-card"><div class="record-image"><img src="https://img.alicdn.com/imgextra/i1/O1CN01FH8C3f1VNpKrQq3hI_!!6000000002640-0-tps-800-800.jpg" alt=""></div><p class="record-title">双十一卡诗精油买一波</p></div>
|
||||
<div class="record-card"><div class="record-image"><img src="https://img.alicdn.com/imgextra/i3/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div><p class="record-title">卡诗精油怎么选</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-overlay active">
|
||||
<div class="modal">
|
||||
<div class="modal-title">确定解绑</div>
|
||||
<div class="modal-message">解绑账号后将无法继续使用它登录小红书账号</div>
|
||||
<button class="modal-btn danger">确定解绑</button>
|
||||
<button class="modal-btn cancel">取 消</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
82
figma_html_page/个人中心_解绑二次确认.html
Normal file
82
figma_html_page/个人中心_解绑二次确认.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<!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>个人中心</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.profile-content { padding: 16px; padding-top: 24px; }
|
||||
.user-info { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
|
||||
.user-info .avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
|
||||
.user-info .avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.user-info .info .user-name { font-size: 18px; font-weight: 600; color: #333; }
|
||||
.user-info .info .user-company { font-size: 13px; color: #999; margin-top: 4px; }
|
||||
.account-row { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #F8F8F8; border-radius: 8px; margin-bottom: 24px; }
|
||||
.row-label { font-size: 16px; color: #333; }
|
||||
.row-right { display: flex; align-items: center; gap: 8px; }
|
||||
.row-value { font-size: 15px; color: #333; }
|
||||
.section-title { font-size: 14px; color: #999; margin-bottom: 16px; }
|
||||
.records-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.record-card { border-radius: 8px; overflow: hidden; }
|
||||
.record-image { width: 100%; aspect-ratio: 1; background: #F5F5F5; }
|
||||
.record-image img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.record-title { font-size: 13px; color: #333; line-height: 1.4; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-content">
|
||||
<div class="user-info">
|
||||
<div class="avatar"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01bFPkVE1K6bVqVYQhT_!!6000000001114-0-tps-200-200.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="user-name">星阿星</div>
|
||||
<div class="user-company">北京乐航时代科技有限公司</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account-row">
|
||||
<span class="row-label">小红书账号</span>
|
||||
<div class="row-right">
|
||||
<span class="row-value">星阿星</span>
|
||||
<svg width="8" height="14" viewBox="0 0 8 14" fill="none"><path d="M1 1L7 7L1 13" stroke="#C0C0C0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title">发布记录</div>
|
||||
<div class="records-grid">
|
||||
<div class="record-card">
|
||||
<div class="record-image"><img src="https://img.alicdn.com/imgextra/i1/O1CN01FH8C3f1VNpKrQq3hI_!!6000000002640-0-tps-800-800.jpg" alt=""></div>
|
||||
<p class="record-title">双十一卡诗精油买一波，哪个最好用？...</p>
|
||||
</div>
|
||||
<div class="record-card">
|
||||
<div class="record-image"><img src="https://img.alicdn.com/imgextra/i3/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div>
|
||||
<p class="record-title">卡诗精油怎么选？山茶花/黑钻/玻尿酸...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-overlay active">
|
||||
<div class="modal">
|
||||
<div class="modal-title">确定解绑</div>
|
||||
<div class="modal-message">解绑账号后将无法继续使用它登录小红书账号</div>
|
||||
<button class="modal-btn danger">确定解绑</button>
|
||||
<button class="modal-btn cancel">取 消</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
37
figma_html_page/个人中心入口_已登录-1.html
Normal file
37
figma_html_page/个人中心入口_已登录-1.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!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>选择商品</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.page-title { font-size: 17px; font-weight: 500; color: #333; text-align: center; padding: 24px 0 20px; }
|
||||
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
|
||||
.product-card { background: #fff; border-radius: 8px; border: 1px solid #E5E5E5; padding: 12px; padding-bottom: 16px; position: relative; }
|
||||
.product-card .checkbox { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
|
||||
.product-image { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||||
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.product-name { font-size: 14px; color: #333; text-align: center; }
|
||||
.user-avatar { position: fixed; right: 16px; bottom: 100px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
|
||||
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.bottom-section { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="page-title">选择商品</div>
|
||||
<div class="product-grid">
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i4/2206686532579/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt=""></div><div class="product-name">感冒灵颗粒</div></div>
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01Qj0nPb1Vubp6RQRPN_!!2838892713.jpg" alt=""></div><div class="product-name">电子血压仪</div></div>
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i3/2200724907121/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div><div class="product-name">小林退热贴</div></div>
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i1/2201191528517/O1CN012gMFjB1aUxmMqhQE1_!!2201191528517.jpg" alt=""></div><div class="product-name">芬必得布洛芬释...</div></div>
|
||||
</div>
|
||||
<div class="user-avatar"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01bFPkVE1K6bVqVYQhT_!!6000000001114-0-tps-200-200.jpg" alt=""></div>
|
||||
<div class="bottom-section"><button class="green-btn">去生成内容</button></div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
68
figma_html_page/个人中心入口_已登录.html
Normal file
68
figma_html_page/个人中心入口_已登录.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<!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>选择商品</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.page-title { font-size: 17px; font-weight: 500; color: #333; text-align: center; padding: 24px 0 20px; }
|
||||
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
|
||||
.product-card { background: #fff; border-radius: 8px; border: 1px solid #E5E5E5; padding: 12px; padding-bottom: 16px; position: relative; }
|
||||
.product-card .checkbox { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
|
||||
.product-image { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||||
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.product-name { font-size: 14px; color: #333; text-align: center; }
|
||||
.user-avatar { position: fixed; right: 16px; bottom: 100px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
|
||||
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.bottom-section { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-title">选择商品</div>
|
||||
<div class="product-grid">
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i4/2206686532579/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt=""></div>
|
||||
<div class="product-name">感冒灵颗粒</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01Qj0nPb1Vubp6RQRPN_!!2838892713.jpg" alt=""></div>
|
||||
<div class="product-name">电子血压仪</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i3/2200724907121/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div>
|
||||
<div class="product-name">小林退热贴</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i1/2201191528517/O1CN012gMFjB1aUxmMqhQE1_!!2201191528517.jpg" alt=""></div>
|
||||
<div class="product-name">芬必得布洛芬释...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-avatar">
|
||||
<img src="https://gw.alicdn.com/imgextra/i3/O1CN01bFPkVE1K6bVqVYQhT_!!6000000001114-0-tps-200-200.jpg" alt="">
|
||||
</div>
|
||||
<div class="bottom-section"><button class="green-btn">去生成内容</button></div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
67
figma_html_page/个人中心入口_未登录.html
Normal file
67
figma_html_page/个人中心入口_未登录.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!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>选择商品</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.page-title { font-size: 17px; font-weight: 500; color: #333; text-align: center; padding: 24px 0 20px; }
|
||||
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
|
||||
.product-card { background: #fff; border-radius: 8px; border: 1px solid #E5E5E5; padding: 12px; padding-bottom: 16px; position: relative; }
|
||||
.product-card .checkbox { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
|
||||
.product-image { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||||
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.product-name { font-size: 14px; color: #333; text-align: center; }
|
||||
.user-avatar { position: fixed; right: 16px; bottom: 100px; width: 44px; height: 44px; border-radius: 50%; background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
|
||||
.bottom-section { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-title">选择商品</div>
|
||||
<div class="product-grid">
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i4/2206686532579/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt=""></div>
|
||||
<div class="product-name">感冒灵颗粒</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01Qj0nPb1Vubp6RQRPN_!!2838892713.jpg" alt=""></div>
|
||||
<div class="product-name">电子血压仪</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i3/2200724907121/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div>
|
||||
<div class="product-name">小林退热贴</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i1/2201191528517/O1CN012gMFjB1aUxmMqhQE1_!!2201191528517.jpg" alt=""></div>
|
||||
<div class="product-name">芬必得布洛芬释...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-avatar">
|
||||
<svg viewBox="0 0 24 24" fill="none" style="width:24px;height:24px"><circle cx="12" cy="8" r="4" stroke="#C0C0C0" stroke-width="2"/><path d="M4 20C4 16.6863 7.58172 14 12 14C16.4183 14 20 16.6863 20 20" stroke="#C0C0C0" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="bottom-section"><button class="green-btn">去生成内容</button></div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
67
figma_html_page/商品数量为1.html
Normal file
67
figma_html_page/商品数量为1.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!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>选择商品</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.page-title { font-size: 17px; font-weight: 500; color: #333; text-align: center; padding: 24px 0 20px; }
|
||||
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
|
||||
.product-card { background: #fff; border-radius: 8px; border: 1px solid #E5E5E5; padding: 12px; padding-bottom: 16px; position: relative; cursor: pointer; }
|
||||
.product-card.selected { border-color: #07C160; border-width: 2px; }
|
||||
.product-card .checkbox { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
|
||||
.product-image { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||||
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.product-name { font-size: 14px; color: #333; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.user-avatar { position: fixed; right: 16px; bottom: 100px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
|
||||
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.bottom-section { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-title">选择商品</div>
|
||||
<div class="product-grid">
|
||||
<div class="product-card selected">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#07C160"/><path d="M6 10L9 13L14 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i4/2206686532579/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt="感冒灵颗粒"></div>
|
||||
<div class="product-name">感冒灵颗粒</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01Qj0nPb1Vubp6RQRPN_!!2838892713.jpg" alt="电子血压仪"></div>
|
||||
<div class="product-name">电子血压仪</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i3/2200724907121/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt="小林退热贴"></div>
|
||||
<div class="product-name">小林退热贴</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i1/2201191528517/O1CN012gMFjB1aUxmMqhQE1_!!2201191528517.jpg" alt="芬必得布洛芬释..."></div>
|
||||
<div class="product-name">芬必得布洛芬释...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-avatar"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01bFPkVE1K6bVqVYQhT_!!6000000001114-0-tps-200-200.jpg" alt=""></div>
|
||||
<div class="bottom-section"><button class="green-btn">去生成内容</button></div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
67
figma_html_page/商品数量为2.html
Normal file
67
figma_html_page/商品数量为2.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!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>选择商品</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.page-title { font-size: 17px; font-weight: 500; color: #333; text-align: center; padding: 24px 0 20px; }
|
||||
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
|
||||
.product-card { background: #fff; border-radius: 8px; border: 1px solid #E5E5E5; padding: 12px; padding-bottom: 16px; position: relative; cursor: pointer; }
|
||||
.product-card.selected { border-color: #07C160; border-width: 2px; }
|
||||
.product-card .checkbox { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
|
||||
.product-image { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||||
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.product-name { font-size: 14px; color: #333; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.user-avatar { position: fixed; right: 16px; bottom: 100px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
|
||||
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.bottom-section { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-title">选择商品</div>
|
||||
<div class="product-grid">
|
||||
<div class="product-card selected">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#07C160"/><path d="M6 10L9 13L14 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i4/2206686532579/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt="感冒灵颗粒"></div>
|
||||
<div class="product-name">感冒灵颗粒</div>
|
||||
</div>
|
||||
<div class="product-card selected">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#07C160"/><path d="M6 10L9 13L14 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01Qj0nPb1Vubp6RQRPN_!!2838892713.jpg" alt="电子血压仪"></div>
|
||||
<div class="product-name">电子血压仪</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i3/2200724907121/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt="小林退热贴"></div>
|
||||
<div class="product-name">小林退热贴</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i1/2201191528517/O1CN012gMFjB1aUxmMqhQE1_!!2201191528517.jpg" alt="芬必得布洛芬释..."></div>
|
||||
<div class="product-name">芬必得布洛芬释...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-avatar"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01bFPkVE1K6bVqVYQhT_!!6000000001114-0-tps-200-200.jpg" alt=""></div>
|
||||
<div class="bottom-section"><button class="green-btn">去生成内容</button></div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
67
figma_html_page/商品数量为3.html
Normal file
67
figma_html_page/商品数量为3.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!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>选择商品</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.page-title { font-size: 17px; font-weight: 500; color: #333; text-align: center; padding: 24px 0 20px; }
|
||||
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
|
||||
.product-card { background: #fff; border-radius: 8px; border: 1px solid #E5E5E5; padding: 12px; padding-bottom: 16px; position: relative; cursor: pointer; }
|
||||
.product-card.selected { border-color: #07C160; border-width: 2px; }
|
||||
.product-card .checkbox { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
|
||||
.product-image { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||||
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.product-name { font-size: 14px; color: #333; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.user-avatar { position: fixed; right: 16px; bottom: 100px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
|
||||
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.bottom-section { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-title">选择商品</div>
|
||||
<div class="product-grid">
|
||||
<div class="product-card selected">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#07C160"/><path d="M6 10L9 13L14 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i4/2206686532579/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt="感冒灵颗粒"></div>
|
||||
<div class="product-name">感冒灵颗粒</div>
|
||||
</div>
|
||||
<div class="product-card selected">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#07C160"/><path d="M6 10L9 13L14 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01Qj0nPb1Vubp6RQRPN_!!2838892713.jpg" alt="电子血压仪"></div>
|
||||
<div class="product-name">电子血压仪</div>
|
||||
</div>
|
||||
<div class="product-card selected">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#07C160"/><path d="M6 10L9 13L14 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i3/2200724907121/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt="小林退热贴"></div>
|
||||
<div class="product-name">小林退热贴</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i1/2201191528517/O1CN012gMFjB1aUxmMqhQE1_!!2201191528517.jpg" alt="芬必得布洛芬释..."></div>
|
||||
<div class="product-name">芬必得布洛芬释...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-avatar"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01bFPkVE1K6bVqVYQhT_!!6000000001114-0-tps-200-200.jpg" alt=""></div>
|
||||
<div class="bottom-section"><button class="green-btn">去生成内容</button></div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
67
figma_html_page/商品数量为4.html
Normal file
67
figma_html_page/商品数量为4.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!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>选择商品</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.page-title { font-size: 17px; font-weight: 500; color: #333; text-align: center; padding: 24px 0 20px; }
|
||||
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
|
||||
.product-card { background: #fff; border-radius: 8px; border: 1px solid #E5E5E5; padding: 12px; padding-bottom: 16px; position: relative; cursor: pointer; }
|
||||
.product-card.selected { border-color: #07C160; border-width: 2px; }
|
||||
.product-card .checkbox { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
|
||||
.product-image { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||||
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.product-name { font-size: 14px; color: #333; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.user-avatar { position: fixed; right: 16px; bottom: 100px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
|
||||
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.bottom-section { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-title">选择商品</div>
|
||||
<div class="product-grid">
|
||||
<div class="product-card selected">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#07C160"/><path d="M6 10L9 13L14 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i4/2206686532579/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt="感冒灵颗粒"></div>
|
||||
<div class="product-name">感冒灵颗粒</div>
|
||||
</div>
|
||||
<div class="product-card selected">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#07C160"/><path d="M6 10L9 13L14 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01Qj0nPb1Vubp6RQRPN_!!2838892713.jpg" alt="电子血压仪"></div>
|
||||
<div class="product-name">电子血压仪</div>
|
||||
</div>
|
||||
<div class="product-card selected">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#07C160"/><path d="M6 10L9 13L14 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i3/2200724907121/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt="小林退热贴"></div>
|
||||
<div class="product-name">小林退热贴</div>
|
||||
</div>
|
||||
<div class="product-card selected">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#07C160"/><path d="M6 10L9 13L14 7" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i1/2201191528517/O1CN012gMFjB1aUxmMqhQE1_!!2201191528517.jpg" alt="芬必得布洛芬释..."></div>
|
||||
<div class="product-name">芬必得布洛芬释...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-avatar"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01bFPkVE1K6bVqVYQhT_!!6000000001114-0-tps-200-200.jpg" alt=""></div>
|
||||
<div class="bottom-section"><button class="green-btn">去生成内容</button></div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
53
figma_html_page/回到选择商品页面，重新开始流程.html
Normal file
53
figma_html_page/回到选择商品页面，重新开始流程.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!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>选择商品</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.page-title { font-size: 17px; font-weight: 500; color: #333; text-align: center; padding: 24px 0 20px; }
|
||||
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
|
||||
.product-card { background: #fff; border-radius: 8px; border: 1px solid #E5E5E5; padding: 12px; padding-bottom: 16px; position: relative; }
|
||||
.product-card .checkbox { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
|
||||
.product-image { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||||
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.product-name { font-size: 14px; color: #333; text-align: center; }
|
||||
.user-avatar { position: fixed; right: 16px; bottom: 100px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
|
||||
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.bottom-section { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="page-title">选择商品</div>
|
||||
<div class="product-grid">
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i4/2206686532579/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt=""></div>
|
||||
<div class="product-name">感冒灵颗粒</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01Qj0nPb1Vubp6RQRPN_!!2838892713.jpg" alt=""></div>
|
||||
<div class="product-name">电子血压仪</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i3/2200724907121/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div>
|
||||
<div class="product-name">小林退热贴</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i1/2201191528517/O1CN012gMFjB1aUxmMqhQE1_!!2201191528517.jpg" alt=""></div>
|
||||
<div class="product-name">芬必得布洛芬释...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-avatar"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01bFPkVE1K6bVqVYQhT_!!6000000001114-0-tps-200-200.jpg" alt=""></div>
|
||||
<div class="bottom-section"><button class="green-btn">去生成内容</button></div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
31
figma_html_page/图文标注-1.html
Normal file
31
figma_html_page/图文标注-1.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!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>图文标注</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.annotation-content { padding: 24px 16px; }
|
||||
.annotation-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 24px; text-align: center; }
|
||||
.annotation-item { margin-bottom: 24px; }
|
||||
.annotation-label { font-size: 14px; color: #666; margin-bottom: 8px; }
|
||||
.annotation-box { background: #F5F5F5; border-radius: 8px; padding: 16px; }
|
||||
.annotation-text { font-size: 15px; color: #333; line-height: 1.6; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="annotation-content">
|
||||
<h1 class="annotation-title">图文标注说明</h1>
|
||||
<div class="annotation-item">
|
||||
<div class="annotation-label">图片说明</div>
|
||||
<div class="annotation-box"><p class="annotation-text">选择商品后，系统会自动生成相关的种草内容。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
39
figma_html_page/图文标注.html
Normal file
39
figma_html_page/图文标注.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!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>图文标注</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.annotation-content { padding: 24px 16px; }
|
||||
.annotation-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 24px; text-align: center; }
|
||||
.annotation-item { margin-bottom: 24px; }
|
||||
.annotation-label { font-size: 14px; color: #666; margin-bottom: 8px; }
|
||||
.annotation-box { background: #F5F5F5; border-radius: 8px; padding: 16px; }
|
||||
.annotation-text { font-size: 15px; color: #333; line-height: 1.6; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="annotation-content">
|
||||
<h1 class="annotation-title">图文标注说明</h1>
|
||||
<div class="annotation-item">
|
||||
<div class="annotation-label">图片说明</div>
|
||||
<div class="annotation-box">
|
||||
<p class="annotation-text">选择商品后，系统会自动生成相关的种草内容，包括标题和正文。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="annotation-item">
|
||||
<div class="annotation-label">操作说明</div>
|
||||
<div class="annotation-box">
|
||||
<p class="annotation-text">点击"换一换"可以重新生成内容，点击"一键发布"可以将内容发布到小红书。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
49
figma_html_page/手机号登录_修改手机号.html
Normal file
49
figma_html_page/手机号登录_修改手机号.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!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>登录万花筒</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
.input-row input:focus { border-bottom: 2px solid #07C160; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">登录万花筒</h1>
|
||||
<div class="input-row" style="border-bottom: 2px solid #07C160;">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="138001380" maxlength="11" autofocus>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" placeholder="请输入验证码" maxlength="6">
|
||||
<button class="get-code">获取验证码</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
48
figma_html_page/手机号登录_修改验证码.html
Normal file
48
figma_html_page/手机号登录_修改验证码.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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>登录万花筒</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">登录万花筒</h1>
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row" style="border-bottom: 2px solid #07C160;">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" value="1234" maxlength="6" autofocus>
|
||||
<button class="get-code" style="color:#999">59s</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
48
figma_html_page/手机号登录_已输入手机号.html
Normal file
48
figma_html_page/手机号登录_已输入手机号.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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>登录万花筒</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">登录万花筒</h1>
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" placeholder="请输入验证码" maxlength="6">
|
||||
<button class="get-code">获取验证码</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
48
figma_html_page/手机号登录_已输入验证码.html
Normal file
48
figma_html_page/手机号登录_已输入验证码.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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>登录万花筒</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">登录万花筒</h1>
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" value="123456" maxlength="6">
|
||||
<button class="get-code" style="color:#999">59s</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
48
figma_html_page/手机号登录_未输入手机号.html
Normal file
48
figma_html_page/手机号登录_未输入手机号.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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>登录万花筒</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">登录万花筒</h1>
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" placeholder="输入手机号" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" placeholder="请输入验证码" maxlength="6">
|
||||
<button class="get-code">获取验证码</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
56
figma_html_page/手机号登录_登录成功.html
Normal file
56
figma_html_page/手机号登录_登录成功.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!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>登录万花筒</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">登录万花筒</h1>
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" value="123456" maxlength="6">
|
||||
<button class="get-code" style="color:#999">59s</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="toast-overlay" style="display:flex">
|
||||
<div class="toast">
|
||||
<div class="toast-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="toast-text">登录成功</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
54
figma_html_page/手机号登录_获取验证码中.html
Normal file
54
figma_html_page/手机号登录_获取验证码中.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!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>登录万花筒</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">登录万花筒</h1>
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" placeholder="请输入验证码" maxlength="6">
|
||||
<button class="get-code" style="color:#999">获取验证码</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="toast-overlay" style="display:flex">
|
||||
<div class="toast">
|
||||
<div class="toast-loading"></div>
|
||||
<div class="toast-text">获取验证中</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
55
figma_html_page/拉起绑定流程.html
Normal file
55
figma_html_page/拉起绑定流程.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!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>生成内容</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.content { padding: 0 16px; padding-bottom: 100px; }
|
||||
.image-gallery { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 16px; }
|
||||
.image-item { position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
|
||||
.image-item img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.image-item .delete-btn { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
||||
.image-item .delete-btn svg { width: 12px; height: 12px; }
|
||||
.image-item.add-btn { background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
|
||||
.article-title { font-size: 17px; font-weight: 600; color: #333; margin-bottom: 16px; }
|
||||
.article-content { font-size: 15px; color: #333; line-height: 1.8; }
|
||||
.article-content p { margin-bottom: 8px; }
|
||||
.bottom-actions { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; display: flex; gap: 12px; background: #fff; padding-top: 12px; }
|
||||
.btn-outline { flex: 1; padding: 14px; font-size: 17px; font-weight: 500; color: #333; background: #fff; border: 1px solid #E5E5E5; border-radius: 8px; }
|
||||
.bottom-actions .green-btn { flex: 1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="content">
|
||||
<div class="image-gallery">
|
||||
<div class="image-item"><div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div><img src="https://img.alicdn.com/imgextra/i1/O1CN01FH8C3f1VNpKrQq3hI_!!6000000002640-0-tps-800-800.jpg" alt=""></div>
|
||||
<div class="image-item"><div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div><img src="https://img.alicdn.com/imgextra/i3/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div>
|
||||
<div class="image-item"><div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div><img src="https://img.alicdn.com/imgextra/i2/O1CN01kpVlwu1HFkEwVXnKH_!!6000000000727-0-tps-800-800.jpg" alt=""></div>
|
||||
<div class="image-item add-btn"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 5V19M5 12H19" stroke="#999" stroke-width="2" stroke-linecap="round"/></svg></div>
|
||||
</div>
|
||||
<h2 class="article-title">天冷必备！999感冒灵真的救了我</h2>
|
||||
<div class="article-content">
|
||||
<p>最近这个天气真是绝了😭 昨天还穿短袖 今天直接降温10度！</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-actions">
|
||||
<button class="btn-outline">换一换</button>
|
||||
<button class="green-btn">一键发布</button>
|
||||
</div>
|
||||
<div class="toast-overlay" style="display:flex">
|
||||
<div class="toast">
|
||||
<div class="toast-icon info">
|
||||
<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">i</text></svg>
|
||||
</div>
|
||||
<div class="toast-text">请先绑定小红书<br>账号</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
52
figma_html_page/未登录状态.html
Normal file
52
figma_html_page/未登录状态.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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>选择商品</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.page-title { font-size: 17px; font-weight: 500; color: #333; text-align: center; padding: 24px 0 20px; }
|
||||
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
|
||||
.product-card { background: #fff; border-radius: 8px; border: 1px solid #E5E5E5; padding: 12px; padding-bottom: 16px; position: relative; }
|
||||
.product-card .checkbox { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
|
||||
.product-image { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||||
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.product-name { font-size: 14px; color: #333; text-align: center; }
|
||||
.user-avatar { position: fixed; right: 16px; bottom: 100px; width: 44px; height: 44px; border-radius: 50%; background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
|
||||
.bottom-section { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="page-title">选择商品</div>
|
||||
<div class="product-grid">
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i4/2206686532579/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt=""></div>
|
||||
<div class="product-name">感冒灵颗粒</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01Qj0nPb1Vubp6RQRPN_!!2838892713.jpg" alt=""></div>
|
||||
<div class="product-name">电子血压仪</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i3/2200724907121/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div>
|
||||
<div class="product-name">小林退热贴</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i1/2201191528517/O1CN012gMFjB1aUxmMqhQE1_!!2201191528517.jpg" alt=""></div>
|
||||
<div class="product-name">芬必得布洛芬释...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-avatar"><svg viewBox="0 0 24 24" fill="none" style="width:24px;height:24px"><circle cx="12" cy="8" r="4" stroke="#C0C0C0" stroke-width="2"/><path d="M4 20C4 16.6863 7.58172 14 12 14C16.4183 14 20 16.6863 20 20" stroke="#C0C0C0" stroke-width="2" stroke-linecap="round"/></svg></div>
|
||||
<div class="bottom-section"><button class="green-btn">去生成内容</button></div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
37
figma_html_page/未选择商品toast提示-1.html
Normal file
37
figma_html_page/未选择商品toast提示-1.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!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>选择商品</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.page-title { font-size: 17px; font-weight: 500; color: #333; text-align: center; padding: 24px 0 20px; }
|
||||
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
|
||||
.product-card { background: #fff; border-radius: 8px; border: 1px solid #E5E5E5; padding: 12px; padding-bottom: 16px; position: relative; }
|
||||
.product-card .checkbox { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
|
||||
.product-image { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||||
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.product-name { font-size: 14px; color: #333; text-align: center; }
|
||||
.user-avatar { position: fixed; right: 16px; bottom: 100px; width: 44px; height: 44px; border-radius: 50%; background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
|
||||
.bottom-section { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="page-title">选择商品</div>
|
||||
<div class="product-grid">
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i4/2206686532579/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt=""></div><div class="product-name">感冒灵颗粒</div></div>
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01Qj0nPb1Vubp6RQRPN_!!2838892713.jpg" alt=""></div><div class="product-name">电子血压仪</div></div>
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i3/2200724907121/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div><div class="product-name">小林退热贴</div></div>
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i1/2201191528517/O1CN012gMFjB1aUxmMqhQE1_!!2201191528517.jpg" alt=""></div><div class="product-name">芬必得布洛芬释...</div></div>
|
||||
</div>
|
||||
<div class="user-avatar"><svg viewBox="0 0 24 24" fill="none" style="width:24px;height:24px"><circle cx="12" cy="8" r="4" stroke="#C0C0C0" stroke-width="2"/><path d="M4 20C4 16.6863 7.58172 14 12 14C16.4183 14 20 16.6863 20 20" stroke="#C0C0C0" stroke-width="2" stroke-linecap="round"/></svg></div>
|
||||
<div class="bottom-section"><button class="green-btn">去生成内容</button></div>
|
||||
<div class="toast-overlay" style="display:flex"><div class="toast"><div class="toast-icon info"><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">i</text></svg></div><div class="toast-text">请先选择商品</div></div></div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
73
figma_html_page/未选择商品toast提示.html
Normal file
73
figma_html_page/未选择商品toast提示.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!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>选择商品</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.page-title { font-size: 17px; font-weight: 500; color: #333; text-align: center; padding: 24px 0 20px; }
|
||||
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
|
||||
.product-card { background: #fff; border-radius: 8px; border: 1px solid #E5E5E5; padding: 12px; padding-bottom: 16px; position: relative; cursor: pointer; }
|
||||
.product-card .checkbox { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
|
||||
.product-image { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||||
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.product-name { font-size: 14px; color: #333; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.user-avatar { position: fixed; right: 16px; bottom: 100px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
|
||||
.bottom-section { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-title">选择商品</div>
|
||||
<div class="product-grid">
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i4/2206686532579/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt="感冒灵颗粒"></div>
|
||||
<div class="product-name">感冒灵颗粒</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01Qj0nPb1Vubp6RQRPN_!!2838892713.jpg" alt="电子血压仪"></div>
|
||||
<div class="product-name">电子血压仪</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i3/2200724907121/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt="小林退热贴"></div>
|
||||
<div class="product-name">小林退热贴</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div>
|
||||
<div class="product-image"><img src="https://img.alicdn.com/imgextra/i1/2201191528517/O1CN012gMFjB1aUxmMqhQE1_!!2201191528517.jpg" alt="芬必得布洛芬释..."></div>
|
||||
<div class="product-name">芬必得布洛芬释...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-avatar"><svg viewBox="0 0 24 24" fill="none" style="width:24px;height:24px"><circle cx="12" cy="8" r="4" stroke="#C0C0C0" stroke-width="2"/><path d="M4 20C4 16.6863 7.58172 14 12 14C16.4183 14 20 16.6863 20 20" stroke="#C0C0C0" stroke-width="2" stroke-linecap="round"/></svg></div>
|
||||
<div class="bottom-section"><button class="green-btn">去生成内容</button></div>
|
||||
<div class="toast-overlay" style="display:flex">
|
||||
<div class="toast">
|
||||
<div class="toast-icon info">
|
||||
<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="toast-text">请先选择商品</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
52
figma_html_page/生成具体内容-1.html
Normal file
52
figma_html_page/生成具体内容-1.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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>生成内容</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.content { padding: 0 16px; padding-bottom: 100px; }
|
||||
.image-gallery { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 16px; }
|
||||
.image-item { position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
|
||||
.image-item img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.image-item .delete-btn { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
||||
.image-item .delete-btn svg { width: 12px; height: 12px; }
|
||||
.image-item.add-btn { background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
|
||||
.article-title { font-size: 17px; font-weight: 600; color: #333; margin-bottom: 16px; }
|
||||
.article-content { font-size: 15px; color: #333; line-height: 1.8; }
|
||||
.article-content p { margin-bottom: 8px; }
|
||||
.bottom-actions { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; display: flex; gap: 12px; background: #fff; padding-top: 12px; }
|
||||
.btn-outline { flex: 1; padding: 14px; font-size: 17px; font-weight: 500; color: #333; background: #fff; border: 1px solid #E5E5E5; border-radius: 8px; }
|
||||
.bottom-actions .green-btn { flex: 1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="content">
|
||||
<div class="image-gallery">
|
||||
<div class="image-item"><div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div><img src="https://img.alicdn.com/imgextra/i1/O1CN01FH8C3f1VNpKrQq3hI_!!6000000002640-0-tps-800-800.jpg" alt=""></div>
|
||||
<div class="image-item"><div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div><img src="https://img.alicdn.com/imgextra/i3/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div>
|
||||
<div class="image-item"><div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div><img src="https://img.alicdn.com/imgextra/i2/O1CN01kpVlwu1HFkEwVXnKH_!!6000000000727-0-tps-800-800.jpg" alt=""></div>
|
||||
<div class="image-item"><div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div><img src="https://img.alicdn.com/imgextra/i4/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt=""></div>
|
||||
<div class="image-item add-btn"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 5V19M5 12H19" stroke="#999" stroke-width="2" stroke-linecap="round"/></svg></div>
|
||||
</div>
|
||||
<h2 class="article-title">天冷必备！999感冒灵真的救了我</h2>
|
||||
<div class="article-content">
|
||||
<p>最近这个天气真是绝了😭 昨天还穿短袖 今天直接降温10度！办公室一半人都在擤鼻涕…还好我常年备着 999感冒灵！真·家中神药！！</p>
|
||||
<p>🍊 亲测好用点：</p>
|
||||
<p>✅ 冲剂暖暖的超好喝！感冒初期喝一包 全身都舒服了～</p>
|
||||
<p>✅ 中西医结合配方 退烧+缓解鼻塞头疼都很可</p>
|
||||
<p>✅ 最关键的是不会犯困！打工人白天也能安心吃！</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-actions">
|
||||
<button class="btn-outline">换一换</button>
|
||||
<button class="green-btn">一键发布</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
48
figma_html_page/生成具体内容-2.html
Normal file
48
figma_html_page/生成具体内容-2.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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>生成内容</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.content { padding: 0 16px; padding-bottom: 100px; }
|
||||
.image-gallery { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 16px; }
|
||||
.image-item { position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
|
||||
.image-item img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.image-item .delete-btn { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
||||
.image-item .delete-btn svg { width: 12px; height: 12px; }
|
||||
.image-item.add-btn { background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
|
||||
.article-title { font-size: 17px; font-weight: 600; color: #333; margin-bottom: 16px; }
|
||||
.article-content { font-size: 15px; color: #333; line-height: 1.8; }
|
||||
.article-content p { margin-bottom: 8px; }
|
||||
.bottom-actions { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; display: flex; gap: 12px; background: #fff; padding-top: 12px; }
|
||||
.btn-outline { flex: 1; padding: 14px; font-size: 17px; font-weight: 500; color: #333; background: #fff; border: 1px solid #E5E5E5; border-radius: 8px; }
|
||||
.bottom-actions .green-btn { flex: 1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="content">
|
||||
<div class="image-gallery">
|
||||
<div class="image-item"><div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div><img src="https://img.alicdn.com/imgextra/i1/O1CN01FH8C3f1VNpKrQq3hI_!!6000000002640-0-tps-800-800.jpg" alt=""></div>
|
||||
<div class="image-item"><div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div><img src="https://img.alicdn.com/imgextra/i3/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div>
|
||||
<div class="image-item"><div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div><img src="https://img.alicdn.com/imgextra/i2/O1CN01kpVlwu1HFkEwVXnKH_!!6000000000727-0-tps-800-800.jpg" alt=""></div>
|
||||
<div class="image-item add-btn"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 5V19M5 12H19" stroke="#999" stroke-width="2" stroke-linecap="round"/></svg></div>
|
||||
</div>
|
||||
<h2 class="article-title">天冷必备！999感冒灵真的救了我</h2>
|
||||
<div class="article-content">
|
||||
<p>最近这个天气真是绝了😭 昨天还穿短袖 今天直接降温10度！</p>
|
||||
<p>办公室一半人都在擤鼻涕…还好我常年备着 999感冒灵！</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-actions">
|
||||
<button class="btn-outline">换一换</button>
|
||||
<button class="green-btn">一键发布</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
87
figma_html_page/生成具体内容.html
Normal file
87
figma_html_page/生成具体内容.html
Normal file
@@ -0,0 +1,87 @@
|
||||
<!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>生成内容</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.content { padding: 0 16px; padding-bottom: 100px; }
|
||||
.image-gallery { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 16px; -webkit-overflow-scrolling: touch; }
|
||||
.image-gallery::-webkit-scrollbar { display: none; }
|
||||
.image-item { position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
|
||||
.image-item img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.image-item .delete-btn { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.image-item .delete-btn svg { width: 12px; height: 12px; }
|
||||
.image-item.add-btn { background: #F5F5F5; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.article-title { font-size: 17px; font-weight: 600; color: #333; margin-bottom: 16px; line-height: 1.4; }
|
||||
.article-content { font-size: 15px; color: #333; line-height: 1.8; }
|
||||
.article-content p { margin-bottom: 8px; }
|
||||
.bottom-actions { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; display: flex; gap: 12px; background: #fff; padding-top: 12px; }
|
||||
.btn-outline { flex: 1; padding: 14px; font-size: 17px; font-weight: 500; color: #333; background: #fff; border: 1px solid #E5E5E5; border-radius: 8px; cursor: pointer; }
|
||||
.bottom-actions .green-btn { flex: 1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="image-gallery">
|
||||
<div class="image-item">
|
||||
<div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<img src="https://img.alicdn.com/imgextra/i1/O1CN01FH8C3f1VNpKrQq3hI_!!6000000002640-0-tps-800-800.jpg" alt="">
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<img src="https://img.alicdn.com/imgextra/i3/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt="">
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<img src="https://img.alicdn.com/imgextra/i2/O1CN01kpVlwu1HFkEwVXnKH_!!6000000000727-0-tps-800-800.jpg" alt="">
|
||||
</div>
|
||||
<div class="image-item">
|
||||
<div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div>
|
||||
<img src="https://img.alicdn.com/imgextra/i4/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt="">
|
||||
</div>
|
||||
<div class="image-item add-btn">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 5V19M5 12H19" stroke="#999" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="article-title">天冷必备！999感冒灵真的救了我</h2>
|
||||
<div class="article-content">
|
||||
<p>最近这个天气真是绝了😭 昨天还穿短袖 今天直接降温10度！办公室一半人都在擤鼻涕…还好我常年备着 999感冒灵！真·家中神药！！</p>
|
||||
<p>🍊 亲测好用点：</p>
|
||||
<p>✅ 冲剂暖暖的超好喝！感冒初期喝一包 全身都舒服了～</p>
|
||||
<p>✅ 中西医结合配方 退烧+缓解鼻塞头疼都很可</p>
|
||||
<p>✅ 最关键的是不会犯困！打工人白天也能安心吃！</p>
|
||||
<p>（晚上睡前喝还能睡更香hhh)</p>
|
||||
<p>🌟 我的保命用法：</p>
|
||||
<p>感觉喉咙有点痒/打喷嚏👉立刻冲一包预防！</p>
|
||||
<p>已经中招的👉早晚各一包+疯狂喝水</p>
|
||||
<p>搭配VC泡腾片效果加倍✨</p>
|
||||
<p>🛒 购买小贴士：</p>
|
||||
<p>药店/某猫都有 建议家里&办公室各囤一盒！（尤其换季期！）真实分享！但凡有一个人不知道这个宝藏我都会伤心OK？！ #秋冬养生 #感冒灵 #家庭常备药 #换季保命</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-actions">
|
||||
<button class="btn-outline">换一换</button>
|
||||
<button class="green-btn">一键发布</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
47
figma_html_page/登录成功，返回生成内容页.html
Normal file
47
figma_html_page/登录成功，返回生成内容页.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!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>生成内容</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.content { padding: 0 16px; padding-bottom: 100px; }
|
||||
.image-gallery { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 16px; }
|
||||
.image-item { position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
|
||||
.image-item img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.image-item .delete-btn { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
||||
.image-item .delete-btn svg { width: 12px; height: 12px; }
|
||||
.image-item.add-btn { background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
|
||||
.article-title { font-size: 17px; font-weight: 600; color: #333; margin-bottom: 16px; }
|
||||
.article-content { font-size: 15px; color: #333; line-height: 1.8; }
|
||||
.article-content p { margin-bottom: 8px; }
|
||||
.bottom-actions { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; display: flex; gap: 12px; background: #fff; padding-top: 12px; }
|
||||
.btn-outline { flex: 1; padding: 14px; font-size: 17px; font-weight: 500; color: #333; background: #fff; border: 1px solid #E5E5E5; border-radius: 8px; }
|
||||
.bottom-actions .green-btn { flex: 1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="content">
|
||||
<div class="image-gallery">
|
||||
<div class="image-item"><div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div><img src="https://img.alicdn.com/imgextra/i1/O1CN01FH8C3f1VNpKrQq3hI_!!6000000002640-0-tps-800-800.jpg" alt=""></div>
|
||||
<div class="image-item"><div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div><img src="https://img.alicdn.com/imgextra/i3/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div>
|
||||
<div class="image-item"><div class="delete-btn"><svg viewBox="0 0 12 12" fill="none"><path d="M2 2L10 10M10 2L2 10" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/></svg></div><img src="https://img.alicdn.com/imgextra/i2/O1CN01kpVlwu1HFkEwVXnKH_!!6000000000727-0-tps-800-800.jpg" alt=""></div>
|
||||
<div class="image-item add-btn"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 5V19M5 12H19" stroke="#999" stroke-width="2" stroke-linecap="round"/></svg></div>
|
||||
</div>
|
||||
<h2 class="article-title">天冷必备！999感冒灵真的救了我</h2>
|
||||
<div class="article-content">
|
||||
<p>最近这个天气真是绝了😭 昨天还穿短袖 今天直接降温10度！办公室一半人都在擤鼻涕…</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-actions">
|
||||
<button class="btn-outline">换一换</button>
|
||||
<button class="green-btn">一键发布</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
figma_html_page/绑定账户_修改手机号-1.html
Normal file
35
figma_html_page/绑定账户_修改手机号-1.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row" style="border-bottom: 2px solid #FF2442;"><span class="label">手机号</span><span class="prefix">+86</span><input type="tel" value="1380013800" maxlength="11" autofocus></div>
|
||||
<div class="input-row"><span class="label">验证码</span><input type="text" placeholder="请输入验证码" maxlength="6"><button class="get-code">获取验证码</button></div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
43
figma_html_page/绑定账户_修改手机号.html
Normal file
43
figma_html_page/绑定账户_修改手机号.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row" style="border-bottom: 2px solid #FF2442;">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="1380013800" maxlength="11" autofocus>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" placeholder="请输入验证码" maxlength="6">
|
||||
<button class="get-code">获取验证码</button>
|
||||
</div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
figma_html_page/绑定账户_修改验证码-1.html
Normal file
35
figma_html_page/绑定账户_修改验证码-1.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row"><span class="label">手机号</span><span class="prefix">+86</span><input type="tel" value="13800138000" maxlength="11"></div>
|
||||
<div class="input-row" style="border-bottom: 2px solid #FF2442;"><span class="label">验证码</span><input type="text" value="1234" maxlength="6" autofocus><button class="get-code" style="color:#999">59s</button></div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
43
figma_html_page/绑定账户_修改验证码.html
Normal file
43
figma_html_page/绑定账户_修改验证码.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row" style="border-bottom: 2px solid #FF2442;">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" value="1234" maxlength="6" autofocus>
|
||||
<button class="get-code" style="color:#999">59s</button>
|
||||
</div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
figma_html_page/绑定账户_已输入手机号-1.html
Normal file
35
figma_html_page/绑定账户_已输入手机号-1.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row"><span class="label">手机号</span><span class="prefix">+86</span><input type="tel" value="13800138000" maxlength="11"></div>
|
||||
<div class="input-row"><span class="label">验证码</span><input type="text" placeholder="请输入验证码" maxlength="6"><button class="get-code">获取验证码</button></div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
56
figma_html_page/绑定账户_已输入手机号.html
Normal file
56
figma_html_page/绑定账户_已输入手机号.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" placeholder="请输入验证码" maxlength="6">
|
||||
<button class="get-code">获取验证码</button>
|
||||
</div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
figma_html_page/绑定账户_已输入验证码-1.html
Normal file
35
figma_html_page/绑定账户_已输入验证码-1.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row"><span class="label">手机号</span><span class="prefix">+86</span><input type="tel" value="13800138000" maxlength="11"></div>
|
||||
<div class="input-row"><span class="label">验证码</span><input type="text" value="123456" maxlength="6"><button class="get-code" style="color:#999">59s</button></div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
56
figma_html_page/绑定账户_已输入验证码.html
Normal file
56
figma_html_page/绑定账户_已输入验证码.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" value="123456" maxlength="6">
|
||||
<button class="get-code" style="color:#999">59s</button>
|
||||
</div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
figma_html_page/绑定账户_未输入手机号-1.html
Normal file
35
figma_html_page/绑定账户_未输入手机号-1.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row"><span class="label">手机号</span><span class="prefix">+86</span><input type="tel" placeholder="输入手机号" maxlength="11"></div>
|
||||
<div class="input-row"><span class="label">验证码</span><input type="text" placeholder="请输入验证码" maxlength="6"><button class="get-code">获取验证码</button></div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
56
figma_html_page/绑定账户_未输入手机号.html
Normal file
56
figma_html_page/绑定账户_未输入手机号.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" placeholder="输入手机号" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" placeholder="请输入验证码" maxlength="6">
|
||||
<button class="get-code">获取验证码</button>
|
||||
</div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
36
figma_html_page/绑定账户_登录成功-1.html
Normal file
36
figma_html_page/绑定账户_登录成功-1.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row"><span class="label">手机号</span><span class="prefix">+86</span><input type="tel" value="13800138000" maxlength="11"></div>
|
||||
<div class="input-row"><span class="label">验证码</span><input type="text" value="123456" maxlength="6"><button class="get-code" style="color:#999">59s</button></div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast-overlay" style="display:flex"><div class="toast"><div class="toast-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="toast-text">绑定成功</div></div></div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
64
figma_html_page/绑定账户_登录成功.html
Normal file
64
figma_html_page/绑定账户_登录成功.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" value="123456" maxlength="6">
|
||||
<button class="get-code" style="color:#999">59s</button>
|
||||
</div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast-overlay" style="display:flex">
|
||||
<div class="toast">
|
||||
<div class="toast-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="toast-text">绑定成功</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
64
figma_html_page/绑定账户_绑定失败.html
Normal file
64
figma_html_page/绑定账户_绑定失败.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" value="123456" maxlength="6">
|
||||
<button class="get-code" style="color:#999">59s</button>
|
||||
</div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast-overlay" style="display:flex">
|
||||
<div class="toast">
|
||||
<div class="toast-icon info">
|
||||
<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="toast-text">绑定失败，手机<br>号未注册账号</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
36
figma_html_page/绑定账户_获取验证码中-1.html
Normal file
36
figma_html_page/绑定账户_获取验证码中-1.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row"><span class="label">手机号</span><span class="prefix">+86</span><input type="tel" value="13800138000" maxlength="11"></div>
|
||||
<div class="input-row"><span class="label">验证码</span><input type="text" placeholder="请输入验证码" maxlength="6"><button class="get-code" style="color:#999">获取验证码</button></div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast-overlay" style="display:flex"><div class="toast"><div class="toast-loading"></div><div class="toast-text">获取验证中</div></div></div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
62
figma_html_page/绑定账户_获取验证码中.html
Normal file
62
figma_html_page/绑定账户_获取验证码中.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!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>绑定小红书账号</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.bind-content { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
|
||||
.xhs-logo { width: 56px; height: 56px; margin-bottom: 24px; background: #FF2442; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
|
||||
.xhs-logo span { color: #fff; font-size: 12px; font-weight: 600; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; margin-bottom: 8px; }
|
||||
.page-subtitle { font-size: 14px; color: #999; margin-bottom: 40px; }
|
||||
.bind-form { width: 100%; }
|
||||
.red-btn { width: 100%; padding: 14px; font-size: 17px; font-weight: 500; color: #fff; background: #FF2442; border: none; border-radius: 8px; cursor: pointer; margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg>
|
||||
<svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
|
||||
<div class="nav-icons">
|
||||
<div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div>
|
||||
<div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bind-content">
|
||||
<div class="xhs-logo"><span>小红书</span></div>
|
||||
<h1 class="page-title">请绑定小红书账号</h1>
|
||||
<p class="page-subtitle">手机号未注册小红书会导致绑定失败</p>
|
||||
<div class="bind-form">
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" placeholder="请输入验证码" maxlength="6">
|
||||
<button class="get-code" style="color:#999">获取验证码</button>
|
||||
</div>
|
||||
<button class="red-btn">验证并绑定</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast-overlay" style="display:flex">
|
||||
<div class="toast">
|
||||
<div class="toast-loading"></div>
|
||||
<div class="toast-text">获取验证中</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
48
figma_html_page/解除绑定后.html
Normal file
48
figma_html_page/解除绑定后.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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>个人中心</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.profile-content { padding: 16px; padding-top: 24px; }
|
||||
.user-info { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
|
||||
.user-info .avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
|
||||
.user-info .avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.user-info .info .user-name { font-size: 18px; font-weight: 600; color: #333; }
|
||||
.user-info .info .user-company { font-size: 13px; color: #999; margin-top: 4px; }
|
||||
.account-row { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #F8F8F8; border-radius: 8px; margin-bottom: 24px; }
|
||||
.row-label { font-size: 16px; color: #333; }
|
||||
.row-right { display: flex; align-items: center; gap: 8px; }
|
||||
.row-value { font-size: 15px; color: #999; }
|
||||
.section-title { font-size: 14px; color: #999; margin-bottom: 16px; }
|
||||
.empty-records { display: flex; align-items: center; justify-content: center; height: 300px; color: #999; font-size: 15px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="profile-content">
|
||||
<div class="user-info">
|
||||
<div class="avatar"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01bFPkVE1K6bVqVYQhT_!!6000000001114-0-tps-200-200.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="user-name">星阿星</div>
|
||||
<div class="user-company">北京乐航时代科技有限公司</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account-row">
|
||||
<span class="row-label">小红书账号</span>
|
||||
<div class="row-right">
|
||||
<span class="row-value">未绑定</span>
|
||||
<svg width="8" height="14" viewBox="0 0 8 14" fill="none"><path d="M1 1L7 7L1 13" stroke="#C0C0C0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title">发布记录</div>
|
||||
<div class="empty-records">暂无记录</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
27
figma_html_page/账户登录-1.html
Normal file
27
figma_html_page/账户登录-1.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!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>账户登录</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">账户登录</h1>
|
||||
<div class="input-row"><span class="label">手机号</span><span class="prefix">+86</span><input type="tel" placeholder="输入手机号" maxlength="11"></div>
|
||||
<div class="input-row"><span class="label">验证码</span><input type="text" placeholder="请输入验证码" maxlength="6"><button class="get-code">获取验证码</button></div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
figma_html_page/账户登录.html
Normal file
35
figma_html_page/账户登录.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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>账户登录</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">账户登录</h1>
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" placeholder="输入手机号" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" placeholder="请输入验证码" maxlength="6">
|
||||
<button class="get-code">获取验证码</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
figma_html_page/账户登录_修改手机号.html
Normal file
35
figma_html_page/账户登录_修改手机号.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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>账户登录</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">账户登录</h1>
|
||||
<div class="input-row" style="border-bottom: 2px solid #07C160;">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="1380013800" maxlength="11" autofocus>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" placeholder="请输入验证码" maxlength="6">
|
||||
<button class="get-code">获取验证码</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
figma_html_page/账户登录_修改验证码.html
Normal file
35
figma_html_page/账户登录_修改验证码.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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>账户登录</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">账户登录</h1>
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row" style="border-bottom: 2px solid #07C160;">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" value="1234" maxlength="6" autofocus>
|
||||
<button class="get-code" style="color:#999">59s</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
41
figma_html_page/账户登录_已输入_获取验证码中.html
Normal file
41
figma_html_page/账户登录_已输入_获取验证码中.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!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>账户登录</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">账户登录</h1>
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" placeholder="请输入验证码" maxlength="6">
|
||||
<button class="get-code" style="color:#999">获取验证码</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="toast-overlay" style="display:flex">
|
||||
<div class="toast">
|
||||
<div class="toast-loading"></div>
|
||||
<div class="toast-text">获取验证中</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
figma_html_page/账户登录_已输入手机号.html
Normal file
35
figma_html_page/账户登录_已输入手机号.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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>账户登录</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">账户登录</h1>
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" placeholder="请输入验证码" maxlength="6">
|
||||
<button class="get-code">获取验证码</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
figma_html_page/账户登录_已输入验证码.html
Normal file
35
figma_html_page/账户登录_已输入验证码.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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>账户登录</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">账户登录</h1>
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" value="123456" maxlength="6">
|
||||
<button class="get-code" style="color:#999">59s</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
figma_html_page/账户登录_未输入手机号.html
Normal file
35
figma_html_page/账户登录_未输入手机号.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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>账户登录</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">账户登录</h1>
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" placeholder="输入手机号" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" placeholder="请输入验证码" maxlength="6">
|
||||
<button class="get-code">获取验证码</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
43
figma_html_page/账户登录_登录成功.html
Normal file
43
figma_html_page/账户登录_登录成功.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!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>账户登录</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.login-form { padding: 20px 24px; }
|
||||
.page-title { font-size: 22px; font-weight: 600; color: #333; text-align: center; margin-bottom: 40px; }
|
||||
.login-form .green-btn { margin-top: 40px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="login-form">
|
||||
<h1 class="page-title">账户登录</h1>
|
||||
<div class="input-row">
|
||||
<span class="label">手机号</span>
|
||||
<span class="prefix">+86</span>
|
||||
<input type="tel" value="13800138000" maxlength="11">
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<span class="label">验证码</span>
|
||||
<input type="text" value="123456" maxlength="6">
|
||||
<button class="get-code" style="color:#999">59s</button>
|
||||
</div>
|
||||
<button class="green-btn">登录</button>
|
||||
</div>
|
||||
<div class="toast-overlay" style="display:flex">
|
||||
<div class="toast">
|
||||
<div class="toast-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="toast-text">登录成功</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
36
figma_html_page/选择商品-1.html
Normal file
36
figma_html_page/选择商品-1.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!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>选择商品</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.page-title { font-size: 17px; font-weight: 500; color: #333; text-align: center; padding: 24px 0 20px; }
|
||||
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
|
||||
.product-card { background: #fff; border-radius: 8px; border: 1px solid #E5E5E5; padding: 12px; padding-bottom: 16px; position: relative; }
|
||||
.product-card .checkbox { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
|
||||
.product-image { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||||
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.product-name { font-size: 14px; color: #333; text-align: center; }
|
||||
.user-avatar { position: fixed; right: 16px; bottom: 100px; width: 44px; height: 44px; border-radius: 50%; background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
|
||||
.bottom-section { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="page-title">选择商品</div>
|
||||
<div class="product-grid">
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i4/2206686532579/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt=""></div><div class="product-name">感冒灵颗粒</div></div>
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01Qj0nPb1Vubp6RQRPN_!!2838892713.jpg" alt=""></div><div class="product-name">电子血压仪</div></div>
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i3/2200724907121/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div><div class="product-name">小林退热贴</div></div>
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i1/2201191528517/O1CN012gMFjB1aUxmMqhQE1_!!2201191528517.jpg" alt=""></div><div class="product-name">芬必得布洛芬释...</div></div>
|
||||
</div>
|
||||
<div class="user-avatar"><svg viewBox="0 0 24 24" fill="none" style="width:24px;height:24px"><circle cx="12" cy="8" r="4" stroke="#C0C0C0" stroke-width="2"/><path d="M4 20C4 16.6863 7.58172 14 12 14C16.4183 14 20 16.6863 20 20" stroke="#C0C0C0" stroke-width="2" stroke-linecap="round"/></svg></div>
|
||||
<div class="bottom-section"><button class="green-btn">去生成内容</button></div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
36
figma_html_page/选择商品-2.html
Normal file
36
figma_html_page/选择商品-2.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!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>选择商品</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<style>
|
||||
.page-title { font-size: 17px; font-weight: 500; color: #333; text-align: center; padding: 24px 0 20px; }
|
||||
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
|
||||
.product-card { background: #fff; border-radius: 8px; border: 1px solid #E5E5E5; padding: 12px; padding-bottom: 16px; position: relative; }
|
||||
.product-card .checkbox { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; }
|
||||
.product-image { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
|
||||
.product-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
|
||||
.product-name { font-size: 14px; color: #333; text-align: center; }
|
||||
.user-avatar { position: fixed; right: 16px; bottom: 100px; width: 44px; height: 44px; border-radius: 50%; background: #F5F5F5; display: flex; align-items: center; justify-content: center; }
|
||||
.bottom-section { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 375px; padding: 0 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="status-bar"><span class="time">9:41</span><div class="icons"><svg width="18" height="12" viewBox="0 0 18 12" fill="none"><path d="M1 4C1 2.89543 1.89543 2 3 2H4C5.10457 2 6 2.89543 6 4V8C6 9.10457 5.10457 10 4 10H3C1.89543 10 1 9.10457 1 8V4Z" stroke="#000" stroke-width="1.5"/><path d="M7 3C7 2.44772 7.44772 2 8 2H9C9.55228 2 10 2.44772 10 3V9C10 9.55228 9.55228 10 9 10H8C7.44772 10 7 9.55228 7 9V3Z" stroke="#000" stroke-width="1.5"/><path d="M13 1C13 0.447715 13.4477 0 14 0H15C15.5523 0 16 0.447715 16 1V11C16 11.5523 15.5523 12 15 12H14C13.4477 12 13 11.5523 13 11V1Z" stroke="#000" stroke-width="1.5"/></svg><svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 2.5C4.5 2.5 1.5 5 0 8C1.5 5.5 4.5 4 8 4C11.5 4 14.5 5.5 16 8C14.5 5 11.5 2.5 8 2.5Z" fill="#000"/></svg><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#000"/><rect x="2" y="2" width="18" height="8" rx="1" fill="#000"/><path d="M23 4V8C24.1046 8 25 7.10457 25 6C25 4.89543 24.1046 4 23 4Z" fill="#000"/></svg></div></div>
|
||||
<div class="nav-bar"><div class="back-btn"><svg viewBox="0 0 10 18"><path d="M9 1L1 9L9 17" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div><div class="nav-icons"><div class="nav-icon"><svg width="20" height="4" viewBox="0 0 20 4" fill="none"><circle cx="2" cy="2" r="2" fill="#000"/><circle cx="10" cy="2" r="2" fill="#000"/><circle cx="18" cy="2" r="2" fill="#000"/></svg></div><div class="nav-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#000" stroke-width="1.5"/><circle cx="10" cy="10" r="3" stroke="#000" stroke-width="1.5"/></svg></div></div></div>
|
||||
<div class="page-title">选择商品</div>
|
||||
<div class="product-grid">
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i4/2206686532579/O1CN01JfaIrY1TfMPJC3nDO_!!2206686532579.jpg" alt=""></div><div class="product-name">感冒灵颗粒</div></div>
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01Qj0nPb1Vubp6RQRPN_!!2838892713.jpg" alt=""></div><div class="product-name">电子血压仪</div></div>
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i3/2200724907121/O1CN01Dz2yfS1DOGrNQZ4aF_!!2200724907121.jpg" alt=""></div><div class="product-name">小林退热贴</div></div>
|
||||
<div class="product-card"><div class="checkbox"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#E5E5E5" stroke-width="1.5"/></svg></div><div class="product-image"><img src="https://img.alicdn.com/imgextra/i1/2201191528517/O1CN012gMFjB1aUxmMqhQE1_!!2201191528517.jpg" alt=""></div><div class="product-name">芬必得布洛芬释...</div></div>
|
||||
</div>
|
||||
<div class="user-avatar"><svg viewBox="0 0 24 24" fill="none" style="width:24px;height:24px"><circle cx="12" cy="8" r="4" stroke="#C0C0C0" stroke-width="2"/><path d="M4 20C4 16.6863 7.58172 14 12 14C16.4183 14 20 16.6863 20 20" stroke="#C0C0C0" stroke-width="2" stroke-linecap="round"/></svg></div>
|
||||
<div class="bottom-section"><button class="green-btn">去生成内容</button></div>
|
||||
<div class="bottom-indicator"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user