<template>
  <div class="hello">

    <div class="block">
      <div class="row header  ">
        <div class="left pull-left menu_list" style="margin-left: 60px;">
          <ul>
            <li><a href="https://git.xmzhuliang.com/" target="_blank">代码管理</a></li>
            <li><a href="https://www.bugdone.cn/home/" target="_blank">Bug管理</a></li>
          </ul>
        </div>
        <div class="right pull-right">
          <ul class="inline pull-right">
            <li ><router-link :to="link">{{link_text}}</router-link></li>
          </ul>
        </div>
      </div>
    </div>

    <div style="background: #6ebdc2;position: absolute;left: 0;top: 0;right: 0;bottom: 0;color: #fff;text-align: center;">
      <img src="../../static/logo/logo.png" alt="" style="margin-top: 10%;width: 200px;">
      <p style="font-size: 45px;font-weight: normal;letter-spacing: 2px;margin-top: 30px;">在线文档分享平台<span style="font-size: 12px;letter-spacing: 2px;color: #fff;font-weight: 300;background: #e33d24;border-radius: 20px;box-shadow: 1px 1px 10px rgba(0,0,0,0.3);padding: 1px 8px;position: absolute;margin-right: 6px;">Markdown</span></p>
      <p style="font-size: 22px;font-weight: 300;letter-spacing: 1px;margin-top: -20px;">
        Api接口文档&nbsp;&nbsp;&nbsp;数据库文档&nbsp;&nbsp;&nbsp;技术文档&nbsp;&nbsp;&nbsp;说明文档
      </p>
      <div style="width: 50%;height: 1px;background: #e7e7e7;position: relative;left: 25%;"></div>
      <p style="font-size: 18px;font-weight: 300;letter-spacing: 1px;">支持私密文档&nbsp;&nbsp;仅成员或输入密码可见</p>
      <p class="look_demo"><a href="https://doc.xmzhuliang.com/web/#/11">观看示例</a></p>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      height: '',
      link:'',
      link_text:''
    }
  },
  methods:{
    getHeight(){
       if (window.innerHeight){
          var winHeight = window.innerHeight;
       }   
       else if ((document.body) && (document.body.clientHeight)){
          var winHeight = document.body.clientHeight;
       }
        this.height = winHeight+'px' ;
      }
  },
  mounted () {
    var that = this ;
    this.getHeight();
    that.link = '/user/login';
    that.link_text = that.$t("index_login_or_register");
    this.get_user_info(function(response){
      if (response.data.error_code === 0 ) {
        that.link = '/item/index';
        that.link_text = that.$t("my_item");
      }
    });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


  .el-carousel__item { 
    text-align: center; 
    font: 25px "Microsoft Yahei"; 
    color: #fff;
  }

  .header{
   padding-right: 100px;
   padding-top: 30px;
   font-size: 18px; 
   position: fixed;
      right: 0;
      left: 0;
      z-index: 1030;
      margin-bottom: 0;
  }
  .header a {
      color: white;
      font-size: 12px;
      font-weight: bold;
  }
  .slide{
    width: 700px;
    position  : absolute;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%,-50%);
    padding-top: 0px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 0px;
    box-sizing: border-box;
  }
  .inline>li>a {
    font-size: 15px;
    font-weight: normal;
  }
  .menu_list>ul>li{
    display: inline-block;
    margin-right: 15px;
  }
  .menu_list>ul>li>a{
    color: #fff;
    font-size: 16px;
    font-weight: 400;
  }
  .look_demo{
    margin-top: -2px;
  }
  .look_demo>a{
    background: #409eff;
    padding: 4px 16px;
    color: #fff;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 300;
    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 10px;
    letter-spacing: 1px;
  }

</style>
