From 8d6ee03d88fd67df4736be141f7cc777ff2b44a8 Mon Sep 17 00:00:00 2001
From: mabo <mailmabo@126.com>
Date: Mon, 2 Aug 2021 18:13:08 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=B1=95=E7=A4=BA=E7=A7=92?=
 =?UTF-8?q?=E6=9D=80=E5=95=86=E5=93=81=EF=BC=8C=E6=A5=BC=E5=B1=82=E8=A3=85?=
 =?UTF-8?q?=E4=BF=AE=E9=A1=B5=E9=9D=A2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 buyer/package.json                            |   1 +
 buyer/src/components/Search.vue               |  11 +-
 .../indexDecorate/ModelFormItem.vue           |   8 +-
 .../indexDecorate/modelFormItem.vue           |   8 +-
 .../indexDecorate/modelList/Seckill.vue       | 301 ++++++++---
 .../indexDecorate/modelList/seckill.vue       | 301 ++++++++---
 buyer/src/pages/Index.vue                     |  18 +
 buyer/src/pages/payment/PayDone.vue           |   8 +-
 buyer/src/pages/promotion/seckill.vue         |   4 +
 buyer/yarn.lock                               |  33 ++
 .../lili-floor-renovation/modelFormItem.vue   |   2 +-
 .../modelList/seckill.vue                     | 511 +++++++++---------
 12 files changed, 777 insertions(+), 429 deletions(-)

diff --git a/buyer/package.json b/buyer/package.json
index 2f20c8d4..010633f1 100644
--- a/buyer/package.json
+++ b/buyer/package.json
@@ -68,6 +68,7 @@
     "shelljs": "^0.7.6",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
diff --git a/buyer/src/components/Search.vue b/buyer/src/components/Search.vue
index 3ddcd784..d82ef8cc 100644
--- a/buyer/src/components/Search.vue
+++ b/buyer/src/components/Search.vue
@@ -62,7 +62,7 @@ export default {
   },
   data () {
     return {
-      searchData: '', // 搜索内容
+      searchData: '' // 搜索内容
     };
   },
   methods: {
@@ -80,7 +80,7 @@ export default {
       this.$emit('search', this.searchData)
     }
   },
-  computed:{
+  computed: {
     promotionTags () {
       return JSON.parse(this.$store.state.hotWordsList)
     }
@@ -90,19 +90,18 @@ export default {
     if (!this.hover) { // 首页顶部固定搜索栏不调用热词接口
       // 搜索热词每一小时请求一次
       const reloadTime = storage.getItem('hotWordsReloadTime')
-      const time = new Date().getTime() - 60*60*1000
+      const time = new Date().getTime() - 5 * 60 * 1000
       if (!reloadTime) {
         hotWords({count: 5}).then(res => {
           if (res.success) storage.setItem('hotWordsList', res.result)
         })
-        storage.setItem('hotWordsReloadTime',new Date().getTime())
+        storage.setItem('hotWordsReloadTime', new Date().getTime())
       } else if (reloadTime && time > reloadTime) {
         hotWords({count: 5}).then(res => {
           if (res.success) storage.setItem('hotWordsList', res.result)
         })
-        storage.setItem('hotWordsReloadTime',new Date().getTime())
+        storage.setItem('hotWordsReloadTime', new Date().getTime())
       }
-      
     }
   }
 };
diff --git a/buyer/src/components/indexDecorate/ModelFormItem.vue b/buyer/src/components/indexDecorate/ModelFormItem.vue
index c854011b..2330e581 100644
--- a/buyer/src/components/indexDecorate/ModelFormItem.vue
+++ b/buyer/src/components/indexDecorate/ModelFormItem.vue
@@ -30,14 +30,14 @@
       </ul>
     </template>
     <!-- 限时秒杀 待完善 -->
-    <!-- <template v-if="element.type == 'seckill'">
-      <seckill class="mb_20"></seckill>
-    </template> -->
+    <template v-if="element.type == 'seckill' && element.options.list.length">
+      <seckill :data="element" class="mb_20"></seckill>
+    </template>
     <!-- 折扣广告 -->
     <template v-if="element.type == 'discountAdvert'">
       <div
         class="discountAdvert mb_20"
-        :style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png')+')'}"
+        :style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png') + ')'}"
       >
         <img
           @click="linkTo(item.url)"
diff --git a/buyer/src/components/indexDecorate/modelFormItem.vue b/buyer/src/components/indexDecorate/modelFormItem.vue
index c854011b..2330e581 100644
--- a/buyer/src/components/indexDecorate/modelFormItem.vue
+++ b/buyer/src/components/indexDecorate/modelFormItem.vue
@@ -30,14 +30,14 @@
       </ul>
     </template>
     <!-- 限时秒杀 待完善 -->
-    <!-- <template v-if="element.type == 'seckill'">
-      <seckill class="mb_20"></seckill>
-    </template> -->
+    <template v-if="element.type == 'seckill' && element.options.list.length">
+      <seckill :data="element" class="mb_20"></seckill>
+    </template>
     <!-- 折扣广告 -->
     <template v-if="element.type == 'discountAdvert'">
       <div
         class="discountAdvert mb_20"
-        :style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png')+')'}"
+        :style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png') + ')'}"
       >
         <img
           @click="linkTo(item.url)"
diff --git a/buyer/src/components/indexDecorate/modelList/Seckill.vue b/buyer/src/components/indexDecorate/modelList/Seckill.vue
index 9105c7ca..3c53d455 100644
--- a/buyer/src/components/indexDecorate/modelList/Seckill.vue
+++ b/buyer/src/components/indexDecorate/modelList/Seckill.vue
@@ -1,56 +1,171 @@
 <template>
   <div class="seckill">
