zizhujianzhan_web/pages/index.vue

<template>
    <!-- 头部 -->
    <templateHead></templateHead>
    <!-- 菜单 -->
    <templateMenu></templateMenu>
    <!-- 内容 -->
    <div>
        <!-- <div>当前皮肤：{{ skinId }}</div> -->
        <!--广告组件-->
        <templateAd :adTag="'nmw_index_0001'" :skinId="skinId" :adData="adData"></templateAd>
        <!--头条-->
        <templateHeadline :skinId="skinId" :templateData="testTemplateData"></templateHeadline>
        <!--头条-->






        <!-- <HomeAdvertising :imgurl="adImg1"></HomeAdvertising> -->
        <!--头条-->
        <!-- <HomePageMessage></HomePageMessage> -->
        <!-- 第一部分 -->
        <!-- <div class="part1">
            <div class="inner">
                <div class="part1_left">
                    <div class="hengxian">
                        <em></em>
                    </div>
                    <div class="part1_left_title">
                        <img src="../public/index/nav01.png" alt="">
                        <NuxtLink class="active" v-if="pageData[0].cid" :href="getLinkPath(pageData[0])"
                            :title="pageData[0].alias">
                            {{ pageData[0].alias }}
                        </NuxtLink>
                    </div>
                    <div class="part1_left_content">
                        <div class="part1_left_content1">
                            <div class="part1_left_photo">
                                <div class="part1_left_photo11" v-for="item in boxData1" :key="index">
                                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                        :target="item.islink == 1 ? '_blank' : '_self'">
                                        <img :src="item.imgurl" :alt="item.title">
                                        <div class="left_content">
                                            {{ item.title }}
                                        </div>
                                    </NuxtLink>
                                </div>
                            </div>
                            <ul class="part1_left_context">
                                <li class="part1_left_contextList" v-for="item in boxData1data2" :key="index">
                                    {{ item.title }}
                                </li>
                            </ul>
                        </div>
                        <div class="part1_left_content2">
                            <ul class="part1_left_context222">
                                <li class="part1_left_contextList222" v-for="item in boxData1data3" :key="index">
                                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                        :target="item.islink == 1 ? '_blank' : '_self'">
                                        {{ item.title }}
                                    </NuxtLink>
                                </li>
                            </ul>
                            <ul class="part1_left_context222">
                                <li class="part1_left_contextList222" v-for="item in boxData1data4" :key="index">
                                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                        :target="item.islink == 1 ? '_blank' : '_self'">
                                        {{ item.title }}
                                    </NuxtLink>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="part1_right">
                    <div class="part1_right_title">
                        <NuxtLink :class="{ 'part1_right_titlelist': true, 'active': hoverStatus == 1 }"
                            @mouseenter="qhPic(1)" v-if="pageData[1].cid" :href="getLinkPath(pageData[1])"
                            :title="pageData[1].alias">
                            {{ pageData[1].alias }}
                        </NuxtLink>
                        <NuxtLink :class="{ 'part1_right_titlelist': true, 'active': hoverStatus == 2 }"
                            @mouseenter="qhPic(2)" v-if="pageData[2].cid" :href="getLinkPath(pageData[2])"
                            :title="pageData[2].alias">
                            {{ pageData[2].alias }}
                        </NuxtLink>
                    </div>
                    <div v-if="hoverStatus == 1">
                        <div class="part1_right_photo_text">
                            <div v-for="item in boxData2" :key="index">
                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                    :target="item.islink == 1 ? '_blank' : '_self'">
                                    <img :src="item.imgurl" :alt="item.title">
                                    <div class="part1_right_text">
                                        {{ item.title }}
                                    </div>
                                </NuxtLink>
                            </div>
                        </div>
                        <ul class="part1_right_content">
                            <li class="part1_right_contentList" v-for="item in boxData2data2" :key="index">
                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                    :target="item.islink == 1 ? '_blank' : '_self'">
                                    <em></em>
                                    {{ item.title }}
                                </NuxtLink>
                            </li>
                        </ul>
                    </div>
                    <div v-if="hoverStatus == 2">
                        <div class="part1_right_photo_text">
                            <div v-for="item in boxData3" :key="index">
                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                    :target="item.islink == 1 ? '_blank' : '_self'">
                                    <img :src="item.imgurl" :alt="item.title">
                                    <div class="part1_right_text">
                                        {{ item.title }}
                                    </div>
                                </NuxtLink>
                            </div>
                        </div>
                        <ul class="part1_right_content">
                            <li class="part1_right_contentList" v-for="item in boxData3data2" :key="index">
                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                    :target="item.islink == 1 ? '_blank' : '_self'">
                                    <em></em>
                                    {{ item.title }}
                                </NuxtLink>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div> -->

        <!-- 广告位 2 -->
        <!-- <HomeAdvertising :imgurl="adImg2"></HomeAdvertising> -->

        <!-- 第二部分 -->
        <!-- <div class="part2">
            <div class="inner">
                <div class="part2_left">
                    <div class="part2_hengxian">
                        <em></em>
                    </div>
                    <div class="part2_left_title">
                        <img src="../public/index/nav02.png" alt="">
                        <NuxtLink class="active" v-if="pageData[3].cid" :href="getLinkPath(pageData[3])"
                            :title="pageData[3].alias">
                            {{ pageData[3].alias }}
                        </NuxtLink>
                    </div>
                    <div class="part2_left_content1">
                        <ul class="part2_left_content111">
                            <li class="part2_left_content1_list" v-for="item in boxData4" :key="index">
                                <NuxtLink :href="getLinkPath1(item)" :title="item.title"
                                    :target="item.islink == 1 ? '_blank' : '_self'">
                                    <span class="nav2_title">{{ item.alias }}</span>
                                </NuxtLink>
                                <NuxtLink :href="getLinkPathDetail1(item)" :title="item.title"
                                    :target="item.islink == 1 ? '_blank' : '_self'">
                                    <span class="nav2_title_content">
                                        {{ item.title }}
                                    </span>
                                </NuxtLink>
                            </li>
                        </ul>
                    </div>
                    <ul class="part2_left_content2">
                        <li class="part2_left_content2list" v-for="item in boxData4data2" :key="index">
                            <NuxtLink :href="getLinkPathDetail1(item)" :title="item.title"
                                :target="item.islink == 1 ? '_blank' : '_self'">
                                <img :src="item.imgurl" :alt="item.title" class="part2_left_content222img">
                                <div class="content2_text">
                                    <span class="content2_text_content">
                                        {{ item.title }}
                                    </span>
                                    <NuxtLink :href="getLinkPath1(item)" :title="item.title"
                                        :target="item.islink == 1 ? '_blank' : '_self'">
                                        <span class="content2_text_title">{{ item.alias }}</span>
                                    </NuxtLink>
                                </div>
                            </NuxtLink>
                        </li>
                        <div class="adlogo3" v-if="adImg3">
                            <a href="http://sannongdy.org.cn/" v-if="adImg3.image_url == null" target="_blank"
                                :title="adImg3.place_name">
                                <img :src="adImg3.thumb" :alt="adImg3.place_name" data-tag="imgurl.ad_tag">
                            </a>
                            <a :href="adImg3.image_url" v-else :title="adImg3.ad_name">
                                <img :src="adImg3.image_src" :alt="adImg3.ad_name" data-tag="imgurl.ad_tag">
                            </a>
                        </div>
                    </ul>
                </div>
                <div class="part2_right">
                    <div class="part2_right_title">
                        <NuxtLink v-if="pageData[4].cid" :href="getLinkPath(pageData[4])" :title="pageData[4].alias">
                            {{ pageData[4].alias }}
                        </NuxtLink>
                    </div>
                    <ul class="part2_right_content">
                        <li class="part2_right_contentList" v-for="(item, index) in boxData5" :key="index">
                            <span class="listNumber">{{ index + 1 }}</span>
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                :target="item.islink == 1 ? '_blank' : '_self'">
                                {{ item.title }}
                            </NuxtLink>
                        </li>
                    </ul>
                </div>
            </div>
        </div> -->

        <!-- 第三部分 -->
        <!-- <div class="part3">
            <div class="inner">
                <div class="part3_left">
                    <div class="part3_hengxian">
                        <em></em>
                    </div>
                    <div class="part3_left_title">
                        <img src="../public/index/nav03.png" alt="">
                        <NuxtLink class="active" v-if="pageData[5].cid" :href="getLinkPath(pageData[5])"
                            :title="pageData[5].alias">
                            {{ pageData[5].alias }}
                        </NuxtLink>
                    </div>
                    <div class="part3_left_content">
                        <div class="part3_left_content1">
                            <div class="part3_left_content1_photo1">
                                <div v-for="item in boxData6" :key="index">
                                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                        :target="item.islink == 1 ? '_blank' : '_self'">
                                        <img :src="item.imgurl" :alt="item.title">
                                        <div class="part3_left_content1_text">
                                            {{ item.title }}
                                        </div>
                                    </NuxtLink>
                                </div>
                            </div>
                            <div class="part3_left_content1_photo2">
                                <div class="part3_left_content1_photo2list" v-for="item in boxData6data2" :key="index">
                                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                        :target="item.islink == 1 ? '_blank' : '_self'">
                                        <img :src="item.imgurl" :alt="item.title">
                                        <div class="part3_left_content1_text">
                                            {{ item.title }}
                                        </div>
                                    </NuxtLink>
                                </div>
                            </div>
                        </div>
                        <div class="part3_left_content2">
                            <ul class="part3_left_content2_text">
                                <li class="part3_left_content2_list" v-for="item in boxData6data3" :key="index">
                                    <NuxtLink :href="getLinkPath1(item)" :title="item.title"
                                        :target="item.islink == 1 ? '_blank' : '_self'">
                                        <span class="nav3_title">{{ item.alias }}</span>
                                    </NuxtLink>
                                    <NuxtLink :href="getLinkPathDetail1(item)" :title="item.title"
                                        :target="item.islink == 1 ? '_blank' : '_self'">
                                        <span class="nav3_title_content">
                                            {{ item.title }}
                                        </span>
                                    </NuxtLink>
                                </li>
                            </ul>
                            <ul class="part3_left_content2_text">
                                <li class="part3_left_content2_list" v-for="item in boxData6data4" :key="index">
                                    <NuxtLink :href="getLinkPath1(item)" :title="item.title"
                                        :target="item.islink == 1 ? '_blank' : '_self'">
                                        <span class="nav3_title">{{ item.alias }}</span>
                                    </NuxtLink>
                                    <NuxtLink :href="getLinkPathDetail1(item)" :title="item.title"
                                        :target="item.islink == 1 ? '_blank' : '_self'">
                                        <span class="nav3_title_content">
                                            {{ item.title }}
                                        </span>
                                    </NuxtLink>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="part3_right">
                    <div class="part3_right_title">
                        <NuxtLink class="active" v-if="pageData[6].cid" :href="getLinkPath(pageData[6])"
                            :title="pageData[6].alias">
                            {{ pageData[6].alias }}
                        </NuxtLink>
                    </div>
                    <div class="part3_right_content">
                        <div class="right_photo_text" v-for="item in boxData7" :key="index">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                :target="item.islink == 1 ? '_blank' : '_self'">
                                <img :src="item.imgurl" :alt="item.title">
                                <div class="right_text">
                                    {{ item.title }}
                                </div>
                            </NuxtLink>
                        </div>
                        <ul class="rightcontent_text">
                            <li class="rightcontent_textlist" v-for="item in boxData7data3" :key="index">
                                <em></em>
                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                    :target="item.islink == 1 ? '_blank' : '_self'">
                                    {{ item.title }}
                                </NuxtLink>
                            </li>
                        </ul>
                        <div class="right_photo_text" v-for="item in boxData7data2" :key="index">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                :target="item.islink == 1 ? '_blank' : '_self'">
                                <img :src="item.imgurl" :alt="item.title">
                                <div class="right_text">
                                    {{ item.title }}
                                </div>
                            </NuxtLink>
                        </div>
                        <ul class="rightcontent_text">
                            <li class="rightcontent_textlist" v-for="item in boxData7data4" :key="index">
                                <em></em>
                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                    :target="item.islink == 1 ? '_blank' : '_self'">
                                    {{ item.title }}
                                </NuxtLink>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div> -->
        <!-- <HomeAdvertising :imgurl="adImg4"></HomeAdvertising> -->
        <!-- 第四部分 -->
        <!-- <div class="part4">
            <div class="inner">
                <div class="part4_one">
                    <div class="part4_title">
                        <div class="part4_hengxian">
                            <em></em>
                        </div>
                        <div class="part4_left_title">
                            <img src="../public/index/nav03.png" alt="">
                            <NuxtLink class="active" v-if="pageData[7].cid" :href="getLinkPath(pageData[7])"
                                :title="pageData[7].alias">
                                {{ pageData[7].alias }}
                            </NuxtLink>
                        </div>
                    </div>
                    <div class="part4_photo_text">
                        <div v-for="item in boxData8" :key="index">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                :target="item.islink == 1 ? '_blank' : '_self'">
                                <img :src="item.imgurl" :alt="item.title">
                                <span class="text">{{ item.title }}</span>
                            </NuxtLink>
                        </div>
                    </div>
                    <ul class="part4_photo_content">
                        <li class="part4_photo_contentlist" v-for="item in boxData8data2" :key="index">
                            <NuxtLink :href="getLinkPath1(item)" :title="item.title"
                                :target="item.islink == 1 ? '_blank' : '_self'">
                                <span class="nav11_title">{{ item.alias }}</span>
                            </NuxtLink>
                            <NuxtLink :href="getLinkPathDetail1(item)" :title="item.title"
                                :target="item.islink == 1 ? '_blank' : '_self'">
                                <span class="nav11_title_content">
                                    {{ item.title }}
                                </span>
                            </NuxtLink>
                        </li>
                    </ul>
                </div>
                <div class="part4_one">
                    <div class="part4_title">
                        <div class="part4_hengxian">
                            <em></em>
                        </div>
                        <div class="part4_left_title">
                            <img src="../public/index/nav03.png" alt="">
                            <NuxtLink class="active" v-if="pageData[8].cid" :href="getLinkPath(pageData[8])"
                                :title="pageData[8].alias">
                                {{ pageData[8].alias }}
                            </NuxtLink>
                        </div>
                    </div>
                    <div class="part4_photo_text">
                        <div v-for="item in boxData9" :key="index">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                :target="item.islink == 1 ? '_blank' : '_self'">
                                <img :src="item.imgurl" :alt="item.title">
                                <span class="text">{{ item.title }}</span>
                            </NuxtLink>
                        </div>
                    </div>
                    <ul class="part4_photo_content">
                        <li class="part4_photo_contentlist" v-for="item in boxData9data2" :key="index">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                :target="item.islink == 1 ? '_blank' : '_self'">
                                <span class="nav11_title_content2">
                                    {{ item.title }}
                                </span>
                            </NuxtLink>
                        </li>
                    </ul>
                </div>
                <div class="part4_one">
                    <div class="part4_title">
                        <div class="part4_hengxian">
                            <em></em>
                        </div>
                        <div class="part4_left_title">
                            <img src="../public/index/nav03.png" alt="">
                            <NuxtLink class="active" v-if="pageData[9].cid" :href="getLinkPath(pageData[9])"
                                :title="pageData[9].alias">
                                {{ pageData[9].alias }}
                            </NuxtLink>
                        </div>
                    </div>
                    <div class="part4_photo_text">
                        <div v-for="item in boxData10" :key="index">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                :target="item.islink == 1 ? '_blank' : '_self'">
                                <img :src="item.imgurl" :alt="item.title">
                                <span class="text">{{ item.title }}</span>
                            </NuxtLink>
                        </div>
                    </div>
                    <ul class="part4_photo_content">
                        <li class="part4_photo_contentlist" v-for="item in boxData10data2" :key="index">
                            <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                                :target="item.islink == 1 ? '_blank' : '_self'">
                                <span class="nav11_title_content2">
                                    {{ item.title }}
                                </span>
                            </NuxtLink>
                        </li>
                    </ul>
                </div>
            </div>
        </div> -->
    </div>
    <!-- 底部 -->
    <templateFoot></templateFoot>
