live-cms/src/layout/layout-part/heads.vue

<template>
  <div id="heads">
    <el-row>
      <el-col :span="24" class="heads">
        <el-col :span="12" class="left">
          <el-image :src="afterInfo.logo"></el-image>
          <span>{{ afterInfo.title }}</span>
        </el-col>
        <el-col :span="12" class="right">
          <span @click="bindBtn()"><i class="iconfont iconbangding"></i>绑定微信</span>
          <span @click="passwdBtn()"><i class="iconfont iconmima_huaban1"></i>修改密码</span>
          <span @click="nameBtn()"><i class="iconfont iconicon-person"></i>账号名称</span>
          <span @click="logoutBtn()"><i class="iconfont iconiconfront-"></i>退出登录</span>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="绑定" :visible.sync="bindDia" width="30%" :before-close="handleClose">
      <bind @bindDown="bindDown"></bind>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="passwdDia" width="30%" :before-close="handleClose">
      <passwdDias></passwdDias>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
import bind from './parts/bind.vue';
import passwdDias from './parts/passwdDia.vue';
export default {
  name: 'heads',
  props: {},
  components: {
    // 绑定微信
    bind,
    // 修改密码
    passwdDias,
  },
  data: function() {
    return {
      afterInfo: {
        logo: require('@/assets/logo.png'),
        title: '管理后台',
      },
      // 绑定微信
      bindDia: false,
      // 修改密码
      passwdDia: false,
    };
  },
  created() {},
  methods: {
    // 绑定微信
    bindBtn() {
      this.bindDia = true;
    },
    // 修改密码
    passwdBtn() {
      this.passwdDia = true;
    },
    // 点击名字
    nameBtn() {
      alert('点击名字事件');
    },
    // 退出登录
    logoutBtn() {
      alert('退出登录');
    },
    // 绑定微信关闭
    bindDown() {
      this.bindDia = false;
    },
    handleClose(done) {
      done();
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.left {
  padding: 0 20px;
  .el-image {
    float: left;
    width: 50px;
    height: 50px;
    margin: 5px 0 0 0;
  }
  span {
    height: 64px;
    line-height: 60px;
    font-size: 30px;
    color: #fff;
    padding: 0 10px;
    text-shadow: cornflowerblue 3px 3px 3px;
    font-family: cursive;
  }
}
.right {
  float: right;
  padding: 0 20px;
  text-align: right;
  height: 63px;
  line-height: 63px;
  span {
    border-right: 1px solid #000;
    padding: 0 15px;
    color: #000;
    .iconfont {
      margin: 0 5px 0 0;
    }
  }
  span:hover {
    cursor: pointer;
  }
  span:last-child {
    border-right: 0;
  }
}
</style>