github/poster-design
1
0
Fork 0
mirror of https://github.com/palxiao/poster-design.git synced 2025-07-15 16:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: page backgroundColor bug

Browse Source
This commit is contained in:
ShawnPhang 2023-09-18 17:40:20 +08:00
parent c0c8546c3e
commit 4c0010fc68
3 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/styles/design.less
View File

@ -12,9 +12,11 @@
@height2: 54px; // Appears 5 times @height2: 54px; // Appears 5 times
#page-design-index { .page-design-bg-color {
background-color: #4b678c; background-color: #4b678c;
// background-color: #4682b4; // background-color: #4682b4;
}
#page-design-index {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
@ -124,10 +126,16 @@
width: 1px; width: 1px;
margin: 7px 0 0 18px; margin: 7px 0 0 18px;
} }
.shelter { .shelter,
.shelter-bg {
position: absolute; position: absolute;
box-shadow: 0 0 0 5000px rgba(255, 255, 255, 0.95);
z-index: 8;
pointer-events: none; pointer-events: none;
} }
.shelter {
box-shadow: 0 0 0 5000px rgba(255, 255, 255, 0.95);
z-index: 8;
}
.shelter-bg {
background-color: #ffffff;
}
} }

8
src/assets/styles/main.less
View File

@ -35,12 +35,12 @@ body {
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
border-radius: 3px; border-radius: 3px;
background-color: #ccd4de; background-color: #ccd4de;
/*box-shadow: 0 0 1px hsl(0deg 0% 100% / 50%);*/ // box-shadow: 0 0 1px hsl(0deg 0% 100% / 50%);
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
//background-color: #f0f1f3; background-color: #f0f1f3;
background-color: transparent; // background-color: transparent;
border-radius: 3px; // border-radius: 3px;
} }
input:-webkit-autofill, input:-webkit-autofill,

6
src/views/Index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div id="page-design-index" ref="pageDesignIndex"> <div id="page-design-index" ref="pageDesignIndex" class="page-design-bg-color">
<div :style="style" class="top-nav"> <div :style="style" class="top-nav">
<div class="top-nav-wrap"> <div class="top-nav-wrap">
<div class="top-left"> <div class="top-left">
@ -18,8 +18,10 @@
<div class="page-design-index-wrap"> <div class="page-design-index-wrap">
<widget-panel></widget-panel> <widget-panel></widget-panel>
<design-board class="page-design-wrap" pageDesignCanvasId="page-design-canvas"> <design-board class="page-design-wrap" pageDesignCanvasId="page-design-canvas">
<!-- 用于挡住画布溢出部分，因为使用overflow有bug --> <!-- 用于挡住画布溢出部分，因为使用overflow有bug. PS:如shadow没有透明度则可以完全遮挡元素 -->
<div class="shelter" :style="{ width: Math.floor((dPage.width * dZoom) / 100) + 'px', height: Math.floor((dPage.height * dZoom) / 100) + 'px' }"></div> <div class="shelter" :style="{ width: Math.floor((dPage.width * dZoom) / 100) + 'px', height: Math.floor((dPage.height * dZoom) / 100) + 'px' }"></div>
<!-- 提供一个背景图层以免遮挡穿帮 -->
<div class="shelter-bg" :style="{ width: Math.floor((dPage.width * dZoom) / 100) + 'px', height: Math.floor((dPage.height * dZoom) / 100) + 'px' }"></div>
</design-board> </design-board>
<style-panel></style-panel> <style-panel></style-panel>
</div> </div>