Claude 3.7 Sonnet 根据UI设计稿生成前端html页面
UI设计稿：
提示词：
你是一个前端代码工程师，根据UI设计稿，编写对应html页面，样式写在<style>标签里，类名都以"m-"开头
AI回答的结果：
根据提供的UI设计稿，我将编写对应的HTML页面，所有类名都以"m-"开头，样式写在<style>标签里。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>账单明细</title>
<style>
/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #f7f7f7;
color: #333;
}
/* 状态栏 */
.m-status-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background-color: #fff;
}
.m-time {
font-weight: 600;
font-size: 16px;
}
.m-status-icons {
display: flex;
align-items: center;
gap: 5px;
}
/* 标题栏 */
.m-header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 44px;
background-color: #fff;
}
.m-back {
position: absolute;
left: 15px;
font-size: 24px;
}
.m-title {
font-size: 18px;
font-weight: 500;
}
/* 导航Tab */
.m-tabs {
display: flex;
background-color: #fff;
border-bottom: 1px solid #eee;
}
.m-tab {
flex: 1;
text-align: center;
padding: 15px 0;
font-size: 16px;
color: #666;
}
.m-tab.m-active {
color: #333;
font-weight: 500;
position: relative;
}
.m-tab.m-active::after {
content: '';
position: absolute;
bottom: 0;
left: 30%;
width: 40%;
height: 3px;
background-color: #f44336;
border-radius: 3px;
}
/* 账单列表 */
.m-bill-list {
background-color: #fff;
}
.m-bill-item {
display: flex;
padding: 20px 15px;
border-bottom: 1px solid #f5f5f5;
align-items: center;
}
.m-bill-icon {
width: 45px;
height: 45px;
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
font-size: 18px;
font-weight: bold;
}
.m-icon-income {
background-color: #ff7043;
}
.m-icon-expense {
background-color: #29b6f6;
}
.m-bill-info {
flex: 1;
}
.m-bill-type {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}
.m-bill-date {
font-size: 14px;
color: #999;
}
.m-bill-amount {
font-size: 24px;
font-weight: 500;
}
.m-income {
color: #ff7043;
}
.m-expense {
color: #999;
}
/* 底部指示条 */
.m-bottom-indicator {
position: fixed;
bottom: 8px;
left: 0;
right: 0;
margin: 0 auto;
width: 120px;
height: 5px;
background-color: #000;
border-radius: 3px;
}
</style>
</head>
<body>
<!-- 状态栏 -->
<div class="m-status-bar">
<div class="m-time">9:41</div>
<div class="m-status-icons">
<span>●●●</span>
<span>●●●●</span>
<span>●●</span>
</div>
</div>
<!-- 标题栏 -->
<div class="m-header">
<div class="m-back">❮</div>
<div class="m-title">账单明细</div>
</div>
<!-- 导航Tab -->
<div class="m-tabs">
<div class="m-tab m-active">全部</div>
<div class="m-tab">收入</div>
<div class="m-tab">支出</div>
</div>
<!-- 账单列表 -->
<div class="m-bill-list">
<div class="m-bill-item">
<div class="m-bill-icon m-icon-income">收</div>
<div class="m-bill-info">
<div class="m-bill-type">收入-资金分配</div>
<div class="m-bill-date">2024-6-01 12:09:23</div>
</div>
<div class="m-bill-amount m-income">+200</div>
</div>
<div class="m-bill-item">
<div class="m-bill-icon m-icon-income">收</div>
<div class="m-bill-info">
<div class="m-bill-type">收入-资金分配</div>
<div class="m-bill-date">2024-6-01 12:09:23</div>
</div>
<div class="m-bill-amount m-income">+200</div>
</div>
<div class="m-bill-item">
<div class="m-bill-icon m-icon-income">收</div>
<div class="m-bill-info">
<div class="m-bill-type">收入-资金归集</div>
<div class="m-bill-date">2024-6-01 12:09:23</div>
</div>
<div class="m-bill-amount m-income">+200</div>
</div>
<div class="m-bill-item">
<div class="m-bill-icon m-icon-expense">支</div>
<div class="m-bill-info">
<div class="m-bill-type">支出-预授权加油</div>
<div class="m-bill-date">2024-6-01 12:09:23</div>
</div>
<div class="m-bill-amount m-expense">-200</div>
</div>
<div class="m-bill-item">
<div class="m-bill-icon m-icon-expense">支</div>
<div class="m-bill-info">
<div class="m-bill-type">支出-室内支付</div>
<div class="m-bill-date">2024-6-01 12:09:23</div>
</div>
<div class="m-bill-amount m-expense">-200</div>
</div>
</div>
<!-- 底部指示条 -->
<div class="m-bottom-indicator"></div>
</body>
</html>
```
这段代码实现了UI设计稿中的所有元素：
- 顶部状态栏（时间和信号图标）
- 标题栏（返回按钮和"账单明细"标题）
- 导航Tab（全部、收入、支出，"全部"处于选中状态）
- 账单列表（带有图标、类型、日期和金额）
- iPhone的底部指示条
所有样式均写在`<style>`标签内，所有类名都以"m-"开头，符合要求。效果：
人工智能学习网站
https://chat.xutongbao.top