fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(功能中心新增溝通記錄與樣式調整): 在功能中心中新增「溝通記錄」功能，並對樣式進行調整，包括功能卡片的佈局和顏色設置，以提升視覺效果和用戶體驗。

Browse Source
This commit is contained in:
超级老白兔
2025-09-25 11:19:18 +08:00
parent 88653c1656
commit e00bbf576a
2 changed files with 52 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss
View File

@@ -16,6 +16,7 @@
.categoryIcon {
width: 48px;
height: 48px;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
@@ -30,6 +31,9 @@
}
.categoryInfo {
display: flex;
align-items: center;
gap: 10px;
.categoryTitle {
font-size: 24px;
font-weight: 600;
@@ -38,34 +42,31 @@
}
.categoryCount {
font-size: 14px;
font-size: 12px;
color: #666;
background: #f0f0f0;
padding: 4px 12px;
border-radius: 12px;
border: 1px solid #e0e0e0;
height: 24px;
line-height: 20px;
padding: 0 10px;
}
}
}
.featureCards {
display: flex;
justify-content: flex-start;
gap: 24px;
flex-wrap: wrap;
.featureCard {
border-radius: 16px;
border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
width: 30%;
cursor: pointer;
position: relative;
overflow: hidden;
background: white;
padding: 20px;
box-sizing: border-box;
margin-bottom: 16px;
&:hover {
transform: translateY(-2px);
@@ -79,6 +80,7 @@
justify-content: space-between;
margin-bottom: 10px;
.cardIcon {
color: #ffffff;
width: 48px;
height: 48px;
border-radius: 12px;

78
Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx
View File

@@ -2,7 +2,7 @@ import React from "react";
import { useNavigate } from "react-router-dom";
import styles from "./index.module.scss";
import { FeatureCard, featureCategories } from "./index.data.tsx";
import { Col, Row } from "antd";
const PowerCenter: React.FC = () => {
const navigate = useNavigate();
@@ -35,45 +35,51 @@ const PowerCenter: React.FC = () => {
{/* 功能卡片 */}
<div className={styles.featureCards}>
{category.features.map(card => (
<div
key={card.id}
className={styles.featureCard}
onClick={() => handleCardClick(card)}
>
<div className={styles.cardContent}>
<div className={styles.cardHeader}>
<div
className={styles.cardIcon}
style={{ backgroundColor: card.color }}
>
{card.icon}
</div>
{/* 热门/新功能标签 */}
{(card.isHot || card.isNew) && (
<div
className={styles.badge}
data-type={card.isNew ? "new" : "hot"}
>
{card.isHot ? "热门" : "新功能"}
<Row gutter={16}>
{category.features.map(card => (
<Col span={8} key={card.id}>
<div
key={card.id}
className={styles.featureCard}
onClick={() => handleCardClick(card)}
>
<div className={styles.cardContent}>
<div className={styles.cardHeader}>
<div
className={styles.cardIcon}
style={{ backgroundColor: card.color }}
>
{card.icon}
</div>
{/* 热门/新功能标签 */}
{(card.isHot || card.isNew) && (
<div
className={styles.badge}
data-type={card.isNew ? "new" : "hot"}
>
{card.isHot ? "热门" : "新功能"}
</div>
)}
{/* 功能图标 */}
</div>
)}
{/* 功能图标 */}
</div>
{/* 功能信息 */}
<div className={styles.cardInfo}>
<h3 className={styles.cardTitle}>{card.title}</h3>
<p className={styles.cardDescription}>{card.description}</p>
<div className={styles.cardAction}>
<span>点击进入功能</span>
<span className={styles.arrow}>→</span>
{/* 功能信息 */}
<div className={styles.cardInfo}>
<h3 className={styles.cardTitle}>{card.title}</h3>
<p className={styles.cardDescription}>
{card.description}
</p>
<div className={styles.cardAction}>
<span>点击进入功能</span>
<span className={styles.arrow}>→</span>
</div>
</div>
</div>
</div>
</div>
</div>
))}
</Col>
))}
</Row>
</div>
</div>
))}