</template>

<script setup>
//0.加载全局模板组件 start---------------------------------------->
//0.1 全局通栏
import templateHead from '@/components/template/sector/head/1200x200/1.vue'
import templateMenu from '@/components/template/sector/menu/1200x130/1.vue'
import templateFoot from '@/components/template/sector/foot/1200x580/1.vue'
//0.2 局部通栏
//0.2.1 广告组件
import templateAd from '@/components/template/sector/body/ad/1200x90/1.vue'
//0.2.2 网站头条
import templateHeadline from '@/components/template/sector/body/index/headLine/1200x140/1.vue'

//0.加载全局模板组件 end---------------------------------------->

//1.获得基本信息单元 start---------------------------------------->
//1.1获得页面依赖
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
//1.2获得pinia源
import { useTemplateBaseStore } from '@/stores/templateBase'
const templateBaseStore = useTemplateBaseStore()
//1.3获得该页的皮肤id - 在每个组件中也是同样的获得方法
const skinId = ref("")
//1.4获得站点基本信息
const responseStatus = await requestDataPromise('/web/getWebsiteAllinfo', {
    method: 'GET',
    query: {
        'link_textnum':24,
        'link_imgnum':18,
        'link_footnum':4
    },
});
if (responseStatus.code == 200) {
    //0.3.1设置站点基本信息
    templateBaseStore.setWebSiteInfo(responseStatus.data)
    //0.3.2设置皮肤id
    skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_id;
    //0.3.3设置seo信息
    let seoTitle = templateBaseStore.webSiteInfo.website_head.title;
    let seoDescription = templateBaseStore.webSiteInfo.website_head.description;
    let seoKeywords = templateBaseStore.webSiteInfo.website_head.keywords;
    let seoSuffix = templateBaseStore.webSiteInfo.website_head.suffix;
    let seoName = templateBaseStore.webSiteInfo.website_head.website_name;
    useSeoMeta({
        title: seoTitle + "_" + seoSuffix,
        meta: [
            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
        ]
    });
}
//1.5获得广告池
const adData = ref([]);
const adResponseStatus = await requestDataPromise('/web/getWebsiteAdvertisement', {
    method: 'GET',
    query: {},
});
if (adResponseStatus.code == 200) {
    //console.log(responseStatus.data)
    templateBaseStore.setAdList(adResponseStatus.data)
    adData.value = adResponseStatus.data;
    //获取广告
    //adImg.value = requestAd(templateBaseStore.webAdList,templateBaseStore.webSiteInfo.website_head.ad_key + "_" + "top")
}
//1.获得基本信息单元 end---------------------------------------->

//2.页面数据 start---------------------------------------->
//2.0 测试数据 后期移除
const testTemplateData = {
    "sectorName": "text",
    "componentList": [
        {
            "component_type": 1,//1=新闻 2=广告
            "component_style": 1,//样式
            "sort": 1,//组件位置
            "data": {
                "text": [
                    {
                        "id": 50079,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙1",
                        "islink": 0,
                        "pinyin": "sannongtansuo/jiaodianfangtan"
                    },
                    {
                        "id": 50136,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙2",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50137,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙3",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙4",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙5",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙7",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙8",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    }
                ],
            }
        }
    ],    
}
//2.页面数据 end---------------------------------------->
</script>

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