注册前端页面绘制

src/views/components/login/topMenu.vue

@@ -8,15 +8,15 @@
     </div>
     <div class="menuSty">
       <el-dropdown
-        v-for="item in menuList"
-        :key="item"
+        v-for="(item, index) in menuList"
+        :key="index"
         style="margin-right: 40px"
       >
         <span class="el-dropdown-link">
           {{ item.menuName }}<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item v-for="it in item.childMenu" :key="it">{{
+          <el-dropdown-item v-for="(it, id) in item.childMenu" :key="id">{{
             it.cName
           }}</el-dropdown-item>
         </el-dropdown-menu>

src/views/components/register/accountInfo.vue

@@ -0,0 +1,321 @@
+<template>
+  <div class="contentForm">
+    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
+      <el-form-item label="注册类型" prop="registrationTypeList">
+        <el-checkbox-group v-model="form.registrationTypeList">
+          <el-checkbox label="1">机构</el-checkbox>
+          <el-checkbox label="2">供应商</el-checkbox>
+          <el-checkbox label="3">服务商</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="应用地址" prop="applyAddress">
+        <el-cascader
+          placeholder="请输入应用地址"
+          v-model="form.applyAddress"
+          :options="options"
+          :props="{ expandTrigger: 'hover' }"
+          clearable
+          style="width: 100%"
+        ></el-cascader>
+      </el-form-item>
+      <el-form-item label="机构全称" prop="fullName">
+        <el-input
+          v-model="form.fullName"
+          placeholder="请输入机构全称"
+          maxlength="50"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="机构简称" prop="shortName">
+        <el-input
+          v-model="form.shortName"
+          placeholder="请输入机构简称"
+          maxlength="50"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="统一社会识别码" prop="USIC">
+        <el-input
+          v-model="form.USIC"
+          placeholder="请输入统一社会识别码"
+          maxlength="50"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="机构编号" prop="institutionNum">
+        <el-input
+          v-model="form.institutionNum"
+          placeholder="机构编号将根据您填写的信息自动生成"
+          maxlength="50"
+          disabled
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="绑定域名" prop="bindDomainName">
+        <el-input
+          v-model="form.bindDomainName"
+          maxlength="100"
+          placeholder="请输入绑定域名"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="所属行业" prop="industry">
+        <el-select
+          v-model="form.industry"
+          placeholder="请选择所属行业"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in options1"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="联系人" prop="contacts">
+        <el-input
+          v-model="form.contacts"
+          maxlength="100"
+          placeholder="请输入联系人"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="联系方式" prop="contactInfo">
+        <el-input
+          v-model="form.contactInfo"
+          maxlength="11"
+          placeholder="请输入联系方式"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="邮箱" prop="mailbox">
+        <el-input
+          v-model="form.mailbox"
+          maxlength="100"
+          placeholder="请输入邮箱"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="手机验证码" prop="mobileVerificationCode">
+        <el-input
+          v-model="form.mobileVerificationCode"
+          maxlength="10"
+          placeholder="请输入手机验证码"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="账号密码" prop="password">
+        <el-input
+          placeholder="请输入账号密码"
+          v-model="form.password"
+          show-password
+          maxlength="20"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="confirmPassword">
+        <el-input
+          placeholder="请输入确认密码"
+          v-model="form.confirmPassword"
+          show-password
+          maxlength="20"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="服务商邀请码" prop="serviceProviderInvitationCode">
+        <el-input
+          placeholder="请输入服务商邀请码"
+          v-model="form.serviceProviderInvitationCode"
+          maxlength="10"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="服务商单位" prop="serviceProviderUnit">
+        <el-input
+          placeholder="请输入服务商单位"
+          v-model="form.serviceProviderUnit"
+          maxlength="100"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="服务商联系人" prop="serviceProviderContacts">
+        <el-input
+          placeholder="请输入服务商联系人"
+          v-model="form.serviceProviderContacts"
+          maxlength="100"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="联系人联系方式" prop="serviceProviderContactInfo">
+        <el-input
+          placeholder="请输入联系人联系方式"
+          v-model="form.serviceProviderContactInfo"
+          maxlength="11"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div class="nextSty">
+      <el-button style="margin-bottom: 30px" @click="previousStep()"
+        >上一步</el-button
+      >
+      <el-button
+        type="primary"
+        style="margin-bottom: 30px; margin-left: 100px"
+        @click="nextStep()"
+        >下一步</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "accountInfo",
+  props: {
+    form: {
+      type: Object,
+    },
+    next: {
+      type: Function,
+    },
+    previous: {
+      type: Function,
+    },
+    changeComponents: {
+      type: Function,
+    },
+  },
+  data() {
+    var validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else {
+        if (this.form.confirmPassword !== "") {
+          this.$refs.form.validateField("confirmPassword");
+        }
+        callback();
+      }
+    };
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.form.password) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      options1: [
+        {
+          value: "1",
+          label: "行业一",
+        },
+        {
+          value: "2",
+          label: "行业二",
+        },
+      ],
+      options: [
+        {
+          value: "jiangsu",
+          label: "江苏",
+          children: [
+            {
+              value: "nantong",
+              label: "南通",
+              children: [
+                {
+                  value: "haian",
+                  label: "海安",
+                },
+                {
+                  value: "rudong",
+                  label: "如东",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      rules: {
+        registrationTypeList: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个机构类型",
+            trigger: "change",
+          },
+        ],
+        applyAddress: [
+          { required: true, message: "请输入应用地址", trigger: "blur" },
+        ],
+        fullName: [
+          { required: true, message: "请输入机构全称", trigger: "blur" },
+        ],
+        shortName: [
+          { required: true, message: "请输入机构简称", trigger: "blur" },
+        ],
+        USIC: [
+          { required: true, message: "请输入统一社会识别码", trigger: "blur" },
+        ],
+        industry: [
+          {
+            required: true,
+            message: "请选择所属行业",
+            trigger: "change",
+          },
+        ],
+        contacts: [
+          { required: true, message: "请输入机构联系人", trigger: "blur" },
+        ],
+        contactInfo: [
+          {
+            required: true,
+            message: "请输入机构联系人联系方式",
+            trigger: "blur",
+          },
+        ],
+        mailbox: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { validator: validatePass, trigger: "blur" },
+        ],
+        confirmPassword: [
+          { required: true, message: "请输入确认密码", trigger: "blur" },
+          { validator: validatePass2, trigger: "blur" },
+        ],
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    //上一步
+    previousStep() {
+      this.changeComponents("registration-terms");
+      this.previous();
+    },
+    //下一步
+    nextStep() {
+      this.changeComponents("entry-information");
+      this.next();
+      /** 需要校验使用下方事务 */
+      // this.$refs["form"].validate((valid) => {
+      //   if (valid) {
+      //     this.next();
+      //     this.changeComponents("entry-information");
+      //   } else {
+      //     return false;
+      //   }
+      // });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.el-form-item {
+  margin-bottom: 22px !important;
+}
+.nextSty {
+  width: 100%;
+  display: flex;
+  font-weight: bold;
+  justify-content: center;
+  align-items: center;
+}
+.contentForm {
+  width: 60%;
+  padding: 20px 30px 20px 30px;
+}
+</style>

src/views/components/register/entryInformation.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="contentForm">
+    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
+      <el-form-item label="供应类型" prop="supplyTypeList">
+        <el-checkbox-group v-model="form.supplyTypeList">
+          <el-checkbox label="1">食品供应商</el-checkbox>
+          <el-checkbox label="2">商品供应商</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="法人姓名" prop="legalRepresentativeName">
+        <el-input
+          v-model="form.legalRepresentativeName"
+          maxlength="100"
+          placeholder="请输入法人姓名"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="证件类型" prop="identificationType">
+        <el-select
+          v-model="form.identificationType"
+          placeholder="请选择证件类型"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="证件号码" prop="identificationNum">
+        <el-input
+          v-model="form.identificationNum"
+          maxlength="100"
+          placeholder="证件号码"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="营业执照" prop="businessLicense">
+        <el-input
+          v-model="form.businessLicense"
+          maxlength="100"
+          placeholder="营业执照"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="营业执照有效期" prop="validityDeadline">
+        <el-date-picker
+          v-model="form.validityDeadline"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 100%"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="法人证件附件" prop="legalRepresentativeFile">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="" />
+        </el-dialog>
+      </el-form-item>
+      <el-form-item label="营业执照附件" prop="businessLicenseFile">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="" />
+        </el-dialog>
+      </el-form-item>
+      <el-form-item label="生产许可证附件" prop="productionLicenseFile">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="" />
+        </el-dialog>
+      </el-form-item>
+      <el-form-item label="流通许可证附件" prop="circulationLicense">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="" />
+        </el-dialog>
+      </el-form-item>
+      <el-form-item label="其他资质附件" prop="otherQualifications">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="" />
+        </el-dialog>
+      </el-form-item>
+    </el-form>
+    <div class="nextSty">
+      <el-button style="margin-bottom: 30px" @click="previousStep()"
+        >上一步</el-button
+      >
+      <el-button
+        type="primary"
+        style="margin-bottom: 30px; margin-left: 100px"
+        @click="nextStep()"
+        >下一步</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "entryInformation",
+  props: {
+    form: {
+      type: Object,
+    },
+    next: {
+      type: Function,
+    },
+    previous: {
+      type: Function,
+    },
+    changeComponents: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      options: [
+        {
+          value: "1",
+          label: "证件类型一",
+        },
+        {
+          value: "2",
+          label: "证件类型二",
+        },
+      ],
+      rules: {
+        supplyTypeList: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个供应类型",
+            trigger: "change",
+          },
+        ],
+        legalRepresentativeName: [
+          { required: true, message: "请输入法人姓名", trigger: "blur" },
+        ],
+        identificationType: [
+          { required: true, message: "请选择证件类型", trigger: "change" },
+        ],
+
+        identificationNum: [
+          { required: true, message: "请输入证件号码", trigger: "blur" },
+        ],
+        businessLicense: [
+          { required: true, message: "请输入营业执照", trigger: "blur" },
+        ],
+        validityDeadline: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择营业执照有效期",
+            trigger: "blur",
+          },
+        ],
+        //待实现文件上传验证================================================
+        legalRepresentativeFile: [
+          {
+            required: true,
+            message: "请上法人证件附件",
+            trigger: "change",
+          },
+        ],
+        //待实现文件上传验证================================================
+        legalRepresentativeFile: [
+          {
+            required: true,
+            message: "请上法人证件附件",
+            trigger: "change",
+          },
+        ],
+        //待实现文件上传验证================================================
+        businessLicenseFile: [
+          {
+            required: true,
+            message: "请上营业执照附件",
+            trigger: "change",
+          },
+        ],
+      },
+      dialogImageUrl: "",
+      dialogVisible: false,
+    };
+  },
+  mounted() {},
+  methods: {
+    //上一步
+    previousStep() {
+      this.changeComponents("account-info");
+      this.previous();
+    },
+    //下一步
+    nextStep() {
+      this.changeComponents("registration-package");
+      this.next();
+      /** 需要校验使用下方事务 */
+      // this.$refs["form"].validate((valid) => {
+      //   if (valid) {
+      //     this.next();
+      //     this.changeComponents("registration-package");
+      //   } else {
+      //     return false;
+      //   }
+      // });
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.nextSty {
+  width: 100%;
+  display: flex;
+  font-weight: bold;
+  justify-content: center;
+  align-items: center;
+}
+.el-form-item {
+  margin-bottom: 22px !important;
+}
+.contentForm {
+  width: 60%;
+  padding: 20px 30px 20px 30px;
+}
+</style>

src/views/components/register/package.vue

@@ -0,0 +1,339 @@
+<template>
+  <div
+    class="packageSty"
+    :style="borderSty"
+    @mouseover="mouseOver()"
+    @mouseleave="mouseLeave()"
+    @click="mouseClick()"
+  >
+    <div class="topSty">
+      <div class="packageName" :style="`color:` + color">试用版</div>
+      <div class="discription">体验全新XXX服务</div>
+      <div class="price">
+        <span class="yuan">￥</span><span class="num">10000.00</span
+        ><span class="nian">/年 起</span>
+      </div>
+      <div class="memberCount">仅限5人</div>
+
+      <div class="ktBtn">
+        <el-button class="btnSty">开通</el-button>
+      </div>
+    </div>
+    <div class="middleSty">
+      <div class="mid">
+        <el-tag size="mini" style="width: 100%">网页端应用</el-tag>
+      </div>
+      <div class="mid">
+        <el-tree
+          :data="data1"
+          :props="defaultProps"
+          :default-expand-all="true"
+        ></el-tree>
+      </div>
+      <div class="mid">
+        <el-tag size="mini" type="success" style="width: 100%"
+          >小程序端应用</el-tag
+        >
+      </div>
+      <div class="mid">
+        <el-tree
+          :data="data2"
+          :props="defaultProps"
+          :default-expand-all="true"
+        ></el-tree>
+      </div>
+    </div>
+    <div class="bottomSty">
+      <div style="display: block">
+        <div class="fuwuSty">使用培训：√</div>
+        <div class="fuwuSty">疑问解答：√</div>
+        <div class="fuwuSty">业务咨询：×</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "package-module",
+  props: {
+    color: {
+      type: String,
+      default: "#000000",
+    },
+    packName: {
+      type: String,
+      default: "nullName",
+    },
+    changeSty: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      borderSty: "border-top:3px " + this.color + " solid",
+      styFlag: false,
+      data1: [
+        {
+          label: "一级 1",
+          children: [
+            {
+              label: "二级 1-1",
+              children: [
+                {
+                  label: "三级 1-1-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      data2: [
+        {
+          label: "一级 1",
+          children: [
+            {
+              label: "二级 1-1",
+              children: [
+                {
+                  label: "三级 1-1-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    changeStyFlag(flag) {
+      this.styFlag = flag;
+      if (!flag) this.mouseLeave();
+    },
+    mouseClick() {
+      this.changeSty(this.packName);
+    },
+    mouseOver() {
+      this.borderSty = "border:3px " + this.color + " solid";
+    },
+    mouseLeave() {
+      if (!this.styFlag)
+        this.borderSty = "border-top:3px " + this.color + " solid";
+    },
+  },
+};
+</script>
+
+<style scoped>
+.fuwuSty {
+  width: 100%;
+  text-align: center;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #6f6f6f;
+  line-height: 16px;
+  letter-spacing: 1px;
+  font-style: normal;
+  text-transform: none;
+  margin-top: 10px;
+}
+.mid {
+  width: 90%;
+  margin: 0 auto 10px auto;
+}
+.btnSty {
+  background-color: #1890ff;
+  width: 134px;
+  height: 34px;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 16px;
+  letter-spacing: 1px;
+  font-style: normal;
+  text-transform: none;
+}
+.ktBtn {
+  width: 100%;
+  text-align: center;
+  padding-top: 10px;
+}
+.memberCount {
+  width: 100%;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #333333;
+  line-height: 16px;
+  letter-spacing: 1px;
+  text-align: center;
+  font-style: normal;
+  text-transform: none;
+}
+.yuan {
+  font-size: 14px;
+  color: #333333;
+}
+.num {
+  font-size: 32px;
+  color: #333333;
+}
+.nian {
+  font-size: 14px;
+  color: #333333;
+}
+.price {
+  width: 100%;
+  text-align: center;
+  padding-top: 5px;
+}
+.discription {
+  width: 100%;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #333333;
+  line-height: 16px;
+  letter-spacing: 1px;
+  text-align: center;
+  font-style: normal;
+  text-transform: none;
+  margin-top: 10px;
+}
+.packageName {
+  width: 100%;
+  text-align: center;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 23px;
+  letter-spacing: 1px;
+  font-style: normal;
+  text-transform: none;
+}
+.topSty {
+  width: 95%;
+  height: 200px;
+  margin: 5px auto 0 auto;
+  border-bottom: 1px solid #ebebeb;
+}
+.middleSty {
+  width: 95%;
+  height: 450px;
+  margin: 5px auto;
+  overflow-y: scroll;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #ebebeb;
+}
+/**隐藏滚动条 */
+::-webkit-scrollbar {
+  display: none;
+}
+.bottomSty {
+  width: 95%;
+  height: 100px;
+  margin: 1px auto 5px auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.packageSty {
+  width: 16%;
+  float: left;
+  margin-left: 2%;
+  margin-right: 2%;
+  border-radius: 10px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>

src/views/components/register/registrationPackage.vue

@@ -0,0 +1,363 @@
+<template>
+  <div class="contentForm">
+    <div class="choosePackContent">
+      <package-module
+        v-for="(item, index) in colorList"
+        :key="index"
+        :color="item"
+        :packName="packageList[index].packageName"
+        :changeSty="changeSty"
+        ref="packageRef"
+      ></package-module>
+    </div>
+    <div class="fapiaoSty">
+      <div class="topTitle"></div>
+      <div class="titleSty">订单信息</div>
+      <el-form
+        ref="form"
+        :model="form"
+        label-width="140px"
+        style="margin-top: 20px"
+        :rules="rules"
+      >
+        <el-col :span="8">
+          <el-form-item label="购买时长" prop="purchaseDuration">
+            <el-input-number
+              v-model="form.purchaseDuration"
+              :step="1"
+              :precision="0"
+              style="width: 90%"
+            ></el-input-number>
+            &nbsp;&nbsp;年
+          </el-form-item></el-col
+        >
+        <el-col :span="8"
+          ><el-form-item label="账号数量" prop="accountNum">
+            <el-input-number
+              v-model="form.accountNum"
+              :step="5"
+              :precision="0"
+              style="width: 90%"
+            ></el-input-number>
+            &nbsp;&nbsp;人
+          </el-form-item></el-col
+        >
+        <el-col :span="8"
+          ><el-form-item label="总价" prop="totalPrice">
+            <el-input-number
+              v-model="form.totalPrice"
+              :precision="2"
+              disabled
+              style="width: 90%"
+            ></el-input-number>
+            &nbsp;&nbsp;元
+          </el-form-item></el-col
+        >
+        <el-col :span="8"
+          ><el-form-item label="发票类型" prop="invoiceType">
+            <el-select
+              v-model="form.invoiceType"
+              placeholder="请选择发票类型"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in options1"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select> </el-form-item
+        ></el-col>
+        <el-col :span="8"
+          ><el-form-item label="发票抬头" prop="invoiceType">
+            <el-select
+              v-model="form.invoiceHeader"
+              placeholder="请选择发票抬头"
+              style="width: 100%"
+              disabled
+            >
+              <el-option
+                v-for="item in options2"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select> </el-form-item
+        ></el-col>
+        <el-col :span="8">
+          <el-form-item label="统一社会识别码" prop="USICForInvoice">
+            <el-input
+              v-model="form.USICForInvoice"
+              placeholder="请输入统一社会识别码"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="单位名称" prop="unitName">
+            <el-input
+              v-model="form.unitName"
+              clearable
+              placeholder="请输入单位名称"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="单位电话" prop="unitTel">
+            <el-input
+              v-model="form.unitTel"
+              placeholder="请输入单位电话"
+              maxlength="11"
+              show-word-limit
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="单位地址" prop="unitAddress">
+            <el-input
+              v-model="form.unitAddress"
+              placeholder="请输入单位地址"
+              maxlength="100"
+              show-word-limit
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8"
+          ><el-form-item label="开户银行" prop="openingBank">
+            <el-select
+              v-model="form.openingBank"
+              placeholder="请选择开户银行"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in options3"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                disabled
+              >
+              </el-option>
+            </el-select> </el-form-item
+        ></el-col>
+
+        <el-col :span="16">
+          <el-form-item label="银行账户" prop="bankAccount" style="width: 50%">
+            <el-input
+              v-model="form.unitAddress"
+              placeholder="请输入银行账户"
+              maxlength="20"
+              show-word-limit
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="8">
+          <el-form-item label="收票人电话" prop="ticketRecipientTel">
+            <el-input
+              v-model="form.ticketRecipientTel"
+              placeholder="请输入收票人电话"
+              maxlength="11"
+              show-word-limit
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="收票人邮箱" prop="ticketRecipientMail">
+            <el-input
+              v-model="form.ticketRecipientMail"
+              placeholder="请输入收票人邮箱"
+              maxlength="70"
+              show-word-limit
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-form>
+      <el-col :span="24" style="margin-left: 60px; color: #adadad">
+        注：发票内容将根据税法调整，具体以展示为准，本订单的售后服务请联系平台方处理。
+      </el-col>
+    </div>
+    <div class="nextSty">
+      <el-button style="margin-bottom: 30px" @click="previousStep()"
+        >上一步
+      </el-button>
+      <el-button
+        type="primary"
+        style="margin-bottom: 30px; margin-left: 100px"
+        @click="submitAll()"
+        >提交审核
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import packageModule from "./package.vue";
+export default {
+  name: "registrationPackage",
+  components: {
+    packageModule,
+  },
+  props: {
+    form: {
+      type: Object,
+    },
+    next: {
+      type: Function,
+    },
+    previous: {
+      type: Function,
+    },
+    changeComponents: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      colorList: ["#FFD43C", "#0FA9DE", "#BD7AFF", "#FF9A0D", "#09D640"],
+      packageList: [
+        { packageName: "pack1" },
+        { packageName: "pack2" },
+        { packageName: "pack3" },
+        { packageName: "pack4" },
+        { packageName: "pack5" },
+      ],
+      options1: [
+        {
+          value: "1",
+          label: "普票",
+        },
+        {
+          value: "2",
+          label: "专票",
+        },
+      ],
+      options2: [
+        {
+          value: "1",
+          label: "单位",
+        },
+        {
+          value: "2",
+          label: "个人",
+        },
+      ],
+      options3: [
+        {
+          value: "1",
+          label: "中国建设银行",
+        },
+        {
+          value: "2",
+          label: "中国工商银行",
+        },
+      ],
+      rules: {
+        purchaseDuration: [
+          { required: true, message: "请输入购买时长", trigger: "blur" },
+        ],
+        accountNum: [
+          { required: true, message: "请输入账号数量", trigger: "blur" },
+        ],
+        invoiceType: [
+          { required: true, message: "请选择发票类型", trigger: "change" },
+        ],
+        USICForInvoice: [
+          { required: true, message: "请输入统一社会识别码", trigger: "blur" },
+        ],
+        unitName: [
+          { required: true, message: "请输入单位名称", trigger: "blur" },
+        ],
+        unitTel: [
+          { required: true, message: "请输入单位电话", trigger: "blur" },
+        ],
+        unitAddress: [
+          { required: true, message: "请输入单位电话", trigger: "blur" },
+        ],
+        openingBank: [
+          { required: true, message: "请选择开户银行", trigger: "change" },
+        ],
+        bankAccount: [
+          { required: true, message: "请输入银行账号", trigger: "blur" },
+        ],
+        ticketRecipientTel: [
+          { required: true, message: "请输入收票人电话", trigger: "blur" },
+        ],
+        ticketRecipientMail: [
+          { required: true, message: "请输入收票人邮箱", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    changeSty(packageName) {
+      var comps = this.$refs.packageRef;
+      for (let i = 0; i < comps.length; i++) {
+        if (comps[i].packName === packageName) {
+          comps[i].changeStyFlag(true);
+        } else {
+          comps[i].changeStyFlag(false);
+        }
+      }
+    },
+    //上一步
+    previousStep() {
+      this.changeComponents("entry-information");
+      this.previous();
+    },
+    submitAll() {},
+  },
+};
+</script>
+
+<style scoped>
+.titleSty {
+  font-size: 22px;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  line-height: 22px;
+  margin-left: 60px;
+}
+.topTitle {
+  width: 6px;
+  height: 27px;
+  background-color: #1890ff;
+  border-radius: 10px;
+  float: left;
+  margin-left: 30px;
+}
+.fapiaoSty {
+  width: 100%;
+  height: 480px;
+  padding: 20px 30px 20px 30px;
+  margin: 15px auto 0 auto;
+  border-top: 1px #f2f2f2 solid;
+}
+.choosePackContent {
+  width: 100%;
+  height: 780px;
+}
+.el-form-item {
+  margin-bottom: 22px !important;
+}
+
+.nextSty {
+  width: 100%;
+  display: flex;
+  font-weight: bold;
+  justify-content: center;
+  align-items: center;
+}
+
+.contentForm {
+  width: 100%;
+  padding: 20px 30px 20px 30px;
+}
+</style>

src/views/components/register/registrationTerms.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="contentForm">
+    <div class="registrationTermsTitleSty">
+      <p class="registrationTermsTitle">会助理平台注册条款</p>
+    </div>
+    <p v-text="registrationTerms"></p>
+    <div class="agreedTermsSty">
+      <el-button
+        type="primary"
+        style="margin-top: 10px; margin-bottom: 30px"
+        @click="checkAgree()"
+        >我已仔细阅读并同意《会助理平台注册条款》</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "registrationTerms",
+  props: {
+    form: {
+      type: Object,
+    },
+    next: {
+      type: Function,
+    },
+    previous: {
+      type: Function,
+    },
+    changeComponents: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      registrationTerms:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet." +
+        "Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar" +
+        "sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. " +
+        "Naermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien" +
+        "nunc accuan eget.Lorem ipsum dolor sit amet, consectetadipiscing elit. Aenean euismod bibendum laoreet. " +
+        "Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. " +
+        "Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla " +
+        "luctus pharetra vulputate, felistellusmollis orci, sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum" +
+        " dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet " +
+        "lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et " +
+        "magnis dparturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, " +
+        "felis tellus mollis orci, sed rhoncus pronin sapien nunc eget.Lorem ipsum dolor sit amet, consectetur " +
+        "adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra " +
+        "justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, " +
+        "nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, " +
+        "sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet, consecteadipiscing elit. " +
+        "Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. " +
+        "Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. " +
+        "Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget." +
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. " +
+        "Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. " +
+        "Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus " +
+        "pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet," +
+        "consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et " +
+        "viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, " +
+        "nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, " +
+        "sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
+        "Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. " +
+        "Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, " +
+        "nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, " +
+        "sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
+        "Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. " +
+        "Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. " +
+        "Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc " +
+        "accuanLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida " +
+        "dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. " +
+        "Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Naermentum, " +
+        "nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget." +
+        "Lorem ipsum dolor sit amet, consectetadipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor" +
+        "sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. " +
+        "Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, " +
+        "nulla luctus pharetra vulputate, felistellusmollis orci, sed rhoncus pronin sapien nunc accuan eget." +
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. " +
+        "Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. " +
+        "Sociis natoque penatibus et magnis dparturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus " +
+        "pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc eget.Lorem ipsum dolor sit amet," +
+        "consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et" +
+        " viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, " +
+        "nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, " +
+        "sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet, consecteadipiscing elit. " +
+        "Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo." +
+        " Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, " +
+        "nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, " +
+        "sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
+        "Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. " +
+        "Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient monteLorem ipsum dolor sit amet," +
+        " consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit " +
+        "amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis " +
+        "natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Naermentum, " +
+        "nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget." +
+        "Lorem ipsum dolor sit amet, consectetadipiscing elit. Aenean euismod bibendum laoreet. " +
+        "Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. " +
+        "Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum," +
+        "nulla luctus pharetra vulputate, felistellusmollis orci, sed rhoncus pronin sapien nunc accuan eget." +
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. " +
+        "Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor.",
+    };
+  },
+  mounted() {},
+  methods: {
+    checkAgree() {
+      this.form.isAgreeTerms = true;
+      this.changeComponents("account-info");
+      this.next();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.agreedTermsSty {
+  width: 100%;
+  display: flex;
+  font-weight: bold;
+  justify-content: center;
+  align-items: center;
+}
+.registrationTermsTitleSty {
+  width: 100%;
+  display: flex;
+  font-weight: bold;
+  justify-content: center;
+  align-items: center;
+}
+.registrationTermsTitle {
+  font-size: 20px;
+}
+.contentForm {
+  width: 60%;
+  padding: 20px 30px 20px 30px;
+}
+</style>

src/views/register.vue

@@ -1,7 +1,26 @@
 <template>
   <div>
     <top-menu :methodType="2"></top-menu>
-    <div style="overflow: auto; height: 92vh"></div>
+    <div style="height: 92vh">
+      <div class="stepsSty">
+        <el-steps ref="stepsRef" :active="activeStep" align-center>
+          <el-step title="注册条款"></el-step>
+          <el-step title="账号信息"></el-step>
+          <el-step title="入驻信息"></el-step>
+          <el-step title="注册套餐"></el-step>
+        </el-steps>
+      </div>
+      <div class="contentSty">
+        <!-- 动态组件 -->
+        <component
+          :is="currentComponent"
+          :form="form"
+          :next="next"
+          :previous="previous"
+          :changeComponents="changeComponents"
+        ></component>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -9,18 +28,162 @@
 import topMenu from "./components/login/topMenu.vue";
 export default {
   name: "register",
-  components: { topMenu },
+  components: {
+    topMenu,
+    registrationTerms: () =>
+      import("./components/register/registrationTerms.vue"),
+    accountInfo: () => import("./components/register/accountInfo.vue"),
+    entryInformation: () =>
+      import("./components/register/entryInformation.vue"),
+    registrationPackage: () =>
+      import("./components/register/registrationPackage.vue"),
+  },
   data() {
-    return {};
+    return {
+      activeStep: 0, // 当前激活的步骤
+      title3: "入驻信息",
+      isShow: false,
+      currentComponent: "registration-terms", // 初始组件
+      // currentComponent: "account-info", // 初始组件
+      // currentComponent: "entry-information", // 初始组件
+      // currentComponent: "registration-package", // 初始组件
+
+      form: {
+        isAgreeTerms: false, //是否同意注册条款
+        //===============================================
+        registrationTypeList: [], //注册类型
+        applyAddress: "", //应用地址
+        fullName: "", //机构全称
+        shortName: "", //机构简称
+        USIC: "", //统一社会识别码
+        institutionNum: "", //机构编码
+        bindDomainName: "", //绑定域名
+        industry: "", //所属行业
+        contacts: "", //联系人
+        contactInfo: "", //联系方式
+        mailbox: "", //邮箱
+        mobileVerificationCode: "", //手机验证码
+        password: "", //账号密码
+        confirmPassword: "", //确认密码
+        serviceProviderInvitationCode: "", //服务商邀请码
+        serviceProviderUnit: "", //服务商单位
+        serviceProviderContacts: "", //服务商联系人
+        serviceProviderContactInfo: "", //联系人联系方式
+        //===============================================
+        supplyTypeList: [], //供应类型
+        legalRepresentativeName: "", //法人姓名
+        identificationType: "", //证件类型
+        identificationNum: "", //证件号码
+        businessLicense: "", //营业执照
+        validityDeadline: "", //证件有效截止日期
+        legalRepresentativeFile: "", //法人证件附件
+        businessLicenseFile: "", //营业执照附件
+        productionLicenseFile: "", //生产许可证附件
+        circulationLicense: "", //流通许可证附件
+        otherQualifications: "", //其他资质附件
+        //===============================================
+        purchaseDuration: 1, //购买时长
+        accountNum: 5, //账号数量
+        totalPrice: 0.0, //总价
+        invoiceType: "1", //发票类型
+        invoiceHeader: "1", //发票抬头：默认单位不可修改
+        USICForInvoice: "", //统一社会识别码（发票）
+        unitName: "", //单位名称
+        unitTel: "", //单位电话
+        unitAddress: "", //单位地址
+        openingBank: "", //开户银行
+        bankAccount: "", //银行账户
+        ticketRecipientTel: "", //收票人电话
+        ticketRecipientMail: "", //收票人邮箱
+      },
+    };
   },
   beforeCreate() {},
   created() {},
+  mounted() {},
   methods: {
-    toLogin() {
-      this.$router.push("/login").catch(() => {});
+    next() {
+      this.activeStep++;
+    },
+    previous() {
+      this.activeStep--;
+    },
+    changeComponents(componentName) {
+      this.currentComponent = componentName;
     },
   },
 };
 </script>
 <style lang="scss" scoped>
+.contentSty {
+  height: 76vh;
+  width: 80%;
+  margin: 0 auto;
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+}
+/* 进行中状态：圈线 */
+::v-deep .el-step__head.is-process {
+  color: #1890ff;
+  border-color: #1890ff;
+}
+/* 进行中状态：圈内 */
+::v-deep .el-step__head.is-process > .el-step__icon {
+  background: #1890ff;
+  color: #fff;
+}
+/* 进行中状态：title（文字） */
+::v-deep .el-step__title.is-process {
+  color: #1890ff;
+  font-size: 14px;
+}
+
+/* 已完成状态：圈线 */
+::v-deep .el-step__head.is-finish {
+  color: #1890ff;
+  border-color: #1890ff;
+}
+/* 已完成状态：圈内 */
+::v-deep .el-step__head.is-finish > .el-step__icon {
+  background: #1890ff;
+  color: #fff;
+}
+/* 已完成状态：title（文字） */
+::v-deep .el-step__title.is-finish {
+  color: #1890ff;
+  font-size: 14px;
+}
+
+/* 等待中状态：圈线 */
+::v-deep .el-step__head.is-wait {
+  color: #e8f2ff;
+  border-color: #e8f2ff;
+}
+/* 等待中状态：圈内 */
+::v-deep .el-step__head.is-wait > .el-step__icon {
+  background: #e8f2ff;
+  color: #1890ff;
+}
+/* 等待中状态：title（文字） */
+::v-deep .el-step__title.is-wait {
+  color: #7cb4fe;
+  font-size: 14px;
+}
+
+.stepsSty {
+  height: 16vh;
+  width: 80%;
+  padding-top: 2%;
+  margin: 0 auto;
+}
+::v-deep .el-step__icon {
+  height: 54px;
+  width: 54px;
+  font-size: 40px;
+}
+::v-deep .el-step.is-center .el-step__line {
+  top: 50%;
+  border: 2px #e8f2ff solid;
+}
 </style>