<template>
  <div class="page-index">
    <div class="logo">
      <img alt="logo" src="/img/logo.svg" />
    </div>
    <div class="content">
      欢迎使用<span class="name">{{ appName }}</span
      >组件库
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      appName: process.env.VUE_APP_NAME,
    };
  },
};
</script>

<style lang="scss">
@import '@/styles/variables.scss';

.page-index {
  width: 100%;
  text-align: center;
  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 150px;
    img {
      width: 240px;
    }
  }
  .content {
    padding-top: 50px;
    font-size: 20px;
    .name {
      font-size: 24px;
      padding: 0px 10px;
      color: $primary;
    }
  }
}
</style>
