fzfzcj_org_cn/components/home/foot.vue

<template>
    <div class="">
        <footer class="index_foot">
            <div class="foot_title">
                <NuxtLink to="/">友情链接</NuxtLink>
            </div>
            <div class="foot_img_box" id="main_js_2">
                <div class="foot_img_box_long" id="demo_js_2">
                    <div class="foot_img_box_in" id="demo1_js_2">
                        <NuxtLink to="/" v-for="(item, index) in bottomLink" :title="item.title" target="_blank">
                            <img src="public/index/link.jpg" :alt="item.title">
                        </NuxtLink>
                    </div>
                    <div class="foot_img_box_in" id="demo2_js_2">
                    </div>
                </div>
            </div>
            <div class="phone_foot_img_box">
                <NuxtLink to="/" v-for="(item, index) in bottomLink" :title="item.title" target="_blank">
                    <img src="public/index/link.jpg" :alt="item.title">
                </NuxtLink>
            </div>
            <div class="foot_frind_box" style="display:none;">
                <div>
                    <a :href="item.url" v-for="(item, index) in bottomText" :key="index" :title="item.title"
                        target="_blank">{{ item.title }}</a>
                </div>
            </div>
        </footer>
        <div class="call_us_box">
            <template 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>
            </template>
        </div>
        <footer class="index_foot">
            <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_last_img_box">
                <a :href="item.url" v-for="(item, index) in bottomphoto" :title="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>
            <!--右侧悬浮-->
            <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>
                            <a class="wenda_view_text" href="#">政讯通•全国法制项目官网有几个，承担的职能是什么</a>
                        </div>
                        <div>
                            <span class="new_da">答</span>
                            <b>
                                4个官网，分别是：
                                政讯通•全国法制资讯发布中心官网，提供资讯信息化服务，以资讯发布为主；
                                政讯通•全国法制调研中心官网，承担调研、法律服务等功能；
                                政讯通•全国法制舆情监测中心官网，承担舆情监测、处理、公关等功能；
                                政讯通•全国法制发展促进中心官网，承担行业发展促进、服务功能。
                            </b>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span class="new_wen">问</span>
                            <a class="wenda_view_text" href="#">我在网上看你们有聘兼职法制监督员，我想申请有什么要求？需要费用吗？</a>
                        </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>
    </div>
