# css フルースクリンの背景画像と透けるログイン画面

<template>
  <div>
    <img src="/bg.jpg" id="full-screen" class="overflow-hidden" />
    <center>
      <b-card class="my-login">
        <b-form-group label="ID" label-for="loginID" label-class="text-left">
          <b-form-input v-model="payload.customer_code" required id="loginID" />
        </b-form-group>
        <b-form-group label="Password" label-for="loginPW" label-class="text-left">
          <b-form-input type="password" v-model="payload.mypage_pass" required id="loginPW" />
        </b-form-group>
        <div>
          <b-button
            @click.prevent="submitForm"
            :disabled="processing"
            :class="{'animated shake':error}"
            variant="primary"
          >ログイン</b-button>
        </div>
      </b-card>
    </center>
    <b-img class="content p-1" src="/logo.png" fluid-grow />
  </div>
</template>