student-client/src/components/MainLayout/MainLayout.vue

<template>
  <div class="main-layout">
    <header class="header qm-primary-text">
      <!-- <a style="float: left; padding-left: 20px" @click="goBack">
        <Icon type="ios-arrow-back" />返回</a> -->
      <Poptip
        v-if="ifShowQr"
        trigger="hover"
        width="240"
      >
        <span class="name-arrow">手机端登录(Android)
        </span>
        <div slot="content">
          <div class="qm-primary-text">
            <qrcode
              :value="qrValue"
              :options="{ width: 200 }"
            ></qrcode>
          </div>
        </div>
      </Poptip>
      <span
        v-if="ifShowQr"
        style="margin: auto 20px"
      >|</span>
      <Poptip
        trigger="hover"
        width="300"
      >
        <span class="name-arrow">{{user.displayName}} &nbsp;
          <i
            class="ivu-icon ivu-icon-md-arrow-dropdown"
            style="vertical-align: middle;"
          ></i>
        </span>
        <div slot="content">
          <div class="info qm-primary-text">
            <div class="hr info-row">
              <div>底照</div>
              <div><img
                  class="user-avatar"
                  :src="user.photoPath"
                  alt="无底照"
                /></div>
            </div>
            <div class="hr info-row">
              <div>学号</div>
              <div>{{user.studentCode}}</div>
            </div>
            <div class="hr info-row">
              <div>身份证号</div>
              <div>{{user.identityNumber}}</div>
            </div>
            <div class="hr info-row">
              <div>学习中心</div>
              <div>{{user.orgName}}</div>
            </div>
            <div style="grid-column: span 2; place-self: center; width: 100%; padding-top: 10px">
              <i-button
                class="qm-primary-button"
                long
                @click="goChangePwd"
              >修改密码</i-button>
            </div>
          </div>
        </div>
      </Poptip>
      <span style="margin: auto 20px">|</span>
      <a
        @click="logout"
        class="qm-primary-text"
        style="display: inline-block; margin-right: 20px; text-align: center;"
      >退出登录</a>
    </header>
    <main class="content">
      <slot></slot>
    </main>
    <nav class="nav">
      <img
        src="./qm-logo.png"
        class="qm-logo"
      />
      <ul>
        <li>
          <router-link
            class="link"
            to="/online-exam"
          >在线考试&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</router-link>
        </li>
        <li>
          <router-link
            class="link"
            to="/online-practice"
          >在线练习&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</router-link>
        </li>
        <li>
          <router-link
            class="link"
            to="/offline-exam"
          >离线考试&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</router-link>
        </li>
        <li>
          <router-link
            class="link"
            to="/password"
          >修改密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</router-link>
        </li>
      </ul>
    </nav>
    <footer class="footer">©️2018 启明泰和</footer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import VueQrcode from "@chenfengyuan/vue-qrcode";

export default {
  name: "MainLayout",
  data() {
    return {};
  },
  methods: {
    goChangePwd() {
      this.$router.push("/password");
    },
    goBack() {
      window.history.back();
    }
  },
  computed: {
    ...mapState(["user"]),
    qrValue() {
      const { rootOrgId, studentCode, identityNumber } = this.user;
      return JSON.stringify({ rootOrgId, studentCode, identityNumber });
    },
    ifShowQr() {
      return location.href.includes("ecs-dev");
    }
  },
  components: {
    qrcode: VueQrcode
  }
};
</script>

<style scoped>
.main-layout {
  display: grid;
  grid-template-areas: "nav header" "nav content" "nav footer";
  min-height: 100vh;
  grid-template-columns: 180px 1fr;
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-area: header;
  height: 50px;
  background-color: #ffffff;
  box-shadow: 0px 1px 0px 0px #eeeeee;

  text-align: right;
  line-height: 50px;
}

.user-avatar {
  display: inline-block;
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.info {
  width: 260px;
}

.info > div {
  min-height: 50px;
}

.hr {
  border-bottom: 1px solid #eeeeee;
}
.info-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
}
.info-row > div:nth-of-type(odd) {
  justify-self: left;
}

.info-row > div:nth-of-type(even) {
  justify-self: right;
}

.name-arrow:hover .ivu-icon-md-arrow-dropdown::before {
  content: "\F343";
}

.nav {
  grid-area: nav;
  /* background-image: url(../../features/Login/bg.jpg); */
  background-color: rgb(113, 113, 113);
  background-repeat: repeat;
  width: 180px;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
}

.qm-logo {
  width: 80px;
  height: 68px;
  margin: 30px auto;
}

.link {
  background-image: url(./link.png);
  background-repeat: no-repeat;
  background-position: 30px 50%;
  /* margin-left: -40px; */
  line-height: 40px;
  width: 100%;
  display: inline-block;

  color: #ffffff;
}

.router-link-active,
.link:hover {
  background-image: url(./link-active.png);
  background-color: rgba(255, 255, 255, 0.5);
  color: #fafafa;
}

.footer {
  grid-area: footer;
  margin-bottom: 10px;
}
</style>