<template>
  <div class="logo">
    <img src="@/assets/vue.svg" alt="xxxx后台系统" />
    <p
      style="margin-left: 20px"
      :class="{ logoItem: props.collapsed ? true : false }"
    >
      智慧食堂系统
    </p>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false,
  },
});
</script>
<style lang="scss" scoped>
.logo {
  height: 50px;
  width: 100%;
  color: black;
  padding: 20px;
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #ccc;
  transition: all 0.3s;
  img {
    width: 30px;
    height: 30px;
  }
  p {
    font-size: 18px;
    transition: all 1.2s;
  }
  .logoItem {
    color: #fff;
    transition: none;
  }
}
</style>
