qp_onemap_ui/src/components/AppVue/digitalScrollersComp.vue

<template>
  <div class="count-flop" :key="compKey">
    <!--  -->
    
      <div
        :class="item !== ',' ? 'count-flop-box' : 'count-flop-point'"
        v-for="(item, index) in value"
        :key="index"
      >
        <div>
        <div v-if="item !== ','" class="count-flop-content" :class="['rolling_' + item]">
          <div v-for="(item2, index2) in numberList" :key="index2" class="count-flop-num">
            {{ item2 }}
          </div>
        </div>
        <div v-else class="count-flop-content">,</div>
        </div>
      </div>
    <!--  -->
    <div v-if="suffix" class="count-flop-unit">{{ suffix }}</div>
  </div>
</template>
 
<script setup>
import { ref, watch, onMounted } from 'vue'
 
const props = defineProps({
  val: {
    type: [Number, String],
    default: 0,
  },
  suffix: {
    type: String,
    default: "",
  },
});
 
// Data
const value = ref([]);
const numberList = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
const compKey = ref(0);
 
// Watcher
watch(
  () => props.val,
  (newVal) => {
    value.value = newVal.toString().split("");
    compKey.value += 1;
  },
  { immediate: true },
);
</script>
 
<style scoped>
.count-flop {
  display: inline-block;
  font-size: 0;
  /* 可更改 */
  height: 80px;
  line-height: 80px;
  font-size: 50px;
  font-weight: 700;
  color: #ffffff;
}
 
.count-flop > div {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 100%;
}
 
.count-flop-box {
  /* 可更改 */
  margin-right: 5px;
  width: 60px;
  color: #ffffff;
  /* background-color: rgba(6, 41, 78, 0.7); */
  border: 1px solid #2663a5;
  /* box-shadow: 0 2px 5px #2663a5; */
  /* line-height: 98px; */
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(128deg, #00002d, #2220), linear-gradient(136deg, #e5e5e5de, #00000000, #00000000, #00000000);
}

.count-flop-point {
  /* 可更改 */
  margin-right: 5px;
  width: 15px;
}
 
.count-flop-content {
  font-family: 'din-bold';
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  animation-fill-mode: forwards !important;
}
.rolling_0 {
  animation: rolling_0 2.1s ease;
}
 
@keyframes rolling_0 {
  from {
    transform: translateY(-90%);
  }
  to {
    transform: translateY(0);
  }
}
 
.rolling_1 {
  animation: rolling_1 3s ease;
}
 
@keyframes rolling_1 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}
 
.rolling_2 {
  animation: rolling_2 2.1s ease;
}
 
@keyframes rolling_2 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-20%);
  }
}
 
.rolling_3 {
  animation: rolling_3 3s ease;
}
 
@keyframes rolling_3 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-30%);
  }
}
 
.rolling_4 {
  animation: rolling_4 2.1s ease;
}
 
@keyframes rolling_4 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-40%);
  }
}
 
.rolling_5 {
  animation: rolling_5 3s ease;
}
 
@keyframes rolling_5 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
 
.rolling_6 {
  animation: rolling_6 2.1s ease;
}
 
@keyframes rolling_6 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-60%);
  }
}
 
.rolling_7 {
  animation: rolling_7 3.1s ease;
}
 
@keyframes rolling_7 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-70%);
  }
}
 
.rolling_8 {
  animation: rolling_8 2.1s ease;
}
 
@keyframes rolling_8 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-80%);
  }
}
 
.rolling_9 {
  animation: rolling_9 3.6s ease;
}
 
@keyframes rolling_9 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-90%);
  }
}
 
/* 其他 rolling_X 动画略 */
</style>