Claude 3.7 Sonnet 根据UI设计稿生成前端html页面

UI设计稿：

提示词：

你是一个前端代码工程师，根据UI设计稿，编写对应html页面，样式写在标签里，类名都以"m-"开头

AI回答的结果：

根据提供的UI设计稿，我将编写对应的HTML页面，所有类名都以"m-"开头，样式写在标签里。
```html



    
    
    账单明细
    
        /* 重置样式 */
        * {
            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;
        }
    


    
    
        9:41
        
            ●●●
            ●●●●
            ●●
        
    
    
    
    
        ❮
        账单明细
    
    
    
    
        全部
        收入
        支出
    
    
    
    
        
            收
            
                收入-资金分配
                2024-6-01 12:09:23
            
            +200
        
        
        
            收
            
                收入-资金分配
                2024-6-01 12:09:23
            
            +200
        
        
        
            收
            
                收入-资金归集
                2024-6-01 12:09:23
            
            +200
        
        
        
            支
            
                支出-预授权加油
                2024-6-01 12:09:23
            
            -200
        
        
        
            支
            
                支出-室内支付
                2024-6-01 12:09:23
            
            -200
        
    
    
    
    


```
这段代码实现了UI设计稿中的所有元素：
- 顶部状态栏（时间和信号图标）
- 标题栏（返回按钮和"账单明细"标题）
- 导航Tab（全部、收入、支出，"全部"处于选中状态）
- 账单列表（带有图标、类型、日期和金额）
- iPhone的底部指示条
所有样式均写在``标签内，所有类名都以"m-"开头，符合要求。

效果：

人工智能学习网站

https://chat.xutongbao.top