首页更新响应式,公共头部和底部添加响应式

assets/productList.css

@@ -1,18 +1,49 @@
 .productCenter{
-  display: grid;
-  grid-template-columns: repeat(4,310px);
-  grid-gap: 25px;
+  display: flex;
+  flex-direction: column;
   box-sizing: border-box;
+  align-items: center;
 }
 .product{
-  display: block;
-  height: 380px;
+  display: flex;
+  flex-direction: column;
+  width: 96%;
+  /*height: 380px;*/
+  aspect-ratio:310/380;
   background-color: #fff;
   box-shadow: 1px 1px 3px black;
   border-radius: 3px;
   overflow: hidden;
   cursor: pointer;
   position: relative;
+  margin-bottom: 10px;
+}
+.product .imgBox{
+  display: block;
+  width: 100%;
+  /*height: 270px;*/
+  aspect-ratio:310/270;
+  flex-shrink: 1;
+}
+@media screen and (min-width: 1024px) {
+  .productCenter{
+    display: grid;
+    grid-template-columns: repeat(4,310px);
+    grid-gap: 25px;
+    box-sizing: border-box;
+  }
+  .product{
+    display: block;
+    width: 100%;
+    height: 380px;
+    background-color: #fff;
+    box-shadow: 1px 1px 3px black;
+    border-radius: 3px;
+    overflow: hidden;
+    cursor: pointer;
+    position: relative;
+    margin-bottom: 0;
+  }
 }
 .product:hover{
   box-shadow: 1px 1px 5px #3a3838;
@@ -44,11 +75,7 @@
   height: calc(100% - 270px);
   box-sizing: border-box;
 }
