主页样式修改

src/components/MainView.vue

@@ -1,49 +1,38 @@
 <template>
-  <div>
+  <div style="display: flex;">
     <div>
-      <a-layout style="height: 400px;">
-        <a-layout-header>Header</a-layout-header>
-        <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"
-                style="height: 30px;width: 250px;border: 1px solid red;">
-                {{ item.name }}:{{ item.id }}
-              </div>
-
-            </div>
-          </a-layout-sider>
-          <a-layout-content>
-            <div style="margin-left: 64px;">
-              <div style="display: flex;flex-direction: row;width: 100%;">
-
-                <div class="flex justify-between">
-                  <NestedFunction v-model="list"></NestedFunction>
-                  {{ list }}
-                </div>
-
-              </div>
-
-              <div style="width: 800px;height:500px">
-                动态渲染
-                <!-- <component :is="componentMapping['Rate']" v-bind="{}"/> -->
-                <DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
-                  {{ component.id }}
-                </DynamicComponent>
-              </div>
-              <div>
-              </div>
-            </div>
-
-          </a-layout-content>
-        </a-layout>
-        <a-layout-footer>Footer</a-layout-footer>
-      </a-layout>
+      compoent
     </div>
+    <div style="overflow-y: auto;overflow-x: none;">
+      <div ref="el2" style="display: flex;flex-direction: column;height: 500px;width: 100%;">
+        <div v-for="item in componentsList" :key="item.id" style="height: 30px;width: 250px;border: 1px solid red;">
+          {{ item.name }}:{{ item.id }}
+        </div>
 
+      </div>
+    </div>
+    <div>
+      <div>
+        <div style="display: flex;flex-direction: row;width: 100%;">
 
+          <div v-if="list.length>0" class="flex justify-between">
+            <NestedFunction  v-model="list"></NestedFunction>
+            {{ list }}
+          </div>
 
+        </div>
+
+        <div style="width: 800px;height:500px">
+          动态渲染
+          <!-- <component :is="componentMapping['Rate']" v-bind="{}"/> -->
+          <DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
+            {{ component.id }}
+          </DynamicComponent>
+        </div>
+        <div>
+        </div>
+      </div>
+    </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颜色 */
+}