steps组件

src/components/app-build-step.vue

+<template>
+  <div class="app_build_step" v-show="isActive">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "appBuildStep",
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    step: {
+      type: Number,
+      required: true,
+    },
+    activeIcon: {
+      type: String,
+      default: () => "",
+    },
+  },
+  data: () => ({}),
+  computed: {
+    isActive() {
+      return this.$parent.activeStep === this.step;
+    },
+  },
+  mounted() {
+    console.log();
+  },
+};
+</script>

src/components/app-build-steps.vue

+<template>
+  <div class="app_build_steps">
+    <ul class="steps_header">
+      <template v-for="(item, index) in steps">
+        <li
+          class="step_line left"
+          :class="{
+            active: item.step <= activeStep,
+          }"
+          v-if="item.step > 0"
+          :key="'line_left_' + index"
+        ></li>
+        <li
+          class="step_item"
+          :class="{
+            active: item.step <= activeStep,
+            current: item.step === activeStep,
+          }"
+          :key="'step_' + index"
+        >
+          <div class="step_icon_active" v-if="item.step <= activeStep">
+            <div class="icon_container">
+              <img :src="item.activeIcon" />
+            </div>
+          </div>
+          <div class="step_icon" v-else></div>
+          <div class="step_info">
+            <p class="step_state">
+              <span v-show="item.step > activeStep">
+                待进行
+              </span>
+              <span v-show="item.step === activeStep">
+                进行中
+              </span>
+              <span v-show="item.step < activeStep">
+                已完成
+              </span>
+            </p>
+            <p class="step_name" v-text="item.title"></p>
+          </div>
+        </li>
+        <li
+          class="step_line right"
+          :class="{
+            active: item.step <= activeStep,
+          }"
+          v-if="item.step < steps.length - 1"
+          :key="'line_right_' + index"
+        ></li>
+      </template>
+    </ul>
+
+    <div class="steps_container">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "appBuildSteps",
+  props: {
+    activeStep: {
+      type: Number,
+      default: () => "",
+    },
+  },
+  data: () => ({
+    steps: [],
+  }),
+  computed: {},
+  methods: {
+    getSteps() {
+      this.steps = this.$slots.default
+        .filter(
+          (vnode) =>
+            vnode.tag &&
+            vnode.componentOptions &&
+            vnode.componentOptions.Ctor.options.name === "appBuildStep"
+        )
+        .map((vnode) => vnode.componentInstance);
+    },
+  },
+  mounted() {
+    this.getSteps();
+  },
+};
+</script>
+
+<style scoped>
+.steps_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+.steps_header > .step_line {
+  flex-grow: 1;
+  height: 4px;
+  background-color: #e3e5ef;
+}
+.steps_header > .step_line.right {
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
+}
+.steps_header > .step_line.active {
+  background-color: #515fe7;
+}
+.steps_header > .step_item {
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  color: #bcc1d0;
+}
+.steps_header > .step_item > .step_icon {
+  width: 30px;
+  height: 30px;
+  background-color: #bcc1d0;
+  border: 7px solid #e3e5ef;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+.steps_header > .step_item > .step_icon_active {
+  padding: 10px;
+  background-color: #515fe7;
+  border-radius: 50%;
+}
+.steps_header > .step_item > .step_icon_active > .icon_container {
+  width: 60px;
+  height: 60px;
+  border: 3px solid #8390ee;
+  box-sizing: border-box;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.steps_header > .step_item > .step_info {
+  margin: 0 15px;
+}
+.steps_header > .step_item .step_state {
+  font-size: 18px;
+  line-height: 34px;
+}
+.steps_header > .step_item .step_name {
+  font-size: 14px;
+  line-height: 24px;
+}
+.steps_header > .step_item.active .step_state {
+  color: #242c43;
+}
+.steps_header > .step_item.active .step_name {
+  color: #8890a7;
+}
+
+.steps_container {
+  border-top: 2px solid #f4f7fc;
+  margin-top: 20px;
+}
+</style>

src/pages/app_build.vue

+<template>
+  <div class="app_build-container">
+    <div class="sevice_breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item>在线组件工具</el-breadcrumb-item>
+        <el-breadcrumb-item>应用构建（镜像形式）</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <app-build-steps :active-step="step">
+      <app-build-step
+        title="上传应用镜像"
+        :step="0"
+        :active-icon="require('@/assets/imgs/progress_ic_jingxiang.png')"
+      >
+        <h3 style="margin: 30px 0;">上传应用镜像</h3>
+        <div class="step_action">
+          <el-button type="primary" @click="nextStep">
+            下一步
+          </el-button>
+        </div>
+      </app-build-step>
+      <app-build-step
+        title="上传部署文件"
+        :step="1"
+        :active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
+      >
+        <h3 style="margin: 30px 0;">上传部署文件</h3>
+        <div class="step_action">
+          <el-button type="primary" @click="preStep">
+            上一步
+          </el-button>
+          <el-button type="primary" @click="nextStep">
+            下一步
+          </el-button>
+        </div>
+      </app-build-step>
+      <app-build-step
+        title="应用基础信息填写"
+        :step="2"
+        :active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
+      >
+        <h3 style="margin: 30px 0;">用基础信息填写</h3>
+        <div class="step_action">
+          <el-button type="primary" @click="preStep">
+            上一步
+          </el-button>
+          <el-button type="primary" @click="sunbmitAction">
+            提交
+          </el-button>
+        </div>
+      </app-build-step>
+    </app-build-steps>
+  </div>
+</template>
+
+<script>
+import appBuildSteps from "@/components/app-build-steps";
+import appBuildStep from "@/components/app-build-step";
+
+export default {
+  components: {
+    appBuildSteps,
+    appBuildStep,
+  },
+  data: () => ({
+    step: 0,
+  }),
+  methods: {
+    preStep() {
+      this.step--;
+    },
+    nextStep() {
+      this.step++;
+    },
+    sunbmitAction() {
+      console.log("submit action");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.app_build-container {
+  max-width: 1200px;
+  margin: -157px auto 20px;
+}
+.app_build-container > .app_build_steps {
+  border-radius: 12px;
+  background-color: #fff;
+  padding: 30px;
+}
+.step_action {
+  text-align: right;
+}
+.step_action > .el-button {
+  width: 124px;
+  margin-right: 30px;
+}
+</style>
+
+<style>
+.app_build-container .sevice_breadcrumb {
+  padding: 0 20px;
+}
+.app_build-container .sevice_breadcrumb > .el-breadcrumb .el-breadcrumb__inner {
+  color: #626de9;
+}
+.app_build-container
+  .sevice_breadcrumb
+  > .el-breadcrumb
+  .el-breadcrumb__item:last-child
+  .el-breadcrumb__inner {
+  color: #b4c0f5;
+}
+</style>

src/pages/index.vue

 <template>
   <div class="index_container">
-    <div class="decor" v-if="$route.fullPath == '/workplace' || $route.fullPath == '/services_shop' || $route.fullPath == '/fwzc/fwcs'"></div>
+    <div class="decor" v-if="$route.fullPath == '/workplace' || $route.fullPath == '/services_shop' || $route.fullPath == '/fwzc/fwcs' || $route.fullPath == '/app_build'"></div>
     <router-view/>
   </div>
 </template>

src/router/index.js

@@ -181,6 +181,11 @@ export default new Router({
           name: "services_shop",
           component: () => import("@/pages/services_shop"),
         }, // 主页 - 服务超市
+        {
+          path: "/app_build",
+          name: "app_build",
+          component: () => import("@/pages/app_build"),
+        }, // 应用构建（镜像形式）
         {
           path: "/user", // 个人中心
           name: "user",