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

<template>
  <div class="main-layout">
    <header class="header qm-primary-text">
      <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.studentCodeList.join(",") }}</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="() => this.logout('?LogoutReason=正常退出')"
        class="qm-primary-text"
        style="display: inline-block; margin-right: 20px; text-align: center;"
        >退出登录</a
      >
    </header>
    <transition name="fade" appear>
      <main class="content" :key="$route.path">
        <slot></slot>
      </main>
    </transition>
    <nav class="nav">
      <img src="./qm-logo.png" class="qm-logo" />
      <ul>
        <li>
          <router-link class="link" to="/online-exam">
            在线考试
          </router-link>
        </li>
        <li>
          <router-link class="link" to="/online-practice">
            在线练习
          </router-link>
        </li>
        <li>
          <router-link class="link" to="/offline-exam">
            离线考试
          </router-link>
        </li>
        <li>
          <router-link class="link" to="/site-message">
            <Badge :count="messageUnread" :offset="[20, -20]">
              公告通知
            </Badge>
          </router-link>
        </li>
        <li>
          <router-link class="link" to="/password">
            修改密码
          </router-link>
        </li>
      </ul>
    </nav>
    <footer class="footer">©️2019 启明泰和</footer>

    <SiteMessagePopup />
  </div>
</template>

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

export default {
  name: "MainLayout",
  data() {
    return {};
  },
  methods: {
    goChangePwd() {
      this.$router.push("/password");
    },
  },
  computed: {
    ...mapState(["user", "siteMessages"]),
    messageUnread() {
      return this.siteMessages.filter(v => v.hasRead === false).length;
    },
    qrValue() {
      const { rootOrgId, studentCodeList, identityNumber } = this.user;
      return JSON.stringify({
        rootOrgId,
        studentCode: studentCodeList.join(","),
        identityNumber,
      });
    },
    ifShowQr() {
      const domain = localStorage.getItem("domain") || "";
      return domain.includes("ecs-dev") || domain.includes("exam.qmth.com.cn");
    },
  },
  components: {
    qrcode: VueQrcode,
    SiteMessagePopup,
  },
};
</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-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; */
  padding-right: 20px;
  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>