123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- <script>
- import { mixin } from '@/utils/mixin'
- import { mapActions, mapGetters } from 'vuex'
- export default {
- name: 'MobileLayout',
- components: {
- },
- mixins: [mixin],
- computed: {
- ...mapGetters(['nickname', 'avatar'])
- },
- methods: {
- ...mapActions(['Logout']),
- handleLogout () {
- this.$confirm({
- title: '提示',
- content: '确定要退出登录吗 ?',
- centered: true,
- onOk: () => {
- return this.Logout({}).then(() => {
- setTimeout(() => {
- this.$router.push({ path: '/user/login' })
- }, 16)
- }).catch(err => {
- this.$message.error({
- title: '错误',
- description: err.message
- })
- })
- },
- onCancel () {
- }
- })
- },
- handleToHome () {
- this.$router.push({ name: 'home' })
- }
- }
- }
- </script>
- <template>
- <a-layout id="components-layout-mobile-fixed">
- <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%',padding:'0 10px' }">
- <div class="logo">
- <img src="@/assets/logo.png" height="30px">
- 运营中心系统
- </div>
- <div class="user-wrapper">
- <a-icon type="user" />
- <span style="margin: 0 5px;">{{ nickname }}</span>
- <a href="javascript:;" style="margin-left: 10px;color: #ff5500;" @click="handleLogout">
- <a-icon type="logout"/>
- <span style="margin: 0 5px;">退出</span>
- </a>
- </div>
- </a-layout-header>
- <a-layout-content :style="{ padding: '0', marginTop: '64px' }">
- <div style="padding:10px;">
- <keep-alive>
- <router-view :key="$route.name"></router-view>
- </keep-alive>
- </div>
- </a-layout-content>
- </a-layout>
- </template>
- <style>
- #components-layout-mobile-fixed{
- height: 100%;
- overflow: auto;
- }
- #components-layout-mobile-fixed .logo {
- width: 140px;
- height: 31px;
- line-height:31px;
- color: #fff;
- margin: 16px 15px 16px 0;
- float: left;
- text-align: center;
- font-weight: 900;
- }
- #components-layout-mobile-fixed .user-wrapper{
- float: right;
- z-index: 10000;
- color: #fff;
- }
- </style>
|