NUXT_FRONTEND/components/Banners/W640H360.vue

<template>
  <div class="banner-W640H360">
    <div id="adfox_16387710654751845" v-if="$device.isMobile"></div>
    <div id="adfox_163877102156142976" v-else></div>
  </div>
</template>

<script>
export default {
  mounted() {
    addEventListener("load", () => {
      this.$device.isMobile ? this.mobileBanner() : this.desktopBanner();
    });
  },
  watch:{
    $route (to, from){
        Ya.adfoxCode.reload('adfox_16387710654751845')
        Ya.adfoxCode.reload('adfox_163238723987728973')
    }
  },
  methods: {
    desktopBanner() {
      window.yaContextCb.push(() => {
        Ya.adfoxCode.create({
          ownerId: 279920,
          containerId: "adfox_163877102156142976",
          params: {
            pp: "g",
            ps: "dbpj",
            p2: "hiza",
          },
        });
      });
    },

    mobileBanner() {
      window.yaContextCb.push(() => {
        Ya.adfoxCode.create({
          ownerId: 279920,
          containerId: "adfox_16387710654751845",
          params: {
            pp: "g",
            ps: "dbpj",
            p2: "hkyq",
          },
        });
      });
    },
  },
};
</script>

<style lang='less'>
.banner-W640H360 {
  width: 100%;
  text-align: center;
  height: auto;
  max-width: 640px;
  position: relative;
  margin: 0 auto;
  // background-color: orange;
  // &::after {
  //   content: "Интерскроллер";
  //   position: absolute;
  // }
  div{
    margin-left: auto;
    margin-right: auto;
    div{
      margin-left: auto;
      margin-right: auto;
      div{
        margin-left: auto;
        margin-right: auto;
      }
    }
  }
}
</style>