zhaichao/oa_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

基本样式变更

Browse Source
This commit is contained in:
zhaichao
2026-09-23 17:38:24 +08:00
parent e464c2ad13
commit 9a22980071
35 changed files with 413 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/tabs/clock.vue
+12 -12
View File
@@ -102,23 +102,23 @@ export default {
<style scoped>
.body { padding: 16rpx 24rpx 40rpx; }
.clock-box { background: #f2f3ff; border-radius: 16rpx; padding: 36rpx 0; text-align: center; }
.now { display: block; font-size: 68rpx; font-weight: 700; letter-spacing: 2rpx; }
.shift { font-size: 22rpx; color: #434655; }
.clock-box { background: #fff; border-radius: 24rpx; padding: 48rpx 0 40rpx; text-align: center; border: 1rpx solid rgba(17,24,39,0.06); }
.now { display: block; font-size: 72rpx; font-weight: 650; letter-spacing: 2rpx; color: #111827; }
.shift { font-size: 22rpx; color: #4B5563; }
.grid { display: flex; gap: 16rpx; margin: 20rpx 0; }
.stat { flex: 1; padding: 24rpx; }
.lab { font-size: 26rpx; font-weight: 600; display: block; }
.val { font-size: 24rpx; color: #434655; display: block; margin-top: 12rpx; }
.val.ok { color: #006c49; font-weight: 700; }
.tiny { font-size: 20rpx; color: #737686; }
.geo { display: block; text-align: center; font-size: 22rpx; color: #434655; margin: 16rpx 0 24rpx; }
.val { font-size: 24rpx; color: #4B5563; display: block; margin-top: 12rpx; }
.val.ok { color: #16A34A; font-weight: 650; }
.tiny { font-size: 20rpx; color: #6B7280; }
.geo { display: block; text-align: center; font-size: 22rpx; color: #4B5563; margin: 16rpx 0 24rpx; }
.quick { display: flex; gap: 12rpx; }
.q { flex: 1; height: 72rpx; background: #fff; border-radius: 12rpx; text-align: center; line-height: 72rpx; font-size: 24rpx; }
.sec { margin: 32rpx 0 12rpx; font-size: 28rpx; font-weight: 600; }
.rec { display: flex; justify-content: space-between; align-items: center; padding: 24rpx 28rpx; border-bottom: 1rpx solid #eaedff; }
.rec { display: flex; justify-content: space-between; align-items: center; padding: 24rpx 28rpx; border-bottom: 1rpx solid #E8ECF2; }
.rt { display: block; font-size: 28rpx; font-weight: 600; }
.rl { display: block; font-size: 22rpx; color: #737686; }
.ok { color: #006c49; font-size: 24rpx; }
.empty { padding: 40rpx; text-align: center; color: #737686; }
.deny { padding: 120rpx 40rpx; text-align: center; color: #737686; }
.rl { display: block; font-size: 22rpx; color: #6B7280; }
.ok { color: #16A34A; font-size: 24rpx; }
.empty { padding: 40rpx; text-align: center; color: #6B7280; }
.deny { padding: 120rpx 40rpx; text-align: center; color: #6B7280; }
</style>
pages/tabs/contacts.vue
+13 -13
View File
@@ -131,27 +131,27 @@ export default {
<style scoped>
.search { padding: 16rpx 24rpx; }
.search input { height: 80rpx; background: #fff; border-radius: 12rpx; padding: 0 24rpx; font-size: 26rpx; }
.search input { height: 80rpx; background: #fff; border-radius: 20rpx; padding: 0 28rpx; font-size: 28rpx; border: 1rpx solid rgba(17,24,39,0.06); }
.org { margin: 0 24rpx 16rpx; background: #fff; border-radius: 16rpx; padding: 20rpx; display: flex; align-items: center; }
.obox { width: 64rpx; height: 64rpx; border-radius: 12rpx; background: #eaedff; display: flex; align-items: center; justify-content: center; }
.obox { width: 64rpx; height: 64rpx; border-radius: 12rpx; background: #E8ECF2; display: flex; align-items: center; justify-content: center; }
.ometa { flex: 1; margin-left: 16rpx; }
.on { display: block; font-size: 28rpx; font-weight: 700; }
.os { font-size: 22rpx; color: #737686; }
.arr { color: #c3c6d7; }
.os { font-size: 22rpx; color: #6B7280; }
.arr { color: #D1D5DB; }
.block { margin: 8rpx 24rpx 24rpx; }
.dept { display: flex; align-items: center; padding: 16rpx 12rpx; font-size: 26rpx; font-weight: 600; background: #f2f3ff; border-radius: 12rpx 12rpx 0 0; }
.cnt { color: #737686; font-weight: 400; font-size: 22rpx; margin-left: 8rpx; }
.dept { display: flex; align-items: center; padding: 16rpx 12rpx; font-size: 26rpx; font-weight: 600; background: #F3F6FB; border-radius: 12rpx 12rpx 0 0; }
.cnt { color: #6B7280; font-weight: 400; font-size: 22rpx; margin-left: 8rpx; }
.item { display: flex; align-items: center; padding: 20rpx 20rpx; }
.av-wrap { position: relative; width: 72rpx; height: 72rpx; }
.av { width: 72rpx; height: 72rpx; border-radius: 50%; }
.av.txt { background: #eaedff; color: #434655; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.av.txt { background: #E8ECF2; color: #4B5563; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.dot { position: absolute; right: 0; bottom: 0; width: 16rpx; height: 16rpx; border-radius: 50%; background: #006c49; border: 2rpx solid #fff; }
.meta { flex: 1; margin-left: 16rpx; min-width: 0; }
.name { display: block; font-size: 28rpx; font-weight: 600; }
.sub { font-size: 22rpx; color: #737686; }
.chip { font-size: 20rpx; color: #004ac6; background: #e2e7ff; padding: 4rpx 12rpx; border-radius: 999rpx; margin-right: 8rpx; }
.mini { width: 56rpx; text-align: center; font-size: 28rpx; color: #004ac6; }
.empty { text-align: center; color: #737686; padding: 80rpx; }
.foot { display: block; text-align: center; color: #737686; font-size: 22rpx; padding: 20rpx 0 40rpx; }
.ico { padding: 8rpx 16rpx; color: #2563eb; font-size: 26rpx; }
.sub { font-size: 22rpx; color: #6B7280; }
.chip { font-size: 20rpx; color: #1677FF; background: #E8F1FF; padding: 4rpx 12rpx; border-radius: 999rpx; margin-right: 8rpx; }
.mini { width: 56rpx; text-align: center; font-size: 28rpx; color: #1677FF; }
.empty { text-align: center; color: #6B7280; padding: 80rpx; }
.foot { display: block; text-align: center; color: #6B7280; font-size: 22rpx; padding: 20rpx 0 40rpx; }
.ico { padding: 8rpx 16rpx; color: #1677FF; font-size: 26rpx; }
</style>
pages/tabs/me.vue
+18 -17
View File
@@ -1,6 +1,6 @@
<template>
<view class="page">
<fy-header title="我" />
<fy-header title="我的" />
<view class="body">
<view class="card profile">
<view class="row">
@@ -109,26 +109,27 @@ export default {
</script>
<style scoped>
.body { padding: 16rpx 24rpx 40rpx; }
.profile { padding: 28rpx; }
.body { padding: 8rpx 28rpx 48rpx; }
.profile { padding: 32rpx 28rpx 24rpx; }
.row { display: flex; align-items: center; }
.av { width: 112rpx; height: 112rpx; border-radius: 50%; }
.av.txt { background: #004ac6; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 40rpx; font-weight: 700; }
.info { margin-left: 20rpx; flex: 1; min-width: 0; }
.av.txt { background: #1677FF; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 40rpx; font-weight: 650; }
.info { margin-left: 24rpx; flex: 1; min-width: 0; }
.nm { display: flex; align-items: center; gap: 12rpx; }
.name { font-size: 34rpx; font-weight: 700; }
.st { font-size: 20rpx; background: rgba(108, 248, 187, 0.3); color: #006c49; padding: 2rpx 12rpx; border-radius: 999rpx; }
.dept, .ph { display: block; font-size: 22rpx; color: #737686; margin-top: 6rpx; }
.stats { display: flex; margin-top: 24rpx; padding-top: 20rpx; border-top: 1rpx solid #eaedff; }
.name { font-size: 36rpx; font-weight: 650; }
.st { font-size: 22rpx; background: #E8F8EF; color: #16A34A; padding: 4rpx 12rpx; border-radius: 8rpx; }
.dept, .ph { display: block; font-size: 24rpx; color: #6B7280; margin-top: 8rpx; }
.stats { display: flex; margin-top: 28rpx; padding-top: 24rpx; border-top: 1rpx solid #F0F2F5; }
.s { flex: 1; text-align: center; }
.mid { border-left: 1rpx solid #eaedff; border-right: 1rpx solid #eaedff; }
.n { display: block; font-size: 36rpx; font-weight: 700; color: #004ac6; }
.n.ok { color: #006c49; font-size: 30rpx; }
.l { font-size: 20rpx; color: #737686; }
.mid { border-left: 1rpx solid #F0F2F5; border-right: 1rpx solid #F0F2F5; }
.n { display: block; font-size: 34rpx; font-weight: 650; color: #111827; }
.n.ok { color: #16A34A; font-size: 28rpx; }
.l { font-size: 22rpx; color: #6B7280; margin-top: 4rpx; }
.menu { margin-top: 20rpx; overflow: hidden; }
.mi { display: flex; align-items: center; padding: 28rpx 24rpx; border-bottom: 1rpx solid #eaedff; }
.ii { width: 48rpx; }
.mi { display: flex; align-items: center; min-height: 100rpx; padding: 0 28rpx; }
.mi + .mi { border-top: 1rpx solid #F0F2F5; }
.ii { width: 48rpx; color: #1677FF; font-weight: 650; }
.it { flex: 1; font-size: 28rpx; }
.arr { color: #c3c6d7; }
.danger .it { color: #ba1a1a; }
.arr { color: #C4C9D4; font-size: 32rpx; }
.danger .it { color: #DC2626; }
</style>
pages/tabs/messages.vue
+19 -19
View File
@@ -126,26 +126,26 @@ export default {
</script>
<style scoped>
.msg { display: flex; flex-direction: column; height: 100vh; background: #fff; }
.list { flex: 1; height: 0; }
.ico.sm { font-size: 36rpx; }
.item { display: flex; align-items: center; padding: 20rpx 24rpx; background: #fff; }
.item.pin { background: #f7f7f7; }
.av-wrap { position: relative; width: 96rpx; height: 96rpx; flex-shrink: 0; }
.av { width: 96rpx; height: 96rpx; border-radius: 12rpx; }
.av.txt { display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 600; }
.av.work { background: #2563eb; color: #fff; }
.av.file { background: #e2e7ff; color: #434655; }
.av.plain { background: #e2e7ff; color: #004ac6; }
.msg { display: flex; flex-direction: column; height: 100vh; background: #F5F7FA; }
.list { flex: 1; height: 0; background: #fff; }
.ico.sm { font-size: 34rpx; color: #1677FF; }
.item { display: flex; align-items: center; padding: 22rpx 28rpx; background: #fff; }
.item.pin { background: #F7F8FA; }
.av-wrap { position: relative; width: 92rpx; height: 92rpx; flex-shrink: 0; }
.av { width: 92rpx; height: 92rpx; border-radius: 20rpx; }
.av.txt { display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 600; }
.av.work { background: #1677FF; color: #fff; }
.av.file { background: #F3F6FB; color: #4B5563; }
.av.plain { background: #E8F1FF; color: #1677FF; }
.abs { position: absolute; top: -8rpx; right: -8rpx; }
.dotu { position: absolute; top: -4rpx; right: -4rpx; width: 16rpx; height: 16rpx; border-radius: 50%; background: #fa5151; }
.meta { flex: 1; margin-left: 20rpx; min-width: 0; padding: 4rpx 0; border-bottom: 1rpx solid #f0f0f0; }
.dotu { position: absolute; top: -4rpx; right: -4rpx; width: 16rpx; height: 16rpx; border-radius: 50%; background: #DC2626; }
.meta { flex: 1; margin-left: 20rpx; min-width: 0; padding: 8rpx 0 18rpx; border-bottom: 1rpx solid #F0F2F5; }
.top { display: flex; justify-content: space-between; align-items: center; }
.name { font-size: 32rpx; font-weight: 500; max-width: 420rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time { font-size: 22rpx; color: #b2b2b2; }
.name { font-size: 30rpx; font-weight: 600; max-width: 420rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time { font-size: 22rpx; color: #9CA3AF; }
.bot { display: flex; align-items: center; margin-top: 8rpx; }
.prev { flex: 1; font-size: 24rpx; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mute { font-size: 22rpx; margin-left: 8rpx; }
.empty { padding: 120rpx; text-align: center; color: #888; font-size: 26rpx; }
.ico { font-size: 40rpx; color: #111; padding: 8rpx 16rpx; }
.prev { flex: 1; font-size: 24rpx; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mute { font-size: 22rpx; margin-left: 8rpx; color: #9CA3AF; }
.empty { padding: 160rpx 40rpx; text-align: center; color: #6B7280; font-size: 28rpx; background: #fff; }
.ico { font-size: 36rpx; color: #1677FF; padding: 8rpx 12rpx; }
</style>
pages/tabs/workbench.vue
+101 -52
View File
@@ -1,41 +1,59 @@
<template>
<view class="page">
<fy-header title="工作台">
<fy-header :title="greet">
<template #right>
<text class="ico" @click="goSearch">搜</text>
<text class="ico" @click="goSearch">搜索</text>
</template>
</fy-header>
<view class="body">
<view class="hello">
<text class="hello-sub">今天也要高效完成工作</text>
</view>
<view class="stats">
<view class="stat" @click="goTodo">
<text class="sn">{{ todoCount }}</text>
<text class="sl">待办</text>
</view>
<view class="stat" @click="goApply">
<text class="sn">{{ flows.length }}</text>
<text class="sl">可发起</text>
</view>
<view class="stat" @click="openNotice">
<text class="sn">{{ apps.length }}</text>
<text class="sl">办公应用</text>
</view>
</view>
<view v-if="announce" class="notice" @click="openNotice">
<text class="nlab">公告 · {{ announce }}</text>
<text class="ntag">公告</text>
<text class="nlab">{{ announce }}</text>
<text class="arr">›</text>
</view>
<view class="sec-h">
<text class="sec-t">快捷办公</text>
<text class="more" @click="goApply">全部流程</text>
</view>
<view class="card apps">
<view class="cap">
<text>常用业务入口</text>
<text class="cap-sub more" @click="goApply">全部流程 ›</text>
</view>
<view v-if="!flows.length" class="empty">暂无可用审批流，请确认账号已开通申请权限</view>
<view class="grid">
<view v-for="a in flows" :key="a.key" class="app" @click="openFlow(a)">
<view class="icon"><text>{{ a.emoji }}</text></view>
<view class="icon"><text class="mark">{{ mark(a.label) }}</text></view>
<text class="al">{{ a.label }}</text>
<text v-if="a.desc" class="ad">{{ a.desc }}</text>
</view>
</view>
</view>
<view v-if="apps.length" class="sec-h">
<text class="sec-t">个人办公</text>
</view>
<view v-if="apps.length" class="card apps">
<view class="cap">
<text>个人办公</text>
<text class="cap-sub">按你的权限显示</text>
</view>
<view class="grid">
<view v-for="a in apps" :key="a.id" class="app" @click="open(a)">
<view class="icon">
<text>{{ a.icon }}</text>
<text class="mark">{{ mark(a.title) }}</text>
<text v-if="a.badge === 'todo' && todoCount" class="badge abs">{{ todoCount }}</text>
</view>
<text class="al">{{ a.title }}</text>
@@ -43,33 +61,36 @@
</view>
</view>
<view v-if="erp.length" class="sec-h">
<text class="sec-t">管理应用</text>
</view>
<view v-if="erp.length" class="card mods">
<view class="cap">
<text>管理应用</text>
<text class="cap-sub">Web 授权后才会出现</text>
</view>
<view v-for="m in erp" :key="m.id" class="mod" @click="open(m)">
<text class="mi">{{ m.icon }}</text>
<view class="mi"><text>{{ mark(m.title) }}</text></view>
<text class="mt">{{ m.title }}</text>
<text class="arr">›</text>
</view>
</view>
<view class="todo-head">
<view class="sec-h">
<view class="th">
<text>我的待办</text>
<text class="sec-t">我的待办</text>
<text v-if="todoCount" class="badge">{{ todoCount }}</text>
</view>
<text class="more" @click="goTodo">查看全部 ›</text>
<text class="more" @click="goTodo">查看全部</text>
</view>
<view v-if="!pending.length" class="empty-card">
<text class="et">暂无待办</text>
<text class="es">需要处理的审批和协同会出现在这里</text>
</view>
<view v-if="!pending.length" class="empty">暂无待办</view>
<view v-for="t in pending" :key="pendKey(t)" class="card todo" @click="openPending(t)">
<view class="av">{{ (t.submitter || t.applicant || '?').slice(0, 1) }}</view>
<view class="tm">
<text class="tag">{{ t.tag || t.typeLabel || t.type || '流程审批' }}</text>
<text class="tn">{{ t.title || t.no }}</text>
<text class="ts">{{ t.tag || t.typeLabel || t.type || '流程审批' }} · {{ t.submitter || '' }}</text>
<text class="ts">{{ t.submitter || '—' }}</text>
</view>
<text class="chip">{{ t.btn || '去办理' }}</text>
<text class="arr">›</text>
</view>
</view>
</view>
@@ -89,6 +110,12 @@ export default {
return { apps: [], erp: [], todos: [], pendingItems: [], shortcuts: [], todoCount: 0, announce: '', off: null }
},
computed: {
greet() {
const name = (store.me && store.me.name) || ''
const h = new Date().getHours()
const hi = h < 12 ? '上午好' : h < 18 ? '下午好' : '晚上好'
return name ? hi + '，' + name : '工作台'
},
flows() {
const fromApi = (this.shortcuts || []).map((s, i) => ({
key: 'sc-' + (s.to || s.label || i),
@@ -160,6 +187,7 @@ export default {
else toast('没有发起申请权限')
},
goTodo() { uni.navigateTo({ url: '/pages/todo/list' }) },
mark(s) { return String(s || '应').replace(/\s/g, '').slice(0, 1) },
pendKey(t) { return t.no || t.id || t.to || t.title },
openPending(t) {
if (t.source === 'work' || t.taskId) {
@@ -180,37 +208,58 @@ export default {
</script>
<style scoped>
.body { padding: 16rpx 24rpx 40rpx; }
.notice {
background: rgba(219, 225, 255, 0.4);
border: 1rpx solid #dbe1ff;
border-radius: 16rpx;
padding: 20rpx 24rpx;
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 20rpx;
.body { padding: 8rpx 28rpx 48rpx; }
.hello { margin: 4rpx 4rpx 20rpx; }
.hello-sub { font-size: 26rpx; color: #6B7280; }
.stats { display: flex; gap: 16rpx; margin-bottom: 20rpx; }
.stat {
flex: 1; background: #fff; border-radius: 20rpx; padding: 22rpx 8rpx;
text-align: center; border: 1rpx solid rgba(17,24,39,0.06);
}
.nlab { font-size: 24rpx; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arr { color: #737686; }
.apps, .mods { padding: 24rpx; margin-bottom: 20rpx; }
.cap { display: flex; justify-content: space-between; align-items: center; font-size: 30rpx; font-weight: 600; margin-bottom: 16rpx; border-bottom: 1rpx solid #eaedff; padding-bottom: 16rpx; }
.cap-sub { font-size: 22rpx; color: #737686; font-weight: 400; }
.sn { display: block; font-size: 36rpx; font-weight: 650; color: #1677FF; font-variant-numeric: tabular-nums; }
.sl { font-size: 24rpx; color: #6B7280; }
.notice {
background: #fff;
border: 1rpx solid rgba(17,24,39,0.06);
border-radius: 20rpx;
padding: 20rpx 24rpx;
display: flex; align-items: center;
margin-bottom: 8rpx;
}
.ntag { font-size: 22rpx; color: #EA8C00; background: #FFF6E8; border-radius: 8rpx; padding: 4rpx 10rpx; margin-right: 12rpx; }
.nlab { font-size: 26rpx; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #111827; }
.arr { color: #C4C9D4; font-size: 32rpx; margin-left: 8rpx; }
.sec-h { display: flex; justify-content: space-between; align-items: center; margin: 28rpx 4rpx 14rpx; }
.sec-t { font-size: 30rpx; font-weight: 650; color: #111827; }
.th { display: flex; align-items: center; gap: 10rpx; }
.more { font-size: 26rpx; color: #1677FF; }
.apps, .mods { padding: 12rpx 8rpx 20rpx; }
.grid { display: flex; flex-wrap: wrap; }
.app { width: 25%; display: flex; flex-direction: column; align-items: center; padding: 16rpx 4rpx; box-sizing: border-box; }
.icon { width: 80rpx; height: 80rpx; border-radius: 20rpx; background: #f2f3ff; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 8rpx; font-size: 32rpx; }
.icon {
width: 88rpx; height: 88rpx; border-radius: 24rpx; background: #F3F6FB;
display: flex; align-items: center; justify-content: center;
position: relative; margin-bottom: 10rpx;
}
.mark { font-size: 30rpx; font-weight: 650; color: #1677FF; }
.abs { position: absolute; top: -8rpx; right: -8rpx; }
.al { font-size: 22rpx; text-align: center; }
.ad { font-size: 18rpx; color: #737686; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod { display: flex; align-items: center; padding: 20rpx 0; border-top: 1rpx solid #eaedff; }
.mi { width: 48rpx; }
.al { font-size: 24rpx; text-align: center; color: #111827; line-height: 1.35; }
.mod { display: flex; align-items: center; padding: 22rpx 16rpx; }
.mod + .mod { border-top: 1rpx solid #F0F2F5; }
.mi {
width: 64rpx; height: 64rpx; border-radius: 16rpx; background: #F3F6FB;
color: #1677FF; display: flex; align-items: center; justify-content: center;
font-weight: 650; margin-right: 16rpx;
}
.mt { flex: 1; font-size: 28rpx; }
.todo-head { display: flex; justify-content: space-between; align-items: center; margin: 16rpx 8rpx; }
.th { display: flex; align-items: center; gap: 10rpx; font-size: 30rpx; font-weight: 600; }
.more { font-size: 22rpx; color: #434655; }
.todo { display: flex; align-items: center; padding: 24rpx; margin-bottom: 16rpx; }
.av { width: 80rpx; height: 80rpx; border-radius: 50%; background: #dbe1ff; color: #004ac6; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.tm { flex: 1; margin: 0 16rpx; min-width: 0; }
.todo { display: flex; align-items: center; padding: 24rpx 24rpx; margin-bottom: 16rpx; }
.tm { flex: 1; min-width: 0; }
.tag { display: inline-block; font-size: 22rpx; color: #1677FF; background: #E8F1FF; border-radius: 8rpx; padding: 2rpx 10rpx; margin-bottom: 8rpx; }
.tn { display: block; font-size: 28rpx; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts { font-size: 22rpx; color: #737686; }
.empty { padding: 24rpx; text-align: center; color: #737686; font-size: 24rpx; }
.ico { padding: 8rpx 16rpx; }
.ts { display: block; font-size: 24rpx; color: #6B7280; margin-top: 4rpx; }
.empty { padding: 28rpx; text-align: center; color: #6B7280; font-size: 26rpx; }
.empty-card { background: #fff; border-radius: 24rpx; padding: 48rpx 32rpx; text-align: center; border: 1rpx solid rgba(17,24,39,0.06); }
.et { display: block; font-size: 28rpx; font-weight: 600; }
.es { display: block; font-size: 24rpx; color: #6B7280; margin-top: 8rpx; }
.ico { padding: 8rpx 8rpx; font-size: 28rpx; color: #1677FF; }
</style>