frame.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <template>
  2. <div id="frame">
  3. <el-container style="height:100vh">
  4. <el-header class="header">
  5. <el-col :span="20" class="left">
  6. 环南湖科创先导区双创服务平台-管理中心
  7. </el-col>
  8. <el-col :span="4" class="right">
  9. <span>{{ user ? user.name : '游客' }}</span>
  10. <span @click="logoutBtn"><i class="el-icon-switch-button"></i></span>
  11. </el-col>
  12. </el-header>
  13. <el-container class="container">
  14. <el-aside width="200px" class="aside">
  15. <el-menu
  16. :default-active="$route.path"
  17. class="el-menu-vertical-demo"
  18. background-color="#242f42"
  19. text-color="#fff"
  20. active-text-color="#409eff"
  21. router
  22. overflow-y:
  23. scroll
  24. >
  25. <el-menu-item index="/adminCenter/homeIndex">首页</el-menu-item>
  26. <el-menu-item index="/adminCenter/news">新闻管理</el-menu-item>
  27. <el-menu-item index="/adminCenter/product">科技成果管理</el-menu-item>
  28. </el-menu>
  29. </el-aside>
  30. <el-main class="main">
  31. <router-view></router-view>
  32. </el-main>
  33. </el-container>
  34. </el-container>
  35. </div>
  36. </template>
  37. <script>
  38. import { mapState, createNamespacedHelpers } from 'vuex';
  39. export default {
  40. name: 'frame',
  41. props: {},
  42. components: {},
  43. data: function() {
  44. return {};
  45. },
  46. created() {},
  47. methods: {
  48. // 退出登录
  49. logoutBtn() {
  50. localStorage.removeItem('token');
  51. this.$router.push({ path: '/' });
  52. },
  53. },
  54. computed: {
  55. ...mapState(['user']),
  56. },
  57. metaInfo() {
  58. return { title: this.$route.meta.title };
  59. },
  60. watch: {
  61. test: {
  62. deep: true,
  63. immediate: true,
  64. handler(val) {},
  65. },
  66. },
  67. };
  68. </script>
  69. <style lang="less" scoped>
  70. .header {
  71. border-bottom: 1px solid #f1f1f1;
  72. background-color: #242f42;
  73. .left {
  74. height: 60px;
  75. line-height: 60px;
  76. font-size: 25px;
  77. font-family: cursive;
  78. font-weight: bold;
  79. color: #fff;
  80. }
  81. .right {
  82. height: 60px;
  83. line-height: 60px;
  84. font-size: 20px;
  85. text-align: right;
  86. color: #fff;
  87. span {
  88. padding: 0 10px;
  89. i {
  90. font-weight: bold;
  91. }
  92. }
  93. span:hover {
  94. cursor: pointer;
  95. i {
  96. color: #ff0000;
  97. }
  98. }
  99. }
  100. }
  101. .container {
  102. .aside {
  103. background-color: #242f42;
  104. }
  105. }
  106. </style>