-    <div class="aside hover-pointer" @click="goPromotion">
+    <div class="aside hover-pointer" @click="goToSeckill">
       <div class="title">{{ actName }}</div>
       <div class="hour">
         <span>{{ currHour }}:00</span>点场 倒计时
       </div>
       <div class="count-down" v-if="actStatus === 1">
-        <span>{{ hours }}</span
-        ><span>{{ minutes }}</span
-        ><span>{{ seconds }}</span>
-      </div>
-      <div class="act-status" v-else>
-        {{ actStatus == 0 ? "未开始" : "已结束" }}
+        <span>{{ hours }}</span>
+        <span>{{ minutes }}</span>
+        <span>{{ seconds }}</span>
       </div>
+      <div class="act-status" v-else>未开始</div>
     </div>
+    <swiper :options="swiperOption" ref="mySwiper">
+      <swiper-slide v-for="(item,index) in goodsList" :key="index">
+        <div class="content hover-pointer" @click="goToSeckill">
+          <img :src="item.goodsImage" width="140" height="140" :alt="item.goodsName">
+          <div class="ellipsis">{{item.goodsName}}</div>
+          <div>
+            <span>{{ item.price | unitPrice('￥') }}</span>
+            <span>{{ item.originalPrice | unitPrice('￥') }}</span>
+          </div>
+        </div>
+      </swiper-slide>
+      <div class="swiper-button-prev" slot="button-prev">
+        <Icon type="ios-arrow-back" />
+      </div>
+      <div class="swiper-button-next" slot="button-next">
+        <Icon type="ios-arrow-forward" />
+      </div>
+    </swiper>
   </div>
 </template>
 <script>
