Add description field to PowerPackage interface and update UI to display package descriptions. Enhance styles for description tags in Buy Power component.
This commit is contained in:
@@ -14,6 +14,7 @@ export interface PowerPackage {
|
||||
isHot: number; // 是否热门
|
||||
isVip: number; // 是否VIP
|
||||
features: string[]; // 功能特性
|
||||
description: string[]; // 描述关键词
|
||||
status: number;
|
||||
createTime: string;
|
||||
updateTime: string;
|
||||
|
||||
@@ -132,6 +132,24 @@
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.packageDescription {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.descriptionTag {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
background: #e6f7ff;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #91d5ff;
|
||||
}
|
||||
|
||||
.packageFeatures {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -204,6 +204,17 @@ const BuyPowerPage: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 描述信息 */}
|
||||
{pkg.description && pkg.description.length > 0 && (
|
||||
<div className={style.packageDescription}>
|
||||
{pkg.description.map((desc, index) => (
|
||||
<span key={index} className={style.descriptionTag}>
|
||||
{desc}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 特性列表 */}
|
||||
{pkg.features && pkg.features.length > 0 && (
|
||||
<div className={style.packageFeatures}>
|
||||
|
||||
Reference in New Issue
Block a user