Tcode运营平台改造升级-定价页面根据UI样式进行美化

This commit is contained in:
fmk1023
2025-12-18 17:08:11 +08:00
parent 1714534d3b
commit a7d802a40f
2 changed files with 45 additions and 8 deletions

View File

@@ -257,7 +257,7 @@ const comparisonData = ref<FeatureSection[]>([
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #000;
background-color: #BD2025;
color: #fff;
text-decoration: none;
padding: 8px 16px;

View File

@@ -1,10 +1,21 @@
<template>
<div class="pricing">
<div class="pricing-container">
<header class="page-header">
<h1 class="page-title">定价</h1>
<p class="page-subtitle">查看我们的个人Business Enterprise 套餐定价</p>
</header>
<div class="title-group text-center mb-16">
<div class="flex justify-center items-center mb-6">
<div class="title-arrow-left"></div>
<h2 class="text-[36px] md:text-[42px] font-bold text-[#1a1a1a] px-6 tracking-tight">
定价
</h2>
<div class="title-arrow-right"></div>
</div>
<p class="text-[#888] text-[16px] leading-relaxed max-w-4xl mx-auto font-light">
查看我们的个人Business Enterprise 套餐定价
</p>
</div>
<div class="pricing-grid">
<div
@@ -300,7 +311,7 @@ const plans = ref<Plan[]>([
/* 按钮样式 */
.action-btn {
width: 100%;
background-color: #0d0d0d;
background-color: #BD2025;
color: #fff;
border: none;
padding: 12px 16px;
@@ -316,7 +327,7 @@ const plans = ref<Plan[]>([
}
.action-btn:hover {
background-color: #333;
background-color: #BD2025;
}
.arrow-icon {
@@ -370,7 +381,7 @@ const plans = ref<Plan[]>([
}
.card-footer a, .page-footer-link a {
color: #0d0d0d;
color: #BD2025;
text-decoration: underline;
text-underline-offset: 2px;
}
@@ -381,4 +392,30 @@ const plans = ref<Plan[]>([
font-size: 0.875rem;
color: #6e6e80;
}
/* 标题装饰三角形:严格对齐图片比例 */
.title-arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 14px solid #C8161D;
}
.title-arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 14px solid #C8161D;
}
/* 字体优化 */
h2, h3 {
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
p {
font-family: "PingFang SC", sans-serif;
letter-spacing: 0.02em;
}
</style>