<template>
  <div class="my">
    <h1 class="title">我的</h1>
    <div class="tx">
      <img :src="avatar" alt="" />
      <h2 class="name">{{ user_name }}</h2>
    </div>
    <div class="myNav">
      <ul>
        <li>
          <router-link to="/personalSetting">
            <img src="../../assets/my/ico_rgsz.png" alt="" />
            <p>个人设置</p>
          </router-link>
        </li>
        <li>
          <img src="../../assets/my/ico_xxtz.png" alt="" />
          <p>消息通知</p>
        </li>
        <li>
          <img src="../../assets/my/ico_xtsz.png" alt="" />
          <p>系统设置</p>
        </li>
      </ul>
      <ul>
        <li>
          <img src="../../assets/my/ico_rjgx.png" alt="" />
          <p>软件更新</p>
        </li>
        <li>
          <img src="../../assets/my/ico_sybz.png" alt="" />
          <p>使用帮助</p>
        </li>
        <li>
          <img src="../../assets/my/ico_gywm.png" alt="" />
          <p>关于我们</p>
        </li>
      </ul>
    </div>

    <footer-nav></footer-nav>
  </div>
</template>

<script>
import FooterNav from "./components/footerNav";

export default {
  name: "my",
  components: {
    FooterNav
  },
  data() {
    return {
      user_name: this.$store.getters.user.user.user_name
    };
  },
  computed: {
    avatar: function() {
      var avatar = this.$store.getters.user.user.avatar;
      return avatar.length > 0 ? avatar : require("@/assets/product/test.jpg");
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.my {
  .title {
    background: $main-color;
    color: #fff;
    font-size: 0.34rem;
    // @include display-flex;
    @include align-items-center;
    @include box-sizing;
    @include justify-content-between;
    text-align: center;
    height: 0.92rem;
    line-height: 0.92rem;
  }
  .tx {
    background: $main-color;
    @include align-items-center;
    @include box-sizing;
    text-align: center;
    @include display-flex;
    @include justify-content-between;
    @include flex-direction;
    padding: 0.3rem 0 0.15rem 0;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
    }
    .name {
      font-size: 0.3rem;
      color: #fff;
      height: 0.8rem;
      line-height: 0.8rem;
    }
  }
  .myNav {
    @include flex-direction;
    ul {
      @include align-items-center;
      @include box-sizing;
      text-align: center;
      @include display-flex;
      @include justify-content-between;
      margin: 0.3rem 0 0 0.3rem;
      li {
        background: #fff;
        margin: 0 0.34rem 0 0;
        height: 4.73rem;
        @include align-items-center;
        @include display-flex;
        @include flex-direction;
        @include justify-content-center;
        @include flex;
        img {
          width: 1.44rem;
          height: 1.44rem;
        }
        p {
          font-size: 0.3rem;
          height: 0.76rem;
          line-height: 0.76rem;
          color: $pgh-color;
        }
      }
    }
  }
}
</style>
