<template>
  <div>
    <!-- 头部标签 -->
    <van-sticky>
      <header class="header-wrap">
        首开集团安全管理平台
      </header>
    </van-sticky>

    <!-- 内容 -->
    <div class="con">
      <!-- 个人信息 -->
      <van-cell-group inset>
        <van-row gutter="20">
          <van-col span="6">
            <div>
              <van-image
                width="2rem"
                height="2rem"
                fit="fill"
                :src="userInfo.portrait"
              />
            </div>
          </van-col>
          <van-col span="18">
            <div class="user-info-wrap">
              <div class="user-name">{{ userInfo.name }}</div>
              <p>{{ userInfo.position }}</p>
              <div class="tag-wrap">
                <van-tag color="#cbcdfb">隐患上报人</van-tag>
                <van-tag color="#b5e2f1">隐患整改人</van-tag>
                <van-tag color="#bed9fd">检查专员</van-tag>
              </div>
            </div>
          </van-col>
        </van-row>
      </van-cell-group>

      <!-- 设置 -->
      <van-cell-group inset class="my-cell-group">
        <div class="set-wrap">
          <van-image
            width="0.613rem"
            height="0.613rem"
            fit="fill"
            :src="require('@/assets/myTerritory/set.png')"
          />
          <span>设置</span>
        </div>
      </van-cell-group>

      <!-- 退出系统 -->
      <footer class="sign-out">
        <van-button type="info" block @click="logout">退出系统</van-button>
      </footer>
    </div>

    <!-- tanBar -->
    <tab-bar :index="2"></tab-bar>
  </div>
</template>

<script>
import tabBar from "@/components/TabBar";
export default {
  components: {
    tabBar
  },
  data() {
    return {
      userInfo: {
        portrait: require("@/assets/myTerritory/touxiang.png"),
        name: "刘华强",
        position: "技术安全部"
        // jurisdiction: [
        //   '隐患上报人',
        //   '隐患整改人',
        //   '检查专员'
        // ]
      }
    };
  },
  mounted() {},
  methods: {
    logout() {
        localStorage.removeItem('admin_token');
        this.$router.push("/Login2");
        location.reload();
    }
  }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.header-wrap {
  width: 100%;
  height: 50px;
  background-color: #2980f7;
  font-size: 17px;
  line-height: 50px;
  color: white;
  font-weight: 600;
  text-align: center;
}
.con {
  height: calc(100% - 110px);
  padding: 10px 0 50px 0;
  background-color: #f0f1f5;
  position: relative;
  .user-info-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .user-name {
      font-size: 17px;
      font-weight: bold;
    }

    .tag-wrap {
      .van-tag {
        margin-right: 10px;
        margin-top: 3px;
        padding: 2px 4px;
      }
    }
  }

  .my-cell-group {
    padding: 10px 10px !important;
    .set-wrap {
      height: 0.8rem;
      display: flex;
      align-items: center;
      span {
        margin-left: 0.2666rem;
        font-size: 15px;
        font-weight: bold;
      }
    }
  }
}

.sign-out {
  width: 96%;
  position: absolute;
  bottom: 1.86667rem;
  left: 0px;
  right: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 5px;
  button {
    font-size: 15px;
    font-weight: bold;
  }
}
.van-cell-group--inset {
  margin: 0 10px 10px;
  padding: 10px 10px 15px;
}
</style>
