<template>
  <view class="drawer-home">
    <view class="drawer-home-nav">
      <uni-icons
        type="closeempty"
        size="22"
        color="#333333"
        class="close-icon"
        @click="closeDrawer"
      ></uni-icons>
      <text class="title">我的</text>
    </view>

    <MineSetting />
  </view>
</template>

<script setup>
import MineSetting from "./MineSetting.vue";
import { defineEmits } from "vue";
const emits = defineEmits(["closeDrawer"]);

const closeDrawer = () => {
  emits("closeDrawer");
};
</script>

<style lang="scss" scoped>
.drawer-home {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  padding-top: 44px;
}

.drawer-home-nav {
  position: relative;
  padding: 12px;
  display: flex;
  justify-content: center; /* 文字水平居中 */
  align-items: center; /* 垂直居中 */

  .title {
    font-size: 18px;
    text-align: center;
    color: #333333;
  }

  .close-icon {
    position: absolute;
    left: 12px; /* 距离左边12px */
  }
}
</style>
