<template>
  <div :class="classObj" class="app-wrapper">
    <div class="top-container">
      <login-header hidden-logo>
        <el-image slot="prefix" :src="require('@/assets/logo/logo.png')" fit="contain" style="height: 24px;" class="mr5" /></login-header>
      <login-menus :style-variables="menuOverride" show-pay-by-need />
    </div>
    <div class="main-container" :class="{'has-width': !isWideScreen}">
      <div :class="{ 'fixed-header': fixedHeader }" />
      <app-main>
        <slot v-if="$slots.default" />
      </app-main>
    </div>
  </div>
</template>

<script>
import Layout from '@/layout/index'
import LoginHeader from '@/views/login/components/LoginHeader'
import LoginMenus from '@/views/login/components/LoginMenus'

export default {
  name: 'Simple',
  components: { LoginMenus, LoginHeader },
  extends: Layout,
  data() {
    return {
      menuOverride: {
        // '--vsMenuActiveColor': '#ACACAC',
        // '--vsMenuBgColor': '#BDBDBD',
        '--vsMenuFontSize': '15px',
        '--vsMenuFontWeight': '400',
        // '--vsMenuColor': '#333333',
        '--vsSubmenuFontSize': '14px',
        '--vsSubmenuFontWeight': '400'
        // '--vsSubmenuColor': '#333333'
        // '--vsPopMenuBgColor': '255,255,255,0.9'
      }
    }
  }
}
</script>

<style scoped>

</style>
