<template>
  <div id="login">
    <img class="logo-img" :src="imagesUrl('commonality/logo%401x.png')">
    <p class="title-1">欢迎使用</p>
    <p class="title-2">实验室安全智慧化管控系统</p>
    <p class="null-p"></p>
    <img class="login-img" :src="imagesUrl('commonality/img_tyrzdl_ch%402x.png')">
    <p class="ssoButton" @click="goPage('ssoLogin')">统一身份认证登录</p>
    <p class="accountButton" @click="goPage('accountLogin')">账号密码登录</p>
    <p class="position-top-right-box"></p>
    <p class="position-bottom-left-box"></p>
  </div>
</template>

<script>
  export default {
    name: "ssoLogin",
    data() {
      return {

      }
    },
    onLoad(option) {

    },
    mounted() {
      localStorage.setItem('loginH5','true')
    },

    methods: {
      imagesUrl(imgUrl) {
        return 'https://zj-wechat.oss-cn-beijing.aliyuncs.com/xcx_images/xcx_v3/' + imgUrl
      },
      goPage(type){
        if(type == 'ssoLogin'){
          this.$router.push({ path: '/miniProgramAuthentication' });
        }else if(type == 'accountLogin'){
          this.$router.push({ path: '/accountLogin' });
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  #login{
    height: 100%;
    width: 100%;
    background:#fff;
    position:relative;
    display: flex;
    flex-direction: column;
    position: relative;
    .logo-img{
      width:370px;
      height:68px;
      margin:320px 190px 0;
    }
    .position-top-right-box{
      position: absolute;
      top:0;
      right:0;
      width:230px;
      height:230px;
      border-bottom-left-radius: 100%;
      background-color: #E5F2FE;
      filter: blur(4px);
    }
    .position-bottom-left-box{
      position: absolute;
      bottom:0;
      left:0;
      width:230px;
      height:230px;
      border-top-right-radius: 100%;
      background-color: #E5F2FE;
      filter: blur(4px);
    }
    .title-1{
      font-size:38px;
      line-height:55px;
      height:55px;
      text-align: center;
      color:#333;
      margin:90px 0 31px;
    }
    .title-2{
      font-size:38px;
      line-height:55px;
      height:55px;
      text-align: center;
      color:#0183fa;
    }
    .null-p{
      flex:1;
    }
    .login-img{
      width:600px;
      height:408px;
      margin:0 auto 125px;
    }
    .ssoButton{
      width:650px;
      height:80px;
      line-height:80px;
      text-align: center;
      background-color:#0183fa;
      color:#fff;
      font-size:32px;
      margin:0 auto 175px;
      border-radius:50px;
    }
    .accountButton{
      width:200px;
      height:80px;
      line-height:80px;
      text-align: center;
      color:#0183fa;
      font-size:28px;
      margin:0 auto 40px;
    }
  }
</style>
