Login.vue

<template>
<div class="login">
  <div class="login_button_area">
    <p>
      <img src="../../assets/zum-logo.png" alt="zum logo">
      <span>쇠파이프에 로그인하기</span>
    </p>
    <a v-bind:href="contextPath">
      <img id="btnLogin" src="../../assets/google_login.png" alt="로그인 버튼">
    </a>
    <div class="info">
      <span>권한 문의</span>
      <ul>
        <li>박승권: <a href="mailto:[email protected]">[email protected]</a></li>
        <li>조우현: <a href="mailto:[email protected]">[email protected]</a> </li>
      </ul>
    </div>

  </div>
</div>
</template>

<script>
  export default {
    name: 'login',
    created () {

    },
    data () {
      let baseDir = 'http://local.zum.com:8080'
      return {
        'contextPath': 'http://guardian.zum.com:8080/auth?callback=' + baseDir + '/authentication'
      }
    }
  }
</script>

<style scoped lang="scss">
  $login-background-color: #333;
  $login-font-color: #fff;
  .login {
    display: table;
    position: absolute;
    top: 0px;
    width: 100%;
    background-color: $login-background-color;
    min-height: 100vh;
    .login_button_area {
      display: table-cell;
      vertical-align: middle;
      color: $login-font-color;
      > p {
        font-size: 1.5em;
        vertical-align: middle;
        > span {
          margin-bottom: 10px;
        }
      }

      a {
        vertical-align: middle;
      }
    }
  }
  body {
    background-color: $login-background-color;
  }
  .info {
    margin-top: 20px;
    span {
      font-size: 3em;
    }
    ul {
      li {
        display: block;
      }
    }
  }

</style>