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
#page-design-index {
.page-design-bg-color {
background-color: #4b678c;
// background-color: #4682b4;
}
#page-design-index {
display: flex;
flex-direction: column;
height: 100%;
@ -124,10 +126,16 @@
width: 1px;
margin: 7px 0 0 18px;
}
.shelter {
.shelter,
.shelter-bg {
position: absolute;
box-shadow: 0 0 0 5000px rgba(255, 255, 255, 0.95);
z-index: 8;
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 {
border-radius: 3px;
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 {
//background-color: #f0f1f3;
background-color: transparent;
border-radius: 3px;
background-color: #f0f1f3;
// background-color: transparent;
// border-radius: 3px;
}
input:-webkit-autofill,

6
src/views/Index.vue
View File

@ -1,5 +1,5 @@
<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 class="top-nav-wrap">
<div class="top-left">
@ -18,8 +18,10 @@
<div class="page-design-index-wrap">
<widget-panel></widget-panel>
<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-bg" :style="{ width: Math.floor((dPage.width * dZoom) / 100) + 'px', height: Math.floor((dPage.height * dZoom) / 100) + 'px' }"></div>
</design-board>
<style-panel></style-panel>
</div>