<template>
  <div class="home" style="background-image: url('img/login_bg.jpg');">
    <div class="home-header">
      <div style="flex:1;text-align:left">
              富茂智能云POS
      </div>
      <div style="flex:1;text-align:right;" class="logout" @click="logout">
        <i class="">-></i>
          退出
      </div>
    </div>
      <div class="content-box">

          <div @click="$router.push('/cash_home')" class="box-item" >
            <label>收银</label>
          </div>
          <div class="box-item">
            <label>交易管理</label>
          </div>
          <div class="box-item">
            <label>会员</label>
          </div>
          <div class="box-item" @click="$router.push('/verification')">
            <label>核销管理</label>
          </div>
          <div class="box-item">
            <label>设置</label>
          </div>  
      </div>
      <bottom ></bottom>
  </div>
</template>

<script>
// @ is an alias to /src
import bottom from '@/components/Bottom1'
export default {
  name: 'home',
  components: {
    bottom,
  },
  created(){

  },
  methods:{
    logout:function(){
      localStorage.removeItem("userInfo")
      this.$router.replace('/login')
    }
  }
}
</script>
<style scoped lang="less">
.home{
        background: url('/img/login_bg.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
        display: flex;
        flex-direction: column;
}
.home-header{
    display:flex;
    padding:1rem 1rem;
    color: #fefefe;
}
.logout{
  font-weight: bold;
  color: #ff5b5a;
  &:active{
    color:#ff8d0b
  }
}
.content-box{
    
    display: flex;
    flex-flow: wrap;
    flex-direction: column;
    width: 60%;
    height:50%;
    margin: auto;
    margin-top: 5%;
    .box-item{
      font-size: 1rem;
      margin: 5px;
      background-color: rgba(0,0,0,.5);
      height: calc(50% - 10px);
      display: flex;
      align-items: top;
      justify-content:left;
      position: relative;
      cursor: pointer;
      &:nth-child(1){
        flex:55%; background-color:#77bb58
      }
      &:nth-child(2){
        background-color:#d9b044
      }
      &:nth-child(3){
        background-color:#3aace0
      }
      &:nth-child(4){
        background-color:#909dd1
      }
      &:nth-child(5){
        background-color:#3ac87c
      }
      // flex:23%;
      &::before{
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        z-index: 1;
        background:linear-gradient(rgba(255, 255, 255, .1)  0%,transparent 50% );
        background-origin: 0 0;
        background-position-y: 100%;
        background-size: 100% 200%;
        transition: all .3s;
      }
      &:hover::before{
        background-position-y: 200%;

      }
      &:hover label{
        opacity: 1;
        transform: scale(1.1);
      }
      label{
        color: #fff;
        padding: 1rem;
        transform: scale(.95);
        pointer-events: none;
        z-index: 2;
        text-shadow: 1px 1px 1px rgba(0,0,0,.2);
        text-align: center;
        transition: all .3s;
        i{
          display: block;
          font-size: 40px;
          margin: 10px;

        }
      }
    }
}
</style>