dvcp_v2_wxcp_app/src/components/AiTopFixed.vue

<template>
  <section class="AiTopFixed" :style="{background}">
    <!--占位区-->
    <div class="placeholder">
      <div v-if="$slots.tabs">
        <slot name="tabs"/>
      </div>
      <div class="content" v-if="$slots.default">
        <slot/>
      </div>
    </div>
    <!--悬浮区-->
    <div class="fixed" :style="{background}">
      <div v-if="$slots.tabs">
        <slot name="tabs"/>
      </div>
      <div class="content" v-if="$slots.default">
        <slot/>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "AiTopFixed",
  props: {
    background: {default: "#fff"}
  }
}
</script>

<style lang="scss" scoped>
.AiTopFixed {
  width: 100%;

  & > div {
    width: 100%;
  }

  .fixed {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100rpx;
    top: 0;
    position: fixed;
    z-index: 9;
  }

  .placeholder {
    visibility: hidden;
    opacity: 0;
  }

  .content {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100rpx;
    padding: 0 32px;
    box-sizing: border-box;
  }

  ::v-deep .u-search {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
    margin-bottom: 32px !important;
  }
}
</style>