fzxfb_org_cn/components/home/foot.vue

<template>
    <footer class="index_foot">
        <div class="foot_title">
            <div class="foot_title_text">友情链接</div>
        </div>
        <div class="foot_img_box">
            <a :href="item.url" v-for="(item, index) in bottomLink" :title="item.title" target="_blank">
                <!-- <img :src="item.logo_url" :alt="item.title"> -->
                <img src="public/index/link.jpg" :alt="item.title">
            </a>
        </div>
        <div class="foot_frind_box">
            <div>
                <a :href="item.url" v-for="(item, index) in bottomText" :key="index" :title="item.title"
                    target="_blank">{{ item.title }}</a>
            </div>
        </div>
        <div class="call_us_box">
            <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 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 foot_color_red"></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.contact_number" class="foot_text_html_css"></p>
            <p v-html="bottomBase.company_address" class="foot_text_html_css "></p>
            <p v-html="bottomBase.email" 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"> -->
                <img src="public/index/link2.png" :alt="item.title">
            </a>
        </div>
        <div class="kefu">
            <div class="kefu_itemKf">
                <a href="http://kf.znxyw.org.cn/?m=front&a=chat&key=ii08zncpb5" target="_blank">
                    <img src="public/index/kefu.png">
                    <p>在线客服</p>
                </a>
            </div>
            <!-- <div class="kefu_itemQQ">
                <img src="https://img.bjzxtw.org.cn/pre/public/image/qq1.png">
                <p>QQ客服</p>
                <div class="kefu_item_content_QQ">
                    <div @click="addQQFriend(qq1)" class="qqadd">
                        <img src="https://img.bjzxtw.org.cn/pre/public/index/tubiao1.png" width="100">
                        <div class="qqfs">{{ bottomBase.customer_service_qq }}</div>
                    </div>
                    <div @click="addQQFriend(qq2)" class="qqadd">
                        <img src="https://img.bjzxtw.org.cn/pre/public/index/tubiao2.png" width="100">
                        <div class="qqfs">{{ bottomBase.communications }}</div>
                    </div>
                    <div class="arrow"></div>
                </div>
            </div>
            <div class="kefu_itemPhone">
                <img src="https://img.bjzxtw.org.cn/pre/public/image/dianhua1.png">
                <p>电话客服</p>
                <div class="kefu_item_content_phone">
                    <div class="kefu_item_content_phone_title">联系电话：</div>
                    <div>{{ bottomBase.customer_service }}</div>
                    <div class="arrow"></div>
                </div>
            </div> -->
        </div>
        <!--右侧悬浮-->
        <div class="foot_right_float">
            <NuxtLink target="_blank" href="http://fazhidy.org.cn">政讯通•全国法制调研中心</NuxtLink>
            <NuxtLink target="_blank" href="http://fazyqjczx.org.cn">政讯通•全国法制舆情监测中心</NuxtLink>
            <NuxtLink target="_blank" href="http://fzfzcj.org.cn">政讯通•全国法制发展促进中心 </NuxtLink>
        </div>
        <!--你问我答-->
        <div :class="wenda ? 'wenda wenda_style' : 'wenda'">
            <div class="wenda_tlt">
                <h3><a href="/">你问我答</a></h3>
                <span @click="toggleWenda"></span>
            </div>
            <ul class="wenda_view">
                <li>
                    <div>
                        <span class="new_wen">问</span>
                        <span><a href="/">政讯通•全国法制项目官网有几个，承担的职能是什么</a></span>
                    </div>
                    <div>
                        <span class="new_da">答</span>
                        <b>
                            4个官网，分别是：
                            政讯通•全国法制资讯发布中心官网，提供资讯信息化服务，以资讯发布为主；
                            政讯通•全国法制调研中心官网，承担调研、法律服务等功能；
                            政讯通•全国法制舆情监测中心官网，承担舆情监测、处理、公关等功能；
                            政讯通•全国法制发展促进中心官网，承担行业发展促进、服务功能。
                        </b>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="new_wen">问</span>
                        <span><a href="/">我在网上看你们有聘兼职法制监督员，我想申请有什么要求？需要费用吗？</a></span>
                    </div>
                    <div>
                        <span class="new_da">答</span>
                        <b>合法中国公民，热爱和关注公益事业；五年内无违法犯罪记录；会电脑基本操作、有过媒体或公检法相关工作经验者均可申请。收取网络平台使用费，法制监督员分全国、省级、地市级三个级，地市级1200元/年，省级2400元/年，全国级4800元/年，配套办公用品费300元。运费到付或者顺付50元。</b>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="new_wen">问</span>
                        <span><a href="/">申请地市中心条件？</a></span>
                    </div>
                    <div>
                        <span class="new_da">答</span>
                        <b>
                            （1）从事过公检法相关工作或者媒体/法制工作的公民或法人单位均可申请；（前提条件）
                            （2）熟悉我国相关政策和调研工作；
                            （3）遵守国家法律法规，积极为发展做贡献；
                            （4）遵守内参各项规章制度，严格执行工作纪律；
                            （5）熟悉基本网络操作，遵守互联网应用规则；
                        </b>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="new_wen">问</span>
                        <span><a href="/">我想申请法制调研员有什么条件？</a></span>
                    </div>
                    <div>
                        <span class="new_da">答</span>
                        <b>有意从事法制公益性工作，熟悉国家法律法规、司法政策，五年内无违法犯罪记录；熟悉调研工作，熟悉网络基本操作,年龄在25-65之间的中国公民均可申请，有过执法或者公检法行业相关从业者优先考虑。</b>
                    </div>
                </li>
            </ul>
        </div>
    </footer>
