<template>
  <div class="main-container">
    <div class="title-container">
      
    </div>
    <div class="title">
      <p style="font-size:24px;letter-spacing: 0.6ch;">费县时空大数据平台</p>
      <p style="font-size:14px;margin-top:22px;font-family:'Poppins',sans-serif;margin-bottom:32px;">Welcome to Fei Xian spatiotemporal big data platform</p>
      <span style="padding:8px 32px;border:1px solid #fff;margin-top:48px;border-radius:8px;">登录</span>
    </div>
    <div class="login-form">
      <p style="text-align:center;font-size:18px;color:#666;font-weight:bold;line-height:50px;margin-bottom:42px;">
        <el-button type="primary" icon="Iphone" style="position:relative;top:-3px;left:-12px;" circle></el-button>
        手机号码注册
      </p>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
        <el-form-item label="" prop="name">
          <el-input v-model="ruleForm.name" placeholder="用户名称">
            <i slot="prefix" icon="Iphone">
              <el-icon><Iphone /></el-icon>
            </i>
            
          </el-input>
        </el-form-item>

        <el-form-item label="" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="手机号码">
            <i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
          </el-input>
        </el-form-item>
      
        <el-form-item label="" prop="password">
          <el-input v-model="ruleForm.password" type="password" placeholder="登录密码" show-password>
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="repassword">
          <el-input v-model="ruleForm.repassword" type="password" placeholder="登录密码确认" show-password>
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="agreement">
          <el-checkbox v-model="ruleForm.agreement" >
              我已阅读并同意<el-link  type="primary" :underline="false">服务协议</el-link>&nbsp;和&nbsp;<el-link  type="primary" :underline="false">隐私声明</el-link>
          </el-checkbox>
          <router-link :to="{path:'/'}">
            <el-link style="float:right;" type="primary" :underline="false">登录已有账号 >></el-link>
          </router-link>
        
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  style="width:100%;" @click="submitForm('ruleForm')">立 即 注 册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name:"Login",
  data(){
    return {
      ruleForm:{

      }
    }
  }
}
</script>
<style scoped>
.main-container{
  width:100vw;
  height:100vh;
  background:#fff;
}
.title-container{
  content: "";
  position: absolute;
  height: 2000px;
  width: 2000px;
  top: -10%;
  right: 48%;
  transform: translateY(-50%);
  background-image: linear-gradient(-45deg,#4481eb 0,#04befe 100%);
  transition: 1.8s ease-in-out;
  border-radius: 50%;
  z-index: 6;
  color:#fff;
}
.title{
  width:50vw;
  text-align: center;
  z-index:999;
  position:absolute;
  top:30%;
  left:0px;
  color:#fff;
}
.login-form{
  width:400px;
  height:500px;
  position:absolute;
  top: calc(50vh - 250px);
  z-index:9999999;
  right:200px;
}
</style>