|
- <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>
|