sannongshichangwang/components/home/foot.vue

<template>
    <footer class="index_foot">
        <div class="foot_img_box" v-if="bottomLink">
            <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 v-if="bottomText">
                <a :href="item.url" v-for="(item, index) in bottomText" :key="index" target="_blank">{{item.title}}</a>
            </div>
        </div>
    </footer>

    <div class="call_us_box">
        <div class="inner" v-if="bottomMenu">
            <span v-for="(item, index) in bottomMenu" :key="index">
                <NuxtLink :to="{ path: `/about/${item.name_pinyin}/list-1.html` }" v-if="item.type == 1" :title="item.name">
                    {{ item.name }}
                </NuxtLink>
                <NuxtLink :to="{ path: `/about/${item.name_pinyin}/index.html` }" v-if="item.type == 0" :title="item.name">
                    {{ item.name }}
                </NuxtLink>
            </span>
        </div>
    </div>
    <footer class="index_foot"  v-if="bottomBase">
        <div class="foot_text_box" v-if="bottomBase">
            <p v-html="bottomBase.statement" class="foot_text_html_css"></p>
            <p v-html="bottomBase.organizer" class="foot_text_html_css"></p>
            <p v-html="bottomBase.copyright_information" class="foot_text_html_css"></p>
            <p><span v-html="bottomBase.icp_number" class="foot_text_html_css"></span><span v-html="bottomBase.record_number" class="foot_text_html_css"></span></p>
            <p v-html="bottomBase.email" class="foot_text_html_css"></p>
            <p v-html="bottomBase.company_address" class="foot_text_html_css"></p>
            <p v-html="bottomBase.contact_number" class="foot_text_html_css"></p>
        </div>
        <div class="foot_logo_out" v-if="bottomBase">
            <a :href="'http://' + bottomBase.project_url" :title="bottomBase.project_name" v-if="bottomBase.project_logo!=''&&bottomBase.project_url!=''">
                <img :src="bottomBase.project_logo" class="floatLogoRight" :alt="bottomBase.project_name">
            </a>
            <span v-else-if="bottomBase.project_logo!=''&&bottomBase.project_url==''">
                <img :src="bottomBase.project_logo" class="floatLogoRight" :alt="bottomBase.project_name">
            </span>
            <a :href="'http://' + bottomBase.company_url" :title="bottomBase.company_name" v-if="bottomBase.company_logo!=''&&bottomBase.company_url!=''">
                <img :src="bottomBase.company_logo" class="floatLogoLeft" :alt="bottomBase.company_name">
            </a>
            <span v-else-if="bottomBase.company_logo!=''&&bottomBase.company_url==''">
                <img :src="bottomBase.company_logo" class="floatLogoLeft" :alt="bottomBase.company_name">
            </span>
        </div>
        <div class="foot_last_img_box" v-if="bottomphoto">
            <a :href="item.url" v-for="(item, index) in bottomphoto" :title="item.title">
                <img :src="item.logo_url" :alt="item.title">
            </a>
        </div>

        <!--在线客服-->
        <HomeKefu :bottomBase="bottomBase" v-if="bottomphoto"/>
    </footer>
</template>
 
<script setup>
//获得底部基本信息 start---------------------------------------->
//1.获得全部友情链接与底部图片
const bottomLink = ref([])
const bottomText = ref([])
const bottomphoto = ref([])
const bottomMenu = ref([])
const bottomBase = ref({})

async function getModelDataAll() {
    const mkdata =  await requestDataPromise('/web/getWebsiteFootAll', {
        method: 'GET',
        query: {
            'link_textnum':24,
            'link_imgnum':18,
            'link_footnum':4
        },
    });
    if(mkdata.code == 200){
        bottomLink.value = mkdata.data.link_img;
        bottomText.value = mkdata.data.link_text;
        bottomphoto.value = mkdata.data.link_foot;
        bottomMenu.value = mkdata.data.foot_cate;
        bottomBase.value = mkdata.data.foot_info;
        

    }else{
        // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
        // console.log("错误位置：获取友情链接图片")
        // console.log("后端错误反馈：",mkdata.message)
        // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    }
}
getModelDataAll();
//获得底部基本信息 end---------------------------------------->
</script>

<style lang="less" scoped>
    @import '@/assets/css/public/footer.less';
    @import '@/assets/css/public/kefu.less';
</style>





<style lang="less" scoped>

    @media screen and (max-width:800px){/*ipad_phone*/
            .phone_none{display:none!important;}
            .index_foot{width:92%;margin:0px auto;overflow:hidden;}

            .foot_img_box{display:block;margin-top:0px;}
            .foot_img_box a{overflow:hidden;width:30%;margin:1.3%!important;height:11vw;float:left;}
            .foot_img_box img{display:block;width:100%;height:100%;}
            .foot_frind_box div *{margin:0px 10px 10px;font-size:14px;}
            .call_us_box{margin-top:0px;padding:4px 0px;}
            .call_us_box .inner {overflow:hidden;}
            .call_us_box .inner> *{border:none;margin:8px 0px;float:left;padding:0px 4vw;}
            .foot_logo_out{display:none;}


            .kefu{left:0px;bottom:0px;width:100%;height:66px; text-align:center; 
                    line-height:66px; z-index: 1111;position:relative; right:0px; }
            /deep/.kefu>div{display:inline-block;margin:0px 10px!important;height:55px!important;width:90px!important;}
            /deep/.kefu>div a{display:block; height:55px;}
            /deep/.kefu>div>img{display:block;margin:3px auto 0!important;width:33px!important;height:33px!important;}
            /deep/.kefu>div>a>img{display:block;margin:3px auto 0!important;width:33px!important;height:33px!important;}
            /deep/.kefu .kefu_item_content_QQ img{margin-bottom:0px;}
            /deep/.kefu .kefu_item_content_QQ .qqfs{margin-bottom:0px;height:22px;line-height:22px;}
            /deep/ .kefu .kefu_itemKf a > p{word-break: keep-all; white-space: nowrap;}
            /deep/.kefu .kefu_item_content_QQ{
                
                right:-95px;
                margin-right:50%;overflow:hidden;
                top:auto;bottom:100px;
                line-height: normal;
            }
            /deep/.kefu .qqadd:nth-of-type(1){margin-bottom:22px;}
            
            /deep/.kefu .kefu_item_content_phone{
               right:20px;
               margin-right:50%;overflow:hidden;
               top:auto;bottom:100px;
               line-height: normal;
            
            
            }  

            .foot_last_img_box{margin-top:11px;padding-bottom:11px;}
            .foot_last_img_box a{width:auto;height:8vw;margin:0px 1vw;}
            .foot_last_img_box img{width:auto;height:100%;}


            .foot_text_box>p{   margin-top:2px;}

            .foot_frind_box{display:block;}
            .foot_frind_box span{margin:0px 0px 10px 2%;display:block;font-size:14px;}
            .call_us_box > *{font-size:14px; }

    }
</style>