style(user-center): 服务/空状态图标改线性 SVG Icon,去掉表情符号
- Profile 我的服务宫格 + My*/空状态 用 @/components/atoms 的 Icon atom(calendar/route/map-pin/shield),禁止 emoji 图标 - user-center.css 补 uc-svc-icon/uc-empty-icon 尺寸与配色
This commit is contained in:
@@ -40,7 +40,8 @@
|
||||
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
|
||||
}
|
||||
.uc-service:hover { transform: translateY(-3px); }
|
||||
.uc-service .i { font-size: 22px; line-height: 1; }
|
||||
.uc-service .i { font-size: 22px; line-height: 1; color: var(--primary); }
|
||||
.uc-service .i .uc-svc-icon { width: 22px; height: 22px; }
|
||||
.uc-service .t { font-weight: 600; font-size: 16px; }
|
||||
.uc-service .d { font-size: 13px; color: var(--muted); }
|
||||
.uc-service .d .badge { margin-left: 4px; }
|
||||
@@ -68,7 +69,7 @@
|
||||
|
||||
/* ---------- 空态 ---------- */
|
||||
.uc-empty { text-align: center; padding: 48px 20px; color: var(--muted); }
|
||||
.uc-empty .big { font-size: 44px; margin-bottom: 8px; opacity: .5; }
|
||||
.uc-empty .uc-empty-icon { width: 44px; height: 44px; color: var(--muted); opacity: .55; margin: 0 auto 10px; display: block; }
|
||||
|
||||
/* ---------- 顶栏用户菜单(头像+用户名 胶囊 + 下拉) ---------- */
|
||||
.user-menu { position: relative; flex: 0 0 auto; }
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { ContentTemplate } from '@/components/templates';
|
||||
import { Icon } from '@/components/atoms';
|
||||
import AuthGate from '@/components/AuthGate';
|
||||
import { getUser } from '@/services/auth';
|
||||
import { myBookings } from '@/services/booking';
|
||||
@@ -65,7 +66,7 @@ export default function MyBookings() {
|
||||
</div>
|
||||
) : loaded ? (
|
||||
<div className="uc-empty uc-glass">
|
||||
<div className="big">📋</div>
|
||||
<Icon name="calendar" className="uc-empty-icon" />
|
||||
<p>还没有报名记录,去参加一场公益课或沙龙吧。</p>
|
||||
<a className="btn btn-cta" href="#/events">去看看活动 →</a>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { ContentTemplate } from '@/components/templates';
|
||||
import { Icon } from '@/components/atoms';
|
||||
import AuthGate from '@/components/AuthGate';
|
||||
import { getUser } from '@/services/auth';
|
||||
import { getOpCertMine } from '@/services/opcProfile';
|
||||
@@ -57,7 +58,7 @@ export default function MyCert() {
|
||||
|
||||
{!certified && (
|
||||
<div className="uc-empty uc-glass" style={{ marginTop: 20 }}>
|
||||
<div className="big">🏅</div>
|
||||
<Icon name="shield" className="uc-empty-icon" />
|
||||
<p>{status === 'reviewing' ? '认证资料审核中,请耐心等待。' : '完成申请与认证流程,成为 OPC 创业伙伴。'}</p>
|
||||
<a className="btn btn-cta" href="#/cert-apply">去认证 →</a>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { ContentTemplate } from '@/components/templates';
|
||||
import { Icon } from '@/components/atoms';
|
||||
import AuthGate from '@/components/AuthGate';
|
||||
import { getUser } from '@/services/auth';
|
||||
import { myParkAdmission } from '@/services/park';
|
||||
@@ -58,7 +59,7 @@ export default function MyPark() {
|
||||
|
||||
{loaded && !name && (
|
||||
<div className="uc-empty uc-glass" style={{ marginTop: 20 }}>
|
||||
<div className="big">🏢</div>
|
||||
<Icon name="map-pin" className="uc-empty-icon" />
|
||||
<p>你还没有提交园区入驻申请。</p>
|
||||
<a className="btn btn-cta" href="#/park-apply">去申请入驻 →</a>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { ContentTemplate } from '@/components/templates';
|
||||
import { Icon } from '@/components/atoms';
|
||||
import AuthGate from '@/components/AuthGate';
|
||||
import { getUser } from '@/services/auth';
|
||||
import { myTasks } from '@/services/tasks';
|
||||
@@ -49,7 +50,7 @@ export default function MyTasks() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="uc-empty uc-glass">
|
||||
<div className="big">🧩</div>
|
||||
<Icon name="route" className="uc-empty-icon" />
|
||||
<p>还没有承接的任务,去任务广场看看吧。</p>
|
||||
<a className="btn btn-cta" href="#/tasks">去任务广场 →</a>
|
||||
</div>
|
||||
|
||||
@@ -174,10 +174,10 @@ export default function Profile() {
|
||||
}
|
||||
|
||||
const svcGrid = [
|
||||
['📋', '我的报名', svc.bk == null ? '加载中…' : `${svc.bk} 条报名`, '#/my-bookings'],
|
||||
['🧩', '我的任务', svc.tk == null ? '加载中…' : `${svc.tk} 个任务`, '#/my-tasks'],
|
||||
['🏢', '我的园区', svc.park, '#/my-park'],
|
||||
['🏅', '我的认证', svc.cert, '#/my-cert'],
|
||||
['calendar', '我的报名', svc.bk == null ? '加载中…' : `${svc.bk} 条报名`, '#/my-bookings'],
|
||||
['route', '我的任务', svc.tk == null ? '加载中…' : `${svc.tk} 个任务`, '#/my-tasks'],
|
||||
['map-pin', '我的园区', svc.park, '#/my-park'],
|
||||
['shield', '我的认证', svc.cert, '#/my-cert'],
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -207,7 +207,7 @@ export default function Profile() {
|
||||
<div className="uc-grid">
|
||||
{svcGrid.map(([icon, t, d, href]) => (
|
||||
<a className="uc-service uc-glass" key={href} href={href}>
|
||||
<span className="i">{icon}</span>
|
||||
<span className="i"><Icon name={icon} className="uc-svc-icon" /></span>
|
||||
<span className="t">{t}</span>
|
||||
<span className="d">{d}</span>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user