xiangcunwang_web/pages/index.vue

<template>
    <div>
        <!-- 页面头部 -->
        <HomePageHead></HomePageHead>
        <!-- 页面导航 -->
        <HomePageNavigation></HomePageNavigation>
        <!-- 广告位 1 -->
        <HomeTopTenTitle></HomeTopTenTitle>
        <!-- 新闻头条部分 -->
        <div class="topNewsPart">
            <div class="inner">
                <div class="toutiao">
                    <div class="xwtt">
                        <span class="ttlogo">新闻头条</span>
                        <a href="#">
                            <span class="tttitle">农业农村部部署长江水生生物保护工作农业农村部部署长江水生生物保护工作</span>
                        </a>
                    </div>
                    <div class="toutiao1">
                        <a href="#">
                            12月4日，农业农村部在湖北武汉召开长江水生生物资源保护工作会议12月4日，农业农村部在湖北武汉召开长江水生生物资源保护工作会议12月4日，农业农村部在湖北武汉召开长江水生生物资源保护工作会议
                        </a>
                    </div>
                </div>
                <ul class="vibrant">
                    <li></li>
                    <li></li>
                    <li class="active"></li>
                </ul>
                <div class="messageLeft">
                    <div class="leftTitle">
                        <h2 class="leftnav">
                            <a href="#">三农资讯</a>
                            <em></em>
                        </h2>
                        <ul class="rightnav">
                            <li>
                                <a href="">部委动态</a>
                                <span>/</span>
                            </li>
                            <li>
                                <a href="">地方快讯</a>
                                <span>/</span>
                            </li>
                            <li>
                                <a href="">传媒视频</a>
                            </li>
                            <li>
                                <a href="#">更多 ></a>
                            </li>
                        </ul>
                    </div>
                    <ul class="leftContent1">
                        <li class="topTitle">
                            <a href="">定调超大特大城市将带来哪些新机遇？专家解读→</a>
                        </li>
                        <li class="context" v-for="item in 4">
                            <a href="#">
                                新一批深化财税改革举措呼之欲出 零基预算等被频频提及
                            </a>
                        </li>
                    </ul>
                    <ul class="leftContent">
                        <li class="topTitle">
                            <a href="">定调超大特大城市将带来哪些新机遇？专家解读→</a>
                        </li>
                        <li class="context" v-for="item in 4">
                            <a href="#">
                                新一批深化财税改革举措呼之欲出 零基预算等被频频提及
                            </a>
                        </li>
                    </ul>
                    <ul class="leftContent">
                        <li class="topTitle">
                            <a href="">定调超大特大城市将带来哪些新机遇？专家解读→零基预算等被频频提及</a>
                        </li>
                        <li class="context" v-for="item in 4">
                            <a href="#">
                                新一批深化财税改革举措呼之欲出 零基预算等被频频提及零基预算等被频频提及
                            </a>
                        </li>
                    </ul>
                    <ul class="leftContent">
                        <li class="topTitle">
                            <a href="">定调超大特大城市将带来哪些新机遇？专家解读→零基预算等被频频提及</a>
                        </li>
                        <li class="context" v-for="item in 4">
                            <a href="#">
                                新一批深化财税改革举措呼之欲出 零基预算等被频频提及零基预算等被频频提及
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="messageRight">
                    <div class="lunbo">
                        <HomeBigSwiper></HomeBigSwiper>
                    </div>
                    <div class="mid">
                        <div class="nav1">
                            <h2 class="navtitle">
                                <a href="">
                                    三农服务
                                </a>
                            </h2>
                            <ul class="navContext">
                                <li class="Contextlist" v-for="item in 4">
                                    <a href="">
                                        泰国副总理：愿进一步与中方合作打击...
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="nav2">
                            <h2 class="navtitle">
                                <img src="../public/index/gonggao.png" alt="">
                                <a href="">
                                    三农服务
                                </a>
                            </h2>
                            <ul class="navContext">
                                <li class="Contextlist" v-for="item in 4">
                                    <a href="">
                                        泰国副总理：愿进一步与中方合作打击...
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="foot">
                        <div class="head_nav">
                            <div class="nav_list">
                                <a href="">
                                    <img src="../public/index/icon01.png" alt="招商引资">
                                    <span>招商引资</span>
                                </a>
                            </div>
                            <div class="nav_list">
                                <a href="">
                                    <img src="../public/index/icon02.png" alt="产品营销">
                                    <span>产品营销</span>
                                </a>
                            </div>
                            <div class="nav_list">
                                <a href="">
                                    <img src="../public/index/icon03.png" alt="项目推介">
                                    <span>项目推介</span>
                                </a>
                            </div>

                            <div class="nav_list">
                                <a href="">
                                    <img src="../public/index/icon04.png" alt="打造品牌">
                                    <span>打造品牌</span>
                                </a>
                            </div>
                            <div class="nav_list">
                                <a href="">
                                    <img src="../public/index/icon05.png" alt="策划服务">
                                    <span>策划服务</span>
                                </a>
                            </div>
                            <div class="nav_list">
                                <a href="">
                                    <img src="../public/index/icon06.png" alt="认证服务">
                                    <span>认证服务</span>
                                </a>
                            </div>
                            <div class="nav_list">
                                <a href="">
                                    <img src="../public/index/icon07.png" alt="培训服务">
                                    <span>培训服务</span>
                                </a>
                            </div>
                            <div class="nav_list">
                                <a href="">
                                    <img src="../public/index/icon08.png" alt="信息服务">
                                    <span>信息服务</span>
                                </a>
                            </div>
                        </div>
                        <div class="foot_nav">
                            <a href="">乡村建站服务</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- 广告位 2 -->
        <HomeTopTenTitle></HomeTopTenTitle>

        <!-- 第一部分 -->
        <div class="part1">
            <div class="inner">
                <div class="part1_left">
                    <div class="part1_title">
                        <h2 class="nav_part1_left">
                            <a href="#">
                                乡村招商
                            </a>
                            <em></em>
                        </h2>
                        <ul class="nav_part1_right">
                            <li class="nav_part1_right_title" v-for="item in 6">
                                <a href="">
                                    部委动态
                                </a>
                                <span v-if="item != 6">/</span>
                            </li>
                        </ul>
                    </div>
                    <div class="part1_content">
                        <div class="context_left">
                            <div class="top">
                                <a href="">
                                    <img src="../public/index/01.png" alt="">
                                    <span class="title1">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                </a>
                            </div>
                            <div class="bottom">
                                <div class="bottom_left" v-for="item in 2">
                                    <a href="">
                                        <img src="../public/index/01.png" alt="">
                                        <span class="title2">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="context_right">
                            <ul class="rightContent">
                                <li class="topTitle1">
                                    <a href="">定调超大特大城市将带来哪些新机遇？专家解读→</a>
                                </li>
                                <li class="context1" v-for="item in 4">
                                    <a href="#">
                                        多地迎新一轮土拍 部分区域出让高溢价地块
                                    </a>
                                </li>
                            </ul>
                            <ul class="rightContent">
                                <li class="topTitle1">
                                    <a href="">定调超大特大城市将带来哪些新机遇？专家解读→</a>
                                </li>
                                <li class="context1" v-for="item in 4">
                                    <a href="#">
                                        多地迎新一轮土拍 部分区域出让高溢价地块
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="part1_right">
                    <div class="part1_right_title">
                        <h2 class="part1_right_title1_active">
                            <a href="">乡村建设</a>
                            <em class="active_bg"></em>
                        </h2>
                        <h2 class="part1_right_title1">
                            <a href="">乡村管理</a>
                            <em class="active_bg"></em>
                        </h2>
                        <h2 class="part1_right_title1">
                            <a href="">乡村文化</a>
                            <em class="active_bg"></em>
                        </h2>
                    </div>
                    <div class="part1_right_content">
                        <div class="part1_right_content_top" v-for="item in 2">
                            <NuxtLink to="#">
                                <img src="../public/index/01.png" alt="">
                                <span class="content_top_title2">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                            </NuxtLink>
                        </div>
                        <ul class="part1_right_content_bottom">
                            <li class="content_bottom_list" v-for="item in 6">
                                <NuxtLink to="#">
                                    <span class="sec_title">乡村文化</span>
                                    <span class="sec_content">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                </NuxtLink>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第二部分 -->
        <div class="part2">
            <div class="inner">
                <div class="part2_left">
                    <div class="part2_title">
                        <h2 class="nav_part2_left">
                            <a href="#">
                                乡村招商
                            </a>
                            <em></em>
                        </h2>
                        <ul class="nav_part2_right">
                            <li class="nav_part2_right_title" v-for="item in 6">
                                <a href="">
                                    部委动态
                                </a>
                                <span v-if="item != 6">/</span>
                            </li>
                        </ul>
                    </div>
                    <div class="part2_content">
                        <div class="part2_content_left">
                            <ul class="content_a">
                                <li class="topTitleaa">
                                    <a href="">定调超大特大城市将带来哪些新机遇？专家解读→</a>
                                </li>
                                <li class="context111" v-for="item in 4">
                                    <a href="#">
                                        多地迎新一轮土拍 部分区域出让高溢价地块
                                    </a>
                                </li>
                            </ul>
                            <ul class="content_a">
                                <li class="topTitleaa">
                                    <a href="">定调超大特大城市将带来哪些新机遇？专家解读→</a>
                                </li>
                                <li class="context111" v-for="item in 4">
                                    <a href="#">
                                        多地迎新一轮土拍 部分区域出让高溢价地块
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="part2_content_right">
                            <div class="right_top">
                                <a href="">
                                    <img src="../public/index/01.png" alt="">
                                    <span class="title11">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                </a>
                            </div>
                            <div class="right_bottom">
                                <div class="bottom_left" v-for="item in 2">
                                    <a href="">
                                        <img src="../public/index/01.png" alt="">
                                        <span class="title22">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="part2_right">
                    <div class="part2_right_title">
                        <h2 class="part2_right_title1_active">
                            <a href="">乡村建设</a>
                            <em class="active_bg11"></em>
                        </h2>
                        <h2 class="part2_right_title1">
                            <a href="">乡村管理</a>
                            <em class="active_bg11"></em>
                        </h2>
                        <h2 class="part2_right_title1">
                            <a href="">乡村文化</a>
                            <em class="active_bg11"></em>
                        </h2>
                    </div>
                    <div class="part2_right_content">
                        <div class="part2_right_content_top" v-for="item in 2">
                            <NuxtLink to="#">
                                <img src="../public/index/01.png" alt="">
                                <span class="content_top_title22">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                            </NuxtLink>
                        </div>
                        <ul class="part2_right_content_bottom">
                            <li class="content_bottom_list" v-for="item in 6">
                                <NuxtLink to="#">
                                    <span class="sec_title_part2">乡村文化</span>
                                    <span class="sec_content_part2">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                </NuxtLink>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 广告位 3 -->
        <HomeTopTenTitle></HomeTopTenTitle>

        <!-- 第三部分 -->
        <div class="part3">
            <div class="inner">
                <div class="part3_left">
                    <div class="part3_left_1">
                        <h2 class="part3_title1">
                            <a href="#">
                                乡村招商
                            </a>
                            <em></em>
                        </h2>
                        <div class="part3_photo_text">
                            <NuxtLink to="#">
                                <img src="../public/index/01.png" alt="">
                                <span class="part3_text">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                            </NuxtLink>
                        </div>
                        <ul class="part3_content">
                            <li class="part3_contentList" v-for="item in 5">
                                <NuxtLink to="#">
                                    西部地区最大高铁枢纽重庆东站进入线路精调阶段西部地区最大高铁枢纽重庆东站进入线路精调阶段
                                </NuxtLink>
                            </li>
                        </ul>
                    </div>
                    <div class="part3_left_1">
                        <h2 class="part3_title1">
                            <a href="#">
                                乡村招商
                            </a>
                            <em></em>
                        </h2>
                        <div class="part3_photo_text">
                            <NuxtLink to="#">
                                <img src="../public/index/01.png" alt="">
                                <span class="part3_text">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                            </NuxtLink>
                        </div>
                        <ul class="part3_content">
                            <li class="part3_contentList" v-for="item in 5">
                                <NuxtLink to="#">
                                    西部地区最大高铁枢纽重庆东站进入线路精调阶段西部地区最大高铁枢纽重庆东站进入线路精调阶段
                                </NuxtLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="part3_right">
                    <h2 class="part3_right_title">
                        <NuxtLink to="#">
                            <img src="../public/index/title01.png" alt="乡村服务导航">
                            <span class="part3_text">乡村服务导航</span>
                        </NuxtLink>
                    </h2>
                    <ul class="part3_right_content">
                        <li class="content_list">
                            <NuxtLink to="#">
                                <div class="photo">
                                    <img src="../public/index/fw01.png" alt="">
                                </div>
                                <span class="part3_right_content_list">中国乡镇查询</span>
                            </NuxtLink>
                        </li>
                        <li class="content_list">
                            <NuxtLink to="#">
                                <div class="photo">
                                    <img src="../public/index/fw02.png" alt="">
                                </div>
                                <span class="part3_right_content_list">中国乡镇查询</span>
                            </NuxtLink>
                        </li>
                        <li class="content_list">
                            <NuxtLink to="#">
                                <div class="photo">
                                    <img src="../public/index/fw03.png" alt="">
                                </div>
                                <span class="part3_right_content_list">中国乡镇查询</span>
                            </NuxtLink>
                        </li>
                        <li class="content_list">
                            <NuxtLink to="#">
                                <div class="photo">
                                    <img src="../public/index/fw04.png" alt="">
                                </div>
                                <span class="part3_right_content_list">中国乡镇查询</span>
                            </NuxtLink>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 第四部分 -->
        <div class="part4">
            <div class="inner">
                <div class="part4_title">
                    <h2 class="part4_title_left">
                        <a href="">产业集群</a>
                        <em></em>
                    </h2>
                    <ul class="part4_title_right">
                        <li class="right_titleList" v-for="item in 3">
                            <a href="">农产基地</a>
                            <span v-if="item != 3">/</span>
                        </li>
                        <li class="more">
                            <a href="">更多></a>
                        </li>
                    </ul>
                </div>
                <div class="part4_left">
                    <ul class="part4_left_top">
                        <li class="left_top_newsList" v-for="item in 3">
                            <NuxtLink to="#">
                                脱贫县农村居民人均可支配收入增速连续4年快于全国农村居民收入增速
                            </NuxtLink>
                        </li>
                    </ul>
                    <ul class="part4_left_bottom">
                        <li class="left_btm_newsList" v-for="item in 10">
                            <NuxtLink to="#">
                                脱贫县农村居民人均可支配收入增速连续4年快于全国农村居民收入增速
                            </NuxtLink>
                        </li>
                    </ul>
                </div>
                <div class="part4_right">
                    <NuxtLink to="#">
                        <img src="../public/index/01.png" alt="">
                        <span class="part4_right_title">
                            江苏苏州古典园林内的艺圃里，梅花竞相绽放，春意渐浓。江苏苏州古典园林内的艺圃里，梅花竞相绽放，春意渐浓。
                        </span>
                    </NuxtLink>
                </div>
            </div>
        </div>

        <!-- 广告位 4 -->
        <HomeTopTenTitle></HomeTopTenTitle>

        <!-- 第五部分 -->
        <div class="part5">
            <div class="inner">
                <div class="part5_left">
                    <div class="part5_left_top">
                        <div class="part5_leftTitle">
                            <h2 class="part5_left_title">
                                <NuxtLink to="#">三农人物</NuxtLink>
                                <em></em>
                            </h2>
                            <h2 class="part5_left_title">
                                <NuxtLink to="#">三农名企</NuxtLink>
                                <em></em>
                            </h2>
                        </div>
                        <div class="part5_left_content">
                            <div class="part5_left_content_top">
                                <div class="content_top_left">
                                    <div class="part5_photo_text">
                                        <NuxtLink to="#">
                                            <img src="../public/index/01.png" alt="">
                                            <span class="part5_text">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                        </NuxtLink>
                                        <span class="littleTips">精选</span>
                                    </div>
                                    <ul class="part5_content">
                                        <li class="part5_content_list" v-for="item in 5">
                                            <NuxtLink to="#">
                                                西部地区最大高铁枢纽重庆东站进入线路精调阶段西部地区最大高铁枢纽重庆东站进入线路精调阶段
                                            </NuxtLink>
                                        </li>
                                    </ul>
                                </div>
                                <ul class="content_top_right">
                                    <li class="content_right_list" v-for="item in 5">
                                        <NuxtLink to="#">
                                            <div class="part5_time">
                                                <span class="month">19</span>
                                                <span class="xiegang">/</span>
                                                <span class="day">02</span>
                                            </div>
                                            <div class="time_left_content">
                                                全链汇聚，稻乐满仓！南沙丝苗米南沙丝苗南沙丝苗米南沙丝苗米
                                            </div>
                                        </NuxtLink>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="part5_left_bottom">
                        <div class="part5_leftTitle1">
                            <h2 class="part5_left_title">
                                <NuxtLink to="#">三农人物</NuxtLink>
                                <em></em>
                            </h2>
                            <h2 class="part5_left_title">
                                <NuxtLink to="#">三农名企</NuxtLink>
                                <em></em>
                            </h2>
                        </div>
                        <div class="part5_left_content1">
                            <div class="content_bottom_left">
                                <div class="content_top">
                                    <NuxtLink to="#">
                                        <img src="../public/index/01.png" alt="">
                                        <span class="part5_text">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                    </NuxtLink>
                                </div>
                                <div class="content_bottom">
                                    <div class="content_bottom_1" v-for="item in 2">
                                        <NuxtLink to="#">
                                            <img src="../public/index/01.png" alt="">
                                            <span class="part5_text">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                        </NuxtLink>
                                    </div>
                                </div>
                            </div>
                            <div class="content_bottom_right">
                                <ul class="bottom_content_1" v-for="item in 2">
                                    <li class="bottom_content_list" v-for="item in 5">
                                        <NuxtLink to="#">
                                            多地迎新一轮土拍 部分区域出让高溢价地块
                                        </NuxtLink>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="part5_right">
                    <div class="part5_rightTitle">
                        <h2 class="part5_right_title" v-for="item in 2">
                            <NuxtLink to="#">三农人物</NuxtLink>
                            <em></em>
                        </h2>
                        <div class="rightMore">
                            <NuxtLink to="#">更多 ></NuxtLink>
                        </div>
                    </div>
                    <ul class="part5_right_content_top">
                        <li class="part5_right_contentlist_top" v-for="(item, index) in 7">
                            <NuxtLink to="#">
                                <span class="numStyle">{{ index + 1 }}</span>
                                国家发展改革委:依法保护民营企业和民营企业相法保护民营企业和民营企业相
                            </NuxtLink>
                        </li>
                    </ul>
                    <div class="part5_photo_text_right">
                        <NuxtLink to="#">
                            <span class="part5_text11">西部地区最大高铁枢纽重庆东站进入线路精调阶段西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                            <img src="../public/index/01.png" alt="">
                        </NuxtLink>
                    </div>
                    <ul class="part5_right_content_11">
                        <li class="part5_right_contentlist_11" v-for="(item, index) in 2">
                            <NuxtLink to="#">
                                <span class="erjibiaoti">农民话题</span>
                            </NuxtLink>
                            <NuxtLink to="#">
                                绵阳市关工委在乡村振兴学校科普宣传活动普宣传活动
                            </NuxtLink>
                        </li>
                    </ul>
                    <div class="part5_photo_text_right">
                        <NuxtLink to="#">
                            <span class="part5_text11">西部地区最大高铁枢纽重庆东站进入线路精调阶段西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                            <img src="../public/index/01.png" alt="">
                        </NuxtLink>
                    </div>
                    <ul class="part5_right_content_11">
                        <li class="part5_right_contentlist_11" v-for="(item, index) in 2">
                            <NuxtLink to="#">
                                <span class="erjibiaoti">农民话题</span>
                            </NuxtLink>
                            <NuxtLink to="#">
                                绵阳市关工委在乡村振兴学校科普宣传活动普宣传活动
                            </NuxtLink>
                        </li>
                    </ul>
                    <div class="part5_photo_text_right">
                        <NuxtLink to="#">
                            <span class="part5_text11">西部地区最大高铁枢纽重庆东站进入线路精调阶段西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                            <img src="../public/index/01.png" alt="">
                        </NuxtLink>
                    </div>
                    <ul class="part5_right_content_11">
                        <li class="part5_right_contentlist_11" v-for="(item, index) in 2">
                            <NuxtLink to="#">
                                <span class="erjibiaoti">农民话题</span>
                            </NuxtLink>
                            <NuxtLink to="#">
                                绵阳市关工委在乡村振兴学校科普宣传活动普宣传活动
                            </NuxtLink>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 第六部分 -->
        <div class="part6">
            <div class="inner">
                <div class="part6_left">
                    <div class="part6_left_content1">
                        <h2 class="part6_left_content_title">
                            <img src="../public/index/xcsc.png" alt="乡村商城">
                            乡村商城
                        </h2>
                        <ul class="part6_left_content111">
                            <li class="part6_left_content_list" v-for="item in 4">
                                <span class="jiantou">></span>
                                <span class="fenlei">农副产品</span>
                                <span class="fenlei">农产资料</span>
                            </li>
                        </ul>
                    </div>
                    <div class="part6_left_content1">
                        <h2 class="part6_left_content_title">
                            <img src="../public/index/scbj.png" alt="">
                            市场报价
                            <span class="selectMore">查询 ></span>
                        </h2>
                        <ul class="part6_left_content111">
                            <li class="part6_left_content_list" v-for="item in 4">
                                <span class="jiantou">></span>
                                <span class="fenlei">最新报价</span>
                                <span class="fenlei">分类查询</span>
                            </li>
                        </ul>
                    </div>

                </div>
                <div class="part6_right">
                    <h2 class="part6_right_title">土乡特色</h2>
                    <div class="part6_right_content">
                        <ul class="part6_right_content_list">
                            <li class="yslist">
                                <img src="../public/index/ts01.png" alt="饮食特产">
                                饮食特产
                            </li>
                            <li class="yslist">
                                <img src="../public/index/ts02.png" alt="日用特产">
                                日用特产
                            </li>
                            <li class="yslist">
                                <img src="../public/index/ts03.png" alt="工业特产">
                                工业特产
                            </li>
                            <li class="yslist">
                                <img src="../public/index/ts04.png" alt="民族特产">
                                民族特产
                            </li>
                        </ul>
                        <ul class="part6_right_content_list1">
                            <li class="swlist">
                                <img src="../public/index/ts05.png" alt="生物特产">
                                生物特产
                            </li>
                            <li class="swlist">
                                <img src="../public/index/ts06.png" alt="文化特产">
                                文化特产
                            </li>
                            <li class="swlist">
                                <img src="../public/index/ts07.png" alt="资源特产">
                                资源特产
                            </li>
                            <li class="swlist">
                                <img src="../public/index/ts08.png" alt="其他特产">
                                其他特产
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 页面底部 -->
        <HomeFoot></HomeFoot>
    </div>
