|
|
@@ -0,0 +1,144 @@
|
|
|
+<template>
|
|
|
+ <div class="swiper-container">
|
|
|
+ <swiper ref="mySwiper" class="swiper-wrapper timeline" :options="options">
|
|
|
+ <swiper-slide v-for="(item,index) in steps" :key="index" class="swiper-slide">
|
|
|
+ <div class="timestamp">
|
|
|
+ <span class="date">{{ item.dateLabel }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="status">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <!-- 分页器 -->
|
|
|
+ <div slot="pagination" class="swiper-pagination" />
|
|
|
+ <!-- 左右箭头 -->
|
|
|
+ </swiper>
|
|
|
+ <div class="swiper-button">
|
|
|
+ <div class="swiper-button-prev" />
|
|
|
+ <div class="swiper-button-next" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import 'swiper/dist/css/swiper.css'
|
|
|
+// import Swiper from 'swiper'
|
|
|
+import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
|
|
|
+// import 'swiper/css/swiper.css'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Swiper,
|
|
|
+ SwiperSlide
|
|
|
+ },
|
|
|
+ directives: {
|
|
|
+ swiper: directive
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ steps: {
|
|
|
+ type: Array,
|
|
|
+ default() {
|
|
|
+ return [
|
|
|
+ { dateLabel: 'January 2017', title: 'Gathering Information' },
|
|
|
+ { dateLabel: 'February 2017', title: 'Planning' },
|
|
|
+ { dateLabel: 'March 2017', title: 'Design' },
|
|
|
+ { dateLabel: 'April 2017', title: 'Content Writing and Assembly' },
|
|
|
+ { dateLabel: 'May 2017', title: 'Coding' },
|
|
|
+ { dateLabel: 'June 2017', title: 'Testing, Review & Launch' },
|
|
|
+ { dateLabel: 'July 2017', title: 'Maintenance' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ options: {
|
|
|
+ // 设置点击箭头
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.swiper-button-next',
|
|
|
+ prevEl: '.swiper-button-prev'
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ el: '.swiper-pagination'
|
|
|
+ },
|
|
|
+ // pagination: '.swiper-pagination',
|
|
|
+ slidesPerView: 5,
|
|
|
+ grabCursor: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ swiper() {
|
|
|
+ return this.$refs.mySwiper.$swiper
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.swiper-container {
|
|
|
+ padding: 50px 0;
|
|
|
+}
|
|
|
+.timeline {
|
|
|
+ width: 90%;
|
|
|
+ list-style-type: none;
|
|
|
+ display: flex;
|
|
|
+ padding: 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.timeline li {
|
|
|
+ transition: all 200ms ease-in;
|
|
|
+}
|
|
|
+.timestamp {
|
|
|
+ width: 200px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 0px 40px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 100;
|
|
|
+}
|
|
|
+.status {
|
|
|
+ padding: 0px 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ border-top: 4px solid #409eff;
|
|
|
+ position: relative;
|
|
|
+ transition: all 200ms ease-in ;
|
|
|
+}
|
|
|
+
|
|
|
+.status span {
|
|
|
+ font-weight: 600;
|
|
|
+ padding-top: 20px;
|
|
|
+}
|
|
|
+.status span:before {
|
|
|
+ content: '';
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ background-color: #e8eeff;
|
|
|
+ border-radius: 25px;
|
|
|
+ border: 4px solid #409eff;
|
|
|
+ position: absolute;
|
|
|
+ top: -18px;
|
|
|
+ left: 42%;
|
|
|
+ transition: all 200ms ease-in;
|
|
|
+}
|
|
|
+.swiper-slide {
|
|
|
+ height: 150px;
|
|
|
+ width: 200px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+.swiper-slide:nth-child(2n) {
|
|
|
+ width: 40%;
|
|
|
+}
|
|
|
+.swiper-slide:nth-child(3n) {
|
|
|
+ width: 20%;
|
|
|
+}
|
|
|
+.swiper-button {
|
|
|
+ position: relative;
|
|
|
+ top: -108px;
|
|
|
+}
|
|
|
+</style>
|
reedliuqing_i
