Aura
/
aura-web
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: cahnge mall page style

feat/unify-api-and-responsive-pages
yannyang 2026-06-24 17:37:33 +08:00
parent 32ef657971
commit 61118bbf2d
7 changed files with 288 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/PointsMallPage/PointsMallPageLogic.ts
View File

@ -14,7 +14,7 @@ export function usePointsMallPageLogic() {
const [q, setQ] = useState(''); const [q, setQ] = useState('');
const [sort, setSort] = useState<SortKey>('popular'); const [sort, setSort] = useState<SortKey>('popular');
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(24); const [pageSize, setPageSize] = useState(12);
const [productsRes, setProductsRes] = useState<PointsMallProductsResponse | null>(null); const [productsRes, setProductsRes] = useState<PointsMallProductsResponse | null>(null);
const [exchangeModalVisible, setExchangeModalVisible] = useState(false); const [exchangeModalVisible, setExchangeModalVisible] = useState(false);

124
src/pages/PointsMallPage/components/PointsMallH5Products.tsx
View File

@ -1,5 +1,6 @@
import { SearchOutlined } from '@ant-design/icons'; import { ArrowRightOutlined, LeftOutlined, RightOutlined, SearchOutlined } from '@ant-design/icons';
import { Button, Card, Empty, Input, Select, Space, Spin, Tag } from 'antd'; import { Button, Card, Empty, Input, Select, Space, Spin, Tag } from 'antd';
import { useEffect, useRef, useState } from 'react';
import type { PointsMallProduct } from '../../../api'; import type { PointsMallProduct } from '../../../api';
import type { PointsMallPageLogicOutput } from '../PointsMallPageLogic'; import type { PointsMallPageLogicOutput } from '../PointsMallPageLogic';
import '../styles/points-mall-h5-products.css'; import '../styles/points-mall-h5-products.css';
@ -12,8 +13,6 @@ export default function PointsMallH5Products({ logic }: Props) {
const { const {
q, q,
sort, sort,
page,
pageSize,
productsLoading, productsLoading,
products, products,
total, total,
@ -21,83 +20,120 @@ export default function PointsMallH5Products({ logic }: Props) {
exchangeLoading, exchangeLoading,
setQ, setQ,
setSort, setSort,
page,
setPage, setPage,
setPageSize,
handleExchangeClick handleExchangeClick
} = logic; } = logic;
const [displayProducts, setDisplayProducts] = useState<PointsMallProduct[]>([]);
const loadingMoreRef = useRef(false);
const scrollRef = useRef<HTMLDivElement>(null);
// 监听搜索/排序变化，重置列表
useEffect(() => {
setDisplayProducts(products);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [q, sort]);
// 监听数据变化，追加到显示列表
useEffect(() => {
if (page === 1) {
setDisplayProducts(products);
} else {
setDisplayProducts(prev => {
const existingIds = new Set(prev.map(p => p.id));
const newItems = products.filter(p => !existingIds.has(p.id));
return [...prev, ...newItems];
});
}
loadingMoreRef.current = false;
}, [products, page]);
const hasMore = displayProducts.length < total;
// 瀑布流滚动加载
useEffect(() => {
const handleScroll = () => {
// 获取滚动容器，H5 端通常是 App.tsx 里的 .main-content
const container = document.querySelector('.main-content');
if (!container || !hasMore || productsLoading || loadingMoreRef.current) return;
const { scrollTop, scrollHeight, clientHeight } = container;
// 距离底部 100px 时触发加载
if (scrollTop + clientHeight >= scrollHeight - 100) {
loadingMoreRef.current = true;
setPage(prev => prev + 1);
}
};
const container = document.querySelector('.main-content');
container?.addEventListener('scroll', handleScroll);
return () => container?.removeEventListener('scroll', handleScroll);
}, [hasMore, productsLoading]);
return ( return (
<Card className="stats-page-chart-card h5-stats-page-chart-card h5-points-mall-products-card"> <div className="h5-points-mall-products-card" ref={scrollRef}>
<div className="points-mall-filters-row h5-points-mall-filters-row"> <div className="points-mall-filters-row h5-points-mall-filters-row">
<div className="points-mall-filter-search"> <div className="points-mall-filter-search">
<Input <Input
value={q} value={q}
onChange={(e) => { onChange={(e) => {
setPage(1);
setQ(e.target.value); setQ(e.target.value);
}} }}
prefix={<SearchOutlined className="points-mall-input-icon" />} prefix={<SearchOutlined className="points-mall-input-icon" />}
placeholder="搜索商品" placeholder="搜索商品"
allowClear allowClear
className="points-mall-search-input" variant="borderless"
className="points-mall-search-input-h5"
/> />
</div> </div>
<div className="points-mall-filter-selects"> <div className="points-mall-filter-selects-h5">
<Select <Select
value={sort} value={sort}
className="points-mall-filter-select" variant="borderless"
className="points-mall-filter-select-h5"
onChange={(v) => { onChange={(v) => {
setPage(1);
setSort(v); setSort(v);
}} }}
options={[ options={[
{ value: 'popular', label: '热度优先' }, { value: 'popular', label: '热度优先' },
{ value: 'newest', label: '最新上架' }, { value: 'newest', label: '最新上架' },
{ value: 'price_asc', label: 'Token从低到高' }, { value: 'price_asc', label: 'Token升序' },
{ value: 'price_desc', label: 'Token从高到低' } { value: 'price_desc', label: 'Token降序' }
]}
/>
<Select
value={pageSize}
className="points-mall-filter-select-small"
onChange={(v) => {
setPage(1);
setPageSize(v);
}}
options={[
{ value: 12, label: '每页 12' },
{ value: 24, label: '每页 24' }
]} ]}
/> />
</div> </div>
<div className="points-mall-total-text">共 {total.toLocaleString()} 件商品</div>
</div> </div>
{productsLoading ? ( {displayProducts.length === 0 && productsLoading ? (
<Spin className="points-mall-state-spin" /> <Spin className="points-mall-state-spin" />
) : products.length === 0 ? ( ) : displayProducts.length === 0 ? (
<Empty description="暂无商品" className="points-mall-empty-state" /> <Empty description="暂无商品" className="points-mall-empty-state" />
) : ( ) : (
<div className="points-mall-products-grid h5-points-mall-products-grid"> <div className="points-mall-products-grid h5-points-mall-products-grid">
{products.map((p: PointsMallProduct) => ( {displayProducts.map((p: PointsMallProduct) => (
<div key={p.id} className="points-mall-product-card h5-points-mall-product-card h5-product-tile"> <div key={p.id} className="points-mall-product-card h5-points-mall-product-card h5-product-tile">
<div className="points-mall-product-cover h5-product-tile-cover"> <div className="points-mall-product-cover h5-product-tile-cover">
{p.coverUrl ? <img src={p.coverUrl} alt={p.name} className="h5-product-tile-image" /> : null} {p.coverUrl ? <img src={p.coverUrl} alt={p.name} className="h5-product-tile-image" /> : null}
</div>
<div className="points-mall-product-body">
<div className="points-mall-product-name-row">
<span className="points-mall-product-name">{p.name}</span>
{p.tags?.length ? ( {p.tags?.length ? (
<Tag bordered={false} className="points-mall-product-tag h5-product-tile-tag"> <Tag bordered={false} className="points-mall-product-tag h5-product-tile-tag-inline">
{p.tags[0]} {p.tags[0]}
</Tag> </Tag>
) : null} ) : null}
</div> </div>
<div className="points-mall-product-body"> {p.subtitle && <div className="points-mall-product-subtitle">{p.subtitle}</div>}
<div className="points-mall-product-name">{p.name}</div>
<div className="points-mall-product-price-row h5-points-mall-product-price-row"> <div className="points-mall-product-price-row h5-points-mall-product-price-row">
<div> <div className="points-mall-product-price-container">
<span className="points-mall-product-price">{p.pointsPrice >= 1000 ? `${(p.pointsPrice / 1000).toFixed(1)} K` : Number(p.pointsPrice).toLocaleString()}</span> <span className="points-mall-product-price">{p.pointsPrice >= 1000 ? `${(p.pointsPrice / 1000).toFixed(1)} K` : Number(p.pointsPrice).toLocaleString()}</span>
<span className="points-mall-product-price-label">分</span> <span className="points-mall-product-price-label">Token</span>
</div> </div>
<Button <Button
type="primary" type="primary"
size="small"
className="points-mall-exchange-btn points-mall-product-exchange-btn" className="points-mall-exchange-btn points-mall-product-exchange-btn"
disabled={userPoints < p.pointsPrice || exchangeLoading} disabled={userPoints < p.pointsPrice || exchangeLoading}
onClick={() => handleExchangeClick(p)} onClick={() => handleExchangeClick(p)}
@ -111,21 +147,13 @@ export default function PointsMallH5Products({ logic }: Props) {
</div> </div>
)} )}
{!!total && ( <div className="h5-points-mall-infinite-footer">
<div className="points-mall-pagination h5-points-mall-pagination"> {productsLoading ? (
<Space size={8}> <div className="h5-infinite-loading"><Spin size="small" /> 正在加载中...</div>
<Button disabled={page <= 1} onClick={() => setPage((v) => Math.max(1, v - 1))} className="points-mall-exchange-btn" size="small"> ) : !hasMore && displayProducts.length > 0 ? (
上一页 <div className="h5-infinite-no-more">没有更多了</div>
</Button> ) : null}
<Tag bordered={false} className="points-mall-pagination-tag"> </div>
第 {page} 页
</Tag>
<Button disabled={page * pageSize >= total} onClick={() => setPage((v) => v + 1)} className="points-mall-exchange-btn" size="small">
下一页
</Button>
</Space>
</div> </div>
)}
</Card>
); );
} }

5
src/pages/PointsMallPage/components/PointsMallH5Top.tsx
View File

@ -52,10 +52,7 @@ export default function PointsMallH5Top({ logic }: Props) {
</div> </div>
{categories.length > 0 && ( {categories.length > 0 && (
<Card className="points-mall-category-card h5-points-mall-category-card">
<div className="points-mall-category-body">
<div className="points-mall-category-row h5-points-mall-category-row"> <div className="points-mall-category-row h5-points-mall-category-row">
<span className="points-mall-category-label h5-points-mall-category-label">商品分类</span>
{categories.map((c) => ( {categories.map((c) => (
<Button <Button
key={c.id} key={c.id}
@ -71,8 +68,6 @@ export default function PointsMallH5Top({ logic }: Props) {
</Button> </Button>
))} ))}
</div> </div>
</div>
</Card>
)} )}
<div className="points-mall-banner-section h5-points-mall-banner-section"> <div className="points-mall-banner-section h5-points-mall-banner-section">

215
src/pages/PointsMallPage/styles/points-mall-h5-products.css
View File

@ -4,98 +4,201 @@
.points-mall-page-h5 .h5-points-mall-products-grid { .points-mall-page-h5 .h5-points-mall-products-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(2, 1fr);
gap: 0.5rem; gap: 0.5rem;
padding: 0;
} }
.points-mall-page-h5 .h5-product-tile { .points-mall-page-h5 .h5-product-tile {
min-width: 0; min-width: 0;
padding: 0; padding: 0;
border-radius: 0.75rem; border-radius: 0.5rem;
overflow: hidden; overflow: hidden;
background: var(--color-surface);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
display: flex;
flex-direction: column;
} }
.points-mall-page-h5 .h5-product-tile-cover { .points-mall-page-h5 .h5-product-tile-cover {
position: relative; position: relative;
width: 100%; width: 100%;
height: auto; height: 100px; /* 设置最大高度 */
aspect-ratio: 1; background: #f7f8fa;
background:
radial-gradient(circle at 28% 24%, rgba(30, 134, 255, 0.22), transparent 34%),
linear-gradient(135deg, rgba(17, 103, 255, 0.14), rgba(104, 185, 255, 0.12));
} }
.h5-product-tile-image { .h5-product-tile-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover; /* 改为 cover 方式 */
display: block; display: block;
} }
.points-mall-page-h5 .h5-product-tile-tag { .points-mall-page-h5 .h5-product-tile-tag-inline {
position: absolute; margin-left: 0.25rem !important;
top: 0.25rem; font-size: 0.625rem !important;
left: 0.25rem; padding: 0 0.25rem !important;
max-width: calc(100% - 0.5rem); height: 1rem !important;
margin: 0; line-height: 1rem !important;
padding: 0 0.3125rem; border-radius: 2px !important;
font-size: 0.625rem; background: var(--color-brand-soft) !important;
line-height: 1.25rem; color: var(--color-brand) !important;
border-radius: 999px; display: inline-block !important;
vertical-align: middle !important;
} }
.points-mall-page-h5 .h5-product-tile .points-mall-product-body { .points-mall-product-name-row {
padding: 0.4375rem; display: flex;
gap: 0.3125rem;
}
.points-mall-page-h5 .h5-product-tile .points-mall-product-name {
min-height: 2.125rem;
margin: 0;
color: var(--color-text);
font-size: 0.75rem;
font-weight: 700;
line-height: 1.38;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.points-mall-page-h5 .h5-product-tile .h5-points-mall-product-price-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 1.875rem;
align-items: center; align-items: center;
gap: 0.25rem; overflow: hidden;
}
.points-mall-page-h5 .h5-product-tile .h5-points-mall-product-price-row > div {
min-width: 0;
white-space: nowrap; white-space: nowrap;
} }
.points-mall-page-h5 .h5-product-tile .points-mall-product-body {
padding: 0.5rem;
display: flex;
flex-direction: column;
flex: 1;
gap: 0.125rem;
}
.points-mall-page-h5 .h5-product-tile .points-mall-product-name {
margin: 0;
color: var(--color-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 0 1 auto; /* 允许标题收缩 */
}
.points-mall-product-subtitle {
font-size: 0.6875rem;
color: var(--color-text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
}
.points-mall-page-h5 .h5-product-tile .h5-points-mall-product-price-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
gap: 4px;
}
.points-mall-product-price-container {
display: flex;
align-items: baseline;
gap: 1px;
min-width: 0;
flex: 1;
}
.points-mall-page-h5 .h5-product-tile .points-mall-product-price { .points-mall-page-h5 .h5-product-tile .points-mall-product-price {
font-size: 0.75rem; font-size: 0.9375rem;
font-weight: 900; font-weight: 700;
color: var(--color-brand);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.points-mall-page-h5 .h5-product-tile .points-mall-product-price-label { .points-mall-page-h5 .h5-product-tile .points-mall-product-price-label {
margin-left: 0.125rem; margin-left: 0;
font-size: 0.625rem; font-size: 0.625rem;
color: var(--color-text-tertiary);
flex-shrink: 0;
} }
.points-mall-page-h5 .h5-product-tile .points-mall-product-exchange-btn { .points-mall-page-h5 .h5-product-tile .points-mall-product-exchange-btn {
width: 1.875rem; height: 1.375rem;
min-width: 1.875rem; min-width: 1.75rem;
height: 1.625rem; padding: 0 0.4rem;
padding: 0; border-radius: 999px;
border-radius: 0.5rem;
font-size: 0.6875rem; font-size: 0.6875rem;
font-weight: 800; font-weight: 500;
flex-shrink: 0;
} }
@media (max-width: 340px) { .h5-points-mall-filters-row {
.points-mall-page-h5 .h5-points-mall-products-grid { display: flex;
grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
} }
.points-mall-filter-search {
flex: 1;
min-width: 0;
}
.points-mall-search-input-h5 {
background: var(--color-surface) !important;
box-shadow: var(--shadow-sm) !important;
}
.points-mall-filter-selects-h5 {
display: flex;
align-items: center;
gap: 0.5rem;
}
.points-mall-filter-select-h5 .ant-select-selector {
color: var(--color-text-secondary) !important;
font-weight: 500 !important;
}
.points-mall-filter-select-h5 .ant-select-selection-item {
font-size: 0.8125rem !important;
}
.h5-points-mall-pagination {
margin-top: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.5rem;
}
.points-mall-pagination-tag {
background: transparent !important;
color: var(--color-text-tertiary) !important;
margin: 0 !important;
}
.h5-points-mall-infinite-footer {
padding: 1.5rem 0 2rem;
text-align: center;
}
.h5-infinite-loading {
color: var(--color-text-secondary);
font-size: 0.8125rem;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.h5-infinite-no-more {
color: var(--color-text-tertiary);
font-size: 0.75rem;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.h5-infinite-no-more::before,
.h5-infinite-no-more::after {
content: '';
height: 1px;
width: 2rem;
background: var(--color-border);
} }

9
src/pages/PointsMallPage/styles/points-mall-h5.css
View File

@ -5,13 +5,12 @@
.points-mall-page-h5 .h5-points-mall-hero { .points-mall-page-h5 .h5-points-mall-hero {
padding: 0.875rem 0.75rem; padding: 0.875rem 0.75rem;
border-radius: 1.125rem; border-radius: 12px;
background: var(--gradient-hero); background: var(--gradient-hero);
} }
.points-mall-page-h5 .h5-points-mall-header, .points-mall-page-h5 .h5-points-mall-header,
.points-mall-page-h5 .h5-points-mall-banner-header, .points-mall-page-h5 .h5-points-mall-banner-header {
.points-mall-page-h5 .h5-points-mall-product-price-row {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
@ -75,6 +74,7 @@
gap: 0.375rem; gap: 0.375rem;
overflow-x: auto; overflow-x: auto;
scrollbar-width: none; scrollbar-width: none;
margin-bottom: 12px;
} }
.points-mall-page-h5 .h5-points-mall-category-row::-webkit-scrollbar { .points-mall-page-h5 .h5-points-mall-category-row::-webkit-scrollbar {
@ -102,7 +102,7 @@
.points-mall-page-h5 .h5-points-mall-banner-card { .points-mall-page-h5 .h5-points-mall-banner-card {
width: 100%; width: 100%;
min-height: auto; min-height: auto;
padding: 0.75rem; padding: 12px;
} }
.points-mall-page-h5 .h5-points-mall-banner-header { .points-mall-page-h5 .h5-points-mall-banner-header {
@ -141,7 +141,6 @@
} }
.points-mall-page-h5 .h5-points-mall-filters-row { .points-mall-page-h5 .h5-points-mall-filters-row {
flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
} }

13
src/pages/StatsPage/styles/stats-page-h5.css
View File

@ -4,9 +4,9 @@
} }
.stats-h5-hero { .stats-h5-hero {
padding: 1.125rem; padding: 12px;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 1.125rem; border-radius: 12px;
background: var(--gradient-hero); background: var(--gradient-hero);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
@ -53,6 +53,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
border-radius: 12px;
} }
.stats-page-h5 .stats-page-card-label { .stats-page-h5 .stats-page-card-label {
@ -78,7 +79,8 @@
.stats-page-h5 .stats-page-token-cards-grid { .stats-page-h5 .stats-page-token-cards-grid {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 0; gap: 8px;
margin: 12px 0;
} }
.stats-page-h5 .stats-page-token-value { .stats-page-h5 .stats-page-token-value {
@ -92,6 +94,11 @@
margin-top: 0.875rem; margin-top: 0.875rem;
} }
.stats-page-h5 .stats-page-chart-card {
box-shadow: none;
border-radius: 12px;
}
.stats-page-h5 .stats-page-chart-container, .stats-page-h5 .stats-page-chart-container,
.stats-page-h5 .stats-page-token-chart-container { .stats-page-h5 .stats-page-token-chart-container {
overflow-x: auto; overflow-x: auto;

27
src/styles.css
View File

@ -1791,7 +1791,7 @@ span.mention {
background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(236,253,245,0.92) 44%, rgba(239,246,255,0.96) 100%); background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(236,253,245,0.92) 44%, rgba(239,246,255,0.96) 100%);
border: 1px solid rgba(8, 145, 178, 0.12); border: 1px solid rgba(8, 145, 178, 0.12);
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.06); box-shadow: 0 20px 48px rgba(15, 23, 42, 0.06);
margin-bottom: 18px; margin-bottom: 12px;
} }
.points-mall-header { .points-mall-header {
@ -1807,7 +1807,7 @@ span.mention {
.points-mall-balance-card { .points-mall-balance-card {
min-width: 280px; min-width: 280px;
border-radius: 18px; border-radius: 12px;
padding: 14px 16px; padding: 14px 16px;
background: rgba(255,255,255,0.72); background: rgba(255,255,255,0.72);
border: 1px solid rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.7);
@ -1841,7 +1841,7 @@ span.mention {
.points-mall-category-card { .points-mall-category-card {
border-radius: 18px; border-radius: 18px;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
margin-bottom: 14px; margin-bottom: 12px;
} }
.points-mall-category-body { .points-mall-category-body {
@ -1865,13 +1865,12 @@ span.mention {
display: grid; display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: 14px; gap: 14px;
margin-bottom: 16px; margin-bottom: 12px;
} }
.points-mall-banner-card { .points-mall-banner-card {
border-radius: 22px; border-radius: 12px;
padding: 22px; padding: 22px;
border: 1px solid rgba(236, 72, 153, 0.22);
background: linear-gradient(135deg, rgba(236, 72, 153, 0.16) 0%, rgba(59, 130, 246, 0.16) 60%, rgba(34, 197, 94, 0.12) 100%); background: linear-gradient(135deg, rgba(236, 72, 153, 0.16) 0%, rgba(59, 130, 246, 0.16) 60%, rgba(34, 197, 94, 0.12) 100%);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
min-height: 176px; min-height: 176px;
@ -2338,11 +2337,16 @@ span.mention {
.stats-page-agent-item { .stats-page-agent-item {
margin-bottom: 12px; margin-bottom: 12px;
padding: 12px 14px; padding: 12px 14px;
border-radius: 16px; border-radius: 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.9) 100%); background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.9) 100%);
border: 1px solid rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.12);
} }
.stats-page-h5 .stats-page-agent-item {
padding: 8px;
margin-bottom: 8px;
}
.stats-page-agent-header { .stats-page-agent-header {
display: flex; display: flex;
align-items: center; align-items: center;
@ -2398,10 +2402,9 @@ span.mention {
} }
.stats-page-token-card { .stats-page-token-card {
border-radius: 18px; border-radius: 12px;
padding: 16px 18px; padding: 16px 18px;
background: rgba(255,255,255,0.72); background: var(--color-bg);
border: 1px solid rgba(255,255,255,0.7);
} }
.stats-page-h5 .stats-page-token-card { .stats-page-h5 .stats-page-token-card {
@ -2465,6 +2468,10 @@ span.mention {
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
} }
.stats-page-h5 .points-integration-card {
border-radius: 12px;
}
.points-integration-row { .points-integration-row {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));