gaoyixia-pc/src/components/module/to-next.vue

<template>
  <div
    class="to-next"
    :style="{ left: btnLeft + 'px' }"
    @click="$emit('toNext')"
  >
    <img src="@/assets/icon/next_unread.png" alt="" />
    <span>下一条未读</span>
  </div>
</template>

<script>
export default {
  name: "ToNext",
  data() {
    return {
      btnLeft: 0,
      btnRight: 8 + 50 + 200,
    };
  },
  mounted() {
    this.btnLeft = window.innerWidth - this.btnRight;
    this.$resizeListenerList.push(this.setBtnLeft);
  },
  methods: {
    setBtnLeft() {
      this.btnLeft = window.innerWidth - this.btnRight;
    },
  },
};
</script>

<style lang="scss" scoped>
.to-next {
  width: 200px;
  height: 60px;
  background: #ffffff;
  border-radius: 40px;
  border: 1px solid #0054f7;
  position: fixed;
  bottom: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
  img {
    width: 14px;
    height: 14px;
  }
  span {
    font-size: 18px;
    font-weight: 500;
    color: #0054f7;
    margin-left: 10px;
  }
}
</style>