From efd620b121f27ba59a265402f2cec0ea0a5a1309 Mon Sep 17 00:00:00 2001
From: zhangnuoyan <9354631+zhangnuoyan@user.noreply.gitee.com>
Date: 星期日, 25 八月 2024 18:33:53 +0800
Subject: [PATCH] feat: 增加组件

---
 src/views/oneThree/member/pages/travel.vue     |   68 +++++++++++++
 src/views/components/the-travel-line/index.vue |  182 ++++++++++++++++++++++++++++++++++++
 src/views/components/the-a-date/index.vue      |   29 +++++
 3 files changed, 279 insertions(+), 0 deletions(-)

diff --git a/src/views/components/the-a-date/index.vue b/src/views/components/the-a-date/index.vue
new file mode 100644
index 0000000..2d66c76
--- /dev/null
+++ b/src/views/components/the-a-date/index.vue
@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <icon-calendar style="color: #fff" />
+        <p>{{ data }}</p>
+    </div>
+</template>
+<script lang="ts" setup name="TheAdate">
+const props = withDefaults(
+    defineProps<{
+        data?: string;
+    }>(),
+    {
+        data: ""
+    }
+);
+</script>
+<style lang="scss" scoped>
+div {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 12px 6px 20px;
+    border-radius: 0px 90px 90px 0px;
+    background: #4275ca;
+    > p {
+        margin-left: 8px;
+        color: #fff;
+    }
+}
+</style>
diff --git a/src/views/components/the-travel-line/index.vue b/src/views/components/the-travel-line/index.vue
new file mode 100644
index 0000000..0331e12
--- /dev/null
+++ b/src/views/components/the-travel-line/index.vue
@@ -0,0 +1,182 @@
+<template>
+    <the-a-date :data="date" />
+    <div class="travel-lines">
+        <div v-for="(line, key) in newData" :key="key" class="travel-line">
+            <div v-for="(item, index) in line" :key="index" :class="`div-${item.type}`">
+                <div>{{ item.type }}</div>
+                <section>
+                    <span></span>
+                </section>
+                <p>
+                    <span>{{ item.title }}</span>
+                    <span>{{ item.content }}</span>
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup name="TheTravelLine">
+const props = withDefaults(
+    defineProps<{
+        date?: string;
+        data?: Array<any>;
+    }>(),
+    {
+        data: () => [],
+        date: ""
+    }
+);
+const newData = computed(() => {
+    let max = 6;
+    let result = [];
+    let newArray = [];
+    for (let i = 0; i < props.data.length; i += max) {
+        result.push(props.data.slice(i, i + max));
+    }
+    for (let i = 0; i < result.length; i++) {
+        if (i % 2 > 0) {
+            const reverseArray = result[i].reverse();
+            const number = max - reverseArray.length;
+            for (let index = 0; index < number; index++) {
+                reverseArray.unshift({
+                    type: "none"
+                });
+            }
+            newArray.push(reverseArray);
+        } else {
+            newArray.push(result[i]);
+        }
+    }
+    return newArray;
+});
+</script>
+<style lang="scss" scoped>
+.travel-lines {
+    margin: 0 100px;
+    .travel-line {
+        display: flex;
+        &:nth-child(even) {
+            > div {
+                &:last-child {
+                    position: relative;
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        bottom: 65px;
+                        right: 50px;
+                        width: 50px;
+                        height: 180px;
+                        display: block;
+                        border-radius: 0 40px 40px 0;
+                        box-sizing: border-box;
+                        border: 2px solid rgba(204, 214, 214, 0.4);
+                        border-left: none;
+                    }
+                }
+            }
+        }
+        &:nth-child(odd) {
+            > div {
+                &:first-child {
+                    position: relative;
+                    &:before {
+                        content: "";
+                        position: absolute;
+                        bottom: 65px;
+                        left: -60px;
+                        width: 50px;
+                        height: 180px;
+                        display: block;
+                        border-radius: 40px 0 0 40px;
+                        box-sizing: border-box;
+                        border: 2px solid rgba(204, 214, 214, 0.4);
+                        border-right: none;
+                    }
+                }
+            }
+        }
+        &:first-child {
+            > div {
+                &:first-child {
+                    position: relative;
+                    &:before {
+                        content: "";
+                        display: none;
+                    }
+                }
+            }
+        }
+        > div {
+            flex: 1;
+            margin-bottom: 50px;
+            padding: 50px 0;
+            display: flex;
+            align-items: center;
+            position: relative;
+            section {
+                flex: 1;
+                margin: 0 20px;
+                display: flex;
+                align-items: center;
+                > span {
+                    width: 100%;
+                    background: rgba(204, 214, 214, 0.4);
+                    display: block;
+                    height: 2px;
+                }
+            }
+            &:last-child {
+                section {
+                    display: none;
+                }
+            }
+            &.div-in {
+                > p {
+                    bottom: 0;
+                }
+                > div {
+                    background: #0e9cff;
+                }
+            }
+            &.div-none {
+                opacity: 0;
+            }
+            &.div-out {
+                > p {
+                    top: 0;
+                }
+                > div {
+                    background: #ff9d35;
+                }
+            }
+            > p {
+                position: absolute;
+                left: 0;
+                > span {
+                    display: block;
+                    &:first-child {
+                        font-size: 16px;
+                        font-weight: bold;
+                        line-height: 22px;
+                        margin-bottom: 5px;
+                    }
+                    &:last-child {
+                        font-size: 12px;
+                    }
+                }
+            }
+
+            > div {
+                width: 32px;
+                height: 32px;
+                border-radius: 4px;
+                line-height: 30px;
+                text-align: center;
+                font-size: 16px;
+                font-weight: bold;
+                color: #fff;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/oneThree/member/pages/travel.vue b/src/views/oneThree/member/pages/travel.vue
index 1e3a132..3eb2d20 100644
--- a/src/views/oneThree/member/pages/travel.vue
+++ b/src/views/oneThree/member/pages/travel.vue
@@ -33,6 +33,7 @@
             </div>
         </div>
     </div>
+    <the-travel-line date="2023-12-13" :data="data" />
     <div class="pagination">
         <a-pagination :total="50" show-total show-jumper show-page-size style="margin-top: 8px" />
     </div>
@@ -53,6 +54,73 @@
         value: "custom"
     }
 ]);
