<template>
  <div id="wrapper" :style="{'background-image':'url('+imgUrl.home+')'}">
    <div class="box">
      <div @click="$jump('homePage')" :class="styleNum == 0 ? 'style': ''">党组织建设</div>
      <div @click="$jump('homePage')" :class="styleNum == 1 ? 'style': ''">社会组织信用信息查询</div>
      <div @click="$jump('project')" :class="styleNum == 2 ? 'style': ''">政府购买社会组织服务项目管理</div>
      <div @click="$jump('homePage')" :class="styleNum == 3 ? 'style': ''">个人中心</div>
      <div>
        <span @click="$jump('login')">登录</span> |
        <span @click="$jump('registered')">注册</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['index_num'],
  data () {
    return {
      imgUrl: { home: require('../../static/img/home.png') },
      styleNum: 0
    }
  },
  computed: {},
  watch: {},
  methods: {},
  created () {
    let sub = this.styleNum
    sub = this.$props.index_num
    this.styleNum = sub
  },
  mounted () {}
}
</script>

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

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

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

    .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>
