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