</template>

<script setup>
//0.添加网站客服 start---------------------------------------->
//添加网站客服
function addQQFriend(qqNumber) {
    // 使用tencent协议唤起QQ客户端并添加好友
    window.location.href = `tencent://message/?uin=${qqNumber}&Site=&Menu=yes`;
}
//0.添加网站客服 end---------------------------------------->
//获得底部基本信息 start---------------------------------------->
//1.获得全部友情链接与底部图片
const bottomLink = ref([])
const bottomText = ref([])
const bottomphoto = ref([])
const bottomMenu = ref([])
const bottomBase = ref({})
const qq1 = ref("")
const qq2 = 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;
        //获取qq号数字部分
        qq1.value = bottomBase.value.customer_service_qq.match(/\d+/g);
        qq2.value = bottomBase.value.communications.match(/\d+/g);

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

//你问我答 start---------------------------------------->
const wenda = ref(false)
function toggleWenda() {
    wenda.value = !wenda.value
}
//你问我答 end---------------------------------------->
</script>

<style lang="less" scoped>
//PC端 start ---------------------------------------->
.foot_title {
    width: 100%;
    overflow: hidden;
    background: #fff;

    .foot_title_text {
        display: block;
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 18px;
        border-bottom: 2px solid #158d91;
        color: #001996;
    }
}

.index_foot {
    box-sizing: border-box;
    width: 1400px;
    margin: 0 auto;
}

.index_foot_name_box {
    margin: 10px 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;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    border-top: 1px solid #ccc;
    background: #f1f1f1;
    padding: 0 10px 0 10px;
}

.foot_img_box a {
    width: 14.25%;
    height: 57px;
    display: block;
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 20px;
}

.foot_img_box img {
    float: left;
    width: 100%;
    height: 57px;
    overflow: hidden;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    background: #fff;
}

.foot_img_box>* * {
    display: block;
    width: 100%;
    height: 100%;
}

.foot_img_box>*:nth-of-type(7n) {
    margin-right: 0px;
}

.foot_frind_box {
    display: block;
    overflow: hidden;
    display: flex;
    border-bottom: solid 3px #158d91;
    padding: 20px;
    background: #f1f1f1;

    a {
        font-size: 16px;
    }
}

// .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 10px;
}

.call_us_box {
    display: block;
    width: 100%;
    margin: 25px auto 0;
    overflow: hidden;
    text-align: center;
    font-size: 0px;
    background: #158d91;

    a {
        color: #fff;
        font-size: 18px;
        font-weight: normal;
    }
}

.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 #fff;
    margin: 18px 0;
}

.call_us_box>*:nth-of-type(1) {
    border-left: 0px;
}

