NUXT_FRONTEND/components/Banners/W960H90.vue

<template>
  <div class="banner-W960H90">
    <div class="section-wrapper">
      <div class="banner-desktop">
        <div id="adfox_163290315222648914"></div>
        <div id="adfox_167048940056251520"></div>
      </div>
      <div class="banner-mobile">
        <div :id="idMobil+'_main'"></div>
        <div :id="idMobil+'_reserved'"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    $route (to, from) {
      // eslint-disable-next-line no-undef
      Ya.adfoxCode.reload('adfox_163290315222648914')
    }
  },
  props: {
    idMobil: {
      type: String,
      default: 'adfox_16323873072892801'
    }
  },
  mounted () {
    window.yaContextCb.push(() => {
      // eslint-disable-next-line no-undef
      Ya.adfoxCode.create({
        ownerId: 720777,
        containerId: 'adfox_167048940056251520',
        params: {
          p1: 'cwoid',
          p2: 'hyrh'
        }
      })
      // eslint-disable-next-line no-undef
      Ya.adfoxCode.create({
        ownerId: 279920,
        containerId: 'adfox_163290315222648914',
        params: {
          pp: 'h',
          ps: 'dbpj',
          p2: 'hduh'
        }
      })
    })

    window.yaContextCb.push(() => {
      // eslint-disable-next-line no-undef
      Ya.adfoxCode.create({
        ownerId: 720777,
        containerId: this.idMobil + '_reserved',
        params: {
          p1: 'cwoih',
          p2: 'hyrh'
        }
      })
      // eslint-disable-next-line no-undef
      Ya.adfoxCode.create({
        ownerId: 279920,
        containerId: this.idMobil + '_main',
        params: {
          pp: 'g',
          ps: 'dbpj',
          p2: 'hduj'
        }
      })
    })
  }
}
</script>

<style lang='less'>

.banner-desktop {
  display: block;
  /*background: red;
  height: 90px;*/
}
.banner-mobile {
  display: none;
}

@media all and (max-width: 576px) {
  .banner-desktop {
    display: none;
  }
  .banner-mobile {
    display: block;
    /*background: blue;
    height: 90px;*/
  }
}

.banner-W960H90 {
  width: 100%;
  height: auto;
  text-align: center;
  position: relative;
  // background-color: blueviolet;
  // &::after {
  //   content: "Растяжка 5";
  //   position: absolute;
  // }
}
</style>