feat: 产品订阅页面优化
This commit is contained in:
Gsh
80
Yi.Ai.Vue3/src/components/SupportModelProducts/indexl.vue
Normal file
80
Yi.Ai.Vue3/src/components/SupportModelProducts/indexl.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<script setup lang="ts">
|
||||
const models = [
|
||||
{ name: 'o3', price: '40', desc: 'OpenAI 新一代模型，功能强大，适合多场景应用' },
|
||||
{ name: 'o4-mini', price: '4.4', desc: '轻量级 GPT-4 体验，兼顾性能与成本' },
|
||||
{ name: 'GPT-4.1', price: '8', desc: 'OpenAI 最新标准版模型，推理能力强' },
|
||||
{ name: 'GPT-4.1-mini', price: '1.6', desc: '适合日常使用的 GPT-4.1 精简版' },
|
||||
{ name: 'GPT-4.1-nano', price: '0.4', desc: '极致性价比，快速响应，适合轻量任务' },
|
||||
{ name: 'GPT-4.5', price: '150', desc: 'OpenAI 高级旗舰模型，性能顶级' },
|
||||
{ name: 'o3-mini', price: '4.4', desc: 'o3 系列的小型版本，轻便且高效' },
|
||||
{ name: 'GPT-4o', price: '10', desc: '多模态旗舰模型，支持语音、图像、文本交互' },
|
||||
{ name: 'GPT-4o-mini', price: '5', desc: 'GPT-4o 的轻量版本，功能丰富性价比高' },
|
||||
{ name: 'grok-3', price: '15', desc: '由xAI推出，强调实时性和长上下文处理能力' },
|
||||
{ name: 'grok-3-mini', price: '0.5', desc: 'grok-3 的轻量版，适用于基础任务' },
|
||||
{ name: 'DeepSeek-chat', price: '1', desc: '国产大模型代表，主打中文语义理解' },
|
||||
{ name: 'DeepSeek-R1', price: '2', desc: 'DeepSeek 系列中的推理加强模型' },
|
||||
{ name: 'Phi-4', price: '0.5', desc: '微软推出的小而强大模型，适合部署边缘任务' },
|
||||
{ name: 'Phi-4-reasoning', price: '0.3', desc: 'Phi-4 的逻辑推理优化版本' },
|
||||
{ name: 'Phi-4-mini-instruct', price: '0.3', desc: '专为指令执行设计的微型模型' },
|
||||
{ name: 'GPT-4-8K', price: '60', desc: 'GPT-4 模型支持 8K 上下文，适合大段输入任务' },
|
||||
{ name: 'GPT-4-32K', price: '120', desc: 'GPT-4 支持最大 32K 上下文，适合复杂应用' },
|
||||
{ name: '更多模型请订阅查看....', price: '....', desc: '.....' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 max-w-5xl mx-auto">
|
||||
<h1 class="text-3xl font-bold mb-4 text-center">
|
||||
全网AI模型 一键解锁 · 超高性价比
|
||||
</h1>
|
||||
<p class="text-center text-gray-600 mb-6">
|
||||
意心AI 为您集成市面上热门模型，订阅即享多模型使用权限，无需额外购买，真正做到一步到位。
|
||||
</p>
|
||||
|
||||
<div class="bg-white shadow rounded-2xl overflow-hidden">
|
||||
<table class="w-full table-auto border-collapse">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
|
||||
模型
|
||||
</th>
|
||||
<th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
|
||||
市价（元/月）
|
||||
</th>
|
||||
<th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
|
||||
简介
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="model in models" :key="model.name" class="border-t hover:bg-gray-50">
|
||||
<td class="px-4 py-2 text-sm font-medium text-gray-800">
|
||||
{{ model.name }}
|
||||
</td>
|
||||
<td class="px-4 py-2 text-sm">
|
||||
{{ model.price }}
|
||||
</td>
|
||||
<td class="px-4 py-2 text-sm text-gray-500">
|
||||
{{ model.desc || '-' }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 text-center">
|
||||
<h2 class="text-2xl font-semibold mb-2">
|
||||
一口价订阅，仅需 <span class="text-red-500 text-3xl font-bold">49.9元/月</span>
|
||||
</h2>
|
||||
<p class="text-gray-600 mb-4">
|
||||
即解锁以上全部模型，随时切换，无需单独付费。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
th, td {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
</style>
|
||||
91
Yi.Ai.Vue3/src/components/modeList/index.vue
Normal file
91
Yi.Ai.Vue3/src/components/modeList/index.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script setup lang="ts">
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
|
||||
const models = [
|
||||
{ name: 'o3', price: '40', desc: 'OpenAI 新一代模型，功能强大，适合多场景应用' },
|
||||
{ name: 'o4-mini', price: '4.4', desc: '轻量级 GPT-4 体验，兼顾性能与成本' },
|
||||
{ name: 'GPT-4.1', price: '8', desc: 'OpenAI 最新标准版模型，推理能力强' },
|
||||
{ name: 'GPT-4.1-mini', price: '1.6', desc: '适合日常使用的 GPT-4.1 精简版' },
|
||||
{ name: 'GPT-4.1-nano', price: '0.4', desc: '极致性价比，快速响应，适合轻量任务' },
|
||||
{ name: 'GPT-4.5', price: '150', desc: 'OpenAI 高级旗舰模型，性能顶级' },
|
||||
{ name: 'o3-mini', price: '4.4', desc: 'o3 系列的小型版本，轻便且高效' },
|
||||
{ name: 'GPT-4o', price: '10', desc: '多模态旗舰模型，支持语音、图像、文本交互' },
|
||||
{ name: 'GPT-4o-mini', price: '5', desc: 'GPT-4o 的轻量版本，功能丰富性价比高' },
|
||||
{ name: 'grok-3', price: '15', desc: '由xAI推出，强调实时性和长上下文处理能力' },
|
||||
{ name: 'grok-3-mini', price: '0.5', desc: 'grok-3 的轻量版，适用于基础任务' },
|
||||
{ name: 'DeepSeek-chat', price: '1', desc: '国产大模型代表，主打中文语义理解' },
|
||||
{ name: 'DeepSeek-R1', price: '2', desc: 'DeepSeek 系列中的推理加强模型' },
|
||||
{ name: 'Phi-4', price: '0.5', desc: '微软推出的小而强大模型，适合部署边缘任务' },
|
||||
{ name: 'Phi-4-reasoning', price: '0.3', desc: 'Phi-4 的逻辑推理优化版本' },
|
||||
{ name: 'Phi-4-mini-instruct', price: '0.3', desc: '专为指令执行设计的微型模型' },
|
||||
{ name: 'GPT-4-8K', price: '60', desc: 'GPT-4 模型支持 8K 上下文，适合大段输入任务' },
|
||||
{ name: 'GPT-4-32K', price: '120', desc: 'GPT-4 支持最大 32K 上下文，适合复杂应用' },
|
||||
];
|
||||
|
||||
function openContact() {
|
||||
ElMessageBox.alert('请添加站长微信获取充值方式，备注“AI”以便通过。', '联系站长', {
|
||||
confirmButtonText: '我知道了',
|
||||
type: 'info',
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 max-w-5xl mx-auto">
|
||||
<h1 class="text-3xl font-bold mb-4 text-center">
|
||||
全网AI模型 一键解锁 · 超高性价比
|
||||
</h1>
|
||||
<p class="text-center text-gray-600 mb-6">
|
||||
意心AI 为您集成市面上热门模型，订阅即享多模型使用权限，无需额外购买，真正做到一步到位。
|
||||
</p>
|
||||
|
||||
<div class="bg-white shadow rounded-2xl overflow-hidden">
|
||||
<table class="w-full table-auto border-collapse">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
|
||||
模型
|
||||
</th>
|
||||
<th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
|
||||
市价（元/月）
|
||||
</th>
|
||||
<th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
|
||||
简介
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="model in models" :key="model.name" class="border-t hover:bg-gray-50">
|
||||
<td class="px-4 py-2 text-sm font-medium text-gray-800">
|
||||
{{ model.name }}
|
||||
</td>
|
||||
<td class="px-4 py-2 text-sm">
|
||||
{{ model.price }}
|
||||
</td>
|
||||
<td class="px-4 py-2 text-sm text-gray-500">
|
||||
{{ model.desc || '-' }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 text-center">
|
||||
<h2 class="text-2xl font-semibold mb-2">
|
||||
一口价订阅，仅需 <span class="text-red-500 text-3xl font-bold">9.9元/月</span>
|
||||
</h2>
|
||||
<p class="text-gray-600 mb-4">
|
||||
即解锁以上全部模型，随时切换，无需单独付费。
|
||||
</p>
|
||||
<button class="bg-blue-600 hover:bg-blue-700 text-white text-lg px-6 py-2 rounded-xl transition" @click="openContact">
|
||||
立即订阅
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
th, td {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user