|
@@ -2,7 +2,7 @@
|
|
|
import SectionHeading from '@/components/section-heading.vue'
|
|
|
import { scheduleCardBg } from '@/core/libs/pngs'
|
|
|
|
|
|
-defineProps({
|
|
|
+const props = defineProps({
|
|
|
customClass: {
|
|
|
type: String,
|
|
|
default: () => '',
|
|
@@ -18,6 +18,16 @@ defineProps({
|
|
|
}),
|
|
|
},
|
|
|
})
|
|
|
+const data = ref()
|
|
|
+const pull = () => {
|
|
|
+ data.value = props.options.items.slice(0, 3)
|
|
|
+}
|
|
|
+const push = () => {
|
|
|
+ data.value = props.options.items.slice(0, 2)
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ push()
|
|
|
+})
|
|
|
</script>
|
|
|
<template>
|
|
|
<view class="flex flex-col items-center" :class="[customClass]">
|
|
@@ -30,7 +40,7 @@ defineProps({
|
|
|
<div
|
|
|
class="w-80 bg-gradient-to-r from-[#141414] to-[#4b4949] rounded-tl-2xl rounded-tr-2xl p-6 box-border"
|
|
|
>
|
|
|
- <template v-for="(it, index) in options.items" :key="index">
|
|
|
+ <template v-for="(it, index) in data" :key="index">
|
|
|
<view class="relative mb-4">
|
|
|
<view class="flex items-center">
|
|
|
<div class="w-2 h-2 left-0 top-0 rounded-full border-2 border-solid border-white"></div>
|
|
@@ -48,7 +58,7 @@ defineProps({
|
|
|
学习灯光设计师课程
|
|
|
</div>
|
|
|
<div
|
|
|
- v-if="index !== options.items.length - 1"
|
|
|
+ v-if="index !== data.length - 1"
|
|
|
class="absolute left-1.25 top-6 bottom--4 border border-dashed border-gray bg-gray-500"
|
|
|
></div>
|
|
|
</view>
|
|
@@ -59,9 +69,10 @@ defineProps({
|
|
|
<view class="absolute bottom-0 left-0 right-0 px-3.5 py-7 flex flex-col items-center">
|
|
|
<wd-icon
|
|
|
custom-class="relative bottom-6"
|
|
|
- :name="options.items.length > 2 ? 'arrow-up' : 'arrow-down'"
|
|
|
+ :name="data.length > 2 ? 'arrow-up' : 'arrow-down'"
|
|
|
size="22px"
|
|
|
color="#4f4f4f"
|
|
|
+ @click="data.length > 2 ? push() : pull()"
|
|
|
></wd-icon>
|
|
|
<view class="w-full">
|
|
|
<wd-button block size="large">查看全部行程</wd-button>
|