标签：el color text height ui 退出 line element message

<template>



      <el-container class="home-wrapper">
            <el-header>
                  <el-row type="flex" class="row-bg" justify="space-between">
                        <el-col :span="4">Smile</el-col>
                        <el-col :span="4" class="header-font">后台系统管理</el-col>
                        <el-col :span="1" class="header-logout"><a href="#" @click.prevent="logout" >退出</a></el-col>
                  </el-row>
            </el-header>
             <el-container>
                  <el-aside width="15%">Aside</el-aside>
                  <el-main  >Main</el-main>
            </el-container>
      </el-container>
      



</template>>

<script>
import { constants } from 'crypto';
export default {
      data(){
            return{

            }
      },
      methods:{
          logout(){//退出功能
            //弹出确认对话框
            //用户点击确认，跳回用户登录页面，清除token
                this.$confirm('确定要退出登录吗?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
                  }).then(() => {
                    this.$message({
                       type: 'success',
                       message: '退出成功!'
                     });
                     //确认退出，清除token
                     localStorage.removeItem('token')
                     //跳转登录页面(编程式导航)
                     this.$router.push('/login')

                }).catch(() => {
              this.$message({
               type: 'info',
               message: '已取消退出'
          });          
        });

          } 
      }
}
</script>>

<style scoped lang='less'>

  .home-wrapper {
    min-width: 720px;
    height: 100%;
    
 
    .el-header{
        background-color:#222d32;
        color: #fff;
        text-align: center;
        line-height: 60px;
        padding: 0;
    }
    .header-font{
        color: #fff;
        font-size: 20px;
    }

    .header-logout a{
      font-size:14px;
      color: #fff;
    }
   a{
     text-decoration: none;
   }

  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }


}

</style>>

标签：el,color,text,height,ui,退出,line,element,message
来源： https://www.cnblogs.com/javascript9527/p/11343126.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。