PC-xinxuan/xinxuan/src/components/footer.vue

<template>
    <div class="footer">
        <div class="hflex acenter jbetween footer_top">
            <div class="top_item point" @click="toDetail(1)">
                <div class="top_item-text hflex acenter jbetween">
                    <div>跨境贸易</div>
                    <img src="@/assets/images/common/arrow-right.png" alt="" />
                </div>
                <div class="top_item-text2">Cross-border Trade</div>
            </div>
            <div class="top_item point" @click="toDetail(2)">
                <div class="top_item-text hflex acenter jbetween">
                    <div>关于我们</div>
                    <img src="@/assets/images/common/arrow-right.png" alt="" />
                </div>
                <div class="top_item-text2">About Us</div>
            </div>
            <div class="top_item point" @click="toDetail(3)">
                <div class="top_item-text hflex acenter jbetween">
                    <div>联系我们</div>
                    <img src="@/assets/images/common/arrow-right.png" alt="" />
                </div>
                <div class="top_item-text2">Contact Us</div>
            </div>
        </div>
        <div class="footer_bottom hflex acenter jbetween">
            <div class="point">{{ footer.banquan }}</div>
            <div class="hflex acenter point">
                <img src="@/assets/images/common/tele.png" class="tele_icon" />
                <div>{{ footer.tele }}</div>
            </div>
            <div class="hflex acenter point">
                <img src="@/assets/images/common/addr.png" alt="" class="addr_icon" />
                <div>{{ footer.addr }}</div>
            </div>
        </div>
    </div>
</template>
<script>
    var that = ""
    export default {
        data() {
            return {
                footer: {
                    banquan: '@2023 某某集团所拥有 201314687123',
                    tele: '18569473721',
                    addr: 'XX省XX市XX路XX交汇具体地点'
                }
            }
        },
        created() {
            that = this
        },
        methods: {
            toDetail(index) {
                console.log(index)
                var url = ''
                switch(index) {
                    case 1:
                        url= './trade'
                        break;
                    case 2:
                        url= './about'
                        break;
                    case 3:
                        url= './contact'
                        break;
                }
                console.log(url)
                that.$router.push(url)
                
            }
        }
    }
    
</script>
<style scoped>
@media screen and (max-width: 750px) {
    .footer .footer_bottom {
        flex-direction: column !important;
        align-items: start;
    }
}
.footer {
    width: 100%;
    /* height: 400px; */
    background: #191818;
    box-sizing: border-box;
    padding: 120px 202px;
    /* position: absolute; */
    bottom: 0;
}
.footer .footer_top {
    width: 100%;
    padding-bottom: 59px;
    border-bottom: 1px solid #fff;
}
.footer .footer_top .top_item {
    width: 400px;
    padding: 59px 0 0;
    border-top: 4px solid #fff;
    color: #FEFEFE;

}
.footer .footer_top .top_item .top_item-text {
    font-size: 70px;
    font-weight: 400;
}
.footer .footer_top .top_item:hover {
    color: #666;
}
.footer .footer_top .top_item .top_item-text2 {
    font-size: 40px;
    font-weight: 400;
    /* color: #FEFEFE; */
    padding-top: 18px;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
}

.footer .footer_top .top_item .top_item-text img {
    width: 58px;
    height: 58px;
}
.footer .footer_top .top_item:hover .top_item-text img {
    animation: tran 0.2s linear;
    animation-iteration-count: 1
}
@keyframes tran {
    0% {
        transform: translate3d(-20px, 0 ,0);
        opacity: 0;
    }
    
    100% {
        transform: translate(0 ,0);
        opacity: 1;
    }
 }
.footer .footer_bottom {
    width: 100%;
    font-size: 24px;
    font-weight: 400;
    margin: 49px 0 0;
}
.footer .footer_bottom div {
    color: #FEFEFE;

}
.footer .footer_bottom div:hover {
    color: #666;
}
.footer .footer_bottom .tele_icon {
    width: 32px;
    margin-right: 23px;
    height: 30px;
}
.footer .footer_bottom .addr_icon {
    width: 28px;
    height: 38px;
    margin-right: 23px;

}

</style>