<template>
  <div class="si-t">
     <div :style="{'--opacity':item.opacity} " v-for="item in arrowList" :key="item.opacity" class="arrow-item"></div>
  </div>
</template>

<script>
export default {
  name: "ArrowList",
  data() {
    return {
      arrowList:[
        {
          opacity:0.1
        },
        {
          opacity:0.2
        },
        {
          opacity:0.3
        },
        {
          opacity:0.4
        },
        {
          opacity:0.5
        },
        {
          opacity:0.7
        },
        {
          opacity:0.9
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">

 .si-t{
   //--opacity:1;
   display: flex;
   .arrow-item{
     width: 8px;
     height: 8px;
     border:2px solid #0080ff;
     border-color:#0080ff #0080ff transparent transparent ;
     transform: rotate(45deg);
     opacity: var(--opacity);
   }
 }
</style>