aiot-app/pages/hr/components/ModuleIcon.vue

<template>
  <view class="module-icon" :style="iconStyle">
    <text>{{ icon }}</text>
  </view>
</template>

<script>
export default {
  name: "HrModuleIcon",
  props: {
    icon: { type: String, default: "" },
    color: { type: String, default: "#157a2c" },
    soft: { type: Boolean, default: false },
  },
  computed: {
    iconStyle() {
      return {
        backgroundColor: this.soft ? this.color + "18" : this.color,
        color: this.soft ? this.color : "#fff",
      };
    },
  },
};
</script>

<style scoped lang="scss">
.module-icon {
  width: 82rpx;
  height: 82rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 31rpx;
  font-weight: 600;
}
</style>