admin_home/src/views/template/style/sector/foot/1200x680/1.vue

<template>
    <div>
        <div :class="'footerStyle footerStyle' + this.$store.state.template.editWebsiteClass" v-if="this.$store.state.template.editWebsiteClass== 5 || this.$store.state.template.editWebsiteClass== 6">

            <div class="footerLogoBox">
                 
                <img src="http://192.168.1.234:19000/pre/image/jpeg/20251224/1766538399880609.jpg" alt="" v-if="this.$store.state.template.editWebsiteClass==5">
                <img src=" http://192.168.1.234:19000/pre/image/png/20251218/1766050741394985.png" alt="" v-if="this.$store.state.template.editWebsiteClass==6">
                 
            </div>
            <div :class="['imgLinkBox', { componentBorder: this.$store.state.template.previewStatus == false }]">
                <img :src="item.logo_url" v-for="item in this.$store.state.template.webSiteFooterInfo.link_img"
                    :key="item.id">
            </div>
            <div class="textLinkBox">
                <div class="textLinkBoxLeft">
                    <span>友情链接：</span>
                </div>
                <div class="textLinkBoxRight">
                    <span v-for="item in this.$store.state.template.webSiteFooterInfo.link_text" :key="item.id">{{
                        item.title }}</span>
                </div>
            </div>
            <div class="footerMenuBox">
                <div class="footerMenu">
                    <div v-for="item in this.$store.state.template.webSiteFooterInfo.foot_cate" :key="item.id">
                        {{ item.name }}</div>
                </div>
            </div>
            <div class="footInfoBox">
                <div :class="['footerInfoBox', { componentBorder: this.$store.state.template.previewStatus == false }]">
                    <div class="footerInfoBoxContent" v-if="this.$store.state.template.webSiteFooterInfo">
                        <div class="footerInfoBoxContentLeft">
                            <img :src="this.$store.state.template.webSiteFooterInfo.foot_info.company_logo">
                        </div>
                        <div class="footerInfoBoxContentMain">
                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.statement"
                                class="foot_text_html_css"></p>
                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.organizer"
                                class="foot_text_html_css"></p>
                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.copyright_information"
                                class="foot_text_html_css"></p>
                            <p>
                                <span v-html="this.$store.state.template.webSiteFooterInfo.foot_info.icp_number"
                                    class="foot_text_html_css"></span>
                                <span v-html="this.$store.state.template.webSiteFooterInfo.foot_info.record_number"
                                    class="foot_text_html_css"></span>
                            </p>
                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.email"
                                class="foot_text_html_css"></p>
                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.company_address"
                                class="foot_text_html_css"></p>
                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.contact_number"
                                class="foot_text_html_css"></p>
                        </div>
                        <div class="footerInfoBoxContentRight">
                            <img :src="this.$store.state.template.webSiteFooterInfo.foot_info.project_logo">
                        </div>
                    </div>
                    <div class="footerInfoBoxBottom">
                        <img :src="item.logo_url" v-for="item in this.$store.state.template.webSiteFooterInfo.link_foot"
                            :key="item.id">
                    </div>
                </div>
            </div>
        </div>

        <!-- 皮肤7皮肤7 -->
        <div :class="'footerStyle footerStyle' + this.$store.state.template.editWebsiteClass" v-if="this.$store.state.template.editWebsiteClass == 7">
            
            <div class="index_1_top_box">
                <h4 class="index_1_top_h4">
                    <span class=" ">友情链接 </span>
                </h4> 
            </div>

            <div :class="['imgLinkBox', { componentBorder: this.$store.state.template.previewStatus == false }]">
                <img :src="item.logo_url" v-for="item in this.$store.state.template.webSiteFooterInfo.link_img"
                    :key="item.id">
            </div> 
            <div class="textLinkBox">
                <div class="textLinkBoxLeft">
                    <span>友情链接：</span>
                </div>
                <div class="textLinkBoxRight">
                    <span v-for="item in this.$store.state.template.webSiteFooterInfo.link_text" :key="item.id">{{
                        item.title }}</span>
                </div>
            </div>
            <div class="footerMenuBox">
                <div class="footerMenu">
                    <div v-for="item in this.$store.state.template.webSiteFooterInfo.foot_cate" :key="item.id">
                        {{ item.name }}
                    </div> 
                </div>
            </div>
            <div class="footInfoBox">
                <div :class="['footerInfoBox', { componentBorder: this.$store.state.template.previewStatus == false }]">
                    <div class="footerInfoBoxContent" v-if="this.$store.state.template.webSiteFooterInfo">
                        <div class="footerInfoBoxContentLeft">
                            <img :src="this.$store.state.template.webSiteFooterInfo.foot_info.company_logo">
                        </div>
                        <div class="footerInfoBoxContentMain">
                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.statement"
                                class="foot_text_html_css"></p>
                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.organizer"
                                class="foot_text_html_css"></p>
                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.copyright_information"
                                class="foot_text_html_css"></p>
                            <p>
                                <span v-html="this.$store.state.template.webSiteFooterInfo.foot_info.icp_number"
                                    class="foot_text_html_css"></span>
                                <span v-html="this.$store.state.template.webSiteFooterInfo.foot_info.record_number"
                                    class="foot_text_html_css"></span>
                            </p>
                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.email"
                                class="foot_text_html_css"></p>
                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.company_address"
                                class="foot_text_html_css"></p>
                            <p v-html="this.$store.state.template.webSiteFooterInfo.foot_info.contact_number"
                                class="foot_text_html_css"></p>
                        </div>
                        <div class="footerInfoBoxContentRight">
                            <img :src="this.$store.state.template.webSiteFooterInfo.foot_info.project_logo">
                        </div>
                    </div>
                    <div class="footerInfoBoxBottom"> 
                        
                        <img :src="item.logo_url" 
                            v-for="item in this.$store.state.template.webSiteFooterInfo.link_foot"
                            :key="item.id">


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

    </div>
