<template>
    <view class="bot">
        <view class="bot-content">
            <view class="box">
                <view class="box1">
                    <view>马蜂窝旅游网</view>
                    <view>中国年轻一代用得更多的旅游网站</view>
                    <view>上亿旅行者共同打造的
                        <text class="textColor">"旅行神器"</text>
                    </view>
                    <view>
                        <view class="textColor">
                        60,000 
                        </view>
                        多个全球旅游的目的地
                    </view>
                    <view>
                        <view class="textColor">600,00 </view>
                        个细分目的地新玩法
                    </view>
                    <view>
                        <view class="textColor">760,000,000 </view>
                         次攻略下载
                    </view>
                    <view>
                        <view class="textColor">
                            38,000 
                        </view>
                         家旅游产品供应商
                    </view>
                </view>
                <view class="box2">
                    <view>关于我们</view>
                    <view>
                        <navigator url="#">关于马蜂窝</navigator>
                        <navigator url="#">联系我们</navigator>
                    </view>
                    <view>
                        <navigator url="#">隐私政策</navigator>
                        <navigator url="#">商标声明</navigator>
                    </view>
                    <view>
                        <navigator url="#">服务协议</navigator>
                    </view>
                    <view>
                        <navigator url="#">商城平台服务协议</navigator>
                    </view>
                    <view>
                        <navigator url="#">网络信息侵权通知指引</navigator>
                    </view>
                    <view>
                        <navigator url="#">马蜂窝旅游网服务监督员</navigator>
                    </view>
                    <view>
                        <navigator url="#">网站地址</navigator>
                        <navigator url="#" class="textColor">加入马蜂窝</navigator>
                    </view>
                </view>
                <view class="box3">
                    <view style="text-align: center;">旅游服务</view>
                    <view class="box3-content">
                        <view>
                            <navigator>旅游攻略</navigator>
                            <navigator>酒店预订</navigator>
                        </view>
                        <view>
                            <navigator>旅游特价</navigator>
                            <navigator>酒店预订</navigator>
                        </view>
                        <view>
                            <navigator>旅游问答</navigator>
                            <navigator>旅游保险</navigator>
                        </view>
                        <view>
                            <navigator>旅游指南</navigator>
                            <navigator>订火车票</navigator>
                        </view>
                        <view>
                            <navigator>旅游咨询</navigator>
                            <navigator>APP下载</navigator>
                        </view>
                        <view class="textColor">
                            旅游商城全球商家入驻
                        </view>
                    </view>
                    
                </view>
                <view class="box4">
                    <view class="box4-content">
                        <view src="../../static/bottom/app.png" mode=""></view>
                        <view>马蜂窝APP</view>
                        <view>扫码立即下载</view>
                    </view>
                    <view>
                        <view src="../../static/bottom/dingyuehao.gif" mode=""></view>
                        <view>马蜂窝旅游</view>
                        <view>订阅号</view>
                    </view>
                    <view>
                        <view src="../../static/bottom/fuwuhao.png" mode=""></view>
                        <view>马蜂窝良品</view>
                        <view>官方服务号</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        }
    }
</script>

<style lang="scss">
    .bot{
        background-color: #3c3c3c;
        color: #c2c2c2;
        line-height: 22px;
        font-size: 12px;
        margin-top: 50px;
       .bot-content{
           width: 1105px;
           margin: 0 auto;
           .box{
               display: flex;
               flex-wrap: wrap;
                padding: 30px 8px 40px 8px;
                &>view{
                    
                    &>view:nth-child(1){
                        font-size: 14px;
                        height: 30px;
                    }
                }
               navigator{
                   display: inline-block;
               }
               navigator:hover{
                   color: #fff;
               }
               .textColor{
                    color: $color;
                    display: inline-block;
                    margin-right: 3px;
               }
              
               .box1{
                 width: 200px;
                 margin-right: 66px;
               }
               .box2{
                   width: 145px;
                   margin-right: 85px;
                   navigator{
                       margin-right: 10px;
                   }
               }
               .box3{
                   width: 135px;
                   margin-right: 80px;
                   .box3-content{
                       margin-right: -35px;
                   }
                   navigator{
                       width: 85px;
                   }
               }
               .box4{
                   display: flex;
                   flex-wrap: wrap;
                   line-height: 25px;
                   &>view{
                       width: 100px;
                       text-align: center;
                   }
                   .font{
                   }
                   &>view:not(:last-child){
                       margin-right: 30px;
                   }
                   &>view>view:not(:first-child){
                       font-size: 12px;
                   }
                    &>view>view:nth-child(1){
                        height: 90px;
                        margin: 0 0 8px 6px;
                    }
                   &>view:nth-child(1)>view:nth-child(1){
                        background: url(../../static/bottom/app.png) no-repeat;
                   }
                   &>view:nth-child(2)>view:nth-child(1){
                        background: url(../../static/bottom/dingyuehao.gif) no-repeat;
                   } 
                   &>view:nth-child(3)>view:nth-child(1){
                        background: url(../../static/bottom/fuwuhao.png) no-repeat;
                   }
               }
           }
           
       } 
    }
</style>
