主页样式修改

src/components/MainView.vue

@@ -1,24 +1,21 @@
 <template>
+  <div style="display: flex;">
     <div>
-    <div>
+      compoent
-      <a-layout style="height: 400px;">
+    </div>
-        <a-layout-header>Header</a-layout-header>
+    <div style="overflow-y: auto;overflow-x: none;">
-        <a-layout>
-          <a-layout-sider style="background-color: aliceblue;width: fit-content;">
-
       <div ref="el2" style="display: flex;flex-direction: column;height: 500px;width: 100%;">
-              <div v-for="item in componentsList" :key="item.id"
+        <div v-for="item in componentsList" :key="item.id" style="height: 30px;width: 250px;border: 1px solid red;">
-                style="height: 30px;width: 250px;border: 1px solid red;">
           {{ item.name }}:{{ item.id }}
         </div>
 
       </div>
-          </a-layout-sider>
+    </div>
-          <a-layout-content>
+    <div>
-            <div style="margin-left: 64px;">
+      <div>
         <div style="display: flex;flex-direction: row;width: 100%;">
 
-                <div class="flex justify-between">
+          <div v-if="list.length>0" class="flex justify-between">
             <NestedFunction  v-model="list"></NestedFunction>
             {{ list }}
           </div>
@@ -35,15 +32,7 @@
         <div>
         </div>
       </div>
-
-          </a-layout-content>
-        </a-layout>
-        <a-layout-footer>Footer</a-layout-footer>
-      </a-layout>
     </div>
-
-
-
   </div>
 
 

src/components/NestedFunction.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="drag-area" ref="el">
+  <ul class="drag-area" ref="el" style="margin: 0;">
     <li v-for="el in modelValue" :key="el.name">
       <div style="width: 200px;border: 1px solid red;">
         <p>{{ el.name }}:{{ el.id }}</p>

src/style.css

@@ -56,11 +56,6 @@ button:focus-visible {
   padding: 2em;
 }
 
-#app {
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
 
 @media (prefers-color-scheme: light) {
   :root {
@@ -74,3 +69,22 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+/* 全局滚动条美化 */
+::-webkit-scrollbar {
+  width: 4px; /* 垂直滚动条的宽度 */
+  height: 4px; /* 水平滚动条的高度 */
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1; /* 滚动条轨道背景色 */
+}
+
+::-webkit-scrollbar-thumb {
+  background: #bbb; /* 滚动条颜色 */
+  border-radius: 6px; /* 滚动条圆角 */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #aaa; /* 滚动条hover颜色 */
+}