proginn-frontend/layouts/kaifain_v2.vue

<template>
  <nuxt />
</template>

<script>
import Cookies from 'js-cookie'

const MOB_HOST = process.env.NODE_ENV === 'development' ? 'kaifain-m.test.proginn.com' : 'kaifain.m.proginn.com'

export default {
  head() {
    return {
      bodyAttrs: {
        class: 'kaifain-view'
      }
    }
  },

  created() {
    if (process.client) {
      if (Cookies.get('x_app') || /(android|iphone|ipod)/i.test(window.navigator.userAgent)) {
        const source = window.location.href
        let target

        if (/\/(s|d)\/[0-9a-f]+/.test(source)) {
          target = source.replace(location.host, MOB_HOST)
        } else {
          target = `https://${MOB_HOST}/`
        }

        window.location.replace(target)
      }
    }
  }
}
</script>


<style lang="scss">
@import '@/kaifain_v2/assets/styles/icon.scss';

:root {
  font-size: 16px;
}

.kaifain-view {
  @import '@/kaifain_v2/assets/styles/buefy.scss';

  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Segoe UI,Arial,Roboto,PingFang SC,Hiragino Sans GB,Microsoft Yahei,sans-serif;
  background: #fff;

  .container {
    display: block;
  }

  .navbar {
    &> .container {
      display: flex;
      flex-direction: row;

      @media screen and (max-width: 1023px) {
        display: block;
      }
    }
  }

  .main {
    min-width: auto;
    min-height: auto;
    margin: 0;
  }

  .footer {
    padding: 0 0 1rem;
  }

  .connectUs {
    .toastBox .toastArea {
      .title {
        margin: 0;
        width: auto;
      }
      .tips {
        font-size: 12.5px;
        color: #999;
        margin: 4px 0 0;
        width: auto;
      }
      .submitBtn {
        margin-top: 24px;
        width: auto;
      }
    }
  }

  .el-dropdown-menu {
    padding: 6px 0;
  }

  .el-dropdown-menu__item {
    padding: 0 18px 0 16px;
  }

  #proginn-footer {
    .item-box {
      width: 100%;
    }
  }
}
</style>