内容调整,头部响应式添加

assets/icons/svg/search.svg

@@ -0,0 +1 @@
+<svg t="1683197709921" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2605" width="200" height="200"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6c3.2 3.2 8.4 3.2 11.6 0l43.6-43.5c3.2-3.2 3.2-8.4 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z" fill="#333333" p-id="2606"></path></svg>

assets/public.css

@@ -13,8 +13,8 @@
 }
 
 .header{
-  width: 100%;
-  height: 110px;
+  /*width: 100%;*/
+  /*height: 110px;*/
   position: fixed;
   top: 0;
   left: 0;

components/header/lucencyHeader.vue

@@ -1,15 +1,18 @@
 <template>
-  <div class="header">
-    <div class="conBox header-content">
-      <a class="logo" href="/">
+  <div class="header w-screen 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="/">
         <img src="/headerLogo.png" alt="" class="logo">
-
       </a>
-      <div class="right-header">
-        <div class="top">
+      <div class="hidden pad:flex w-full h-full items-center ">
+        <div class="">
           <img src="/image/logotext2.png" alt="">
         </div>
-        <div class="menus">
+        <div class="menus w-full">
           <div class="top-menu">
             <a class="menu" href="/">{{ lang===langType.cn?"首页":getLangText("首页") }}</a>
             <a class="menu" @click="switchLangClickHandle">
@@ -26,8 +29,11 @@
         </div>
       </div>
     </div>
-    <div class="conBox header-main">
-      <ul class="main-menus">
+    <div :class="`container header-menu ${isPhone?'header-menu-phone':''}`">
+      <div class="menu-btn" @click="switchMenu" @touch="switchMenu">
+        <svg-icon icon-class="more"/>
+      </div>
+      <ul :class="`main-menus ${isShow?'':'main-menus-hide'}`" >
         <li class="main-menu"
             v-for="(item,i) in mainMenus"
             :key="`main-${item.path}-${i}`"
@@ -45,16 +51,18 @@
           />
         </li>
       </ul>
-      <div class="search-box">
+      <div :class="`search-box absolute right-0 top-0 ${searchShow?'search-box-show':''}`"
+           v-click-outside="hideSearch"
+
+      >
         <div class="search">
           <input type="text" v-model="searchKey"
                  placeholder="搜索咨询与产品">
           <button @click="searchItem" >
-            <img src="/image/search.png" alt="搜索">
+            <svg-icon icon-class="search" />
           </button>
         </div>
       </div>
-
     </div>
   </div>
 </template>
@@ -71,7 +79,9 @@ export default {
     pageKey:{
       default: "index"
     },
-
+    isPhone: {
+      default: true
+    }
   },
   components:{
     menuDrop
@@ -156,9 +166,34 @@ export default {
       searchKey: "",
       nowSub: "",
       hideTimer: null,
+      isShow: false,
+      searchShow: false,
+    }
+  },
+  mounted() {
+  },
+  // 指令
+  directives: {
+    // 点击外部,执行隐藏
+    clickOutside: {
+      bind(el, binding, vnode) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false;
+          }
+          if (binding.expression) {
+            binding.value(e);
+          }
+        }
+        el.__vueClickOutside__ = documentHandler;
+        document.addEventListener('click', documentHandler);
+      },
+      unbind(el, binding) {
+        document.removeEventListener('click', el.__vueClickOutside__);
+        delete el.__vueClickOutside__;
+      }
     }
   },
-
   methods:{
     getLangText(str){
       return langMap.getText(this.lang,str);
@@ -208,6 +243,12 @@ export default {
         clearTimeout(this.hideTimer);
         this.hideTimer = null;
       }
+    },
+    switchMenu(){
+      if(this.isPhone){
+        console.log('切换按钮显示隐藏')
+        this.isShow = !this.isShow;
+      }
     }
   }
 }
@@ -216,13 +257,10 @@ export default {
 <style scoped>
 .header{
   backdrop-filter: blur(5px);
-  box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 20%) ;
+  box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 20%);
   /*text-shadow: 0 0 5px skyblue;*/
 }
