From 767f8f90950ec6e45aecb4e58caab99204e39ef5 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Thu, 26 Dec 2024 16:03:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E6=9C=AC=E4=B8=A4=E7=AB=AF?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=E3=80=82=20=E6=AD=A5=E9=AA=A4=E6=9D=A1?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/demo.ts   |  2 +-
 src/views/demo/stepStyle.vue | 84 ++++++++++++++++++++++++++++++++++++
 src/views/demo/textAlign.vue | 62 ++++++++++++++++++++++++++
 3 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 src/views/demo/stepStyle.vue
 create mode 100644 src/views/demo/textAlign.vue

diff --git a/src/router/modules/demo.ts b/src/router/modules/demo.ts
index 09e2769..22b9e6d 100644
--- a/src/router/modules/demo.ts
+++ b/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),
diff --git a/src/views/demo/stepStyle.vue b/src/views/demo/stepStyle.vue
new file mode 100644
index 0000000..2c08f6a
--- /dev/null
+++ b/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>
diff --git a/src/views/demo/textAlign.vue b/src/views/demo/textAlign.vue
new file mode 100644
index 0000000..577689d
--- /dev/null
+++ b/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>