style: 整体调整

This commit is contained in:
ccnetcore
2025-08-23 12:14:09 +08:00
parent 56ec260e3a
commit 06f0c6caa7
14 changed files with 154 additions and 162 deletions

BIN
Yi.Abp.Net8/publish_02.zip Normal file

Binary file not shown.

Binary file not shown.

View File

@@ -0,0 +1,7 @@
{
"env": {
"ANTHROPIC_AUTH_TOKEN": "sk-lVcGFMOQfXYtZWp1rD4SaBNDNpM270UX2wDqWh",
"ANTHROPIC_BASE_URL": "https://api.token-ai.cn",
"ANTHROPIC_MODEL": "gpt-4o-mini"
}
}

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

View File

@@ -208,7 +208,7 @@ function openContact() {
</h4>
<img
src="${wxSrc.value}"
class="w-50 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
class="w-50 h-50 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
onclick="document.getElementById('wechat-qrcode-fullscreen').style.display = 'flex'"
alt="微信二维码"
>
@@ -218,7 +218,7 @@ function openContact() {
</h4>
<img
src="${wxGroupQD}"
class="w-50 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
class="w-50 h-50 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
onclick="document.getElementById('wx-group-qrcode-fullscreen').style.display = 'flex'"
alt="微信二维码"
>

View File

@@ -242,15 +242,8 @@ function onClose() {
</script>
<template>
<el-dialog
v-model="visible"
:width="isMobile ? '90%' : '980px'"
:fullscreen="isMobile && showDetails"
:show-close="false"
destroy-on-close
class="product-package-dialog"
@close="onClose"
>
<el-dialog v-model="visible" :width="isMobile ? '90%' : '980px'" :fullscreen="isMobile && showDetails"
:show-close="false" destroy-on-close class="product-package-dialog" @close="onClose">
<!-- 详情页 -->
<div v-if="showDetails" class="details-view">
<!-- 顶部标题和返回按钮 -->
@@ -309,15 +302,10 @@ function onClose() {
<!-- Tab 切换 -->
<div class="flex border-b mb-6 overflow-x-auto">
<div
v-for="tab in tabs"
:key="tab.key"
class="cursor-pointer px-5 py-2 -mb-px border-b-2 transition whitespace-nowrap"
:class="activeTab === tab.key
<div v-for="tab in tabs" :key="tab.key"
class="cursor-pointer px-5 py-2 -mb-px border-b-2 transition whitespace-nowrap" :class="activeTab === tab.key
? 'border-orange-500 text-orange-500 font-semibold'
: 'border-transparent text-gray-500 hover:text-orange-500'"
@click="activeTab = tab.key"
>
: 'border-transparent text-gray-500 hover:text-orange-500'" @click="activeTab = tab.key">
{{ tab.label }}
</div>
</div>
@@ -326,13 +314,8 @@ function onClose() {
<div v-if="isMobile" class="mobile-layout">
<!-- 套餐卡片列表 -->
<div class="package-list">
<div
v-for="pkg in currentPackages"
:key="pkg.id"
class="package-card"
:class="{ selected: pkg.id === selectedId }"
@click="selectPackage(pkg)"
>
<div v-for="pkg in currentPackages" :key="pkg.id" class="package-card"
:class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)">
<!-- 标签 -->
<div v-if="pkg.discount" class="discount-tag">
{{ pkg.discount }}
@@ -363,20 +346,25 @@ function onClose() {
</div>
</div>
</div>
<div style="display: flex;justify-content: space-between;margin-top: 15px;">
<div>
<p>充值后加客服微信回复账号名可专享vip售后服务</p>
<p style="margin-top: 10px;">客服微信号chengzilaoge520 或扫描右侧二维码</p>
</div>
<div> <img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt="">
</div>
</div>
<!-- 权益预览 -->
<div class="benefits-preview max-h-200px overflow-y-auto">
<div class="section-title">
专属权益
</div>
<ul class="benefits-list">
<li
v-for="(b, index) in currentBenefits"
:key="index"
class="benefit-item"
>
<li v-for="(b, index) in currentBenefits" :key="index" class="benefit-item">
<span class="dot">
<el-icon><CircleCheck /></el-icon>
<el-icon>
<CircleCheck />
</el-icon>
</span>
<span>
@@ -398,24 +386,16 @@ function onClose() {
<span>实际支付</span>
<span class="price">¥{{ selectedPrice || 0 }}</span>
</div>
<el-button
text
type="primary"
class="view-details-btn"
@click="toggleDetails"
>
<el-button text type="primary" class="view-details-btn" @click="toggleDetails">
了解更多
</el-button>
<el-button
type="primary"
:disabled="!selectedId || isLoading"
:loading="isLoading"
class="pay-button"
@click="pay"
>
<el-button type="primary" :disabled="!selectedId || isLoading" :loading="isLoading" class="pay-button"
@click="pay">
立即支付
</el-button>
</div>
<div class="note-text">
可叠加购买次数过期时间以最后订单为准<br>
最终解释权归YiXinAI所有
@@ -429,13 +409,8 @@ function onClose() {
<div class="w-[60%] flex flex-col justify-between">
<!-- 套餐卡片列表 -->
<div class="flex flex-wrap gap-4">
<div
v-for="pkg in currentPackages"
:key="pkg.id"
class="package-card"
:class="{ selected: pkg.id === selectedId }"
@click="selectPackage(pkg)"
>
<div v-for="pkg in currentPackages" :key="pkg.id" class="package-card"
:class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)">
<!-- 标签 -->
<div v-if="pkg.discount" class="discount-tag">
{{ pkg.discount }}
@@ -466,100 +441,100 @@ function onClose() {
</div>
</div>
</div>
<!-- 支付按钮 -->
<div class="payment-section">
<div v-if="false" class="agreement-text">
登录和注册都代表同意YiXinAI的会员协议
</div>
<div class="payment-action">
<div class="actual-payment">
<span>实际支付</span>
<span class="price">¥{{ selectedPrice || 0 }}</span>
</div>
<div>
<el-button class="pay-button" text type="primary" @click="toggleDetails">
了解更多
</el-button>
<el-button
type="primary"
size="large"
:disabled="!selectedId || isLoading"
:loading="isLoading"
class="pay-button"
@click="pay"
>
立即支付
</el-button>
</div>
</div>
<div class="note-text">
可叠加购买次数过期时间以最后订单为准<br>
最终解释权归YiXinAI所有
<div style="display: flex;justify-content: space-between;margin-top: 15px;">
<div>
<p>充值后加客服微信回复账号名可专享vip售后服务</p>
<p style="margin-top: 10px;">客服微信号chengzilaoge520 或扫描右侧二维码</p>
</div>
<div> <img style="height: 80px;width: 80px;" src="/src/assets/images/wx.png" alt="">
</div>
</div>
<!-- 右栏 套餐权益 + 详情 -->
<div class="w-[40%] flex flex-col justify-between right-panel max-h-400px overflow-y-auto">
<div>
<div class="section-title">
会员权益
<!-- 支付按钮 -->
<div class="payment-section">
<div v-if="false" class="agreement-text">
登录和注册都代表同意YiXinAI的会员协议
</div>
<div class="payment-action">
<div class="actual-payment">
<span>实际支付</span>
<span class="price">¥{{ selectedPrice || 0 }}</span>
</div>
<ul class="benefits-list ">
<li
v-for="(b, index) in currentBenefits"
:key="index"
class="benefit-item "
>
<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>
</span>
</li>
</ul>
<!-- 额外描述 -->
<div v-if="activeTab === 'member'" class="extra-description ">
<SupportModelList />
<!-- <div class="description-card"> -->
<!-- <div class="title"> -->
<!-- 前沿模型AI对话 -->
<!-- </div> -->
<!-- <div class="subtext"> -->
<!-- DP-RI深度思考精准解答 -->
<!-- </div> -->
<!-- <div class="subtext"> -->
<!-- AI写作文档对话AI思维导图等赋能职场 -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="description-card"> -->
<!-- <div class="title"> -->
<!-- AI绘图与设计能力 -->
<!-- </div> -->
<!-- <div class="subtext"> -->
<!-- 视觉吸睛赋能 -->
<!-- </div> -->
<!-- <div class="subtext"> -->
<!-- "AI+办公!"解锁300+工具箱会员权益 -->
<!-- </div> -->
<!-- </div> -->
<div>
<el-button class="pay-button" text type="primary" @click="toggleDetails">
了解更多
</el-button>
<el-button type="primary" size="large" :disabled="!selectedId || isLoading" :loading="isLoading"
class="pay-button" @click="pay">
立即支付
</el-button>
</div>
</div>
<!-- 查看详情 -->
<div class="view-details">
<!-- <el-button text type="primary" @click="toggleDetails"> -->
<!-- 查看详情 -->
<!-- </el-button> -->
<div class="note-text">
可叠加购买次数过期时间以最后订单为准<br>
最终解释权归YiXinAI所有
</div>
</div>
</div>
<!-- 右栏 套餐权益 + 详情 -->
<div class="w-[40%] flex flex-col justify-between right-panel max-h-400px overflow-y-auto">
<div>
<div class="section-title">
会员权益
</div>
<ul class="benefits-list ">
<li v-for="(b, index) in currentBenefits" :key="index" class="benefit-item ">
<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>
</span>
</li>
</ul>
<!-- 额外描述 -->
<div v-if="activeTab === 'member'" class="extra-description ">
<SupportModelList />
<!-- <div class="description-card"> -->
<!-- <div class="title"> -->
<!-- 前沿模型AI对话 -->
<!-- </div> -->
<!-- <div class="subtext"> -->
<!-- DP-RI深度思考精准解答 -->
<!-- </div> -->
<!-- <div class="subtext"> -->
<!-- AI写作文档对话AI思维导图等赋能职场 -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="description-card"> -->
<!-- <div class="title"> -->
<!-- AI绘图与设计能力 -->
<!-- </div> -->
<!-- <div class="subtext"> -->
<!-- 视觉吸睛赋能 -->
<!-- </div> -->
<!-- <div class="subtext"> -->
<!-- "AI+办公!"解锁300+工具箱会员权益 -->
<!-- </div> -->
<!-- </div> -->
</div>
</div>
<!-- 查看详情 -->
<div class="view-details">
<!-- <el-button text type="primary" @click="toggleDetails"> -->
<!-- 查看详情 -->
<!-- </el-button> -->
</div>
</div>
</div>
</div>
</el-dialog>
</template>
@@ -580,7 +555,8 @@ function onClose() {
width: 100%;
border-collapse: collapse;
.table-header, .table-row {
.table-header,
.table-row {
display: table-row;
}
@@ -620,13 +596,16 @@ function onClose() {
border-radius: 8px;
padding: 16px;
transition: all 0.3s;
cursor: pointer;
&.selected {
border: 3px solid #fde19d;
background-image: url('@/assets/images/product_background.svg');
background-repeat: no-repeat; /* 按需设置是否重复 */
background-size: cover; /* 按需设置背景图尺寸适配方式,比如 cover、contain 等 */
background-position: bottom; /* 按需设置背景图位置 */
background-repeat: no-repeat;
/* 按需设置是否重复 */
background-size: cover;
/* 按需设置背景图尺寸适配方式,比如 cover、contain 等 */
background-position: bottom;
/* 按需设置背景图位置 */
box-shadow: 0 4px 6px -1px #fff4e3;
}
@@ -767,6 +746,7 @@ function onClose() {
/* 桌面端样式 */
.desktop-layout {
.package-card {
cursor: pointer;
position: relative;
width: calc(50% - 0.5rem);
border: 1px solid #e5e7eb;
@@ -782,9 +762,12 @@ function onClose() {
&.selected {
border: 3px solid #fde19d;
background-image: url('@/assets/images/product_background.svg');
background-repeat: no-repeat; /* 按需设置是否重复 */
background-size: cover; /* 按需设置背景图尺寸适配方式,比如 cover、contain 等 */
background-position: bottom; /* 按需设置背景图位置 */
background-repeat: no-repeat;
/* 按需设置是否重复 */
background-size: cover;
/* 按需设置背景图尺寸适配方式,比如 cover、contain 等 */
background-position: bottom;
/* 按需设置背景图位置 */
box-shadow: 0 4px 6px -1px #fff4e3;
}
@@ -953,7 +936,8 @@ function onClose() {
overflow-x: auto;
white-space: nowrap;
.table-header, .table-row {
.table-header,
.table-row {
display: table;
width: 100%;
table-layout: fixed;

View File

@@ -97,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">19.9/</span>
一口价订阅最低仅需 <span class="text-red-500 text-3xl font-bold">19.9/</span>
</h2>
<p class="text-gray-600 mb-4">
即解锁以上全部模型随时切换无需单独付费

View File

@@ -72,7 +72,7 @@ function openContact() {
<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>
一口价订阅最低仅需 <span class="text-red-500 text-3xl font-bold">9.9/</span>
</h2>
<p class="text-gray-600 mb-4">
即解锁以上全部模型随时切换无需单独付费

View File

@@ -247,6 +247,7 @@ onMounted(async () => {
href="https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde"
target="_blank"
class="flex items-center gap-2 group"
style="color: #E6A23C;"
title="点击跳转玩法指南专栏"
>
意心AiAI工具玩法指南
@@ -261,7 +262,7 @@ onMounted(async () => {
<!-- 自适应缩放 iframe -->
<iframe
src="https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde"
class="min-w-full h-[700px] scale-100 hover:scale-[0.98] transition-transform duration-300"
class="min-w-full h-[700px] scale-100 duration-300"
loading="lazy"
sandbox="allow-scripts allow-same-origin allow-popups"
@load="document.querySelector('.iframe-loading')?.remove()"

View File

@@ -27,10 +27,10 @@ const showWechatFullscreen = ref(false);
const showWxGroupFullscreen = ref(false);
const wxSrc = computed(
() => `${import.meta.env.VITE_WEB_BASE_API}/wwwroot/aihub/wx.png`,
() => `/src/assets/images/wx.png`,
);
const wxGroupQD = computed(
() => `${import.meta.env.VITE_WEB_BASE_API}/wwwroot/aihub/jlq.png`,
() => `/src/assets/images/wx.png`,
);
// 复制微信号
@@ -237,7 +237,7 @@ onMounted(() => {
</el-tooltip>
<el-input
v-model="searchText"
placeholder="搜索联系方式/备注"
placeholder="搜索备注"
clearable
style="width: 200px; margin-left: 10px;"
@clear="handleSearchClear"
@@ -294,14 +294,14 @@ onMounted(() => {
sortable="custom"
show-overflow-tooltip
/>
<el-table-column show-overflow-tooltip 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>
</el-tooltip>
<span v-else>{{ row.contactInfo || '-' }}</span>
</template>
</el-table-column>
</el-table-column> -->
<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">

View File

@@ -364,7 +364,7 @@ onBeforeUnmount(() => {
<div class="card-header">
<span>近七天每日Token消耗量</span>
<el-tag type="primary">
总计: {{ totalTokens }} tokens
近七日总计: {{ totalTokens }} tokens
</el-tag>
</div>
</template>
@@ -387,7 +387,7 @@ onBeforeUnmount(() => {
<el-card v-loading="loading" class="chart-card">
<template #header>
<div class="card-header">
<span>各模型Token消耗量</span>
<span>各模型Token消耗量</span>
</div>
</template>
<div class="chart-container">

View File

@@ -256,7 +256,7 @@ function contactCustomerService() {
<h4>站长微信(备注AI以便通过)</h4>
<img
:src="wxSrc"
class="w-50 py-5 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
class=" py-5 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
alt="微信二维码"
>
</div>

View File

@@ -3,10 +3,10 @@ import { ElMessageBox } from 'element-plus';
import SupportModelProducts from '@/components/SupportModelProducts/indexl.vue';
const wxSrc = computed(
() => `${import.meta.env.VITE_WEB_BASE_API}/wwwroot/aihub/wx.png`,
() => `/src/assets/images/wx.png`,
);
// 微信群二维码
const wxGroupQD = `${import.meta.env.VITE_WEB_BASE_API}/wwwroot/aihub/jlq.png`;
const wxGroupQD = `/src/assets/images/wx.png`;
const srcList = [
wxGroupQD,
];
@@ -222,7 +222,7 @@ function openContact() {
</h4>
<img
:src="wxSrc"
class="w-50 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
class="w-50 h-50 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
onclick="document.getElementById('wechat-qrcode-fullscreen').style.display = 'flex'"
alt="微信二维码"
>
@@ -233,7 +233,7 @@ function openContact() {
<img
:src="wxGroupQD"
class="w-50 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
class="w-50 h-50 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
onclick="document.getElementById('wx-group-qrcode-fullscreen').style.display = 'flex'"
alt="微信二维码"
>
@@ -349,7 +349,7 @@ function openContact() {
</el-divider>
<el-collapse class="max-w-3xl mx-auto flex justify-center" accordion>
<el-image
style="width: 500px; height: auto;"
style="width: 200px; height: 200px;"
:src="wxGroupQD"
:zoom-rate="1.2"
:max-scale="7"