<style lang="less" scoped>
  @import './Index.less';
</style>

<template>
  <div id="login" class="login backdrop-light">
    <div class="login-body">      
      <div class="center-box">
        <img style="width:33%;" src="@/assets/mark.svg"/>
        <h2 style="color:#c5b381e0;">歡迎來到醍摩豆雲平台 ！ 請選擇您的身分進行登入 ！</h2>
        <Row style="margin-top: 50px;">
          <Col :span="12" style="border-right: 1px solid #fff;">
            <div style="width: 450px;margin: auto;">         
              <div style="padding: 5px 0;" >                
                <h1 style="color: #fefefe;font-weight: 100;display: inline-block;vertical-align: middle;">教師身分登入 | </h1>
                <div style="display: inline-block;vertical-align: middle;">
                  <a style="margin: 0 10px;"><img style="width: 30px;" src="@/assets/image/touxiang.png"></a>
                  <a style="margin: 0 10px;"><img style="width: 30px;" src="@/assets/image/touxiang.png"></a>
                  <a style="margin: 0 10px;"><img style="width: 30px;" src="@/assets/image/touxiang.png"></a>
                </div>
              </div>
              <div style="padding: 5px 0;" >
                <Input v-model="value" placeholder="醍摩豆帳號" />
              </div>
              <div style="padding: 5px 0;" >
                <Input v-model="value" placeholder="密碼"/>
              </div>
              <div style="padding: 1px 0;" >
                <Checkbox v-model="single" style="color: #fefefe;">記住我的登入資訊</Checkbox><a>  | 忘記帳號/密碼?</a>
              </div>
              <div style="padding: 5px 0;text-align: right;" >
                <Button style="width: 150px;background-color: #082835;color:#fefefe;">登入</Button>
              </div>
            </div>
          </Col>
          <Col :span="12">
            <div style="width: 450px;margin: auto;">         
              <div style="padding: 5px 0;" >                
                <h1 style="color: #fefefe;font-weight: 100;display: inline-block;vertical-align: middle;">學生身分登入 | </h1>
                <div style="display: inline-block;vertical-align: middle;">
                  <a style="margin: 0 10px;"><img style="width: 30px;" src="@/assets/image/touxiang.png"></a>
                  <a style="margin: 0 10px;"><img style="width: 30px;" src="@/assets/image/touxiang.png"></a>
                  <a style="margin: 0 10px;"><img style="width: 30px;" src="@/assets/image/touxiang.png"></a>
                </div>
              </div>
              <div style="padding: 5px 0;" >
                <Input v-model="value" placeholder="醍摩豆帳號" />
              </div>
              <div style="padding: 5px 0;" >
                <Input v-model="value" placeholder="密碼"/>
              </div>
              <div style="padding: 1px 0;" >
                <Checkbox v-model="single" style="color: #fefefe;">記住我的登入資訊</Checkbox><a>  | 忘記帳號/密碼?</a>
              </div>
              <div style="padding: 5px 0;text-align: right;" >
                <Button style="width: 150px;background-color: #082835;color:#fefefe;">登入</Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    </div>
    <div class="login-footer">
      <h2 class="footer-title">
        相關連結
      </h2>
      <a class="link">AClassONE智慧學伴網頁版</a><span class="demarcation">&nbsp;&nbsp;|&nbsp;&nbsp;</span><a class="link">AClassONE智慧學伴網頁版</a><span class="demarcation">&nbsp;&nbsp;|&nbsp;&nbsp;</span><a class="link">AClassONE智慧學伴網頁版</a>
      <h5 style="position: absolute;bottom:0;width: 100%;padding: 7px;color: #515a6e;">&copy; HABOOL Group 2019</h5>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods:{
    
  }
}
</script>