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

最近在做公司项目的首页页面，有个首页右下角意见反馈功能以及notice轮播效果，这里做个记录，与大家分享。
首先，UI图长下面这样，移入和移出有个淡入淡出的动效：

Notice轮播长这样：

一、首页右下角意见反馈

HTML

<!-- 右下角app下载 -->
    <div class="right-bottom">
      <div class="app-img">
        <div class="flex-column app-img-big">
          <div class="app-code">
            <img v-if="isProEnv" src="../../../static/img/index/app-procode.png" alt="机器人作业管理APP" />
            <img v-if="!isProEnv" src="../../../static/img/index/app-code.png" alt="机器人作业管理APP" />
          </div>
          <p class="app-label">机器人作业管理APP(安卓)</p>
          <a
            href="https://pan.countrygarden.com.cn/file/cypstdvdbog3bdtej9x58p68jj04cg9o"
            target="_blank"
            class="app-info-url"
          >APP使用文档</a>
        </div>
      </div>
      <div class="app-advice">
        <div class="app-advice-big">
          <a href="https://wj.qq.com/s2/5153705/d427/" target="_blank" class="advice-url">系统意见反馈</a>
        </div>
      </div>
    </div>

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/[e-mail]') 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/[e-mail]') 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

<div class="top-tip flex-row" v-if="marqueeList.length > 0">
        <i class="tip-icon"></i>
        <div
          class="marquee-box"
          @mouseenter="activeMarquee(false)"
          @mouseleave="activeMarquee(true)"
        >
          <ul class="marquee-list" :class="{'marquee-top':animate}">
            <li v-for="(item,index) in marqueeList" :key="index" @click="clickNotice(item)">
              <span class="tip-max-width text-overflow">{{item.title}}</span>
            </li>
          </ul>
        </div>
      </div>

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/[e-mail]')
          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;
            }
          }
        }
      }
    }

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