手机head样式修改

assets/scss/cus-client/cus-client-common.scss

@@ -148,7 +148,6 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 /* 网站头部导航栏 */
 .client-head{
   width: 100%;
-  //height: 80px;
   height: 72px;
   z-index: 999;
   background: #fff;
@@ -198,25 +197,22 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   // head移动端响应式
   @media (max-width: 768px){
     // head
-    height: 60px;border-bottom: 1px solid #e7e7e7;
+    height: 60px;box-shadow: unset;border-bottom: 1px solid #e7e7e7;
+
+    //头部布局
+    .head-layout{height:60px;}
 
       //头部左侧区域 logo
     .head-container-box{
         justify-content: space-between;height: 60px;align-items: center;padding:0;
         .client-head-img{width: 92px;height: 46px;background-size: contain;margin:0;}
     }
-      //头部导航
-    .el-menu{position: absolute;margin: 0;left: 0;right: 0;height: 100vh;transition: 0.5s;top: 61px;}
+
     // 手机菜单关闭
     .head-nav-up{height: 0;display:none;opacity: 0;}
     // 手机菜单开启
     .head-nav-down{height: 100vh;display:block;opacity: 1;}
-    // li
-    .el-menu--horizontal>.el-menu-item{float: none;height: 60px;line-height: 60px;border-bottom: 1px solid #e9e9e9;margin:0 18px;
-      border-bottom-color:#e9e9e9!important;font-weight: 700;font-size: 16px;color: rgb(16, 16, 16);}
-    .el-menu--horizontal>.el-menu-item a{width: 100%}
-    .el-menu--horizontal>.el-menu-item:last-child{border: 0;}
-    .el-menu--horizontal > .el-menu-item.is-active{border-bottom: 1px solid #e9e9e9;border-bottom-color: #e9e9e9 !important;}
+
     // 咨询电话
     .phone-tel-box{color: rgb(0, 84, 145);font-size: 14px;font-weight: bold;line-height: 60px;}
 

components/qgNav/H5Nav.vue

@@ -1,37 +1,39 @@
 <template>
-  <div class="h5-menu-container">
-    <nuxt-link to="/"> 首页 </nuxt-link>
+  <div class="phone-popper-box">
+    <nuxt-link to="/">首页</nuxt-link>
     <el-collapse>
       <el-collapse-item title="产品与服务">
-        <nuxt-link :to="item.url" v-for="(item,index) in chanpinfuwu" :key="index">
-          <div class="popover-left">
-            <img :src="item.img">
-          </div>
-          <div class="popover-left">
-            <span class="popover-left-title">{{ item.title }}</span>
-            <span class="popover-left-des">{{ item.des }}</span>
-          </div>
+        <nuxt-link :to="item.url" v-for="(item,index) in chanpinfuwu" :key="index" class="cpfw-popper-item">
+          <i></i>
+          <p>
+            <span class="phone-popper-title">{{ item.title }}</span>
+            <span class="phone-popper-des">{{ item.des }}</span>
+          </p>
         </nuxt-link>
       </el-collapse-item>
       <el-collapse-item title="解决方案">
-          <div>
+          <div class="jjfa-popper-content">
             <h3>场景解决方案</h3>
-            <nuxt-link :to="item.url" v-for="item in changjing" :key="item.url">
-              {{item.title}}
-            </nuxt-link>
+            <div class="jjfa-link-box">
+              <nuxt-link :to="item.url" v-for="item in changjing" :key="item.url">
+                <span class="jjfa-popper-title">{{item.title}}</span>
+              </nuxt-link>
+            </div>
           </div>
-        <div>
+        <div class="jjfa-popper-content">
           <h3>行业解决方案</h3>
-          <nuxt-link :to="item.url" v-for="item in hangye" :key="item.url">
-            {{item.title}}
-          </nuxt-link>
+          <div class="jjfa-link-box">
+            <nuxt-link :to="item.url" v-for="item in hangye" :key="item.url">
+              <span class="jjfa-popper-title">{{item.title}}</span>
+            </nuxt-link>
+          </div>
         </div>
 
 
       </el-collapse-item>
     </el-collapse>
-    <nuxt-link to="/news"> 新闻资讯 </nuxt-link>
-    <nuxt-link to="/introduction"> 关于我们 </nuxt-link>
+    <nuxt-link to="/news" class="xwzx-row">新闻资讯</nuxt-link>
+    <nuxt-link to="/introduction">关于我们</nuxt-link>
   </div>
 </template>
 
@@ -142,11 +144,49 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.h5-menu-container {
+.phone-popper-box {
   position: absolute;
-  top: 60px;
+  top: 61px;
   background: #fff;
-  width: 90%;
-  height: auto;
+  width: 100%;
+  left: 0;
+  padding: 0 15px;
+  box-sizing: border-box;
+  overflow: auto;
+  height: calc(100vh - 112px);
+  >a{
+    height: 48px;
+    line-height: 48px;
+    display: block;
+    font-size: 14px;
+    color: #333;
+  }
+  // 新闻资讯
+  .xwzx-row{border-bottom: 1px solid #EBEEF5;}
+
+  // 产品服务 - 二级菜单
+  .cpfw-popper-item{
+    width: 100%;height: 80px;border-radius: 5px;background-color: rgba(187, 187, 187, 0.2);
+    margin-bottom: 10px;display: flex;align-items: center;padding: 20px;box-sizing: border-box;
+    i{width: 34px;height: 34px;background-size: contain;display: inline-block;margin-right: 16px;background-repeat:no-repeat;background-position: center;}
+    .phone-popper-title{font-size: 14px;color: #333;margin-bottom: 4px;display: inline-block;}
+    .phone-popper-des{display:block;font-size: 12px;color: #9c9c9c;}
+
+    // 列表
+    &:nth-child(1){i{background-image:url("~static/images/client/component/head-cp-icon1.png");} }
+    &:nth-child(2){i{background-image:url("~static/images/client/component/head-cp-icon2.png");} }
+    &:nth-child(3){i{background-image:url("~static/images/client/component/head-cp-icon3.png");} }
+    &:nth-child(4){i{background-image:url("~static/images/client/component/head-cp-icon4.png");} }
+  }
+
+  // 解决方案 - 二级菜单
+  .jjfa-popper-content{
+    width: 100%;border-radius: 5px;background-color: rgba(187, 187, 187, 0.2);margin-bottom: 10px;padding: 10px;box-sizing: border-box;
+    h3{font-size: 16px;color: #333;display: block;font-weight: 700;margin-left: 8px;}
+    .jjfa-link-box{width: 100%;display: flex;flex-wrap: wrap;}
+    a{width: 33.33%;padding: 5px 8px;box-sizing: border-box}
+    .jjfa-popper-title{width:100%;height: 24px;line-height: 24px;text-align:center;display:inline-block;
+      font-size: 12px;color: rgba(16, 16, 16, 100);border-radius: 5px;border: 1px solid rgba(187, 187, 187, 100);}
+  }
 }
 </style>

static/images/client/component/head-btn-icon.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon" style="fill: rgb(0, 102, 204);" viewBox="0 0 24 24" width="30"
      height="30">
-  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
+  <path fill="#00b96b" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
 </svg>