-.product .imgBox{
-  display: block;
-  width: 310px;
-  height: 270px;
-}
+
 .product:hover .imgBox img{
   left: -10px;
   top: -10px;

assets/public.css

@@ -146,8 +146,14 @@
 
 .footer-list{
   display: flex;
-  padding: 15px 0;
+  padding: 15px 5px;
   justify-content: space-between;
+  flex-wrap: wrap;
+}
+@media screen and (min-width: 1024px) {
+  .footer-list{
+    padding: 15px 0;
+  }
 }
 .footer-list .footerItem{
   /*width: calc(1320px / 5);*/
@@ -167,15 +173,12 @@
 }
 
 .big-title{
-  height: 80px;
-  font-size: 2.5em;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 70px;
-  margin-bottom: 70px;
   letter-spacing: 0.5rem;
   position: relative;
+  cursor: default;
 }
 
 .big-title .hr{
@@ -235,3 +238,8 @@
   -ms-overflow-style: none; /* IE 10+ */
 }
 
+/*css 变量,根据媒体查询得出 */
+:root {
+  --primary-color: #3f51b5;
+
+}

components/banner/banner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="banner">
+  <div class="banner " v-ratio="(baseHeight/baseWidth)">
 
     <!--      轮播图片,通过show切换-->
     <div
@@ -54,8 +54,8 @@ export default {
       banners:[{
         id: '1',
         url:'#/recommends',
-        title: '',
-        text: '',
+        title: 'text',
+        text: '1234',
         img:'image/banner/index.jpg',
         diffColor: "#000"
       },{
@@ -77,10 +77,29 @@ export default {
       bannerIndex:0,
       timer:null,
       showText: false,
+      baseWidth: 1903,
+      baseHeight: 630,
+      // 比例
     }
 },mounted() {
     this.cursor()
   },
+  directives: {
+    // 为元素设定比例
+    ratio: {
+      bind: function (el, binding) {
+        // 如果没有传入比例值，则默认为1
+        let ratio = binding.value || 1;
+        let width = el.offsetWidth;
+        let finalHeight = width * ratio;
+        // 防止高度过低导致影响美观
+        if (width < 1000) {
+          finalHeight+= 50;
+        }
+        el.style.height = finalHeight + 'px'
+      }
+    }
+  },
   methods:{
     cursor(){
       clearTimeout(this.timer);

components/footer/defaultFooter.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class='content footer'>
-    <div class='conBox'>
+  <div class='w-screen pad:w-full footer'>
+    <div class='container mx-auto'>
 
       <div class='footer-list'>
         <div class="footerItem"
@@ -11,7 +11,7 @@
           <a
             v-for="(subItem,subI) in item.items"
             :key="`footer-${item.key}-item-${subI}`"
-            :href="subItem.src"
+            :href="subItem.href"
             class="footer-list-item">
             {{lang===langType.cn?subItem.text:getAbbrText(subItem.text)}}
           </a>
@@ -26,6 +26,7 @@
 
 <script>
 import langMap from "~/map/langMap";
+import {productMenus} from "~/map/productMap";
 export default {
   name:"defaultFooter",
   props:{
@@ -43,81 +44,44 @@ export default {
           items: [
             {
               text: '公司简介',
-              src: '/about',
+              href: '/about',
             },
             {
               text: '招贤纳士',
-              src: '/jobs',
+              href: '/jobs',
             },
             {
               text: '产品购买',
-              src: '/buy',
+              href: '/buy',
               showType: 2,
               show: '产品购买服务请联系  刘工15817487997微信同号'
             },
             {
               text: '诚招代理',
-              src: '/agency',
+              href: '/agency',
             },
             {
               text: '联系我们',
-              src: '/contact',
+              href: '/contact',
             }
           ],
         },
         {
           title: "智能产品",
           key: 'product',
-          items: [
-            {
-              text: '公司简介',
-              src: '/about',
-            },
-            {
-              text: '招贤纳士',
-              src: '/jobs',
-            },
-            {
-              text: '产品购买',
-              src: '/buy',
-              showType: 2,
-              show: '产品购买服务请联系  刘工15817487997微信同号'
-            },
-            {
-              text: '诚招代理',
-              src: '/agency',
-            },
-            {
-              text: '联系我们',
-              src: '/contact',
-            }
-          ],
+          items: productMenus,
         },
         {
           title: "服务与支持",
           key: 'support',
           items: [
             {
-              text: '公司简介',
-              src: '/about',
-            },
-            {
-              text: '招贤纳士',
-              src: '/jobs',
-            },
-            {
-              text: '产品购买',
-              src: '/buy',
-              showType: 2,
-              show: '产品购买服务请联系  刘工15817487997微信同号'
-            },
-            {
-              text: '诚招代理',
-              src: '/agency',
+              text: '技术支持',
+              href: '/support',
             },
             {
-              text: '联系我们',
-              src: '/contact',
+              text: '资料下载',
+              href: '/support',
             }
           ],
         },
@@ -127,7 +91,7 @@ export default {
           items: [
             {
               text: '管理平台',
-              src: 'https://gpscore.net/',
+              href: 'https://gpscore.net/',
             },
           ],
         },
@@ -137,11 +101,11 @@ export default {
           items: [
             {
               text: '中文',
-              src: '/',
+              href: '/',
             },
             {
               text: 'en',
-              src: '/index_en',
+              href: '/index_en',
             },
           ],
         },

components/header/lucencyHeader.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="header w-screen h-12 pad:h-32  static pad:fixed flex justify-center flex-col items-center">
+  <div class="header w-screen pad:w-full h-12 pad:h-32  static pad:fixed flex justify-center flex-col items-center">
     <div class="container
           flex-shrink
           flex h-10 pad:h-24 justify-center items-center
           pad:justify-start pad:items-start
           ">
-      <a class="w-48 pad:w-64 pc:w-72 flex-shrink-0 z-50" href="/">
+      <a class="w-48 pad:w-64 pc:w-72 flex-shrink-0 z-40" href="/">
         <img src="/headerLogo.png" alt="" class="logo">
       </a>
       <div class="hidden pad:flex w-full h-full items-center ">
@@ -51,16 +51,18 @@
           />
         </li>
       </ul>
-      <div :class="`search-box absolute right-0 top-0 ${searchShow?'search-box-show':''}`"
+      <div :class="`search-box absolute right-0 top-0 z-50 ${searchShow?'search-box-show':''}`"
            v-click-outside="hideSearch"
-
       >
-        <div class="search">
+        <div class="search" @click="switchSearch">
           <input type="text" v-model="searchKey"
                  placeholder="搜索咨询与产品">
           <button @click="searchItem" >
             <svg-icon icon-class="search" />
           </button>
+          <div class="phoneClose" @click.stop="hideSearch">
+            <svg-icon icon-class="close" />
+          </div>
         </div>
       </div>
     </div>
@@ -208,7 +210,7 @@ export default {
       this.$root.$emit('changeLang');
     },
     searchItem(){
-
+      console.log('searching....')
     },
     showSubMenu(item){
       // console.log("0000000")
@@ -249,6 +251,18 @@ export default {
         console.log('切换按钮显示隐藏')
         this.isShow = !this.isShow;
       }
+    },
+    hideSearch(){
+      console.log('hide search')
+      this.searchShow = false;
+    },
+    showSearch(){
+      this.searchShow = true;
+    },
+    switchSearch(){
+      if(!this.searchShow){
+        this.showSearch();
+      }
     }
   }
 }
@@ -420,6 +434,12 @@ export default {
   transition: width 0.6s;
   box-shadow: 1px 1px 4px red ;
 }
+.search-box-show{
+  width: 200px;
+}
+.header-menu-phone .search-box-show{
+  width: 100%;
+}
 .search-box .search{
   height: 26px;
   width: 100%;
@@ -429,6 +449,30 @@ export default {
   position: relative;
   background-color: transparent;
 }
+.header-menu-phone .search-box-show .search{
+  background-color: #fff;
+  height: 30px;
+  border-radius: 30px;
+}
+.search-box .search .phoneClose{
+  width: 26px;
+  height: 26px;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: #1a1a1a;
+  cursor: pointer;
+  display: none;
+}
+.header-menu-phone .search-box-show .search .phoneClose{
+  display: flex;
+  width: 30px;
+  height: 30px;
+  font-size: 1.2rem;
+}
+
 .search > * {
   outline: none;
 }
@@ -441,15 +485,29 @@ export default {
   padding-right: 15px;
   font-size: 0.85em;
 }
+.header-menu-phone .search-box-show .search > input{
+  padding-left: 30px;
+  height: 30px;
+  border-radius: 30px;
+}
 .search > button{
-  display: block;
+  display: flex;
   width: 24px;
   height: 24px;
   position: absolute;
   top: 0;
   right: 3px;
+  font-size: 1.2rem;
+  justify-content: center;
+  align-items: center;
+}
+.header-menu-phone .search-box-show .search > button{
+  left: 2px;
+  right: auto;
+  width: 30px;
+  height: 30px;
 }
-.search > button:hover{
+.search:hover > button{
   color: orange;
 }
 </style>

components/header/menuDrops/menuDrop.vue

@@ -35,33 +35,7 @@
 <script>
 import langMap from "~/map/langMap";
 import handle from "~/until/handle";
-const productMenus = [
-  {
-    text: "M2M产品",
-    typeKey: "m2m",
-    href: '/m2m'
-  },
-  {
-    text: "AI摄像头",
-    typeKey: "aiCam",
-    href: '/aiCam'
-  },
-  {
-    text: "智能终端",
-    typeKey: "sm",
-    href: '/sm'
-  },
-  {
-    text: "4G低功耗摄像头",
-    typeKey: "low",
-    href: '/low'
-  },
-  {
-    text: "自动变焦双目协同摄像头",
-    typeKey: "cam",
-    href: '/cam'
-  }
-];
+import {productMenus} from "~/map/productMap";
 /**
  * 解决方案
  * @type {[{typeKey: string, text: string}, {typeKey: string, text: string}]}

components/newCenter.vue

@@ -1,12 +1,7 @@
 <template>
-  <div class="content">
-    <div class="conBox big-title">
-      <span>
-        {{lang===langType.cn?"新闻中心":getAbbrText("新闻中心")}}
-      </span>
-      <div class="hr"></div>
-    </div>
-    <div class="conBox newView">
+  <div class="w-screen pad:w-full">
+    <big-title>{{lang===langType.cn?"新闻中心":getAbbrText("新闻中心")}}</big-title>
+    <div class="container mx-auto newView">
       <a
         v-for="(news,i) in newArr"
         :key="news.key"
@@ -31,7 +26,9 @@
         </p>
       </a>
     </div>
-    <a class="conBox show-more" :href="hrefs.news">查看更多</a>
+    <div class="container mx-auto">
+      <a class=" show-more" :href="hrefs.news">查看更多</a>
+    </div>
   </div>
 </template>
 
@@ -116,14 +113,9 @@ export default {
 
 <style scoped>
 .newView{
-  display: grid;
-  grid-template-columns: repeat(3);
-  grid-template-rows: repeat(2,260px);
-  grid-template-areas:
-    'a b c'
-    'a d e'
-  ;
-  margin-bottom: 35px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
 .newView .newChunk{
   box-shadow: 0 0 1px black;
@@ -132,7 +124,23 @@ export default {
   cursor: pointer;
   box-sizing: border-box;
   padding: 15px 35px;
+  width: 96%;
 }
+@media screen and (min-width: 1024px) {
+  .newView{
+    display: grid;
+    grid-template-columns: repeat(3);
+    grid-template-rows: repeat(2,260px);
+    grid-template-areas:
+    'a b c'
+    'a d e';
+    margin-bottom: 35px;
+  }
+  .newView .newChunk{
+    width: 100%;
+  }
+}
+
 .newView .newChunk:hover{
   box-shadow: 2px 2px 6px #484444;
 }

components/newsTypes.vue

@@ -1,11 +1,8 @@
 <template>
   <div class="content">
-    <div class="conBox big-title">
-      <span>
-        {{lang===langType.cn?"新闻中心":getAbbrText("新闻中心")}}
-      </span>
-      <div class="hr"></div>
-    </div>
+    <big-title>
+      {{lang===langType.cn?"新闻中心":getAbbrText("新闻中心")}}
+    </big-title>
     <div class="conBox product-type">
       <p
         v-for="(item,i) in types"

components/productCenter.vue

@@ -1,12 +1,7 @@
 <template>
-  <div class="content">
-    <div class="conBox big-title">
-      <span>
-        {{lang===langType.cn?"产品中心":getAbbrText("产品中心")}}
-      </span>
-      <div class="hr"></div>
-    </div>
-    <div class="conBox productCenter">
+  <div class="w-screen pad:w-full">
+    <big-title>{{lang===langType.cn?"产品中心":getAbbrText("产品中心")}}</big-title>
+    <div class="container mx-auto productCenter">
         <a class="product"
            v-for="(product,i) in products"
            :key="'pro-'+product.key"

components/productTypes.vue

@@ -1,11 +1,6 @@
 <template>
-  <div class="content">
-    <div class="conBox big-title">
-      <span>
-        {{lang===langType.cn?"产品类别":getAbbrText("产品类别")}}
-      </span>
-      <div class="hr"></div>
-    </div>
+  <div class="w-screen pad:w-full">
+    <big-title>{{lang===langType.cn?"产品类别":getAbbrText("产品类别")}}</big-title>
     <div class="conBox product-type">
       <p
         v-for="(item,i) in types"

components/public/bigTitle.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="big-title container mx-auto flex justify-center items-center h-16 pad:h-20 text-2xl pad:text-3xl my-2
+        pad:my-6">
+      <span>
+        <slot></slot>
+
+      </span>
+    <div class="hr"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "bigTitle",
+
+}
+</script>
+
+<style scoped>
+
+</style>

components/showingStand.vue

@@ -1,16 +1,11 @@
 <template>
-  <div class="content">
-    <div class="conBox big-title">
-      <span>
-        {{lang===langType.cn?"关于我们":getAbbrText("关于我们")}}
-      </span>
-      <div class="hr"></div>
-    </div>
-    <div class="conBox showing">
+  <div class="w-screen pad:w-full">
+    <big-title>{{lang===langType.cn?"关于我们":getAbbrText("关于我们")}}</big-title>
+    <div class="container mx-auto showing">
       <a
         v-for="(item,i) in chunkItems"
         :class="`chunk imgBox chunk${(i+1)}`"
-         :key="item.id"
+        :key="item.id"
         :href="item.href"
       >
 <!--         实时管理(物联网) -->
@@ -44,7 +39,25 @@ export default {
     return {
       langType: langMap.lang,
       // chunk 1-7
-      chunkItems:showingStandData
+      chunkItems:showingStandData,
+      baseWidth: 425,
+      baseHeight: 350,
+    }
+  },
+  directives: {
+    // 为元素设定比例
+    ratio: {
+      bind: function (el, binding) {
+        // 如果没有传入比例值，则默认为1
+        let ratio = binding.value || 1;
+        let width = el.offsetWidth;
+        let finalHeight = width * ratio;
+        // 防止高度过低导致影响美观
+        if (width < 1000) {
+          finalHeight+= 50;
+        }
+        el.style.height = finalHeight + 'px'
+      }
     }
   },
   methods: {
@@ -60,16 +73,10 @@ export default {
 
 <style scoped>
 
-
 .showing{
-  display: grid;
-  grid-template-columns: repeat(3, 425px);
-  grid-template-rows: repeat(3, 350px);
-  grid-template-areas:
-    'a b c'
-    'd d c'
-    'e f g';
-  grid-gap: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 .showing .chunk {
   box-shadow: 1px 1px 3px black;
@@ -78,11 +85,11 @@ export default {
   position: relative;
   overflow: hidden;
   cursor: pointer;
+  width: 96%;
+  aspect-ratio:425/350;
+  margin-bottom: 10px;
 }
 
-.showing .chunk:hover{
-  box-shadow: 1px 1px 3px deepskyblue;
-}
 
 
 .showing .chunk:hover > img{
@@ -142,9 +149,11 @@ export default {
 }
 .showing .chunk3{
   grid-area: c;
+  aspect-ratio:425/710;
 }
 .showing .chunk4{
   grid-area: d;
+  aspect-ratio:870/340;
 }
 .showing .chunk5{
   grid-area: e;
@@ -155,4 +164,41 @@ export default {
 .showing .chunk7{
   grid-area: g;
 }
+@media screen and (min-width: 1024px) {
+  /* 其他针对移动设备的样式 */
+  .showing{
+    display: grid;
+    grid-template-columns: repeat(3, 425px);
+    grid-template-rows: repeat(3, 350px);
+    grid-template-areas:
+    'a b c'
+    'd d c'
+    'e f g';
+    grid-gap: 20px;
+  }
+  .showing .chunk {
+    box-shadow: 1px 1px 3px black;
+    box-sizing: border-box;
+    /*padding:5px;*/
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    aspect-ratio:425/350;
+    margin-bottom: 0;
+    width: 100%;
+  }
+
+  .showing .chunk:hover{
+    box-shadow: 1px 1px 3px deepskyblue;
+  }
+  .showing .chunk3{
+    grid-area: c;
+    aspect-ratio:425/710;
+  }
+  .showing .chunk4{
+    grid-area: d;
+    aspect-ratio:870/340;
+  }
+}
+
 </style>

components/siteBar.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="site-bar">
+  <div class="site-bar" v-show="1">
     <div class="btn wechat">
       <svg-icon icon-class="wechat"  />
-      <img class="show-img" :src="wechatSrc" alt="">
+      <img class="show-img z-50" :src="wechatSrc" alt="">
     </div>
     <div class="btn top" @click="toTop" >
       <svg-icon icon-class="top" />
@@ -24,6 +24,31 @@ export default {
       default: ''
     }
   },
+  // 指令
+  directives:{
+    // 滚动超过一屏时显示元素,否则隐藏
+    show:{
+      inserted(el){
+        const elHeight = el.offsetHeight;
+        const winHeight = window.innerHeight;
+        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+        if (elHeight + scrollTop > winHeight){
+          el.style.display = 'block';
+        }else{
+          el.style.display = 'none';
+        }
+        window.addEventListener('scroll',()=>{
+          const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+          if (elHeight + scrollTop > winHeight){
+            el.style.display = 'block';
+          }else{
+            el.style.display = 'none';
+          }
+        })
+      }
+    }
+
+  },
   methods: {
     toTop() {
       // 缓慢移动到顶部
@@ -41,9 +66,15 @@ export default {
   width: 50px;
   height: auto;
   position: fixed;
-  right: 180px;
-  bottom: 30%;
-  transform: translateY(-50%);
+  right: 30px;
+  bottom: 30px;
+  /*transform: translateY(-50%);*/
+}
+@media screen and (min-width: 1024px) {
+  .site-bar{
+    right: 180px;
+    bottom: 26%;
+  }
 }
 .site-bar .btn{
   width: 50px;

components/solutionTypes.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="content">
-    <div class="conBox big-title">
-      <span>
-        {{lang===langType.cn?"解决方案":getAbbrText("解决方案")}}
-      </span>
-      <div class="hr"></div>
-    </div>
+    <big-title>{{lang===langType.cn?"解决方案":getAbbrText("解决方案")}}</big-title>
     <div class="conBox product-type">
       <p
         v-for="(item,i) in types"

map/productMap.js

@@ -36,6 +36,34 @@ export const pTypes = [
   },
 ]
 
+export const productMenus = [
+  {
+    text: "M2M产品",
+    typeKey: "m2m",
+    href: '/m2m'
+  },
+  {
+    text: "AI摄像头",
+    typeKey: "aiCam",
+    href: '/aiCam'
+  },
+  {
+    text: "智能终端",
+    typeKey: "sm",
+    href: '/sm'
+  },
+  {
+    text: "4G低功耗摄像头",
+    typeKey: "low",
+    href: '/low'
+  },
+  {
+    text: "自动变焦双目协同摄像头",
+    typeKey: "cam",
+    href: '/cam'
+  }
+];
+
 export function getTypeText (key){
   let item = pTypes.find(val=>val.key === key);
   if(item&&item.text){

nuxt.config.js

@@ -97,7 +97,11 @@ export default {
     generate: {
       routes:
         [
-          '/product/m2m', '/product/aiCam', '/product/sm', '/product/low', '/product/cam',
+          '/product/m2m',
+          '/product/aiCam',
+          '/product/sm',
+          '/product/low',
+          '/product/cam',
           '/product/item/m2m',
           '/product/item/aiCam',
           '/product/item/sm',
@@ -106,6 +110,9 @@ export default {
           '/solution/sol',
           '/solution/acs',
           '/solution/epower',
+          '/solution/item/sol',
+          '/solution/item/acs',
+          '/solution/item/epower',
           '/news/com',
           '/news/pa',
           '/news/in',

pages/about/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="about-us">
-    <lucency-header :lang="lang" page-key="solution" />
+    <lucency-header :lang="lang" page-key="about" :is-phone="isPhone" />
     <item-banner :title="'深圳市合方圆科技开发有限公司'" :sub-title="'专致执着，追求无限卓越'"></item-banner>
 
     <div class="conBox big-title">
@@ -129,6 +129,7 @@
 <script>
 import langMap from "@/map/langMap";
 import defaultFooter from "~/components/footer/defaultFooter";
+import {isMediaView} from "@/until/mediaView";
 export default {
   name: "aboutIndex",
   props:['uLang'],
@@ -136,7 +137,27 @@ export default {
     return {
       langType: langMap.lang,
       lang: this.uLang?this.uLang:langMap.lang.cn,
+      isPhone: false,
     }
+  },
+  mounted() {
+    this.$root.$on('changeLang',this.switchLang)
+    this.isPhone = isMediaView(0,1024);
+  },
+  methods:{
+    switchLang(nextLang){
+      // console.log("11111111111111111")
+      if(nextLang){
+        this.lang = nextLang;
+      }else{
+        if(this.lang === langMap.lang.cn){
+          this.lang = langMap.lang.en
+        }else{
+          this.lang = langMap.lang.cn
+        }
+      }
+    },
+
   }
 }
 </script>
@@ -151,6 +172,9 @@ export default {
   margin-bottom: 20px;
   justify-content: flex-start;
 }
+.big-title .hr{
+  margin-bottom: -5px;
+}
 .title{
   font-size: 20px;
   font-weight: bold;

pages/ad/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <lucency-header :lang="lang" page-key="news" />
+    <lucency-header :lang="lang" page-key="news" :is-phone="isPhone"/>
     <item-banner :title="'合方圆'" :sub-title="'专致执着，追求无限卓越'"></item-banner>
 
     <showing-ad :lang="lang"/>
@@ -13,6 +13,7 @@
 
 <script>
 import langMap from "@/map/langMap";
+import {isMediaView} from "@/until/mediaView";
 
 export default {
   name: "adIndex",
@@ -21,8 +22,13 @@ export default {
     return {
       langType: langMap.lang,
       lang: this.uLang?this.uLang:langMap.lang.cn,
+      isPhone: false,
     }
   },
+  mounted() {
+    this.$root.$on('changeLang',this.switchLang)
+    this.isPhone = isMediaView(0,1024);
+  },
   methods:{
     getLangText(str) {
       return langMap.getText(this.lang, str);
@@ -30,6 +36,18 @@ export default {
     getAbbrText(str) {
       return langMap.getAbbrText(this.lang, str);
     },
+    switchLang(nextLang){
+      // console.log("11111111111111111")
+      if(nextLang){
+        this.lang = nextLang;
+      }else{
+        if(this.lang === langMap.lang.cn){
+          this.lang = langMap.lang.en
+        }else{
+          this.lang = langMap.lang.cn
+        }
+      }
+    },
   }
 }
 </script>

pages/ad/zhny/index.vue

@@ -1,7 +1,7 @@
 <template>
 <!--  一个宣传页 -->
   <div class="content">
-    <lucency-header :lang="lang" page-key="solution" />
+    <lucency-header :lang="lang" page-key="solution" :is-phone="isPhone"/>
     <item-banner :title="'合方圆'" :sub-title="'综合能源管理平台解决方案'"></item-banner>
     <div class="conBox">
       <pdf v-for="i in totalPage" :page="i" :key="i" :src="blobSrc"></pdf>
@@ -15,6 +15,7 @@
 
 <script>
 import langMap from "@/map/langMap";
+import {isMediaView} from "@/until/mediaView";
 
 
 export default {
@@ -26,9 +27,12 @@ export default {
       lang: this.uLang?this.uLang:langMap.lang.cn,
       blobSrc: null,
       totalPage: 0,
+      isPhone: false,
     }
   },
   mounted(){
+    this.$root.$on('changeLang',this.switchLang)
+    this.isPhone = isMediaView(0,1024);
     this.loadPdf();
   },
   methods:{
@@ -38,6 +42,18 @@ export default {
     getAbbrText(str) {
       return langMap.getAbbrText(this.lang, str);
     },
+    switchLang(nextLang){
+      // console.log("11111111111111111")
+      if(nextLang){
+        this.lang = nextLang;
+      }else{
+        if(this.lang === langMap.lang.cn){
+          this.lang = langMap.lang.en
+        }else{
+          this.lang = langMap.lang.cn
+        }
+      }
+    },
     loadPdf(){
       this.blobSrc = this.$pdf.createLoadingTask({ url: "/file/zhny.pdf" });
       this.blobSrc.promise.then(pdf => {

pages/errorPage/404.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <lucency-header :lang="lang" page-key="news" />
+    <lucency-header :lang="lang" page-key="news" :is-phone="isPhone" />
     <item-banner :title="'合方圆'" :sub-title="'专致执着，追求无限卓越'"></item-banner>
     <div class="conBox err-404">
       <div class="error404">
@@ -19,6 +19,7 @@
 
 <script>
 import langMap from "~/map/langMap";
+import {isMediaView} from "@/until/mediaView";
 
 export default {
   name: "error404",
@@ -27,8 +28,13 @@ export default {
     return {
       langType: langMap.lang,
       lang: this.uLang?this.uLang:langMap.lang.cn,
+      isPhone: false,
     }
   },
+  mounted() {
+    this.$root.$on('changeLang',this.switchLang)
+    this.isPhone = isMediaView(0,1024);
+  },
   methods:{
     getLangText(str) {
       return langMap.getText(this.lang, str);
@@ -36,6 +42,18 @@ export default {
     getAbbrText(str) {
       return langMap.getAbbrText(this.lang, str);
     },
+    switchLang(nextLang){
+      // console.log("11111111111111111")
+      if(nextLang){
+        this.lang = nextLang;
+      }else{
+        if(this.lang === langMap.lang.cn){
+          this.lang = langMap.lang.en
+        }else{
+          this.lang = langMap.lang.cn
+        }
+      }
+    },
   }
 }
 </script>

pages/index.vue

@@ -1,15 +1,16 @@
 <template>
-  <div class="w-screen relative">
+  <div class="w-screen pad:w-full relative">
 <!--    header 部分布局-->
     <lucency-header :lang="lang" page-key="index" :is-phone="isPhone" />
     <banner :wait-time="2500"/>
-
+    <new-center v-if="isPhone" :lang="lang"/>
+    <product-center v-if="isPhone" :lang="lang"/>
 <!--    优势项目部分展示,参考海康-->
     <showing-stand :lang="lang"/>
 <!--    产品中心,参考大华,动态加载这部分内容-->
-    <product-center :lang="lang"/>
+    <product-center v-if="!isPhone" :lang="lang"/>
 <!--    新闻中心-->
-    <new-center :lang="lang"/>
+    <new-center v-if="!isPhone" :lang="lang"/>
 <!--    页脚 -->
     <default-footer :lang="lang"/>
 
@@ -33,14 +34,12 @@ export default {
   data(){
     return {
       lang: this.uLang?this.uLang:langMap.lang.cn,
-      isPhone: false
+      isPhone: false,
     }
   },
   mounted() {
     this.$root.$on('changeLang',this.switchLang)
     this.isPhone = isMediaView(0,1024);
-    console.log(this.isPhone);
-    console.log(`this.isPhone:${this.isPhone}`);
   },
   methods:{
     switchLang(nextLang){

pages/news/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <lucency-header :lang="lang" page-key="news" />
+    <lucency-header :lang="lang" page-key="news" :is-phone="isPhone"/>
     <item-banner :lang="lang" :title="`新闻中心`" :sub-title="`行业资讯,高新技术一应俱全`"/>
     <news-types :lang="lang" :type="type"></news-types>
     <solution-list :lang="lang" :solution-list="news" :parent-type="'news'"></solution-list>
@@ -18,6 +18,7 @@ import qs from "qs";
 
 import langMap from "@/map/langMap";
 import handle from "@/until/handle";
+import {isMediaView} from "@/until/mediaView";
 
 const pageLimit = 5;
 export default {
@@ -62,10 +63,12 @@ export default {
       news: this.pNews?this.pNews:[],
       pageSave: {
 
-      }
+      },
+      isPhone: false
     }
   },
   mounted() {
+    this.isPhone = isMediaView(0,1024);
     this.$root.$on('changeLang',this.switchLang);
     this.$root.$on('changeNewsType',this.selectType);
     this.$root.$on('changePage',this.changePageHandle);

pages/news/item/index.vue

@@ -1,16 +1,13 @@
 <template>
   <div class="content">
-    <lucency-header :lang="lang" page-key="news" />
+    <lucency-header :lang="lang" page-key="news" :is-phone="isPhone" />
     <item-banner :title="'合方圆'" :sub-title="solutionDetail.title"></item-banner>
-    <div class="conBox big-title">
-      <span >
-        {{solutionDetail.title}}
-      </span>
-      <div class="hr"></div>
+    <big-title>
+      {{solutionDetail.title}}
       <span class="author">
         {{solutionDetail.author}}
       </span>
-    </div>
+    </big-title>
     <div class="conBox solution-view" v-html="solutionDetail.content">
     </div>
     <div class="conBox solution-info">
@@ -34,6 +31,7 @@ import {getTypeSubText, getTypeText} from "~/map/newMap";
 import handle from "~/until/handle";
 import {timestampToTime} from "~/until/time";
 import {unescapeHtml} from "~/until/unescapeHtml";
+import {isMediaView} from "@/until/mediaView";
 
 export default {
   name: "newsItemIndex",
@@ -48,6 +46,7 @@ export default {
       productTypeText: getTypeText(this.pType),
       productTypeSubText: getTypeSubText(this.pType),
       timer: null,
+      isPhone: false,
     }
   },
   beforeMount() {
@@ -63,6 +62,12 @@ export default {
       this.addRead();
     },1000*10)
   },
+  mounted() {
+    this.$root.$on('changeLang',this.switchLang)
+    this.isPhone = isMediaView(0,1024);
+    // console.log(this.isPhone);
+    // console.log(`this.isPhone:${this.isPhone}`);
+  },
   beforeDestroy() {
     if (this.timer){
       clearTimeout(this.timer);

pages/product/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="">
-    <lucency-header :lang="lang" page-key="product" />
+    <lucency-header :lang="lang" page-key="product" :is-phone="isPhone"/>
 <!--    推荐广告-->
     <product-banner :lang="lang" />
 <!--    产品类别 -->
@@ -20,6 +20,7 @@ import productBanner from "@/components/banner/productBanner";
 import qs from "qs"
 import axios from "axios"
 import handle from "~/until/handle";
+import {isMediaView} from "@/until/mediaView";
 export default {
   name: "index",
   props:['uLang','pType','pKey','pProduct'],
@@ -63,10 +64,12 @@ export default {
       products: this.pProduct?this.pProduct:[],
       pageSave: {
 
-      }
+      },
+      isPhone: false
     }
   },
   mounted() {
+    this.isPhone = isMediaView(0,1024);
     this.$root.$on('changeLang',this.switchLang);
     this.$root.$on('searchProductKey',this.changeProductKeyHandle);
     this.$root.$on('changeProductType',this.selectType);

pages/product/item/index.vue

@@ -1,13 +1,8 @@
 <template>
   <div class="content">
-    <lucency-header :lang="lang" page-key="product" />
+    <lucency-header :lang="lang" page-key="product" :is-phone="isPhone" />
     <item-banner :title="productTypeText" :sub-title="productTypeSubText"></item-banner>
-    <div class="conBox big-title">
-      <span >
-        {{productDetail.name}}
-      </span>
-      <div class="hr"></div>
-    </div>
+    <big-title>{{productDetail.name}}</big-title>
     <div class="conBox product-view">
       <div class="left">
         <div class="imgView">
@@ -50,6 +45,7 @@ import qTab from "../../../components/qTab";
 import DefaultFooter from "../../../components/footer/defaultFooter";
 import LucencyHeader from "../../../components/header/lucencyHeader";
 import ItemBanner from "../../../components/banner/itemBanner";
+import {isMediaView} from "@/until/mediaView";
 
 export default {
   name: "itemIndex",
@@ -65,6 +61,7 @@ export default {
       productTypeText: getTypeText(this.pType),
       productTypeSubText: getTypeSubText(this.pType),
       productDetail: {},
+      isPhone: false,
     }
   },
   beforeMount() {
@@ -80,6 +77,7 @@ export default {
   mounted() {
     console.log(this.pType);
     console.log(this.type);
+    this.isPhone = isMediaView(0,1024);
     this.type = this.pType;
   },
   methods:{

pages/solution/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="">
-    <lucency-header :lang="lang" page-key="solution" />
+    <lucency-header :lang="lang" page-key="solution" :is-phone="isPhone" />
     <item-banner :lang="lang" :title="`解决方案`" :sub-title="`专业,高效,稳定解决方案`"/>
     <solution-types :lang="lang" :type="type"></solution-types>
     <solution-list :lang="lang" :solution-list="solutions"></solution-list>
@@ -23,6 +23,7 @@ import solutionList from "~/components/solutionList";
 import langMap from "~/map/langMap";
 import handle from "~/until/handle";
 import axios from "axios";
+import {isMediaView} from "@/until/mediaView";
 
 const pageLimit = 5;
 export default {
@@ -73,10 +74,12 @@ export default {
       solutions:this.pSolution?this.pSolution:[],
       pageSave: {
 
-      }
+      },
+      isPhone: false
     }
   },
   mounted() {
+    this.isPhone = isMediaView(0,1024);
     this.$root.$on('changeLang',this.switchLang);
     this.$root.$on('changeSolutionType',this.selectType);
     this.$root.$on('changePage',this.changePageHandle);

pages/solution/item/index.vue

@@ -1,16 +1,13 @@
 <template>
   <div class="content">
-    <lucency-header :lang="lang" page-key="solution" />
+    <lucency-header :lang="lang" page-key="solution" :is-phone="isPhone"/>
     <item-banner :title="productTypeText" :sub-title="productTypeSubText"></item-banner>
-    <div class="conBox big-title">
-      <span >
-        {{solutionDetail.title}}
-      </span>
-      <div class="hr"></div>
+    <big-title>
+      {{solutionDetail.title}}
       <span class="author">
         {{solutionDetail.author}}
       </span>
-    </div>
+    </big-title>
     <div class="conBox solution-view" v-html="solutionDetail.content">
     </div>
     <div class="conBox solution-info">
@@ -34,6 +31,7 @@ import {getTypeSubText, getTypeText} from "~/map/solutionMap";
 import handle from "~/until/handle";
 import {timestampToTime} from "~/until/time";
 import {unescapeHtml} from "~/until/unescapeHtml";
+import {isMediaView} from "@/until/mediaView";
 
 export default {
   name: "solutionItemIndex",
@@ -48,6 +46,7 @@ export default {
       productTypeText: getTypeText(this.pType),
       productTypeSubText: getTypeSubText(this.pType),
       timer: null,
+      isPhone: false
     }
   },
   beforeMount() {
@@ -63,6 +62,9 @@ export default {
       this.addRead();
     },1000*10)
   },
+  mounted() {
+    this.isPhone = isMediaView(0,1024);
+  },
   beforeDestroy() {
     if (this.timer){
       clearTimeout(this.timer);

pages/support/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <lucency-header :lang="lang" :page-key="pageKey"></lucency-header>
+    <lucency-header :lang="lang" :page-key="pageKey" :is-phone="isPhone"></lucency-header>
     <item-banner :title="'支持中心'" :sub-title="'需要我们为您提供些什么内容呢?'"></item-banner>
     <div class="conBox">
       <q-tab :headers="qTabs">
@@ -25,6 +25,7 @@ import lucencyHeader from "~/components/header/lucencyHeader";
 import langMap from "@/map/langMap";
 import handle from "@/until/handle";
 import {unescapeHtml} from "@/until/unescapeHtml";
+import {isMediaView} from "@/until/mediaView";
 
 function getFileIcon(fileName){
   // 获取文件后缀
@@ -119,13 +120,15 @@ export default {
             }
           ]
         }
-      ]
+      ],
+      isPhone: false
     }
   },
 
   mounted() {
     this.$root.$on('changeLang',this.switchLang);
     this.$root.$on('loadDownloadItem',this.loadDownloadItems);
+    this.isPhone = isMediaView(0,1024);
     this.loadDownloads();
   },