diantou/src_product/iam/audit/workbench/quicknav/iam-quick-link.vue

<template>
  <div :class="$style.worklink" :title="name" @click="open">
    <div :class="$style.linkblock">
      <span>
        <sd-icon v-if="icon" :type="JSON.parse(icon).name" :theme="JSON.parse(icon).theme" /><em>{{
          name
        }}</em>
      </span>
    </div>
  </div>
</template>

<script>
import components from './_import-components/iam-quick-link-import'

export default {
  name: 'IamQuickLink',
  components,
  props: {
    name: {
      type: String,
      default: '',
    },
    url: {
      type: String,
      default: undefined,
    },
    icon: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    open() {
      // 以 sd-ssologin 为首的单点登录
      if (this.url.startsWith('/sd-ssologin')) {
        const newWindow = window.open(this.url.split('=')[1], '_blank')
        newWindow.opener = null
        return
      }
      this.$router.push(this.url)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.theme {
  color: $primary-3;
}
/* stylelint-disable  */

main[class*='oa-home'] .worklink {
  height: calc((50vh - 282px) / 3);
  min-height: 38px;
  margin-top: 9px;
}
/* stylelint-enable */
.worklink {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  justify-content: space-evenly;
  width: 30%;
  height: 70px;
  margin-top: $padding-md;
  cursor: pointer;
  background: $layout-body-background;
  border: $border-width-base $border-style-base $border-color-base;
  border-radius: $border-radius-base * 1.25;
  .linkblock {
    display: grid;
    width: 100%;
    padding: 0 15px;
  }
  span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    em {
      font-style: normal;
    }
  }
  i {
    margin-right: 5px;
    font-size: $font-size-base * 1.25;
  }
}
</style>