feat: 更新通知组件背景色,使用变量替代硬编码颜色,提升样式一致性

This commit is contained in:
2026-01-08 19:14:53 +07:00
parent 4cad951b44
commit 2706807abd
5 changed files with 4 additions and 20 deletions

View File

@@ -88,7 +88,7 @@ html.ion-palette-light {
--ion-text-color-step-800: #cccccc;
--ion-text-color-step-850: #d9d9d9;
--ion-text-color-step-900: #e6e6e6;
--ion-text-color-step-950: #f2f2f2;
--ion-text-color-step-950: #f5f5f5;
--ion-background-color-step-50: #f2f2f2;
--ion-background-color-step-100: #e6e6e6;

View File

@@ -23,7 +23,7 @@ function getConfigByType(type: string) {
<div v-if="data" class="notification-detail">
<!-- 图标和标题 -->
<div class="flex items-start gap-4">
<div class="bg-[#f1f1f1] dark:bg-[#2d2d2d] p-2.5 rounded-full shrink-0">
<div class="bg-text-950 p-2.5 rounded-full shrink-0">
<Icon :icon="getConfigByType(data.type).icon" class="text-2xl" :style="{ color: getConfigByType(data.type).color }" />
</div>
<div class="flex-1 min-w-0">

View File

@@ -103,7 +103,7 @@ onBeforeMount(() => {
class="py-3"
@click="handleItemClick(item)"
>
<div slot="start" class="bg-[#f4f4f4] dark:bg-[#0a0a0a] p-2.5 rounded-full">
<div slot="start" class="bg-text-950 p-2.5 rounded-full">
<Icon :icon="getConfigByType(item.type).icon" class="text-2xl" :style="{ color: getConfigByType(item.type).color }" />
</div>
<div class="pl-3 w-full">

View File

@@ -3,20 +3,6 @@ import IconParkOutlineApplicationMenu from "~icons/icon-park-outline/application
import IconParkOutlineScanCode from "~icons/icon-park-outline/scan-code";
import News from "./components/news.vue";
import Rwa from "./components/rwa.vue";
const { open } = useQRScanner();
async function handleScan() {
const result = await open({
title: "扫描二维码",
});
if (result) {
console.log("扫描结果:", result);
// TODO: 根据扫描结果进行相应处理
// 例如:跳转到对应页面、显示信息等
}
}
</script>
<template>
@@ -30,9 +16,6 @@ async function handleScan() {
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true" class="ion-padding">
<ion-button fill="clear" @click="handleScan">
<IconParkOutlineScanCode slot="icon-only" />
</ion-button>
<!-- <pwa-install-button class="mb-4" /> -->
<Rwa />
<News />

View File

@@ -34,6 +34,7 @@ const config: Config = {
800: "var(--ion-text-color-step-800)",
850: "var(--ion-text-color-step-850)",
900: "var(--ion-text-color-step-900)",
950: "var(--ion-text-color-step-950)",
},
},
},