css-custom-steps(步骤条样式).code-snippets

{
  "Print to console": {
    // "scope": "javascript,typescript",
    "prefix": ["steps", "customSteps"],
    "body": [
      "<template>",
      "  <div class=\"custom-steps-box\">",
      "    <div class=\"custom-steps\">",
      "      <div class=\"cs-step\" v-for=\"(item, index) in stepList\" :key=\"index\">",
      "        <div class=\"cs-icon\">{{ index + 1 }}</div>",
      "        <div class=\"cs-title\">{{ item.name }}</div>",
      "        <div v-if=\"index !== 0\" class=\"cs-line-left\"></div>",
      "        <div v-if=\"index !== 3\" class=\"cs-line-right\"></div>",
      "      </div>",
      "    </div>",
      "  </div>",
      "</template>",
      "<script>",
      "  data() {",
      "    return {",
      "      stepList: [",
      "        { name: \"提交申请\", index: 1 },",
      "        { name: \"客户确认\", index: 2 },",
      "        { name: \"系统处理退款\", index: 3 },",
      "        { name: \"完成退款\", index: 4 }",
      "      ]",
      "    };",
      "  }",
      "</script>",
      "<style>",
      "  .custom-steps-box {",
      "    display: flex;",
      "    justify-content: center;",
      "    align-items: center;",
      "    padding: 20px;",
      "    .custom-steps {",
      "      display: flex;",
      "      justify-content: space-between;",
      "      align-items: center;",
      "      width: 100%;",
      "      overflow-x: auto;",
      "      .cs-step {",
      "        display: flex;",
      "        justify-content: center;",
      "        align-items: center;",
      "        position: relative;",
      "        flex: 1;",
      "        flex-direction: column;",
      "        .cs-icon {",
      "          display: flex;",
      "          justify-content: center;",
      "          align-items: center;",
      "          margin-bottom: 10px;",
      "          width: 36px;",
      "          height: 36px;",
      "          background: #ebedf0;",
      "          border-radius: 18px;",
      "          font-size: 18px;",
      "          font-weight: 500;",
      "          color: #677585;",
      "          z-index: 999;",
      "        }",
      "        .cs-title {",
      "          font-size: 22px;",
      "          font-weight: 400;",
      "          color: #677585;",
      "        }",
      "        .cs-line-left {",
      "          position: absolute;",
      "          top: 18px;",
      "          left: 0;",
      "          height: 2px;",
      "          width: 50%;",
      "          background: #ebedf0;",
      "        }",
      "        .cs-line-right {",
      "          position: absolute;",
      "          top: 18px;",
      "          right: 0;",
      "          height: 2px;",
      "          width: 50%;",
      "          background: #ebedf0;",
      "        }",
      "      }",
      "    }",
      "  }",
      "</style>"
    ],
    "description": "自定义步骤条样式"
  }
}