plugins中新建device.js文件
function isMoible(UA) {
return /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(UA);
}
export default (context) => {
context.app.router.beforeEach((to, from, next) => {
let userAgent = process.server ? context.req.headers["user-agent"] : navigator.userAgent;
let isMob = isMoible(userAgent);
process.isMob = isMob;
if (isMob && to.path === "/") {
next("/index-mob");
return
}
if (!isMob && to.path === "/index-mob") {
next("/");
return
}
if (isMob && !to.path.endsWith("-mob")) {
next(`${to.path}-mob`);
return
}
if (!isMob && to.path.endsWith("-mob")) {
next(to.path.substr(0, to.path.length - 4));
return
}
if (process.client && isMob) {
let htmlDom = document.getElementsByTagName("html")[0];
htmlDom.style.fontSize = `${100 * (htmlDom.clientWidth / 375)}px`
}
next();
})
}
在nuxt.config.js中plugins添加
plugins: [
{
src: '@/plugins/device.js',
ssr: true
}
],
index.vue
<template>
<div class="index-page-container">
<div class="column-container">
<div class="left-container">
<xhCarousel :carousels="pcBannerList" class="radius"/>
<xhTabs :channelId="activeChannelId" :tabs="normalList" :articles="articles" :onTabChange="onTabChange"/>
</div>
<div class="right-container">
<videoRecord :videos="liveInfoList"/>
<newsFlash :indexList="businessList" :newsFlashList="newsFlashList"/>
</div>
</div>
<hotTopic :hotSpecials="hotSpecials" v-if="hotSpecials.length"/>
<div class="column-container">
<div class="left-container">
<newsList :channelId="activeChannelId" :articles="articles" :total="articlesTotal" :loadMore="loadMore"/>
</div>
<div class="right-container">
<hotArticles :hotArticles="hotArticleList" v-if="hotArticleList.length"/>
<!--<goodSelected/>-->
</div>
</div>
</div>
</template>
<script>
import xhTabs from "../components/index/xh-tabs";
import videoRecord from "../components/index/video-record";
import newsFlash from "../components/index/news-flash/news-flash";
import hotTopic from "../components/index/hot-topic";
import newsList from "../components/index/news-list";
import hotArticles from "../components/index/hot-articles/hot-articles";
import goodSelected from "../components/index/good-selected";
import xhCarousel from "../components/index/xh-carousel"
import indexMixin from "../mixins/index"
export default {
components: {
xhTabs,
videoRecord,
newsFlash,
hotTopic,
newsList,
hotArticles,
goodSelected,
xhCarousel
},
mixins: [indexMixin]
};
</script>
<style lang="less">
.index-page-container {
width: 100%;
margin-bottom: 20px;
.column-container {
width: 1120px;
margin: 0 auto;
display: flex;
.left-container {
flex: 1;
margin-right: 22px;
overflow: hidden;
margin-top: 70px;
}
.right-container {
width: 265px;
margin-top: 70px;
}
}
}
</style>
index-mob.vue
<template>
<div class="index-mob-container">
<div class="index-has-padding-container">
<xhCarouselMob :carousels="pcBannerList" class="radius"/>
<xhTabsMob :tabs="normalList" :articles="articles" :onTabChange="onTabChange"/>
<videoRecord :videos="liveInfoList" class="mob" style="margin-top: 0.3rem;"/>
<newsFlash class="mob" style="margin-top: 0.1rem;" :indexList="businessList" :newsFlashList="newsFlashList"/>
</div>
<hotTopic class="mob" :hotSpecials="hotSpecials" v-if="hotSpecials.length"/>
<div class="index-has-padding-container" style="margin-top: 0.3rem">
<newsList :isMob="true" :articles="articles" :total="articlesTotal" :loadMore="loadMore"/>
<hotArticles class="mob" :hotArticles="hotArticleList" v-if="hotArticleList.length"/>
</div>
</div>
</template>
<script>
import xhCarouselMob from "../components/index-mob/xh-carousel-mob"
import xhTabsMob from "../components/index-mob/xh-tabs-mob"
import videoRecord from "../components/index/video-record"
import newsFlash from "../components/index/news-flash/news-flash";
import hotTopic from "../components/index/hot-topic";
import newsList from "../components/index/news-list";
import hotArticles from "../components/index/hot-articles/hot-articles";
import goodSelected from "../components/index/good-selected";
import indexMixin from "../mixins/index"
import flashMob from "../components/index-mob/flash-mob"
export default {
name: "index-mob",
layout: "default-mob",
components: {
xhCarouselMob,
xhTabsMob,
videoRecord,
newsFlash,
hotTopic,
newsList,
hotArticles,
goodSelected,
flashMob
},
mixins: [indexMixin]
}
</script>
<style scoped lang="less">
.index-mob-container {
padding: 0.7rem 0 0.3rem;
.index-has-padding-container {
width: 100%;
padding: 0 0.1rem;
}
}
</style>