调整工程结构,并进行了优化

packages/bigscreen/designer/components/configItem.vue

@@ -0,0 +1,86 @@
+<template>
+  <section class="configItem">
+    <label v-text="label"/>
+    <div class="content fill">
+      <slot v-if="$slots.default"/>
+      <div v-else-if="value" v-html="value"/>
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  name: "configItem",
+  props: {
+    label: String,
+    value: {default: null}
+  },
+  data() {
+    return {}
+  },
+  methods: {},
+}
+</script>
+<style scoped lang="scss">
+.configItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  & > label {
+    flex-shrink: 0;
+    width: 60px;
+    color: #FFFFFF;
+    font-size: 12px;
+    text-align: right;
+  }
+
+  .el-select .el-tag {
+    color: #fff;
+    background: transparent;
+  }
+
+  .el-input__icon {
+    color: #fff;
+  }
+
+  .el-switch__label {
+    color: #fff;
+  }
+
+  .el-select,.ai-select {
+    width: 100%;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    input {
+      background: #262C33;
+      font-size: 12px;
+      color: #fff;
+      border: 1px solid #030411;
+    }
+
+    .el-input__icon {
+      color: #fff;
+    }
+  }
+
+  :deep(.el-collapse) {
+    height: 18px;
+  }
+
+  .content {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    text-align: right;
+    margin-left: 30px;
+  }
+}
+</style>