<template>
  <div class="w-screen overflow-hidden flex flex-col h-full relative">
    <ui-nav-bar @clickMenu="showSlider = !showSlider" v-bind="$attrs">
      <template v-slot:search>
        <slot name="search"></slot>
      </template>
    </ui-nav-bar>
    <div v-bind="$attrs" class="page-body flex-1 overflow-hidden relative">
      <ui-scroll-view>
        <div v-if="showSlider" class="w-full h-full bg-[rgba(0,0,0,0.6)]   absolute flex justify-end z-50">
          <div @click="showSlider = false" class="h-full flex-1">
            
          </div>
          <div class=" h-full w-400rem bg-white right-0 flex flex-col items-center">
            <div class="bg-[#F7F7F7] w-336rem h-98rem rounded-full flex items-center pl-24rem mt-48rem">
              <div
                class="w-40rem h-40rem rounded-full mr-12rem border-2rem border-black border-solid flex justify-center items-center text-[#231815]">
                中
              </div>
              <div>中文简体</div>
            </div>
            <div class="bg-[#F7F7F7] w-336rem h-98rem rounded-full flex items-center pl-24rem mt-48rem">
              <div
                class="w-40rem h-40rem rounded-full mr-12rem border-2rem border-black border-solid flex justify-center items-center text-[#231815]">
                中
              </div>
              <div>中文繁体</div>
            </div>
          </div>
        </div>

        <slot></slot>
      </ui-scroll-view>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showSlider: false
    }
  }
};
</script>
<style>
.page-body {}
</style>
