56 lines
2.2 KiB
Vue
56 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { RouterLink } from 'vue-router';
|
|
|
|
// 首页：三大功能入口（看股 / 选股 / 回测）
|
|
const features = [
|
|
{
|
|
to: '/stocks',
|
|
icon: 'M4 6h16M4 12h16M4 18h10',
|
|
accent: 'bg-amber-50 text-amber-600',
|
|
title: '看股',
|
|
desc: '浏览全市场 5,400+ 只股票的信息与历史 K 线数据。',
|
|
},
|
|
{
|
|
to: '/screener',
|
|
icon: 'M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3z',
|
|
accent: 'bg-blue-50 text-blue-600',
|
|
title: '选股',
|
|
desc: '用自然语言描述选股条件，快速完成全市场筛选。',
|
|
},
|
|
{
|
|
to: '/backtest',
|
|
icon: 'M3 17l6-6 4 4 8-8M21 7v6h-6',
|
|
accent: 'bg-emerald-50 text-emerald-600',
|
|
title: '回测',
|
|
desc: '选择标的与策略参数，查看历史表现和关键绩效指标。',
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full max-w-5xl">
|
|
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
<RouterLink
|
|
v-for="f in features"
|
|
:key="f.to"
|
|
:to="f.to"
|
|
class="group flex flex-1 flex-col rounded-lg border border-slate-200 bg-white p-6 transition-all hover:-translate-y-1 hover:border-slate-300 hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 sm:p-7"
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<span :class="['flex h-14 w-14 shrink-0 items-center justify-center rounded-lg', f.accent]">
|
|
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path :d="f.icon" />
|
|
</svg>
|
|
</span>
|
|
<div class="text-2xl font-semibold">{{ f.title }}</div>
|
|
</div>
|
|
<p class="mt-4 max-w-sm text-sm leading-6 text-slate-500">{{ f.desc }}</p>
|
|
<div class="mt-auto flex items-center justify-end gap-1.5 pt-5 text-sm font-medium text-blue-600">
|
|
进入
|
|
<svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
|
|
</div>
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</template>
|