sannongzixunwang_web/components/home/foot1.vue

<template>
    <footer class="index_foot">
        <!-- <div class="index_foot_name_box">
            <div class="index_foot_name">YOUQING</div>
            <div class="index_foot_name">友情链接</div>
            <div class="index_foot_name">LIANJIE</div>		
        </div>
        <div class="foot_img_box"> 
            <a :href="item.url" v-for="(item, index) in bottomLink" target="_blank">
                <img :src="item.logo_url" alt="">
            </a>
        </div>
        <div class="foot_frind_box">
            <span>友情链接</span>	 		
            <div>
                <a :href="item.url" v-for="(item, index) in bottomText" :key="index" target="_blank">{{ item.title }}</a>	
            </div>
        </div> -->
        
        <div class="call_us_box">
            <span v-for="(item, index) in bottomMenu" :key="index">
                <NuxtLink :to="{ path: `/specialList/${item.id}` }" target="_blank" v-if="item.type == 1">
                    {{ item.name }}
                </NuxtLink>
                <NuxtLink :to="{ path: `/speciaArticle/${item.id}` }" target="_blank" v-if="item.type == 0">
                    {{ item.name }}
                </NuxtLink>
            </span>
        </div>
        <div class="foot_text_box">
           <!-- <p>{{ bottomBase.statistics_onetext }} <a :href="'http://' + bottomBase.statistics_twourl">中农兴业</a> {{ bottomBase.statistics_twotext }}</p> -->
           <p>{{ bottomBase.statistics_onetext }} <a :href="bottomBase.record_number_url" target="_blank">中农兴业</a> {{ bottomBase.statistics_twotext }}</p>
            <p>{{ bottomBase.organizer }} <a :href="currentDomain" target="_blank">三农资讯网</a> {{ currentDomainUrl }} 版权所有。</p>
            <!-- <p><img :src="bottomBase.icp_number_img"><a :href="'http://' + bottomBase.statistics_twourl">{{ bottomBase.record_number }}</a> <a :href="'http://' + bottomBase.icp_number_url">{{ bottomBase.icp_number }}</a> </p> -->
            <p><a :href="bottomBase.record_number_url" target="_blank">{{ bottomBase.record_number }}</a> &nbsp;&nbsp; <img :src="bottomBase.icp_number_img"><a :href="bottomBase.icp_number_url" target="_blank">{{ bottomBase.icp_number }}</a> </p>
            <p>{{ bottomBase.email }}</p>
            <p>{{ bottomBase.company_address }}</p>
            <p>{{ bottomBase.contact_number }}</p>
        </div>
        <div class="foot_logo_out" >
            <a :href="'http://' + bottomBase.company_url" :title="bottomBase.company_name" target="_blank">
                <img :src="bottomBase.project_logo" class="floatLogoLeft" :alt="bottomBase.company_name">
            </a>
            <a :href="'http://' + bottomBase.project_url" :title="bottomBase.project_name" target="_blank">
                <img :src="bottomBase.company_logo" class="floatLogoRight" :alt="bottomBase.project_name">
            </a>
        </div>
        <div class="foot_last_img_box">
            <a :href="item.url" v-for="(item, index) in bottomphoto"  target="_blank">
                <img :src="item.logo_url" alt="">
            </a>
        </div>
 		</footer>	
</template>

<script setup>
import { onMounted } from 'vue';
const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;

// const props = defineProps({
//     bottomLink: Array,
//     bottomMenu: Array,
//     bottomBase: Object
// });

//获得友情链接 图片
const bottomLink = ref([])
const getBottomLink = async () => {
    const response = await axios.get(`/web/selectWebsiteLinks?&type=${1}&num=${7}`);
    bottomLink.value = response.data;
    console.log(bottomLink.value)
}
//文字
const bottomText = ref([])
const getBottomLink2 = async () => {
    const response = await axios.get(`/web/selectWebsiteLinks?&type=${2}&num=${8}`);
    bottomText.value = response.data;
    console.log(bottomLink.value)
}
//底部
const bottomphoto = ref([])
const getBottomLink1 = async () => {
    const response = await axios.get(`/web/selectWebsiteLinks?&type=${3}&num=${4}`);
    bottomphoto.value = response.data;
    console.log(bottomphoto.value)
}