</template>

<script>
// import '@/styles/theme/foot/style1.less';
// import '@/styles/theme/foot/style2.less';
export default {
    props: {},
    components: {},
    data() {
        return {};
    },
    methods: {},
    mounted() {
    }
};
</script>

<style scoped lang="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;

        img {
            width: 170px;
            height: 60px;
            margin-right: 36px;
            display: block;
            margin-bottom: 20px;

            &:nth-child(6n) {
                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;

            span {
                display: block;
                margin-bottom: 20px;
            }
        }

        .textLinkBoxRight {
            width: 1083px;
            color: #333;
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;

            span {
                margin-right: 50px;
                display: block;
                margin-bottom: 20px;
            }
        }
    }

    .footerMenuBox {
        border-bottom: none;

        .footerMenu {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;

            div {
                color: #fff;
                font-size: 14px;
                font-weight: bold;
                width: 200px;
                text-align: center;

                &:last-child {
                    border-right: none;
                }
            }
        }
    }

    .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;
                }
            }
        }
    }


}

//样式5
@style5color: #3848a0;
@style5BorderRight: #1f308c 1px solid;

.footerStyle5 {
    .footerLogoBox {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;

        img {
            width: 1200px;
            height: 70px;
        }
    }

    .footerMenuBox {
        background-color: @style5color;
    }

    .footerMenu {
        div {
            border-right: @style5BorderRight;
        }
    }

    .footInfoBox {
        background-color: @style5color;
    }
}

//样式6
@style6color: #16407a;
@style6BorderRight: #16407a 1px solid;

.footerStyle6 {
    .footerLogoBox {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        padding-top: 30px;

        img {
            width: 1200px;
            height: 32px;
        }
    }

    .footerMenuBox {
        background-color: @style6color;
    }

    .footerMenu {
        div {
            border-right: @style6BorderRight;
        }
    }

    .footInfoBox {
        background-color: @style6color;
    }
}

//样式7 
@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>