iot-front-ui/src/components/dashboard/commonFuncManage/function.vue

<template>
  <div class="function-btn" :style="functionBtnStyle">
    <div class="function-title">{{ item.name }}</div>
    <div class="function-icon">
      <a-avatar
        v-if="item.icon === '单点登录.png'"
        class="function-avatar-small"
        shape="square"
        size="small"
        :src="requireImg('functionColor/' + item.icon)"
      ></a-avatar>
      <a-avatar
        v-else
        class="function-avatar"
        shape="square"
        size="large"
        :src="requireImg('functionColor/' + item.icon)"
      ></a-avatar>
    </div>
    <div class="function-btn-opr" v-if="type == -1" @click="minusFunction(item)">
      <span class="anticon">
        <svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
            fill="#cd2a2a"
            stroke="#cd2a2a"
            stroke-width="4"
            stroke-linejoin="round"
          />
          <path d="M16 24L32 24" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </span>
    </div>
    <div class="function-btn-opr" v-if="type === 1" @click="plusFunction(item)">
      <span class="anticon">
        <svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
            fill="#2ea8e6"
            stroke="#2ea8e6"
            stroke-width="4"
            stroke-linejoin="round"
          />
          <path d="M24 16V32" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
          <path d="M16 24L32 24" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </span>
    </div>
  </div>
</template>

<script>
import { requireImg } from "@/utils/requireImg";

export default {
  methods: { requireImg },
  data() {
    return {
      functionBtnStyle: {
        backgroundColor: ""
      }
    };
  },
  props: {
    item: Object,
    type: Number,
    title: String,
    icon: String,
    plusFunction: Function,
    minusFunction: Function
  },
  mounted() {
    if (this.type == -1) {
      this.functionBtnStyle.backgroundColor = "#f2f2f2";
      this.functionBtnStyle.cursor = "default";
    } else if (this.type == 1) {
      this.functionBtnStyle.backgroundColor = "#f7fcff";
      this.functionBtnStyle.cursor = "default";
    }
  }
};
</script>

<style lang="less" scoped>
.function-btn {
  width: 95%;
  height: 40px;
  margin: 10px 10px;
  position: relative;
  cursor: pointer;
  border: 1px solid #e5f2ff;
  box-shadow: 0px 1px 5px 0px rgba(223, 229, 235, 0.5);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  .function-icon {
    margin-left: 10%;
    display: inline-block;
    .function-avatar {
      width: 30px;
      height: 30px;
    }
    .function-avatar-small {
      width: 20px;
      height: 20px;
    }
  }
  .function-title {
    width: 55%;
    line-height: 20px;
    vertical-align: middle;
    display: inline-block;
    //margin-top: 20px;
    margin-left: 5%;
    font-size: 16px;
    letter-spacing: 1px;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .function-btn-opr {
    position: absolute;
    top: -8px;
    right: -5px;
    cursor: pointer;
  }
}
.function-btn:hover {
  background-color: #f2f9ff;
}
</style>