<template>
<div class="welcome">
  <div class="color1"></div>
  <div class="color2"></div>
  <div class="btn btn2" @click="goLogin">登录</div>
  <div class="btn btn1" @click="goResiger">注册账号</div>
  <span class="title2">欢迎来到 业主委员会</span>
  <span class="title1">Welcome Owner's Committee</span>
</div>
</template>

<script>
export default {
  name: "welcome",
  methods:{
    goLogin(){
      this.$router.push({name:'login'})
    },
    goResiger(){
      this.$router.push({name:'resiger'})
    },
  }
}
</script>

<style scoped lang="less">
.welcome{
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #1E0D48 0%, #110531 100%);
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  .color1{
    width: 359px;
    height: 346px;
    background: #7441F0;
    opacity: 0.5;
    filter: blur(100px);
    position: absolute;
    top:0;
    left:0;
  }
  .color2{
    width: 162px;
    height: 389px;
    background: #BF1A99;
    opacity: 0.6;
    filter: blur(100px);
    position: absolute;
    right: 0;
    top:129px;
  }
  .btn{
    width: 319px;
    height: 56px;
    border-radius: 16px;
    color: white;
    text-align: center;
    line-height: 56px;
    margin-bottom: 20px;
  }
  .btn1{
    background: #6C5DD3;
  }
  .btn2{
    background: rgba(255,255,255,0.1);
    margin-bottom: 60px;
  }
  span{
    color: white;
  }
  .title1{
    margin-bottom: 20px;
    display: inline-block;
  }
  .title2{
    display: inline-block;
    width: 180px;
    height: 92px;
    font-size: 36px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 46px;
    margin-bottom: 40px;
  }
}
</style>