saas_pc/src/pages/person-center/index.vue

<template>
  <div class="person-center">
    <Header></Header>
    <section class="section">
      <div class="container">
        <div class="section__header">
          <img
            :src="
              userInfo
                ? userInfo.avatar
                  ? $tools.splitImgHost(userInfo.avatar, true)
                  : '@/assets/qrcode.png'
                : ''
            "
            class="img"
            alt=""
          />
          <div class="text">
            <div class="title">{{ userInfo && userInfo.realname }}</div>
            <div class="desc">你好</div>
          </div>
        </div>

        <div class="section__body clearfix">
          <div class="nav">
            <div class="nav__section">
              <div class="title">我的课程</div>
              <div class="list">
                <router-link to="/person-center/my-course">
                  <div class="item">我的网课</div>
                </router-link>

                <router-link to="/person-center/play-record">
                  <div class="item">播放记录</div>
                </router-link>
              </div>
            </div>
            <div class="nav__section">
              <div class="title">我的直播课</div>
              <div class="list">
                <router-link to="/person-center/my-live">
                  <div class="item">学习列表</div>
                </router-link>
              </div>
            </div>
            <div class="nav__section">
              <div class="title">我的题库</div>
              <div class="list">
                <router-link to="/person-center/my-bank">
                  <div class="item">自购题卷</div>
                </router-link>
                <router-link to="/person-center/free-bank">
                  <div class="item">赠送题卷</div>
                </router-link>
                <router-link to="/person-center/bank-record">
                  <div class="item">做题记录</div>
                </router-link>
                <router-link to="/person-center/my-collect">
                  <div class="item">收藏集</div>
                </router-link>
                <router-link to="/person-center/my-wrong">
                  <div class="item">错题集</div>
                </router-link>
              </div>
            </div>
            <div class="nav__section">
              <div class="title">个人管理</div>
              <div class="list">
                <router-link to="/person-center/my-order">
                  <div class="item">我的订单</div>
                </router-link>
                <router-link to="/person-center/my-invoice">
                  <div class="item">我的发票</div>
                </router-link>
                <router-link to="/person-center/my-classhour">
                  <div class="item">我的学时</div>
                </router-link>
                <router-link to="/person-center/my-examination">
                  <div class="item">我的考试</div>
                </router-link>
                <router-link to="/person-center/my-mock">
                  <div class="item">我的模考</div>
                </router-link>
                <router-link to="/person-center/my-message">
                  <div class="item">我的消息</div>
                </router-link>
                <router-link to="/person-center/my-info">
                  <div class="item">我的资料</div>
                </router-link>
                <!-- <router-link to="/">
                  <div class="item">学习计划</div>
                </router-link> -->
              </div>
            </div>
          </div>
          <div class="content">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </section>
    <ToolBar></ToolBar>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer/index";
import Header from "@/components/header/index";
import ToolBar from "@/components/toolbar/index";
import { mapGetters } from "vuex";
export default {
  name: "PersonCenter",
  components: {
    Footer,
    Header,
    ToolBar,
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {},
  methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.person-center {
  .section {
    &__header {
      padding-left: 28px;
      display: flex;
      align-items: center;
      width: 100%;
      height: 138px;
      background: #ebf3ff;

      .img {
        width: 90px;
        height: 90px;
        border-radius: 50%;
      }

      .text {
        margin-left: 24px;
        .title {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }

        .desc {
          margin-top: 10px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
      }
    }

    &__body {
      margin-bottom: 20px;
      .nav {
        float: left;
        width: 138px;
        background: #f8f8fc;
        padding: 0 4px;

        &__section {
          .title {
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
          }

          .list {
            .router-link-active {
              .item {
                color: #3f8dfd;
                background: #e4e4e6;
              }
            }
            .item {
              margin-top: 4px;
              text-align: center;
              display: block;
              height: 40px;
              border-radius: 8px;
              line-height: 40px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
            }
          }
        }
      }

      .content {
        margin-left: 138px;
        padding-left: 24px;
      }
    }
  }
}
</style>