</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---------------------------------------->
import { onMounted } from 'vue';
// js跑马灯
onMounted(() => {
    setTimeout(() => {
        // console.log('2秒后执行了代码');
        const main_2 = document.getElementById("main_js_2");
        const demo_2 = document.getElementById("demo_js_2");
        const demo1_2 = document.getElementById("demo1_js_2");
        const demo2_2 = document.getElementById("demo2_js_2");
        const speed_2 = 22;    //数值越大滚动速度越慢 
        demo2_2.innerHTML = demo1_2.innerHTML;
        function Marquee_2() {
            if (demo2_2.offsetWidth - main_2.scrollLeft <= 0) { main_2.scrollLeft -= demo1_2.offsetWidth }
            else { main_2.scrollLeft++ }
        }
        var MyMar_2 = setInterval(Marquee_2, speed_2);
        demo_2.onmouseover = function () {
            clearInterval(MyMar_2)
        }
        demo_2.onmouseout = function () {
            MyMar_2 = setInterval(Marquee_2, speed_2)
        }
    }, 1000);
})
</script>
<style lang="less" scoped>
//自适应 start ---------------------------------------->
.new_yqljtlt {
    width: 100%;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    border-bottom: 2px solid #9e9e9e;
    padding: 0 20px;
    margin-bottom: 20px;
}
.new_yqljtlt a {}
.foot_img_box_in {
    overflow: hidden;
    float: left;
}
.foot_title {
    box-sizing: border-box;
    width: 100%;
    height: 50PX;
    line-height: 50PX;
    overflow: hidden;
    border-bottom: 2PX solid #9e9e9e;
    padding: 0 20PX;
    margin-bottom: 20PX;
    a {
        font-weight: bold;
        font-size: 20PX;
        color: #0e28e6;
        float: left;
    }
}
.foot_img_box {
    overflow: hidden;
    display: block;
    margin-bottom: 50PX;
    height: 50PX;
}
.foot_img_box_long {
    overflow: hidden;
    height: 50PX;
    width: 99999%;
}
.foot_img_box a {
    width: 166PX;
    height: 50PX;
    float: left;
    box-sizing: border-box;
    margin: 0px 5px;
}
.foot_img_box img {}
.foot_img_box img {
    display: block;
    width: 100%;
    height: 100%;
}
.call_us_box {
    width: 100%;
    height: 50PX;
    line-height: 50PX;
    text-align: center;
    border-top: 4PX solid #0e28e6;
    display: block;
    width: 100%;
    margin: 25PX auto 0;
    overflow: hidden;
    text-align: center;
    font-size: 0PX;
    a {
        min-width: 120PX;
        color: #333;
        font-size: 18PX;
        font-weight: bold;
        display: inline-block;
        box-sizing: border-box;
        padding: 0 5PX;
        font-weight: bold;
        text-align: center;
        height: 50PX;
        line-height: 50PX;
        position: relative;
    }
    a::after {
        content: '';
        display: block;
        position: absolute;
        width: 1PX;
        height: 14PX;
        background: #000;
        left: 0PX;
        top: 20PX;
    }
    a:nth-of-type(1)::after {
        display: none;
    }
}
.call_us_box>* {}
.call_us_box>*:nth-of-type(1) {
    border-left: 0PX;
}
@media screen and (min-width: 1401px) {
    .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_frind_box {
        display: block;
        overflow: hidden;
        display: flex;
        border-bottom: solid 3PX #158d91;
        padding: 20PX;
        background: #f1f1f1;
        a {
            font-size: 16PX;
        }
    }
    .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;
    }
    .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 !important;
        z-index: 9999;
        .kefu_itemKf {
            background-color: #0099cc;
            border-radius: 10PX !important;
            box-shadow: 0 4PX 16PX #0000001a;
            width: 64PX !important;
            height: 64PX !important;
            padding: 8PX !important;
            text-align: center;
            box-sizing: border-box;
            position: relative;
            cursor: pointer;
            a {
                >p {
                    color: #fff;
                    font-size: 12PX !important;
                }
                >img {
                    width: 30PX !important;
                    height: 30PX !important;
                    margin-bottom: 5PX !important;
                    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 !important;
        height: auto;
        overflow: hidden;
        position: fixed;
        bottom: 0;
        right: 0;
        background: #fff;
        border: 1PX solid #7ab9dd;
        padding: 10PX !important;
        box-shadow: 0PX 1PX 8PX #888 !important;
        z-index: 99999999;
        box-sizing: border-box;
        .wenda_tlt {
            width: 100%;
            height: 40PX !important;
            line-height: 40PX !important;
            overflow: hidden;
            border-bottom: 2PX solid #ccc !important;
        }
        .wenda_tlt h3 {
            float: left;
            height: 40PX !important;
            line-height: 40PX !important;
            font-size: 22PX !important;
            color: #0a78d7;
            a {
                color: #337ab7;
                text-decoration: none;
            }
        }
        .wenda_tlt span {
            float: right;
            width: 40PX !important;
            height: 40PX !important;
            background: url('public/index/jt.png') no-repeat center center;
            transform: rotateZ(180deg);
            font-size: 40PX !important;
            color: #000;
            cursor: pointer;
        }
        .wenda_view li {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 10PX 0 !important;
            padding: 10PX 0 !important;
            border-bottom: 1PX solid #222 !important;
            background: #f1f1f1;
            border-radius: 10PX !important;
        }
        .wenda_view li div span.new_wen {
            text-align: center;
            line-height: 22PX !important;
            float: left;
            width: 22PX !important;
            height: 22PX !important;
            font-size: 20PX !important;
            color: #fff;
            background: #fb4;
            border-radius: 5PX !important;
            margin: 3PX 5PX 3PX 0 !important;
            padding: 0 !important;
        }
        .wenda_view li div a.wenda_view_text {
            font-size: 16PX !important;
            line-height: 16PX !important;
            line-height: 30PX !important;
            color: #333 !important;
            display: block !important;
        }
        .wenda_view li div span.new_da {
            text-align: center;
            line-height: 22PX !important;
            float: left;
            width: 22PX !important;
            height: 22PX !important;
            font-size: 20PX !important;
            color: #fff;
            background: #8ac03b;
            border-radius: 5PX !important;
            margin: 3PX 5PX 3PX 0;
            padding: 0 !important;
        }
        .wenda_view li div {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 0 10PX !important;
            box-sizing: border-box;
        }
        .wenda_view li div span a {
            color: #222;
        }
        .wenda_view li div span {
            height: auto;
            overflow: hidden;
            line-height: 30PX !important;
            font-size: 16PX !important;
            color: #222;
            border-radius: 10PX !important;
            padding: 0 10PX !important;
        }
        .wenda_view li div {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 0 10PX !important;
        }
        .wenda_view li b {
            display: block;
            font-size: 14PX !important;
            color: #7b838a;
            line-height: 30PX !important;
            border-radius: 10PX !important;
            font-weight: 100;
            max-height: 90PX !important;
        }
        .wenda_view {
            width: 100%;
            min-height: 0PX !important;
            max-height: 38VH !important;
            overflow: auto;
            margin: 0px auto 0;
            padding-right: 10PX !important;
        }
    }
    .wenda_style {
        height: 40PX !important;
        overflow: hidden;
        padding: 0 10PX !important;
        span {
            transform: rotateZ(0deg) !important;
        }
    }
}
@media screen and (min-width: 801px) and (max-width: 1400px) {
    .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: 96%;
        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;
        padding: 0 10px 0 10px;
    }
    .foot_img_box a {
        display: block;
        padding: 0 2px;
        box-sizing: border-box;
        margin-top: 0px;
    }
    .foot_img_box img {
        float: left;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        display: block;
        margin: 0 auto;
        background: #fff;
    }
    .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 div {
        width: 100%;
        overflow: hidden;
    }
    .foot_frind_box div * {
        float: left;
        line-height: 22PX;
        height: 22PX;
        color: #333;
        font-size: 16PX;
        margin: 0 10PX;
    }
    .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 !important;
        z-index: 9999;
        .kefu_itemKf {
            background-color: #0099cc;
            border-radius: 10PX !important;
            box-shadow: 0 4px 16px #0000001a;
            width: 64PX !important;
            height: 64PX !important;
            padding: 8PX !important;
            text-align: center;
            box-sizing: border-box;
            position: relative;
            cursor: pointer;
            a {
                >p {
                    color: #fff;
                    font-size: 12PX !important;
                }
                >img {
                    width: 30PX !important;
                    height: 30PX !important;
                    margin-bottom: 5PX !important;
                    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: 9999;
        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 !important;
        height: auto;
        overflow: hidden;
        position: fixed;
        bottom: 0;
        right: 0;
        background: #fff;
        border: 1px solid #7ab9dd;
        padding: 10PX !important;
        box-shadow: 0px 1PX 8PX #888 !important;
        z-index: 99999999;
        box-sizing: border-box;
        .wenda_tlt {
            width: 100%;
            height: 40PX !important;
            line-height: 40PX !important;
            overflow: hidden;
            border-bottom: 2PX solid #ccc !important;
        }
        .wenda_tlt h3 {
            float: left;
            height: 40PX !important;
            line-height: 40PX !important;
            font-size: 22PX !important;
            color: #0a78d7;
            a {
                color: #337ab7;
                text-decoration: none;
            }
        }
        .wenda_tlt span {
            float: right;
            width: 40PX !important;
            height: 40PX !important;
            background: url('public/index/jt.png') no-repeat center center;
            transform: rotateZ(180deg);
            font-size: 40PX !important;
            color: #000;
            cursor: pointer;
        }
        .wenda_view li {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 10PX 0 !important;
            padding: 10PX 0 !important;
            border-bottom: 1PX solid #222 !important;
            background: #f1f1f1;
            border-radius: 10PX !important;
        }
        .wenda_view li div span.new_wen {
            text-align: center;
            line-height: 22PX !important;
            float: left;
            width: 22PX !important;
            height: 22PX !important;
            font-size: 20PX !important;
            color: #fff;
            background: #fb4;
            border-radius: 5PX !important;
            margin: 3PX 5PX 3PX 0 !important;
            padding: 0 !important;
        }
        .wenda_view li div a.wenda_view_text {
            font-size: 16PX !important;
            line-height: 16PX !important;
            line-height: 30PX !important;
            color: #333 !important;
            display: block !important;
        }
        .wenda_view li div span.new_da {
            text-align: center;
            line-height: 22PX !important;
            float: left;
            width: 22PX !important;
            height: 22PX !important;
            font-size: 20PX !important;
            color: #fff;
            background: #8ac03b;
            border-radius: 5PX !important;
            margin: 3PX 5PX 3PX 0;
            padding: 0 !important;
        }
        .wenda_view li div {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 0 10PX !important;
            box-sizing: border-box;
        }
        .wenda_view li div span a {
            color: #222;
        }
        .wenda_view li div span {
            height: auto;
            overflow: hidden;
            line-height: 30PX !important;
            font-size: 16PX !important;
            color: #222;
            border-radius: 10PX !important;
            padding: 0 10PX !important;
        }
        .wenda_view li div {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 0 10PX !important;
        }
        .wenda_view li b {
            display: block;
            font-size: 14PX !important;
            color: #7b838a;
            line-height: 30PX !important;
            border-radius: 10PX !important;
            font-weight: 100;
            max-height: 90PX !important;
        }
        .wenda_view {
            width: 100%;
            min-height: 0PX !important;
            max-height: 38VH !important;
            overflow: auto;
            margin: 0px auto 0;
            padding-right: 10PX !important;
        }
    }
    .wenda_style {
        height: 40PX !important;
        overflow: hidden;
        padding: 0 10PX !important;
        span {
            transform: rotateZ(0deg) !important;
        }
    }
}
@media screen and (max-width: 800px) {
    .foot_title {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        background: #fff;
        .foot_title_text {
            display: block;
            width: 200px;
            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: 100%;
        padding: 0px 10px;
        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: 50%;
        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 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 {
        height: auto;
        display: block;
        width: 100%;
        margin: 25PX auto 0;
        overflow: hidden;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        a {
            color: #333;
            font-size: 16PX;
            font-weight: normal;
        }
    }
    .call_us_box a {
        height: 88px;
        line-height: 88px;
        display: inline-block;
        box-sizing: border-box;
        padding: 0 2px;
        font-weight: bold;
        //border-left: solid 1PX #fff;
        width: 33%;
        font-size: 33px;
    }
    .call_us_box a::after {
        display: none;
    }
    .call_us_box>*:nth-of-type(1) {
        border-left: 0PX;
    }
    .foot_title a {
        font-size: 33px;
    }
    .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: 130PX;
        margin-bottom: 10PX;
        display: inline-block;
        overflow: hidden;
        margin-right: 5PX;
        text-align: center;
    }
    .foot_last_img_box img {
        width: 120PX;
        height: 50PX;
        background: #fff;
    }
    .foot_text_html_css {
        line-height: 44px;
        font-size: 22px;
    }
    .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 !important;
        z-index: 9999;
        .kefu_itemKf {
            background-color: #0099cc;
            border-radius: 10PX !important;
            box-shadow: 0 4PX 16PX #0000001a;
            width: 64PX !important;
            height: 64PX !important;
            padding: 8PX !important;
            text-align: center;
            box-sizing: border-box;
            position: relative;
            cursor: pointer;
            a {
                >p {
                    color: #fff;
                    font-size: 12PX !important;
                }
                >img {
                    width: 30PX !important;
                    height: 30PX !important;
                    margin-bottom: 5PX !important;
                    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;
        display: none;
        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 !important;
        height: auto;
        overflow: hidden;
        position: fixed;
        bottom: 0;
        right: 0;
        background: #fff;
        border: 1PX solid #7ab9dd;
        padding: 10PX !important;
        box-shadow: 0PX 1PX 8PX #888 !important;
        z-index: 99999999;
        box-sizing: border-box;
        display: none;
        .wenda_tlt {
            width: 100%;
            height: 40PX !important;
            line-height: 40PX !important;
            overflow: hidden;
            border-bottom: 2PX solid #ccc !important;
        }
        .wenda_tlt h3 {
            float: left;
            height: 40PX !important;
            line-height: 40PX !important;
            font-size: 22PX !important;
            color: #0a78d7;
            a {
                color: #337ab7;
                text-decoration: none;
            }
        }
        .wenda_tlt span {
            float: right;
            width: 40PX !important;
            height: 40PX !important;
            background: url('public/index/jt.png') no-repeat center center;
            transform: rotateZ(180deg);
            font-size: 40PX !important;
            color: #000;
            cursor: pointer;
        }
        .wenda_view li {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 10PX 0 !important;
            padding: 10PX 0 !important;
            border-bottom: 1PX solid #222 !important;
            background: #f1f1f1;
            border-radius: 10PX !important;
        }
        .wenda_view li div span.new_wen {
            text-align: center;
            line-height: 22PX !important;
            float: left;
            width: 22PX !important;
            height: 22PX !important;
            font-size: 20PX !important;
            color: #fff;
            background: #fb4;
            border-radius: 5PX !important;
            margin: 3PX 5PX 3PX 0 !important;
            padding: 0 !important;
        }
        .wenda_view li div a.wenda_view_text {
            font-size: 16PX !important;
            line-height: 16PX !important;
            line-height: 30PX !important;
            color: #333 !important;
            display: block !important;
        }
        .wenda_view li div span.new_da {
            text-align: center;
            line-height: 22PX !important;
            float: left;
            width: 22PX !important;
            height: 22PX !important;
            font-size: 20PX !important;
            color: #fff;
            background: #8ac03b;
            border-radius: 5PX !important;
            margin: 3PX 5PX 3PX 0;
            padding: 0 !important;
        }
        .wenda_view li div {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 0 10PX !important;
            box-sizing: border-box;
        }
        .wenda_view li div span a {
            color: #222;
        }
        .wenda_view li div span {
            height: auto;
            overflow: hidden;
            line-height: 30PX !important;
            font-size: 16PX !important;
            color: #222;
            border-radius: 10PX !important;
            padding: 0 10PX !important;
        }
        .wenda_view li div {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: 0 10PX !important;
        }
        .wenda_view li b {
            display: block;
            font-size: 14PX !important;
            color: #7b838a;
            line-height: 30PX !important;
            border-radius: 10PX !important;
            font-weight: 100;
            max-height: 90PX !important;
        }
        .wenda_view {
            width: 100%;
            min-height: 0PX !important;
            max-height: 38VH !important;
            overflow: auto;
            margin: 0px auto 0;
            padding-right: 10PX !important;
        }
    }
    .wenda_style {
        height: 40PX !important;
        overflow: hidden;
        padding: 0 10PX !important;
        span {
            transform: rotateZ(0deg) !important;
        }
    }
}
//自适应 end ---------------------------------------->
@media screen and (min-width: 1401px) {}
@media screen and (max-width: 1400px) {}
@media screen and (min-width: 801px) and (max-width: 1400px) {
    .foot_img_box_in {
        float: left;
    }
}
@media screen and (min-width: 801px) {
    .phone_foot_img_box {
        display: none;
    }
}
@media screen and (max-width: 900px) {}
@media screen and (max-width: 800px) {
    .phone_foot_img_box {
        width: 96%;
        margin: 4px auto;
        overflow: hidden;
    }
    .phone_foot_img_box a {
        width: 48%;
        height: 111px;
        margin-bottom: 8px;
    }
    .phone_foot_img_box a:nth-of-type(odd) {
        float: left;
    }
    .phone_foot_img_box a:nth-of-type(even) {
        float: right;
    }
    .phone_foot_img_box a img {
        display: block;
        width: 100%;
        height: 100%;
    }
    .foot_img_box {
        display: none;
    }
}
</style>