vue项目中实现倒计时预约功能

// 定时器，每隔 1秒 更新倒计时时间戳
const timer = setInterval(() => {
        data.forEach(item=>{
          // openingTime 是开放预约的时间
          item.cutdown = new Date(item.openingTime) - new Date()
          // this.countTime() 是在外面定义的时间格式
          item.time = this.countTime(item.cutdown)
          // 强制刷新局部页面
          this.$forceUpdate()
        })
      }, 1000);

vue项目中实现响应式布局

页面简单布局

 <section>
      <div class="a1">
        <img class="img" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.GyHQ3ZTofq42cHHbd8UPjQHaEd?w=249&h=180&c=7&r=0&o=5&pid=1.7" alt="">
      </div>
      <div class="a2">
        <img class="img" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.dlwQZWvbkuoa9GMjO-6kfgHaEK?w=268&h=180&c=7&r=0&o=5&pid=1.7" alt="">
      </div>
      <div class="a3">
        <img class="img" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.yi2QHdUQ_pLO9USL6plo0gHaFP?w=258&h=182&c=7&r=0&o=5&pid=1.7" alt="">
      </div>
      <div class="a4">
        <img class="img" src="https://tse3-mm.cn.bing.net/th/id/OIP-C.J_-O1Wr-9VMxptQ4f70w-QHaEK?w=290&h=180&c=7&r=0&o=5&pid=1.7" alt="">
      </div>
    </section>

css样式

<style>
.img{
  width: 100%;
  height: 100%;
}

.a1,.a2,.a3,.a4{
  width: 23%;
  height: 300px;
  float: left;
  margin-left: 2%;
}
1. //*屏幕尺寸大于1200px时*
@media only screen and (max-width:1200px){
     .a1,.a2,.a3,.a4{
         width: 23%;
      }
}
2. //屏幕储存在320-768之间时
@media only screen and (max-width:768px){
  .a1,.a2,.a3,.a4{
      width: 47%;
   }
}
3. //屏幕储存在小于320时
@media only screen and (max-width:320px){
  .a1,.a2,.a3,.a4{
      width: 100%;
   }
}
</style>