<template>
  <div id="wrapper">
    <!--  :style="{'background-image':'url('+imgUrl.home1+')'}"  -->
    <div class="img-box">
      <img :src="imgUrl.home1" alt />
    </div>
    <div class="box">
      <div @click="$jump('homePage')" :class="styleNum == 0 ? 'style': ''">党组织建设</div>
      <div
        @click="$jump('informationQuery',{id:1,text:'666'})"
        :class="styleNum == 1 ? 'style': ''"
      >社会组织信用信息查询</div>
      <div @click="$jump('project')" :class="styleNum == 2 ? 'style': ''">政府购买社会组织服务项目管理</div>
      <div @click="$jump('personalZte')" :class="styleNum == 3 ? 'style': ''">个人中心</div>
      <div>
        <span v-if="enter" @click="$jump('login')">登录&nbsp;|&nbsp;</span>
        <span v-if="enter" @click="$jump('registered')">注册</span>
          <el-tooltip class="item" effect="dark" :content="name" placement="top">
                   <span class="three" v-if="!enter">{{name}}</span>
    </el-tooltip>
 
        <span v-if="!enter" @click="quit()">&nbsp;|&nbsp;退出</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['index_num'],
  data () {
    return {
      imgUrl: {
        home: require('../../static/img/home.png'),
        home1: require('../../static/img/home1.png')
      },
      styleNum: 0,
      enter: true,
      name: ''
    }
  },
  computed: {},
  watch: {},
  methods: {
    judge () {
      if (sessionStorage.id) {
        this.name = sessionStorage.name
        this.enter = false
      }
    },
    quit () {
      this.$router.push({
        name: 'homePage'
      })
      this.$message.success('退出成功!')
      sessionStorage.clear()
      localStorage.clear()
      this.enter = true
    }
  },
  created () {
    let sub = this.styleNum
    sub = this.$props.index_num
    this.styleNum = sub
    this.judge()
  },
  mounted () {

  }
}
</script>

<style lang='scss' scoped>
#wrapper {
  min-width: 1280px;
  // width: 100%;
  height: 389px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;

  .img-box {
    width: 100%;
    height: 389px;
    display: flex;
    justify-content: center;

    img {
      // width: 100%;
      height: 100%; 
      cursor: default;
      
    }
  }

  .box {
    position: absolute;
    bottom: 0%;
    left: 0%;
    // width: 1280px;
    width: 100%;
    height: 63px;
    background-color: rgba($color: #fff, $alpha: 0.5);
    display: flex;
    justify-content: space-around;
    align-items: center;

    & > div {
      font-family: "MicrosoftYaHei";
      font-size: 20px;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      cursor: pointer;

      &:last-child {
        width: 120px;
        display: flex;
        align-items: center;

        .three {
          text-align: right;
          display: inline-block;
          width: 58px;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: keep-all;
          cursor: default;
        }
      }
    }

    .style {
      font-family: "MicrosoftYaHei";
      font-size: 20px;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #ffffff;
      text-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
      padding: 21px;
      background-color: #e60012;
      border-radius: 10px;
    }
  }
}
</style>
