castgroup_bigscreen/src/components/alarm.vue

<!--
 * @LastEditors: gcz
-->
<template>
    <div class="alarm-wrap">
        <div class='alarm'>
            <div class="alarm-con u-flex">
                <img src="../assets/img/gaojing.png" alt="">
                <div class="g-container">
                <ul :style="{'--s': alarmNum}">
                    <li v-for="(item) in data" :key="item.id">{{item.content}}</li>
                    <!--末尾补一个首条数据-->
                    <li>{{data[0].content}}</li>
                </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: '',
        props:{
            data:{
                type: Array,
                default: null,
            },
        },
        components: {},
        data () {
            return {
                alarmNum:this.data.length,
            };
        },
        created(){},
        methods: {},
    }
</script>

<style lang='scss' scoped>
.alarm-wrap{
position: fixed;
    left: 0;
    right: 0;
    top: calc( var(--header-height) + 34px + 40px );
}
.alarm {
     position: relative;
     width: 30vw;
     margin: 0 auto;
     border: 1px solid rgba(186, 25, 25, 0.17);
     height: 2.998501rem;
     background: rgba(186, 25, 25, 0.17);
     backdrop-filter: blur(6px);
     &::before {
         position: absolute;
         top: 0;
         left: 0;
         content: "";
         width: 10px;
         height: 10px;
         border-top: 2px solid #f33c52;
         border-left: 2px solid #f33c52;
       }
       &::after {
         position: absolute;
         top: 0;
         right: 0;
         content: "";
         width: 10px;
         height: 10px;
         border-top: 2px solid #f33c52;
         border-right: 2px solid #f33c52;
       }
       .alarm-con{
         position: absolute;
         left: 0;
         bottom: 0;
         width: 100%;
         height: 100%;
         img{
            width: 150px;
            border-radius: unset;
            cursor: default;
            pointer-events: auto;
            animation-name: imageAnimation;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-duration: 2s;
            animation-delay: 0s;
            -webkit-user-drag: none;
            filter: brightness(120%);
         }
         &::before {
           position: absolute;
           bottom: 0;
           left: 0;
           content: "";
           width: 10px;
           height: 10px;
           border-bottom: 2px solid #f33c52;
           border-left: 2px solid #f33c52;
         }
         &::after {
           position: absolute;
           bottom: 0;
           right: 0;
           content: "";
           width: 10px;
           height: 10px;
           border-bottom: 2px solid #f33c52;
           border-right: 2px solid #f33c52;
         }
       }
}
@keyframes imageAnimation {
    0% {
        opacity: 1;
        transform: none;
    }
    50% {
        opacity: 0.3;
        transform: none;
    }
    100% {
        opacity: 1;
        transform: none;
    }
}



.g-container {
  width: 100%;
  // margin: auto;
  height: calc(var(--h) * 1px);
  line-height: calc(var(--h) * 1px);
//   font-size: 20px;
  background: transparent;
  color: #fff;
  overflow: hidden;
}
ul {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

ul li {
  flex-shrink: 0;
  width: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  list-style:none;
  margin: 0;
  padding: 0;
}
ul {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}

ul li {
  flex-shrink: 0;
  width: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  text-align: left;
}

ul {
  animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}

ul li {
  white-space: nowrap;
  cursor: pointer;
  animation: liMove calc(var(--speed)) infinite;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, calc(var(--s) * var(--h) * -1px));
  }
}

@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  60%,
  100%  {
    transform: translate(0, calc(var(--h) * -1px));
  }
}
</style>