//获得底部导航
const bottomMenu = ref([])
const getBottomMenu = async () => {
    const response = await axios.get(`/web/getWebsiteFooterCategory`);
    bottomMenu.value = response.data;
    console.log(bottomMenu.value)
}

//获得底部基本信息
const bottomBase = ref({})
const getBottomBase = async () => {
    const response = await axios.get(`/web/getWebsiteFootInfo`);
    bottomBase.value = response.data.website_foot;
    console.log(7777777)
    console.log('bottomBase', bottomBase.value)
}


onMounted(() => {
    getBottomLink();
    getBottomLink1();
    getBottomLink2();
    getBottomMenu();
    getBottomBase();
    //获取域名
    getDomain()
})

//获取当前域名
const currentDomain = ref('')
const currentDomainUrl = ref('')

const getDomain = () => {
    if (process.client) {
        const url = new URL(window.location.href)
        currentDomainUrl.value = url.hostname // 获取域名
        currentDomain.value = url.origin //协议和域名
    }
}
</script>

<style lang="less" scoped>
.index_foot{box-sizing:border-box;width: 1200px;margin: 0 auto;}
.index_foot_name_box{margin:40px auto 0px; text-align:center;font-size:0px;}
.index_foot_name{display:inline-block;height:67px;line-height:67px;color:#f2f9f4;font-size:51px;font-weight:bold;overflow:hidden;}
.index_foot_name:nth-of-type(even){color:#333;font-size:32px;}
.foot_img_box{overflow:hidden;display:block;margin:40px auto 0;width:100%; }
.foot_img_box>*{float: left;width:150px;height:50px;overflow:hidden;box-sizing:border-box;border:solid 1px #D7EDD4;margin:0px 25px 10px 0px;}
.foot_img_box>* *{display: block;width:100%;height:100%;}
.foot_img_box>*:nth-of-type(7n){margin-right:0px; }
.foot_frind_box{ display:block;margin:11px auto;overflow:hidden;display:flex;width:100%;border-bottom:solid 2px #49A769;padding-bottom:35px;}
.foot_frind_box span{word-break: keep-all; white-space: nowrap;line-height:22px;font-size:16px;color:#333;font-weight:bold;}
.foot_frind_box div{width:100%;overflow:hidden; }
.foot_frind_box div *{float:left;line-height:22px;height:22px;color:#333;font-size:16px;margin:0 30px;}
.call_us_box{
    display:block;width:100%;margin:40px auto 0;overflow:hidden;text-align:center;font-size:0px;background:#49A769; 
    a {
        color: #fff;
    }
}
.call_us_box>*{height:12px;line-height:12px;color:#fff;font-size:14px;display:inline-block;box-sizing:border-box;padding:0 19px;font-weight:bold;border-left:solid 1px #5B8D54;margin:18px 0;}
.call_us_box>*:nth-of-type(1){border-left:0px;}
.foot_text_box{
    margin:40px auto 0px;text-align:center;color:#333;font-size:14px;line-height:25px;
    p {
        a {
            color: #333;
            font-size: 14px;
        }
    }
}
.foot_text_box_green{color:#40663B;}   
.foot_text_box img{display:inline-block;height:20px;vertical-align:middle;}   
.foot_logo_out{position:relative;margin:0px auto;width:100%;height:0px;}
.foot_logo_out *{width:120px;display:block; }
.foot_logo_out>*{position:absolute;top:-166px;}
.foot_logo_out>*:nth-of-type(1){left:0px;}
.foot_logo_out>*:nth-of-type(2){right:0px;}               
.foot_last_img_box {margin:40px auto 10px;text-align:center;overflow:hidden;width:100%;font-size:0px;padding-bottom: 40px;}
.foot_last_img_box>*{height:50px;width:150px;margin:0px 12px;display:inline-block;overflow:hidden;}
.foot_last_img_box>* *{display:block;height:100%;width:100%;overflow:hidden;}
</style>