vue四十四：Vue美团项目之商家详情-导航栏和header布局

定义商家详情页

<template>
  <div class="">
      商家详情
  </div>
</template>


<script type="text/ecmascript-6">
export default {
  name: "",
  data(){
    return {}
  },
  components: {}
};
</script>


<style scoped lang="scss">

</style>

定义路由

{path: "/merchant/:merchant_id", component: Merchant, name: "merchant"}

使用路由

效果

使用vant组件实现商家详情顶部

实现头部栏

修改顶部导航栏css

使用vant组件商家详情页布局

 

 

<style scoped>
    .merchant-container >>> .van-nav-bar {
        background: none;
    }

    /*去掉横线*/
    .merchant-container >>> .van-hairline--bottom::after {
        border: none;
    }

    /*修改箭头颜色*/
    .merchant-container >>> .van-icon {
        color: #fff;
    }
</style>

<style scoped lang="scss">
    .header-group {
        background-color: black;
        padding: 10px;
        display: flex;
        margin-top: -46px;
        padding-top: 46px;

        .logo {
             85px;
            height: 75px;
        }

        .merchant-info {
            flex: 1;
            margin-left: 10px;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            overflow: hidden;
        }

        .notice {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }
</style>

<template>
    <div class="merchant-container">
        <van-nav-bar left-arrow></van-nav-bar>
        <div class="header-group">
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP.17S875eLr_HDQD8FGwagqQAAAA?w=151&h=201&c=7&o=5&dpr=1.25&pid=1.7"
                 alt="" class="logo">
            <div class="merchant-info">
                <div class="delivery-info">
                    <span>20分钟</span> | <span>3KM</span>
                </div>
                <div class="notice">
                    公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告
                </div>
            </div>
        </div>
        <van-tabs v-model="active">
            <van-tab title="点菜">
                点菜页面
            </van-tab>
            <van-tab title="评价">
                评价页面
            </van-tab>
            <van-tab title="商家">
                商家页面
            </van-tab>
        </van-tabs>
    </div>
</template>


<script type="text/ecmascript-6">
    import {NavBar, Tab, Tabs} from 'vant';

    export default {
        name: "",
        data() {
            return {
                active: 0
            }
        },
        components: {
            [NavBar.name]: NavBar,
            [Tab.name]: Tab,
            [Tabs.name]: Tabs
        }
    };
</script>