商家详情-导航栏和header布局-tab标签页完成

导航栏和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>

效果图