首页右下角意见反馈弹框+Notice轮播

最近在做公司项目的首页页面,有个首页右下角意见反馈功能以及notice轮播效果,这里做个记录,与大家分享。
首先,UI图长下面这样,移入和移出有个淡入淡出的动效:
首页右下角意见反馈弹框+Notice轮播_第1张图片

一、首页右下角意见反馈

HTML


    
机器人作业管理APP 机器人作业管理APP

机器人作业管理APP(安卓)

APP使用文档

CSS

.right-bottom {
  .app-img {
    text-align: center;
    transition: all 0.4s ease-in-out;
    position: absolute;
    right: 0;
    bottom: 1rem;
    width: 1rem;
    height: 0.72rem;
    background: url('../../../static/img/index/icon_qrcode@2x.png') no-repeat
      rgba(0, 0, 0, 0.6);
    background-size: 16px 16px;
    background-position: center center;
    border-radius: 0.08rem;
    cursor: pointer;
    margin-bottom: 2px;
    .app-img-big {
      display: none;
    }
    &:hover {
      .app-img-big {
        display: block;
        color: #ffffff;
      }
      background: url('') no-repeat rgba(0, 0, 0, 0.6);
      bottom: 1rem;
      width: 3.12rem;
      height: 3.8rem;
      .app-code img {
        margin-top: 10px;
        width: 80px;
        height: 80px;
      }
      .app-label {
        width: 120px;
        margin: 0 auto;
      }
      .app-info-url {
        margin-top: 5px;
        color: #4a8dfd;
        text-decoration: underline;
      }
    }
  }
  .app-advice {
    text-align: center;
    transition: width 0.4s ease-in-out;
    position: absolute;
    right: 0;
    bottom: 0.3rem;
    width: 1rem;
    height: 0.72rem;
    background: url('../../../static/img/index/icon_advice@2x.png') no-repeat
      rgba(0, 0, 0, 0.6);
    background-size: 16px 16px;
    background-position: center center;
    border-radius: 0.08rem;
    cursor: pointer;
    .app-advice-big {
      display: none;
    }
    &:hover {
      background: url('') no-repeat rgba(0, 0, 0, 0.6);
      width: 3.12rem;
      .app-advice-big {
        display: block;
        color: #ffffff;
        .advice-url {
          height: 0.72rem;
          line-height: 0.72rem;
          font-family: PingFangSC-Medium;
          text-decoration: underline;
          font-size: 0.28rem;
        }
      }
    }
  }
}

二、Notice轮播

HTML

  • {{item.title}}

JS

    // 是否激活notice轮播
    activeMarquee(isMarquee) {
      console.log('isMarquee', isMarquee)
      if (isMarquee && this.marqueeList.length > 1) {
        this.noticeTimer = setInterval(this.showMarquee, 5 * 1000)
      } else {
        clearInterval(this.noticeTimer)
      }
    },
    // 鼠标移入点击跳转
    clickNotice(item) {
      this.$router.push({
        name: 'SystemDocumentDETAIL',
        query: { id: item.id }
      })
    },
    // 轮播逻辑
    showMarquee() {
      if (this.marqueeList.length === 1) {
        clearInterval(this.noticeTimer)
      } else {
        this.animate = true
        setTimeout(() => {
          this.marqueeList.push(this.marqueeList[0])
          this.marqueeList.shift()
          this.animate = false
        }, 500)
      }
    },

CSS

.top-tip {
      height: 0.56rem;
      padding: 0.2rem;
      background-color: rgba(74, 141, 253, 0.1);
      border-radius: 0.28rem;
      .tip-icon {
        width: 16px;
        height: 16px;
        margin-right: 5px;
        background: url('../../../static/img/index/icon_notice@2x.png')
          no-repeat center center;
        background-size: 100% 100%;
      }
      .marquee-box {
        display: block;
        position: relative;
        width: 9rem;
        height: 0.56rem;
        overflow: hidden;
        .marquee-top {
          transition: all 0.5s;
          margin-top: -13px;
        }
        .marquee-list {
          display: block;
          position: absolute;
          top: -13px;
          left: 0;
          padding: 0;
          li {
            font-family: PingFangSC-Regular;
            list-style: none;
            font-size: 0.28rem;
            color: rgba(51, 51, 51, 1);
            height: 0.56rem;
            line-height: 0.56rem;
            padding-left: 5px;
          }
          &:hover {
            cursor: pointer;
            li span {
              text-decoration: underline;
            }
          }
        }
      }
    }

其实比较简单,这里做个记录,分享给大家。

你可能感兴趣的