123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 |
- <template>
- <el-col :span="24" class="">
- <el-col :span="2" :offset="2">
- <img class="logoImg" src="../assets/img/log.png"/>
- </el-col>
- <!--v-show="roles.indexOf(item.id) >= 0"-->
- <el-col :span="2" v-for="(item, index) of menuData" :key="item.id"
- @click.native="secondNavClick(item,index)" style="text-align: center">
- <span class="lineStyle" :class="{active:index == checkindex,menu_item:true}">{{item.name}}</span>
- </el-col>
- <el-col :span="4" :offset="9">
- <div class="login">
- <img class="userstyle" :src="BASE_URL + avatar" alt="">
- <!-- <img class="userstyle" src="../assets/img/user.jpg"> -->
- <span>{{name}}</span>
- <i class="el-icon-caret-bottom"></i>
- </div>
- <div class="out">
- <img src="../assets/img/out.png" alt class="out-img">
- <span @click="Loginout">退出</span>
- </div>
- </el-col>
- <el-col :span="1"></el-col>
- </el-col>
- </template>
- <script>
- import {mapGetters} from 'vuex'
- import { IMG_BASE_URL } from '@/ImgConfig'
- export default {
- name: "navMenu",
- // props: {
- // navsData: Array
- // },
- data() {
- return {
- accessToken:localStorage.getItem("accessToken"), //token
- BASE_URL:IMG_BASE_URL,
- menuData: [ {
- id: "1",
- name: "在线批改老师",
- href: "onlineteacher",
- },
- ],
- checkindex: 0
- };
- },
- watch: {
- navsData(n) {
- this.navsData = n;
- this.initNav();
- }
- },
- methods: {
- // 初始化处理
- // initNav() {
- // this.menuData = JSON.parse(JSON.stringify(this.navsData));
- // },
- secondNavClick(val, index) {
- this.$router.push("/Onteacher/" + val.href);
- this.checkindex = index;
- },
- // 账号管理、退出登录
- Loginout() {
- this.$confirm("您确定退出吗?", "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- })
- .then(() => {
- this.$store.dispatch("LogOut", {
- accessToken: this.accessToken
- });
- })
- .catch(() => {
- // console.log(err)
- this.$message("已取消操作!");
- });
- }
- },
- computed: {
- ...mapGetters(['name', 'avatar','roles'])
- },
- mounted() {
- // this.initNav();
- }
- };
- </script>
- <style scoped>
- /*.mainHeader{*/
- /*height: 110px;*/
- /*line-height:110px;*/
- /*}*/
- .menu_item {
- cursor: pointer;
- color:#999999;
- font-size: 9px;
- font-family: serif;
- box-sizing:border-box;
- height: 80%;
- text-align:center;
- padding-bottom:19px ;
- /*display: inline-block;*/
- }
- .menu_item:hover {
- color:#52CC60 ;
- border-bottom:2px solid #52cc60;
- }
- .active {
- color:#52CC60 !important;
- border-bottom:2px solid #52cc60;
- }
- .menu_item+.menu_item {
- border-left: 1px solid #ffffff;
- }
- .logoImg{
- width:136px;
- height:52px;
- }
- .sishuLogo{
- margin-left:125px;
- }
- .userstyle{
- width:26px;
- height:26px;
- border-radius: 15px;
- }
- .lineStyle{
- color: #999999;
- font-size: 18px;
- text-align: center;
- }
- .login{
- color: #333333;
- font-size: 14px;
- display: inline-block;
- }
- .out{
- margin-left: 20px;
- font-size: 14px;
- color: #666666;
- display: inline-block;
- cursor: pointer;
- }
- .out-img{
- width: 16px;
- height: 18px;
- }
- </style>
|