70 lines
2.7 KiB
Vue
70 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { RouterLink } from 'vue-router';
|
|
|
|
import MarketOverview from '@/components/MarketOverview.vue';
|
|
import MarketSyncBar from '@/components/MarketSyncBar.vue';
|
|
|
|
// 首页：大盘行情总览 + 功能入口（看股 / ETF / 选股 / 回测）
|
|
const features = [
|
|
{
|
|
to: '/stocks',
|
|
icon: 'M4 6h16M4 12h16M4 18h10',
|
|
accent: 'bg-amber-500/15 text-amber-300',
|
|
title: '看股',
|
|
desc: '浏览全市场 5,400+ 只股票的信息与历史 K 线数据。',
|
|
},
|
|
{
|
|
to: '/etfs',
|
|
icon: 'M21.21 15.89A10 10 0 1 1 8 2.83M22 12A10 10 0 0 0 12 2v10h10z',
|
|
accent: 'bg-violet-500/15 text-violet-300',
|
|
title: 'ETF',
|
|
desc: '浏览全市场 1,500+ 只场内 ETF 的行情、规模与 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-500/15 text-blue-300',
|
|
title: '选股',
|
|
desc: '用自然语言描述选股条件，快速完成全市场筛选。',
|
|
},
|
|
{
|
|
to: '/backtest',
|
|
icon: 'M3 17l6-6 4 4 8-8M21 7v6h-6',
|
|
accent: 'bg-emerald-500/15 text-emerald-300',
|
|
title: '回测',
|
|
desc: '选择标的与策略参数，查看历史表现和关键绩效指标。',
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full max-w-6xl">
|
|
<MarketOverview />
|
|
|
|
<MarketSyncBar />
|
|
|
|
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
<RouterLink
|
|
v-for="f in features"
|
|
:key="f.to"
|
|
:to="f.to"
|
|
class="group flex flex-1 flex-col rounded-lg border border-[#26272E] bg-[#101014] p-6 transition-all hover:-translate-y-1 hover:border-[#3A3D46] hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-black 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-[#A8AFB8]">{{ 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>
|