From 7e25551af673a2c358efda06b79fd1c1e6ac1c4e Mon Sep 17 00:00:00 2001
From: hisoka0728 <1399952343@qq.com>
Date: Thu, 15 Aug 2024 09:37:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E8=BE=B9=E6=A1=86?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/custom-border/custom-dv-1/custom-dv-1.scss   | 7 ++++++-
 src/custom-border/custom-dv-1/custom-dv-1.tsx    | 2 +-
 src/custom-border/custom-dv-10/custom-dv-10.scss | 9 +++++++--
 src/custom-border/custom-dv-10/custom-dv-10.tsx  | 2 +-
 src/screen-portlet/screen-portlet.scss           | 8 +++++---
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/custom-border/custom-dv-1/custom-dv-1.scss b/src/custom-border/custom-dv-1/custom-dv-1.scss
index 876ca0e..a7c8dc5 100644
--- a/src/custom-border/custom-dv-1/custom-dv-1.scss
+++ b/src/custom-border/custom-dv-1/custom-dv-1.scss
@@ -7,7 +7,12 @@ $style-1: (
   @include when(style-1) {
     position: relative;
     width: 100%;
-    height: calc(100% - getCssVar(style-1,'offsetY'));
+    height: 100%;
+    @include e(wrapper){
+      position: absolute;
+      width: 100%;
+      height: calc(100% - getCssVar(style-1,'offsetY'));
+    }
     @include e(border-box) {
     z-index: 100;
     height: 0;
diff --git a/src/custom-border/custom-dv-1/custom-dv-1.tsx b/src/custom-border/custom-dv-1/custom-dv-1.tsx
index edb238b..213e315 100644
--- a/src/custom-border/custom-dv-1/custom-dv-1.tsx
+++ b/src/custom-border/custom-dv-1/custom-dv-1.tsx
@@ -165,7 +165,7 @@ export const CustomDV1 = defineComponent({
         class={[this.ns.b(), this.ns.is('style-1', true)]}
         style={`--ibiz-style-1-offsetY:${this.offsetY}px`}
       >
-        {this.renderBorder()}
+        <div class={this.ns.e('wrapper')}>{this.renderBorder()}</div>
         <div class={this.ns.e('content')}>{this.$slots.default?.()}</div>
       </div>
     );
diff --git a/src/custom-border/custom-dv-10/custom-dv-10.scss b/src/custom-border/custom-dv-10/custom-dv-10.scss
index 1e513d3..23d5707 100644
--- a/src/custom-border/custom-dv-10/custom-dv-10.scss
+++ b/src/custom-border/custom-dv-10/custom-dv-10.scss
@@ -9,7 +9,12 @@ $style-10: (
   @include when(style-10) {
     position: relative;
     width: 100%;
-    height: calc(100% - getCssVar(style-10, 'offsetY'));
+    height: 100%;
+    @include e(wrapper){
+      position: absolute;
+      width: 100%;
+      height: calc(100% - getCssVar(style-10, 'offsetY'));
+    }
     @include e(border-box) {
       z-index: 100;
       height: 0;
@@ -19,7 +24,7 @@ $style-10: (
       top: getCssVar(style-10, 'padding');
       left: getCssVar(style-10, 'padding');
       width:  calc(100% - 2 * getCssVar(style-10, 'padding'));
-      height: calc(100% - 2 * getCssVar(style-10, 'padding'));
+      height: calc(100% - 2 * getCssVar(style-10, 'padding') - getCssVar(style-10, 'offsetY'));
       border-radius: 10px;
     }
     @include e(border-svg) {
diff --git a/src/custom-border/custom-dv-10/custom-dv-10.tsx b/src/custom-border/custom-dv-10/custom-dv-10.tsx
index 13d10f1..824f04d 100644
--- a/src/custom-border/custom-dv-10/custom-dv-10.tsx
+++ b/src/custom-border/custom-dv-10/custom-dv-10.tsx
@@ -112,7 +112,7 @@ export const CustomDV10 = defineComponent({
         class={[this.ns.b(), this.ns.is('style-10', true)]}
         style={`--ibiz-style-10-offsetY:${this.offsety}px;--ibiz-style-10-padding:${this.padding}px`}
       >
-        {this.renderBorder()}
+        <div class={this.ns.e('wrapper')}>{this.renderBorder()}</div>
         <div
           class={this.ns.e('mask')}
           style={`box-shadow: inset 0 0 25px 3px ${this.mergedColor[0]};background-color: ${this.backgroundColor};`}
diff --git a/src/screen-portlet/screen-portlet.scss b/src/screen-portlet/screen-portlet.scss
index 84248ac..ba8d63c 100644
--- a/src/screen-portlet/screen-portlet.scss
+++ b/src/screen-portlet/screen-portlet.scss
@@ -57,9 +57,11 @@
     }
 
     &.is-style-10 {
-      transform: translateY(50px);
-      .#{bem(custom-border,content)} {
-        transform: translateY(-50px);
+      .#{bem(custom-border,wrapper)} {
+        transform: translateY(50px);
+      }
+      .#{bem(custom-border,mask)} {
+        transform: translateY(50px);
       }
     }
 
-- 
Gitee