amber 三种页面使用的方法和布局
1、main.js配置环境
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import VueI18n from 'vue-i18n' import Meta from 'vue-meta' import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' import '@/assets/css/font.css' // font css import '@/assets/js/common.js' // 移动端适配common Vue.config.productionTip = false Vue.use(VueI18n) Vue.use(Meta) Vue.use(Antd) //设置语言，默认是中文 var lang = localStorage.getItem("lang") || "en"; Vue.config.lang = lang; //很多时候，国际化因为英文名称一般长于中文名称，都需要重新对样式进行适配 // if (lang == "en") { // require('@/assets/css/common_en.css') // } else { // require('@/assets/css/common.css') // } // 分别引入不同的定义的语言文件 import zh from '@/views/lang/zh.js' //中文 import en from '@/views/lang/en.js' //英文 const messages = { zh, en }; // 遍历语言文件，挂载到vue的this上面 Object.keys(messages).forEach(function (lang) { Vue.locale(lang, messages[lang]); // console.log("动态改变") }); // 记录页面滚动位置 定义全局变量 // let homeScrollTop = 0; // Vue.prototype.$homeScroll = homeScrollTop; new Vue({ router, store, render: h => h(App) }).$mount('#app')
2、app.vue 调用组件，判断pc端移动端
<template> <div id="app" :class="langCss"> <div v-if="_isMobile()"> <Header02 @langCssType="langCssType"/> </div> <div v-else> <Header @langCssType="langCssType" /> </div> <router-view /> <div v-if="_isMobile()"> <Footer02 /> </div> <div v-else> <Footer /> </div> </div> </template> <script> // @ is an alias to /src import Header from "@/components/HEADER.vue"; import Header02 from "@/components/HEADER02.vue"; import Footer from "@/components/FOOTER.vue"; import Footer02 from "@/components/FOOTER02.vue"; export default { name: "App", components: { Header, Header02, Footer, Footer02, }, data() { return { langCss : window.localStorage.getItem('lang')||'en', Footera:'', } }, methods: { langCssType(num){ // console.log('num-----',num) switch(num){ case 1: this.langCss = 'zh'; break; case 2: this.langCss = 'en'; break; default: return; } }, _isMobile() { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) return flag; }, }, mounted(){ if(this._isMobile()){ //alert(" 手机端"); this.$router.replace('/home02') }else{ ////alert(" pc"); this.$router.replace('/home') }; Footera:{ if(this._isMobile()){ //alert(" 手机端"); this.Footera=Footer02 }else{ ////alert(" pc"); this.Footera=Footer } }; } }; </script> <style lang="scss"> body, html, div, form, ul, ol, li, span, a, p, dl, dd, dt, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; border: 0; } img, a img { border: 0; margin: 0; padding: 0; vertical-align: middle; } ul, ol, li { list-style: none; } input { font-family: "微软雅黑", Arial, "宋体"; border: 0 none; } /* 默认链接颜色 */ a { outline: none; text-decoration: none; color: #333; } a:active { star: expression(this.onFocus=this.blur()); } :focus { outline: 0; } #app { font-family: "Noto Sans SC", Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.8; font-size: 12px; color: #f2f1f0; } #app h2 { font-family: "Palanquin Dark", Avenir, Helvetica, Arial, sans-serif; font-size: 80px; font-weight: normal; line-height: 1.2; color: #f2f1f0; } #app h3 { font-size: 14px; font-weight: normal; line-height: 1.2; } .JumpButton { width: 90px; height:32px; background: url("assets/images/JumpButton.png") no-repeat; background-size: 90px 32px; display: inline-block; margin-top: 30px; } .JumpButton1 { width: 130px; height:40px; background: url("assets/images/JumpButton.png") no-repeat; background-size: 130px 40px; display: inline-block; margin-top: 30px; } .JumpButton02 { width: 120px; height:50px; background: url("assets/images/JumpButton.png") no-repeat; background-size: 120px 50px; display: inline-block; margin-top: 30px; } .blue { color: #a7d3ff; } .yellow { color: #f1b434; } .LightBlue { color: #def1f0; } .brown { color: #899796; } .white{ color: #f2f1f0 } </style>
3、普通页面布局
<template> <div class="wai"> <div class="aaa"> <div class="details1"> <h2> <span class="detailsTit1">{{$t("FREEDOMINFO.STORIES")}}</span> </h2> <div class="titleInfo1" >{{$t("FREEDOM.FREEDOMINFO")}} </div> <div class="freedom1"> <div style="display:inline-block;width:50%;margin-left:35%;"> <p class="freedomword">{{$t("FREEDOMINFO.STORIES01")}}</p> </div> <div style="display:inline-block;width:50%;margin-left:25%;"> <div class="freedomimg"><img src="../../assets/images/videoPh.jpg" width="100%" alt /> </div> </div> </div> <div class="freedom1"> <div style="display:inline-block;width:50%;margin-left:35%;"> <p class="freedomword">{{$t("FREEDOMINFO.STORIES02")}}</p> </div> <div style="display:inline-block;width:50%;margin-left:25%;"> <div class="freedomimg"><img src="../../assets/images/videoPh.jpg" width="100%" alt /> </div> </div> </div> <div class="freedom1"> <div style="display:inline-block;width:50%;margin-left:35%;"> <p class="freedomword">{{$t("FREEDOMINFO.STORIES03")}}</p> </div> <div style="display:inline-block;width:50%;margin-left:25%;"> <div class="freedomimg"><img src="../../assets/images/videoPh.jpg" width="100%" alt /> </div> </div> </div> <div class="freedom1"> <div style="display:inline-block;width:65%;margin-left:35%;"> <div class="freedomword"> <span > {{$t("FREEDOMINFO.STORIES04")}} </span> </div> </div> <div style="display:inline-block;width:50%;margin-left:25%;"> <div class="freedomimg"><img src="../../assets/images/videoPh.jpg" width="100%" alt /> </div> </div> </div> <div class="freedom1"> <div style="display:inline-block;width:50%;margin-left:35%;"> <div class="freedomword"> <span class="yellow">{{$t("FREEDOMINFO.MOTION")}}</span> {{$t("FREEDOMINFO.CONTROL")}} </div> </div> <div class="titleInfo2" >{{$t("FREEDOMINFO.CONTROLINFO")}} </div> </div> <div class="freedom1"> <div style="display:inline-block;width:50%;margin-left:35%;"> <div class="freedomword"> <span class="yellow">{{$t("FREEDOMINFO.MECHANICAL")}}</span> </div> </div> <div class="titleInfo2" >{{$t("FREEDOMINFO.MECHANICALINFO1")}} </div> <div class="titleInfo2" > {{$t("FREEDOMINFO.MECHANICALINFO2")}} </div> <div class="titleInfo2" > {{$t("FREEDOMINFO.MECHANICALINFO3")}} </div> </div> <div class="freedom1"> <div style="display:inline-block;width:50%;margin-left:35%;"> <div class="freedomword"> <span class="yellow">{{$t("FREEDOMINFO.FUNCTION")}}</span> </div> </div> <div class="titleInfo2" >{{$t("FREEDOMINFO.FUNCTIONINFO1")}} </div> <div class="titleInfo2" >{{$t("FREEDOMINFO.FUNCTIONINFO2")}} </div>1 </div> <div class="freedom1"> <div style="display:inline-block;width:50%;margin-left:25%;"> <div class="freedomimg"><img src="../../assets/images/motionControl.png" width="400px" height="100%" alt /> </div> </div> </div> </div> </div> </div> </template> <script> export default { name: "FreedomInfo02", data() { return { // scroll: 0 }; }, mounted() { // console.log("FreedomInfo"); }, //记录页面滚动位置 // activated() { // //this.$nextTick()异步执行dom刷新 // this.$nextTick(() => { // console.log(this.$homeScroll); // window.scrollTo(0, this.$homeScroll); // }); // }, // //离开路由时 // beforeRouteLeave(to, from, next) { // console.log(to); // //全局变量homeScroll默认为0 离开页面时 记录当前的页面滚动值 // this.$homeScroll = // document.documentElement.scrollTop || document.body.scrollTop; // //需要执行next函数 否则不起作用 // next(); // } }; </script> <style lang="scss" scoped> @media screen and (max-width: 1200px) { .wai{ width: 1200px; height: 100%; background-color:fff; } .aaa{ width: 100%; margin:auto } .details1 { // background-image: radial-gradient(100% 100%, #7b7f8c 0%, #868684 100%); background-image: radial-gradient( farthest-side circle at 82% 101%, #7b7f8c, #868684 ); box-shadow: inset 0 -1px 0 0 rgba(205, 208, 207, 0.2); padding: 50px 0; } .details1 h2 { text-align: center; } .titleInfo1 { text-align: center; margin: 30px 50px; font-size: 50px; } .freedom1{ background-image: radial-gradient( farthest-side circle at 82% 101%, #7b7f8c, #868684 ); box-shadow: inset 0 -1px 0 0 rgba(205, 208, 207, 0.2); } .freedomword{ font-size: 80px; } .freedomword2{ font-size: 45px; text-align: center; } .freedomimg img { width: 100%; height: 100%; } .titleInfo2 { text-align: center; margin: 30px 50px; font-size: 48px; } .detailsTit1 { max-width: 500px; display: inline-block; text-align: center; } } @media screen and (min-width:1200px){ .details1 { // background-image: radial-gradient(100% 100%, #7b7f8c 0%, #868684 100%); background-image: radial-gradient( farthest-side circle at 82% 101%, #7b7f8c, #868684 ); box-shadow: inset 0 -1px 0 0 rgba(205, 208, 207, 0.2); padding: 50px 0; } .details1 h2 { text-align: center; } .titleInfo1 { text-align: center; margin: 30px 50px; font-size: 50px; } .freedom1{ background-image: radial-gradient( farthest-side circle at 82% 101%, #7b7f8c, #868684 ); box-shadow: inset 0 -1px 0 0 rgba(205, 208, 207, 0.2); } .freedomword{ font-size: 80px; } .freedomword2{ font-size: 45px; text-align: center; } .freedomimg img { width: 100%; height: 100%; } .titleInfo2 { text-align: center; margin: 30px 50px; font-size: 48px; } .detailsTit1 { max-width: 500px; display: inline-block; text-align: center; } } </style>
