yangshi_cloudExbition/src/pages/logintips/index.vue

<template>
  <div
    class="home"
    :style="{
      backgroundImage: `url(${require('@/assets/images/project/bg.png')})`,
    }"
  >
    <div class="h-con">
      <img class="h-btn" :src="require('@/assets/images/project/icon/loginsuccess.png')" alt="" />
      <p>登录成功，请关闭此页。</p>
    </div>
  </div>
</template>

<script>

let getQueryVariable = (variable)=> {
      let search = window.location.hash.replace('#/logintips','')
       var query = search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

export default {
  mounted(){
    this.$nextTick(()=>{
      localStorage.setItem('token',getQueryVariable('token'))
      localStorage.setItem('sign',getQueryVariable('sign'))
    })
  }
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-color: #10337f;
  background-size: 100% auto;
  background-position: bottom left;

  .h-con {
    width: 70%;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    >img{
      width: 150px;
      margin-bottom: 30px;
    }
    >p{
      font-size: 26px;
    }
  }
}

@media screen and (max-width:800px) {
.home {
  .h-con {
      >img{
        width: 20%;
        margin-bottom: 30px;
      }
      >p{
        font-size: 18px;
        width: 100%;
      }
    }
  }
}
</style>