</template>

<script setup>
//1.页面必备方法 start ---------------------------------------->
//获得跳转链接
const getLinkPath = (item) => {
  if (item.children_count != 0) {
      return { path: `/primaryNavigation/${item.category_id}` }
  }
  if (item.is_url == 1) {
      return item.web_url
  }
  return { path: `/newsList/${item.category_id}` }
}
//1.页面必备方法 end ---------------------------------------->

//2.获取基本信息 start ---------------------------------------->
const pageData = ref([
    // { id: 0, data: [], data2: [], title: "", cid: "" },
])
const navSize = ref("");

//3.3 获取所有导航
try {
    const navigateData = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'placeid': 1,
            'pid': 0,
            'num': 14
        },
    });
    console.log("成功获取网站导航池！：", navigateData.data);
    // 遍历可用的导航池放到页面中
    for (let index in navigateData.data) {
        let data = {
            title: navigateData.data[index].name,
            cid: navigateData.data[index].category_id,
            children_count: navigateData.data[index].children_count,
            alias: navigateData.data[index].alias,
            data:[],
            data1:[],
            data2:[],
            data3:[],
            data4:[],
            category_id1:"",
            category_id2:"",
            category_id3:"",
            category_id4:"",
            title1: "",
            title2: "",
            title3: "",
            title4: ""
        };
        if (navigateData.data[index].is_url == 1) {
            // 处理 URL 的逻辑
        } else {
            pageData.value.push(data);
        }
    }

    //导航池加载完毕，开始申请模块数据
    await getPageData1();
    await getPageData1_data2();
    await getPageData1_data3();
    await getPageData2();
    await getPageData3();
    await getPageData4();
    
} catch (error) {
    console.error('获取页面导航失败！:', error);
}

