<template>
  <div class="container">
    <WlHeader :needBottomBorder="true">WlHeader 头部</WlHeader>
    <div class="content">
      <div class="title">基础用法</div>
      <WlHeader title="头部" showClose showBack />
      <div class="title">默认插槽</div>
      <WlHeader>标题</WlHeader>
      <div class="title">自定义返回内容</div>
      <WlHeader>
        标题
        <div slot="header_part_left">返回</div>
      </WlHeader>
      <div class="title">自定义关闭内容</div>
      <WlHeader>标题
        <div slot="header_part_right">关闭</div>
      </WlHeader>
      <div class="title">下划线</div>
      <WlHeader :needBottomBorder="true">标题</WlHeader>
    </div>
  </div>
</template>

<script>
export default {
  name: "WlHeader-Example",
  data() {
    return {
      searchVal: "默认搜索内容",
    };
  },
};
</script>

<style scoped lang="scss">
.title {
  padding: j(16) j(15);
  color: rgba(69, 90, 100, 0.6);
  font-weight: normal;
  font-size: j(16);
}

.pic-wrap {
  width: 100%;
}

.pic-tx-wrap {
  width: j(100);
  height: j(100);
}

.container {
  background-color: rgb(247, 248, 250);
  height: 100%;
}
</style>
