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 {
   90px;
  height:32px;
  background: url("assets/images/JumpButton.png") no-repeat;
  background-size: 90px 32px;
  display: inline-block;
  margin-top: 30px;
}



 .JumpButton1 {
   130px;
  height:40px;
  background: url("assets/images/JumpButton.png") no-repeat;
  background-size: 130px 40px;
  display: inline-block;
  margin-top: 30px;
}
 



.JumpButton02 {
   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;50%;margin-left:35%;">
        <p class="freedomword">{{$t("FREEDOMINFO.STORIES01")}}</p> 
         </div>
        
        <div style="display:inline-block;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;50%;margin-left:35%;">
        <p class="freedomword">{{$t("FREEDOMINFO.STORIES02")}}</p> 
         </div>
        
        <div style="display:inline-block;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;50%;margin-left:35%;">
        <p class="freedomword">{{$t("FREEDOMINFO.STORIES03")}}</p>  
        </div>
        
        <div style="display:inline-block;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;65%;margin-left:35%;">
        <div class="freedomword">
        <span >  {{$t("FREEDOMINFO.STORIES04")}} </span>
       
        </div> 
         </div>
        
        <div style="display:inline-block;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;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;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;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;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- 1200px) {


.wai{
 1200px;
height: 100%;
background-color:fff;
}
.aaa{
  
   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 {
   100%;
  height: 100%;
}






.titleInfo2 {
  text-align: center;
  margin: 30px 50px;
  font-size: 48px;
}





.detailsTit1 {
  max- 500px;
  display: inline-block;
  text-align: center;
}















































}



@media screen and (min-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 {
   100%;
  height: 100%;
}






.titleInfo2 {
  text-align: center;
  margin: 30px 50px;
  font-size: 48px;
}





.detailsTit1 {
  max- 500px;
  display: inline-block;
  text-align: center;
}




}



</style>