<template>
  <div class="order-information">
    <div class="header">{{ title }}</div>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
const props = defineProps(['title'])
</script>

<style lang="scss" scoped>
.order-information {
  width: 100%;
  height: 3.4896rem;
  border: 1px dashed #aaa;
  margin-top: 0.1563rem;
  .header {
    background-color: #f3f4f8;
    height: 0.2083rem;
    color: #252b3a;
    font-size: 0.0833rem;
    line-height: 0.2083rem;
    padding: 0 0.2604rem;
    display: flex;
    align-items: center;
  }
  .header::before {
    content: ' ';
    display: block;
    background-color: #ff4e8d;
    width: 0.0156rem;
    height: 0.0833rem;
    margin-right: 0.026rem;
  }
}
</style>
