fmode
/
agent-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							<!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>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
        }
        
        .story-card {
            width: 100%;
            max-width: 600px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        
        .story-card:hover {
            transform: translateY(-5px);
        }
        
        .card-header {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            padding: 20px;
            position: relative;
        }
        
        .card-header h2 {
            margin: 0;
            font-size: 22px;
            font-weight: 600;
        }
        
        .card-header::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 20px;
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="white" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="white"/></svg>');
            background-size: cover;
        }
        
        .card-body {
            padding: 25px;
        }
        
        .section {
            margin-bottom: 25px;
        }
        
        .section-title {
            color: #6e8efb;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        
        .section-title svg {
            margin-right: 8px;
        }
        
        .section-content {
            background: #f9f9f9;
            border-left: 4px solid #a777e3;
            padding: 15px;
            border-radius: 0 8px 8px 0;
            font-size: 15px;
            line-height: 1.6;
            color: #555;
        }
        
        .user-quote {
            font-style: italic;
            color: #666;
            padding: 15px;
            background: #f0f4ff;
            border-radius: 8px;
            position: relative;
            margin: 20px 0;
        }
        
        .user-quote::before {
            content: """;
            font-size: 60px;
            color: #a777e3;
            opacity: 0.2;
            position: absolute;
            top: -15px;
            left: 5px;
            font-family: serif;
        }
        
        .metrics {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .metric {
            background: #e8f0fe;
            color: #4285f4;
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <div class="story-card">
        <div class="card-header">
            <h2>用户故事：快速找到并购买心仪商品</h2>
        </div>
        <div class="card-body">
            <div class="section">
                <div class="section-title">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                        <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                    用户画像
                </div>
                <div class="section-content">
                    <p><strong>姓名：</strong>张丽</p>
                    <p><strong>年龄：</strong>32岁</p>
                    <p><strong>职业：</strong>职场妈妈</p>
                    <p><strong>特点：</strong>工作繁忙，有两个孩子(5岁和8岁)，购物时间有限，注重性价比和商品质量</p>
                </div>
            </div>
            
            <div class="user-quote">
                "作为一个忙碌的职场妈妈，我经常需要在午休或孩子睡觉后的有限时间里快速完成购物。我希望能够轻松找到我需要的商品，比较价格和质量，然后快速下单。现在的购物平台商品太多，筛选起来太费时间了！"
            </div>
            
            <div class="section">
                <div class="section-title">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"></circle>
                        <polyline points="12 6 12 12 16 14"></polyline>
                    </svg>
                    使用场景
                </div>
                <div class="section-content">
                    <p>1. 午休时间只有30分钟，想为孩子购买新学期的文具</p>
                    <p>2. 晚上孩子睡觉后，想为自己选购一件工作穿的衬衫</p>
                    <p>3. 周末准备家庭聚餐，需要快速购买食材和装饰品</p>
                    <p>4. 发现孩子长得快，需要紧急购买大一号的校服</p>
                </div>
            </div>
            
            <div class="section">
                <div class="section-title">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="12" y1="20" x2="12" y2="10"></line>
                        <line x1="18" y1="20" x2="18" y2="4"></line>
                        <line x1="6" y1="20" x2="6" y2="16"></line>
                    </svg>
                    关注指标
                </div>
                <div class="section-content">
                    <div class="metrics">
                        <span class="metric">搜索准确率 ≥90%</span>
                        <span class="metric">筛选效率提高50%</span>
                        <span class="metric">平均下单时间 ≤5分钟</span>
                        <span class="metric">商品详情完整度</span>
                        <span class="metric">价格比较便捷性</span>
                        <span class="metric">移动端操作流畅度</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>