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

style: 整体调整

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

272
Yi.Ai.Vue3/src/components/ProductPackage/index.vue
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;