feat: 文本两端对齐。 步骤条样式

src/router/modules/demo.ts

@@ -45,7 +45,7 @@ const components = { ...firstLevelComponents, ...secondLevelComponents };
 const demoRoutes = Object.keys(components).map((path) => {
     const isHasIndex = path.includes('/index.vue');
     let cptPath = path.replace(route.FILE_NAME_PREFIX, '');
-    cptPath = isHasIndex ? cptPath.replace('/index.vue', '') : path.replace('.vue', '');
+    cptPath = isHasIndex ? cptPath.replace('/index.vue', '') : cptPath.replace('.vue', '');
     return {
         path: cptPath,
         name: route.convertPathToName(cptPath),

src/views/demo/stepStyle.vue

@@ -0,0 +1,84 @@
+<template>
+    <el-card header="步骤条结构样式">
+        <div class="step-wrap">
+            <div
+                v-for="item in list"
+                :key="item.title"
+                class="step-item"
+            >
+                <samp :style="{ backgroundColor: item.color }"></samp>
+                <span>{{ item.title }}</span>
+            </div>
+        </div>
+    </el-card>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+
+const list = ref([
+    {
+        color: 'green',
+        title: '步骤1',
+    },
+    {
+        color: 'blue',
+        title: '步骤2',
+    },
+    {
+        color: 'purple',
+        title: '步骤3',
+    },
+    {
+        color: 'orange',
+        title: '步骤4',
+    },
+]);
+</script>
+
+<style lang="scss" scoped>
+.step-wrap {
+    display: block;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 14px;
+    color: #999;
+
+    .step-item {
+        display: flex;
+        align-items: center;
+        padding-left: 20px;
+        height: 50px;
+
+        &:last-child > samp::before {
+            height: 0px;
+        }
+
+        samp {
+            display: block;
+            width: 11px;
+            height: 11px;
+            border-radius: 50%;
+            background-color: #ccc;
+            margin-right: 10px;
+            z-index: 9;
+
+            &::before {
+                display: block;
+                position: relative;
+                left: 5px;
+                top: 11px;
+                content: '';
+                width: 1px;
+                height: 50px;
+                background-color: #ccc;
+            }
+        }
+
+        span {
+            display: block;
+            line-height: 50px;
+        }
+    }
+}
+</style>

src/views/demo/textAlign.vue

@@ -0,0 +1,62 @@
+<template>
+    <el-card header="css文本两端对齐方式">
+        <h3 class="mb-5">文字对齐方式一</h3>
+        <div
+            v-for="(item, index) in handleList"
+            :key="index"
+            class="w-[400px] flex justify-between"
+        >
+            <span
+                v-for="(cItem, cIndex) in item"
+                :key="cIndex"
+                >{{ cItem }}</span
+            >
+        </div>
+        <el-divider />
+        <h3 class="mb-5">文字对齐方式二</h3>
+        <div
+            v-for="(item, index) in list"
+            :key="index"
+            class="w-[400px] text-box"
+        >
+            {{ item }}
+        </div>
+        <el-divider />
+        <h3 class="mb-5">文字对齐方式三</h3>
+        <div
+            v-for="(item, index) in list"
+            :key="index"
+            class="w-[400px] text-box2"
+        >
+            {{ item }}
+        </div>
+    </el-card>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+const list = ref(['第一行', '第二行文本', '第三行该怎么对齐喃']);
+const handleList = ref([]);
+
+handleList.value = list.value.map((item) => {
+    return item.split('');
+});
+console.log(handleList.value);
+</script>
+
+<style lang="scss" scoped>
+.text-box {
+    /** 这个属性单行文本不生效的，所以需要用伪类添加一行 */
+    text-align: justify;
+    height: 26px;
+}
+.text-box::after {
+    content: '';
+    display: inline-block;
+    width: 100%;
+}
+
+.text-box2 {
+    text-align-last: justify;
+}
+</style>