117 lines
5.5 KiB
XML
117 lines
5.5 KiB
XML
|
<svg width="800" height="500" viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<defs>
|
||
|
|
<!-- 渐变定义 -->
|
||
|
|
<linearGradient id="cardGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#f8fafc;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#1d4ed8;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="orangeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#f97316;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#ea580c;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="greenGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- 阴影滤镜 -->
|
||
|
|
<filter id="cardShadow" x="-20%" y="-20%" width="140%" height="140%">
|
||
|
|
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#1e40af" flood-opacity="0.08"/>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<!-- 背景 -->
|
||
|
|
<rect width="800" height="500" fill="#f8fafc"/>
|
||
|
|
|
||
|
|
<!-- 装饰性元素 - 左下角 -->
|
||
|
|
<g transform="translate(50, 380)" opacity="0.6">
|
||
|
|
<path d="M0,40 Q15,20 30,35 Q20,10 10,25 Q0,30 0,40" fill="#10b981"/>
|
||
|
|
<path d="M5,35 Q20,15 35,30 Q25,5 15,20 Q5,25 5,35" fill="#34d399"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 装饰性元素 - 右上角 -->
|
||
|
|
<g transform="translate(680, 50)" opacity="0.5">
|
||
|
|
<circle cx="15" cy="15" r="3" fill="#3b82f6"/>
|
||
|
|
<circle cx="30" cy="10" r="2" fill="#f59e0b"/>
|
||
|
|
<circle cx="40" cy="25" r="1.5" fill="#ef4444"/>
|
||
|
|
<rect x="10" y="35" width="25" height="3" rx="1.5" fill="#1d4ed8" opacity="0.6"/>
|
||
|
|
<rect x="15" y="42" width="20" height="2" rx="1" fill="#1e40af" opacity="0.4"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 第一个卡片 - 查看任务 -->
|
||
|
|
<g transform="translate(150, 100)">
|
||
|
|
<rect width="240" height="140" rx="16" fill="url(#cardGradient)" stroke="#e2e8f0" stroke-width="1" filter="url(#cardShadow)"/>
|
||
|
|
|
||
|
|
<!-- 图标 -->
|
||
|
|
<circle cx="60" cy="60" r="24" fill="url(#blueGradient)"/>
|
||
|
|
<g transform="translate(48, 48)">
|
||
|
|
<rect x="0" y="0" width="24" height="24" rx="3" fill="none"/>
|
||
|
|
<rect x="4" y="6" width="16" height="2" rx="1" fill="white"/>
|
||
|
|
<rect x="4" y="10" width="12" height="2" rx="1" fill="white"/>
|
||
|
|
<rect x="4" y="14" width="14" height="2" rx="1" fill="white"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 标题 -->
|
||
|
|
<text x="100" y="55" fill="#1e293b" font-family="Inter, sans-serif" font-size="18" font-weight="600">查看任务</text>
|
||
|
|
<text x="100" y="72" fill="#64748b" font-family="Inter, sans-serif" font-size="13">点击"全部"开始</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 第二个卡片 - 添加标签 -->
|
||
|
|
<g transform="translate(410, 100)">
|
||
|
|
<rect width="240" height="140" rx="16" fill="url(#cardGradient)" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="6,4" filter="url(#cardShadow)"/>
|
||
|
|
|
||
|
|
<!-- 虚线图标 -->
|
||
|
|
<rect x="36" y="36" width="48" height="48" rx="24" fill="none" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4,4"/>
|
||
|
|
<line x1="60" y1="50" x2="60" y2="70" stroke="#64748b" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
<line x1="50" y1="60" x2="70" y2="60" stroke="#64748b" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
|
||
|
|
<!-- 标题 -->
|
||
|
|
<text x="100" y="55" fill="#1e293b" font-family="Inter, sans-serif" font-size="18" font-weight="600">添加标签</text>
|
||
|
|
<text x="100" y="72" fill="#64748b" font-family="Inter, sans-serif" font-size="13">分类管理任务</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 第三个卡片 - 新建任务 -->
|
||
|
|
<g transform="translate(150, 260)">
|
||
|
|
<rect width="240" height="140" rx="16" fill="url(#cardGradient)" stroke="#e2e8f0" stroke-width="1" filter="url(#cardShadow)"/>
|
||
|
|
|
||
|
|
<!-- 图标 -->
|
||
|
|
<circle cx="60" cy="60" r="24" fill="url(#orangeGradient)"/>
|
||
|
|
<g transform="translate(48, 48)">
|
||
|
|
<rect x="0" y="0" width="24" height="24" rx="3" fill="none"/>
|
||
|
|
<line x1="12" y1="6" x2="12" y2="18" stroke="white" stroke-width="3" stroke-linecap="round"/>
|
||
|
|
<line x1="6" y1="12" x2="18" y2="12" stroke="white" stroke-width="3" stroke-linecap="round"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 标题 -->
|
||
|
|
<text x="100" y="55" fill="#1e293b" font-family="Inter, sans-serif" font-size="18" font-weight="600">新建任务</text>
|
||
|
|
<text x="100" y="72" fill="#64748b" font-family="Inter, sans-serif" font-size="13">创建自动化任务</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 第四个卡片 - 运行任务 -->
|
||
|
|
<g transform="translate(410, 260)">
|
||
|
|
<rect width="240" height="140" rx="16" fill="url(#cardGradient)" stroke="#e2e8f0" stroke-width="1" filter="url(#cardShadow)"/>
|
||
|
|
|
||
|
|
<!-- 图标 -->
|
||
|
|
<circle cx="60" cy="60" r="24" fill="url(#greenGradient)"/>
|
||
|
|
<g transform="translate(48, 48)">
|
||
|
|
<path d="M8,6 L18,12 L8,18 Z" fill="white"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 标题 -->
|
||
|
|
<text x="100" y="55" fill="#1e293b" font-family="Inter, sans-serif" font-size="18" font-weight="600">运行任务</text>
|
||
|
|
<text x="100" y="72" fill="#64748b" font-family="Inter, sans-serif" font-size="13">执行已创建任务</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 底部提示 -->
|
||
|
|
<text x="400" y="460" fill="#94a3b8" font-family="Inter, sans-serif" font-size="14" text-anchor="middle" opacity="0.7">
|
||
|
|
选择功能开始使用任务管理系统
|
||
|
|
</text>
|
||
|
|
</svg>
|