1 <template> 2 <div> 3 <swiper :options="swiperOption"> 4 <swiper-slide 5 6 v-for="(item, index) in spikeList" 7 :key="index" 8 > 9 <div> 10 <div> 11 <img :src="item.imgUrl" alt="" /> 12 <span>距离结束</span> 13 <count-down 14 :currentTime="item.startTime" 15 :startTime="item.startTime" 16 :endTime="item.endTime" 17 :dayTxt="\'天\'" 18 :hourTxt="\':\'" 19 :minutesTxt="\':\'" 20 :secondsTxt="\'\'" 21 ></count-down> 22 </div> 23 <div> 24 <img src="http://www.likecs.com/imgs/spike2.jpg" alt="" /> 25 <div> 26 <p> 27 {{ item.title }} 28 </p> 29 <div> 30 <span>￥{{ item.price }}</span> 31 <span>剩余{{ item.num }}个</span> 32 </div> 33 </div> 34 </div> 35 </div> 36 </swiper-slide> 37 38 <!-- 分页器 --> 39 <div slot="pagination"></div> 40 </swiper> 41 </div> 42 </template> 43 44 <script> 45 import CountDown from "vue2-countdown"; 46 47 export default { 48 components: { CountDown }, 49 props: {}, 50 data() { 51 return { 52 spikeList: [ 53 54 { 55 id: 1, 56 startTime: 1587094184386, 57 endTime: 1587526750039, 58 imgUrl: "@/assets/img/spike1.png", 59 title: 60 "2色达+四姑娘山4日全年计划-10人精品小团，二进色达五明佛学院，见证信仰，感悟天葬轮回；观四姑娘山全景，赏双桥沟景区风光魅力（经典行程)", 61 price: 180, 62 num: 35, 63 }, 64 { 65 id: 1, 66 startTime: 1587094184386, 67 endTime: 1597526750039, 68 imgUrl: "@/assets/img/spike1.png", 69 title: 70 "3色达+四姑娘山4日全年计划-10人精品小团，二进色达五明佛学院，见证信仰，感悟天葬轮回；观四姑娘山全景，赏双桥沟景区风光魅力（经典行程)", 71 price: 12280, 72 num: 3225, 73 }, 74 ], 75 swiperOption: { 76 // loop: true, 77 autoplay: true, 78 pagination: { 79 el: ".swiper-pagination", 80 }, 81 }, 82 }; 83 }, 84 watch: {}, 85 computed: {}, 86 methods: { 87 countDownS_cb: function(x) { 88 console.log(x); 89 }, 90 countDownE_cb: function(x) { 91 console.log(x); 92 }, 93 }, 94 created() {}, 95 mounted() { 96 console.log(new Date().getTime() + 5 * 24 * 3600 * 1000); 97 }, 98 }; 99 </script> 100 <style scoped> 101 .swiper-container { 102 overflow: visible; 103 } 104 .bottom-title { 105 width: 5.86rem; 106 } 107 .price { 108 margin-top: 0.5rem; 109 display: flex; 110 align-items: center; 111 justify-content: space-between; 112 } 113 .last { 114 background-color: orange; 115 border: 1px solid black; 116 padding: 0.1rem; 117 border-radius: 0.2rem; 118 color: black; 119 } 120 .bottom-text { 121 width: 5.86rem; 122 } 123 .bottom-title { 124 -webkit-box-orient: vertical; 125 -webkit-line-clamp: 2; 126 overflow: hidden; 127 display: -webkit-box; 128 line-height: 0.38rem; 129 text-align: left; 130 } 131 .spike-bottom { 132 display: flex; 133 align-items: center; 134 } 135 .spike-bottom img { 136 width: 3.09333rem; 137 height: 2.12rem; 138 } 139 .spike-top { 140 width: 100%; 141 height: 1.29333rem; 142 display: flex; 143 align-items: center; 144 font-size: 0.35rem; 145 } 146 .spike-top img { 147 height: 0.41333rem; 148 widows: 1.89333rem; 149 } 150 .spike-top >>>div span ,.spike-top >>>div span i{ 151 border-radius: .1rem; 152 color: #fff; 153 background-color: #8b8b8b; 154 margin-left: .05rem; 155 padding: .1rem; 156 } 157 .spike-top span { 158 margin-left: 0.15rem; 159 } 160 .spike { 161 width: 100%; 162 height: 4.37rem; 163 padding: 0.3rem; 164 } 165 .swiper-pagination-fraction, 166 .swiper-pagination-custom, 167 .swiper-container-horizontal > .swiper-pagination-bullets { 168 bottom: -0.7rem; 169 } 170 171 .swiper-pagination >>> .swiper-pagination-bullet-active { 172 background-color: orange; 173 } 174 </style>