devicesmgt/sgzb-screen/src/components/home/countFlopTwo.vue

<template>
  <div class="count-title">
    <p>{{ sonTitle }}</p>
    <div class="count-flop" :key="compKey" @click="handleClick">
      <div
        :class="item != ',' ? 'count-flop-box' : 'count-flop-point'"
        v-for="(item, index) in value"
        :key="index"
      >
        <div
          v-if="item != ',' && 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-if="item == '-'" class="count-flop-content">-</div>
        <div v-else class="count-flop-content">,</div>
      </div>
      <div v-if="suffix" class="count-flop-unit">{{ suffix }}</div>
    </div>

    <returnMaterialsDialog ref="returnMaterialsDialog"></returnMaterialsDialog>
  </div>
</template>
<script>
import returnMaterialsDialog from './returnMaterialsDialog'

export default {
  components: {
    returnMaterialsDialog
  },
  name: 'countFlop',
  data() {
    return {
      value: [],
      numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      compKey: 0
    };
  },
  props: ["val", "suffix", 'sonTitle'],
  watch: {
    val() {
      this.value = this.val.toString().split("");
      this.compKey += 1;
    }
  },
  mounted() {
    this.value = this.val.toString().split("");
  },
  methods: {
    handleClick(val) {
      const params = {
        open: true,
        maType: val
      }
      this.$refs.returnMaterialsDialog.setOpen(params);
    }
  }
};
</script>
<style scoped lang="scss">
@font-face {
  font-family: 'electronicFont';
  src: url('../../assets/css/DS-Digital/DS-DIGI-1.ttf');
}
.count-title {
  font-size: 18px;
  color: #f7b500;
  font-weight: 500;
  letter-spacing: 2px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  line-height: 21px;
  margin-left: 31px;
}
.count-flop {
  display: inline-block;
  height: 56px;
  line-height: 56px;
  font-size: 48px;
  color: #4898f1;
  font-weight: bold;
  text-align: center;
  color: aqua;
  cursor: pointer;
}

.count-flop > div {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 100%;
}

.count-flop-box {
  /* 可更改 */
  /* width: 3.5vh;
  border: 1px solid rgba(72, 152, 241, 0.3);
  box-shadow: inset 0 0 0.6rem #69b1ff;
  border: 2px solid #66bef4;
  margin: 0.15vw; */
  width: 49px;
  height: 56px;
  background: url(../../assets/img/myImage/number_box_two.png) no-repeat center;
  background-size: 100% 100%;
  color: #fff;
}
.count-flop-box:nth-child(n + 2) {
  margin-left: 8px;
}

.count-flop-point {
  width: 22px;
  height: 56px;
  margin: 0 9px;
  font-weight: 400;
  color: #ffffff;
  line-height: 56px;
}

.count-flop-content {
  font-family: MicrosoftYaHei-Bold;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  animation-fill-mode: forwards !important;
  color: #fff;
  font-size: 48px;
  font-family: electronicFont;
  font-weight: bold;
}

.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%);
  }
}
</style>