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

2025-08-15 23:28:09 +08:00
parent 9a31d14b41
commit f09a9fee75
6 changed files with 464 additions and 103 deletions
--- a/Yi.Ai.Vue3/src/components/ProductPackage/index.vue
+++ b/Yi.Ai.Vue3/src/components/ProductPackage/index.vue
@@ -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 {
--- a/Yi.Ai.Vue3/src/components/SupportModelProducts/indexl.vue
+++ b/Yi.Ai.Vue3/src/components/SupportModelProducts/indexl.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import SupportModelList from '@/components/userPersonalCenter/components/SupportModelList.vue';
+
 const models = [
  { name: 'DeepSeek-R1', price: '2', desc: '国产开源，深度思索模式，不过幻读问题比较大，同时具备思考响应链，在开源模型中永远的神!' },
  { name: 'DeepSeek-chat', price: '1', desc: '国产开源，简单聊天模式，对于中文文章语义体验较好，但响应速度一般' },
@@ -36,10 +38,13 @@ const models = [
      意心AI 为您集成市面上热门模型，订阅即享多模型使用权限，无需额外购买，真正做到一步到位。
    </p>

-    <h2 class="text-2xl font-semibold mb-4 text-center">
+    <!-- 网格布局，默认2列 -->
+    <SupportModelList layout="grid" />
+
+    <h2 v-if="false" class="text-2xl font-semibold mb-4 text-center">
      热门大模型价格排行榜
    </h2>
-    <div class="bg-white shadow rounded-2xl overflow-hidden">
+    <div v-if="false" class="bg-white shadow rounded-2xl overflow-hidden">
      <table class="w-full table-auto border-collapse">
        <thead class="bg-gray-100">
          <tr>
@@ -72,11 +77,13 @@ const models = [

    <div class="mt-16">
      <h2 class="text-2xl font-semibold mb-4 text-center">
-        查看更多大模型价格实时排行榜
+        热门大模型价格实时排行榜
      </h2>
      <div class="rounded-2xl shadow-lg overflow-hidden border border-gray-200">
        <iframe
+
          src="https://easyllm.site/static/models.html"
+
          width="100%"
          height="700"
          class="w-full"
@@ -90,7 +97,7 @@ const models = [
    </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>
+        一口价订阅，仅需 <span class="text-red-500 text-3xl font-bold">19.9元/月</span>  起
      </h2>
      <p class="text-gray-600 mb-4">
        即解锁以上全部模型，随时切换，无需单独付费。
--- a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/RechargeLog.vue
+++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/RechargeLog.vue
@@ -141,6 +141,7 @@ onMounted(() => {
    </div>

    <el-table
+
      v-loading="loading"
      :data="filteredData"
      style="width: 100%"
@@ -152,14 +153,15 @@ onMounted(() => {
      <el-table-column
        prop="content"
        label="套餐类型"
-        width="120"
+        width="150"
        sortable="custom"
+        show-overflow-tooltip
      />
      <el-table-column
+        show-overflow-tooltip
        prop="rechargeAmount"
        label="金额(元)"
-        width="120"
-        align="right"
+        width="110"
        sortable="custom"
      >
        <template #default="{ row }">
@@ -169,16 +171,18 @@ onMounted(() => {
      <el-table-column
        prop="creationTime"
        label="充值时间"
-        width="180"
+        width="160"
        sortable="custom"
+        show-overflow-tooltip
      />
      <el-table-column
        prop="expireDateTime"
        label="到期时间"
-        width="180"
+        width="160"
        sortable="custom"
+        show-overflow-tooltip
      />
-      <el-table-column prop="contactInfo" width="100" label="联系方式">
+      <el-table-column show-overflow-tooltip prop="contactInfo" width="100" label="联系方式">
        <template #default="{ row }">
          <el-tooltip v-if="row.contactInfo && row.contactInfo.length > 8" :content="row.contactInfo" placement="top">
            <span class="ellipsis-text">{{ row.contactInfo }}</span>
@@ -186,7 +190,7 @@ onMounted(() => {
          <span v-else>{{ row.contactInfo || '-' }}</span>
        </template>
      </el-table-column>
-      <el-table-column prop="remark" label="备注">
+      <el-table-column show-overflow-tooltip prop="remark" label="备注" width="160">
        <template #default="{ row }">
          <el-tooltip v-if="row.remark && row.remark.length > 10" :content="row.remark" placement="top">
            <span class="ellipsis-text">{{ row.remark }}</span>
--- a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/SupportModelList.vue
+++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/SupportModelList.vue
@@ -1,60 +1,29 @@
+<SupportModelList :layout="'grid'" />
+
 <script lang="ts" setup>
 import { useModelStore } from '@/stores/modules/model';

-// interface Model {
-//   id: string;
-//   category: string;
-//   modelId: string;
-//   modelName: string;
-//   modelDescribe: string;
-//   modelPrice: number;
-//   modelType: string;
-//   modelShow: string;
-//   systemPrompt: string | null;
-//   apiHost: string | null;
-//   apiKey: string | null;
-//   remark: string;
-// }
+interface Props {
+  layout?: 'list' | 'grid'; // 布局方式：list(单列)或grid(网格)
+  columns?: number; // 网格布局时的列数，默认为2
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: 'list',
+  columns: 2,
+});

 // 从store获取模型列表
-/*
-const modelList = ref<Model[]>([
-  {
-    id: '077be103-1456-a4bb-409c-3a15f04e1ad9',
-    category: 'chat',
-    modelId: 'DeepSeek-R1-0528',
-    modelName: 'DeepSeek-R1',
-    modelDescribe: '国产开源，深度思索模式，不过幻读问题比较大，同时具备思考响应链，在开源模型中永远的神!',
-    modelPrice: 0,
-    modelType: '1',
-    modelShow: '0',
-    systemPrompt: null,
-    apiHost: null,
-    apiKey: null,
-    remark: '国产开源，深度思索模式，不过幻读问题比较大，同时具备思考响应链，在开源模型中永远的神!',
-  },
-  {
-    id: '077be103-1456-a4bb-409c-3a15f04e1ab7',
-    category: 'chat',
-    modelId: 'DeepSeek-V3-0324',
-    modelName: 'DeepSeek-V3',
-    modelDescribe: '国产开源，简单聊天模式，对于中文文章语义体验较好，但响应速度一般',
-    modelPrice: 0,
-    modelType: '1',
-    modelShow: '0',
-    systemPrompt: null,
-    apiHost: null,
-    apiKey: null,
-    remark: '国产开源，简单聊天模式，对于中文文章语义体验较好，但响应速度一般',
-  },
-]);
-*/
-
-// 实际使用时，您可以从store中获取模型列表
-// import { useModelStore } from '@/stores/model';
 const modelStore = useModelStore();
 const modelList = computed(() => modelStore.modelList);
 console.log('modelList---', modelList);
+
+// 计算网格布局的列数
+const gridTemplateColumns = computed(() => {
+  if (props.layout === 'list')
+    return '1fr';
+  return `repeat(${props.columns}, minmax(300px, 1fr))`;
+});
 </script>

 <template>
@@ -62,7 +31,10 @@ console.log('modelList---', modelList);
    <div class="model-header">
      支持的模型
    </div>
-    <div class="model-grid">
+    <div
+      class="model-grid"
+      :style="{ 'grid-template-columns': gridTemplateColumns }"
+    >
      <div v-for="model in modelList" :key="model.id" class="model-card">
        <div class="model-card-header">
          <h3 class="model-name">
@@ -70,7 +42,12 @@ console.log('modelList---', modelList);
          </h3>
          <div class="model-price">
            <template v-if="model.modelPrice === 0">
-              <span class="free-tag">{{ model.modelId === 'DeepSeek-R1-0528' ? '免费' : 'Vip专享' }}</span>
+              <span
+                class="free-tag"
+                :class="model.modelId === 'DeepSeek-R1-0528' ? 'free' : 'vip'"
+              >
+                {{ model.modelId === 'DeepSeek-R1-0528' ? '免费' : 'Vip专享' }}
+              </span>
            </template>
            <template v-else>
              <span class="price">{{ model.modelPrice }}元/次</span>
@@ -97,9 +74,7 @@ console.log('modelList---', modelList);

 <style scoped>
 .model-container {
-  //padding: 10px;
-  max-width: 300px;
-  margin: 10px 0 ;
+  margin: 10px 0;
 }

 .model-header {
@@ -111,7 +86,6 @@ console.log('modelList---', modelList);

 .model-grid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
 }

@@ -148,16 +122,23 @@ console.log('modelList---', modelList);
 .model-price {
  text-align: right;
 }
-
 .free-tag {
-  background: #f0f9eb;
-  color: #67c23a;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
 }

+.free-tag.free {
+  background: #f0f9eb;
+  color: #67c23a;
+}
+
+.free-tag.vip {
+  background: #fff7e6;
+  color: #d48806;
+}
+
 .price {
  display: block;
  font-size: 13px;
@@ -192,7 +173,7 @@ console.log('modelList---', modelList);

@media (max-width: 768px) {
  .model-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr !important;
  }

  .model-card {