动作集合样式更改

src/App.vue

@@ -28,12 +28,19 @@
             </div>
             <el-divider></el-divider>
             <!-- 动作集合 -->
-            <div>
+            <div style="display: flex;justify-content: space-between;">
                 <div style="height: 25px;display: flex;justify-content: flex-start;align-items: center;margin-left: 15px;">
                     <span>动作集合:</span>
-                    <span style="margin-left: 10px;" @click="onBreadcrumb(item)" v-for="item in actionAll" :key="item.Kvid">
-                        <span id="Breadcrumb" style="color: blue;">{{ item.name }}</span> >
-                    </span>
+                    <div class="scroll-container" @wheel="handleScroll" style="width: 325px;">
+                        <div class="scroll-content" style="margin-left: 10px;">
+                            <span id="Breadcrumb" style="color: blue;" @click="onBreadcrumb(item)" v-for="item in actionAll" :key="item.Kvid">{{ item.name }}></span>
+                        </div>
+                    </div>
+                </div>
+                <div style="display:flex;align-items: center;margin-right: 15px;">
+                    <el-button :disabled="state" type="primary" size="mini" style="width: 30px;height: 20px;" @click="newAction">
+                        <img style="width: 15px;height: 15px;" src="./assets/add.svg">
+                    </el-button>
                 </div>
             </div>
             <div style="display: flex;align-items: flex-start;justify-content: space-between;width: 460px;">
@@ -66,14 +73,9 @@
                         </transition-group>
                     </draggable>
                 </div>
-                <div style="height: 42px;display:flex;align-items: center;margin-right: 15px;">
-                    <el-button :disabled="state" type="primary" size="mini" style="width: 30px;height: 20px;" @click="newAction">
-                        <img style="width: 15px;height: 15px;" src="./assets/add.svg">
-                    </el-button>
-                </div>
             </div>
             <el-divider></el-divider>
-            <!-- 动作配置 -->
+            <!-- 容器配置 -->
             <div v-if="isShowAction">
                 <div style="height: 35px;display: flex;justify-content: space-between;align-items: center;margin-left: 15px;margin-right: 15px;">
                     <div style="width: 211px;display: flex;align-items: center;">
@@ -88,9 +90,9 @@
                             </el-option>
                         </el-select>
                     </div>
-                    <div v-if="actionType == 'actions'">
-                        <el-button @click="toActions">进入容器</el-button>
-                    </div>
+                </div>
+                <div style="margin-left: 15px;margin-top: 10px;" v-if="actionType == 'actions'">
+                    <el-button @click="toActions">进入容器</el-button>
                 </div>
                 <component :is="dynamicComponent" :actionName="actionName" :actionType="actionType" @dataChanged="handleDataChange" v-if="actionType !== ''"></component>
             </div>
@@ -222,6 +224,17 @@ export default {
     },
     computed: {},
     methods: {
+        handleScroll(event) {
+            // 检测鼠标滚轮事件
+            if (event.deltaY !== 0) {
+                // 阻止垂直滚动
+                event.preventDefault();
+
+                // 调整横向滚动条的位置
+                const scrollContainer = this.$el.querySelector('.scroll-container');
+                scrollContainer.scrollLeft += event.deltaY;
+            }
+        },
         // 组件配置
         loadComponent(componentName) {
             switch (componentName) {
@@ -652,6 +665,18 @@ export default {
 </script>
 
 <style>
+.scroll-container {
+    overflow-y: hidden;
+    overflow-x: hidden;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.scroll-content {
+    /* width: 120%; */
+    height: 100%;
+}
+
 .circle {
     width: 12px;
     height: 12px;

src/components/actions.vue

 <template>
   <div class="actions">
-    容器
+    <!-- 容器 -->
   </div>
 </template>
 
 <script>
 export default {
-  name:'actions',
-  components:{},
-  props:{},
-  data(){
+  name: 'actions',
+  components: {},
+  props: {},
+  data() {
     return {
     }
   },
-  created(){},
-  mounted(){},
-  watch:{},
-  computed:{},
-  methods:{},
+  created() { },
+  mounted() { },
+  watch: {},
+  computed: {},
+  methods: {},
 }
 </script>
-<style lang="scss" scoped>
-</style>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file