MobileLayout.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <script>
  2. import { mixin } from '@/utils/mixin'
  3. import { mapActions, mapGetters } from 'vuex'
  4. export default {
  5. name: 'MobileLayout',
  6. components: {
  7. },
  8. mixins: [mixin],
  9. computed: {
  10. ...mapGetters(['nickname', 'avatar'])
  11. },
  12. methods: {
  13. ...mapActions(['Logout']),
  14. handleLogout () {
  15. this.$confirm({
  16. title: '提示',
  17. content: '确定要退出登录吗 ?',
  18. centered: true,
  19. onOk: () => {
  20. return this.Logout({}).then(() => {
  21. setTimeout(() => {
  22. this.$router.push({ path: '/user/login' })
  23. }, 16)
  24. }).catch(err => {
  25. this.$message.error({
  26. title: '错误',
  27. description: err.message
  28. })
  29. })
  30. },
  31. onCancel () {
  32. }
  33. })
  34. },
  35. handleToHome () {
  36. this.$router.push({ name: 'home' })
  37. }
  38. }
  39. }
  40. </script>
  41. <template>
  42. <a-layout id="components-layout-mobile-fixed">
  43. <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%',padding:'0 10px' }">
  44. <div class="logo">
  45. <img src="@/assets/logo.png" height="30px">
  46. 运营中心系统
  47. </div>
  48. <div class="user-wrapper">
  49. <a-icon type="user" />
  50. <span style="margin: 0 5px;">{{ nickname }}</span>
  51. <a href="javascript:;" style="margin-left: 10px;color: #ff5500;" @click="handleLogout">
  52. <a-icon type="logout"/>
  53. <span style="margin: 0 5px;">退出</span>
  54. </a>
  55. </div>
  56. </a-layout-header>
  57. <a-layout-content :style="{ padding: '0', marginTop: '64px' }">
  58. <div style="padding:10px;">
  59. <keep-alive>
  60. <router-view :key="$route.name"></router-view>
  61. </keep-alive>
  62. </div>
  63. </a-layout-content>
  64. </a-layout>
  65. </template>
  66. <style>
  67. #components-layout-mobile-fixed{
  68. height: 100%;
  69. overflow: auto;
  70. }
  71. #components-layout-mobile-fixed .logo {
  72. width: 140px;
  73. height: 31px;
  74. line-height:31px;
  75. color: #fff;
  76. margin: 16px 15px 16px 0;
  77. float: left;
  78. text-align: center;
  79. font-weight: 900;
  80. }
  81. #components-layout-mobile-fixed .user-wrapper{
  82. float: right;
  83. z-index: 10000;
  84. color: #fff;
  85. }
  86. </style>