+const data = reactive([
+    {
+        type: "in",
+        title: "12:00",
+        content: "A灏忓尯2鍙锋ゼ1鍙锋4妤�"
+    },
+    {
+        type: "out",
+        title: "13:00",
+        content: "A灏忓尯2鍙锋ゼ1鍙锋4妤�"
+    },
+    {
+        type: "in",
+        title: "14:00",
+        content: "A灏忓尯2鍙锋ゼ1鍙锋4妤�"
+    },
+    {
+        type: "out",
+        title: "15:00",
+        content: "A灏忓尯2鍙锋ゼ1鍙锋4妤�"
+    },
+    {
+        type: "in",
+        title: "16:00",
+        content: "A灏忓尯2鍙锋ゼ1鍙锋4妤�"
+    },
+    {
+        type: "out",
+        title: "17:00",
+        content: "A灏忓尯2鍙锋ゼ1鍙锋4妤�"
+    },
+    {
+        type: "in",
+        title: "18:00",
+        content: "A灏忓尯2鍙锋ゼ1鍙锋4妤�"
+    },
+    {
+        type: "out",
+        title: "19:00",
+        content: "A灏忓尯2鍙锋ゼ1鍙锋4妤�"
+    },
+    {
+        type: "in",
+        title: "20:00",
+        content: "A灏忓尯2鍙锋ゼ1鍙锋4妤�"
+    },
+    {
+        type: "out",
+        title: "21:00",
+        content: "A灏忓尯2鍙锋ゼ1鍙锋4妤�"
+    },
+    {
+        type: "in",
+        title: "22:00",
+        content: "A灏忓尯2鍙锋ゼ1鍙锋4妤�"
+    },
+    {
+        type: "out",
+        title: "23:00",
+        content: "A灏忓尯2鍙锋ゼ1鍙锋4妤�"
+    },
+    {
+        type: "in",
+        title: "24:00",
+        content: "A灏忓尯2鍙锋ゼ1鍙锋4妤�"
+    }
+]);
 </script>
 
 <style lang="scss" scoped>

--
Gitblit v1.8.0