152 lines
5.5 KiB
Vue
152 lines
5.5 KiB
Vue
<script setup lang="tsx">
|
|
const data = [
|
|
{
|
|
title: '电动汽车远程服务于管理系统技术规范',
|
|
description: '',
|
|
image: '1.png',
|
|
},
|
|
{
|
|
title: '住宅装饰装修工程施工规范',
|
|
description: '',
|
|
image: '/2.jpg',
|
|
},
|
|
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col pt-20">
|
|
<main class="grid flex-1 gap-4 p-4 overflow-auto md:grid-cols-2 lg:grid-cols-6">
|
|
<div class="relative flex-col items-start hidden gap-8 md:flex">
|
|
<form class="grid items-start w-full gap-6">
|
|
<fieldset class="grid gap-6 p-4 border rounded-lg">
|
|
<legend class="px-1 -ml-1 text-sm font-medium">
|
|
搜索条件
|
|
</legend>
|
|
<div class="grid gap-3">
|
|
<Label for="model">标准来源</Label>
|
|
<Select>
|
|
<SelectTrigger
|
|
id="model"
|
|
class="items-start [&_[data-description]]:hidden"
|
|
>
|
|
<SelectValue placeholder="Select a model" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="genesis">
|
|
<div class="flex items-start gap-3 text-muted-foreground">
|
|
<Rabbit class="size-5" />
|
|
<div class="grid gap-0.5">
|
|
<p>
|
|
Neural
|
|
<span class="font-medium text-foreground">
|
|
Genesis
|
|
</span>
|
|
</p>
|
|
<p class="text-xs" data-description>
|
|
Our fastest model for general use cases.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="explorer">
|
|
<div class="flex items-start gap-3 text-muted-foreground">
|
|
<Bird class="size-5" />
|
|
<div class="grid gap-0.5">
|
|
<p>
|
|
Neural
|
|
<span class="font-medium text-foreground">
|
|
Explorer
|
|
</span>
|
|
</p>
|
|
<p class="text-xs" data-description>
|
|
Performance and speed for efficiency.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="quantum">
|
|
<div class="flex items-start gap-3 text-muted-foreground">
|
|
<Turtle class="size-5" />
|
|
<div class="grid gap-0.5">
|
|
<p>
|
|
Neural
|
|
<span class="font-medium text-foreground">
|
|
Quantum
|
|
</span>
|
|
</p>
|
|
<p class="text-xs" data-description>
|
|
The most powerful model for complex computations.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div class="grid gap-3">
|
|
<Label for="temperature">Temperature</Label>
|
|
<Input id="temperature" type="number" placeholder="0.4" />
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="grid gap-3">
|
|
<Label for="top-p">Top P</Label>
|
|
<Input id="top-p" type="number" placeholder="0.7" />
|
|
</div>
|
|
<div class="grid gap-3">
|
|
<Label for="top-k">Top K</Label>
|
|
<Input id="top-k" type="number" placeholder="0.0" />
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset class="grid gap-6 p-4 border rounded-lg">
|
|
<legend class="px-1 -ml-1 text-sm font-medium">
|
|
Messages
|
|
</legend>
|
|
<div class="grid gap-3">
|
|
<Label for="role">Role</Label>
|
|
<Select default-value="system">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select a role" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="system">
|
|
System
|
|
</SelectItem>
|
|
<SelectItem value="user">
|
|
User
|
|
</SelectItem>
|
|
<SelectItem value="assistant">
|
|
Assistant
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div class="grid gap-3">
|
|
<Label for="content">Content</Label>
|
|
<Textarea
|
|
id="content"
|
|
placeholder="You are a..."
|
|
class="min-h-[9.5rem]"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<div class="relative flex h-full col-span-5 p-4">
|
|
<div class="grid w-full grid-cols-2 gap-4 mx-auto md:grid-cols-3 lg:grid-cols-5">
|
|
<Card v-for="item in data" :key="item.title" class="overflow-hidden">
|
|
<CardContent class="p-0">
|
|
<img :src="item.image" alt="news" class="w-full">
|
|
</CardContent>
|
|
<CardHeader>
|
|
<CardTitle>{{ item.title }}</CardTitle>
|
|
<CardDescription>{{ item.description }}</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|