<template>
  <div id="wrapper-w" :style="{'background-image':'url('+imgUrl.foot1+')'}">
    <div class="div1">
      <p style="font-weight:600;">版权所有：朝阳区委社会工委区民政局</p>
      <p>京ICP备19040879号 Copyright 2019-2029 www.cyteam.orz.cn All Rights Reserved</p>
      <!-- <p style="font-weight:600;">
        <span>友情链接：</span>
        <a style="font-weight:600;" href="https://inv-veri.chinatax.gov.cn/" target="_blank">发票查验平台</a>
        <a
          style="font-weight:600;"
          href="http://beijing.chinatax.gov.cn/bjswjwz/"
          target="_blank"
        >北京市税务局</a>
        <a style="font-weight:600;" href="https://www.tianyancha.com/" target="_blank">天眼查</a>
      </p> -->
    </div>
    <div class="div2">
      <div class="img-box">
        <img :src="imgUrl.wxtp0" alt />
        <p>朝阳社工e空间</p>
      </div>
      <div class="img-box">
        <img :src="imgUrl.wxtp2" alt />
        <p>朝阳社团办</p>
      </div>
      <div class="img-box">
        <img :src="imgUrl.wxtp1" alt />
        <p>朝阳社会组织</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      imgUrl: {
        foot: require('../../static/img/foot.png'),
        foot1: require('../../static/img/foot1.png'),
        wxtp0: require('../../static/img/wxtp0.png'),
        wxtp1: require('../../static/img/wxtp1.png'),
        wxtp2: require('../../static/img/wxtp2.png')
      }
    }
  },
  computed: {},
  watch: {},
  methods: {},
  created () { },
  mounted () { }
}
</script>

<style lang='scss' scoped>
#wrapper-w {
  // width: 1280px;
  width: 100%;
  height: 292px !important;
  background-size: 100% 100%;
  background-color: rgba($color: #000000, $alpha: 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .div2 {
    width: 540px;
    height: 110px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;

    .img-box{
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    img {
      width: 80px;
      height: 80px;
      margin-bottom: 11px;
    }

    p {
      font-family: 'MicrosoftYaHei';
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #ffffff;
    }
  }

  & > .div1 {
    display: inline-block;
    height: 64px;
    text-align: center;

    p {
      &:nth-of-type(1) {
        font-family: 'MicrosoftYaHei';
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: -1px;
        color: #ffffff;
      }
      &:nth-of-type(2) {
        font-family: 'MicrosoftYaHei';
        font-size: 16px;
        font-weight: bold;
        font-stretch: normal;
        margin-top: 15px;
        letter-spacing: 0px;
        color: #ffffff;
      }
      &:nth-of-type(3) {
        margin-top: 15px;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          font-family: 'MicrosoftYaHei';
          font-size: 16px;
          font-weight: bold;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #fff;
        }

        a {
          margin-left: 10px;
          color: #fff;

          &:hover {
            color: #0099ff;
          }
        }
      }
    }
  }
}
</style>
