<template>
    <el-container id="app" direction="vertical">
        <page-header></page-header>

        <el-container direction="vertical">
            <el-main class="main" style="width: 100%; overflow: hidden">
                <nav-menu></nav-menu>
                <keep-alive :include="keeps">
                    <router-view class="appContainer" />
                </keep-alive>
            </el-main>
            <el-footer height="246px">
                <div class="footer-content">
                    <div class="left"></div>
                    <div style="padding-right: 80px">
                        <div class="img">
                            <img src="../assets/erweima-jpg-01.png" alt="" />
                        </div>
                        <div class="name">关注我们</div>
                    </div>
                    <div>
                        <div class="img">
                            <img src="../assets/erweima-jpg-02.png" alt="" />
                        </div>
                        <div class="name">联系客服</div>
                    </div>
                    <div class="center">
                        <div class="center-item">
                            <div class="link">核心服务</div>
                            <router-link to="/policy" class="link">IP融合运营</router-link>
                            <router-link to="/patent?caseType=DECLASSIFICATION" class="link">IP融合服务</router-link>
                            <router-link to="/intellectualProperty?type=DECLASSIFICATION" class="link"
                                >IP融合资源</router-link
                            >
                        </div>
                        <div class="center-item">
                            <router-link to="/about" class="link">关于我们</router-link>
                            <router-link to="/about#intro" class="link">平台简介</router-link>
                            <router-link to="/about#honor" class="link">平台荣誉</router-link>
                            <router-link to="/about#connect" class="link">客户服务</router-link>
                        </div>
                    </div>
                    <img src="../assets/dibu-wenzi-png.png" style="display: block; width: 430px; height: 28px" alt="" />
                    <img
                        src="../assets/banquan_png@3x.png"
                        style="display: block; width: 32px; height: 32px; margin-bottom: 15px"
                        alt=""
                    />
                    <!-- <div class="tips"> -->
                    <!-- 页面所涉及产品信息仅用于展示目的，本网站及本网站展商合作方保留更改网页上所列产品相关信息的权利，恕不另行通知。 -->
                    <!-- </div> -->
                </div>
              <div class="footer-content_pIc record_jump" @click="recordJump">Copyright © 2019 - 2022 Fentiao 版权所有 苏ICP备17027521号</div>

            </el-footer>
        </el-container>

        <pop-components></pop-components>

        <!-- <login /> -->
    </el-container>
</template>

<script>
import { mapState } from 'vuex';
import NavMenu from '../components/NavMenu.vue';
import PageHeader from '../components/PageHeader.vue';
import PopComponents from './PopComponents.vue';
// import Login from './Login.vue';
export default {
    components: { PageHeader, NavMenu, PopComponents },
    name: 'Index',
    metaInfo() {
        return {
            title: this.pageTitle
        };
    },
    computed: {
        ...mapState(['keeps']),
        pageTitle() {
            return this.$route.meta.title || '智戎知识产权';
        }
    }
};
</script>

<style lang="less" scoped>
#app {
    min-height: 100vh;
}

.main {
    padding: 0;
    .flex-col();
}

.main > div {
    flex-shrink: 0;
}

.appContainer {
    background-color: @bg;
    padding: 0 0 60px;
    flex-grow: 1;
}

.el-footer {
    background-color: @warn;
    padding: 0;
    position: relative;
    .flex-col();
    &::before {
        content: '';
        height: 6px;
        display: block;
        background-color: @prim;
    }

    .footer-content {
        justify-content: center;
        // padding-bottom: 55px;
        padding-top: 42px;
        .flex();
        // .left {
        //     min-width: 240px;
        // }
        .name {
            font-size: 12px;
            font-weight: 600;
            color: #ffffff;
            line-height: 17px;
            text-align: center;
        }
        .center {
            width: 438px;
            .flex();
            .center-item {
                padding: 0 80px;
                .link {
                    &:first-child {
                        font-size: 12px;
                        color: #ffffff;
                        line-height: 17px;
                    }
                    display: block;
                    font-size: 12px;
                    color: #acacac;
                    line-height: 17px;
                    margin-top: 12px;
                    cursor: pointer;

                    &:hover {
                        color: @prim;
                        text-decoration: underline;
                    }
                }

                &:not(:last-child) {
                    border-right: 1px solid #acacac;
                }
            }
        }
        position: relative;

        .tips {
            position: absolute;
            bottom: 20px;
            font-size: 12px;
            color: #acacac;
            line-height: 17px;
            text-align: center;
        }
    }

    .pIc {
        background-color: rgba(0, 0, 0, 0.2);
        font-size: 12px;
        color: #acacac;
        line-height: 17px;
        text-align: center;
        line-height: 36px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

.img {
    background-color: #fff;
    padding: 4px;
    margin-bottom: 10px;
    img {
        display: block;
        width: 68px;
        height: 68px;
    }
}
</style>
