<script>
import Manage from '@/components/icon/aside_manage.vue'
import Product from '@/components/icon/aside_product.vue'
import Volume from '@/components/icon/aside_volume.vue'

export default {
  components: { Manage, Product, Volume },
  props: {
    isPB80: {
      default: false
    }
  }
}
</script>

<template>
  <div class="w-480px pt-28px pb-141px bg-[#F5FAFF] aside-bg rounded-l-16px" :class="{ 'IS-PB80': isPB80 }">
    <img src="@/assets/images/PDF_logo.png" alt="logo" class="w-251px px-28px">
    <slot name="title">
      <div class="mt-74px font-500 text-24px leading-36px px-80px text-[#101828]">Welcome to <br /> Admin
        Console</div>
    </slot>
    <slot name="desc">
    </slot>
    <div class="mt-56px px-80px">
      <div class="flex items-center font-500 text-[#101828] text-18px leading-28px">
        <Product class="mr-12px" />
        Product Usage Overview
      </div>
      <div class="mt-8px ml-36px text-[#888C94] text-[16px] leading-24px">
        Take a glance at the usage of licenses and product information.
      </div>
      <div class="flex items-center font-500 text-[#101828] text-18px leading-28px mt-36px">
        <Manage class="mr-12px" />
        Manage License Flexibly
      </div>
      <div class="mt-8px ml-36px text-[#888C94] text-[16px] leading-24px">
        Quickly assign, remove or unbind licenses for team members.
      </div>
      <div class="flex items-center font-500 text-[#101828] text-18px leading-28px mt-36px">
        <Volume class="mr-12px" />
        Volume Discount
      </div>
      <div class="mt-8px ml-36px text-[#888C94] text-[16px] leading-24px">
        Bulk purchases can get a significant discount that is up to 50% OFF.
      </div>
    </div>
  </div>
</template>

<style scoped>
.IS-PB80 {
  padding-bottom: 80px;
}

.aside-bg {
  background: #e7eaee url('@/assets/images/aside_bg.png') center center/100% 100% no-repeat;
}
</style>