<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 @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'),
        home1: require('../../static/img/home1.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 {
  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%;
    }
  }

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

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