//模块1
async function getPageData1() {
    const mkdata =  await requestDataPromise('/web/getWebsiteModelArticles', {
        method: 'GET',
        query: {
            'catid': pageData.value[0].cid,
            'level': 3,
            'pagesize': 1
        },
    });
    pageData.value[0].data = mkdata.data;
}
async function getPageData1_data2() {
    const mkdata =  await requestDataPromise('/web/getWebsiteModelArticles', {
        method: 'GET',
        query: {
            'catid': pageData.value[0].cid,
            'level': 3,
            'pagesize': 4,
            'placeid': 2
        },
    });
    pageData.value[0].data2 = mkdata.data;
}
async function getPageData1_data3() {
    const mkdata =  await requestDataPromise('/web/getWebsiteModelArticles', {
        method: 'GET',
        query: {
            'catid': pageData.value[0].cid,
            'level': 1,
            'pagesize': 8,
        },
    });
    pageData.value[0].data3 = mkdata.data;
}
//模块2
async function getPageData2() {
    const mkdata =  await requestDataPromise('/web/getWebsiteModelArticles', {
        method: 'GET',
        query: {
            'catid': pageData.value[1].cid,
            'level': 3,
            'pagesize': 5
        },
    });
    pageData.value[1].data = mkdata.data;
}
//模块3
async function getPageData3() {
    const mkdata =  await requestDataPromise('/web/getWebsiteModelArticles', {
        method: 'GET',
        query: {
            'catid': pageData.value[2].cid,
            'level': 3,
            'pagesize': 6
        },
    });
    pageData.value[2].data = mkdata.data;
}
//模块4
async function getPageData4() {
    const mkdata =  await requestDataPromise('/web/getWebsiteModelArticles', {
        method: 'GET',
        query: {
            'catid': pageData.value[3].cid,
            'level': 3,
            'pagesize': 6
        },
    });
    pageData.value[3].data = mkdata.data;
}








//2.获取基本信息 end ---------------------------------------->

//3.广告 start ---------------------------------------->
const adList = ref([]);
async function getAdData(){
    const mkdata = await requestDataPromise('/web/getWebsiteAdvertisement',{
        method:'GET',
        query:{
            'ad_tag':'INDEX'
        }
    });
    adList.value = mkdata.data;
}
getAdData();
//3.广告 end ---------------------------------------->

//4.设置seo数据 start---------------------------------------->
const setData =  await requestDataPromise('/web/getWebsiteFootInfo', {
    method: 'GET',
    query: {},
});
let seoTitle = setData.data.website_head.title;
let seoDescription = setData.data.website_head.description;
let seoKeywords = setData.data.website_head.keywords;
useSeoMeta({
    title: seoTitle,
    meta: [
        { name: 'description', content: seoDescription },
        { name: 'keywords', content: seoKeywords }
    ]
});
//4.设置seo数据 start---------------------------------------->
</script>

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