zizhujianzhan_web/components/template/sector/foot/1200x700/1.vue

<template>
    <div :class="'footerStyle footerStyle' + skinId">
        <div class="index_1_top_box">
            <h4 class="index_1_top_h4">
                <span>友情链接 </span>
            </h4> 
        </div>
        <div class="imgLinkBox">
            <a :href="item.url" v-for="(item, index) in bottomLink" target="_blank">
                <img :src="item.logo_url" alt="">
            </a>
        </div>
        <div class="textLinkBox">
            <div class="textLinkBoxLeft">
                <span>友情链接：</span>
            </div>
            <div class="textLinkBoxRight">
                <a :href="item.url" v-for="(item, index) in bottomText" :key="index" target="_blank">{{ item.title }}</a>
            </div>
        </div>
        <div class="footerMenuBox" v-if="bottomMenu.length < 7">
            <div class="footerMenu">
                <div 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>
                </div>
            </div>
        </div>
    </div>
    <div class="index_foot_bg7">
        <footer class="index_foot">
            <div class="foot_text_box">
                <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">
                <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" />
        </footer>
    </div>
</template>
<script setup>
//获得route
const route = useRoute()
const routeName = route.name;
import { useTemplateBaseStore } from '@/stores/templateBase'
const templateBaseStore = useTemplateBaseStore()
//获得底部基本信息 start---------------------------------------->
//1.获得全部友情链接与底部图片
const bottomLink = ref([])
const bottomText = ref([])
const bottomphoto = ref([])
const bottomMenu = ref([])
const bottomBase = ref({})
const skinId = ref("")//皮肤id
if (templateBaseStore.webSiteInfo.website_foot) {
    bottomLink.value = templateBaseStore.webSiteInfo.website_foot.link_img;
    bottomText.value = templateBaseStore.webSiteInfo.website_foot.link_text;
    bottomphoto.value = templateBaseStore.webSiteInfo.website_foot.link_foot;
    bottomMenu.value = templateBaseStore.webSiteInfo.website_foot.foot_cate;
    bottomBase.value = templateBaseStore.webSiteInfo.website_foot.foot_info;

    //获得皮肤id
    skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_id;
}
</script>
<style lang="less" scoped>
@import '@/assets/css/public/template/footer.less';
@import '@/assets/css/public/template/kefu.less';
//基本样式
.componentBorder {
    border: 2px dashed #999;
}
.footerStyle {
    width: 100%;
    margin: 0 auto;
    .imgLinkBox {
        width: 1200px;
        height: 140px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        overflow: hidden;
        margin: 0 auto;
        margin-bottom: 20px;
        box-sizing: content-box;
        a {
            img {
                width: 170px;
                height: 60px;
                margin-right: 36px;
                display: block;
                margin-bottom: 20px;
            }
            &:nth-child(6n) {
                img {
                    margin-right: 0;
                }
            } 
        }
    }
    .textLinkBox {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        box-sizing: content-box;
        .textLinkBoxLeft {
            color: #333;
            font-weight: bold;
            font-size: 16px;
            span {
                display: block;
                margin-bottom: 20px;
            }
        }
        .textLinkBoxRight {
            width: 1083px;
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            a {
                color: #333;
                margin-right: 50px;
                display: block;
                margin-bottom: 20px;
                font-size: 16px;
            }
        }
    }
    .footerMenuBox {
        border-bottom: none;
        .footerMenu {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            div {
                width: 200px;
                text-align: center;
                &:last-child {
                    border-right: none;
                }
                a {
                    color: #333333;
                    font-size: 14px;
                    font-weight: bold;
                }
            }
        }
    }
    .footInfoBox {
        width: 100%;
        .footerInfoBox {
            width: 1200px;
            padding-bottom: 30px;
            margin: 0 auto;
            box-sizing: content-box;
            .footerInfoBoxContent {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .footerInfoBoxContentLeft {
                    width: 10%;
                    box-sizing: border-box;
                    padding-right: 10px;
                    img {
                        width: 100%;
                        display: block;
                    }
                }
                .footerInfoBoxContentMain {
                    padding-top: 40px;
                    font-size: 14px;
                    text-align: center;
                    color: #fff;
                    div {
                        text-align: center;
                        padding-bottom: 10px;
                        color: #333;
                    }
                }
                .footerInfoBoxContentRight {
                    width: 10%;
                    box-sizing: border-box;
                    padding-left: 10px;
                    img {
                        width: 100%;
                        display: block;
                    }
                }
            }
            .footerInfoBoxBottom {
                display: flex;
                justify-content: center;
                align-items: center;
                padding-top: 40px;

                img {
                    width: 10%;
                    display: block;
                    margin-right: 10px;
                }
            }
        }
    }
}
//样式7 
.index_foot_bg7 {
    background: #A72213;
    padding-top: 30px;
    box-sizing: border-box;
    overflow: hidden;
}
.foot_text_box {
    margin-top: 0 !important;
    color:#fff !important;
    a {
        color:#fff !important;
    }
}
.foot_text_box :deep(a){color: #fff !important}
@style7color: #A72213;
@style7BorderRight: #D9D9D9 1px solid;
.footerStyle7 {
    .index_1_top_box{
        height:42px;
        text-align:center; 
        margin:0px auto 54px;
    }
    .index_1_top_h4{
        display:inline-block;
        text-align:center;
        position:relative; 
        padding:0px 20px;margin:0px auto;
    }
    .index_1_top_h4::after{
        content:'';
        position:absolute;
        left:-440px;
        top:14px; 
        height:20px;
        width:440px; 
        background:url(http://192.168.1.234:19000/pre/image/png/20251223/1766471836846789.png) no-repeat right 0px ;
        background-size: auto 100%;   
    }
    .index_1_top_h4::before{
        content:'';
        position:absolute;
        right:-440px;
        top:14px;
        height:20px;width:440px;  
        background:url( http://192.168.1.234:19000/pre/image/png/20251223/1766471917895279.png) no-repeat left 0px ;         
        background-size: auto 100%;   
    }
    .index_1_top_box>*{
        text-align:center;
        height:42px;
        line-height:42px;
        color:#333;
        font-size:32px;
        font-weight:normal;
    }
    .footerMenuBox {
        background-color: #FAFAFA;
    }
    .footerMenu { 
        div {
            border-right: @style7BorderRight;
            width: 260px!important;
            color: #333!important;
        }
    }
    .footInfoBox {
        background-color: @style7color;
    }
}
</style>