yubaitong-admin/src/components/common/navTop.vue

<!--
 * @Author: lcs
 * @Date: 2021-04-12 16:50:20
 * @LastEditTime: 2021-05-18 14:51:56
 * @LastEditors: lcs
 * @FilePath: \lananxx-manage\src\components\common\navTop.vue
 * @Description: 
-->

<template>
    <div class="nav-wrap">
        <div class="top-head">
            <div class="icon-wrap">
                <svg class="icon" aria-hidden="true" @click.stop="clickMenu">
                    <use xlink:href="#iconcaidan" v-if="type == 'front'"></use>
                    <use
                        xlink:href="#iconchevronleft"
                        v-if="type == 'back'"
                    ></use>
                </svg>
            </div>
            <div>{{ title }}</div>
            <div></div>
        </div>
        
        <!-- 新增条目 -->
        <van-popup
            position="top"
            v-model="menuShow"
          >    
            <div class="popup-wrap">
              <div class="top">
                <svg class="icon" aria-hidden="true" @click.stop="()=>{menuShow=false}">
                    <use xlink:href="#iconb-spsz-scgg" />
                </svg>
              </div>
              <div class="single" @click.stop="JumpMenu('customerList')">
                客户管理
              </div>
              <div class="single" @click.stop="JumpMenu('orderList')">
                订单管理
              </div>
              <div class="single" @click.stop="JumpMenu('searchPhone')">
                帮助租赁下单
              </div>
              <!-- @click.stop="JumpMenu('libraryManage')" -->
              <div class="single" @click.stop="JumpMenu('libraryManage')">
                出入库表单
              </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import { Popup } from 'vant';
    export default {
        components: { [Popup.name]: Popup },
        props: {
            title: {
                type: String,
                default: '蓝桉喜喜'
            },
            type: {
                type: String,
                default: 'front'
            }
        },
        data(){
          return{
            menuShow:false
          }
        },
        methods:{
          clickMenu(){
            if(this.type =='front'){
              this.menuShow = true
            }else{
              this.$router.go(-1) 
            }
          },
          JumpMenu(name){
            this.$router.push({name})
          },
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/mobile.styl';

    .nav-wrap {
        padding-bottom: vw(45);
    }

    .top-head {
        height: vw(45);
        width: 100vw;
        flex-x(center);
        box-sizing: border-box;
        background: grayF;
        border-bottom: vw(1) solid #efefef;
        z-index: 11;
        position: fixed;
        top: 0;
    }

    .icon-wrap {
        position: absolute;
        left: vw(15);

        .icon {
            width: vw(20);
            height: vw(20);
        }
    }
    .popup-wrap{
      width vw(355)
      padding  vw(15) vw(27) vw(30) vw(27)
      box-sizing border-box
      .top{
        flex-x()
        padding-bottom vw(14)
        margin-bottom vw(20)
        word-vw(15,#030303)
        .icon{
          width vw(20)
          height vw(20)
          fill gray3
        }
      }
      .single{
        text-align center
        word-vw(18,gray3)
        font-weight 600
        line-height vw(50)
        margin-top vw(12)
        border-bottom vw(1)  solid #efefef
        
      }
    }
</style>