src/components/menu-page/page.vue

   1 <template>
   2     <div class="mp bg-gray">
   3         <div>
   4             <i class="iconfont btn-close" @click="back">&#xe605;</i>
   5             <div class="title">{{title}}</div>
   6         </div>
   7         <div class="content">
   8           <slot></slot>
   9         </div>
  10     </div>
  11 </template>
  12
  13 <script>
  14 export default {
  15   props: {
  16     title: ""
  17   },
  18   methods: {
  19     back() {
  20       this.$emit("back");
  21     }
  22   }
  23 };
  24 </script>
  25
  26 <style scoped>
  27 .mp {
  28   height: 100%;
  29   position: absolute;
  30   top: 0;
  31   left: 0;
  32   right: 0;
  33   padding: 40px 30px;
  34 }
  35 .title {
  36   font-size: 24px;
  37   margin-bottom: 35px;
  38 }
  39 .content {
  40   word-wrap: break-word;
  41   font-size: 18px;
  42 }
  43 </style>