<template>
  <view class="charge-icon" :class="[`charge-icon-${type}`]">
    {{ type ? label[type] : "" }}
  </view>
</template>

<script lang="ts">
export default {
  props: {
    type: {
      type: String,
    },
  },
  data() {
    return {
      label: {
        fast: "快",
        slow: "慢",
      },
    };
  },
};
</script>

<style lang="scss">
.charge-icon {
  height: 32rpx;
  width: 32rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 20rpx;
  color: #fff;
}

.charge-icon-fast {
  background: linear-gradient(154.59deg, #ffe767 11.86%, #f2751a 87.4%);
}

.charge-icon-slow {
  background: linear-gradient(154.59deg, #5ff19a 11.86%, #1aa4f2 87.4%);
}
</style>
