|
|
@@ -0,0 +1,157 @@
|
|
|
+<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="line" />
|
|
|
+ <div class="center circle2"><div class="circle-in center" /></div>
|
|
|
+ <div :class="[index%2==0?'point1':'point2']" />
|
|
|
+ <div class="content3">
|
|
|
+ {{ '3天' }}
|
|
|
+ </div>
|
|
|
+ <div class="content1">
|
|
|
+ {{ item.dateLabel }}
|
|
|
+ </div>
|
|
|
+ <div class="content2">
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ </swiper>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+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: '2020.01.20', title: '技术准入' },
|
|
|
+ { dateLabel: '2020.01.24', title: '技术评审' },
|
|
|
+ { dateLabel: '2020.01.30', title: '已排期' },
|
|
|
+ { dateLabel: '2020.02.2', title: '开发中' },
|
|
|
+ { dateLabel: '2020.02.20', title: 'Hold' },
|
|
|
+ { dateLabel: '2020.02.25', title: '解除Hold' },
|
|
|
+ { dateLabel: '2020.02.31', title: '已提测' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ options: {
|
|
|
+ pagination: {
|
|
|
+ el: '.swiper-pagination'
|
|
|
+ },
|
|
|
+ slidesPerView: 5,
|
|
|
+ grabCursor: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ swiper() {
|
|
|
+ return this.$refs.mySwiper.$swiper
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.steps.forEach(item => {
|
|
|
+ const list = item.dateLabel.split(' ')
|
|
|
+ item.dateLabel = list[0]
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.swiper-container {
|
|
|
+ padding-bottom: 50px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.timeline {
|
|
|
+ width: 90%;
|
|
|
+ list-style-type: none;
|
|
|
+ display: flex;
|
|
|
+ padding: 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.swiper-slide {
|
|
|
+ height: 150px;
|
|
|
+ width: 200px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 18px;
|
|
|
+ position: relative;
|
|
|
+ .line{
|
|
|
+ width: 100%;
|
|
|
+ height:0px;
|
|
|
+ border: 1px solid rgba(217,217,217,1);
|
|
|
+ }
|
|
|
+ .center {
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ }
|
|
|
+ .circle2 {
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .circle2::after{
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ height: 50px;
|
|
|
+ border: 1px solid rgba(1,86,165,1);
|
|
|
+ left: 50%;
|
|
|
+ bottom: -16px;
|
|
|
+ transform: translate(-50%,33px);
|
|
|
+ }
|
|
|
+ .circle-in {
|
|
|
+ position: absolute;
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ background: rgba(24,144,255,1);
|
|
|
+ border: 1px solid rgba(1,86,165,1);
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ .content1,.content2 {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ .content3 {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 10px;
|
|
|
+ color: rgba(97,175,255,1);
|
|
|
+ position: absolute;
|
|
|
+ left: 100%;
|
|
|
+ top: 58px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ .content2 {
|
|
|
+ bottom:5px;
|
|
|
+ font-weight:500;
|
|
|
+ }
|
|
|
+ .content1 {
|
|
|
+ top: 45px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.swiper-slide:nth-child(2n) {
|
|
|
+ width: 40%;
|
|
|
+}
|
|
|
+.swiper-slide:nth-child(3n) {
|
|
|
+ width: 20%;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
qinzhipeng_v