From 272ece99cb0f82282564b83ab01b1e8239b8fdb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 30 Aug 2024 18:48:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=B7=B2=E9=80=89=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-custom/model-custom-content.vue |  2 +-
 .../model-data-magic/model-data-magic-content.vue    |  2 +-
 .../model-img-magic/model-img-magic-content.vue      |  2 +-
 src/layout/components/main/index.scss                | 12 +++++++++---
 src/layout/components/main/index.vue                 |  4 ++--
 src/layout/components/settings/index.vue             |  2 +-
 6 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index c2d3a38f..0fce1aed 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -196,7 +196,7 @@ const replace_data = () => {
     display: flex;
     flex-direction: column;
 }
-@media screen and (max-width: 1540px) {
+@media screen and (max-width: 1560px) {
     .settings {
         width: 40rem;
     }
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index 0b0e7e31..8d76c7a9 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -144,7 +144,7 @@ onUnmounted(() => {
 });
 
 const handleResize = () => {
-    if (window.innerWidth <= 1540) {
+    if (window.innerWidth <= 1560) {
         cubeWidth.value = 330;
         cubeHeight.value = 330;
     } else {
diff --git a/src/components/model-img-magic/model-img-magic-content.vue b/src/components/model-img-magic/model-img-magic-content.vue
index 00002a22..362a64cc 100644
--- a/src/components/model-img-magic/model-img-magic-content.vue
+++ b/src/components/model-img-magic/model-img-magic-content.vue
@@ -105,7 +105,7 @@ onUnmounted(() => {
 });
 
 const handleResize = () => {
-    if (window.innerWidth <= 1540) {
+    if (window.innerWidth <= 1560) {
         cubeWidth.value = 330;
         cubeHeight.value = 330;
     } else {
diff --git a/src/layout/components/main/index.scss b/src/layout/components/main/index.scss
index 00a44a12..63dbad91 100644
--- a/src/layout/components/main/index.scss
+++ b/src/layout/components/main/index.scss
@@ -38,10 +38,13 @@
         display: none;
     }
 }
-@media screen and (max-width: 1540px) {
+@media screen and (max-width: 1560px) {
     .siderbar {
         width: 32rem;
     }
+    .drawer-container {
+        display: none;
+    }
 }
 .main {
     flex: 1;
@@ -247,15 +250,18 @@
 .drawer-container {
     position: relative;
     overflow: hidden;
-    width: 12.8rem;
     margin-left: 0.1rem;
+    transition: 0.8s ease;
     .drawer-content {
         position: absolute;
         top: 0;
         width: 12.8rem;
         height: 100%;
         background: #fff;
-        transition: left 0.5s ease;
+        transition: left 0.8s ease;
+    }
+    .drawer-title {
+        transition: 0.4s ease;
     }
     .drawer-drag-bg {
         background: #F2F8FF;
diff --git a/src/layout/components/main/index.vue b/src/layout/components/main/index.vue
index 58ef7dba..ed844547 100644
--- a/src/layout/components/main/index.vue
+++ b/src/layout/components/main/index.vue
@@ -15,9 +15,9 @@
             </el-collapse-item>
         </el-collapse>
     </div>
-    <div class="drawer-container">
+    <div class="drawer-container" :style="`width: ${ diy_data.length > 0 ? '12.8rem' : '0px' }`">
         <div class="drawer-content" :style="{ left: diy_data.length > 0 ? '0' : '-100%' }">
-            <div class="size-14 cr-3 fw ptb-20 pl-12">已选组件({{ diy_data.length }})</div>
+            <div class="size-14 cr-3 fw ptb-20 pl-12 drawer-title" :style="{ opacity: diy_data.length > 0 ? '1' : '0' }">已选组件({{ diy_data.length }})</div>
             <div ref="left_scrollTop" class="drawer-drag-area">
                 <VueDraggable v-model="diy_data" :animation="500" target=".sort-target" :scroll="true" :on-sort="on_sort">
                     <TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col">
diff --git a/src/layout/components/settings/index.vue b/src/layout/components/settings/index.vue
index 08cbedb7..9dcb4374 100644
--- a/src/layout/components/settings/index.vue
+++ b/src/layout/components/settings/index.vue
@@ -151,7 +151,7 @@ const radio = ref('1'); // 创建一个响应式的数字变量，初始值为0
         background-color: #fff;
     }
 }
-@media screen and (max-width: 1540px) {
+@media screen and (max-width: 1560px) {
     .settings {
         width: 40rem;
     }