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