fix: the page cannot be displayed completely when there is too much broadcast content

src/views/broadcast/deploy/index.vue

@@ -20,8 +20,7 @@
         finish-status="success"
         align-center
       >
-        <el-step title="选择模板" />
-        <el-step title="选择设备" />
+        <el-step title="信息配置" />
         <el-step title="信息确认" />
       </el-steps>
       <button
@@ -32,12 +31,19 @@
         {{ btnMsg }}
       </button>
     </div>
-    <div class="l-flex__auto l-flex--col">
-      <div class="l-flex u-align-self--center">
-        <div
-          v-show="active === 0"
-          class="c-sibling-item c-grid-form sm"
-        >
+    <div
+      v-show="active === 0"
+      class="l-flex__fill l-flex c-step"
+    >
+      <device-tree
+        ref="tree"
+        class="l-flex__none c-step__column u-width--lg"
+        checkbox
+        check-on-click-node
+        @change="onChange"
+      />
+      <div class="l-flex__fill c-step__column u-overflow-y--auto">
+        <div class="c-grid-form sm">
           <span class="c-grid-form__label u-required">模板</span>
           <schema-select
             v-model="templateId"
@@ -113,34 +119,25 @@
             </div>
           </template>
         </div>
-        <div
-          v-if="active === 0"
-          class="c-sibling-item far u-width--lg u-relative"
-        >
-          <div class="c-preview-broadcast u-relative is-ratio--16_9">
-            <marquee
-              class="c-preview-broadcast__text"
-              :class="{ bottom: position === 1 }"
-              :style="{ color: textColor, 'background-color': backgroundColor }"
-              behavior="scroll"
-            >
-              样式预览
-            </marquee>
-          </div>
+      </div>
+      <div class="l-flex__none c-step__column u-width--lg">
+        <div class="c-preview-broadcast u-relative is-ratio--16_9">
+          <marquee
+            class="c-preview-broadcast__text"
+            :class="{ bottom: position === 1 }"
+            :style="{ color: textColor, 'background-color': backgroundColor }"
+            behavior="scroll"
+          >
+            样式预览
+          </marquee>
         </div>
       </div>
-      <device-tree
-        v-show="active === 1"
-        ref="tree"
-        class="l-flex__fill"
-        checkbox
-        check-on-click-node
-        @change="onChange"
-      />
-      <div
-        v-if="active === 2"
-        class="c-grid-form u-align-self--center"
-      >
+    </div>
+    <div
+      v-if="active === 1"
+      class="l-flex__fill l-flex--col u-overflow-y--auto"
+    >
+      <div class="c-grid-form u-align-self--center">
         <span class="c-grid-form__label">位置：</span>
         <div class="l-flex--row c-grid-form__option c-grid-form__text">{{ positionDesc }}</div>
         <span class="c-grid-form__label">内容：</span>
@@ -220,15 +217,13 @@ export default {
     hideNext () {
       switch (this.active) {
         case 0:
-          return !this.templateContent || this.keywordMap.some(({ content }) => !content)
-        case 1:
-          return this.selectedDevices.length === 0
+          return !this.templateContent || this.keywordMap.some(({ content }) => !content) || this.selectedDevices.length === 0
         default:
           return false
       }
     },
     btnMsg () {
-      return this.active < 2 ? '下一步' : '发布'
+      return this.active < 1 ? '下一步' : '发布'
     },
     positionDesc () {
       return this.positionOptions[this.position].label
@@ -285,13 +280,10 @@ export default {
     onNext () {
       switch (this.active) {
         case 0:
-          this.active += 1
-          break
-        case 1:
           this.collectInfo()
           this.active += 1
           break
-        case 2:
+        case 1:
           this.publish().then(() => {
             this.active = 0
             this.position = 1