sannongshichangwang/components/home/Panel.vue

<template> 
    <main class="panel_main">


       <div class="panel_head_box">
            <span class="panel_head_btn" @click="close_panel_btn_fun"></span>
            <h4 class="panel_head_h4">
                 
                网站地图

            </h4>
       </div>     
       <section class="panel_long clearfix">
            <div class="panel_main_in">
                    
                    <!-- 首页 -->
                    <div class="panel_box">
 
                        <div class="panel_a_box ">

                            <NuxtLink to="/" title="首页" class="panel_a_btn">
                                首页
                            </NuxtLink>

                            

                            <NuxtLink class="panel_a_btn" 
                                v-for="(item, index) in navigation1" :key="index"
                                @click="getLinkPath(item)" 
                                :target="item.is_url == 1 ? '_blank' : '_self'"
                            >
                                 {{ item.alias }} 
                            </NuxtLink>                            

                            <!-- 
                            <NuxtLink class="panel_a_btn" 
                                v-for="(item, index) in navigation2" :key="index"
                                @click="getLinkPath(item)" 
                                :target="item.is_url == 1 ? '_blank' : '_self'"
                            >
                              2{{ item.alias }} 
                            </NuxtLink> -->


                        </div>   

                    </div>
          

                    <!-- 互动推荐 -->
                     
                    <div class="panel_box phone_none" >
                        <div class="panel_name_box">
                            <div class="panel_name">互动推荐</div> 
                        </div>   
 
                        <div class="panel_a_box ">

                            
                            <NuxtLink class="panel_a_btn" 
                                v-for="(item, index) in navigation2" :key="index"
                                @click="getLinkPath(item)" 
                                :target="item.is_url == 1 ? '_blank' : '_self'"
                            >
                              {{ item.alias }} 
                            </NuxtLink>

 
                        </div>   
                    </div>

            </div>
      </section>

    </main>
</template>

<script setup>
 
//3.获取导航菜单 start ---------------------------------------->
const navigation1 = ref([]); 
const navigation2 = ref([]);// 互动推荐
const navigation3 = ref([]);// 深度服务
const province_arr = ref([]);// 省列表
// 引入全局状态
 
const panelVisible = useState('panelVisible')

//获得详情id

const route = useRoute();
const router = useRouter();

 // 关闭面板
const close_panel_btn_fun = () => {
  panelVisible.value = false
}

//获取导航菜单1
async function getNavigation1() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 999,
            'placeid': 1
        },
    });
    navigation1.value = mkdata.data;
}
getNavigation1();


//深度服务
async function getNavigation3() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 6,
            'placeid': 33
        },
    });
    navigation3.value = mkdata.data;
}
getNavigation3();


//获取导航菜单4--互动推荐
async function getNavigation2() {
    const mkdata = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'pid': 0,
            'num': 999,
            'placeid': 11
        },
    });
    navigation2.value = mkdata.data;
}
getNavigation2();

const getLinkPath = (item) => {
       
    close_panel_btn_fun()
     
    let linkPath = ''

    if (item.is_url == 1) {
         linkPath = `/${item.web_url}`;
    } else if (item.children_count == 0) {
        //return `/newsList/${item.category_id}?page=1`;
          linkPath = `/${item.aLIas_pinyin}/list-1.html`;
    }  else {
        //return `/primaryNavigation/${item.aLIas_pinyin}/`;
         linkPath = `/${item.aLIas_pinyin}/index.html`;
    }
        // router.push(linkPath)
        return navigateTo({
            path: linkPath,
        })

}
 
import { watch } from 'vue'
onMounted(() => {
 
    const delayTimer_hid = ref(null);//延迟器
    delayTimer_hid.value = setTimeout(() => {
            
            watch(panelVisible, (newValue, oldValue) => {
            
            // 根据panelVisible的状态执行不同操作
                if (newValue) {
                    document.body.classList.add("body_hid")
                } else {
                    // 面板隐藏时的操作
                    document.body.classList.remove('body_hid')
                }
            })
    
    }, 333);
   
})


</script>
<style lang="less" scoped>
// @import url('@/assets/css/nav.less');
</style>

<style lang="less" scoped>


    @media screen and (max-width:800px){/*ipad_phone*/

        .dot1{word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis; }
        
     

        .panel_main{
            position:fixed;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            background:#F6F6F6;
            z-index:1999;
            overflow:hidden;
        }

        .panel_head_box{
            width:97%;margin:0px auto 4px;
            height:50px;border-bottom:1px solid #b8b8b8;
            
            text-align:center;position:relative;
        }

        .panel_long{
           height:100%;
          overflow:auto;
        }


        .panel_head_h4{height:50px;line-height:50px;display:inline-block;
                        font-size:22px;color:#333;text-align:center;}
        .panel_head_btn{float:right;width:22px;height:22px; top:12px;
                         position:absolute;right:0px;
                        background:url('../../public/image/guanbi 1.png') no-repeat center center;
                        background-size:100% 100%;
            }

          .panel_main_in{width:96%;margin:0px auto;padding-bottom:66px;}  
          .panel_box{}  

            .panel_name_box{
                width:100%;
                height:44px;
                 
            }
            .panel_name{
                float:left;font-weight:bold;
                height:44px;
                line-height:44px;
                font-size:16px;
                color:#333;
                // padding-left:20px;
            }
             
             
            .panel_a_box{
                width:100%;
                overflow:hidden;
                margin-bottom:10px;
                  
            }
             
            .panel_box_line{
                border-bottom:1px solid #ddd;
            }
            .panel_a_btn{
                float:left;
                width:23%;margin: 2% 1%;box-sizing:border-box;text-align:center;
                height:44px;
                line-height:44px;
                font-size:12px;
                color:#333; 
                padding:0 4px;background:#F6F6F6;border:solid 1px #ddd;
                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
            }


            .panel_a_btn_2{
                float:left;
                width:14%;margin:4px 1.3%;box-sizing:border-box;text-align:center;
                height:33px;
                line-height:33px;
                font-size:14px;
                color:#333; 
                padding:0 8px;background:#F6F6F6;border:solid 1px #ddd;
            } 
            
        }
</style>


<style>

@media screen and (min-width:801px){/*pc*/

         
		
            .pc_none{display:none;}
    }
    @media screen and (max-width:800px){/*ipad_phone*/

 
        .body_hid{
            overflow:hidden;
        }
            .phone_none{display:none;}
    }

</style>