-
+// 引入插件
+import { swiper, swiperSlide } from 'vue-awesome-swiper';
+import 'swiper/dist/css/swiper.css';
+import {seckillByDay} from '@/api/promotion'
 export default {
+  components: {
+    swiper,
+    swiperSlide
+  },
+  props: {
+    data: Object
+  },
   data () {
     return {
-      list: [], // 秒杀商品
-      actStatus: 0, // 0 未开始  1 进行中   2 已结束
+      list: [], // 秒杀时段列表
+      goodsList: [], // 商品列表
+      actStatus: 0, // 0 未开始  1 进行中
       actName: '限时秒杀', // 活动名称
+      currIndex: 0, // 当前时间段的下标
       currHour: '00', // 当前秒杀场
       diffSeconds: 0, // 倒计时秒数
-      days: 0, // 天
       hours: 0, // 小时
       minutes: 0, // 分钟
       seconds: 0, // 秒
       interval: null, // 定时器
-      swiperOptions: { // 轮播图参数
-        // slidesPerView: 5,
-        // autoplay: true,
-        // loop: true
+      swiperOption: { // 轮播图参数
+        loop: true,
+        slidesPerView: 5,
+        // 设置点击箭头
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
       }
     };
   },
+  watch: {
+    currIndex (val) {
+      clearInterval(this.interval)
+      this.interval = null
+      this.countDown(val)
+      this.goodsList = this.list[val].seckillGoodsList
+    },
+    diffSeconds (val) {
+      const hours = Math.floor(val / 3600);
+      // 当前秒数 / 60，向下取整
+      // 获取到所有分钟数 3600 / 60 = 60分钟
+      // 对60取模，超过小时数的分钟数
+      const minutes = Math.floor(val / 60) % 60;
+      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
+      const seconds = val % 60;
+      this.hours = filteTime(hours)
+      this.minutes = filteTime(minutes)
+      this.seconds = filteTime(seconds)
+      if (val <= 0) {
+        clearInterval(this.interval)
+        this.interval = null
+      }
+      function filteTime (time) {
+        if (time < 10) {
+          return '0' + time
+        } else {
+          return time
+        }
+      }
+    }
+  },
   computed: {
+    swiper () { // 轮播组件
+      return this.$refs.mySwiper.swiper;
+    }
   },
   beforeDestroy () {
+    // 销毁前清除定时器
     clearInterval(this.interval);
   },
   mounted () {
+    this.getListByDay()
   },
   methods: {
-    goPromotion () { // 跳转秒杀页面
+    goToSeckill () { // 跳转秒杀页面
       let routeUrl = this.$router.resolve({
         path: '/seckill'
       });
       window.open(routeUrl.href, '_blank');
+    },
+    countDown (currIndex) { // 倒计时
+      // 0点时间戳
+      let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+      let currTime = new Date().getTime()
+      let actTime = 0;
+      let nowHour = new Date().getHours(); // 当前小时数
+      if (this.list[currIndex].timeLine > nowHour) { // 活动未开始
+        this.actStatus = 0;
+        actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000
+      } else if (this.list[currIndex].timeLine <= nowHour) { // 活动进行中
+        this.actStatus = 1;
+        if (currIndex === this.list.length - 1) { // 如果是最后一个活动，直到24点结束
+          actTime = zeroTime + 24 * 3600 * 1000
+        } else {
+          actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000
+        }
+      }
+      this.currHour = this.list[this.currIndex].timeLine
+      this.diffSeconds = Math.floor((actTime - currTime) / 1000)
+      this.interval = setInterval(() => {
+        this.diffSeconds--
+      }, 1000)
+    },
+    getListByDay () { // 当天秒杀活动
+      // seckillByDay().then(res => {
+      //   if (res.success) {
+      //     this.list = res.result
+      //     this.goodsList = this.list[0].seckillGoodsList
+      //     this.countDown(this.currIndex)
+      //   }
+      // })
+      // const list = [
+      //   {
+      //     timeLine: 18,
+      //     seckillGoodsList: [
+      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
+      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
+      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
+      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
+      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
+      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12}
+      //     ]
+      //   }
+      // ]
+      this.list = this.data.options.list
+      this.goodsList = this.list[0].seckillGoodsList
+      this.countDown(this.currIndex)
     }
   }
 };
@@ -60,6 +175,7 @@ export default {
   width: 100%;
   height: 260px;
   display: flex;
+  background-color: #eee;
   .aside {
     overflow: hidden;
     width: 190px;
@@ -117,80 +233,99 @@ export default {
     }
   }
 
-  .section {
-    width: 1000px;
-    // background: #efefef;
-    .swiper-slide {
-      height: 260px;
-      .content {
-        width: 200px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
+  .content {
+    width: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    position: relative;
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      width: 1px;
+      height: 200px;
+      transform: translateY(-50%);
+      background: linear-gradient(180deg, white, #eeeeee, white);
+    }
+    img {
+      margin-top: 30px;
+    }
+    > div {
+      width: 160px;
+      margin-top: 10px;
+      font-size: 12px;
+      position: relative;
+    }
+    > div:nth-of-type(1):hover {
+      color: $theme_color;
+      cursor: pointer;
+    }
+    > div:nth-of-type(2) {
+      border: 1px solid $theme_color;
+      line-height: 24px;
+      display: flex;
+      text-align: center;
+
+      span:nth-child(1) {
+        color: #fff;
+        font-size: 16px;
+        width: 92px;
+        background-color: $theme_color;
         position: relative;
-        &::after {
-          content: "";
-          display: block;
+        &::before {
+          content: " ";
+          width: 0;
+          height: 0;
+          border-color: transparent white transparent transparent;
+          border-style: solid;
+          border-width: 24px 8px 0 0;
           position: absolute;
-          top: 50%;
-          right: 0;
-          width: 1px;
-          height: 200px;
-          transform: translateY(-50%);
-          background: linear-gradient(180deg, white, #eeeeee, white);
+          top: 0;
+          left: 84px;
         }
-        img {
-          margin-top: 30px;
-        }
-        > div {
-          width: 160px;
-          margin-top: 10px;
-          font-size: 12px;
-          position: relative;
-        }
-        > div:nth-of-type(1):hover {
-          color: $theme_color;
-          cursor: pointer;
-        }
-        > div:nth-of-type(2) {
-          border: 1px solid $theme_color;
-          line-height: 24px;
-          display: flex;
-          text-align: center;
+      }
 
-          span:nth-child(1) {
-            color: #fff;
-            font-size: 16px;
-            width: 92px;
-            background-color: $theme_color;
-            position: relative;
-            &::before {
-              content: " ";
-              width: 0;
-              height: 0;
-              border-color: transparent white transparent transparent;
-              border-style: solid;
-              border-width: 24px 8px 0 0;
-              position: absolute;
-              top: 0;
-              left: 84px;
-            }
-          }
-
-          span:nth-child(2) {
-            color: #999;
-            width: 66px;
-            text-decoration: line-through;
-          }
-        }
+      span:nth-child(2) {
+        color: #999;
+        width: 66px;
+        text-decoration: line-through;
       }
     }
   }
 }
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.swiper-container {
+  height: 260px;
+  width: 1000px;
+  margin-left: 10px;
+  background-color: #fff;
+}
+.swiper-button-prev, .swiper-button-next {
+  background: #ccc;
+  width: 25px;
+  height: 35px;
+  font-size: 16px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.swiper-button-prev:hover, .swiper-button-next:hover{
+  background: #aaa;
+}
+.swiper-button-prev {
+  left: 0;
+  border-bottom-right-radius: 18px;
+  border-top-right-radius: 18px;
+  padding-right: 5px;
+}
+.swiper-button-next {
+  right: 0;
+  border-top-left-radius: 18px;
+  border-bottom-left-radius: 18px;
+  padding-left: 5px;
 }
 </style>
diff --git a/buyer/src/components/indexDecorate/modelList/seckill.vue b/buyer/src/components/indexDecorate/modelList/seckill.vue
index 9105c7ca..3c53d455 100644
--- a/buyer/src/components/indexDecorate/modelList/seckill.vue
+++ b/buyer/src/components/indexDecorate/modelList/seckill.vue
@@ -1,56 +1,171 @@
 <template>
   <div class="seckill">
-    <div class="aside hover-pointer" @click="goPromotion">
+    <div class="aside hover-pointer" @click="goToSeckill">
       <div class="title">{{ actName }}</div>
       <div class="hour">
         <span>{{ currHour }}:00</span>点场 倒计时
       </div>
       <div class="count-down" v-if="actStatus === 1">
-        <span>{{ hours }}</span
-        ><span>{{ minutes }}</span
-        ><span>{{ seconds }}</span>
-      </div>
-      <div class="act-status" v-else>
-        {{ actStatus == 0 ? "未开始" : "已结束" }}
+        <span>{{ hours }}</span>
+        <span>{{ minutes }}</span>
+        <span>{{ seconds }}</span>
       </div>
+      <div class="act-status" v-else>未开始</div>
     </div>
+    <swiper :options="swiperOption" ref="mySwiper">
+      <swiper-slide v-for="(item,index) in goodsList" :key="index">
+        <div class="content hover-pointer" @click="goToSeckill">
+          <img :src="item.goodsImage" width="140" height="140" :alt="item.goodsName">
+          <div class="ellipsis">{{item.goodsName}}</div>
+          <div>
+            <span>{{ item.price | unitPrice('￥') }}</span>
+            <span>{{ item.originalPrice | unitPrice('￥') }}</span>
+          </div>
+        </div>
+      </swiper-slide>
+      <div class="swiper-button-prev" slot="button-prev">
+        <Icon type="ios-arrow-back" />
+      </div>
+      <div class="swiper-button-next" slot="button-next">
+        <Icon type="ios-arrow-forward" />
+      </div>
+    </swiper>
   </div>
 </template>
 <script>
-
+// 引入插件
+import { swiper, swiperSlide } from 'vue-awesome-swiper';
+import 'swiper/dist/css/swiper.css';
+import {seckillByDay} from '@/api/promotion'
 export default {
+  components: {
+    swiper,
+    swiperSlide
+  },
+  props: {
+    data: Object
+  },
   data () {
     return {
-      list: [], // 秒杀商品
-      actStatus: 0, // 0 未开始  1 进行中   2 已结束
+      list: [], // 秒杀时段列表
+      goodsList: [], // 商品列表
+      actStatus: 0, // 0 未开始  1 进行中
       actName: '限时秒杀', // 活动名称
+      currIndex: 0, // 当前时间段的下标
       currHour: '00', // 当前秒杀场
       diffSeconds: 0, // 倒计时秒数
-      days: 0, // 天
       hours: 0, // 小时
       minutes: 0, // 分钟
       seconds: 0, // 秒
       interval: null, // 定时器
-      swiperOptions: { // 轮播图参数
-        // slidesPerView: 5,
-        // autoplay: true,
-        // loop: true
+      swiperOption: { // 轮播图参数
+        loop: true,
+        slidesPerView: 5,
+        // 设置点击箭头
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
       }
     };
   },
+  watch: {
+    currIndex (val) {
+      clearInterval(this.interval)
+      this.interval = null
+      this.countDown(val)
+      this.goodsList = this.list[val].seckillGoodsList
+    },
+    diffSeconds (val) {
+      const hours = Math.floor(val / 3600);
+      // 当前秒数 / 60，向下取整
+      // 获取到所有分钟数 3600 / 60 = 60分钟
+      // 对60取模，超过小时数的分钟数
+      const minutes = Math.floor(val / 60) % 60;
+      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
+      const seconds = val % 60;
+      this.hours = filteTime(hours)
+      this.minutes = filteTime(minutes)
+      this.seconds = filteTime(seconds)
+      if (val <= 0) {
+        clearInterval(this.interval)
+        this.interval = null
+      }
+      function filteTime (time) {
+        if (time < 10) {
+          return '0' + time
+        } else {
+          return time
+        }
+      }
+    }
+  },
   computed: {
+    swiper () { // 轮播组件
+      return this.$refs.mySwiper.swiper;
+    }
   },
   beforeDestroy () {
+    // 销毁前清除定时器
     clearInterval(this.interval);
   },
   mounted () {
+    this.getListByDay()
   },
   methods: {
-    goPromotion () { // 跳转秒杀页面
+    goToSeckill () { // 跳转秒杀页面
       let routeUrl = this.$router.resolve({
         path: '/seckill'
       });
       window.open(routeUrl.href, '_blank');
+    },
+    countDown (currIndex) { // 倒计时
+      // 0点时间戳
+      let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+      let currTime = new Date().getTime()
+      let actTime = 0;
+      let nowHour = new Date().getHours(); // 当前小时数
+      if (this.list[currIndex].timeLine > nowHour) { // 活动未开始
+        this.actStatus = 0;
+        actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000
+      } else if (this.list[currIndex].timeLine <= nowHour) { // 活动进行中
+        this.actStatus = 1;
+        if (currIndex === this.list.length - 1) { // 如果是最后一个活动，直到24点结束
+          actTime = zeroTime + 24 * 3600 * 1000
+        } else {
+          actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000
+        }
+      }
+      this.currHour = this.list[this.currIndex].timeLine
+      this.diffSeconds = Math.floor((actTime - currTime) / 1000)
+      this.interval = setInterval(() => {
+        this.diffSeconds--
+      }, 1000)
+    },
+    getListByDay () { // 当天秒杀活动
+      // seckillByDay().then(res => {
+      //   if (res.success) {
+      //     this.list = res.result
+      //     this.goodsList = this.list[0].seckillGoodsList
+      //     this.countDown(this.currIndex)
+      //   }
+      // })
+      // const list = [
+      //   {
+      //     timeLine: 18,
+      //     seckillGoodsList: [
+      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
+      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
+      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
+      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
+      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
+      //       {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12}
+      //     ]
+      //   }
+      // ]
+      this.list = this.data.options.list
+      this.goodsList = this.list[0].seckillGoodsList
+      this.countDown(this.currIndex)
     }
   }
 };
@@ -60,6 +175,7 @@ export default {
   width: 100%;
   height: 260px;
   display: flex;
+  background-color: #eee;
   .aside {
     overflow: hidden;
     width: 190px;
@@ -117,80 +233,99 @@ export default {
     }
   }
 
-  .section {
-    width: 1000px;
-    // background: #efefef;
-    .swiper-slide {
-      height: 260px;
-      .content {
-        width: 200px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
+  .content {
+    width: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    position: relative;
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      width: 1px;
+      height: 200px;
+      transform: translateY(-50%);
+      background: linear-gradient(180deg, white, #eeeeee, white);
+    }
+    img {
+      margin-top: 30px;
+    }
+    > div {
+      width: 160px;
+      margin-top: 10px;
+      font-size: 12px;
+      position: relative;
+    }
+    > div:nth-of-type(1):hover {
+      color: $theme_color;
+      cursor: pointer;
+    }
+    > div:nth-of-type(2) {
+      border: 1px solid $theme_color;
+      line-height: 24px;
+      display: flex;
+      text-align: center;
+
+      span:nth-child(1) {
+        color: #fff;
+        font-size: 16px;
+        width: 92px;
+        background-color: $theme_color;
         position: relative;
-        &::after {
-          content: "";
-          display: block;
+        &::before {
+          content: " ";
+          width: 0;
+          height: 0;
+          border-color: transparent white transparent transparent;
+          border-style: solid;
+          border-width: 24px 8px 0 0;
           position: absolute;
-          top: 50%;
-          right: 0;
-          width: 1px;
-          height: 200px;
-          transform: translateY(-50%);
-          background: linear-gradient(180deg, white, #eeeeee, white);
+          top: 0;
+          left: 84px;
         }
-        img {
-          margin-top: 30px;
-        }
-        > div {
-          width: 160px;
-          margin-top: 10px;
-          font-size: 12px;
-          position: relative;
-        }
-        > div:nth-of-type(1):hover {
-          color: $theme_color;
-          cursor: pointer;
-        }
-        > div:nth-of-type(2) {
-          border: 1px solid $theme_color;
-          line-height: 24px;
-          display: flex;
-          text-align: center;
+      }
 
-          span:nth-child(1) {
-            color: #fff;
-            font-size: 16px;
-            width: 92px;
-            background-color: $theme_color;
-            position: relative;
-            &::before {
-              content: " ";
-              width: 0;
-              height: 0;
-              border-color: transparent white transparent transparent;
-              border-style: solid;
-              border-width: 24px 8px 0 0;
-              position: absolute;
-              top: 0;
-              left: 84px;
-            }
-          }
-
-          span:nth-child(2) {
-            color: #999;
-            width: 66px;
-            text-decoration: line-through;
-          }
-        }
+      span:nth-child(2) {
+        color: #999;
+        width: 66px;
+        text-decoration: line-through;
       }
     }
   }
 }
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.swiper-container {
+  height: 260px;
+  width: 1000px;
+  margin-left: 10px;
+  background-color: #fff;
+}
+.swiper-button-prev, .swiper-button-next {
+  background: #ccc;
+  width: 25px;
+  height: 35px;
+  font-size: 16px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.swiper-button-prev:hover, .swiper-button-next:hover{
+  background: #aaa;
+}
+.swiper-button-prev {
+  left: 0;
+  border-bottom-right-radius: 18px;
+  border-top-right-radius: 18px;
+  padding-right: 5px;
+}
+.swiper-button-next {
+  right: 0;
+  border-top-left-radius: 18px;
+  border-bottom-left-radius: 18px;
+  padding-left: 5px;
 }
 </style>
diff --git a/buyer/src/pages/Index.vue b/buyer/src/pages/Index.vue
index f363e2f0..22adfd16 100644
--- a/buyer/src/pages/Index.vue
+++ b/buyer/src/pages/Index.vue
@@ -25,6 +25,7 @@ import ModelForm from '@/components/indexDecorate/ModelForm';
 import HoverSearch from '@/components/header/hoverSearch';
 import storage from '@/plugins/storage';
 import { indexData } from '@/api/index.js';
+import {seckillByDay} from '@/api/promotion'
 export default {
   name: 'Index',
   mounted () {
@@ -54,11 +55,28 @@ export default {
         if (res.success) {
           let dataJson = JSON.parse(res.result.pageData);
           this.modelForm = dataJson;
+          // 秒杀活动不是装修的数据，需要调用接口判断是否有秒杀商品
+          for (let i = 0; i < dataJson.list.length; i++) {
+            if (dataJson.list[i].type === 'discountAdvert') {
+              let seckill = this.getListByDay()
+              dataJson.list[i].options.list = seckill
+              break;
+            }
+          }
           storage.setItem('navList', dataJson.list[1])
           this.showNav = true
           this.topAdvert = dataJson.list[0];
         }
       });
+    },
+    async getListByDay () { // 当天秒杀活动
+      const res = await seckillByDay()
+      console.log(res);
+      if (res.success && res.result.length) {
+        return res.result
+      } else {
+        return []
+      }
     }
   },
   components: {
diff --git a/buyer/src/pages/payment/PayDone.vue b/buyer/src/pages/payment/PayDone.vue
index cc950370..411bc0cd 100644
--- a/buyer/src/pages/payment/PayDone.vue
+++ b/buyer/src/pages/payment/PayDone.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="pay-done">
     <BaseHeader></BaseHeader>
     <div class="pay-done-box">
       <img src="../../assets/images/pay-success.png">
@@ -14,7 +14,10 @@
 
 <script>
 export default {
-  name: 'PayDone'
+  name: 'PayDone',
+  mounted () {
+    document.querySelector('.pay-done').style.height = window.innerHeight + 'px'
+  }
 };
 </script>
 
@@ -23,7 +26,6 @@ export default {
   margin: 100px;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
 }
 .pay-btn{
diff --git a/buyer/src/pages/promotion/seckill.vue b/buyer/src/pages/promotion/seckill.vue
index 46b21558..bdcc7d82 100644
--- a/buyer/src/pages/promotion/seckill.vue
+++ b/buyer/src/pages/promotion/seckill.vue
@@ -68,6 +68,10 @@ export default {
       nowHour: new Date().getHours() // 当前小时数
     }
   },
+  beforeDestroy () {
+    // 销毁前清除定时器
+    clearInterval(this.interval);
+  },
   watch: {
     currIndex (val) {
       clearInterval(this.interval)
diff --git a/buyer/yarn.lock b/buyer/yarn.lock
index 9f463fb0..924202e2 100644
--- a/buyer/yarn.lock
+++ b/buyer/yarn.lock
@@ -2724,6 +2724,13 @@
     "domelementtype" "^2.0.1"
     "entities" "^2.0.0"
 
+"dom7@^2.1.3":
+  "integrity" "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA=="
+  "resolved" "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz"
+  "version" "2.1.5"
+  dependencies:
+    "ssr-window" "^2.0.0"
+
 "domain-browser@^1.1.1":
   "integrity" "sha1-PTH1AZGmdJ3RN1p/Ui6CPULlTto="
   "resolved" "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz?cache=0&sync_timestamp=1604239910191&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomain-browser%2Fdownload%2Fdomain-browser-1.2.0.tgz"
@@ -7728,6 +7735,16 @@
     "safer-buffer" "^2.0.2"
     "tweetnacl" "~0.14.0"
 
+"ssr-window@^1.0.1":
+  "integrity" "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+  "resolved" "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz"
+  "version" "1.0.1"
+
+"ssr-window@^2.0.0":
+  "integrity" "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+  "resolved" "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz"
+  "version" "2.0.0"
+
 "ssri@^5.2.4":
   "integrity" "sha512-XRSIPqLij52MtgoQavH/x/dU1qVKtWUAAZeOHsR9c2Ddi4XerFy3mc1alf+dLJKl9EUIm/Ht+EowFkTUOA6GAQ=="
   "resolved" "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz"
@@ -7991,6 +8008,14 @@
     "unquote" "~1.1.1"
     "util.promisify" "~1.0.0"
 
+"swiper@^4.0.7":
+  "integrity" "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA=="
+  "resolved" "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz"
+  "version" "4.5.1"
+  dependencies:
+    "dom7" "^2.1.3"
+    "ssr-window" "^1.0.1"
+
 "table@4.0.2":
   "integrity" "sha1-ozRHN1OR52atNNNIbm4q7chNLjY= sha512-UUkEAPdSGxtRpiV9ozJ5cMTtYiqz7Ni1OGqLXRCynrvzdtR1p+cfOWe2RJLwvUG8hNanaSRjecIqwOjqeatDsA=="
   "resolved" "https://registry.npm.taobao.org/table/download/table-4.0.2.tgz"
@@ -8487,6 +8512,14 @@
   "resolved" "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz"
   "version" "1.1.2"
 
+"vue-awesome-swiper@^3.1.3":
+  "integrity" "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg=="
+  "resolved" "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz"
+  "version" "3.1.3"
+  dependencies:
+    "object-assign" "^4.1.1"
+    "swiper" "^4.0.7"
+
 "vue-eslint-parser@^2.0.3":
   "integrity" "sha1-wmjJbG2Uz+PZOKX3WTlZsMozYNE= sha512-ZezcU71Owm84xVF6gfurBQUGg8WQ+WZGxgDEQu1IHFBZNx7BFZg3L1yHxrCBNNwbwFtE1GuvfJKMtb6Xuwc/Bw=="
   "resolved" "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz?cache=0&sync_timestamp=1608030990315&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-2.0.3.tgz"
diff --git a/manager/src/views/lili-floor-renovation/modelFormItem.vue b/manager/src/views/lili-floor-renovation/modelFormItem.vue
index ec19150b..fc47c4a6 100644
--- a/manager/src/views/lili-floor-renovation/modelFormItem.vue
+++ b/manager/src/views/lili-floor-renovation/modelFormItem.vue
@@ -35,7 +35,7 @@
         </template>
         <!-- 折扣广告 -->
         <template v-if="element.type == 'discountAdvert'">
-            <div class="discountAdvert" :style="{'background-image' : 'url(' + element.options.bgImg.img + ')'}">
+            <div class="discountAdvert" :style="{'background-image' : 'url(' + require('@/assets/nav/decorate.png') + ')'}">
                 <div>
                     <div v-for="(item,index) in element.options.classification" :key="index" class="setup-content">
                         <img :src="item.img" width="190" height="210" alt="">
diff --git a/manager/src/views/lili-floor-renovation/modelList/seckill.vue b/manager/src/views/lili-floor-renovation/modelList/seckill.vue
index 0ab6a13b..ec5a6849 100644
--- a/manager/src/views/lili-floor-renovation/modelList/seckill.vue
+++ b/manager/src/views/lili-floor-renovation/modelList/seckill.vue
@@ -1,262 +1,283 @@
 <template>
-    <div class="seckill">
-        <div class="aside">
-            <div class="title">{{actName}}</div>
-            <div class="hour"><span>{{currHour}}:00</span>点场 倒计时</div>
-            <div class="count-down" v-if="actStatus === 1"><span>{{hours}}</span><span>{{minutes}}</span><span>{{seconds}}</span></div>
-            <div class="act-status" v-else>{{ actStatus == 0 ?'未开始':'已结束' }}</div>
-        </div>
-        <div class="section">
-            <swiper ref="mySwiper" :options="swiperOptions">
-                <swiper-slide v-for="(item,index) in options.list[0].goodsList" :key="index" class="swiper-slide">
-                    <div class="content">
-                        <img :src="item.img" width="140" height="140" :alt="item.name">
-                        <div class="ellipsis">{{item.name}}</div>
-                        <div>
-                            <span>{{ item.price | unitPrice('￥') }}</span>
-                            <span>{{ item.originalPrice | unitPrice('￥') }}</span>
-                        </div>
-                    </div>
-                    
-                </swiper-slide>
-            </swiper>
-        </div>
+  <div class="seckill">
+    <div class="aside">
+      <div class="title">{{ actName }}</div>
+      <div class="hour">
+        <span>{{ currHour }}:00</span>点场 倒计时
+      </div>
+      <div class="count-down" v-if="actStatus === 1">
+        <span>{{ hours }}</span
+        ><span>{{ minutes }}</span
+        ><span>{{ seconds }}</span>
+      </div>
+      <div class="act-status" v-else>
+        {{ actStatus == 0 ? "未开始" : "已结束" }}
+      </div>
     </div>
+    <div class="section">
+      <swiper ref="mySwiper" :options="swiperOptions">
+        <swiper-slide
+          v-for="(item, index) in options.list[0].goodsList"
+          :key="index"
+        >
+          <div class="content">
+            <img :src="item.img" width="140" height="140" :alt="item.name" />
+            <div class="ellipsis">{{ item.name }}</div>
+            <div>
+              <span>{{ item.price | unitPrice("￥") }}</span>
+              <span>{{ item.originalPrice | unitPrice("￥") }}</span>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+  </div>
 </template>
 <script>
-import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
-import 'swiper/swiper-bundle.css'
+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
+import "swiper/swiper-bundle.css";
 export default {
-    components: {
-        Swiper,
-        SwiperSlide
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  directives: {
+    swiper: directive,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: null,
     },
-    directives: {
-        swiper: directive
-    },
-    props:{
-        data:{
-            type: Object,
-            default: null
-        }
-    },
-    data() {
-        return {
-            options:this.data.options, // 当前数据
-            actStatus:0,  // 0 未开始  1 进行中   2 已结束
-            actName:'限时秒杀',
-            currHour:'00', // 当前秒杀场
-            diffSeconds:0, // 倒地时
-            hours: '00', // 小时
-            minutes: '00', // 分钟
-            seconds: '00', // 秒
-            interval:undefined, // 定时器
-            swiperOptions:{ // 轮播图参数 
-                slidesPerView: 5,
-                autoplay:true,
-                loop:true
-            }
-        }
-    },
-    watch: {
-        diffSeconds(val){
-            const hours = Math.floor(val / 3600)
-            // 当前秒数 / 60，向下取整
-            // 获取到所有分钟数 3600 / 60 = 60分钟
-            // 对60取模，超过小时数的分钟数
-            const minutes = Math.floor(val / 60) % 60
-            // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
-            const seconds = val % 60
-            this.hours = hours < 10 ? '0' + hours : hours
-            this.minutes = minutes < 10 ? '0' + minutes : minutes
-            this.seconds = seconds < 10 ? '0' + seconds : seconds
+  },
+  data() {
+    return {
+      options: this.data.options, // 当前数据
+      actStatus: 0, // 0 未开始  1 进行中   2 已结束
+      actName: "限时秒杀",
+      currHour: "00", // 当前秒杀场
+      diffSeconds: 0, // 倒地时
+      hours: "00", // 小时
+      minutes: "00", // 分钟
+      seconds: "00", // 秒
+      interval: undefined, // 定时器
+      swiperOptions: {
+        // 轮播图参数
+        slidesPerView: 5,
+        autoplay: true,
+        loop: true,
+      },
+    };
+  },
+  watch: {
+    diffSeconds(val) {
+      const hours = Math.floor(val / 3600);
+      // 当前秒数 / 60，向下取整
+      // 获取到所有分钟数 3600 / 60 = 60分钟
+      // 对60取模，超过小时数的分钟数
+      const minutes = Math.floor(val / 60) % 60;
+      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
+      const seconds = val % 60;
+      this.hours = hours < 10 ? "0" + hours : hours;
+      this.minutes = minutes < 10 ? "0" + minutes : minutes;
+      this.seconds = seconds < 10 ? "0" + seconds : seconds;
 
-            if(val === 0){
-                clearInterval(this.interval)
-                this.hours = 0;
-                this.minutes = 0;
-                this.seconds = 0;
-                this.countDown(this.options.list)
-            }
+      if (val === 0) {
+        clearInterval(this.interval);
+        this.hours = 0;
+        this.minutes = 0;
+        this.seconds = 0;
+        this.countDown(this.options.list);
+      }
+    },
+  },
+  mounted() {
+    this.countDown(this.options.list);
+  },
+  beforeDestroy() {
+    clearInterval(this.interval);
+  },
+  methods: {
+    // 倒计时
+    countDown(list) {
+      /**
+       * 默认倒计时两小时
+       * 如果没有开始，则显示未开始
+       * 进行中显示倒计时
+       * 今天的秒杀结束则显示已结束
+       */
+      let nowHour = new Date().getHours();
+      if (nowHour < Number(list[0].time)) {
+        // 活动未开始
+        this.currHour = list[0].time;
+        this.actStatus = 0;
+      } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
+        // 活动已结束
+        this.actStatus = 2;
+        this.currHour = list[list.length - 1].time;
+      } else {
+        // 活动进行中
+        this.actStatus = 1;
+        for (let i = 0; i < list.length; i++) {
+          if (nowHour == Number(list[i].time)) {
+            this.currHour = list[i].time;
+          }
+          if (
+            nowHour > Number(list[i].time) &&
+            nowHour < Number(list[i].time + 2)
+          ) {
+            this.currHour = list[i].time;
+          }
         }
+        // 当前0点时间戳
+        let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+        // 活动倒计时
+        this.diffSeconds = Math.floor(
+          (zeroTime +
+            3600 * 1000 * (this.currHour + 2) -
+            new Date().getTime()) /
+            1000
+        );
+        const that = this;
+        this.interval = setInterval(() => {
+          this.diffSeconds--;
+        }, 1000);
+      }
     },
-    mounted(){
-        this.countDown(this.options.list)
-    },
-    beforeDestroy(){
-        clearInterval(this.interval)
-    },
-    methods: {
-        // 倒计时
-        countDown(list){
-            /**
-             * 默认倒计时两小时
-             * 如果没有开始，则显示未开始
-             * 进行中显示倒计时
-             * 今天的秒杀结束则显示已结束
-             */
-            let nowHour = new Date().getHours();
-            if(nowHour < Number(list[0].time)){ // 活动未开始
-                this.currHour = list[0].time
-                this.actStatus = 0;
-            } else if(nowHour >= Number(list[list.length-1].time + 2)) { // 活动已结束
-                this.actStatus = 2;
-                this.currHour = list[list.length-1].time
-            } else { // 活动进行中
-                this.actStatus = 1;
-                for(let i = 0; i < list.length; i++) {
-                    if(nowHour == Number(list[i].time)) {
-                        this.currHour = list[i].time;
-                    }
-                    if( nowHour > Number(list[i].time) && nowHour < Number(list[i].time + 2) ){
-                        this.currHour = list[i].time;
-                    }
-                }       
-                // 当前0点时间戳
-                let zeroTime = new Date(new Date().toLocaleDateString()).getTime()
-                // 活动倒计时
-                this.diffSeconds = Math.floor( ( zeroTime + 3600 * 1000 * (this.currHour+2) - new Date().getTime() ) / 1000)
-                const that = this;
-                this.interval = setInterval(() => {
-                    this.diffSeconds--
-                }, 1000);
-            }
-        }
-    }
-}
+  },
+};
 </script>
 <style lang="scss" scoped>
-.seckill{
-    width: 100%;
-    height: 260px;
-    display: flex;
-    .aside{
-        overflow: hidden;
-        width: 190px;
-        height: 100%;
-        color: #fff;
-        background-image: url('../../../assets/seckillBg.png');
+.seckill {
+  width: 100%;
+  height: 260px;
+  display: flex;
+  .aside {
+    overflow: hidden;
+    width: 190px;
+    height: 100%;
+    color: #fff;
+    background-image: url("../../../assets/seckillBg.png");
 
-        .title{
-            width: 100%;
-            text-align: center;
-            font-size: 28px;
-            margin-top: 31px;
-        }
-
-        .hour{
-            margin-top: 90px;
-            text-align: center;
-            span{
-                font-size: 18px;
-            }
-        }
-
-        .count-down{
-            margin: 10px 0 0 30px;
-            >span{
-                position: relative;
-                float: left;
-                width: 30px;
-                height: 30px;
-                text-align: center;
-                background-color: #2f3430;
-                margin-right: 20px;
-                color: white;
-                font-size: 20px;
-                &::after{
-                    content: ":";
-                    display: block;
-                    position: absolute;
-                    right: -20px;
-                    font-weight: bolder;
-                    font-size: 18px;
-                    width: 20px;
-                    height: 100%;
-                    top: 0;
-                }
-            }
-            >span:last-child::after{
-                content: '';
-            }
-        }
-
-        .act-status{
-            margin: 10px 0 0 65px;
-            font-size: 20px;
-        }
+    .title {
+      width: 100%;
+      text-align: center;
+      font-size: 28px;
+      margin-top: 31px;
     }
 
-    .section{
-        width: 1000px;
-        // background: #efefef;
-        .swiper-slide{
-            height: 260px;
-            .content{
-                width: 200px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                flex-direction: column;
-                position: relative;
-                &::after{
-                    content: "";
-                    display: block;
-                    position: absolute;
-                    top: 50%;
-                    right: 0;
-                    width: 1px;
-                    height: 200px;
-                    transform: translateY(-50%);
-                    background: linear-gradient(180deg,white,#eeeeee,white);
-                }
-                img{
-                    margin-top: 30px;
-                }
-                >div{
-                    width: 160px;
-                    margin-top: 10px;
-                    font-size: 12px;
-                    position: relative;
-                    
-                }
-                >div:nth-of-type(1):hover{
-                    color: $theme_color;
-                    cursor: pointer;
-                }
-                >div:nth-of-type(2){
-                    border: 1px solid $theme_color;
-                    line-height: 24px;
-                    display: flex;
-                    text-align: center;
-
-                    span:nth-child(1){
-                        color: #fff;
-                        font-size: 16px;
-                        width: 92px;
-                        background-color: $theme_color;
-                        position: relative;
-                        &::before{
-                            content: " ";
-                            width: 0;
-                            height: 0;
-                            border-color: transparent white transparent transparent;
-                            border-style: solid;
-                            border-width: 24px 8px 0 0;
-                            position: absolute;
-                            top: 0;
-                            left: 84px;
-                        }
-                    }
-
-                    span:nth-child(2){
-                        color: #999;
-                        width: 66px;
-                        text-decoration: line-through;
-                    }
-                }
-            }
-        }
+    .hour {
+      margin-top: 90px;
+      text-align: center;
+      span {
+        font-size: 18px;
+      }
     }
+
+    .count-down {
+      margin: 10px 0 0 30px;
+      > span {
+        position: relative;
+        float: left;
+        width: 30px;
+        height: 30px;
+        text-align: center;
+        background-color: #2f3430;
+        margin-right: 20px;
+        color: white;
+        font-size: 20px;
+        &::after {
+          content: ":";
+          display: block;
+          position: absolute;
+          right: -20px;
+          font-weight: bolder;
+          font-size: 18px;
+          width: 20px;
+          height: 100%;
+          top: 0;
+        }
+      }
+      > span:last-child::after {
+        content: "";
+      }
+    }
+
+    .act-status {
+      margin: 10px 0 0 65px;
+      font-size: 20px;
+    }
+  }
+
+  .section {
+    width: 1000px;
+    // background: #efefef;
+    .swiper-slide {
+      height: 260px;
+      .content {
+        width: 200px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        position: relative;
+        &::after {
+          content: "";
+          display: block;
+          position: absolute;
+          top: 50%;
+          right: 0;
+          width: 1px;
+          height: 200px;
+          transform: translateY(-50%);
+          background: linear-gradient(180deg, white, #eeeeee, white);
+        }
+        img {
+          margin-top: 30px;
+        }
+        > div {
+          width: 160px;
+          margin-top: 10px;
+          font-size: 12px;
+          position: relative;
+        }
+        > div:nth-of-type(1):hover {
+          color: $theme_color;
+          cursor: pointer;
+        }
+        > div:nth-of-type(2) {
+          border: 1px solid $theme_color;
+          line-height: 24px;
+          display: flex;
+          text-align: center;
+
+          span:nth-child(1) {
+            color: #fff;
+            font-size: 16px;
+            width: 92px;
+            background-color: $theme_color;
+            position: relative;
+            &::before {
+              content: " ";
+              width: 0;
+              height: 0;
+              border-color: transparent white transparent transparent;
+              border-style: solid;
+              border-width: 24px 8px 0 0;
+              position: absolute;
+              top: 0;
+              left: 84px;
+            }
+          }
+
+          span:nth-child(2) {
+            color: #999;
+            width: 66px;
+            text-decoration: line-through;
+          }
+        }
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file