update

components/home/Post.vue

@@ -2,20 +2,26 @@
   <card title="项目公告">
     <template #header-aside><nuxt-link to="/about/news?type=article_news">查看更多+</nuxt-link></template>
     <div class="future">
-      <div class="future-left">即将开始的<br />课程日期</div>
+      <!-- <div class="future-left">即将开始的<br />课程日期</div> -->
       <div class="future-right">
-        <div class="future-item" v-for="(item, index) in futureList" :key="index">
-          <div class="future-item__title">{{ item.title }}</div>
-          <div class="future-item__date">{{ formatDate(item.created_time) }}</div>
-        </div>
+        <swiper ref="mySwiper" :options="swiperOptions" class="my-swiper">
+          <template v-for="(item, index) in futureList">
+            <swiper-slide :key="index">
+              <div class="future-item">
+                <div class="future-item__title">{{ item.title }}</div>
+                <div class="future-item__date">{{ item.created_time }}</div>
+              </div>
+            </swiper-slide>
+          </template>
+        </swiper>
       </div>
     </div>
     <div class="list">
       <nuxt-link :to="`/about/news/${item.id}`" v-for="(item, index) in list" :key="index">
         <div class="list-item">
           <div class="list-item__date">
-            <p class="t1">{{ formatMD(item.created_at) }}</p>
-            <p class="t2">{{ formatYY(item.created_at) }}</p>
+            <p class="t1">{{ formatMD(item.start_time) }}</p>
+            <p class="t2">{{ formatYY(item.start_time) }}</p>
           </div>
           <div class="list-item__title">{{ item.title }}</div>
         </div>
@@ -30,9 +36,18 @@ export default {
   components: { Card },
   data() {
     return {
+      swiperOptions: {
+        autoplay: true,
+        delay: 5000,
+        loop: true,
+        direction: 'vertical',
+        slidesPerView: 'auto',
+        centeredSlides: true
+      },
       futureList: [
-        { title: 'KELLEY商学院金融硕士（MSF）开学典礼', created_time: '2020-03-23 14:41:08' },
-        { title: '酒店管理HMBA报名截止日', created_time: '2020-04-10 14:41:08' }
+        { title: 'KELLEY商学院金融硕士（MSF）开学典礼', created_time: '5月22日' },
+        { title: '中国PRP首期班核心课程（二）', created_time: '5月29日' },
+        { title: '紫荆-索菲亚金融方向工商管理硕士开学典礼', created_time: '5月29日' }
       ],
       list: []
     }
@@ -40,17 +55,17 @@ export default {
   methods: {
     // 2月14日
     formatDate(value) {
-      const date = new Date(value.replace(/\-/g, '/'))
+      const date = new Date(value * 1000)
       return date.getMonth() + 1 + '月' + date.getDate() + '日'
     },
     // 2021
     formatYY(value) {
-      const date = new Date(value.replace(/\-/g, '/'))
+      const date = new Date(value * 1000)
       return date.getFullYear()
     },
     // 2/14
     formatMD(value) {
-      const date = new Date(value.replace(/\-/g, '/'))
+      const date = new Date(value * 1000)
       return date.getMonth() + 1 + '/' + date.getDate()
     }
   },
@@ -75,7 +90,9 @@ export default {
 }
 .future-right {
   flex: 1;
-  padding-left: 0.28rem;
+  height: 1.2rem;
+  overflow: hidden;
+  // padding-left: 0.28rem;
 }
 .future-item {
   display: flex;
@@ -85,6 +102,14 @@ export default {
 .future-item + .future-item {
   border-top: 1px solid #999;
 }
+
+::v-deep{
+  .swiper-slide-duplicate-active{
+    .future-item{
+      border-top: 1px solid #999999;
+    }
+  }
+}
 .future-item__title {
   flex: 1;
   font-size: 0.1rem;