h5顶部菜单（含二级菜单并使用了vant框架）

最新推荐文章于 2023-06-02 15:03:56 发布

性野喜悲

最新推荐文章于 2023-06-02 15:03:56 发布

阅读量769

点赞数

分类专栏： html+css vue

本文链接：https://blog.csdn.net/leng0920/article/details/108294535

版权

vue 同时被 2 个专栏收录

136 篇文章 4 订阅

订阅专栏

html+css

113 篇文章 1 订阅

订阅专栏

<template>
  <div id="mHeader">
    <div class="mHeaderPanel ">
      <div class="mHeaderTitlePanel flex-center-between">
        <div class="flex">
          <img class="logoImg" src="@/images/m/nav/logo.png" alt="">
        </div>
        <div class="flex" @click="showPopup">
          <img class="downIconImg" src="@/images/m/nav/down_icon.png" alt="">
        </div>
      </div>
      <van-popup
        v-model="show"
        closeable
        position="top"

      >
       <div class="mHeaderContentPanel">
           <ul class="mHeaderContentUl">
             <li class="mHeaderContentItemPanel" v-for="item in items">
               <div class="mHeaderContentItem flex-center-between" @click="showToggle(item)">
                 <span>{{item.name}}</span>
                 <van-icon name="arrow" />
               </div>
               <ul class="mHeaderContentUl" v-show="item.isSubShow">
                 <li class="mHeaderContentSubItemPanel" v-for="subItem in item.subItems">
                   <div class="mHeaderContentSubItem">{{subItem.name}}</div>
                 </li>
               </ul>

             </li>
           </ul>
         </div>
      </van-popup>
    </div>


  </div>
</template>
<script>
  export default {
    data() {
      return {
        show: false,
        items:[
          {
            name:'首页',
            path:'mHome',
            isSubShow:false,
            subItems:[]
          },
          {
            name:'走进金玺泰',
            path:'mIndustrySector',
            isSubShow:false,
            subItems:[
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              }
            ]
          },
          {
            name:'党群纪检',
            isSubShow:false,
            subItems:[
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              }
            ]
          },
          {
            name:'资讯动态',
            isSubShow:false,
            subItems:[
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              }
            ]
          },
          {
            name:'产业板块',
            isSubShow:false,
            subItems:[
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              }
            ]
          },
          {
            name:'下属企业',
            isSubShow:false,
            subItems:[
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              }
            ]
          },
          {
            name:'社会责任',
            isSubShow:false,
            subItems:[
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              }
            ]
          },
          {
            name:'人力资源',
            isSubShow:false,
            subItems:[
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              }
            ]
          },
          {
            name:'联系我们',
            isSubShow:false,
            subItems:[
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              },
              {
                name:'走进金玺泰'
              }
            ]
          }
        ]

      }
    },
    methods: {
      showPopup() {
        this.show = true;
      },
        showToggle:function(item){
          item.isSubShow = !item.isSubShow
        }

    }
  }
</script>
<style lang="scss" scoped>
  #mHeader {
    .mHeaderPanel {
      width: 100%;
      height: 1.27rem;
      background: rgba(0, 15, 34, 1);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
    }
    .mHeaderTitlePanel {
      height: 100%;
      padding: 0 0.43rem 0 0.34rem;
    }
    .logoImg {
      width: 2.97rem;
      height: 0.63rem;
    }
    .downIconImg {
      width: 0.41rem;
      height: 0.32rem;
    }
    .van-popup__close-icon--top-right{
      left: 0.16rem;
      top: 0.16rem;
    }
    /*内容*/
    .mHeaderContentPanel{
      padding: 0.87rem 0 0 0.12rem;
      background: #eee;
    }
    .mHeaderContentUl{
      width: 100%;
      height: auto;
    }
    /*.mHeaderContentItemPanel{}*/
    .mHeaderContentItem{
      width: calc(100%-0.2rem);
      padding: 0 0.2rem 0 0;
      background: green;
      color: #fff;
      height: 0.43rem;
      line-height: 0.43rem;
      text-indent: 24px;
      font-size: 0.16rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.85);
      border-bottom: 0.01rem solid rgba(255, 255, 255, 0.39);
    }
    .mHeaderContentItemPanel:first-child{
      .van-icon-arrow{
        display: none;
      }
    }
    /*.mHeaderContentSubItemPanel{}*/
    .mHeaderContentSubItem{
      height: 0.43rem;
      line-height: 0.43rem;
      background: #999;
      text-indent: 50px;
      border-bottom: 0.01rem solid rgba(255, 255, 255, 0.39);
      font-size: 0.16rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.85);
    }

  }

</style>