update

src/components/base/Step.vue

@@ -22,11 +22,12 @@ export default {
     activeStep: {
       type: Number,
       default: 0
-    }
+    },
+    list: { type: Array }
   },
   data() {
     return {
-      stepList: [{ stepName: '确定用户群' }, { stepName: '制定方案' }, { stepName: '明确主题' }, { stepName: '预览' }]
+      stepList: this.list || [{ stepName: '确定用户群' }, { stepName: '制定方案' }, { stepName: '明确主题' }, { stepName: '预览' }]
     }
   }
 }

src/modules/market-tools/views/DouYin.vue

 <template>
   <div>
-    <el-steps :active="stepsIndex" align-center>
-      <el-step title="创建账户"></el-step>
-      <el-step title="发布视频"></el-step>
-      <el-step title="查看营销数据"></el-step>
-    </el-steps>
-    <div class="content-box">
+    <ToolCard class="main_content">
+      <Step :activeStep="stepsIndex" :list="stepList" class="pt50-pl60" v-if="this.$route.query.view != 1"/>
+      <div class="content-box" style="flex:1;">
         <div class="step-content1" v-show="stepsIndex === 0">
           <div class="video-box">
             <div class="dy-box" v-if="!registerIndex">
@@ -67,16 +64,23 @@
           >
         </div>
       </div>
+    </ToolCard>
   </div>
 </template>
 
 <script>
 import { submitReport, cacheReport, checkRecord, getReportDetail } from '../api'
 import UploadVideo from '@/components/upload/UploadVideo.vue'
+import ToolCard from '@/components/base/ToolCard.vue'
+import Step from '@/components/base/Step.vue'
 export default {
-  components: { UploadVideo },
+  components: { UploadVideo, ToolCard, Step },
   data() {
     return {
+      stepList: [
+        { stepName: '创建账户' }, { stepName: '发布视频' }, { stepName: '查看营销数据' }
+      ],
+      activeStep: 0,
       form: {
         title: '',
         dec: '',
@@ -263,6 +267,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.pt50-pl60 {
+  padding: 50px 0 0 60px;
+}
+.main_content{
+  display: flex;
+}
 .step-content1 {
   display: flex;
   justify-content: center;
@@ -340,6 +350,7 @@ export default {
 }
 .step-content2 {
   display: flex;
+  padding: 0 30px;
   .dy-box {
     min-width: 375px;
     width: 375px;