导航栏和header布局
<style scoped>
.merchant-container >>> .van-nav-bar {
background: none;
}
.merchant-container >>> .van-hairline--bottom::after {
border: none;
}
.van-nav-bar >>> .van-icon {
color: #fff;
}
</style>
<style scoped lang='scss'>
.header-group {
background-color: #2e2f3b;
padding: 10px;
display: flex;
margin-top: -46px;
padding-top: 46px;
.logo {
width: 85px;
height: 64px;
}
.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://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603508165048&di=173933a25d0cfc7e41c08434c5aea9a4&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F17%2F09%2F17%2Fd33e536cb0c1cd3d139d421ed41a44ba.jpg"
alt=""
class="logo"
/>
<div class="merchant-info">
<div class="delivery-info"><span>20分钟</span> | <span>1km</span></div>
<div class="notice">
公告: 欢迎光临肯德基宅急送,专业外卖,全程保温,准时送达!
</div>
</div>
</div>
</div>
</template>
<script>
import { NavBar, Tab, Tabs } from "vant";
export default {
name: "merchant",
data() {
return {
active: 0
};
},
components: {
[NavBar.name]: NavBar,
[Tab.name]: Tab,
[Tabs.name]: Tabs,
},
};
</script>
效果图
tab标签页
<van-tabs v-model="active">
<van-tab title="点菜">内容 1</van-tab>
<van-tab title="评价">内容 2</van-tab>
<van-tab title="商家">内容 3</van-tab>
</van-tabs>
效果图