-.header-content {
-  display: flex;
-  height: 70px;
-}
+
 .header-content > .logo{
   display: block;
   width: 260px;
@@ -234,40 +272,23 @@ export default {
   width: auto;
   height: 65px;
 }
-.header-content .right-header{
-  width: 1060px;
-  height: 100%;
-  margin-left: 11px;
-  position: relative;
-  top: -35px;
-}
-.right-header .top{
-  margin-top: 35px;
-  height: 63px;
-
-}
-.right-header .top img{
-  display: block;
-  width: 253px;
-  height: 63px;
-}
 .menus{
   height: 40px;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  margin-top: -28px;
+  /*margin-top: -28px;*/
 }
 .menus .top-menu{
   width: auto;
   height: 30px;
   right: 0;
-  top: -30px;
+  top: -20px;
   position: absolute;
 }
 .menus .menu{
-  padding: 0 8px;
+  padding: 0 5px;
   list-style: none;
   cursor: pointer;
   color: #16a0d7;
@@ -278,7 +299,7 @@ export default {
   color: skyblue !important;
 }
 .menus .subMenu{
-  max-width: 90%;
+  max-width: 100%;
   height: 100%;
   display: flex;
   list-style: none;
@@ -291,18 +312,53 @@ export default {
   color: #343434;
 
 }
-.header-main{
-  height: 40px;
+
+.header-menu{
+  position: relative;
+  height: 2rem;
   display: flex;
-  justify-content: space-between;
+  /*justify-content: space-between;*/
+}
+.header-menu-phone{
+  position: absolute;
 }
-.header-main .main-menus{
+.header-menu .menu-btn{
+  display: none;
+}
+
+.header-menu .main-menus{
   height: 100%;
   list-style: none;
   display: flex;
   align-items: flex-end;
   font-size: 1.15em;
 }
+
+.header-menu-phone .menu-btn{
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  padding: 0 15px;
+  color: paleturquoise;
+}
+
+
+
+.header-menu-phone .main-menus{
+  position: absolute;
+  height: auto;
+  padding: 5px;
+  display: block;
+  top: 100%;
+  left: 0;
+  background-color: #fff;
+}
+
+.header-menu-phone .main-menus-hide{
+  left: -100%;
+}
 .main-menus .main-menu{
   width: auto;
   height: auto;
@@ -313,7 +369,10 @@ export default {
 
 }
 .main-menus .main-menu:first-child{
-  margin-left: 0px;
+  margin-left: 0;
+}
+.header-menu-phone .main-menus .main-menu:first-child{
+  margin-left: 15px;
 }
 .main-menus .main-menu > a{
   display: block;
@@ -348,12 +407,18 @@ export default {
   left: 0;
 }
 
+
+
+
 .search-box{
-  height: 100%;
+  height: 26px;
   display: flex;
-  /*border-radius: 50%;*/
+  border-radius: 50%;
   align-items: center;
   font-size: 0.9em;
+  width: 26px;
+  transition: width 0.6s;
+  box-shadow: 1px 1px 4px red ;
 }
 .search-box .search{
   height: 26px;
@@ -362,9 +427,9 @@ export default {
   border: 1px solid gray;
   display: flex;
   position: relative;
-  margin-top: 8px;
+  background-color: transparent;
 }
-.search-box .search > *{
+.search > * {
   outline: none;
 }
 .search > input{

components/newCenter.vue

@@ -73,25 +73,25 @@ export default {
         },
         {
           key: 'three',
-          title: "解锁家庭光伏电站监控全姿势",
+          title: "G8100 4G低功耗LTE无线模块简介",
           type: 2,
-          description: "目前家庭光伏电站的运行维护主要基于对逆变器的监控，那么主流监控模式有哪些呢？小编带你逐一分解",
+          description: "工业级高性能、高通平台，超低功耗，多种无线通信方式，丰富的I/O接口",
           src: '/solution',
-          time: '2022-01-02'
+          time: '2021-11-30'
         },
         {
           key: 'four',
-          title: "解锁家庭光伏电站监控全姿势",
-          type: 2,
-          description: "目前家庭光伏电站的运行维护主要基于对逆变器的监控，那么主流监控模式有哪些呢？小编带你逐一分解",
-          src: '/solution',
-          time: '2022-01-02'
+          title: "ETC停车场的发展前景",
+          type: 3,
+          description: "1.无需人值守降低人工成本；2.非现金支付，杜绝跑冒滴漏；3.集中式管理，财务一目了然；4.无缝对接各类基于ETC的应用系统；5.兼容全国高速公路，ETC收费系统；6.不停车通行，提升通行效率；",
+          src: '/news/item/pa?id=47',
+          time: '2022-09-20'
         },{
           key: 'five',
-          title: "解锁家庭光伏电站监控全姿势",
-          type: 2,
-          description: "目前家庭光伏电站的运行维护主要基于对逆变器的监控，那么主流监控模式有哪些呢？小编带你逐一分解",
-          src: '/solution',
+          title: "森林防火4G摄像机视频监控解决方案",
+          type: 1,
+          description: "采用4G摄像机4G高清网络摄像机或4G高清视频服务器+摄像头组合，将监控点附近的相关视频实时回传至监控中心，林区负责人或监管部门可实时了解林区状态，如有隐患或火灾，可第一时间发现并采取相应措施。\n" ,
+          src: '/solution/item/sol?id=49',
           time: '2022-01-02'
         }
       ]

components/siteBar.vue

@@ -42,7 +42,7 @@ export default {
   height: auto;
   position: fixed;
   right: 180px;
-  top: 70%;
+  bottom: 30%;
   transform: translateY(-50%);
 }
 .site-bar .btn{

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="w-screen relative">
 <!--    header 部分布局-->
-    <lucency-header :lang="lang" page-key="index" />
+    <lucency-header :lang="lang" page-key="index" :is-phone="isPhone" />
     <banner :wait-time="2500"/>
 
 <!--    优势项目部分展示,参考海康-->
@@ -26,17 +26,21 @@ import newCenter from "@/components/newCenter";
 import defaultFooter from "~/components/footer/defaultFooter";
 import langMap from "~/map/langMap";
 import handle from "~/until/handle";
+import {isMediaView} from "@/until/mediaView";
 export default {
   components: { lucencyHeader,banner,showingStand,defaultFooter,productCenter,newCenter },
   props:['uLang'],
   data(){
     return {
       lang: this.uLang?this.uLang:langMap.lang.cn,
+      isPhone: false
     }
   },
   mounted() {
     this.$root.$on('changeLang',this.switchLang)
-    this.loadData();
+    this.isPhone = isMediaView(0,1024);
+    console.log(this.isPhone);
+    console.log(`this.isPhone:${this.isPhone}`);
   },
   methods:{
     switchLang(nextLang){
@@ -51,19 +55,7 @@ export default {
         }
       }
     },
-    async loadData(){
-      let [err,res] = await handle(this.$axios.get("http://kindring.cn:9999/get"))
-      if(err){
-        console.log(err);
-        return;
-      }
-      let result = res.data;
-      console.log(result)
-      if(result.code === 200){
-        console.log("set msg")
-       this.msg = result.msg ;
-      }
-    },
+
   }
 }
 </script>

pages/solution/item/index.vue

@@ -41,7 +41,7 @@ export default {
   components:{defaultFooter},
   data(){
     return {
-      langType: langp.lang,
+      langType: langMap.lang,
       lang: this.uLang?this.uLang:langMap.lang.cn,
       solutionId: null,
       solutionDetail: {},

phpAPi/web.config

@@ -17,7 +17,6 @@
         <httpErrors errorMode="Custom" existingResponse="Replace">
           <clear />
           <error statusCode="404" responseMode="ExecuteURL" path="/ErrorPage/404/index.html" />
-
         </httpErrors>
     </system.webServer>
 </configuration>

tailwind.config.js

@@ -2,7 +2,25 @@ module.exports = {
     purge: { content: ['./public/**/*.html', './src/**/*.vue'] },
     darkMode: false, // or 'media' or 'class'
     theme: {
-        extend: {},
+      screens: {
+        'phone': '640px',
+        // => @media (min-width: 640px) { ... }
+
+        'pad': '1024px',
+        // => @media (min-width: 1024px) { ... }
+
+        'pc': '1320px',
+        // => @media (min-width: 1280px) { ... }
+      },
+      extend: {
+        width: {
+          "72": "18rem",
+        },
+        height: {
+          "36": "10rem"
+        }
+      },
+
     },
     // 禁用指定的css类
     corePlugins: {
@@ -12,4 +30,4 @@ module.exports = {
         extend: {},
     },
     plugins: [],
-}
+}

until/mediaView.js

@@ -0,0 +1,5 @@
+// 判断当前屏幕尺寸是否在指定范围内
+export function isMediaView(min, max) {
+    let media = window.matchMedia(`(min-width: ${min}px) and (max-width: ${max}px)`);
+    return media.matches;
+}