<template>
  <div class="app-frame">
    <div class="title">{{title}}</div>
    <div class="app-title">
      <img :src="bg" alt="" srcset="" width="100%">
    </div>
    <div><slot></slot></div>
  </div>
</template>

<script>
export default {
  name: 'miniapp',
  props: {
    title: {
      type: String,
      default () {
        return '';
      }
    },
    bg: {
      type: String,
      default () {
        return require('assets/apptitle.png')
      }
    }
  },
};
</script>

<style>
  .app-frame {
      width: 400px;
      min-height: 1000px;
      display: inline-block;
      background-color: #F2F2F2;
      border: 1px solid #CCCCCC;
      border-radius: 10px;
      padding-left: 10px;
      padding-right: 10px;
  }

  .app-title {
    /* background-image: url('~assets/apptitle.png'); */
    /* background-size: cover; */
    margin-bottom: 10px;
  }

  .title {
      font-size: 25px;
      text-align: center;
      margin-top: 10px;
      margin-bottom: 10px;
  }
</style>