修改已选组件显示问题

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;
     }

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 {

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 {

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;

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">

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;
     }