hxuanyu/obs-overlay-widget
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化预览模式背景样式，确保透明背景一致性

Browse Source
This commit is contained in:
hxuanyu 2025-06-27 11:23:42 +08:00
parent b7730f8617
commit e571385d19
3 changed files with 45 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@ -13,11 +13,12 @@ body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow-x: hidden; /* 只隐藏水平滚动条 */
overflow-y: auto; /* 允许垂直滚动 */
background-color: #f5f7fa00;
background-color: transparent !important;
}
#app {
min-height: 100vh;
background-color: transparent !important;
}
/* 全局滚动条样式 */

25
src/style.css
View File

@ -24,6 +24,20 @@ body {
/* Preview mode specific styles */
.preview-view {
background-color: transparent !important;
background: transparent !important;
}
/* 为预览页面专门设置透明背景 */
body.preview-mode,
html.preview-mode {
background-color: transparent !important;
background: transparent !important;
}
/* 确保 #app 在预览模式下也是透明的 */
body.preview-mode #app {
background-color: transparent !important;
background: transparent !important;
}
/* 确保滚动行为平滑 */
@ -76,8 +90,17 @@ button:focus-visible {
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
background-color: transparent;
}
/* 确保预览模式下即使在浅色主题也是透明的 */
body.preview-mode,
html.preview-mode,
body.preview-mode #app {
background-color: transparent !important;
background: transparent !important;
}
a:hover {
color: #3498db;
}

22
src/views/PreviewView.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="preview-view">
<div class="preview-view transparent-bg">
<component
:is="widgetComponent"
v-if="widgetComponent"
@ -9,7 +9,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { decodeConfig } from '../utils/configUtils';
import { widgets } from '../widgets/registry';
@ -26,6 +26,10 @@ const widgetComponent = computed(() => {
});
onMounted(() => {
// 为body添加透明背景类
document.body.classList.add('preview-mode');
document.documentElement.classList.add('preview-mode');
// 在 hash 模式下获取 URL 参数
const searchParams = window.location.href.split('?')[1];
const queryParams = new URLSearchParams(searchParams || '');
@ -41,6 +45,12 @@ onMounted(() => {
}
}
});
onUnmounted(() => {
// 清理透明背景类
document.body.classList.remove('preview-mode');
document.documentElement.classList.remove('preview-mode');
});
</script>
<style scoped>
@ -50,6 +60,12 @@ onMounted(() => {
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
background-color: transparent !important;
background: transparent !important;
}
.transparent-bg {
background: rgba(0, 0, 0, 0) !important;
background-color: rgba(0, 0, 0, 0) !important;
}
</style>