xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 产品相关页面样式优化

Browse Source
This commit is contained in:
Gsh
2025-08-15 23:28:09 +08:00
parent 9a31d14b41
commit f09a9fee75
6 changed files with 464 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
Yi.Ai.Vue3/src/components/ProductPackage/index.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { CircleCheck } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
@@ -7,11 +8,28 @@ import SupportModelList from '@/components/userPersonalCenter/components/Support
import ProductPage from '@/pages/products/index.vue';
const emit = defineEmits(['close']);
const packagesData = {
member: [
{ id: 1, name: '10个月', desc: '', price: 199.9, perMonth: 19.9, tag: '超高性价比', discount: '长期省心', key: 10 },
{ id: 2, name: '6个月', desc: '', price: 143.9, perMonth: 23.9, tag: '年度热销', key: 6 },
{ id: 3, name: '3个月', desc: '', price: 80.7, perMonth: 26.9, tag: '短期体验', discount: '', key: 3 },
{ id: 4, name: '1个月', desc: '', price: 29.9, originalPrice: 49.9, tag: '灵活选择', discount: '', key: 1 },
{ id: 5, name: '测试', desc: '', price: 0.01, originalPrice: 9.9, tag: '测试使用', discount: '', key: 0 },
],
token: [
{ id: 6, name: '10M 输入Token', desc: '', price: 49.9, tag: '轻量用户', discount: '' },
{ id: 7, name: '20M 输入Token', desc: '', price: 79.9, tag: '中等使用', discount: '' },
{ id: 8, name: '30M 输入Token', desc: '', price: 99.9, tag: '量大管饱', discount: '' },
{ id: 9, name: '联系站长', desc: '', price: 0, tag: '企业级需求', discount: '' },
],
};
const visible = ref(true);
const activeTab = ref('member');
const selectedId = ref<number | null>(null);
const selectedPrice = ref(0);
const selectPackageObject = ref<any>(null);
const selectedId = ref<number | null>(packagesData.member[3].id);
const selectedPrice = ref(packagesData.member[3].price);
const selectPackageObject = ref<any>(packagesData.member[3]);
const showDetails = ref(false);
const isMobile = ref(false);
const isLoading = ref(false);
@@ -60,29 +78,19 @@ const tabs = [
// { key: 'token', label: 'Token 套餐' },
];
const packagesData = {
member: [
{ id: 1, name: '10个月', desc: '', price: 199, perMonth: 19.9, tag: '超高性价比', discount: '长期省心', key: 10 },
{ id: 2, name: '6个月', desc: '', price: 143.9, perMonth: 23.9, tag: '年度热销', key: 6 },
{ id: 3, name: '3个月', desc: '', price: 80.7, perMonth: 26.9, tag: '短期体验', discount: '', key: 3 },
{ id: 4, name: '1个月', desc: '', price: 29.9, originalPrice: 49.9, tag: '灵活选择', discount: '', key: 1 },
// { id: 5, name: '测试', desc: '', price: 0.01, originalPrice: 9.9, tag: '测试使用', discount: '', key: 0 },
],
token: [
{ id: 6, name: '10M 输入Token', desc: '', price: 49.9, tag: '轻量用户', discount: '' },
{ id: 7, name: '20M 输入Token', desc: '', price: 79.9, tag: '中等使用', discount: '' },
{ id: 8, name: '30M 输入Token', desc: '', price: 99.9, tag: '量大管饱', discount: '' },
{ id: 9, name: '联系站长', desc: '', price: 0, tag: '企业级需求', discount: '' },
],
};
const benefitsData = {
member: [
{ name: '基础+高级模型访问', value: '' },
{ name: 'AI专线超级加速', value: '' },
{ name: '售后微信群支持', value: '' },
{ name: '专属Api服务', value: '' },
{ name: '站点全模型解锁使用', value: '' },
{ name: '全站所有Ai日常“无限制”使用', value: '' },
{ name: 'Ai专线超级加速', value: '' },
{ name: '专属Api接口提供', value: '' },
{ name: '支持文件/图片/知识库功能', value: '' },
{ name: '支持各类第三方工具集成（IDE/翻译/Utools等）', value: '' },
{ name: '支持Mcp/FunctionCall开发', value: '' },
{ name: '支持安卓/ios/web/客户端使用', value: '' },
{ name: '支持售后群服务，一起畅玩前沿Ai', value: '' },
],
token: [
{ name: 'Token 用途', value: '用于调用 API 或模型生成内容' },
{ name: '灵活计费', value: '按调用量扣费，更加自由' },
@@ -363,7 +371,10 @@ function onClose() {
:key="index"
class="benefit-item"
>
<span class="dot">•</span>
<span class="dot">
<el-icon><CircleCheck /></el-icon>
</span>
<span>
<span class="benefit-name">{{ b.name }}</span>
<span v-if="b.value">：{{ b.value }}</span>
@@ -495,9 +506,11 @@ function onClose() {
<li
v-for="(b, index) in currentBenefits"
:key="index"
class="benefit-item"
class="benefit-item "
>
<span class="dot">•</span>
<span class="dot">
<el-icon><CircleCheck /></el-icon>
</span>
<span>
<span class="benefit-name">{{ b.name }}</span>
<span v-if="b.value">：{{ b.value }}</span>
@@ -605,9 +618,13 @@ function onClose() {
transition: all 0.3s;
&.selected {
border-color: #f97316;
background-color: #fff7ed;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border: 3px solid #fde19d;
background-image: url('@/assets/images/product_background.svg');
background-repeat: no-repeat; /* 按需设置是否重复 */
background-size: cover; /* 按需设置背景图尺寸适配方式，比如 cover、contain 等 */
background-position: bottom; /* 按需设置背景图位置 */
box-shadow: 0 4px 6px -1px #fff4e3;
}
.discount-tag {
@@ -755,11 +772,17 @@ function onClose() {
display: flex;
flex-direction: column;
justify-content: space-between;
//background-color: rgba(255, 245, 238, 0.38);
background: linear-gradient(90deg, #f1f2ebb5, white);
&.selected {
border-color: #f97316;
background-color: #fff7ed;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border: 3px solid #fde19d;
background-image: url('@/assets/images/product_background.svg');
background-repeat: no-repeat; /* 按需设置是否重复 */
background-size: cover; /* 按需设置背景图尺寸适配方式，比如 cover、contain 等 */
background-position: bottom; /* 按需设置背景图位置 */
box-shadow: 0 4px 6px -1px #fff4e3;
}
.discount-tag {