弧形背景和倒计时优化

最新推荐文章于 2024-07-31 08:47:47 发布

sir.山

最新推荐文章于 2024-07-31 08:47:47 发布

阅读量211

点赞数

分类专栏： css js vue 文章标签： vue css3

本文链接：https://blog.csdn.net/qq_30109365/article/details/109186160

版权

js 同时被 3 个专栏收录

38 篇文章

订阅专栏

vue

16 篇文章

订阅专栏

css

9 篇文章

订阅专栏

弧形背景

.pure_top {
 width: 100%;
  height: 100px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.pure_top::after {
  content: '';
  width: 120%;
  height: 100px;
  position: absolute;
  left: -10%;     //椭圆左边隐藏10%，右边隐藏10%
  top: 0;
  border-radius: 0 0 50% 50%;  //左上角，右上角，右下角，左下角
  background: #1496f1;
}

在这里插入图片描述

倒计时优化

data(){
	wishCountDown : ''
},
mounted () {
   const timer = setInterval(() => {
     this.wishCountDown = parseInt(this.wishCountDown) - 1
     if (this.wishCountDown <= 0) {
       clearInterval(timer)
     }
   }, 1000)
   this.$once('hook:beforeDestroy', () => {
     clearInterval(timer)
   })
 },