sport_pc/.svn/pristine/dd/dde5f5fd3369ac5891eae293a3bac36be3ed5c73.svn-base

<template lang="">
    <div class = "foot">
        <div class = "nav">
            <div>
                <ul>
                    <li><a href = "javascipt:void(0)">其他相关链接</a></li>
                    <li><a href = "javascript:void(0)">关于我们</a></li>
                    <li><a href = "javascript:void(0)">网站导览</a></li>
                    <li><a href = "javascript:void(0)">博彩责任</a></li>
                    <li><a href = "javascript:void(0)">规则与条款</a></li>
                    <li><a href = "javascript:void(0)">隐私权政策</a></li>
                    <li><a href = "javascript:void(0)">代理加盟</a></li>
                </ul>
            </div>
            <div>
                <ul>
                    <li><a href = "javascript:void(0)">是否需要帮助?</a></li>
                    <li><a href = "javascript:void(0)">存款帮助</a></li>
                    <li><a href = "javascript:void(0)">取款帮助</a></li>
                    <li><a href = "javascript:void(0)">常见问题</a></li>
                    <li><a href = "javascript:void(0)">在线客服</a></li>
                    <li><a href = "javascript:void(0)">联系我们</a></li>
                </ul>
            </div>
        </div>
        <div class = "pay">
            <h3 class = "tit">支付方式</h3>
            <div class = "cont">
                <span>享受畅通无阻的存提款体验，我们的支付方式快速又安全。 HX669支持全球主要支付方式！</span>
            </div>
            <div class = "payMode">
                <img style = "width:0.62rem;height:0.35rem" src = "@/assets/st-imges/yinhangqia@2x.png">
                <img style = "width:1.1rem;height:0.35rem" src = "@/assets/st-imges/zhifubao@2x.png">
                <div>
                    <img style = "width:0.28rem;height:0.35rem; vertical-align: middle" src = "@/assets/st-imges/QQ @2x.png">
                    <span>QQ支付</span>
                </div>
                  <div>
                   <img style = "width:0.38rem;height:0.38rem; vertical-align: middle" src = "@/assets/st-imges/weixin@2x.png">
                    <span>微信支付</span>
                </div>
            </div>
        </div>
        <div class = "contact">
            <h3>联系我们</h3>
            <div class = "phone">
                <i :style = "back[0]"></i>
                <span>客服热线:</span>
                <span>0090-99999999</span>
            </div>
            <div class = "eMail">
                <i :style = "back[1]"></i>
                <span>电邮地址:</span>
                <span>www.hx669.com@gmail.com</span>
            </div>
        </div>
        <div class = "copyright">
            <span>HX669属于HX669有限公司注册</span>
            <span>www.sports.meme100.com</span>
            <span>版权所有©2019</span>
            
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            back:[
                {
                    backgroundImage:"url(" + require("../assets/st-imges/kefu @2x.png") + ")",
                    backgroundRepeat:'no-repeat',
                    backgroundSize:'100% 100%'
                },
                  {
                    backgroundImage:"url(" + require("../assets/st-imges/youjian@2x.png") + ")",
                    backgroundRepeat:'no-repeat',
                    backgroundSize:'100% 100%'
                }
            ]
        }
    }
}
</script>
<style scoped>
    .foot{

        background: linear-gradient(to right bottom,#999999,#565656);
        padding:0.55rem 2.43rem 0.37rem 0.32rem ;
        text-align: left;
        position: relative;
    }
    .foot .nav{
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.32rem;
    }
    .foot .nav ul li:nth-child(1){
        margin-bottom: 0.3rem;
    }
    .foot .nav ul li:nth-child(1) a{
        font-size: 0.26rem;
    }
    .foot .nav ul li {
        margin-bottom: 0.32rem;
    }
    .foot .nav ul li a{
        color: #F5F5F5;
        font-size: 0.2rem;
    }
    .foot .pay,.foot .contact{
        text-align: left;
        color: #F5F5F5;
    }
    .foot .pay .tit,.foot .contact h3{
        font-size: 0.26rem;
        margin-bottom: 0.29rem;
        font-weight: 400;
    }
    .foot .pay .cont{
        margin-bottom : 0.29rem;
        width: 6.69rem;
    }
    .foot .pay span,.foot .contact span{
        font-size: 0.2rem;
    }
    .foot .pay .payMode{
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.62rem;
    }
     .foot .pay .payMode span{
         font-size: 0.2rem;
         color:#F5F5F5;
     }
    .foot .contact .phone{
        margin-bottom: 0.31rem;
    }
    .foot .contact div i{
        display: inline-block;
        /* width: 0.3rem;
        height: 0.3rem; */
        /* background: #ffffff; */
        vertical-align: middle;
        margin-right: 0.14rem;
    }
    .copyright{
        width: 3.31rem;
        /* position: absolute; */
        /* right: 0; */
        margin-top: 0.5rem;
        margin-left: 1.77rem;
        text-align: center;
        font-size: 0.2rem;
        color: #F5F5F5;
    }
    .copyright span:nth-last-child(1){
        display: block;
    }
    .foot .contact div.phone i{
        width: 0.29rem;
        height: 0.29rem;
    }
     .foot .contact div.eMail i{
         width: 0.34rem;
         height: 0.22rem;
     }
</style>