<template>
  <div class="ignore_com-top" id="header" :style="{ background: color }">
    <div class="header" :style="{ background: color }">
      <div class="header-return" @click="goBack">
        <VanIcon name="arrow-left" />
      </div>
      <div class="header-title">
        <span>{{ route.meta.title }}</span>
        <span>{{ route.meta.title1 }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { Icon } from "vant";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  props: {
    color: {
      type: String,
      default: () => "#fff",
    },
    // title: {
    //   type: String,
    //   default: () => "",
    // },
  },
  components: {
    VanIcon: Icon,
  },
  setup(props) {
    const router = useRouter();
    const route: any = useRoute();
    const proxyData = reactive({
      route: route,
      goBack() {
        router.back();
      },
    });
    onMounted(() => {
      console.log(props);
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>

<style lang="scss" scoped>
.header {
  box-sizing: border-box;
  padding: 5px 10px;
  width: 100%;
  height: 100%;
}

.header-return {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  //background: rgba(0, 0, 0, 0.15);
  //border: 0.5px solid rgba(255, 255, 255, 0.25);
  box-sizing: border-box;
  //border-radius: 25px;
  font-size: 24px;
  color: #000;
  vertical-align: middle;
}
.header-title {
  display: inline-block;
  line-height: 26px;
  span {
    &:nth-child(1) {
      display: inline-block;
      padding-left: 20px;
      font-family: "Noto Sans SC";
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      vertical-align: middle;
    }
    &:nth-child(2) {
      padding-left: 5px;
      display: inline-block;
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      transform: scale(0.9);
      color: #656872;
      vertical-align: middle;
    }
  }
}
</style>
