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">
-      <div class="step-content1" v-show="stepsIndex === 0">
-        <div class="video-box">
-          <div class="dy-box" v-if="!registerIndex">
-            <img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
-            <div class="works-title">{{ form.title }}</div>
-            <div class="works-dec">{{ form.dec }}</div>
-            <video :src="form.url" width="375px" class="video"></video>
+    <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">
+              <img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
+              <div class="works-title">{{ form.title }}</div>
+              <div class="works-dec">{{ form.dec }}</div>
+              <video :src="form.url" width="375px" class="video"></video>
+            </div>
+            <div class="register-step" v-else>
+              <img :src="`https://webapp-pub.ezijing.com/x-training-new/register${registerIndex}.JPG`" />
+            </div>
+            <div class="register-btn" ref="registerBtn" @click="registerNext"></div>
           </div>
-          <div class="register-step" v-else>
-            <img :src="`https://webapp-pub.ezijing.com/x-training-new/register${registerIndex}.JPG`" />
-          </div>
-          <div class="register-btn" ref="registerBtn" @click="registerNext"></div>
-        </div>
-        <div class="text">{{ registerText }}</div>
-      </div>
-      <div class="step-content2" v-show="stepsIndex === 1">
-        <div class="form-box">
-          <el-form ref="form" :model="form" label-width="80px" :disabled="$route.query.type == 1 ? true : false">
-            <el-form-item label="标题">
-              <el-input v-model="form.title" placeholder="请输入内容"></el-input>
-            </el-form-item>
-            <el-form-item label="描述">
-              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.dec"> </el-input>
-            </el-form-item>
-            <el-form-item label="视频">
-              <upload-video v-model="form.url" @input="input"></upload-video>
-            </el-form-item>
-          </el-form>
-        </div>
-        <div class="dy-box">
-          <img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
-          <div class="works-title">{{ form.title }}</div>
-          <div class="works-dec">{{ form.dec }}</div>
-          <video :src="form.url" width="375px" class="video"></video>
+          <div class="text">{{ registerText }}</div>
         </div>
-      </div>
-      <div class="step-content1 step-content3" v-show="stepsIndex === 2">
-        <div class="video-box">
-          <div class="dy-box" v-if="dataIndex == 4">
+        <div class="step-content2" v-show="stepsIndex === 1">
+          <div class="form-box">
+            <el-form ref="form" :model="form" label-width="80px" :disabled="$route.query.type == 1 ? true : false">
+              <el-form-item label="标题">
+                <el-input v-model="form.title" placeholder="请输入内容"></el-input>
+              </el-form-item>
+              <el-form-item label="描述">
+                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.dec"> </el-input>
+              </el-form-item>
+              <el-form-item label="视频">
+                <upload-video v-model="form.url" @input="input"></upload-video>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="dy-box">
             <img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
             <div class="works-title">{{ form.title }}</div>
             <div class="works-dec">{{ form.dec }}</div>
             <video :src="form.url" width="375px" class="video"></video>
           </div>
-          <div class="register-step" v-else>
-            <img :src="`https://webapp-pub.ezijing.com/x-training-new/data${dataIndex + 1}.jpg`" />
+        </div>
+        <div class="step-content1 step-content3" v-show="stepsIndex === 2">
+          <div class="video-box">
+            <div class="dy-box" v-if="dataIndex == 4">
+              <img src="https://webapp-pub.ezijing.com/x-training-new/dy-bg.png" />
+              <div class="works-title">{{ form.title }}</div>
+              <div class="works-dec">{{ form.dec }}</div>
+              <video :src="form.url" width="375px" class="video"></video>
+            </div>
+            <div class="register-step" v-else>
+              <img :src="`https://webapp-pub.ezijing.com/x-training-new/data${dataIndex + 1}.jpg`" />
+            </div>
+            <div class="register-btn" ref="dataBtn" @click="dataNext"></div>
           </div>
-          <div class="register-btn" ref="dataBtn" @click="dataNext"></div>
+          <div class="text">{{ registerText }}</div>
+        </div>
+        <div class="mian-btn">
+          <el-button type="primary" @click="cacheReport(1)" v-if="$route.query.type != 1">保存</el-button>
+          <el-button type="primary" @click="prevBtn" v-if="stepsIndex != 0">上一步</el-button>
+          <el-button v-if="stepsIndex == 0" type="primary" @click="registerNextBtn">下一步</el-button>
+          <el-button v-if="stepsIndex == 1" type="primary" @click="formNextBtn">下一步</el-button>
+          <el-button type="primary" @click="submitReport" v-if="stepsIndex == 2 && $route.query.type != 1"
+            >完成</el-button
+          >
         </div>
-        <div class="text">{{ registerText }}</div>
-      </div>
-      <div class="mian-btn">
-        <el-button type="primary" @click="cacheReport(1)" v-if="$route.query.type != 1">保存</el-button>
-        <el-button type="primary" @click="prevBtn" v-if="stepsIndex != 0">上一步</el-button>
-        <el-button v-if="stepsIndex == 0" type="primary" @click="registerNextBtn">下一步</el-button>
-        <el-button v-if="stepsIndex == 1" type="primary" @click="formNextBtn">下一步</el-button>
-        <el-button type="primary" @click="submitReport" v-if="stepsIndex == 2 && $route.query.type != 1"
-          >完成</el-button
-        >
       </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;