feat: 增加组件

zhangnuoyan

2024-08-25 efd620b121f27ba59a265402f2cec0ea0a5a1309

feat: 增加组件

 src/views/components/the-a-date/index.vue

New file
@@ -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>

 src/views/components/the-travel-line/index.vue

New file
@@ -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>

 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>