DocSys/web_src/src/components/Index.vue

<template>
  <div class="hello">

    <div class="block">
      <div class="row header  ">
        <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: 12%;width: 200px;">
      <p style="font-size: 45px;font-weight: normal;letter-spacing: 2px;margin-top: 30px;">文档管理分享平台</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>
      <p style="font-size: 20px;letter-spacing: 1px;"><a href="https://doc.xmzhuliang.com/web/?#/5"> - 观看示例 - </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;
  }

</style>