feat: 更新通知组件背景色,使用变量替代硬编码颜色,提升样式一致性
This commit is contained in:
@@ -88,7 +88,7 @@ html.ion-palette-light {
|
|||||||
--ion-text-color-step-800: #cccccc;
|
--ion-text-color-step-800: #cccccc;
|
||||||
--ion-text-color-step-850: #d9d9d9;
|
--ion-text-color-step-850: #d9d9d9;
|
||||||
--ion-text-color-step-900: #e6e6e6;
|
--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-50: #f2f2f2;
|
||||||
--ion-background-color-step-100: #e6e6e6;
|
--ion-background-color-step-100: #e6e6e6;
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ function getConfigByType(type: string) {
|
|||||||
<div v-if="data" class="notification-detail">
|
<div v-if="data" class="notification-detail">
|
||||||
<!-- 图标和标题 -->
|
<!-- 图标和标题 -->
|
||||||
<div class="flex items-start gap-4">
|
<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 }" />
|
<Icon :icon="getConfigByType(data.type).icon" class="text-2xl" :style="{ color: getConfigByType(data.type).color }" />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 min-w-0">
|
<div class="flex-1 min-w-0">
|
||||||
|
|||||||
@@ -103,7 +103,7 @@ onBeforeMount(() => {
|
|||||||
class="py-3"
|
class="py-3"
|
||||||
@click="handleItemClick(item)"
|
@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 }" />
|
<Icon :icon="getConfigByType(item.type).icon" class="text-2xl" :style="{ color: getConfigByType(item.type).color }" />
|
||||||
</div>
|
</div>
|
||||||
<div class="pl-3 w-full">
|
<div class="pl-3 w-full">
|
||||||
|
|||||||
@@ -3,20 +3,6 @@ import IconParkOutlineApplicationMenu from "~icons/icon-park-outline/application
|
|||||||
import IconParkOutlineScanCode from "~icons/icon-park-outline/scan-code";
|
import IconParkOutlineScanCode from "~icons/icon-park-outline/scan-code";
|
||||||
import News from "./components/news.vue";
|
import News from "./components/news.vue";
|
||||||
import Rwa from "./components/rwa.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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -30,9 +16,6 @@ async function handleScan() {
|
|||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
</ion-header>
|
</ion-header>
|
||||||
<ion-content :fullscreen="true" class="ion-padding">
|
<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" /> -->
|
<!-- <pwa-install-button class="mb-4" /> -->
|
||||||
<Rwa />
|
<Rwa />
|
||||||
<News />
|
<News />
|
||||||
|
|||||||
@@ -34,6 +34,7 @@ const config: Config = {
|
|||||||
800: "var(--ion-text-color-step-800)",
|
800: "var(--ion-text-color-step-800)",
|
||||||
850: "var(--ion-text-color-step-850)",
|
850: "var(--ion-text-color-step-850)",
|
||||||
900: "var(--ion-text-color-step-900)",
|
900: "var(--ion-text-color-step-900)",
|
||||||
|
950: "var(--ion-text-color-step-950)",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user