.foot_text_box {
    margin: 20px auto 0px;
    text-align: center;
    color: #333;
    font-size: 16px;
    line-height: 25px;

    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: 10px auto 10px;
    text-align: center;
    overflow: hidden;
    width: 100%;
    font-size: 0px;
    padding-bottom: 10px;
}

.foot_last_img_box>* {
    height: 50px;
    width: 120px;
    display: inline-block;
    overflow: hidden;
    margin-right: 5px;
}

.foot_last_img_box img {
    width: 120px;
    height: 50px;
    background: #fff;
}

.foot_text_html_css {
    line-height: 30px;
    font-size: 16px;
}

.foot_text_html_css :deep(a) {
    color: #333;
}

.foot_color_red {
    color: red;
}

.foot_color_red :deep(a) {
    color: red;
}

.foot_text_html_css :deep(img) {
    margin: 0 5px;
}

//添加在线客服
.kefu {
    position: fixed;
    bottom: 100px;
    top: 40%;
    right: 11px;
    width: 64px;

    .kefu_itemKf {
        background-color: #0099cc;
        border-radius: 10px;
        box-shadow: 0 4px 16px #0000001a;
        width: 64px;
        height: 64px;
        padding: 8px;
        text-align: center;
        box-sizing: border-box;
        position: relative;
        cursor: pointer;

        a {
            >p {
                color: #fff;
                font-size: 12px;
            }

            >img {
                width: 30px;
                height: 30px;
                margin-bottom: 5px;
                display: block;
                margin: 0 auto;
            }
        }
    }

    .kefu_itemQQ {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 16px #0000001a;
        height: 100px;
        margin-bottom: 15px;
        text-align: center;
        width: 100px;
        box-sizing: border-box;
        position: relative;
        cursor: pointer;

        >p {
            color: #666;
            font-size: 14px;
            font-weight: 500;
            line-height: 16px;
        }

        >img {
            margin-top: 10px;
            width: 60px;
            height: 60px;
        }

        &:hover {
            .kefu_item_content_QQ {
                display: block;
            }
        }
    }

    .kefu_itemPhone {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 16px #0000001a;
        height: 100px;
        margin-bottom: 15px;
        text-align: center;
        width: 100px;
        box-sizing: border-box;
        position: relative;
        cursor: pointer;

        >p {
            color: #666;
            font-size: 14px;
            font-weight: 500;
            line-height: 16px;
        }

        >img {
            margin-top: 10px;
            width: 60px;
            height: 60px;
        }

        &:hover {
            .kefu_item_content_phone {
                display: block;
            }
        }
    }

    .kefu_item_content_QQ {
        position: absolute;
        top: -100px;
        right: 100px;
        background: #fff;
        border-radius: 10px;
        display: none;
        width: 190px;
        height: 330px;
        background: #fff;
        box-shadow: 0 4px 16px #0000001a;
        z-index: 99;
        box-sizing: border-box;
        padding: 20px;

        img {
            margin-bottom: 10px;
        }

        .qqfs {
            margin-bottom: 20px;
            font-size: 14px;
            color: #333;
        }

        .arrow {
            width: 0;
            height: 0;
            width: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid #fff;
            position: absolute;
            top: 120px;
            right: -20px;
            transform: translateX(-50%);
            z-index: 100;
        }
    }

    .kefu_item_content_phone {
        position: absolute;
        top: 0;
        right: 100px;
        background: #fff;
        border-radius: 10px;
        display: none;
        width: 190px;
        height: 80px;
        background: #fff;
        box-shadow: 0 4px 16px #0000001a;
        z-index: 99;
        box-sizing: border-box;
        padding: 20px;
        text-align: left;
        color: #333;
        .kefu_item_content_phone_title {
            margin-bottom: 5px;
            font-weight: bold;
        }
        .arrow {
            width: 0;
            height: 0;
            width: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid #fff;
            position: absolute;
            top: 20px;
            right: -20px;
            transform: translateX(-50%);
            z-index: 100;
        }
    }
}
.foot_right_float {
    position: fixed;
    z-index: 200;
    left: 2%;
    bottom: 10px;
    a {
        display: block;
        margin-bottom: 4px;
        border: 1px solid #dee3eb;
        width: 220px;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        color: #EE6363;
        cursor: pointer;
        background: #fff;
        text-align: center;
    }
}
//在线问答
.wenda {
    width: 300px;
    height: auto;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    right: 0;
    background: #fff;
    border: 1px solid #7ab9dd;
    padding: 10px;
    box-shadow: 0px 1px 8px #888;
    z-index: 99999999;
    box-sizing: border-box;
    .wenda_tlt {
        width: 100%;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        border-bottom: 2px solid #ccc;
    }
    .wenda_tlt h3 {
        float: left;
        height: 40px;
        line-height: 40px;
        font-size: 22px;
        color: #0a78d7;
        a {
            color: #337ab7;
            text-decoration: none;
        }
    }
    .wenda_tlt span {
        float: right;
        width: 40px;
        height: 40px;
        background: url('public/index/jt.png') no-repeat center center;
        transform: rotateZ(180deg);
        font-size: 40px;
        color: #000;
        cursor: pointer;
    }
    .wenda_view li {
        width: 100%;
        height: auto;
        overflow: hidden;
        margin: 10px 0;
        padding: 10px 0;
        border-bottom: 1px solid #222;
        background: #f1f1f1;
        border-radius: 10px;
    }
    .wenda_view li div span.new_wen {
        text-align: center;
        line-height: 22px;
        float: left;
        width: 22px;
        height: 22px;
        font-size: 20px;
        color: #fff;
        background: #fb4;
        border-radius: 5px;
        margin: 3px 5px 3px 0;
        padding: 0;
    }
    .wenda_view li div span.new_da {
        text-align: center;
        line-height: 22px;
        float: left;
        width: 22px;
        height: 22px;
        font-size: 20px;
        color: #fff;
        background: #8ac03b;
        border-radius: 5px;
        margin: 3px 5px 3px 0;
        padding: 0;
    }
    .wenda_view li div {
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .wenda_view li div span a {
        color: #222;
    }
    .wenda_view li div span {
        height: auto;
        overflow: hidden;
        line-height: 30px;
        font-size: 16px;
        color: #222;
        border-radius: 10px;
        padding: 0 10px;
    }
    .wenda_view li div {
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 0 10px;
    }
    .wenda_view li b {
        display: block;
        font-size: 14px;
        color: #7b838a;
        line-height: 30px;
        border-radius: 10px;
        font-weight: 100;
        max-height: 90px;
    }
    .wenda_view {
        width: 100%;
        min-height: 0px;
        max-height: 38vh;
        overflow: auto;
        margin: 0px auto 0;
        padding-right: 10px;
    }
}
.wenda_style {
    height: 40px;
    overflow: hidden;
    padding: 0 10px;
    span {
        transform: rotateZ(0deg) !important;
    }
}

//PC端 end ---------------------------------------->

//移动端 start ---------------------------------------->
@media screen and (max-width:800px) {
    .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>* {
        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;
    }

    .kefu>div {
        display: inline-block;
        margin: 0px 10px !important;
        height: 55px !important;
        width: 90px !important;
    }

    .kefu>div a {
        display: block;
        height: 55px;
    }

    .kefu>div>img {
        display: block;
        margin: 3px auto 0 !important;
        width: 33px !important;
        height: 33px !important;
    }

    .kefu>div>a>img {
        display: block;
        margin: 3px auto 0 !important;
        width: 33px !important;
        height: 33px !important;
    }

    .kefu .kefu_item_content_QQ img {
        margin-bottom: 0px;
    }

    .kefu .kefu_item_content_QQ .qqfs {
        margin-bottom: 0px;
        height: 22px;
        line-height: 22px;
    }

    .kefu .kefu_itemKf a>p {
        word-break: keep-all;
        white-space: nowrap;
    }

    .kefu .kefu_item_content_QQ {
        right: -95px;
        margin-right: 50%;
        overflow: hidden;
        top: auto;
        bottom: 100px;
        line-height: normal;
    }

    .qqadd:nth-of-type(1) {
        margin-bottom: 22px;
    }

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

//移动端 end ----------------------------------------></style>